#videoleft{
	float:left;
	width:467px;
}
#videoleft #left{
	float:left;
	width:57px;
	height:256px;
	background-image:url(/images/ont_videoleft.jpg);
}
#videoleft #right{
	float:left;
	width:410px;
	height:256px;
	background-color:#ecf1f4;
}
#site #mid #videoright{
	float:left;
	width:253px;
	height:256px;
	background-image:url(/images/ont_videoright.jpg);
}
#site #mid #videoright p{
	color:#245987;
	font-size:14px;
	font-weight:bold;
	margin:0px;
	padding-top:19px;
	padding-left:26px;
	padding-bottom:10px;
}
#site #mid #videoright ul{
	color:#787777;
	font-size:11px;
	margin:0px;
	padding-top:0px;
	padding-left:24px;
	padding-bottom:0px;
}
#site #mid #videoright ul li{
	list-style-type:none;
}
#site #mid #videoright ul li a{
	text-decoration:none;
	color:#787777;
}
#site #mid #videoright ul li a:hover{
	color:#ff750e;
}
#site #mid #videoright ul li a img{
	padding-bottom:10px;
}
#controllerholder{
	clear:both;
}
#controllerholder #leftfill{
	float:left;
}
#controllerholder #controller{
	float:left;
	background-image:url(/images/ont_videobotmid.jpg);
	width:410px;
	height:13px;
}
/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.controls { 
	position:relative;
	height:8px;
}

/* when play button toggles between play/pause class 
	we move it's background image */
div.controls div.play, div.controls div.pause { 
	margin-top:15px;
	position:relative;
	width: 18px;
	height:10px;
	text-indent:-999em;
	cursor:pointer;
	overflow:hidden;
	background:url(/components/flowplayer/images/play_pause.gif) center top no-repeat;
}

div.controls div.pause { 
	background-position:center -10px;
}

/* the track or "scrubber"  */
div.controls div.track { 
	margin-top:-9px;
	position:absolute;
	height:18px;
	left:30px;
	background:url(/components/flowplayer/images/track.gif) no-repeat;
	text-align:left;
	cursor:pointer;
	width:200px;	
}

/* the draggable playhead */
div.controls div.playhead {
	position:absolute;	
	height:18px;
	background:url(/components/flowplayer/images/playhead.png) no-repeat;
	cursor:pointer;
	margin-top:-4px; 
	width:18px;
}

/* buffer and controls are automatically resized, their initial width should be 0 */
div.controls div.progress, div.controls div.buffer {	
	background-color:#33c2f3;
	height:4px;
	width:0px;
	margin-left:4px;
	margin-top:2px;
	position:absolute;
	font-size:0px;	
	/* this is the way to fine tune buffer and progress max width */
	max-width:200px;;
}

div.controls div.buffer {
	background-color:#92bac7;
}

/* som proprietary styling for progress bar under mozilla */
div.controls div.progress {
	-moz-border-radius-bottomleft:2px;
	-moz-border-radius-topleft:2px;	
}