diff -r 150ccacec493 -r a07c2128b7c1 player/index.html
--- a/player/index.html	Fri Jun 07 17:36:27 2013 +0200
+++ b/player/index.html	Mon Jun 10 18:36:46 2013 +0200
@@ -9,7 +9,6 @@
         <link rel="stylesheet" type="text/css" href="css/styles.css" />
         
         <script type="text/javascript" src="lib/jquery.min.js"></script>
-        <script type="text/javascript" src="lib/jquery-ui.min.js"></script>
         <script type="text/javascript" src="lib/underscore-min.js"></script>
         <script type="text/javascript" src="js/metadataplayer-core.js"></script>
         <script type="text/javascript" src="js/ldt-serializer.js"></script>
@@ -27,23 +26,33 @@
                 <h3 class="tags-title">Tags</h3>
                 <ul class="tags-list"></ul>
             </div>
+            <span class="topright-buttons">
+                <a class="full-screen" href="#"></a>
+                <a class="about" href="#"></a>
+            </span>
             <h1 class="project-title"></h1>
         </div>
-        <div class="main-video" style="background:#101010;">
+        <div class="main-video">
             <div class="video-container"></div>
             <ul class="pictolist"></ul>
-            
         </div>
         <div class="bottom-bar">
             <div class="play-button">
                 <a href="#"></a>
             </div>
-            <div class="chapters-bar">
-                <ul class="chapters-list"></ul>
-                <ul class="chips-list"></ul>
-                <div class="left-hiding-block"></div>
-                <div class="right-hiding-block"></div>
-                <div class="progress-indicator"></div>
+            <div class="timelines">
+                <div class="timeline">
+                    <div class="elapsed"></div>
+                    <div class="progress-indicator"></div>
+                    <div class="mouse-progress-indicator"></div>
+                </div>
+                <div class="chapters-bar">
+                    <ul class="chapters-list"></ul>
+                    <ul class="chips-list"></ul>
+                    <div class="left-hiding-block"></div>
+                    <div class="right-hiding-block"></div>
+                    <div class="progress-indicator"></div>
+                </div>
             </div>
             <div class="chapter-nav">
                 <div class="prev-chapter inactive"></div>
@@ -53,6 +62,22 @@
         <div class="annotation-templates">
             <div class="annotations">
                 
+                <div class="annotation about-box white-annotation">
+                    <a href="#" class="close-annotation"></a>
+                    <h2 class="annotation-title">À propos des Webdocs</h2>
+                    <h3>Une collaboration</h3>
+                    <ul class="about-collaboration">
+                        <li>
+                            <img src="img/logo-aix.png" alt="Logo du Festival d’Art Lyrique d’Aix-en-Provence" />
+                            <p>Festival d’Art Lyrique d’Aix-en-Provence</p>
+                        </li>
+                        <li>
+                            <img src="img/logo-iri.png" alt="Logo de l’Institut de Recherche et d’Innovation" />
+                            <p>Institut de Recherche et d’Innovation</p>
+                        </li>
+                    </ul>
+                </div>
+                
                 <div class="annotation text-annotation white-annotation">
                     <a href="#" class="close-annotation"></a>
                     <h2 class="annotation-title"></h2>