.jspContainer {
    overflow: hidden;
    position: relative;
}

.jspPane {
    position: absolute;
}

.jspVerticalBar {
    background: #f3f3f3;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 14px;
    border-left: 1px solid #000;
}

.jspHorizontalBar {
    background: #f3f3f3;
    bottom: 0;
    height: 14px;
    left: 0;
    position: absolute;
    width: 100%;
    border-top: 1px solid #000;
}

.jspCap {
    display: none;
}

.jspHorizontalBar .jspCap {
    float: left;
}

.jspAllInView .jspTrack {
    background: #eee;
    box-shadow: none;
}

.jspAllInView .jspDrag {
    display: none !important;
}

.jspAllInView .jspArrow {
    background-color: #eee;
    box-shadow: none;
}

.jspAllInView .jspArrowUp {
    background-image: url("../img/ui/widgets/scrollbar-arrow-up-disabled.png");
    border-top: 1px solid #525252;
}

.jspAllInView .jspArrowRight {
    background-image: url("../img/ui/widgets/scrollbar-arrow-right-disabled.png");
    border-left: 1px solid #8b8b8b;
    border-right: 1px solid #000;
}

.jspAllInView .jspArrowDown {
    background-image: url("../img/ui/widgets/scrollbar-arrow-down-disabled.png");
    border-top: 1px solid #8b8b8b;
}

.jspAllInView .jspArrowLeft {
    background-image: url("../img/ui/widgets/scrollbar-arrow-left-disabled.png");
    border-left: 1px solid #525252;
}

.jspTrack {
    background: #acacac;
    position: relative;
    box-shadow: inset 1px 1px #737373,
                inset 2px 2px #8b8b8b,
                inset -1px -1px #cdcdcd,
                inset -2px -2px #bdbdbd;
}

.jspTrack.disabled {
    height: 100% !important;
    width: 100% !important;
    background: #eee;
}

.jspDrag {
    background: #9c9cff;
    left: 0;
    position: relative;
    top: 0;
    box-shadow: inset 1px 1px #cdcdff,
                inset -1px -1px #6262cd;
}

.jspDrag:active {
    background-color: #6262cd;
    box-shadow: inset 1px 1px #9c9cff,
                inset -1px -1px #31319c;
}

.jspVerticalBar .jspDrag {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    background-image: url("../img/ui/widgets/scroll-vertical-handle.png");
    background-position: center;
    background-repeat: no-repeat;
}

.jspVerticalBar .jspDrag:active {
    background-image: url("../img/ui/widgets/scroll-vertical-handle-active.png");
}

.jspHorizontalBar .jspDrag {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    background-image: url("../img/ui/widgets/scroll-horizontal-handle.png");
    background-position: center;
    background-repeat: no-repeat;
}
.jspHorizontalBar .jspDrag:active {
    background-image: url("../img/ui/widgets/scroll-horizontal-handle-active.png");
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
    float: left;
    height: 100%;
}

.jspArrow {
    display: block;
    height: 14px;
    width: 14px;
    background-color: #dedede;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 1px 1px #fffaff,
    inset -1px -1px #bdbdbd;
}

.jspArrow.jspActive {
    background-color: #737373;
    box-shadow: inset -1px -1px #9c9c9c,
                inset 1px 1px #525252;
}

.jspArrowUp {
    background-image: url("../img/ui/widgets/scrollbar-arrow-up.png");
    border-top: 1px solid #000;
}

.jspArrowRight {
    background-image: url("../img/ui/widgets/scrollbar-arrow-right.png");
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

.jspArrowDown {
    background-image: url("../img/ui/widgets/scrollbar-arrow-down.png");
    border-top: 1px solid #000;
}

.jspArrowLeft {
    background-image: url("../img/ui/widgets/scrollbar-arrow-left.png");
    border-left: 1px solid #000;
}

.jspDisabled {
    /* When clicking arrow won't do anything */
}

.jspVerticalBar .jspArrow {
    height: 14px;
}

.jspHorizontalBar .jspArrow {
    float: left;
    height: 100%;
    width: 14px;
}

.jspVerticalBar .jspArrow:focus {
}

.jspCorner {
    position: absolute;
    width: 1px;
    height: 14px;
    right: 0;
    bottom: 0;
    border-left: 1px solid #000;
}