diff -r 774d75a930f8 -r 30e0ed21127c player/css/styles.css
--- a/player/css/styles.css	Fri May 17 14:17:30 2013 +0200
+++ b/player/css/styles.css	Tue May 21 19:12:29 2013 +0200
@@ -47,6 +47,15 @@
     overflow: hidden;
 }
 
+/* Fonts */
+
+@font-face {
+    font-family: 'Futura-Medium';
+    src: url('../fonts/Futura-Medium.woff') format('woff'),
+         url('../fonts/Futura-Medium.ttf') format('truetype'),
+         url('../fonts/Futura-Medium.svg#Futura-Medium') format('svg');
+}
+
 /* End of the reset part */
 
 body {
@@ -62,11 +71,12 @@
 /* Main Video Frame */
 
 .main-video {
-    height: 562px;
+    height: 562px; position: relative;
 }
 
 .project-title {
-    text-align: center; line-height: 40px; font-size: 17px; color: #b0b0b0; font-weight: bold;
+    text-align: center; line-height: 40px; font-size: 17px; color: #b0b0b0;
+    font-family: 'Futura-Medium';
 }
 
 .tags {
@@ -74,7 +84,8 @@
 }
 
 .tags-title {
-    line-height: 40px; padding-left: 20px; font-size: 11px; color: #B8155F; font-weight: bold; text-transform: uppercase;
+    line-height: 40px; padding-left: 20px; font-size: 11px; color: #B8155F;
+    font-family: 'Futura-Medium'; text-transform: uppercase;
 }
 
 /* Pictograms on the left */
@@ -161,6 +172,150 @@
     background-position: -24px -120px;
 }
 
+/* Annotations */
+
+.annotation {
+    position: absolute;
+}
+
+.annotation-title {
+    font-family: 'Futura-Medium'; text-align: center;
+}
+
+.close-annotation {
+    float: right; text-decoration: none; margin: 0 5px;
+    font-weight: bold; font-size: 20px;
+}
+
+.text-annotation, .slideshow-annotation, .video-annotation {
+    left: 45px; top: 20px; right: 35px;
+}
+
+/* Text annotation */
+
+.text-annotation {
+    background: #ffffff; max-height: 522px; overflow: auto;
+}
+
+.text-annotation .close-annotation {
+    color: #000000;
+}
+
+.text-annotation .annotation-title {
+    font-size: 23px; margin: 24px 0 0;
+}
+
+.text-annotation .annotation-contents {
+    font-family: Georgia, 'Times New Roman', serif;
+    margin: 30px 45px 45px;
+    column-count: 2; column-gap: 60px;
+    -moz-column-count: 2; -moz-column-gap: 60px;
+    -webkit-column-count: 2; -webkit-column-gap: 60px;
+}
+
+.text-annotation p {
+    margin-bottom: 10px;
+}
+
+/* Slideshow annotation */
+
+.slideshow-center {
+    position: relative; background: rgba(0,0,0,.7);
+}
+
+.slideshow-annotation .annotation-title {
+    height: 35px; line-height: 35px; color: #ffffff; font-size: 14px; background: #000000;
+}
+
+.slideshow-frame {
+    float: left; width: 650px; min-height: 60px;
+}
+
+.slideshow-image {
+    max-width: 650px; max-height: 452px; margin: 0 auto; display: block;
+}
+
+.slideshow-play-pause {
+    float: left; padding: 10px 15px 11px;
+    background: #3e3e3e; cursor: pointer;
+}
+
+.slideshow-play-pause a {
+    background-image: url(../img/sprites.png); width: 14px; height: 14px;
+    background-position: 0 -194px; display: block;
+}
+
+.slideshow-play-pause.pause a {
+    background-position: -24px -194px;
+}
+
+.slideshow-play-pause:hover {
+    background: #606060;
+}
+
+.slideshow-bottom {
+    clear: both; height: 35px; background: #000000;
+}
+
+.slideshow-annotation .close-annotation,
+.video-annotation .close-annotation {
+    color: #ffffff;
+}
+
+.slideshow-annotation p,
+.video-annotation p {
+    margin: 10px 25px 10px 10px;
+    font-size: 12px; color: #CCCCCC;
+}
+
+.slideshow-description {
+    margin-left: 650px; max-height: 452px; overflow: auto;
+}
+
+.slideshow-center:after {
+    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;
+}
+
+.slideshow-arrow {
+    position: absolute; top: 50%; margin-top: -22px; padding: 10px; cursor: pointer;
+}
+
+.slideshow-arrow a {
+    display: block; height: 24px; width: 14px; background-image: url(../img/sprites.png);
+}
+
+.slideshow-arrow:hover {
+    background-color: rgba(255,255,255,.5);
+}
+
+.slideshow-previous {
+    left: 0;
+}
+
+.slideshow-previous a {
+    background-position: 0 -208px;
+}
+
+.slideshow-next {
+    right: 0;
+}
+
+.slideshow-next a {
+    background-position: -14px -208px;
+}
+
 /* Bottom bar */
 
 .bottom-bar {
@@ -168,13 +323,27 @@
 }
 
 .play-button {
-    float: left; width: 30px; height: 30px; border-radius: 15px;
-    background: #555555;
+    float: left; width: 14px; height: 14px;
+    padding: 8px; border-radius: 15px;
+    background: #555555; cursor: pointer;
     margin: 8px 0 0 15px;
 }
 
+.play-button:hover {
+    background: #909090;
+}
+
+.play-button a {
+    background-image: url(../img/sprites.png); width: 14px; height: 14px; display: block;
+    background-position: 0 -180px;
+}
+
+.play-button.pause a {
+    background-position: -24px -180px;
+}
+
 .chapters-bar {
-    margin: 0 19px 0 59px; height: 45px; position: relative;
+    margin: 0 20px 0 60px; height: 45px; position: relative; cursor: pointer;
 }
 
 .chapter {
@@ -183,6 +352,9 @@
 
 .chapter-block {
     width: 100%; height: 45px; background: #303030;
+    margin: 0 -1px;
+    border-style: none solid; border-width: 1px;
+    border-color: #000000;
 }
 
 .chapter:hover .chapter-block {
@@ -190,10 +362,92 @@
 }
 
 .chapter-title {
-    font-size: 9px; text-transform: uppercase; margin: 0 -40px;
-    text-align: center; color: #909090; display: none; line-height: 30px;
+    position: absolute; top: 53px; left: -40px; right: -40px;
+    font-size: 9px; text-transform: uppercase;
+    text-align: center; color: #909090; display: none;
+    font-family: 'Futura-Medium';
 }
 
 .chapter:hover .chapter-title {
     display: block;
 }
+
+.chip {
+    position: absolute; width: 11px; height: 11px; top: 17px; border-radius: 6px;
+    margin-left: -6px;
+}
+
+.chip.video {
+    background: #be4477;
+}
+
+.chip.audio {
+    background: #63be6c;
+}
+
+.chip.slideshow {
+    background: #f69058;
+}
+
+.chip.text {
+    background: #5e90cb;
+}
+
+.chip.quote {
+    background: #00aeb5;
+}
+
+.chip.link {
+    background: #8985bb;
+}
+
+.left-hiding-block, .right-hiding-block {
+    position: absolute; width: 6px; height: 11px; top: 17px; background: #000000; 
+}
+
+.left-hiding-block {
+    left: -6px;
+}
+
+.right-hiding-block {
+    right: -6px;
+}
+
+.prev-chapter, .next-chapter {
+    width: 12px; height: 16px; margin: 8px 5px;
+    background: url(../img/sprites.png);
+}
+
+.next-chapter {
+    float: right; background-position: -12px -144px;
+}
+
+.next-chapter:hover {
+    background-position: -36px -144px;
+}
+
+.next-chapter.inactive {
+    background-position: -12px -160px;
+}
+
+.prev-chapter {
+    float: left; background-position: 0 -144px;
+}
+
+.prev-chapter:hover {
+    background-position: -24px -144px;
+}
+
+.prev-chapter.inactive {
+    background-position: 0 -160px;
+}
+
+.progress-indicator {
+    position: absolute; top: 0; width: 2px; height: 100%; background: #c0c0c0; /* margin-left: -1px; */
+}
+
+.progress-indicator:hover {
+    background: #ffffff;
+}
+
+/* */