@charset "utf-8";
/*
SCROLLABLE HORIZONTAL*/
/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable { /* required settings */ position:relative; overflow:hidden; width: 626px; height:250px; /* custom decorations */ border:0px 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:626px; }
/* single scrollable item */
.scrollable img { float:left; /*margin:0px; padding:0px; border:0px solid #000; background-color:#fff; width:760px; height:250px;*/ } 
/* active item */
.scrollable .active { border:0px solid #000; position:relative; cursor:default; }
/*
SCROLLABLE BUTTONS*/
/* this makes it possible to add next button beside scrollable */
.scrollable { float:left; }
/* prev, next, prevPage and nextPage buttons */
a.browse { background:url(..images/hori_large.png) no-repeat; display:block; width:30px; height:30px; float:left; margin:40px 10px; cursor:pointer; font-size:1px; }
/* right */
a.right { background-position: 0 -30px; clear:right; margin-right: 0px; }
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }
/* left */
a.left { margin-left: 0px; }
a.left:hover { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }
/* up and down */
a.up, a.down { background:url(..images/vert_large.png) no-repeat; float: none; margin: 10px 50px; }
/* up */
a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }
/* down */
a.down { background-position: 0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active { background-position:-60px -30px; }
/* disabled navigational button */
a.disabled { visibility:hidden !important; }
/*
SCROLLABLE NAV*/
/*
position and dimensions of the navigator - edit the margin to center the navigator:
for ten the margin: 0 0 0 243px
for nine the margin: 0 0 0 250px
for eight the margin: 0 0 0 257px
for seven the margin: 0 0 0 264px
for six the margin: 0 0 0 271px
for five the margin: 0 0 0 278px
for four the margin: 0 0 0 285px
for three the margin: 0 0 0 292px
*/
.navi { margin: 0 0 0 264px; width:200px; height:20px; }
/* items inside navigator */
.navi a { width:8px; height:8px; float:left; margin:3px; background:url(../images/navigator.png) no-repeat 0 0; display:block; font-size:1px; cursor:pointer; }
/* mouseover state */
.navi a:hover { background-position:0 -8px; }
/* active state (current page state) */
.navi a.active { background-position:0 -16px; }