/*{{{ general playlist settings, light gray */



#video_player_container{

	width:760px;
	margin:0 auto;
	position:relative;
	height:415px;
}


div.playlist {

 

	position:relative;

	overflow:hidden;	 	

	height:285px !important;

}

 

div.playlist div.clips {	

	position:absolute;

	height:20000em;

}

 

div.playlist, div.clips {

	width:260px;	

}

div.clips a {
	background:url(images/video/h80.png);
	display:block;
	background-color:#fefeff;
	padding:0px 15px;
	height:70px;
	width:195px;
	border:1px outset #ccc;		
	text-decoration:none;
	letter-spacing:-1px;
	color:#000;

}

div.clips a .clip_title{
	font-weight:bold;
	display:block;
	font-style:normal;
	padding-top:5px;
	font-size:14px;
	color:#5B1B0A;
	width:170px;
}

div.clips a .clip_sub_title{
	font-family:verdana, arial, sans-serif;
	display:block;
	font-style:normal;
	font-size:11px;
	line-height:normal;
	width:170px;
}

 

div.clips a.first {

	border-top-width:1px;

}

 

div.clips a.playing, div.clips a.paused, div.clips a.progress {

	background:url(images/video/light.png) no-repeat 0px -69px;

	width:225px;

	border:0;

}

	

div.clips a.progress {

	opacity:0.6;		

}

 

div.clips a.paused {

	background-position:0 0;	

}

 

div.clips a span {

	display:block;		

	font-size:11px;

	color:#666;

}

 

div.clips a em {

	font-style:normal;

	color:#f00;

}	

 

div.clips a:hover {

	background-color:#f9f9fa;		

}

 

div.clips a.playing:hover, div.clips a.paused:hover, div.clips a.progress:hover {

	background-color:transparent !important;		 

}

/*}}}*/

 

 

/*{{{ petrol colored */

 

div.clips.petrol a {

	background-color:#193947;

	color:#fff;

	border:1px outset #193947;

}

 

div.clips.petrol a.playing, div.clips.petrol a.paused, div.clips.petrol a.progress {

	background:url(images/video/dark.png) no-repeat 0px -69px;

	border:0;

}

 

div.clips.petrol a.paused {

	background-position:0 0;	

}

 

div.clips.petrol a span {

	color:#aaa;

}

 

div.clips.petrol a em {

	color:#FCA29A;

	font-weight:bold;

}	

 

div.clips.petrol a:hover {

	background-color:#274D58;		

} 

 

div.clips.petrol a.playing:hover, div.clips.petrol a.paused:hover, div.clips.petrol a.progress:hover {

	background-color:transparent !important;		 

}

/*}}}*/

 

 

/*{{{ low version */

 

div.clips.low a {	

	height:31px;

}

 

div.clips.low a.playing, div.clips.low a.paused, div.clips.low a.progress {

	background-image:url(images/video/light_small.png);

	background-position:0 -55px;

}

 

div.clips.low a.paused {

	background-position:0 0;	

}

 

 

/*}}}*/

 

 

/*{{{ go buttons */

 

a.go {

	display:block;

	width:18px;

	height:18px;

	background:url(images/video/arrow/up.png) no-repeat;

	margin:5px 0 5px 105px;

	cursor:pointer;

}

 

a.go:hover, a.go.down:hover {

	background-position:0px -18px;		

}

 

a.go.down {

	background-image:url(images/video/arrow/down.png);	

}

 

div.petrol a.go {

	background-image:url(images/video/arrow/up_dark.png);		

}

 

div.petrol a.go.down {

	background-image:url(images/video/arrow/down_dark.png);		

}

 

a.go.disabled {

	visibility:hidden;		

}

/*}}}*/


/** PLAYER **/
.player{
	margin-top:0px;
}


/** Scroller **/

/** make it a left col **/
#video_left_col {
	position:relative;
	top:0;
	left:0;
	width: 220px;
}

/* root element for scrollable */
.vertical {  
	
	/* required settings */
	position:relative;
	overflow:hidden;	

	/* vertical scrollers have typically larger height than width */	
	height: 356px;	 
	width: 260px;
	
}

/* root element for scrollable items */
.clips {	
	position:absolute;
	
	/* this time we have very large space for height */	
	height:20000em;	
	margin: 0px;
}

/* single scrollable item */
.clips a {

}

/* the action buttons above the scrollable */
.actions {
	margin:2px 0;
	width:227px;
}

.actions a {
	cursor:pointer;
	background-position:0 0;
	height:22px;
	display:block;
	border:1px outset #ccc;
}

.actions a:hover {
	background-position:0px -22px;
}

.disabled {
	visibility:hidden;		
}

.actions_top{
	background:url('images/video/arrow-up.gif') #aaa no-repeat 1px -21px;
}

.actions_bottom{
	background:url('images/video/arrow-down.gif') #aaa no-repeat 1px -21px;
}

.actions_top a{
	background:url('images/video/arrow-up.gif') #fff no-repeat top center;
}

.actions_bottom a{
	background:url('images/video/arrow-down.gif') #fff no-repeat top center;
}