Improve presentaion

index.html

@@ -77,7 +77,7 @@
             </div>
             <a id='about' target='_blank' href='https://github.com/captbaritone/winamp2-js'></a>
         </div>
-        <p style="position: absolute; bottom: 0;">by <a href='https://twitter.com/captbaritone'>@captbaritone</a> - <a href='https://github.com/captbaritone/winamp2-js'>GitHub</a></p>
+        <p class='about'>by <a href='https://twitter.com/captbaritone'>@captbaritone</a> - <a href='https://github.com/captbaritone/winamp2-js'>GitHub</a></p>
         <script src="http://cdn.bootcss.com/jszip/2.4.0/jszip.min.js"></script>
 
         <script src="file-manager.js"></script>

winamp.css

@@ -7,6 +7,10 @@ input[type=range]:focus { outline: none; }
 input[type=range]::-moz-focus-outer { border: 0; }
 a:focus { outline: none; }
 
+body {
+    background-color: #0072CC;
+}
+
 #shade-time {
     cursor:url('cursors/MAINMENU.PNG'), auto;
 }
@@ -25,14 +29,19 @@ a:focus { outline: none; }
 
 /* Styles */
 #winamp {
-    position: relative;
+    position: absolute;
     /* background-image: MAIN.BMP via Javascript */
     height: 116px;
     width: 275px;
+    margin-top: -58px;
+    margin-left: -137px;
+    top: 40%;
+    left: 50%;
     cursor:url('cursors/MAINMENU.PNG'), auto;
 }
 
 #winamp.loading {
+    background-color: #FFFFFF;
     background-image: url('images/loading.gif');
     background-position: center;
     background-repeat: no-repeat;
@@ -732,3 +741,16 @@ a:focus { outline: none; }
 .shade #shade-second-second-digit {
     left: 25px;
 }
+
+.about {
+    position: absolute;
+    bottom: 0;
+    color: #bbb;
+    font-family: arial;
+    font-size: 15px;
+    color: white;
+}
+
+.about a {
+    color: white;
+}

winamp.js

@@ -52,8 +52,8 @@ function Winamp () {
         // offsetLeft / offsetTop however the element is 'relatively'
         // positioned so we're using style.left. parseInt is used to remove the
         // 'px' postfix from the value
-        var winStartLeft = parseInt(winampElm.style.left || 0,10),
-            winStartTop  = parseInt(winampElm.style.top || 0,10);
+        var winStartLeft = parseInt(winampElm.offsetLeft || 0,10),
+            winStartTop  = parseInt(winampElm.offsetTop || 0,10);
 
         // Get starting mouse position
         var mouseStartLeft = e.clientX,
@@ -69,6 +69,10 @@ function Winamp () {
             var diffLeft = mouseLeft-mouseStartLeft,
                 diffTop = mouseTop-mouseStartTop;
 
+            // These margins were only useful for centering the div, now we
+            // don't need them
+            winampElm.style.marginLeft = "0px";
+            winampElm.style.marginTop = "0px";
             // Move window to new position
             winampElm.style.left = (winStartLeft+diffLeft)+"px";
             winampElm.style.top = (winStartTop+diffTop)+"px";