--- a/src/css/LdtPlayer.css	Fri Nov 25 12:25:02 2011 +0100
+++ b/src/css/LdtPlayer.css	Fri Nov 25 12:26:28 2011 +0100
@@ -23,6 +23,11 @@
       border-style: solid;
     }
 
+    .Ldt-SegmentsWidget {
+      background-color: #b6b8b7;
+      overflow: auto; /* clear the floats */
+    }
+
     .Ldt-iri-chapter{
       border-left:solid 1px #000;
       border-right:solid 1px #000;
@@ -150,7 +155,7 @@
     }
 
     .Ldt-CtrlPlay {
-      background:url('imgs/play_button.png') no-repeat scroll 0 0 transparent ;
+      background:url('imgs/play.png') no-repeat scroll 0 0 transparent ;
       background-position: center;
       width: 50px;
       height: 23px;
@@ -169,7 +174,7 @@
 
 
     .Ldt-CtrlSearch {
-      background:url('imgs/play_button.png') no-repeat scroll 0 0 transparent ;
+      background:url('imgs/search.png') no-repeat scroll 0 0 transparent ;
       background-position: center;
       width: 50px;
       height: 23px;
@@ -190,6 +195,13 @@
       color: #b2b2b2; 
     }
 
+    .Ldt-CtrlMute {
+
+    }
+
+    .Ldt-CtrlFullscreen {
+
+    }
     .Ldt-cleaner {
       clear:both;
     }

--- a/src/js/widgets/segmentsWidget.js	Fri Nov 25 12:25:02 2011 +0100
+++ b/src/js/widgets/segmentsWidget.js	Fri Nov 25 12:26:28 2011 +0100
@@ -17,6 +17,8 @@
   var self = this;
   var annotations = this._serializer._data.annotations;
 
+  this.selector.addClass("Ldt-SegmentsWidget");
+
   /* in case we have different types of annotations, we want to display only the first type */
   /* the next two lines are a bit verbose because for some test data, _serializer.data.view is either
      null or undefined.
@@ -32,14 +34,12 @@
           view_type = view.annotation_types[0];
   }
  
-  this.selector.css("overflow", "auto"); // clear the floats - FIXME : to refactor ?
   this.selector.append(Mustache.to_html(IriSP.overlay_marker_template));
   
   this.positionMarker = this.selector.children(":first");
   
   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.positionUpdater));
   
-  this.selector.after("<div class='cleaner'></div>"); // we need to do this because the segments are floated                                                      
   
   var i = 0;
   var totalWidth = this.selector.width();
@@ -93,9 +93,9 @@
     IriSP.jQuery("#" + id).fadeTo(0, 0.3);
 
     IriSP.jQuery("#" + id).mouseover(function() {
-      IriSP.jQuery("#" + id).animate({opacity: 0.6}, 5);
+      IriSP.jQuery(this).animate({opacity: 0.6}, 5);
     }).mouseout(function(){
-      IriSP.jQuery("#" + id).animate({opacity: 0.3}, 5);
+      IriSP.jQuery(this).animate({opacity: 0.3}, 5);
     });
 
     IriSP.jQuery("#" + id).click(function(_this, annotation) {

--- a/src/templates/annotation.html	Fri Nov 25 12:25:02 2011 +0100
+++ b/src/templates/annotation.html	Fri Nov 25 12:26:28 2011 +0100
@@ -1,6 +1,6 @@
 {{! template for an annotation displayed in a segmentWidget }}
 <div title='{{divTitle}}' id='{{id}}'
-	class='ui-slider-range ui-slider-range-min ui-widget-header Ldt-iri-chapter' 
+	class='Ldt-iri-chapter' 
 	style='left: {{startPourcent}}%; 
          width: {{endPourcent}}%; 
          background:#{{hexa_color}};'