--- a/player/css/styles.css	Thu May 23 13:11:56 2013 +0200
+++ b/player/css/styles.css	Fri May 24 18:49:09 2013 +0200
@@ -109,6 +109,33 @@
     color: #B8155F; background: #202020;
 }
 
+/* Annotation colors */
+
+.video {
+    color: #be4477;
+}
+
+.audio {
+    color:#63be6c;
+}
+
+.slideshow {
+    color: #f69058;
+}
+
+.text {
+    color:#5e90cb;
+}
+
+.quote {
+    color:#00aeb5;
+}
+
+.link {
+    color:#8985bb;
+}
+
+
 /* Pictograms on the left */
 
 .pictolist {
@@ -116,87 +143,104 @@
     left: 20px; bottom: 115px;
 }
 
+.pictolist li {
+    height: 34px; margin-top: 12px; line-height: 34px; display: none;
+}
+
 .picto {
-    width: 24px; height: 24px; padding: 7px; margin-top: 12px; background:black;
+    float: left; padding: 7px; background:black;
     border-radius: 19px; cursor: pointer;
 }
 
+.picto-title {
+    margin-left: 10px; font-size: 12px; text-transform: uppercase;
+    display: none; text-shadow: 0 0 2px #000000; font-family: 'Futura-Medium';
+}
+
+.hover .picto-title {
+    display: inline;
+}
+
 .picto a {
     background: url(../img/sprites.png); display: block; width: 24px; height: 24px;
 }
 
-.picto.video:hover {
+.video.hover .picto {
     background: #be4477;
 }
 
-.picto.video:hover a {
+.video.hover .picto a {
     background-position: -24px 0;
 }
 
-.picto.audio a {
+.audio .picto a {
     background-position: 0 -24px;
 }
 
-.picto.audio:hover {
+.audio.hover .picto {
     background: #63be6c;
 }
 
-.picto.audio:hover a {
+.audio.hover .picto a {
     background-position: -24px -24px;
 }
 
-.picto.slideshow a {
+.slideshow .picto a {
     background-position: 0 -48px;
 }
 
-.picto.slideshow:hover {
+.slideshow.hover .picto {
     background: #f69058;
 }
 
-.picto.slideshow:hover a {
+.slideshow.hover .picto a {
     background-position: -24px -48px;
 }
 
-.picto.text a {
+.text .picto a {
     background-position: 0 -72px;
 }
 
-.picto.text:hover {
+.text.hover .picto {
     background: #5e90cb;
 }
 
-.picto.text:hover a {
+.text.hover .picto a {
     background-position: -24px -72px;
 }
 
-.picto.quote a {
+.quote .picto a {
     background-position: 0 -96px;
 }
 
-.picto.quote:hover {
+.quote.hover .picto {
     background: #00aeb5;
 }
 
-.picto.quote:hover a {
+.quote.hover .picto a {
     background-position: -24px -96px;
 }
 
-.picto.link a {
+.link .picto a {
     background-position: 0 -120px;
 }
 
-.picto.link:hover {
+.link.hover .picto {
     background: #8985bb;
 }
 
-.picto.link:hover a {
+.link.hover .picto a {
     background-position: -24px -120px;
 }
 
 /* Annotations */
 
+.annotation-templates {
+    display: none;
+}
+
 .annotation {
-    position: absolute; display: none;
+    position: absolute;
 }
 
 .annotation-title {
@@ -235,7 +279,7 @@
 
 .text-annotation .annotation-contents {
     font-family: Georgia, 'Times New Roman', serif;
-    margin: 0 45px 45px;
+    margin: 0 45px 35px;
     column-count: 2; column-gap: 60px;
     -moz-column-count: 2; -moz-column-gap: 60px;
     -webkit-column-count: 2; -webkit-column-gap: 60px;
@@ -315,16 +359,8 @@
     content: "."; visibility: hidden; display: block; height: 1px; clear: both;
 }
 
-.slideshow-title, .slideshow-credits {
-    line-height: 35px; margin: 0 15px; font-family: 'Futura-Medium'; font-size: 10px;
-}
-
 .slideshow-title {
-    float: left; color: #cccccc;
-}
-
-.slideshow-credits {
-    float: right; color: #808080;
+    line-height: 35px; margin: 0 15px; font-family: 'Futura-Medium'; font-size: 13px; color: #cccccc; float: left;
 }
 
 .slideshow-arrow {
@@ -408,6 +444,10 @@
     background: #8a1249;
 }
 
+.annotation-onscreen .chapter-block {
+    opacity: .5;
+}
+
 .chapter-title {
     position: absolute; top: 53px; left: 50%; width: 240px; margin-left: -120px;
     font-size: 9px; text-transform: uppercase;
@@ -420,31 +460,53 @@
 }
 
 .chip {
-    position: absolute; width: 11px; height: 11px; top: 17px; border-radius: 6px;
-    margin-left: -6px;
+    position: absolute; top: 0;
+}
+
+.chip-circle {
+    width: 11px; height: 11px; top: 17px; left: -5px; border-radius: 6px; position: absolute;
+}
+
+.chip-title {
+    position: absolute; top: 2px; left: 0; font-size: 9px; text-transform: uppercase;
+    display: none; font-family: 'Futura-Medium'; width: 200px; border-left: 1px solid; padding: 0 3px 4px; line-height: 9px;
 }
 
-.chip.video {
+.chip.hover .chip-title,
+.chip.current .chip-title {
+    display: block;
+}
+
+.annotation-onscreen .chip {
+    opacity: .3;
+}
+
+.chip.current,
+.chip.hover {
+    opacity: 1;
+}
+
+.video .chip-circle {
     background: #be4477;
 }
 
-.chip.audio {
+.audio .chip-circle {
     background: #63be6c;
 }
 
-.chip.slideshow {
+.slideshow .chip-circle {
     background: #f69058;
 }
 
-.chip.text {
+.text .chip-circle {
     background: #5e90cb;
 }
 
-.chip.quote {
+.quote .chip-circle {
     background: #00aeb5;
 }
 
-.chip.link {
+.link .chip-circle {
     background: #8985bb;
 }