/* root element for horizontal scrollables */
.scrollable {
    position: relative;
    overflow: hidden;
    width: 960px;
    height: 138px;
}

/* root element for scrollable items */
.scrollable .items {
    width: 20000em;
    position: absolute;
    clear: both;
}

/* single scrollable item */
.item {
    float: left;
    cursor: default;
    width: 960px;
    height: 138px;
    padding: 0px;
}

/* position and dimensions of the navigator */
.navi {
    width: 960px;
    height: 22px;
}

/* items inside navigator */
.navi a {
    width: 12px;
    height: 12px;
    float: left;
    margin: 6px 3px;
    background: transparent url(../img/slider_spots_36x12.png) 0 0 no-repeat;
    display: block;
    font-size: 1px;
}

/* mouseover state */
.navi a:hover {
    background-position: -12px 0;
}

/* active state (current page state) */
.navi a.active {
    background-position: -24px 0;
}