div.controlbar {
	position:relative;
	height: 23px;
	
	/* black background with a gradient */
	background: url("../player_img/bg.png") repeat-x;
	width: 640px;
}

/* play/pause button */
div.controlbar a.play, div.controlbar a.pause { 
	position:absolute;
	left: 10px;
	width: 30px;
	height: 23px;
	display:block;
	text-indent:-9999em;
	background: url("../player_img/play_off.png") no-repeat;
	cursor:pointer;
}

div.controlbar a.play:hover {
	background: url("../player_img/play_on.png") no-repeat;
}

/* pause state */
div.controlbar a.pause { 
	background: url("../player_img/pause_off.png") no-repeat;
}

div.controlbar a.pause:hover {
	background: url("../player_img/pause_on.png") no-repeat;
}

/* the timeline (or "scrubber"")  */
div.controlbar div.track {  
	left:40px;
	position:absolute;
	cursor:pointer;
	width: 360px;
	height: 23px;	
	background: url("../player_img/scrubber_unloaded.png") repeat-x;
}

/* the draggable playhead */
div.controlbar div.playhead {
	position:absolute;
	cursor:pointer; 
	background: url("../player_img/scrubber.png") no-repeat;
	width:3px;
	height:23px;
}

/* buffer- and progress bars. upon runtime the width of these elements grows */
div.controlbar div.progress, div.controlbar div.buffer {	
	position:absolute;
	background: url("../player_img/scrubber_loaded.png") repeat-x;
	width:0px;
	height:23px;
}

div.controlbar div.progress {
	background: url("../player_img/scrubber_played.png") repeat-x;
}

/* time display */
div.controlbar div.time {
	position:absolute;		
	width: 100px;
	left: 410px;
	padding: 3px 0;
	text-align:center;	
	font-family: Arial,sans-serif;	
	font-size:10px;
	color:#9f0000; 
}

/* total duration in time display */
div.controlbar div.time strong {
	font-weight:normal;
	color:#fff;
}

/* mute / unmute buttons */
div.controlbar a.mute, div.controlbar a.unmute {
	position:absolute;
	left:520px;
	width:23px;
	height:23px;
	text-align:center;
	cursor:pointer;
	text-indent:-9999em;
	background: url("../player_img/mute_off.png") no-repeat;
}

div.controlbar a.mute:hover {
	background: url("../player_img/mute_on.png") no-repeat;
}

/* unmute state */
div.controlbar a.unmute {
	background: url("../player_img/volume_off.png") no-repeat;
}

div.controlbar a.unmute:hover {
	background: url("../player_img/volume_on.png") no-repeat;
}