/* 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;
	
	background:#000;
	
	opacity:0.5;
	*filter:alpha(opacity=50);
}

a.playButton { 
	display:block; 
	
	position:absolute; 
	width:135px; height:135px;
	left:273px; top:149px; 
	
	background:url('../images/play_large.png'); 
}

/* 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 { background-position:50% -28px; }

/* 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:28px Verdana;
	color:#fff;
	
	top:-5px;
}

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

div.hulu div.buffer {
	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:5px; }

/* 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;
}