/*********** general ***********/

/* root element for the whole scrollable setup */

div.scrollable {
	position: relative;
	overflow: hidden;
	width: 406px;	 
	height: 310px;	
	border-top: 1px solid #efefef;
	border-bottom: 1px solid #efefef;
}

/* 	root element for scrollable items. It is absolutely positioned with large width. */
#thumbs {
	position: absolute;
	width: 20000em;	
	clear: both;
	border-left: 1px solid #efefef;
}

/* custom positioning for navigational links */
a.prev, a.next {
	margin-top: 118px;	
}

/* single item */
#thumbs div {
	float: left;
	width: 100px;
	height: 600px;
	background: #fff url(http://www.traktorgetraenke.ch/fileadmin/carousel/images/h150.png) repeat-x 0 260px;
	color:# 999;
	border-left: 1px solid #efefef;
	cursor: pointer;
}

/* style when mouse is over the item */
#thumbs div.hover {
	background-color: #fff;	
}

/* style when element is active (clicked) */
#thumbs div.active {
	background-color: #efefef;
	cursor: default;
}

#thumbs h1, #thumbs p, #thumbs span {	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #1a171b;
	text-align: center;
	font-style: normal;
	text-transform: none;
	margin-top: 10px;
	margin-right: 13px;
	margin-left: 13px;
	line-height: 14px;
	padding: 0;
	border: none;
}

#thumbs a {
	color: #97be0d;
	text-decoration: none;
	font-weight: normal;
}

#thumbs a:hover {
	color: #000000;
	text-decoration: none;
	font-weight: normal;
}

#thumbs h1 em {
	font-style: normal;
	color: yellow;
}

.products img {
	valign: middle;
}



/*********** navigator ***********/

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

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:18px;
	height:18px;
	background:url(http://www.traktorgetraenke.ch/fileadmin/carousel/images/arrow/left.png) no-repeat;
	float:left;
	margin:150px 2px;
	cursor:pointer;
	font-size:1px;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -18px;		
}

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

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(http://www.traktorgetraenke.ch/fileadmin/carousel/images/arrow/right.png);
	clear:right;	
}





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


a.prev: hover, a.prevPage: hover {
	background: url(http://www.traktorgetraenke.ch/fileadmin/carousel/images/arrow/left_dark.png) no-repeat;	
}

a.next: hover, a.nextPage: hover {
	background-position: 0px -18px;	
background:  url(http://www.traktorgetraenke.ch/fileadmin/carousel/images/arrow/right_dark.png) no-repeat;	
}




/*********** navigator ***********/


/* position and dimensions of the navigator */
div.navi {
	margin-left: 328px;
	width: 200px;
	height: 20px;
}


/* items inside navigator */
div.navi a {
	width: 8px;
	height: 8px;
	float: left;
	margin: 3px;
	background: url(http://www.traktorgetraenke.ch/fileadmin/carousel/images/arrow/navigator.png) 0 0 no-repeat;
	display: block;
	font-size: 1px;
}

/* mouseover state */
div.navi a: hover {
	background-position: 0 -8px;      
}

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