/* this makes it possible to add next button beside scrollable */
div.scrollable {background-color:#eee; float:left; height:275px; margin:0 auto; overflow:hidden; position:relative; width:720px;}

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


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

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {background:#eee url(../images/left.png) no-repeat; cursor:pointer; display:block; font-size:1px; float:left; height:18px; margin:43px 10px; width:18px;}

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

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

/* next button uses another background image */
a.next, a.nextPage {background-image:url(../images/right.png); clear:right;}


/* single item */
#thumbs div {background-color:#2d303f; border:none; color:#fff; float:left; height:272px; width:240px;}
#thumbs div a {color:#fff;}
/* style when mouse is over the item */
#thumbs div.hover {background-color:#444;}
#thumbs a {color:#fff; display:block; margin:13px; font-family:arial,tahoma,sans-serif; font-weight:normal; font-size:10pt; text-align:center;}


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

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

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

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

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