/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.fpc {
	position:relative;
	height:15px;
	
	/* black background with a gradient */
	background:#666 url(flowplayer.controls.png) repeat-x 0 -400px;
	width:219px;
}

/* play/pause button */
div.fpc a.play, div.fpc a.pause { 
	position:absolute;
	width:20px;
	height:15px;
	display:block;
	text-indent:-9999em;
	background:url(flowplayer.controls.png) no-repeat 3px -30px;
	cursor:pointer;
	border-right:1px solid #000; 
}

div.fpc a.play:hover {
	background-position:3px -45px;	
}

/* pause state */
div.fpc a.pause { 
	background-position:3px -60px;
}

div.fpc a.pause:hover {
	background-position:3px -75px;	
}

/* the timeline (or "scrubber")  */
div.fpc div.track {  
	left:20px;
	position:absolute;
	cursor:pointer;
	width:120px;
	border-left:1px solid #999;
	height:15px;	
}

/* the draggable playhead */
div.fpc div.playhead {
	position:absolute;
	cursor:pointer; 
	background-color:#fff;
	width:3px;
	height:15px;
	border-right:1px solid #444;
}

/* buffer- and progress bars. upon runtime the width of these elements grows */
div.fpc div.progress, div.fpc div.buffer {	
	position:absolute;
	background-color:#f00;
	opacity:0.75;
	filter:alpha(opacity=75);
	width:0px;
	height:15px;
}

div.fpc div.buffer {
	background-color:#fff;
	opacity:0.1;
	filter: alpha(opacity=10);
}

/* time display */
div.fpc div.time {
	position:absolute;		
	width:60px;
	left:140px;
	text-align:center;
	border:1px solid #999;
	border-width:0 1px;
	
	font-family:futura,"Lucida Grande","bitstream vera sans","trebuchet ms",verdana,arial;	
	font-size:10px;
	color:#fff; 
}

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

/* mute / unmute buttons */
div.fpc a.mute, div.fpc a.unmute {
	position:absolute;
	left:199px;
	width:20px;
	height:15px;
	text-align:center;
	cursor:pointer;
	text-indent:-9999em;
	background:url(flowplayer.controls.png) no-repeat 3px -90px;
}

div.fpc a.mute:hover {
	background-position:3px -105px;	
}

/* unmute state */
div.fpc a.unmute {
	background-position:3px -120px;	
}

div.fpc a.unmute:hover {
	background-position:3px -135px;	
}