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

    /* required settings */
    position:relative;
    overflow:hidden;
    width: 879px;
    height:90px;

    /* custom decorations */
   /* border:1px solid #ccc;*/
   background: url(../images/scrollBar_gradient.png) no-repeat;
}

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

/* single scrollable item */
.scrollable img {
    float:left;
    margin:0px 69px 0px 0px;
    /*background-color:#fff;*/
    padding:0px;
    /*border:1px solid #ccc;*/
    cursor:pointer;
    width:247px;
    height:81px;
}

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

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

/* prev, next, prevPage and nextPage buttons */
a.browse {
    display:block;
    width:39px;
    height:81px;
    float:left;
    cursor:pointer;
    font-size:1px;
}

/* right */
a.right {
    background:url(../images/scrollArrow_right.png) no-repeat;
    margin-left:0px;
}

a.right:hover {
    background:url(../images/scrollArrow_right_OVER.png) no-repeat;
}

/* left */
a.left	{
    background:url(../images/scrollArrow_left.png) no-repeat;
    margin-right:0px;
}

a.left:hover	{
    background:url(../images/scrollArrow_left_OVER.png) no-repeat;
}

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