/* 
root element for the scrollable. 
when scrolling occurs this element stays still. 
*/
div.scrollable{/* required settings */
position:relative;overflow:hidden;width:910px;height:102px;/* custom decorations */
padding:0px;}
/* 
root element for scrollable items. Must be absolutely positioned
and it should have a super large width to accomodate scrollable items.
it's enough that you set width and height for the root element and
not for this element.
*/
div.scrollable div.items{/* this cannot be too large */
width:30000em;position:absolute;clear:both;/* decoration */
margin-left:0px;}
/* single scrollable item */
div.scrollable div.items div{float:left;/* custom decoration */
text-align:center;width:182px;padding:0px;font-size:30px;background-color:white;margin-right:0px;text-align:center;}
.items a{font:bold 12px helvetica;color:black;line-height:22px;}
/* active item */
div.scrollable div.items div.active{}
/* this makes it possible to add next button beside scrollable */
div.scrollable{float:left;}
a.prev{display:block;width:11px;height:22px;background:url(images/ui/left.gif) no-repeat;float:left;margin:38px 3px 38px 1px;cursor:pointer;font-size:1px;}
a.next{display:block;width:11px;height:22px;background:url(images/ui/right.gif) no-repeat;float:right;margin:38px 2px;cursor:pointer;font-size:1px;}
/* mouseover state */
a.prev:hover,a.next:hover,a.prevPage:hover,a.nextPage:hover{background-position:0px -22px;}
/* disabled navigational button */
a.disabled{visibility:hidden !important;}