oldhaven/public/stylesheets/player.css

audio {
	width: 0;
	height: 0;
	position: absolute;
	top: -1000px;
	left: -1000px;
}
#player {
	position: fixed;
	z-index: 5;
	width: 750px;
	height: 50px;
	left: 50%;
	top: 25px;
	margin-left: -375px;
	background-color: #000;
	font-size: 12px;
	border-radius: 8px;
}
	#player .prev, #player .next, #player .play, #player .pause {
		float: left;
		color: #AAA;
		background-color: #222;
		cursor: pointer;
	}
	#player .prev, #player .next {
		width: 30px;
		height: 30px;
		margin: 10px 0;
		border-radius: 40px;
	}
		#player .prev img, #player .next img {
			width: 14px;
			height: 14px;
		}
		#player .prev img {
			margin: 8px 0 0 7px;
		}
		#player .next img {
			margin: 8px 0 0 9px;
		}
	#player .play, #player .pause {
		width: 40px;
		height: 40px;
		margin: 5px;
		border-radius: 40px;
	}
		#player .play img {
			width: 16px;
			height: 16px;
			margin: 12px 0 0 14px;
		}
		#player .pause img {
			width: 16px;
			height: 16px;
			margin: 12px 0 0 12px;
		}
	#player .prev {
		margin-left: 20px;
	}
	#player .next {
		margin-right: 6px;
	}
	#player .time-played, #player .time-left {
		float: left;
		height: 50px;
		width: 50px;
		color: #AAA;
		margin-right: 2px;
		text-align: center;
		line-height: 50px;
	}
	#player .progress {
		float: left;
		margin-top: 25px;
		height: 25px;
		width: 400px;
	}
		#player .track-title {
			float: left;
			width: 390px;
			height: 25px;
			margin-left: 5px;
			margin-top: -25px;
			color: #DDD;
			line-height: 30px;
		}
		#player .progress-bar {
			float: left;
			margin: 11px 5px;
			background-color: #013;
			width: 390px;
			height: 3px;
		}
			#player .progress-bar:hover {
				cursor: pointer;
			}
		#player .progress-loaded {
			float: left;
			width: 0;
			height: 3px;
			background-color: #05A;
		}
		#player .progress-point {
			float: left;
			width: 6px;
			height: 6px;
			background-color: #013;
			margin-top: -4px;
			margin-left: -6px;
			border: #FFF 3px solid;
			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 12px;
	}
		#player .repeat img {
			width: 20px;
		}
	#player .playlist {
		margin: 12px 0 0 12px;
	}
		#player .playlist img {
			width: 20px;
		}
		#player .playlist .count {
			color: #DDD;
			font-size: 9px;
			width: auto;
			float: right;
			margin: -33px 0 0 2px;
		}
	#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;
	z-index: 5;
	top: 75px;
	left: 50%;
	width: 734px;
	margin-left: -367px;
	background-color: #000;
	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 ul {
		margin: 0.2em 0.3em;
		padding: 0;
		position: relative;
	}
		#playlist ul li {
			margin: 0;
			padding: 0.4em 0;
			display: block;
			width: 100%;
			font-size: 0.75em;
			color: #FFF;
		}
			#playlist ul li:hover {
				background-color: #050505;
				cursor: default;
			}
			#playlist ul li.now-playing {
				background-color: #013;
				font-weight: bold;
			}
			#playlist ul li .length {
				margin: 0 0.5em;
				color: #AAA;
			}