--- a/src/css/LdtPlayer.css	Thu Jan 05 14:58:56 2012 +0100
+++ b/src/css/LdtPlayer.css	Thu Jan 05 15:57:35 2012 +0100
@@ -695,22 +695,43 @@
 .Ldt-AnnotationsListWidget {
   font-size: 12px;
   font-family: "Arial",  "Verdana", "sans-serif";
-  background-color:#eeeeee;
   border: 1px solid #b6b8b8;
   overflow: auto;
   max-height: 480px;
 }
 
+.Ldt-AnnotationsListWidget ul {
+  padding: 5px;
+}
+
 .Ldt-AnnotationsListWidget li {
   list-style-type: none;
   cursor: pointer;
+  display: table-row;
+  padding-top: 2px;
+  height: 64px;
 }
-.Ldt-AnnotationsList-Duration {
+
+.Ldt-AnnotationsListWidget li:hover {
+  background-color: #e9e9e9;
+}
+
+.Ldt-AnnotationsList-Caption {
+  float: left;
+  display: table-cell;
+  vertical-align: middle;  
+}
+
+.Ldt-AnnotationsList-Duration {  
+  color : #f7268e;  
   float: right;
-  color : #f7268e;
+  text-align: left;
+  width: 120px;
 }
 
 .Ldt-AnnotationsList-Title {
   color: #0068c4;
-  font-size: 14px;
+  font-size: 13px;
+  display: table-cell;
+  width: 80%;
 }

--- a/src/js/widgets/annotationsListWidget.js	Thu Jan 05 14:58:56 2012 +0100
+++ b/src/js/widgets/annotationsListWidget.js	Thu Jan 05 15:57:35 2012 +0100
@@ -8,7 +8,7 @@
 IriSP.AnnotationsListWidget.prototype.clear = function() {
 };
 
-IriSP.AnnotationsListWidget.prototype.clearWidget = function() {   
+IriSP.AnnotationsListWidget.prototype.clearWidget = function() {
 };
 
 IriSP.AnnotationsListWidget.prototype.draw = function() {
@@ -17,12 +17,12 @@
   var view_type = this._serializer.getNonTweetIds()[0];
   var annotations = this._serializer._data.annotations;
   var list = [];
-  
+
   if (typeof(view_type) === "undefined") {
     console.log("not type suitable for display");
     return;
   }
-  
+
   for (i = 0; i < annotations.length; i++) {
     var annotation = annotations[i];
 
@@ -34,13 +34,13 @@
 
     var a = annotation;
     var obj = {};
-    console.log(a);
+
     obj["id"] = a.id;
     obj["title"] = a.content.title;
     obj["desc"] = a.content.description;
     obj["begin"] = IriSP.msToTime(a.begin);
     obj["end"] = IriSP.msToTime(a.end);
-    
+
     list.push(obj);
   }
 

--- a/src/templates/annotationsListWidget.html	Thu Jan 05 14:58:56 2012 +0100
+++ b/src/templates/annotationsListWidget.html	Thu Jan 05 15:57:35 2012 +0100
@@ -6,8 +6,10 @@
     {{#annotations}}
       <li>
         <a href='#a={{id}}'>
-          <div style='overflow: auto; margin-bottom: 10px;'>
-            <img src='http://i.imgur.com/aoUlC.jpg' style='display: block; float: left;'></img>
+          <div style='overflow: auto; margin-top: 5px; margin-bottom: 5px;'>
+            <div class='Ldt-AnnotationsList-Caption'>
+              <img src='http://i.imgur.com/aoUlC.jpg'></img>
+            </div>
             <div class='Ldt-AnnotationsList-Duration'>{{begin}} - {{end}}</div>
             <div class='Ldt-AnnotationsList-Title'>{{title}}</div>
             <div class='Ldt-AnnotationsList-Description'>{{desc}}</div>