--- a/player/css/styles.css	Thu May 16 18:44:32 2013 +0200
+++ b/player/css/styles.css	Fri May 17 14:17:30 2013 +0200
@@ -76,3 +76,124 @@
 .tags-title {
     line-height: 40px; padding-left: 20px; font-size: 11px; color: #B8155F; font-weight: bold; text-transform: uppercase;
 }
+
+/* Pictograms on the left */
+
+.pictolist {
+    position: absolute;
+    left: 20px; bottom: 115px;
+}
+
+.picto {
+    width: 24px; height: 24px; padding: 7px; margin-top: 12px; background:black;
+    border-radius: 19px; cursor: pointer;
+}
+
+.picto a {
+    background: url(../img/sprites.png); display: block; width: 24px; height: 24px;
+}
+
+.picto.video:hover {
+    background: #be4477;
+}
+
+.picto.video:hover a {
+    background-position: -24px 0;
+}
+
+.picto.audio a {
+    background-position: 0 -24px;
+}
+
+.picto.audio:hover {
+    background: #63be6c;
+}
+
+.picto.audio:hover a {
+    background-position: -24px -24px;
+}
+
+.picto.slideshow a {
+    background-position: 0 -48px;
+}
+
+.picto.slideshow:hover {
+    background: #f69058;
+}
+
+.picto.slideshow:hover a {
+    background-position: -24px -48px;
+}
+
+.picto.text a {
+    background-position: 0 -72px;
+}
+
+.picto.text:hover {
+    background: #5e90cb;
+}
+
+.picto.text:hover a {
+    background-position: -24px -72px;
+}
+
+.picto.quote a {
+    background-position: 0 -96px;
+}
+
+.picto.quote:hover {
+    background: #00aeb5;
+}
+
+.picto.quote:hover a {
+    background-position: -24px -96px;
+}
+
+.picto.link a {
+    background-position: 0 -120px;
+}
+
+.picto.link:hover {
+    background: #8985bb;
+}
+
+.picto.link:hover a {
+    background-position: -24px -120px;
+}
+
+/* Bottom bar */
+
+.bottom-bar {
+    padding-top: 20px;
+}
+
+.play-button {
+    float: left; width: 30px; height: 30px; border-radius: 15px;
+    background: #555555;
+    margin: 8px 0 0 15px;
+}
+
+.chapters-bar {
+    margin: 0 19px 0 59px; height: 45px; position: relative;
+}
+
+.chapter {
+    position: absolute; top: 0;
+}
+
+.chapter-block {
+    width: 100%; height: 45px; background: #303030;
+}
+
+.chapter:hover .chapter-block {
+    background: #3e3e3e;
+}
+
+.chapter-title {
+    font-size: 9px; text-transform: uppercase; margin: 0 -40px;
+    text-align: center; color: #909090; display: none; line-height: 30px;
+}
+
+.chapter:hover .chapter-title {
+    display: block;
+}