--- a/src/css/LdtPlayer.css	Thu Nov 24 16:20:27 2011 +0100
+++ b/src/css/LdtPlayer.css	Thu Nov 24 16:20:41 2011 +0100
@@ -259,26 +259,42 @@
       overflow:hidden;
     }
 
-    .SliderWidget {
+    /* slider */
+    .Ldt-SliderMinimized {
+      height: 6px;
+    }
+
+    .Ldt-SliderMaximized {
+      height: 11px;
+    }
 
+    .Ldt-sliderElementMinimized {
+      width: 100%;
+      height: 5px;
     }
-    /* slider */
+
+    .Ldt-sliderElementMaximized {
+      width: 100%;
+      height: 10px;
+    }
+
     .Ldt-sliderBackground  {
       background-color: #B6B8B8;
+      position: absolute;
+      z-index: 2;
+      bottom: 1px;
       width: 100%;
       height: 5px;
-      position: absolute;
-      z-index: 2;
+ 
     }
 
     .Ldt-sliderForeground  {
       background-color: #747474;
-      padding-top: 5px;
       z-index: 2;
       width: 0px;
       position: absolute;
-      top: 0%;
-      width: 0%;
+      bottom: 1px;
+      height: 5px;
     }
 
     .Ldt-sliderPositionMarker {
@@ -288,6 +304,7 @@
       height: 5px;
       width: 5px;
       top: 0%;
+      bottom: 1px;
     }
 
     .positionMarker {

--- a/src/js/widgets/sliderWidget.js	Thu Nov 24 16:20:27 2011 +0100
+++ b/src/js/widgets/sliderWidget.js	Thu Nov 24 16:20:41 2011 +0100
@@ -8,11 +8,13 @@
   var self = this;
 
   this.selector.append(Mustache.to_html(IriSP.sliderWidget_template, {}));
+  this.selector.addClass("Ldt-SliderMinimized");
 
   this.sliderBackground = this.selector.find(".Ldt-sliderBackground");
   this.sliderForeground = this.selector.find(".Ldt-sliderForeground");
   this.positionMarker = this.selector.find(".Ldt-sliderPositionMarker");
 
+
   // a special variable to stop methods from tinkering
   // with the positionMarker when the user is dragging it
   this.draggingOngoing = false;
@@ -64,14 +66,21 @@
 
 /* handles mouse over the slider */
 IriSP.SliderWidget.prototype.mouseOverHandler = function(event) {
-/*  this.sliderBackground.animate({"padding-top": "10px", "margin-top": "-10px"}, 100);
-  this.sliderForeground.animate({"margin-top": "-10px"}, 100); */
+  this.sliderBackground.animate({"height": "10px"}, 100);
+  this.sliderForeground.animate({"height": "10px"}, 100);
+  
+//  this.selector.removeClass("Ldt-SliderMinimized");
+//  this.selector.addClass("Ldt-SliderMaximized");
 };
 
 /* handles when the mouse leaves the slider */
 IriSP.SliderWidget.prototype.mouseOutHandler = function(event) {
-/*  this.sliderBackground.animate({"padding-top": "5", "margin-top": "0px"}, 100);
-  this.sliderForeground.animate({"padding-top": "5px"}, 50); */
+  this.sliderBackground.animate({"height": "5px"}, 100);
+  this.sliderForeground.animate({"height": "5px"}, 100);
+  
+//  this.selector.removeClass("Ldt-SliderMaximized");
+//  this.selector.addClass("Ldt-SliderMinimized");
+
 };
 
 // called when the user starts dragging the position indicator