/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 
div.scrollable {
    /* required settings */
    position: relative;
    overflow: hidden;
    width: 520px;
    height: 240px;

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

    /* from stepcarousel */
    /* margin-top: 10px; */
    /* margin-left: 35px; */
    background-color: #f7fcfd;
    border: 3px solid #dbeaf2;
    border-radius: 3.6em;
}
 
/* from stepcarousel */
div.scrollable div.header {
    width: 100%;
    height: 25px; /* height should enough to fit largest content's height */
    padding-left: 10px;
    background-color: #dbeaf2;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #2098bc;
}

/* from stepcarousel */
div.scrollable div.fulllist {
    float: right;
    width: 185px;
    height: 24px;
    margin-top: 195px;
    /* margin-right: 35px; */
    padding-left: 10px;
    background-color: #2098bc;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}

/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a super large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
div.scrollable div.items {
    /* required settings */
    width: 20000em; /* this cannot be too large */
    /* width: 1482px; */
    position: absolute;

    /* form stepcarousel */
    background-color: #f7fafe;
}
 
/* 
    a single item. must be floated on horizontal scrolling 
    typically this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable div.items div {
    /* required settings */
    float: left;
    width: 114px;

    /* form stepcarousel */
    /* margin around each panel */
    margin: 8px;
    text-align: center;
    /* margin-left: 12;
    margin-right: 12; */
}
 
/* form stepcarousel */
div.scrollable div.items div img {
    padding: 2px;
    border: solid 1px #ea6127;
}

/* form stepcarousel */
div.scrollable div.items div a {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 8pt;
    color: #0b788e;
    text-decoration: underline;
    line-height: 9pt;
}

/* form stepcarousel */
div.scrollable div.items div a:visited {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 8pt;
    color: #0b788e;
    text-decoration: underline;
    line-height: 9pt;
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
    display: block;
    width: 18px;
    height: 18px;
    background: url(../i/scrollable/arrow/left.png) no-repeat;
    float: left;
    margin: 95px 5px;
    cursor: pointer;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
    background-position: 0px -18px;      
}

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

/* next button uses another background image */
a.next, a.nextPage {
    background-image: url(../i/scrollable/arrow/right.png);
    clear: right;    
}

div.less, div.more, div.lessPage, div.morePage {
    display: block;
    width: 36px;
    height: 36px;
    background: url(../i/layout/leftarrow.gif) no-repeat;
    float: left;
    margin: 95px 0px;
    cursor: pointer;
}

div.more, div.morePage {
    background-image: url(../i/layout/rightarrow.gif);
    clear: right;    
}

div.less:hover, div.more:hover, div.lessPage:hover, div.morePage:hover {
    background-position: 0px 0px;
}

div.disabled {
    visibility: hidden !important;       
}

/*********** navigator ***********/

/* position and dimensions of the navigator */
div.navi {
    margin-left: 275px;
    width: 200px;
    height: 20px;
}

/* items inside navigator */
div.navi a {
    width: 8px;
    height: 8px;
    float: left;
    margin: 3px;
    background: url(../i/scrollable/arrow/navigator.png) 0 0 no-repeat;     
    cursor: pointer; 
}

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

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