diff -r 44945db9746a -r 36df3a25d7bd web/LdtPlayer-release.js
--- a/web/LdtPlayer-release.js	Mon Dec 19 12:12:52 2011 +0100
+++ b/web/LdtPlayer-release.js	Mon Dec 19 13:10:08 2011 +0100
@@ -8670,7 +8670,7 @@
 };
 
 
-IriSP.annotation_template = "{{! template for an annotation displayed in a segmentWidget }}<div title='{{divTitle}}' id='{{id}}'	class='Ldt-iri-chapter' 	style='left: {{startPourcent}}%;          width: {{endPourcent}}%;          background:#{{hexa_color}};' 	></div>";
+IriSP.annotation_template = "{{! template for an annotation displayed in a segmentWidget }}<div title='{{divTitle}}' id='{{id}}'	class='Ldt-iri-chapter' 	style='left: {{startPourcent}}%;          width: {{endPourcent}}%;          background-color:#{{hexa_color}};' 	></div>";
 IriSP.annotationWidget_template = "{{! template for the annotation widget }}<div class='Ldt-AnnotationsWidget'>  <!-- ugly div because we want to have a double border -->  <div class='Ldt-Annotation-DoubleBorder'>      <div class='Ldt-AnnotationContent'>        <div class='Ldt-AnnotationShareIcons'>         <a class='Ldt-fbShare' href=''><img src='{{img_dir}}/facebook.png' alt='share on facebook'></img></a>         <a class='Ldt-TwShare' href=''><img src='{{img_dir}}/twitter.png' alt='share on twitter'></img></a>         <a class='Ldt-GplusShare' href=''><img src='{{img_dir}}/google.png' alt='share on google+'></img></a>      </div>		  <div class='Ldt-SaTitle'></div>	  	<div class='Ldt-SaDescription'></div>    </div>  </div></div>";
 IriSP.annotation_loading_template = "{{! template shown while the annotation widget is loading }}<div id='Ldt-load-container'><div id='Ldt-loader'>&nbsp;</div> Chargement... </div>";
 IriSP.arrowWidget_template = "<div class='Ldt-arrowWidget'></div>";
@@ -8981,7 +8981,8 @@
 
 // conversion de couleur Decimal vers HexaDecimal || 000 si fff
 IriSP.DEC_HEXA_COLOR = function (dec) {
-	 var hexa='0123456789ABCDEF',hex='';
+	 var hexa='0123456789ABCDEF';
+   var hex='';
 	 var tmp;
 	 while (dec>15){
 		  tmp = dec-(Math.floor(dec/16))*16;
@@ -10496,15 +10497,17 @@
     var end = Math.round((+ annotation.end) / 1000);
     var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
     var id = annotation.id;
-    var startPourcent 	= IriSP.timeToPourcent(begin, duration) + onePxPercent;
-    
-    /* some sort of collapsing occurs, so we only have to substract one pixel to each box instead of
-       two
+    var startPourcent 	= IriSP.timeToPourcent(begin, duration);
+    
+    /* surprisingly, the following code doesn't work on webkit - for some reason, most of the 
+       boxes are 3 pixels wider.
     */
-    var endPourcent 	= IriSP.timeToPourcent(end, duration) - startPourcent - onePxPercent * 1.5;
-    
-    /* on the other hand, we have to substract one pixel from the first box because it's the only
-       one to have to effective 1px margins */
+    if (IriSP.jQuery.browser.webkit) { console.log("webkit");
+      var endPourcent 	= (IriSP.timeToPourcent(end, duration) - startPourcent - onePxPercent * 4.5).toFixed(1);
+    }
+    else
+      var endPourcent 	= (IriSP.timeToPourcent(end, duration) - startPourcent - onePxPercent * 1.5).toFixed(1);
+    
     if (i == 0) {
 
       endPourcent -= onePxPercent;
@@ -10518,9 +10521,11 @@
       var color = annotation.color;
     
     var hexa_color = IriSP.DEC_HEXA_COLOR(color);
-    
+
     if (hexa_color === "FFCC00")
       hexa_color = "333";
+    if (hexa_color.length == 4)
+      hexa_color = hexa_color + '00';
     
     var annotationTemplate = Mustache.to_html(IriSP.annotation_template,
         {"divTitle" : divTitle, "id" : id, "startPourcent" : startPourcent,
@@ -10812,7 +10817,6 @@
 };
 
 IriSP.TooltipWidget.prototype.hide = function() {                                                   
-  console.log("hide");  
   this.selector.find(".tip").hide();
   this._shown = false;  
 };