--- a/src/css/LdtPlayer.css	Wed Nov 23 17:15:29 2011 +0100
+++ b/src/css/LdtPlayer.css	Wed Nov 23 17:19:29 2011 +0100
@@ -263,13 +263,15 @@
 
     }
     /* slider */
-    .sliderBackground  {
+    .Ldt-sliderBackground  {
       background-color: #B6B8B8;
       width: 100%;
-      padding-top: 5px;
+      height: 5px;
+      position: absolute;
+      z-index: 2;
     }
 
-    .sliderForeground  {
+    .Ldt-sliderForeground  {
       background-color: #747474;
       padding-top: 5px;
       z-index: 2;
@@ -279,6 +281,15 @@
       width: 0%;
     }
 
+    .Ldt-sliderPositionMarker {
+      position: absolute;
+      z-index: 100;
+      background-color: blue;
+      height: 5px;
+      width: 5px;
+      top: 0%;
+    }
+
     .positionMarker {
       position: absolute;
       z-index: 100;

--- a/src/js/widgets/sliderWidget.js	Wed Nov 23 17:15:29 2011 +0100
+++ b/src/js/widgets/sliderWidget.js	Wed Nov 23 17:19:29 2011 +0100
@@ -7,18 +7,11 @@
 IriSP.SliderWidget.prototype.draw = function() {
   var self = this;
 
-
-  this.selector.append("<div class='sliderBackground'></div>");
-  this.sliderBackground = this.selector.find(".sliderBackground");
+  this.selector.append(Mustache.to_html(IriSP.sliderWidget_template, {}));
 
-  this.selector.append("<div class='sliderForeground'></div>");
-  this.sliderForeground = this.selector.find(".sliderForeground");
-
-  this.selector.append(Mustache.to_html(IriSP.overlay_marker_template));
-  this.positionMarker = this.selector.find(".positionMarker");
-  this.positionMarker.css("height", "10px");
-  this.positionMarker.css("width", "10px");
-  this.positionMarker.css("top", "0%");
+  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
@@ -69,14 +62,14 @@
 
 /* handles mouse over the slider */
 IriSP.SliderWidget.prototype.mouseOverHandler = function(event) {
-  this.sliderBackground.animate({"padding-top": "10px"}, 100);
-  this.sliderForeground.animate({"padding-top": "10px"}, 100);
+/*  this.sliderBackground.animate({"padding-top": "10px", "margin-top": "-10px"}, 100);
+  this.sliderForeground.animate({"margin-top": "-10px"}, 100); */
 };
 
 /* handles when the mouse leaves the slider */
 IriSP.SliderWidget.prototype.mouseOutHandler = function(event) {
-  this.sliderBackground.animate({"padding-top": "5px"}, 50);
-  this.sliderForeground.animate({"padding-top": "5px"}, 50);
+/*  this.sliderBackground.animate({"padding-top": "5", "margin-top": "0px"}, 100);
+  this.sliderForeground.animate({"padding-top": "5px"}, 50); */
 };
 
 // called when the user starts dragging the position indicator

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/templates/sliderWidget.html	Wed Nov 23 17:19:29 2011 +0100
@@ -0,0 +1,5 @@
+{{! template for the slider widget - it's composed of two divs we one overlayed on top
+    of the other }}
+<div class='Ldt-sliderBackground'></div>
+<div class='Ldt-sliderForeground'></div>
+<div class='Ldt-sliderPositionMarker'></div>