/* root element should be positioned relatively so that
	child elements can be positioned absolutely */
div.videocontrols {
	position:relative;
	height:20px;

	/* black background with a gradient */
	background:#555;
	width:460px;

    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-radius-bottomright: 5px;
}

/* play/pause button */
div.videocontrols a.play, div.videocontrols a.pause {
	position:absolute;
	width: 27px;
	height: 20px;
	display:block;
	text-indent:-9999em;
	background:url(http://coloradobankers.org/images/site/btn-play.gif) left top no-repeat;
	cursor:pointer;
	border-right:1px solid #000;
    left: 5px;
}

div.videocontrols a.play:hover {background:url(http://coloradobankers.org/images/site/btn-play.gif) left bottom no-repeat;
}

/* pause state */
div.videocontrols a.pause {background:url(http://coloradobankers.org/images/site/btn-play.gif) right top no-repeat;
}

div.videocontrols a.pause:hover {background:url(http://coloradobankers.org/images/site/btn-play.gif) right bottom no-repeat;
}

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

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

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

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

/* time display */
div.videocontrols div.time {
	position:absolute;
	width:129px;
	left:290px;
	padding:2px 0;
	text-align:center;
	border:1px solid #999;
	border-width:0 1px;

	font-family:futura,"Lucida Grande","bitstream vera sans","segoe ui",verdana,arial;
	font-size:12px;
    height: 16px;
	color:#fff;
}

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

/* mute / unmute buttons */
div.videocontrols a.mute, div.videocontrols a.unmute {
	position:absolute;
	left:420px;
	width:40px;
	height:20px;
	text-align:center;
	padding:8px 0;
	cursor:pointer;
	text-indent:-9999em;
	background:url(/img/player/skin/hulu.png) no-repeat 5px -323px;
}

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

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

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