/*

	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
#scroller{margin:0 0 -16px 0;position:relative;top:-33px}
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 670px;
	height:302px;
	
	/* custom decorations */
	
}

/*
	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 .page{
	float:left;	
	width:675px;
	position:relative;
	
}

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


/* position and dimensions of the navigator */ 
.navi {position:absolute;     z-index:50000;top:260px;right:30px}   
/* items inside navigator */ 
.navi a    
{
	
	
	width:18px;
	height:18px;  
	float:left;     
	margin:3px;     
	background:url(/assets/images/navitems.png) 0 0 no-repeat;     
	display:block; 
	cursor:pointer;    
	}  
/* mouseover state */ .navi a:hover {     background-position:-18px 0px;}  
/* active state (current page state) */ 
.navi a.active {     background-position:-18px 0px;}





/* SAILING AREAS SCROLL */

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

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 912px;
	height:120px;
	
	
}

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

/* single scrollable item */
.scroll_areas div {
	float:left;
	margin:0 4px 0 0;	
	cursor:pointer;	
	height:96px;
	width:87px;
	
	text-align:center;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	position:relative;
}
.scroll_areas div a{color:#5a92c8;text-decoration:none;font-weight:bold;font-size:11px}
/* active item */
.scroll_areas .active {
	background-color:#f5f6f8;
}
.scroll_areas .active a{
	color:#2dbaf5;
}



.subarea{display:none;position:absolute;bottom:106px;background-color:#f5f6f8;width:87px;z-index:1000000}
.subarea li a{color:#000;text-decoration:none;display:block;padding:3px 5px;font-size:11px}
.subarea li a:hover{background-color:#2dbaf5;color:#fff}

/* this makes it possible to add next button beside scrollable */


/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(/assets/images/hori_large.png) no-repeat;
	display:block;
	width:15px;
	height:21px;
	float:left;
	margin:40px 10px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right 				{ background-position: -15px 0px; position:absolute;top:5px;left:934px;z-index:100000;}
a.rightsmall 			{ background-position: -15px 0px; position:absolute;top:5px;left:709px;z-index:100000;}

/* left */
a.left				{ margin-left: 0px; position:absolute;top:410px;left:0px} 
a.left				{ margin-left: 0px; position:absolute;top:5px;left:0px} 



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




/* SAILING AREAS SMALL (DETAIL VIEW) */
.scroll_areas_small {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 695px;
	height:120px;
	
	
}


.scroll_areas_small .areaitemssmall {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

/* single scrollable item */
.scroll_areas_small div {
	float:left;
	margin:0 0px 0 0;	
	cursor:pointer;	
	height:96px;
	width:87px;
	
	text-align:center;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	position:relative;
}
.scroll_areas_small div a{color:#5a92c8;text-decoration:none;font-weight:bold;font-size:11px}
/* active item */
.scroll_areas_small .active {
	background-color:#f5f6f8;
}
.scroll_areas_small .active a{
	color:#2dbaf5;
}