#flowplayer {
	display: block;
	width:902px;
	height:507px;
	margin-left: 39px;
	margin-top: 78px;
}

/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.controls {
	position:relative;
	margin-top: 6px;
	margin-left: 39px;
	height:33px;
	
	/* black background with a gradient */
	background:#000 url(../images/video-background-track.png) no-repeat 42px 16px;
	width:902px;
}

/* play/pause button */
div.controls a.play, div.controls a.pause { 
	position:absolute;
	width: 21px;
	height: 22px;
	top: 5px;
	left: 10px;
	display:block;
	text-indent:-9999em;
	background:url(../images/video-controls.png) no-repeat 0px 0px;
	cursor:pointer;
	border-right:1px solid #000; 
}

div.controls a.play:hover {
	background-position: -63px 0px;	
}

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

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

/* the timeline (or "scrubber")  */
div.controls div.track {  
	left:40px;
	position:absolute;
	cursor:pointer;
	width:768px;
	height:33px;	
}

/* the draggable playhead */
div.controls div.playhead {
	position:absolute;
	cursor:pointer; 
	background-color:#fff;
	width:3px;
	height:11px;
	border-top: 11px solid #000;
	border-bottom: 11px solid #000;
}

/* buffer- and progress bars. upon runtime the width of these elements grows */
div.controls div.progress, div.controls div.buffer {	
	position:absolute;
	background-color:#fff;
	width:0px;
	height:1px;
	border-top: 16px solid #000;
	border-bottom: 16px solid #000;
}
div.controls div.progress {
	background-color: #a1b926;
}

div.controls div.buffer {
	background-color:#fff;
}

/* time display */
div.controls div.time {
	position:absolute;		
	width:129px;
	left:790px;
	padding:9px 0;
	text-align:center;
	font-size:12px;
	color:#888; 
}

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

/* mute / unmute buttons */
div.controls a.mute, div.controls a.unmute {
	position:absolute;
	left:460px;
	width:40px;
	height:33px;
	text-align:center;
	padding:8px 0;
	cursor:pointer;
	text-indent:-9999em;
	background:url(../images/hulu.png) no-repeat 5px -323px;
	display: none;
}

div.controls a.mute:hover {
	background-position:5px -367px;	
}

/* unmute state */
div.controls a.unmute {
	background-position:5px -235px;	
}

div.controls a.unmute:hover {
	background-position:5px -279px;	
}