/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.controls { 
	position:relative;
	height:12px;
	width: 474px;
	margin-top: 1px;
	padding-top: 6px;
	padding-bottom: 3px;
}

/* when play button toggles between play/pause class 
	we move it's background image */
div.controls div.play, div.controls div.pause { 
	position:relative;
	width: 10px;
	height:10px;
	text-indent:-999em;
	cursor:pointer;
	overflow: hidden;
	background:url(artwork/playpause2.png) center top no-repeat;
	margin-top: -1px;
}

div.controls div.pause { 
	background-position:center -10px;
}

/* the track or "scrubber"  */
div.controls div.track { 
	position:absolute;
	top:5px;
	height:18px;
	left:16px;
	background:url(artwork/track_480p.png) no-repeat;
	text-align:left;
	cursor:pointer;
	width:458px;	
}

/* the draggable playhead */
div.controls div.playhead { 
	position:absolute;	
	height:12px;
	background:url(artwork/playhead.png) no-repeat;
	cursor:pointer;
	top:0px; 
	width:12px;
}

/* buffer and controls are automatically resized, their initial width should be 0 */
div.controls div.progress, div.controls div.buffer {	
	background:url(artwork/track_load_480p.png) no-repeat;
	height: 12px;
	margin: 0 0;
	width:6px;
	position:absolute;
	top:0;
	font-size:0px;	
	
	/* this is the way to fine tune buffer and progress max width */
	max-width:458px;
}

div.controls div.buffer {
	background-color: none;	
}