daapr/resources/css/player.css

body > div.ui-layout-north #daaprPlayerViewport {
	margin: 6px auto 0 auto;
	background: transparent url('../img/player_background.png') repeat-x;
	height: 40px;
	width: 450px;
	border: 1px solid #6B6D5E;
	border-bottom-color: #DCDDDE;
	border-left-color: #939885;
	border-right-color: #939885;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	z-index: 10;
}

body > div.ui-layout-north #daaprPlayerViewport h1 {
	color: #5F5F5F;
	font-size: 2em;
	font-style: oblique;
	font-variant: small-caps;
	font-weight: bold;
	line-height: 40px;
	text-align: center;
	text-shadow: #ACACAC 2px 2px 2px;
	margin: 0;
	-webkit-gradient(
	    linear,
	    left top,
	    left bottom,
	    color-stop(0.3, rgb(0,0,0)),
	    color-stop(0.27, rgb(46,46,46)),
	    color-stop(0.83, rgb(0,0,0))
	);
	-moz-linear-gradient(
	    center top,
	    rgb(0,0,0) 30%,
	    rgb(46,46,46) 27%,
	    rgb(0,0,0) 83%
	);
}

.daaprPlayerTitleIndicator,
.daaprPlayerInfoIndicator {
	height: 12px;
	line-height: 12px;
	font-size: 0.7em;
	text-align: center;
	margin-bottom: 2px;
}

.daaprPlayerTitleIndicator {
	font-size: 0.7em;
	font-weight: bold;
}

#daaprProgressTimeRemain,
#daaprProgressTimeElapsed {
	font-size: 0.7em;
}

#daaprProgressTimeRemain {
	vertical-align: top;
	height: 7px;
	line-height: 7px;
	padding-right: 5px;
}

#daaprProgressTimeElapsed {
	vertical-align: top;
	height: 7px;
	line-height: 7px;
	padding-left: 5px;
}

.daaprProgressWrap {
	width: auto;
	text-align: center;
	margin: 0 auto;
	height: 9px;
}

.daaprControlsWrap {
	float: left;
	clear: left;
	margin-top: 8px;
	margin-left: 25px;
}

.daaprControlsWrap #buttonPlay {
	float: left;
	clear: none;
	display: block;
	width: 37px;
	height: 38px;
	margin-left: 4px;
	margin-right: 4px;
	background: transparent url('../img/button_play.png') no-repeat left top;
}
.daaprControlsWrap #buttonPlay.playing {
	background-image: url('../img/button_pause.png');
}

.daaprControlsWrap #buttonPlay.stopped {
	background-image: url('../img/button_stop.png');
}

.daaprControlsWrap #buttonVolume,
.daaprControlsWrap #buttonPrev,
.daaprControlsWrap #buttonNext {
	float: left;
	clear: none;
	display: block;
	width: 31px;
	height: 32px;
	margin-top: 3px;
}

.daaprControlsWrap #buttonPrev {
	background: url('../img/button_prev.png') no-repeat left top;
}

.daaprControlsWrap #buttonNext {
	background: url('../img/button_next.png') no-repeat left top;
}

.daaprControlsWrap #buttonNext:active,
.daaprControlsWrap #buttonPrev:active,
.daaprControlsWrap #buttonPlay:active,
.daaprControlsWrap #buttonNext.disabled:active,
.daaprControlsWrap #buttonPrev.disabled:active,
.daaprControlsWrap #buttonPlay.disabled:active {
	background-position: left bottom;
}

progress,
progress::-webkit-progress-bar-value,
progress::-webkit-progress-value,
progress::-moz-progress-bar {
	-webkit-appearance: progress-bar;
	/*background-color: #BFBFBF;*/
}

progress#daaprPlayerProgress {
	vertical-align: top;
	/*-moz-border-radius: 7px;
	-webkit-border-radius: 7px;*/
	display: inline-block;
	/*height: 7px;*/
	margin-top: -3px;
	padding: 0;
	width: 350px;
	/*border: 1px solid #393939;*/
}
/*
progress#daaprPlayerProgress, progress#daaprPlayerProgress span {
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
}
progress#daaprPlayerProgress span {
	background: url('../img/progressbar_fg.png') repeat-x;
	display: block;
	height: 7px;
	margin: 0;
	padding: 0;
}
*/
#volumeWrapper {
	float: left;
	clear: none;
	margin-left: 25px;
	margin-top: 16px;
}

#volumeWrapper input#buttonVolume {
	float: left;
	clear: none;
	vertical-align: bottom;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	/*background: url('../img/volume_bg.png') repeat-x;*/
	display: block;
	height: 6px;
	line-height: 6px;
	padding: 0;
	width: 74px;
	border: 1px solid #393939;
	border-top: none;
	margin-left: 3px;
	margin-right: 3px;
	margin-top: 2px;
}

#volumeWrapper input#buttonVolume, 
#volumeWrapper input#buttonVolume span {
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}
/*
#volumeWrapper progress#buttonVolume span {
	background: url('../img/volume_fg.png') repeat-x;
	display: block;
	height: 6px;
	width: 0%;
	margin: 0;
	padding: 0;
}

#volumeWrapper progress#buttonVolume span a {
	display: none;
}
*/

#volumeWrapper a#buttonVolDown {
	vertical-align: top;
	display:block;
	float: left;
	clear: left;
	height: 10px;
	width: 9px;
	background: transparent url('../img/volume_minus.png') no-repeat;
}


#volumeWrapper a#buttonVolUp {
	vertical-align: top;
	display:block;
	float: left;
	clear: right;
	height: 10px;
	width: 13px;
	background: transparent url('../img/volume_plus.png') no-repeat;
}

table tbody tr.itemplaying td:first-child span {
	display: inline-block;
	background-color: transparent;
	background-image: url('../img/playicon2.png');
	background-repeat: no-repeat;
	background-position: left bottom;
	width: 12px;
	height: 12px;
	line-height: 14px;
}

table tbody tr.itemplaying.itempaused td:first-child span {
	background-image: url('../img/playicon.png');
}