/* outmost wrapper element */
#scrollable {
	position: relative;
        overflow: hidden;
 	background-color:#666;
	border:1px solid #666;
	padding:10px 8px;
	margin-top: 50px;
	width:464px;
	height:124px;
}
/* w: items( 396 + 8 = 404 ) + prevnext( 19(+10 m-r) + 19(+12 m-l) = 60 ) = 404 + 60 = 464 */

/* container for the scrollable items */
#scrollable div.items {
	height:125px;	
	margin-left:8px;	
	float:left;
	width:396px;
}
/* w: items a (132) * 3 = 396 */

#scrollable div.items img {
	border: 2px solid #aa0000;
}

/* single item */
#scrollable div.items a {
	display:block;
	float:left;
	margin-right:8px;
	width:124px;
	font-size:50px;
	color:#ccc;
	line-height:120px;
	text-decoration:none;
	text-align:center;
	cursor:pointer;
}
/* w: 120 + 8 + img-border(2+2) = 132 */

#scrollable div.items a:hover {
	color:#999;	
}

#scrollable div.items a.active {
	background-position:-174px 0;		
	color:#555;
}


/* next / prev buttons */
a.prev, a.next {
	display:block;
	width:19px;
	height:85px;
	float:left;
	background: url(../images/ui/scroll-buttons1.png) no-repeat;
	margin:24px 0px;
	cursor: pointer;
}
/* margin: ( ( scrollable(124 + padding(10) = 134) - height(85) ) = 49) / 2 = 24 */

a.prev {
	background-position: 0px -1px;
	margin-right: 10px;
}

a.prev:hover {
	background-position: -21px -1px;
}

a.next {
	background-position: -45px -1px;
	margin-left: 12px;
}

a.next:hover {
	background-position: -70px -1px;
}


/* navigator */
div.navi {
	position:absolute;
	top:-30px;
	left:241px;
	margin-left:-21px;
	width:42px;
	height:0px;
}
/* left: ( scrollable(w:464 + padding(8+8) + border(1+1))=482 / 2 ) = 241

/* items inside navigator */
div.navi span {
	width:8px;
	height:8px;
	overflow: hidden;
	float:left;
	margin:3px;
	background:url(../images/ui/dots.png) no-repeat;     
	cursor:pointer;
}

div.navi span:hover {
	background-position:0 -8px;      
}

div.navi span.active {
	background-position:0 -16px;     
}