/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.videodiv_btn {
	position:relative;
	height:30px;
	
	/* black background with a gradient */
	/*background:#000 url(../images/accessible_video_buttons.png) repeat-x 0 -8px;*/
    background-color: #333333;
	width:320px;
}

/* play/pause button */
div.videodiv_btn a.play, div.videodiv_btn a.pause {
	position:absolute;
	width: 30px;
	height: 30px;
	display:block;
	/*text-indent:-9999em;     */
	background:url(../images/accessible_video_buttons.png) no-repeat 2px -65px;
	cursor:pointer;
	border-right:1px solid #000; 
}

div.videodiv_btn a.play:hover, div.videodiv_btn a.play:focus, div.videodiv_btn a.play:active {
	background-position: 2px -109px;	
}

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

div.videodiv_btn a.pause:hover, div.videodiv_btn a.pause:focus, div.videodiv_btn a.pause:active  {
	background-position:3px -196px;	
}

/* the timeline (or "scrubber")  */
div.videodiv_btn div.track {
	left:31px;
	position:absolute;
	cursor:pointer;
	width:119px;
	border-left:1px solid #999;
	height:30px;
}

/* the draggable playhead */
div.videodiv_btn div.playhead {
	position:absolute;
	cursor:pointer; 
	background-color:#4ff;
	opacity:0.3;
	filter: alpha(opacity=30);	
	width:3px;
	height:30px;
	border-right:1px solid #444;
}

/* buffer- and progress bars. upon runtime the width of these elements grows */
div.videodiv_btn div.progress, div.videodiv_btn div.buffer {
	position:absolute;
	background-color:#4ff;
	filter: alpha(opacity=10);
	opacity:0.1;
	width:0px;
	height:30px;
}

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

/* time display */
div.videodiv_btn div.time {
	position:absolute;		
	width:129px;
	left:150px;
    height:18px;
	padding:6px 0;
	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:12px;
	color:#fff; 
}

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

/* mute / unmute buttons */
div.videodiv_btn a.mute, div.videodiv_btn a.unmute {
	position:absolute;
	left:280px;
	width:40px;
	height:30px;
	text-align:center;
	padding:0px 0;
	cursor:pointer;
	/*text-indent:-9999em;*/
	background:url(../images/accessible_video_buttons.png) no-repeat 5px -328px;
}

div.videodiv_btn a.mute:hover, div.videodiv_btn a.mute:focus, div.videodiv_btn a.mute:active  {

	background-position:5px -372px;
}

/* unmute state */
div.videodiv_btn a.unmute {

	background-position:5px -240px;
}

div.videodiv_btn a.unmute:hover, div.videodiv_btn a.unmute:focus, div.videodiv_btn a.unmute:active  {
	background-position:5px -284px;	
}