/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable{/* required settings */
	position:relative; overflow:hidden; width: 680px; height:120px; /* custom decorations */
	border:1px solid #ccc; background:url(http://static.flowplayer.org/img/global/gradient/h300.png) repeat-x; }

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items{/* this cannot be too large */
	width:20000em; position:absolute; clear:both; }

/* single scrollable item */
.scrollable img{float:left; margin:20px 5px 20px 21px; background-color:#fff; padding:2px; border:1px solid #ccc; cursor:pointer; width:100px; height:75px; -moz-border-radius:4px; -webkit-border-radius:4px; }

/* active item */
.scrollable .active{border:2px solid #000; z-index:9999; position:relative; }

/* this makes it possible to add next button beside scrollable */
.scrollable{float:left; }

/* prev, next, prevPage and nextPage buttons */
a.browse{background:url(http://static.flowplayer.org/tools/img/scrollable/arrow/hori_large.png) no-repeat; display:block; width:30px; height:30px; float:left; margin:40px 10px; cursor:pointer; font-size:1px; }

/* right */
a.right{background-position: 0 -30px; clear:right; margin-right: 0px; }
a.right:hover{background-position:-30px -30px; }
a.right:active{background-position:-60px -30px; } 


/* left */
a.left{margin-left: 0px; } 
a.left:hover{background-position:-30px 0; }
a.left:active{background-position:-60px 0; }

/* up and down */
a.up, a.down{background:url(http://static.flowplayer.org/tools/img/scrollable/arrow/vert_large.png) no-repeat; float: none; margin: 10px 50px; }

/* up */
a.up:hover{background-position:-30px 0; }
a.up:active{background-position:-60px 0; }

/* down */
a.down{background-position: 0 -30px; }
a.down:hover{background-position:-30px -30px; }
a.down:active{background-position:-60px -30px; } 


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



/* the overlayed element */
.simple_overlay{/* must be initially hidden */
	display:none; /* place overlay on top of other elements */
	z-index:10000; /* styling */
	background-color:#333; width:675px; min-height:200px; border:1px solid #666; /* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 90px 5px #000; -webkit-box-shadow: 0 0 90px #000; }

/* close button positioned on upper right corner */
.simple_overlay .close{background-image:url(http://static.flowplayer.org/tools/img/overlay/close.png); position:absolute; right:-15px; top:-15px; cursor:pointer; height:35px; width:35px; }


/* the large image. we use a gray border around it */
#img{border:1px solid #666; }

/* "next image" and "prev image" links */
.next, .prev{/* absolute positioning relative to the overlay */
	position:absolute; top:40%; border:1px solid #666; cursor:pointer; display:block; padding:10px 20px; color:#fff; font-size:11px; /* upcoming CSS3 features */
	-moz-border-radius:5px; -webkit-border-radius:5px; }

.prev{left:0; border-left:0; -moz-border-radius-topleft:0; -moz-border-radius-bottomleft:0; -webkit-border-bottom-left-radius:0; -webkit-border-top-left-radius:0; }

.next{right:0; border-right:0; -moz-border-radius-topright:0; -moz-border-radius-bottomright:0; -webkit-border-bottom-right-radius:0; -webkit-border-top-right-radius:0; }

.next:hover, .prev:hover{text-decoration:underline; background-color:#000; }

/* when there is no next or previous link available this class is added */
.disabled{visibility:hidden; }

/* the "information box" */
.info{position:absolute; bottom:0; left:0; padding:10px 15px; color:#fff; font-size:11px; border-top:1px solid #666; }

.info strong{display:block; }

/* progress indicator (animated gif). should be initially hidden */
.progress{position:absolute; top:45%; left:50%; display:none; }

/* everybody should know about RGBA colors. */
.next, .prev, .info{background:#333 !important; background:rgba(0, 0, 0, 0.6) url(http://static.flowplayer.org/img/global/gradient/h80.png) repeat-x; }



/*** override styling in external stylesheets ***/

/* remove margins from the image */
.items img {
	margin:0;
}

/* make A tags our floating scrollable items */
.items a {
	display:block;
	float:left;
	margin:20px 15px;
} 


/* tooltip styling */
#tooltip {
	display:none;
	background:url(http://static.flowplayer.org/tools/img/tooltip/black_arrow.png);
	font-size:12px;
	height:70px;
	width:160px;
	padding:25px;
	color:#fff;
}



/* scrollable should not disable gallery navigation */
#gallery .disabled {
	visibility:visible !important;
}

#gallery .inactive {
	visibility:hidden !important;
}