/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.aligned-controls {
	position:relative;
	height:22px;
	background-color:#303030;
	width:440px;
}

div.aligned-controls.width520 {
	width:520px;
}



/* play/pause button */
div.aligned-controls a.play, div.aligned-controls a.pause { 
	position:absolute;
	width: 22px;
	height: 22px;
	display:block;
	text-indent:-9999em;
	background:url(../img/video-Controls.png) no-repeat -23px 0px;
	cursor:pointer;
}

div.aligned-controls a.play:hover {
	background-position:-23px -46px;	*/
}

/* pause state */
div.aligned-controls a.pause { 
	background-position:0px 0px;
}

div.aligned-controls a.pause:hover {
	background-position:0px -46px;
}

/* the timeline (or "scrubber")  */
div.aligned-controls div.track {  
	left:27px;
	position:absolute;
	cursor:pointer;
	width:312px;
	height:2px;
	top:10px;
}
div.aligned-controls.width520 div.track {  
	width:390px;
}



/* the draggable playhead */
div.aligned-controls div.playhead {
	position:absolute;
	cursor:pointer; 
	background-color:#FFF;
	width:3px;
	height:2px;
	border-right:1px solid #FFF;
}

/* buffer- and progress bars. upon runtime the width of these elements grows */
div.aligned-controls div.progress, div.aligned-controls div.buffer {	
	position:absolute;
	background-color:#BFBFBF;
	width:0px;
	height:2px;
}

div.aligned-controls div.buffer {
	background-color:#0D6D36;
}

/* time display */
div.aligned-controls div.time {
	position:absolute;		
	width:80px;
	height:16px;
	right:23px;
	text-align:center;
	padding-top:2px;
	font-size:9px;
	font-family: Helvetica, Arial, sans-serif;
	color:#BFBFBF; 
}

/* total duration in time display */
div.aligned-controls div.time strong {
	color:#666;
}

/* mute / unmute buttons */
div.aligned-controls a.mute, div.aligned-controls a.unmute {
	position:absolute;
	right:0px;
	width:22px;
	height:22px;
	text-align:center;
	cursor:pointer;
	text-indent:-9999em;
	background:url(../img/video-Controls.png) no-repeat -23px -23px;
}

div.aligned-controls a.mute:hover {
	background-position:-23px -69px;
}

/* unmute state */
div.aligned-controls a.unmute {
	background-position:0px -23px;	
}

div.aligned-controls a.unmute:hover {
	background-position:0px -69px;
}