Huge player update. Closes #36, closes #33. #37 is almost done

public/stylesheets/jquery.jscrollpane.css

@@ -0,0 +1,113 @@
+/*
+ * CSS Styles that are needed by jScrollPane for it to operate correctly.
+ *
+ * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
+ * may not operate correctly without them.
+ */
+
+.jspContainer
+{
+	overflow: hidden;
+	position: relative;
+}
+
+.jspPane
+{
+	position: absolute;
+}
+
+.jspVerticalBar
+{
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 10px;
+	height: 100%;
+	background: red;
+}
+
+.jspHorizontalBar
+{
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 16px;
+	background: red;
+}
+
+.jspVerticalBar *,
+.jspHorizontalBar *
+{
+	margin: 0;
+	padding: 0;
+}
+
+.jspCap
+{
+	display: none;
+}
+
+.jspHorizontalBar .jspCap
+{
+	float: left;
+}
+
+.jspTrack
+{
+	background: #111;
+	position: relative;
+}
+
+.jspDrag
+{
+	background: #555;
+	position: relative;
+	top: 0;
+	left: 0;
+	cursor: default;
+}
+
+.jspHorizontalBar .jspTrack,
+.jspHorizontalBar .jspDrag
+{
+	float: left;
+	height: 100%;
+}
+
+
+.jspArrow.jspDisabled
+{
+	cursor: default;
+	background: #80808d;
+}
+
+.jspVerticalBar .jspArrow
+{
+	height: 16px;
+}
+
+.jspHorizontalBar .jspArrow
+{
+	width: 16px;
+	float: left;
+	height: 100%;
+}
+
+.jspVerticalBar .jspArrow:focus
+{
+	outline: none;
+}
+
+.jspCorner
+{
+	background: #eeeef4;
+	float: left;
+	height: 100%;
+}
+
+/* Yuk! CSS Hack for IE6 3 pixel bug :( */
+* html .jspCorner
+{
+	margin: 0 -3px 0 0;
+}

public/stylesheets/player.css

@@ -1,10 +1,10 @@
 #player {
 	position: fixed;
-	width: 1000px;
+	width: 750px;
 	height: 50px;
 	left: 50%;
 	top: 0;
-	margin-left: -500px;
+	margin-left: -375px;
 	background-color: #000;
 	font-size: 12px;
 }
@@ -50,7 +50,7 @@
 		margin-left: 20px;
 	}
 	#player .next {
-		margin-right: 20px;
+		margin-right: 6px;
 	}
 	#player .time-played, #player .time-left {
 		float: left;
@@ -65,11 +65,11 @@
 		float: left;
 		margin-top: 25px;
 		height: 25px;
-		width: 740px;
+		width: 400px;
 	}
 		#player .track-title {
 			float: left;
-			width: 730px;
+			width: 390px;
 			height: 25px;
 			margin-left: 5px;
 			margin-top: -25px;
@@ -80,7 +80,7 @@
 			float: left;
 			margin: 11px 5px;
 			background-color: #013;
-			width: 730px;
+			width: 390px;
 			height: 3px;
 		}
 		#player .progress-loaded {
@@ -100,41 +100,74 @@
 			border-radius: 6px;
 			cursor: pointer;
 		}
+	#player .shuffle, #player .repeat, #player .playlist {
+		float: left;
+		cursor: pointer;
+	}
+	#player .shuffle {
+		margin: 17px 0 0 0;
+	}
+		#player .shuffle img {
+			width: 20px;
+		}
+	#player .repeat {
+		margin: 17px 0 0 15px;
+	}
+		#player .repeat img {
+			width: 20px;
+		}
+	#player .playlist {
+		margin: 12px 0 0 15px;
+	}
+		#player .playlist img {
+			width: 20px;
+		}
+	#player .shuffle, #player .repeat {
+		opacity: 0.5;
+		-moz-opacity: 0.5;
+		-khtml-opacity: 0.5;
+		-webkit-opacity: 0.5;
+		filter:alpha(opacity=50);
+	}
+	#player .shuffle.on, #player .repeat.on {
+		opacity: 1;
+		-moz-opacity: 1;
+		-khtml-opacity: 1;
+		-webkit-opacity: 1;
+		filter:alpha(opacity=100);
+	}
 #playlist {
 	position: fixed;
 	top: 50px;
 	left: 50%;
-	width: 1000px;
-	margin-left: -500px;
+	width: 750px;
+	margin-left: -375px;
 	background-color: #000;
-	opacity: 60;
-	-moz-opacity: 60;
-	-khtml-opacity: 60;
-	-webkit-opacity: 60;
+	opacity: 0.9;
+	-moz-opacity: 0.9;
+	-khtml-opacity: 0.9;
+	-webkit-opacity: 0.9;
+	filter:alpha(opacity=90);
+	overflow-y: auto;
+	max-height: 10em;
 }
-	#playlist .show-button {
-		width: 100%;
-		height: 10px;
-		background-color: #222;
-		cursor: pointer;
-	}
+
 	#playlist ul {
 		margin: 0.2em 0.3em;
 		padding: 0;
-		max-height: 10em;
-		overflow-y: scroll;
+		position: relative;
 	}
 		#playlist ul li {
 			margin: 0;
-			padding: 0.2em 0;
+			padding: 0.4em 0;
 			display: block;
 			width: 100%;
-			font-size: 0.8em;
+			font-size: 0.75em;
 			color: #FFF;
 		}
 			#playlist ul li:hover {
-				background-color: #222;
-				cursor: pointer;
+				background-color: #050505;
+				cursor: default;
 			}
 			#playlist ul li.now-playing {
 				background-color: #013;