/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/


div.scrollable
{
    /* required settings */
    position: relative; /*overflow:hidden;*/
    overflow: visible;
    width: 810px; /*height:730px;	*/
    margin-top: 10px; /* custom decorations */
    padding: 0px 0;
}

/* 
	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:20000em;*/
    width: auto; /*position:absolute;*/
    clear: both; /* decoration */
    margin-left: 0px;
}

/* single scrollable item */
div.scrollable div.items div
{
    float: left;
    clear: both; /* custom decoration */
    text-align: center;
    width: 808px; /*height:730px;*/
    padding: 0px 0px;
    font-size: 30px;
    font-size: 12px;
}

div.scrollable div.items div span.item
{
    width: 194px;
    height: 176px;
    float: left;
    background-image: url(../images/gallery_frame.jpg);
    background-position: 0 0;
    background-repeat: no-repeat; padding-left:5px;
}



.items img
{
    width: 191px;
    height: 105px;
    margin-top: 2px;
    
}

/* active item */
div.scrollable div.items div.active
{
}




/* 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;*/
    display: none;
    width: 32px;
    height: 34px;
    background: url(../images/gallery_left.jpg) no-repeat;
    margin-left: 535px;
    cursor: pointer;
    font-size: 1px;
    position: absolute;
}




/* mouseover state */
a.prev:hover, a.next:hover, a.prev_:hover, a.next_:hover, a.prevPage:hover, a.nextPage:hover
{
}

/* disabled navigational button */
a.disabled
{
    background-position: bottom !important;
    cursor: default !important;
}

/* next button uses another background image */
a.next, a.next_, a.nextPage
{
    background-image: url(../images/gallery_right.jpg);
    margin-left: 570px;
    background-position: top;
}

#nextBottom,#prevBottom{height:35px;
margin-top:770px !important;
position:absolute !important;
width:35px;  display:block;}

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


/* position and dimensions of the navigator */
div.navi
{
float:left;
line-height:20px;
margin-top:7px;
padding-left:6px;
width:400px;
}

div.navi .seperator
{
    float: left;
    margin-left: 0px;

}


/* items inside navigator */
div.navi a, div.navi span
{
float:left;
font-size:12px;
height:20px;
margin:0 0 3px;
width:13px;
text-align:center;
}

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

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