diff -r 30e0ed21127c -r 5a4dd4e6bbe7 player/css/styles.css
--- a/player/css/styles.css	Tue May 21 19:12:29 2013 +0200
+++ b/player/css/styles.css	Thu May 23 13:10:54 2013 +0200
@@ -80,14 +80,35 @@
 }
 
 .tags {
-    position: absolute; top: 0; left: 0; width: 110px;
+    position: absolute; top: 0; left: 0; width: 140px; z-index: 2; font-size: 12px; cursor: pointer;
 }
 
 .tags-title {
-    line-height: 40px; padding-left: 20px; font-size: 11px; color: #B8155F;
+    line-height: 40px; padding: 0 15px; font-size: 11px; color: #B8155F;
     font-family: 'Futura-Medium'; text-transform: uppercase;
 }
 
+.tags:hover .tags-title {
+    background: #404040; color: #ffffff;
+}
+
+.tags-list {
+    background: #303030;
+    padding: 10px 0; display: none;
+}
+
+.tags:hover .tags-list {
+    display: block;
+}
+
+.tag {
+    color: #cccccc; padding: 5px 15px;
+}
+
+.tag:hover {
+    color: #B8155F; background: #202020;
+}
+
 /* Pictograms on the left */
 
 .pictolist {
@@ -175,7 +196,7 @@
 /* Annotations */
 
 .annotation {
-    position: absolute;
+    position: absolute; display: none;
 }
 
 .annotation-title {
@@ -187,7 +208,7 @@
     font-weight: bold; font-size: 20px;
 }
 
-.text-annotation, .slideshow-annotation, .video-annotation {
+.text-annotation, .slideshow-annotation, .video-annotation, .audio-annotation {
     left: 45px; top: 20px; right: 35px;
 }
 
@@ -197,17 +218,24 @@
     background: #ffffff; max-height: 522px; overflow: auto;
 }
 
-.text-annotation .close-annotation {
+.text-annotation .close-annotation,
+.audio-annotation .close-annotation {
     color: #000000;
 }
 
-.text-annotation .annotation-title {
-    font-size: 23px; margin: 24px 0 0;
+.text-annotation .close-annotation:hover,
+.audio-annotation .close-annotation:hover {
+    color: #666666;
+}
+
+.text-annotation .annotation-title,
+.audio-annotation .annotation-title {
+    font-size: 23px; margin: 24px 0;
 }
 
 .text-annotation .annotation-contents {
     font-family: Georgia, 'Times New Roman', serif;
-    margin: 30px 45px 45px;
+    margin: 0 45px 45px;
     column-count: 2; column-gap: 60px;
     -moz-column-count: 2; -moz-column-gap: 60px;
     -webkit-column-count: 2; -webkit-column-gap: 60px;
@@ -217,6 +245,12 @@
     margin-bottom: 10px;
 }
 
+/* Audio annotation */
+
+.audio-annotation {
+    background: #ffffff;
+}
+
 /* Slideshow annotation */
 
 .slideshow-center {
@@ -228,7 +262,7 @@
 }
 
 .slideshow-frame {
-    float: left; width: 650px; min-height: 60px;
+    float: left;
 }
 
 .slideshow-image {
@@ -237,7 +271,7 @@
 
 .slideshow-play-pause {
     float: left; padding: 10px 15px 11px;
-    background: #3e3e3e; cursor: pointer;
+    background: #404040; cursor: pointer;
 }
 
 .slideshow-play-pause a {
@@ -259,17 +293,22 @@
 
 .slideshow-annotation .close-annotation,
 .video-annotation .close-annotation {
-    color: #ffffff;
+    color: #ffffff; margin-right: 10px;
+}
+
+.slideshow-annotation .close-annotation:hover,
+.video-annotation .close-annotation:hover {
+    color: #cccccc;
 }
 
 .slideshow-annotation p,
 .video-annotation p {
-    margin: 10px 25px 10px 10px;
+    margin: 10px 25px 10px 15px;
     font-size: 12px; color: #CCCCCC;
 }
 
 .slideshow-description {
-    margin-left: 650px; max-height: 452px; overflow: auto;
+    max-height: 452px; overflow: auto;
 }
 
 .slideshow-center:after {
@@ -357,18 +396,26 @@
     border-color: #000000;
 }
 
-.chapter:hover .chapter-block {
-    background: #3e3e3e;
+.chapter.active .chapter-block {
+    background: #404040;
+}
+
+.chapter.found .chapter-block {
+    background: #510829;
+}
+
+.chapter.found.active .chapter-block {
+    background: #8a1249;
 }
 
 .chapter-title {
-    position: absolute; top: 53px; left: -40px; right: -40px;
+    position: absolute; top: 53px; left: 50%; width: 240px; margin-left: -120px;
     font-size: 9px; text-transform: uppercase;
     text-align: center; color: #909090; display: none;
     font-family: 'Futura-Medium';
 }
 
-.chapter:hover .chapter-title {
+.chapter.active .chapter-title {
     display: block;
 }
 
@@ -415,7 +462,7 @@
 
 .prev-chapter, .next-chapter {
     width: 12px; height: 16px; margin: 8px 5px;
-    background: url(../img/sprites.png);
+    background: url(../img/sprites.png); cursor: pointer;
 }
 
 .next-chapter {