/* this makes it possible to add next button beside scrollable */
ul#scrollbanner   { width:100%; overflow:hidden;}
ul#scrollbanner li{ float:left;}
ul#scrollbanner li.btn{ width:10px; margin-top:8px;}


/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 838px;
	height:45px;
	padding:0px;

	/* custom decorations */
	border:1px solid #ccc;
}

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

.items div { float:left; width:838px; text-align:center;}

/* single scrollable item */
.scrollable img { vertical-align:middle;}

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