diff -r e8faf97d2a40 -r 2e1053dff5f2 player/css/styles.css
--- a/player/css/styles.css	Wed May 29 17:05:34 2013 +0200
+++ b/player/css/styles.css	Thu May 30 18:47:48 2013 +0200
@@ -56,6 +56,12 @@
          url('../fonts/Futura-Medium.svg#Futura-Medium') format('svg');
 }
 
+@font-face {
+    font-family: 'Futura-CondensedExtraBold';
+    src: url('../fonts/Futura-CondensedExtraBold.woff') format('woff'),
+         url('../fonts/Futura-CondensedExtraBold.ttf') format('truetype'),
+         url('../fonts/Futura-CondensedExtraBold.svg#Futura-CondensedExtraBold') format('svg');
+}
 /* End of the reset part */
 
 body {
@@ -146,8 +152,8 @@
 .pictolist li {
     line-height: 38px; opacity: 0; display: none; height: 0;
     padding: 6px; width: 38px; overflow: hidden;
-    -webkit-transition: width 0.5s;
-    transition: width 0.5s;
+    -webkit-transition: width 0.8s;
+    transition: width 0.8s;
 }
 
 .pictolist li.hover {
@@ -157,19 +163,18 @@
 .picto {
     float: left; padding: 7px; background:black;
     border-radius: 19px; cursor: pointer;
-    -webkit-transition: box-shadow 0.5s, background 0.5s;
-    transition: box-shadow 0.5s, background 0.5s;
-}
-
-.found .picto {
-    box-shadow: 0 0 8px #ffffff;
-    border: 1px solid #cccccc; padding: 6px;
+    -webkit-transition: background 0.8s;
+    transition: background 0.8s;
 }
 
 .picto-title {
     margin-left: 8px; font-size: 12px; text-transform: uppercase;
-    padding: 4px 6px; background: rgba(0, 0, 0, .5); text-shadow: 1px 1px 1px #000000;
-    font-family: 'Futura-Medium';
+    padding: 4px 6px; background: rgba(0, 0, 0, .7);
+    font-family: 'Futura-CondensedExtraBold';
+}
+
+.found .picto-title {
+    background: rgba(255, 255, 255, .7);
 }
 
 .picto a {
@@ -256,6 +261,12 @@
     background-position: -24px -120px;
 }
 
+.found .picto,
+.current.found picto,
+.hover.found .picto {
+    background: #ffffff;
+}
+
 /* Annotations */
 
 .annotation-templates {
@@ -271,8 +282,7 @@
 }
 
 .close-annotation {
-    float: right; text-decoration: none; margin: 0 5px;
-    font-weight: bold; font-size: 20px;
+    float: right; margin: 10px 10px 0 0; width: 11px; height: 10px; background-image: url(../img/sprites.png);
 }
 
 .annotation {
@@ -299,8 +309,12 @@
     color: #000000;
 }
 
+.white-annotation .close-annotation {
+    background-position: -24px -160px;
+}
+
 .white-annotation .close-annotation:hover {
-    color: #666666;
+    background-position: -36px -160px;
 }
 
 .white-annotation .annotation-title {
@@ -310,7 +324,7 @@
 /* Black annotations */
 
 .black-annotation .annotation-main {
-    position: relative; background: rgba(0,0,0,.7);
+    background: rgba(0,0,0,.7);
 }
 
 .black-annotation .annotation-title {
@@ -318,11 +332,11 @@
 }
 
 .black-annotation .close-annotation {
-    color: #ffffff; margin-right: 10px;
+    background-position: -24px -170px;
 }
 
 .black-annotation .close-annotation:hover {
-    color: #cccccc;
+    background-position: -36px -170px;
 }
 
 .black-annotation p {
@@ -391,11 +405,11 @@
 
 .link-contents {
     font-family: Georgia, 'Times New Roman', serif;
-    margin: 0 80px 35px;
+    margin: 40px 80px 80px;
 }
 
 .link-contents p {
-    text-align: center; font-size: 23px; margin: 30px 0;
+    text-align: center; font-size: 23px; margin: 25px 0;
 }
 
 .link-contents a {
@@ -405,7 +419,7 @@
 /* Audio annotation */
 
 .audio-annotation .media-description {
-    margin: 25px 0 0; font-size: 15px;
+    margin: 25px 0 0; font-size: 15px; font-weight: bold;
 }
 
 .audio-annotation .annotation-main {
@@ -437,7 +451,7 @@
 /* Slideshow annotation */
 
 .slideshow-frame {
-    float: left;
+    float: left; width: 650px; height: 452px; position: relative; background: #000000;
 }
 .slideshow-image {
     max-width: 650px; max-height: 452px; margin: 0 auto; display: block;
@@ -446,8 +460,8 @@
 .slideshow-play-pause {
     float: left; padding: 10px 15px 11px;
     background: #404040; cursor: pointer;
-    -webkit-transition: background 0.5s;
-    transition: background 0.5s;
+    -webkit-transition: background 0.8s;
+    transition: background 0.8s;
 }
 
 .slideshow-play-pause a {
@@ -468,7 +482,7 @@
 }
 
 .slideshow-description {
-    max-height: 452px; overflow: auto;
+    height: 452px; overflow: auto;
 }
 
 .slideshow-title {
@@ -477,8 +491,8 @@
 
 .slideshow-arrow {
     position: absolute; top: 50%; margin-top: -22px; padding: 10px; cursor: pointer;
-    -webkit-transition: background 0.5s;
-    transition: background 0.5s;
+    -webkit-transition: background 0.8s;
+    transition: background 0.8s;
 }
 
 .slideshow-arrow a {
@@ -516,8 +530,8 @@
     padding: 8px; border-radius: 15px;
     background: #555555; cursor: pointer;
     margin: 8px 0 0 15px;
-    -webkit-transition: background 0.5s;
-    transition: background 0.5s;
+    -webkit-transition: background 0.8s;
+    transition: background 0.8s;
 }
 
 .play-button:hover {
@@ -535,7 +549,7 @@
 
 .chapters-bar {
     margin: 0 20px 0 60px; height: 45px; position: relative; cursor: pointer;
-    transition: opacity 0.5s;
+    transition: opacity 0.8s;
 }
 
 .chapter {
@@ -547,8 +561,8 @@
     margin: 0 -1px;
     border-style: none solid; border-width: 1px;
     border-color: #000000;
-    -webkit-transition: box-shadow 0.5s, background 0.5s;
-    transition: box-shadow 0.5s, background 0.5s;
+    -webkit-transition: background 0.8s, opacity 0.8s;
+    transition: background 0.8s, opacity 0.8s;
 }
 
 .chapter.active .chapter-block {
@@ -556,7 +570,7 @@
 }
 
 .chapter.found .chapter-block {
-    box-shadow: 0 0 20px rgba(255, 255, 255, .6) inset;
+    background: #ffffff;
 }
 
 .annotation-onscreen .chapter-block {
@@ -568,8 +582,8 @@
     font-size: 9px; text-transform: uppercase;
     text-align: center; color: #909090; opacity: 0;
     font-family: 'Futura-Medium';
-    -webkit-transition: background 0.5s;
-    transition: opacity 0.5s;
+    -webkit-transition: background 0.8s;
+    transition: opacity 0.8s;
 }
 
 .chapter.active .chapter-title {
@@ -582,12 +596,12 @@
 
 .chip-circle {
     width: 11px; height: 11px; top: 17px; left: -5px; border-radius: 6px; position: absolute;
-    -webkit-transition: box-shadow 0.5s, opacity 0.5s;
-    transition: box-shadow 0.5s, opacity 0.5s;
+    -webkit-transition: background 0.8s, opacity 0.8s;
+    transition: background 0.8s, opacity 0.8s;
 }
 
 .chip-pole {
-    position: absolute; top: 2px; left: 0; width: 0; height: 13px; border-left: 1px solid; display: none;
+    position: absolute; top: 0; left: 0; width: 0; height: 17px; border-left: 1px solid; display: none;
 }
 
 .chip.hover .chip-pole {
@@ -595,10 +609,10 @@
 }
 
 .chip-title {
-    position: absolute; top: 2px; left: 3px; font-size: 9px; line-height: 9px; height: 9px; text-transform: uppercase;
-    display: block; font-family: 'Futura-Medium'; width: 0; overflow: hidden;
-    -webkit-transition: width 0.5s;
-    transition: width 0.5s;
+    position: absolute; top: 1px; left: 3px; font-size: 9px; line-height: 13px; height: 13px;
+    display: block; width: 0; overflow: hidden;
+    -webkit-transition: width 0.8s;
+    transition: width 0.8s;
 }
 
 .chip.hover .chip-title {
@@ -618,33 +632,33 @@
     opacity: 1;
 }
 
-.found .chip-circle {
-    box-shadow: 0 0 8px #ffffff;
-    border: 1px solid #cccccc; width: 9px; height: 9px;
-}
-
 .video .chip-circle {
-    background: #be4477;
+    background: #be4477; color: #be4477;
 }
 
 .audio .chip-circle {
-    background: #63be6c;
+    background: #63be6c; color: #63be6c;
 }
 
 .slideshow .chip-circle {
-    background: #f69058;
+    background: #f69058; color: #f69058;
 }
 
 .text .chip-circle {
-    background: #5e90cb;
+    background: #5e90cb; color: #5e90cb;
 }
 
 .quote .chip-circle {
-    background: #00aeb5;
+    background: #00aeb5; color: #00aeb5;
 }
 
 .link .chip-circle {
-    background: #8985bb;
+    background: #8985bb; color: #8985bb;
+}
+
+.found .chip-circle {
+    background: #ffffff;
+    border: 2px solid; left: -6px; top: 16px; width: 9px; height: 9px;
 }
 
 .left-hiding-block, .right-hiding-block {