/* *************************************************************
SCROLL BAR USING JQUERY TOOLS
************************************************************* */
/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 819px;
	height: 145px;
	margin: 0 10px 0 12px;
	float: left;
	display: inline;
}

/*
	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;
}

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

/* make A tags our floating scrollable items */
.scrollable .items a {
	display:block;
	float:left;
	margin: 1px 1px 0 0;
	cursor: pointer;
}

/* single scrollable item */
.scrollable a{ height: 140px; margin: 0 1px 0 0; padding: 0; display:block; float:left; background-color: #F0F0F0; width: 90px; text-decoration: none;}

.scrollable .img_mask{ float: left; width: 90px; height: 90px; background-position: center; background-repeat: no-repeat; margin: 0 0 4px 0;}
#carousel .scrollable h2,
#carousel .scrollable h3{ font: 60% Arial, Helvetica, sans-serif; width: 80px; float: left; clear: both; padding: 0; margin: 0 0 0 6px; display: inline;}
#carousel .scrollable h2{ color: #666;}
#carousel .scrollable h3{ color: #008DA4;}


/* active item */
.scrollable .active {
	z-index:9999;
	position:relative;
	float: left; 	
}


/* *************************************************************
NAVIGATION BUTTONS
************************************************************* */
/* prev, next, prevPage and nextPage buttons */
a{cursor: pointer;}
a.browse {
	background:url(images/btn_gallery.png) 0 0 no-repeat;
	display: inline;
	width: 33px;
	height: 33px;
	float: left;
	margin: 55px 0px 0 0;
	cursor: pointer;
	font-size:1px;
}

/* right */
a.right 		{ background-position: 0 -33px; clear:right; margin-left: 0;}
a.right:hover 	{ background-position:-33px -33px; }
a.right:active 	{ background-position:-66px -33px; } 


/* left */
a.left 			{ margin-left: 8px;}
a.left:hover  	{ background-position:-33px 0; }
a.left:active  	{ background-position:-66px 0; }


/* disabled navigational button 
normally >>> visibility:hidden !important;
*/
a.right.disabled{background-position: -99px -33px; visibility: visible; cursor: auto;}
a.left.disabled{background-position: -99px 0; visibility: visible; cursor: auto;}

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