/* scrollable div area */
#scrollable1 {
    float: left;
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    overflow: hidden;
    white-space: nowrap;
}

/* vertical track */
#track1 {
    float: left;
    width: 15px;
    height: 200px;
    margin-left: 10px;
    background-color: #ccc;
}

/* vertical track handle */
#handle1 {
    width: 15px;
    height: 20px;
    background-color: #f00;
    cursor: move;
}

/* horizontal track */
#track2 {
    float: left;
    clear: both;
    width: 300px;
    height: 15px;
    margin-top: 10px;
    background-color:#ccc;
}

/* horizontal track handle */
#handle2 {
    width: 20px;
    height: 15px;
    background-color: #f00;
    cursor: move;
}

/* scrollable div area */
#scrollable2 {
    float: left;
    width: 264px;
    height: 350px;
    padding: 0 8px;
    margin-bottom: 3px;
    overflow: hidden;
}

/* wrap to make sure that image area is clickable */
#wrap3 {
    margin-top: 5px;
    float: left;
    width: 15px;
    height: 340px;
    background: transparent url(/images/sfondo-scroller.gif) no-repeat bottom left;
}

#wrap3, #wrap3 * {
    z-index: 0;
}

/* top image of track */
#track3-top {
    position: absolute;
    width: 15px;
    height: 15px;
}

/* vertical track */
#track3 {
    position: absolute;
    width: 15px;
    height: 347px;
}

/* vertical track handle */
#handle3 {
    width: 15px;
    height: 15px;
}

/* wrap to make sure that image area is clickable */
#wrap4 {
    float: left;
    clear: both;
    width: 301px;
    height: 15px;
    background: transparent url(images/scrollbar-track-right.png) no-repeat top right;
}

/* left image of track */
#track4-left {
    position: absolute;
    width: 15px;
    height: 15px;
    background: transparent url(images/scrollbar-track-left.png) no-repeat top left;
}

/* horizontal track */
#track4 {
    position: absolute;
    width: 301px;
    height: 15px;
}

/* horizontal track handle */
#handle4 {
    width: 37px;
    height: 15px;
}