--- a/src/spel/templates/spel_demonstrateur.html	Thu Nov 06 12:59:12 2014 +0100
+++ b/src/spel/templates/spel_demonstrateur.html	Thu Nov 06 18:00:57 2014 +0100
@@ -3,26 +3,34 @@
 
 {% block page_title %}Corpus{% endblock %}
 
+{% block page_css %}
+<link rel="stylesheet" href="{% static 'spel/css/demonstrateur.css' %}">
+{% endblock %}
+
 {% block spel_content %}
-    <section style="width: 1070px; margin: 0 auto">
+    <section class="democontainer">
       <div class="row">
         {% if current_ctt_id != '' %}
+          <h3>{{ demo_title }}</h3>
           <div class="col-md-7">
-	        <h3>{{ demo_title }}</h3>
-	        <p><strong>{{ proj_title }}</strong></p>
-	        <p>{% if proj1_ldt_id %}<a href="?tag={{ tag }}&p={{ proj1_ldt_id }}">Extrait précédent</a>{% endif %}
-	           {% if proj1_ldt_id and proj2_ldt_id %} - {% endif %}
-	           {% if proj2_ldt_id %}<a href="?tag={{ tag }}&p={{ proj2_ldt_id }}">Extrait suivant</a>{% endif %}</p>
+            <div class="row">
+              <div class="col-md-10">
+	            <p><strong>{{ proj_title }}</strong></p>
+	          </div>
+              <div class="col-md-2">
+                {% if proj1_ldt_id %}<a class="btn btn-default updown" href="?tag={{ tag }}&p={{ proj1_ldt_id }}"><span class="glyphicon glyphicon-chevron-up" title="Extrait précédent"></span></a>{% endif %}
+                {% if proj2_ldt_id %}<a class="btn btn-default updown" href="?tag={{ tag }}&p={{ proj2_ldt_id }}"><span class="glyphicon glyphicon-chevron-down" title="Extrait suivant"></span></a>{% endif %}
+              </div>
+	        </div>
 	        <p>{{ annot_title }}</p>
 	        <p>{{ annot_description }}</p>
 	        <p>{{ annot_tags|safe }}</p>
 	      </div>
 		  <div class="col-md-5">
-			  <p>Tous les extraits :</p>
 			  <div class="link-table">
-			    <table class="table table-striped table-condensed">
+			    <table class="table table-condensed">
 			      {% for c in contents %}
-			      <tr>
+			      <tr {% if current_ctt_id == c.front_project.ldt_id %}class="info"{% endif %}>
 			        <td>{{ forloop.counter }}</td>
 			        <td>{% if current_ctt_id != c.front_project.ldt_id %}<a href="?tag={{ tag }}&p={{ c.front_project.ldt_id }}">{% endif %}{{ c.title|slice:"7:" }}{% if current_ctt_id != c.front_project.ldt_id %}</a>{% endif %}</td>
 			      </tr>
@@ -67,7 +75,7 @@
                 format: 'ldt'
             };
             var _config = {
-                width : 550,
+                width : 854,
                 container : 'LdtPlayer',
                 default_options: {
                     metadata: _metadata
@@ -80,7 +88,7 @@
                     {
                         type: "HtmlPlayer", /*ou HtmlPlayer si HTML5*/
                         //video: "/data/" + d + "/" + g + "/" + f,
-                        height: 320
+                        height: 480
                     },
                     { type: "Slider" },
                     { type: "Controller" },
@@ -199,7 +207,7 @@
                         type: "SpelSyncHtml",
                         container: "AnnotationsListContainer",
                         height: 600,
-                        width: 500,
+                        width: 360,
                         src: ( (d!="opera") ? "{% url 'spel_ctb' %}" : "")
                     },
                     {