/*
root element for the scrollable.  when scrolling occurs this
element stays still.
*/
.scrollable {
    float:left;
    position: relative;
    overflow: hidden;
    width: 600px;
    height: 238px;
}

/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accommodate scrollable
items.  it's enough that you set width and height for the root element
and not for this element.
*/
.scrollable .items {
    width: 20000em; /* this cannot be too large */
    position: absolute;
}

/*
a single item. must be floated in horizontal scrolling.  typically,
this element is the one that *you* will style the most.
*/
.items div.block {
    float: left;
    margin: 0 20px;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
    position: absolute;
    top: 46px;
    cursor: pointer;
    display: block;
    font-size: 1px;
    height: 160px;
    width: 24px;
    z-index: 50;
}

/* right */
a.right { left: 576px; background: url("../images/btn-next.gif") no-repeat 0 55px; }
a.right:hover { background: url("../images/btn-next-on.gif") no-repeat 0 55px; }

/* left */
a.left { left: 8px; background: url("../images/btn-prev.gif") no-repeat 0 55px; }
a.left:hover { background: url("../images/btn-prev-on.gif") no-repeat 0 55px; }

/* disabled navigational button */
@media screen and (min-width: 982px) {
    a.disabled {
        visibility:hidden !important;
    }
}