.jspContainer { overflow: hidden; position: relative; }
.jspPane { position: absolute; }
.jspVerticalBar { position: absolute; top: 0; right: 0; width: 16px; height: 100%; }
.jspHorizontalBar { position: absolute; bottom: 0; left: 0; width: 100%; height: 16px; }
.jspVerticalBar *, .jspHorizontalBar * { margin: 0; padding: 0; }
.jspCap { display: none; }
.jspHorizontalBar .jspCap { float: left; }
.jspTrack { position: relative; }
.jspDrag { position: relative; top: 0; left: 0; cursor: pointer; }
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float: left; height: 100%; }
.jspArrow { text-indent: -20000px; display: block; cursor: pointer; }
.jspArrow.jspDisabled { cursor: default; }
.jspHorizontalBar .jspArrow { width: 16px; float: left; height: 100%; }
.jspVerticalBar .jspArrow:focus { outline: none; }
.jspCorner { float: left; height: 100%; }
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner { margin: 0 -3px 0 0; }


.jspTrack {
    background: url(images/osx_track.gif) repeat-y !important;
}

.jspDrag {
    background: url(images/osx_drag_middle.gif) repeat-y !important;
}

.jspDragTop {
	position: absolute;
	top: -6px;
	height: 6px;
	width: 100%;
    background: url(images/osx_drag_top.gif) no-repeat !important;
}

.jspDragBottom {
	position: absolute;
	bottom: -7px;
	height: 7px;
	width: 100%;
    background: url(images/osx_drag_bottom.gif) no-repeat !important;
}

.jspArrowUp {
    height: 23px;
	overflow: visible;
    background: url(images/osx_arrow_up.png) no-repeat 0 -30px;
}

.jspArrowUp.jspDisabled {
    background: url(images/osx_arrow_up.png) no-repeat 0 -30px;
}

.jspVerticalBar{
	background: url(images/osx_track.gif) repeat-y !important;
}

.jspArrowUp:hover {
    background-position: 0 0;
}

.jspArrowDown {
    height: 23px;
    background: url(images/osx_arrow_down.png) no-repeat 0 -30px;
}

.jspArrowDown.jspDisabled {
    background: url(images/osx_arrow_down.png) no-repeat 0 -30px;
}

.jspArrowDown:hover {
    background-position: 0 0;
}