--- a/src/ldt/ldt/ldt_utils/templates/front/front_search_results.html	Tue Jan 24 14:45:40 2012 +0100
+++ b/src/ldt/ldt/ldt_utils/templates/front/front_search_results.html	Tue Jan 24 14:46:14 2012 +0100
@@ -20,7 +20,8 @@
 {{block.super}}
 <script type="text/javascript">
 	var _width = 340,
-		_height = 25;
+		_height = 25,
+		_colorRange = [ "#89e1ff", "#c800ff", "#85ff3b", "#ffff17", "#ff2f7e" ];
     var _medias = [ {% for res in results.object_list %}
         {
             "iri_id" : '{{ res.content.iri_id }}',
@@ -35,17 +36,8 @@
             "stats" : [{{ res.content.stat_annotation }}],
         },{% endfor %}
     ];
-    function getRect(_el) {
-        var _sid = _el.id.substr(3);
-        for (var _i = 0; _i < _medias.length; _i++) {
-            for (var _j = 0; _j < _medias[_i].segments.length; _j++) {
-                if (_medias[_i].segments[_j].id == _sid) {
-                    return _medias[_i].segments[_j].rect;
-                }
-            }
-        }
-    }
     $(document).ready(function () {
+    	var _k = 0;
         $('.graph_annotation').each(function(_i) {
             var _values = _medias[_i].stats,
                 _nb = _values.length,
@@ -76,18 +68,37 @@
                 return _p * 340 / _medias[_i].duration;
             };
             for (var _j = 0; _j < _medias[_i].segments.length; _j++) {
-                var _s = _medias[_i].segments[_j];
-                _s.rect = _paper.rect(_x(_s.begin),0,_x(_s.duration),25).attr({
-                    "fill" : "rgb(255,120,255)",
-                    "opacity" : .5,
-                    "stroke" : "none"
-                });
+                var _s = _medias[_i].segments[_j],
+                	_coul = _colorRange[_k % _colorRange.length],
+                	_rect = _paper.rect(_x(_s.begin),0,Math.max(1,_x(_s.duration)),25).attr({
+	                    "fill" : _coul,
+	                    "opacity" : .5,
+	                    "stroke" : "none",
+	                });
+	                _rect.node.id = "re_" + _s.id;
+                $("#li_" + _s.id + " .color_zone").css({
+                	"background" : _coul,
+                	"opacity" : .5,
+               	});
+            	_k ++;
             }
         });
-        $("li.li_segment").mouseover(function() {
-            getRect(this).attr("fill","rgb(255,0,255)");
+        $("li.li_segment, .graph_annotation rect").mouseover(function() {
+            var _id = this.id.substr(3);
+            $("#re_" + _id + ", #li_" + _id + " .color_zone").css({
+            	"opacity" : ".9",
+            });
+            $("#re_" + _id).attr({
+            	"opacity" : ".9",
+            });
         }).mouseout(function() {
-            getRect(this).attr("fill","rgb(255,120,2255)");
+            var _id = this.id.substr(3);
+            $("#re_" + _id + ", #li_" + _id + " .color_zone").css({
+            	"opacity" : ".5",
+            });
+            $("#re_" + _id).attr({
+            	"opacity" : ".5",
+            });
         });
     });
 </script>
@@ -131,7 +142,6 @@
                     </div>
                     <div class="graphe_result_media">
                     	<span id="{{ res.content.iri_id }}" class="graph_annotation" title="{% trans 'annotation distribution' %}">
-                    	{{ res.content.stat_annotation }}
                     	</span>
                     </div>
                 </div>
@@ -141,7 +151,7 @@
                 {% for segment in res.list %}
                     <li class="li_segment" id="li_{{segment.element_id}}">
                         <div class="left_segment">
-                            <div class="color_zone" style="background: #f49af5;"></div>
+                            <div class="color_zone"></div>
                             <a href="{% url ldt.ldt_utils.views.front.annot_content segment.iri_id segment.project_id segment.decoupage_id %}#id={{segment.element_id}}"><img src="{{LDT_MEDIA_PREFIX}}img/annot_icon_80x45.png" width="80" height="45" alt="" /></a>
                             <!--p class="duree_segment">{{ segment.duration|str_duration:"::" }}</p-->
                         </div>

--- a/src/ldt/ldt/static/ldt/css/front_common.css	Tue Jan 24 14:45:40 2012 +0100
+++ b/src/ldt/ldt/static/ldt/css/front_common.css	Tue Jan 24 14:46:14 2012 +0100
@@ -211,11 +211,13 @@
 }
 
 #form_search {
-    position: relative; width: 378px; margin: 2px 0; height: 20px; border: 1px solid #000000; background: url(./imgs/search_icon.png) left no-repeat #ffffff;
+    position: relative; width: 378px; margin: 2px 0; height: 20px; border: 1px solid #000000;
+    background: url(./imgs/search_icon.png) left no-repeat #ffffff;
 }
 
 #id_search {
-    position: absolute; top: 0; left: 25px; width: 250px; height: 20px; border: 0; padding: 0;
+    position: absolute; top: 0; left: 25px; width: 250px;
+    height: 20px; border: 0; padding: 0; background: #ffffff;
 }
 
 #search_submit {