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

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 550px;
	height:86px;
	margin-top:10px;

	/* custom decorations */
	border:0px solid red;
}

/*
	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.
*/
.scrollableFeatured .itemsFeatured {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

/* single scrollable item */
.scrollableFeatured img {
	float:left;
	margin:0px 15px 0px 0px;
	cursor:pointer;
	width:66px;
	height:82px;
	padding:1px;
	
}

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


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

/* make A tags our floating scrollable items */
.itemsFeatured a {
	display:block;
	float:left;
	margin:0px 18px 0px 0px;
	border:1px solid #cccccc;

} 


/* tooltip styling */
#tooltip {
	display:none;
	/*background:url(http://flowplayer.org/tools/img/tooltip/black_arrow.png);*/
	background:url('/images/design/homepage/sayhi.png');
	font-size:12px;
	height:78px;
	width:108px;
	padding:0px;
	color:#ffffff;
}



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

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





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



/* prev, next, prevPage and nextPage buttons */
a.browse {
	/*background:url(http://flowplayer.org/tools/img/scrollable/arrow/hori_large.png) no-repeat;*/
	background:url('/images/design/homepage/scrollableButtons.png') no-repeat;
	display:block;
	width:21px;
	height:101px;
	float:left;
	margin:0px 10px;
	cursor:pointer;
	padding:0px;
}

/* right */
a.right 			{ background-position: 0 -101px; clear:right; margin-right: 0px;}
a.right:hover 		{ background-position:-21px -101px; }
a.right:active 	    { background-position:-42px -101px; } 


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


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

/*********************************************/
/*BUTTONS*/
/*********************************************/