/*
CSS based on the following jQuery Tools stylesheets - http://wedocando.com
http://static.flowplayer.org/tools/css/scrollable-horizontal.css
http://static.flowplayer.org/tools/css/scrollable-buttons.css
http://static.flowplayer.org/tools/css/tabs-slideshow.css
*/


/*Absolute position for slideshow images - http://wedocando.com*/

.images div {
display:none;
position:absolute;
}


/*Hide tabs for slideshow - http://wedocando.com*/

.slidetabs {
display: none;
}


/* this makes it possible to add next button beside scrollable */

.scrollable {
float:left;	
}


/* prev, next, prevPage and nextPage buttons */

a.browse {
background:url(../images/buttons/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(../img/scrollable/arrow/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;		
} 	


/*Bottom margin for gallery image - http://wedocando.com*/

#image_wrap {
margin: 0 0 10px 0;
}


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

.scrollable {
/* required settings */
position:relative;
overflow:hidden;
width: 878px;
height:105px;
/* custom decorations */
border:1px solid #ccc;
background:url(/img/global/gradient/h300.png) repeat-x;
}

#small.scrollable {
width: 450px;

}


/*
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:878px;
}

#small.items div {
width: 450px;
}


/* single scrollable item */

.scrollable img {
float:left;
margin:20px 5px 20px 31px;
background-color:#fff;
padding:2px;
border:1px solid #ccc;
width:100px;
height:56px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}

#small.scrollable img {
margin:20px 5px 20px 30px;
}


/* active item */

.scrollable .active {
border:2px solid #000;
position:relative;
cursor:default;
}