Player.css #1

.playerContainer{
	width:480px;
	background:#76C8C4;
	text-align:center;
}
.PlayerScreen{
	background:#00FFFF;
	width:320px;
	height:240px;
	margin-left:auto;
	margin-right:auto;
}
.Controls{
	height:85px;
	background:#333333;
	text-align:left;
	width:100%;
}
.ControlsRight{
	vertical-align:top;
}
.ControlsBottom{
	vertical-align:bottom;
}
.StatusContainer{
	width:100%;
	height:100%;
}
.PlayContainer{
	width:60px;
	height:60px;
}


.Progress{
	height:10px;
}

.Time, .Duration, .Status{
	height:16px;
	margin-top:0px;
	color:#F5FFC8;
	width:100%;
}

.Time{
	padding-left:2px;
} 

.Duration{
	padding-right:2px;
	text-align:right;
}
.StatusContainer{
	padding:0;
	border-collapse:collapse;
}
.Status{
	height:20px;
	background:#ff0000;
	table-layout:fixed;
}
.Status.statusError .statusTitle, .Status.statusError .statusInfo{
	color:#FF0000;
}
.Status .statusTitle{
	font-weight:bold;
	color:#A5B3E9;
}
.Status .statusInfo{
	font-weight:normal;
	color:#3770D6;
}

.Time, .Duration, .Status{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	background:#000000;
}

.Time, .Duration{
	width:60px;
}

.Volume{
	width:30px;
	height:30px;
	float:right;
	margin-right:2px;
	margin-top:auto;
	background-image:url(images/player_sprite.png);
	background-repeat:no-repeat;
	background-position:-1px -62px;
	cursor:pointer;
}
.Volume:hover{
	background-position:-33px -62px;
}
.PlayPauseToggle{
	width:60px;
	height:60px;
	background-image:url(images/player_sprite.png);
	background-repeat:no-repeat;
	background-position:-1px -1px;
	cursor:pointer;
	vertical-align:middle;
	line-height:60px;
}
.PlayPauseToggle:hover{
	background-position:-63px -1px;
	cursor:pointer;
}
.icon{
	background-image:url(images/dojoPlayerIcons.png);
	background-repeat:no-repeat;
	width:22px;
	height:22px;
}

.PlayPauseToggle .icon{
	position:relative;
	top:19px;
	left:19px;
	background-position:-1px -1px;
}
.PlayPauseToggle.Play .icon{
	background-position:-1px -1px;
}
.PlayPauseToggle.Pause .icon{
	background-position:-24px -1px;
}



.Progress{
	
}
.Progress, .ProgressLoaded, .ProgressPosition, .ProgressHandle{
	height:10px;
}
.ProgressLoaded, .ProgressPosition, .ProgressHandle{
	position:absolute;
}
.ProgressLoaded{
background:url(images/progressLoadedBk.png) repeat-x;
}
.ProgressHandle{
	background-image:url(images/sliderHandleSprite.png);
	background-position:0px 0px;
	width:15px;
	margin-left:0px;
	cursor:pointer;
}
.ProgressHandle.over{
	background-position:-15px 0px;
}
.ProgressPosition{
	background:url(images/progressPositionBk.png) repeat-x;
	width:0px;
}
.VolumeSlider{
	position:absolute;
}
.VolumeSliderBack{
	width:128px;
	height:30px;
	background-image:url(images/player_sprite.png);
	background-repeat:no-repeat;
	background-position:-1px -95px;
}
.VolumeSliderHandle{
	position:absolute;
	width:12px;
	height:14px;
	background-image:url(images/player_sprite.png);
	background-repeat:no-repeat;
	background-position:-1px -140px;
	cursor:pointer;
}
.VolumeSliderHandle.over{
	background-position:-15px -138px;
	cursor:pointer;
}
.Volume .icon{	
	background-position:-60px -43px;
	width:18px;
	height:16px;
	position:relative;
	top:7px;
	left:7px;
}
.Volume.mute .icon{	
	background-position:-1px -43px;
}
.Volume.low .icon{	
	background-position:-20px -43px;
}
.Volume.med .icon{	
	background-position:-40px -43px;
}
.Volume.high .icon{	
	background-position:-60px -43px;
}