/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.container {
	position:relative;
	overflow:hidden;
	
	width:640px; height:432px;
}


div.controlbar {
	position:absolute;
	overflow:hidden;
	
	bottom:0;
	
	width:640px; height:28px;
	
	background:transparent;
}

div.hulu {
	position:absolute; bottom:0; z-index:2;
	
	height:0; width:640px;
}

div.bck {
	position:absolute; top:0; left:0; z-index:0;
	width:640px; height:28px;
	
	background:#000;
	
	-moz-opacity:0.7; opacity:0.7;
	*filter:alpha(opacity=70);
}

a.playButton { 
	display:block; 
	
	position:absolute; overflow:hidden;
	width:145px; height:135px;
	left:273px; top:149px; 
	
	background-image:url('../images/play_large.png'); 
	background-repeat:no-repeat;
	background-position:0 0;
}

a.playButton:hover { background-position:0 -134px; }
a.playButton:active { background-position:0 -269px; } 

/* play/pause button */
div.hulu a.play, div.hulu a.pause { 
	position:absolute;
	width: 71px;
	height: 28px;
	display:block;
	text-indent:-9999em;
	
	background-color:transparent;
	background-image:url('../images/play.png');
	background-repeat:no-repeat;
	
	background-position:50% 0;
	
	cursor:pointer;
}

/* pause state */
div.hulu a.pause, div.hulu a.play:active, div.hulu a.pause:active { background-position:50% -54px; }

/* the timeline (or "scrubber")  */
div.hulu div.track {  
	left:110px;
	position:absolute;
	cursor:pointer;
	width:406px;
	height:28px;	
}

/* the draggable playhead */
div.hulu div.playhead {
	position:absolute;
	cursor:pointer; 
	font:27px Verdana;
	color:#fff;
	
	top:-4px; left:-3px;
}

/* buffer- and progress bars. upon runtime the width of these elements grows */
div.hulu div.progress, div.hulu div.buffer, div.hulu div._total {	
	position:absolute;
	background-color:none;
	width:0px;
	height:1px;
	
	top:14px;
	
	font:0px Arial;
}

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

div.hulu div._total {
	width:403px;
	background-color:#666;
}

/* time display */
div.hulu div.time {
	position:absolute;		
	width:35px;
	left:512px;
	text-align:center;
	
	font:10px/28px Verdana;	
	color:#fff;
}

/* total duration in time display */
div.hulu div.time strong {  }

div.time span { position:absolute; }
	div.time span.timeLeft { left:-441px; }
	div.time span.timeToGo { left:9px; }

/* mute / unmute buttons */
div.hulu a.mute, div.hulu a.unmute {
	position:absolute;
	left:547px;
	width:92px;
	height:25px;

	cursor:pointer;
	text-indent:-9999em;

	background:url('../images/volume.png') no-repeat 15px 7px;
}

/* unmute state */
div.hulu a.unmute {
	background-position:15px 7px;
}

div.level {
	position:absolute;
	width:0; height:25px;
	
	background:url('../images/level.png') no-repeat 15px 7px;
}