--- 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;
+}

Binary file player/img/sprites.png has changed

--- a/player/index.html	Thu May 16 18:44:32 2013 +0200
+++ b/player/index.html	Fri May 17 14:17:30 2013 +0200
@@ -19,7 +19,39 @@
         </div>
         <div class="main-video" style="background:#101010;">
             <img src="../creation/Links/bc30-1000pxl.jpg" style="margin: 80px 0" />
+            <ul class="pictolist">
+                <li class="picto video">
+                    <a href="#"></a>
+                </li>
+                <li class="picto audio">
+                    <a href="#"></a>
+                </li>
+                <li class="picto slideshow">
+                    <a href="#"></a>
+                </li>
+                <li class="picto text">
+                    <a href="#"></a>
+                </li>
+                <li class="picto quote">
+                    <a href="#"></a>
+                </li>
+                <li class="picto link">
+                    <a href="#"></a>
+                </li>
+            </ul>
         </div>
-        <div class="bottom-bar"></div>
+        <div class="bottom-bar">
+            <div class="play-button">
+                <a href="#"></a>
+            </div>
+            <div class="chapters-bar">
+                <ul class="chapters-list">
+                    <li class="chapter" style="left: 0; width: 100px;">
+                        <div class="chapter-block"></div>
+                        <div class="chapter-title">Histoire et contexte</div>
+                    </li>
+                </ul>
+            </div>
+        </div>
     </body>
 </html>