.flowt {width:630px; border:1px solid #ccc; background:#eee; margin-bottom:20px; padding:14px 9px;}

/*root element for the scrollable. when scrolling occurs this element stays still.*/
.flowt .scrollable {position:relative; overflow:hidden; width:560px; height:90px;}

/*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.*/
.flowt .scrollable .items {/* this cannot be too large */ width:20000em; position:absolute; clear:both;}

/* single scrollable item */
.flowt .scrollable .item {float:left; margin:0px 12px 0px 18px; background-color:#fff; padding:4px; border:1px solid #ccc; cursor:pointer; width:100px; height:80px; -moz-border-radius:4px; -webkit-border-radius:4px;}

/* active item */
.flowt .scrollable .active {border:1px solid #000; z-index:9999; position:relative;}

/* this makes it possible to add next button beside scrollable */
.flowt .scrollable {float:left;}

/* prev, next, prevPage and nextPage buttons */
.flowt a.browse {background:url(hori_large.png) no-repeat; display:block; width:30px; height:30px; float:left; margin:25px 5px; cursor:pointer; font-size:1px;}

/* right */
.flowt a.right { background-position: 0 -30px; clear:right; margin-right: 0px;}
.flowt a.right:hover { background-position:-30px -30px; }
.flowt a.right:active { background-position:-60px -30px; } 

/* left */
.flowt a.left { margin-left: 0px; } 
.flowt a.left:hover { background-position:-30px 0; }
.flowt a.left:active { background-position:-60px 0; }

/* up and down */
.flowt a.up, .flowt a.down {background:url(vert_large.png) no-repeat; float: none; margin: 5px 50px;}

/* up */
.flowt a.up:hover { background-position:-30px 0; }
.flowt a.up:active { background-position:-60px 0; }

/* down */
.flowt a.down { background-position: 0 -30px; }
.flowt a.down:hover { background-position:-30px -30px; }
.flowt a.down:active { background-position:-60px -30px; } 

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

.flowt .nav {margin-left:299px; width:100px; height:8px; margin-bottom:5px;}
.flowt .nav a {width:8px; height:8px; float:left; margin:3px; background:url(navigator.png) 0 0 no-repeat; display:block; font-size:1px;}
.flowt .nav a:hover {background-position:0 -8px;}
.flowt .nav a.active {background-position:0 -16px;}