Binary file assets/play.psd has changed

--- a/src/css/LdtPlayer.css	Mon Nov 28 15:21:53 2011 +0100
+++ b/src/css/LdtPlayer.css	Mon Nov 28 17:12:56 2011 +0100
@@ -12,6 +12,11 @@
       float:left;
     }
 
+   /* general class for all buttons */
+   .Ldt-button {
+
+   }
+
    .Ldt-AnnotationsWidget {
       font-size: 62.5%;
       font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
@@ -151,9 +156,11 @@
       float: right;
     }
 
-    .Ldt-CtrlPlay {
-      background:url('imgs/play.png') no-repeat scroll 0 0 transparent ;
-      background-position: center;
+    /* we need a container to contain our buttons because we want
+       them centered and there's no way to position them this way
+       while at the same time using sprites 
+    */
+    .Ldt-ButtonContainer {
       width: 50px;
       height: 25px;
       border-left: 1px solid #b6b8b8;
@@ -161,8 +168,24 @@
       float: left;
     }
 
+    .Ldt-CtrlPlay {
+      background:url('imgs/play_sprite.png') no-repeat transparent ;
+      background-position: 0 0;
+      width: 16px;
+      height: 25px;
+      margin: 0 auto;
+    }
+
+    .Ldt-CtrlPlay:hover {
+      background:url('imgs/play_sprite.png') no-repeat transparent ;
+      background-position: 0 -25px;
+      width: 16px;
+      height: 25px;
+      margin: 0 auto;
+    }
+
     .Ldt-CtrlNext {
-      background:url('imgs/play_button.png') no-repeat scroll 0 0 transparent ;
+      background:url('imgs/play_sprite.png') no-repeat scroll 0 0 transparent ;
       background-position: center;
       width: 50px;
       height: 25px;

Binary file src/css/imgs/play_sprite.png has changed

--- a/src/templates/player.html	Mon Nov 28 15:21:53 2011 +0100
+++ b/src/templates/player.html	Mon Nov 28 17:12:56 2011 +0100
@@ -1,9 +1,11 @@
 {{! template for the radio player }}
 <div class='Ldt-controler demo'>
 	<div class='Ldt-LeftPlayerControls'>
-		<div class='Ldt-CtrlPlay'></div>
-		<div class='Ldt-CtrlNext'></div>
-    <div class='Ldt-CtrlSearch'></div>
+		<div class='Ldt-ButtonContainer'>
+      <div class='Ldt-button Ldt-CtrlPlay'></div>
+    </div>
+		<div class='Ldt-button Ldt-CtrlNext'></div>
+    <div class='Ldt-button Ldt-CtrlSearch'></div>
 	</div>	
 	<div class='Ldt-RightPlayerControls'>
     <div class='Ldt-Time'>
@@ -11,6 +13,6 @@
       <div class='Ldt-TimeSeparator'>/</div>
       <div class='Ldt-TotalTime'></div>
     </div>
-		<div class='Ldt-CtrlSound'>Sound</div>
+		<div class='Ldt-button Ldt-CtrlSound'>Sound</div>
 	</div>
 </div>