/* @override 
	http://leomancinidesign.com/css/slider.css
	http://www.leomancinidesign.com/css/slider.css
*/

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

	/* required settings */
	position: absolute;
	overflow:hidden;
	width: 706px;
	height: 230px;
	
	left: 68px;

		top: 72px;
			
}

/*
	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;
	
	margin-left: 5px;
	
}

/* single scrollable item */
.scrollable .active {
	border:2px solid #000;
	position:relative;
	
}

.item {
	
	width: 739px;
	
	float: left;
	
}

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

		margin-left: 8px;
			
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	display: inline-block;
	cursor:pointer;
	font-size:1px;
	
	float: left;
	
	position: absolute;
	
	top: 306px;

}

/* right */
a.right {
		
		margin-right: 0px;
		
		left: 684px;
		
		margin-top: -1px;
		
		position: absolute;
		
		text-indent: -47px;
		
		font: 15px/15px "Helvetica Neue", Helvetica, Geneva, sans-serif;
		
		top: 325px;
		
		width: 16px;
		
		height: 16px;
		
		color: #fff;
		
		padding-left: 57px;
		
		background: #3e3e3e url(../images/icons/w_arrow_right.png) no-repeat 50px;
		
		padding-top: 5px;
		
		padding-bottom: 5px;
		
		border-bottom: 0 solid #3e3e3e;
		
		text-shadow: #000 0 0 4px;
		
		z-index: 1000000;
		
		-moz-border-radius: 3px;
		
		-webkit-border-top-left-radius: 3px;
		
		-webkit-border-top-right-radius: 3px;
			
}

a.right:hover {

		top: 320px;
		
		color: #fff;
		
		text-shadow: #ef1087 0 0 5px;
		
		background-color: #242424;
		
		border-bottom-color: #242424;
		
		border-bottom-width: 5px;
			
} 


/* left */

a.left {
		
		margin-right: 0px;
		
		left: 86px;
		
		margin-top: -1px;
		
		position: absolute;
		
		text-indent: -28px;
		
		font: 15px/15px "Helvetica Neue", Helvetica, Geneva, sans-serif;
		
		top: 325px;
		
		width: 16px;
		
		height: 16px;
		
		color: #fff;
		
		padding-left: 57px;
		
		background: #3e3e3e url(../images/icons/w_arrow_left.png) no-repeat 9px;
		
		padding-top: 5px;
		
		padding-bottom: 5px;
		
		text-shadow: #000 0 0 4px;
		
		z-index: 999999;
		
		border-bottom: 0 solid #3e3e3e;
		
		-moz-border-radius: 3px;
		
		-webkit-border-top-left-radius: 3px;
		
		-webkit-border-top-right-radius: 3px;
			
}

a.left:hover {

	top: 318px;

	color: #fff;

		text-shadow: #ef1087 0 0 5px;	

		background-color: #242424;

		border-bottom: 7px solid #242424;
			
}

/* up and down */ 


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

/* position and dimensions of the navigator */
.navi {
	height:20px;
	
	margin-top: 251px;
	
	margin-left: auto;
	
	margin-right: auto;
	
	left: 49%;
	
	position: absolute;
	
}


/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../images/icons/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
			
}

/* mouseover state */

/* active state (current page state) */
.navi a.active {
	background-position:0 -8px;     
}