﻿#scroller {
    width:      590px;
    position:   relative; 
    overflow:   hidden; 
    height:     350px;
}

/* 
    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 width and height for the root element and 
    not for this element. 
*/ 
#scroller.scrollable div.items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
} 
 
/* 
    a single item. must be floated in horizontal scrolling. 
    typically, this element is the one that *you* will style 
    the most. 
*/ 
#scroller.scrollable div.items div { 
    float:left; 
} 

/* you may want to setup some decorations to active the item */ 
div.items div.active { 
    border:1px inset #ccc; 
    background-color:#fff; 
}

#scrollernav {
    float:      right;
}

    #scrollernav div.next {
        float:      left;
        width:      75px;
        height:     25px;
        background-image:   url(/content/images/bg_btnnext.png);
        cursor:         hand;
    }
    
    #scrollernav div.next:hover {
        float:      left;
        width:      75px;
        height:     25px;
        background-image:   url(/content/images/bg_btnnext_on.png);
        cursor:         hand;
    }
    
    #scrollernav div.prev {
        float:      left;
        width:      100px;
        height:     25px;
        background-image:   url(/content/images/bg_btnprev.png);
        background-repeat:  no-repeat;
        margin-right:   1px;
        cursor:         hand;
    }
    
    #scrollernav div.prev:hover {
        float:      left;
        width:      100px;
        height:     25px;
        background-image:   url(/content/images/bg_btnprev_on.png);
        background-repeat:  no-repeat;
        margin-right:   1px;
        cursor:         hand;
    }
    
    #scrollernav div.next p {
        font-size:      1.2em;
        padding:        6px 0 0 0;
        text-align:     center;
        color:          #009ccf;
        text-transform: lowercase;
    }
    
    
    #scrollernav div.prev p {
        font-size:      1.2em;
        padding:        6px 0 0 0;
        text-align:     center;
        color:          #009ccf;
        text-transform: lowercase;
        padding-left:      25px; /* to counteract the addition 25px width of the offset curve */        
    }
    