/* @override http://www.elon.edu/shell/960/css/video_scrollable.css */

div#video.box {
	padding:0;
	margin-top: -5px;
	background: none!important;
	overflow: hidden;}

div#video.box a {
	color: #fff !important;
	text-decoration: none !important;
	border-bottom: none;
}


/* ------------------------------
 	VIDEO SCROLLABLE
 ----------------------------- */

/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/

div#video_widget div.scrollable {
	
	/* required settings */
	position:relative;
	overflow:hidden !important;	 	
	width: 300px;	
	height:225px;	
	
	/* custom decorations */
	padding:0;	
	background-color:none;				
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div#video_widget div#videos {	
	/* this cannot be too large */
	width:20000em;	
	position:absolute;
	clear:both;		
	
	/* decoration */
	margin-left:0px;

}

/* single scrollable item */
div#video_widget div#videos div {
	float:left;
	display:block;
	
	/* custom decoration */
	text-align:center;
	width:300px;
	height: 225px;
	padding:0px;
	font-size:30px;
	font-family: 'bitstream vera sans';
	/*border:1px outset #ccc;*/
	/*background-color: #ddd;*/
	margin-right: 20px;	
}

/* active item */
div#video_widget div#videos div.active {
	/*border:1px inset #ccc;		
	background-color:#fff;*/
}


/* ------------------------------
   VIDEO SCROLLABLE NAVIGATION
 ----------------------------- */
 
/* this makes it possible to add next button beside scrollable */
div#video_widget div.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */

div#video_widget a.prev, div#video_widget a.next, div#video_widget a.prevPage, div#video_widget a.nextPage {
	display:block;
	width:30px;
	height: 30px;
	background:url(http://www.elon.edu/images/e-web/home/arrow_left.png) top left no-repeat;
	cursor:pointer;
	font-size:1px;
}

div#video_widget a.prev:hover, div#video_widget a.next:hover, div#video_widget a.prevPage:hover, div#video_widget a.nextPage:hover {
	background-position: top left;		
}


 /*disabled navigational button*/ 
div#video_widget a.disabled {
	visibility:hidden !important;		
}

/* next button uses another background image */
div#video_widget a.next, div#video_widget a.nextPage {
	background-image:url(http://www.elon.edu/images/e-web/home/arrow_right.png);
}


div#video_widget {
	position: relative;
	width: 300px;
}

div#video_widget a.prev, div#video_widget a.next, div#video_widget a.prevPage, div#video_widget a.nextPage {
	position: absolute;
	top: 100px;
	z-index: 3 !important;
}

div#video_widget a.next {
	right: 0px;
}

div#video_widget a.prev {
	left: 0px;
}


/* ------------------------------
   PLAYER STYLE
 ----------------------------- */

/* container has a background image */
div#video_widget a.player {
	height: 225px;
	width: 300px;
	margin-top:0;
	float:left;
	padding:0;	
	text-align:left;
	color:#fff !important;
	text-decoration:none !important;
	cursor:pointer;
}


/* play buttoms */
a.player img {
	margin: 90px 0 0 128px;
}

/* captions */

a.player div.vid_caption {
	background-color: black !important;
	background: url(https://www.elon.edu/shell/960/js/flowplayer/h80.png) repeat-x;
	opacity:0.7;
	border-top:1px solid #ccc;
	margin-top: 1em;
}

a.player div.vid_caption p {
	text-align: left;
	font-size: 12px;
	color:#fff;
	padding: .5em 1em;
	line-height: 1.25em;
}

.player a div.vid_caption {
	color:#fff !important;
	text-decoration: none !important;
}