/* ---------- basic theme: these are the most necessary styles --------------------------------- */

.scrollbar-pane {
    margin-right: 20px;
}

.scrollbar-handle-container {
    background: #EEE;
    width: 20px;
}

.scrollbar-handle {
    width: 20px;
    background: #999;
}

.scrollbar-handle:hover {
    background: #666;
}

.scrollbar-handle.move {
    background: #111;
}

.scrollbar-handle-up {
    width: 20px;
    height: 20px;
    background: #DDD;
}

.scrollbar-handle-up:hover {
    background: #666;
}

.scrollbar-handle-down {

}

.scrollbar-handle-down:hover {

}



/* ---------- simple theme --------------------------------------------------------------------- */

.simple .scrollbar-pane {
    margin-right: 40px;

}

.simple .scrollbar-handle-container {
    background: #EEE;
    width: 10px;
    margin-right: 6px;
}

.simple .scrollbar-handle-container.hover,
.simple .scrollbar-handle-container.move {
    background: #E6E6E6;
}

 



/* handle */
.simple .scrollbar-handle {
    width: 10px;
	background-color: #CCC;
}

.simple .scrollbar-handle:hover {

}

.simple .scrollbar-handle.move {
    background-color: #999;
}


/* arrow up */
.simple .scrollbar-handle-up {
    width: 22px;
    height: 23px;
    border-top: 1px dotted #C8C8C8;

    background-color: white;
	background-position: 7px 9px;
	margin-bottom: 1px;
	background-image: url('images/fl-top.png');
	background-repeat: no-repeat;
}

.simple .scrollbar-handle-up.hover,
.simple .scrollbar-handle-up:hover {

}

.simple .scrollbar-handle-up.move {
    background-color: #999;
}


/* arrow down */
.simple .scrollbar-handle-down {
     width: 22px;
    height: 23px;

    border-bottom: 1px dotted #C8C8C8;
	background-position: 7px 9px;
	margin-top: 1px;
	background-image: url('images/fl-down.png');
	background-repeat: no-repeat;
}

.simple .scrollbar-handle-down.hover,
.simple .scrollbar-handle-down:hover {

}

.simple .scrollbar-handle-down.move {

}



/* ---------- fff theme ----------------------------------------------------------------- */

ul.fff {
    padding: 0;
}

.fff .scrollbar-pane {
    margin-right: 12px;
}

.fff .scrollbar-handle-container {
    background: #EEE;
    width: 12px;
}

.fff .scrollbar-handle {
    width: 12px;
	background-color: #CCC;
}

.fff .scrollbar-handle:hover {
    background-color: #999;
}

.fff .scrollbar-handle.move {
    background-color: #666;
}

.fff .scrollbar-handle-up {
    width: 12px;
    height: 18px;
}

.fff .scrollbar-handle-down {
    width: 12px;
    height: 18px;
}