daapr/resources/css/player.css

body > div.ui-layout-north > div:last-child {
	margin: 6px auto 0 auto;
	background: url('../img/player_background.png') repeat-x left bottom;
	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 > div:last-child > 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;
}

body > div.ui-layout-north > div:last-child > .playerProgressWrapper > span:first-child,
body > div.ui-layout-north > div:last-child > .playerProgressWrapper > span:last-child {
	font-size: 0.7em;
}

body > div.ui-layout-north > div:last-child > .playerProgressWrapper > span:last-child {
	vertical-align: top;
	height: 7px;
	line-height: 7px;
	padding-right: 5px;
}

body > div.ui-layout-north > div:last-child > .playerProgressWrapper > span:first-child {
	vertical-align: top;
	height: 7px;
	line-height: 7px;
	padding-left: 5px;
}

body > div.ui-layout-north > div:last-child > .playerProgressWrapper {
	width: auto;
	text-align: center;
	margin: 0 auto;
	height: 9px;
}

body > .ui-layout-north > div:first-child {
	float: left;
	clear: left;
	margin-top: 8px;
	margin-left: 25px;
}

body > .ui-layout-north > div:first-child .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;
}
body > .ui-layout-north > div:first-child .buttonPlay.playing {
	background-image: url('../img/button_pause.png');
}

body > .ui-layout-north > div:first-child .buttonPlay.stopped {
	background-image: url('../img/button_stop.png');
}

body > .ui-layout-north > div:first-child > .playerVolumeWrapper input,
body > .ui-layout-north > div:first-child .buttonPrev,
body > .ui-layout-north > div:first-child .buttonNext {
	float: left;
	clear: none;
	display: block;
	width: 31px;
	height: 32px;
	margin-top: 3px;
}

body > .ui-layout-north > div:first-child .buttonPrev {
	background: url('../img/button_prev.png') no-repeat left top;
}

body > .ui-layout-north > div:first-child .buttonNext {
	background: url('../img/button_next.png') no-repeat left top;
}

body > .ui-layout-north > div:first-child .buttonNext:active,
body > .ui-layout-north > div:first-child .buttonPrev:active,
body > .ui-layout-north > div:first-child .buttonPlay:active,
body > .ui-layout-north > div:first-child .disabled:active {
	background-position: left bottom;
}

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

body > div.ui-layout-north > div:last-child > .playerProgressWrapper > progress {
	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;*/
}
/*
body > div.ui-layout-north > div:last-child > .playerProgressWrapper > progress,
body > div.ui-layout-north > div:last-child > .playerProgressWrapper > progress span {
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
}
body > div.ui-layout-north > div:last-child > .playerProgressWrapper > progress span {
	background: url('../img/progressbar_fg.png') repeat-x;
	display: block;
	height: 7px;
	margin: 0;
	padding: 0;
}
*/
body > .ui-layout-north > div:first-child > .playerVolumeWrapper {
	float: left;
	clear: none;
	margin-left: 25px;
	margin-top: 16px;
}

body > .ui-layout-north > div:first-child > .playerVolumeWrapper input {
	float: left;
	clear: none;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	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;
}

body > .ui-layout-north > div:first-child > .playerVolumeWrapper input/*,
body > .ui-layout-north > div:first-child > .playerVolumeWrapper input span*/ {
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}
/*
body > .ui-layout-north > div:first-child > .playerVolumeWrapper input span {
	background: url('../img/volume_fg.png') repeat-x;
	display: block;
	height: 6px;
	width: 0%;
	margin: 0;
	padding: 0;
}

body > .ui-layout-north > div:first-child > .playerVolumeWrapper input span a {
	display: none;
}
*/

body > .ui-layout-north > div:first-child > .playerVolumeWrapper a:first-child {
	display:block;
	float: left;
	clear: left;
	height: 10px;
	width: 9px;
	background: transparent url('../img/volume_minus.png') no-repeat;
}


body > .ui-layout-north > div:first-child > .playerVolumeWrapper a:last-child {
	display:block;
	float: left;
	clear: right;
	height: 10px;
	width: 13px;
	background: transparent url('../img/volume_plus.png') no-repeat;
}