/* HORIZONTAL */
.skin1 .horizontal-only .last-line .line-spacer{
	height: 31px;
}

.skin1 .jspHorizontalBar {
	height: 21px;
	background-color: transparent;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.skin1 .jspHorizontalBar .jspArrow {
	width: 26px;
	background-color: transparent;
	background-image: url(../images/01_arrow_h.png);
	background-repeat: no-repeat;
	background-position: 0 21px;
}
.skin1 .jspHorizontalBar .jspArrow.jspDisabled{
	cursor: default;
	background-color: transparent;
}

.skin1 .jspHorizontalBar .jspArrowLeft {
	background-position: 0 -21px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-radius: 10px 0px 0px 10px;
	border-radius: 10px 0px 0px 10px;
	
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.skin1 .jspHorizontalBar .jspArrowLeft.jspActive {
	-webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	/* background-position: 0 -42px; */
}

.skin1 .jspHorizontalBar .jspArrowRight {
	background-position: 0 -63px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 0px 10px 10px 0px;
	border-radius: 0px 10px 10px 0px;
	
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.skin1 .jspHorizontalBar .jspArrowRight.jspActive {
	-webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	/* background-position: 0 -84px; */
}

.skin1 .jspHorizontalBar .jspTrack {
	background: transparent url(../images/01_arrow_h.png) repeat-x scroll 0 0;
}

.skin1 .jspHorizontalBar .jspDrag {
	padding: 1px 0;
	height: 19px;
	background: transparent;
}

.skin1 .jspHorizontalBar .jspDrag .jspDragLeft {
	width: 100%;
	height: 17px;
	margin: 1px 0;
	background: transparent;
	-webkit-box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
	box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.skin1 .jspHorizontalBar .jspDrag .jspDragLeft:hover,
.skin1 .jspHorizontalBar .jspDrag.jspHover .jspDragLeft,
.skin1 .jspHorizontalBar .jspDrag.jspActive .jspDragLeft{
	-webkit-box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
}

.skin1.msie .jspHorizontalBar .jspDrag .jspDragLeft {
	width: 50%;
	height: 19px;
	margin: 0;
	position: absolute;
	left: 0;
	top: 1px;
	background: transparent url(../images/01_drag_h.png) no-repeat scroll 0 0;
}
.skin1.msie .jspHorizontalBar .jspDrag.jspHover .jspDragLeft,
.skin1.msie .jspHorizontalBar .jspDrag.jspActive .jspDragLeft {
	background: transparent url(../images/01_drag_h.png) no-repeat scroll 0 100%;
}
.skin1.msie .jspHorizontalBar .jspDrag .jspDragRight {
	width: 50%;
	height: 19px;
	position: absolute;
	left: 50%;
	top: 1px;
	background: transparent url(../images/01_drag_h.png) no-repeat scroll 100% 0;
}
.skin1.msie .jspHorizontalBar .jspDrag.jspHover .jspDragRight,
.skin1.msie .jspHorizontalBar .jspDrag.jspActive .jspDragRight {
	background: transparent url(../images/01_drag_h.png) no-repeat scroll 100% 100%;
}

.skin1 .jspHorizontalBar .jspCap{
	/*
	uncomment if you want make scrollbar smaller than content width.
	width: 20px;
	height: 100%;
	display: block;
	*/
}

/* VERTICAL */
.skin1 .vertical-only .last-line {
}

.skin1 .jspVerticalBar {
	width: 21px;
	background-color: transparent;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.skin1 .jspVerticalBar .jspArrow {
	height: 26px;
	background-color: transparent;
	background-image: url(../images/01_arrow_v.png);
	background-repeat: no-repeat;
	background-position: 0 21px;
}
.skin1 .jspVerticalBar .jspArrow.jspDisabled{
	cursor: default;
	background-color: transparent;
}

.skin1 .jspVerticalBar .jspArrowUp {
	background-position: -21px 0;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 10px 10px 0px 0px;
	border-radius: 10px 10px 0px 0px;
	
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.skin1 .jspVerticalBar .jspArrowUp.jspActive {
	-webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	/* background-position: -42px 0; */
}

.skin1 .jspVerticalBar .jspArrowDown {
	background-position: -63px 0;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-radius: 0px 0px 10px 10px;
	border-radius: 0px 0px 10px 10px;
	
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.skin1 .jspVerticalBar .jspArrowDown.jspActive {
	-webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	/* background-position: 0 -84px; */
}

.skin1 .jspVerticalBar .jspTrack {
	background: transparent url(../images/01_arrow_v.png) repeat-y scroll 0 0;
}

.skin1 .jspVerticalBar .jspDrag {
	padding: 0 1px;
	width: 19px;
	background: transparent;
}

.skin1 .jspVerticalBar .jspDrag .jspDragTop {
	height: 100%;
	width: 17px;
	margin: 0 1px;
	background: transparent;
	-webkit-box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
	box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.skin1 .jspVerticalBar .jspDrag .jspDragTop:hover,
.skin1 .jspVerticalBar .jspDrag.jspHover .jspDragTop,
.skin1 .jspVerticalBar .jspDrag.jspActive .jspDragTop{
	-webkit-box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
}

.skin1.msie .jspVerticalBar .jspDrag .jspDragTop {
	height: 50%;
	width: 19px;
	margin: 0;
	position: absolute;
	left: 1px;
	top: 0;
	background: transparent url(../images/01_drag_v.png) no-repeat scroll 0 0;
}
.skin1.msie .jspVerticalBar .jspDrag.jspHover .jspDragTop,
.skin1.msie .jspVerticalBar .jspDrag.jspActive .jspDragTop {
	background: transparent url(../images/01_drag_v.png) no-repeat scroll 100% 0;
}
.skin1.msie .jspVerticalBar .jspDrag .jspDragBottom {
	height: 50%;
	width: 19px;
	position: absolute;
	top: 50%;
	left: 1px;
	background: transparent url(../images/01_drag_v.png) no-repeat scroll 0 100%;
}
.skin1.msie .jspVerticalBar .jspDrag.jspHover .jspDragBottom,
.skin1.msie .jspVerticalBar .jspDrag.jspActive .jspDragBottom {
	background: transparent url(../images/01_drag_v.png) no-repeat scroll 100% 100%;
}

.skin1 .jspVerticalBar .jspCap{
	/*
	uncomment if you want make scrollbar smaller than content width.
	height: 20px;
	height: 100%;
	display: block;
	*/
}

/* HORIZONTAL */
.skin2 .horizontal-only .last-line .line-spacer{
	height: 31px;
}

.skin2 .jspHorizontalBar {
	height: 21px;
	background-color: transparent;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.skin2 .jspHorizontalBar .jspArrow {
	width: 26px;
	background-color: transparent;
	background-image: url(../images/02_arrow_h.png);
	background-repeat: no-repeat;
	background-position: 0 21px;
}
.skin2 .jspHorizontalBar .jspArrow.jspDisabled{
	cursor: default;
	background-color: transparent;
}

.skin2 .jspHorizontalBar .jspArrowLeft {
	background-position: 0 -21px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-radius: 10px 0px 0px 10px;
	border-radius: 10px 0px 0px 10px;
	
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.skin2 .jspHorizontalBar .jspArrowLeft.jspActive {
	-webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	/* background-position: 0 -42px; */
}

.skin2 .jspHorizontalBar .jspArrowRight {
	background-position: 0 -63px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 0px 10px 10px 0px;
	border-radius: 0px 10px 10px 0px;
	
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.skin2 .jspHorizontalBar .jspArrowRight.jspActive {
	-webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	/* background-position: 0 -84px; */
}

.skin2 .jspHorizontalBar .jspTrack {
	background: transparent url(../images/02_arrow_h.png) repeat-x scroll 0 0;
}

.skin2 .jspHorizontalBar .jspDrag {
	padding: 1px 0;
	height: 19px;
	background: transparent;
}

.skin2 .jspHorizontalBar .jspDrag .jspDragLeft {
	width: 100%;
	height: 17px;
	margin: 1px 0;
	background-color: #666666;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.skin2 .jspHorizontalBar .jspDrag .jspDragLeft:hover,
.skin2 .jspHorizontalBar .jspDrag.jspHover .jspDragLeft,
.skin2 .jspHorizontalBar .jspDrag.jspActive .jspDragLeft{
	-webkit-box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 1);
	-moz-box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 1);
	box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 1);
}

.skin2.msie .jspHorizontalBar .jspDrag .jspDragLeft {
	width: 50%;
	height: 19px;
	margin: 0;
	position: absolute;
	left: 0;
	top: 1px;
	background: transparent url(../images/02_drag_h.png) no-repeat scroll 0 0;
}
.skin2.msie .jspHorizontalBar .jspDrag.jspHover .jspDragLeft,
.skin2.msie .jspHorizontalBar .jspDrag.jspActive .jspDragLeft {
	background: transparent url(../images/02_drag_h.png) no-repeat scroll 0 100%;
}
.skin2.msie .jspHorizontalBar .jspDrag .jspDragRight {
	width: 50%;
	height: 19px;
	position: absolute;
	left: 50%;
	top: 1px;
	background: transparent url(../images/02_drag_h.png) no-repeat scroll 100% 0;
}
.skin2.msie .jspHorizontalBar .jspDrag.jspHover .jspDragRight,
.skin2.msie .jspHorizontalBar .jspDrag.jspActive .jspDragRight {
	background: transparent url(../images/02_drag_h.png) no-repeat scroll 100% 100%;
}

.skin2 .jspHorizontalBar .jspCap{
	/*
	uncomment if you want make scrollbar smaller than content width.
	width: 20px;
	height: 100%;
	display: block;
	*/
}

/* VERTICAL */
.skin2 .vertical-only .last-line {
}

.skin2 .jspVerticalBar {
	width: 21px;
	background-color: transparent;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.skin2 .jspVerticalBar .jspArrow {
	height: 26px;
	background-color: transparent;
	background-image: url(../images/02_arrow_v.png);
	background-repeat: no-repeat;
	background-position: 0 21px;
}
.skin2 .jspVerticalBar .jspArrow.jspDisabled{
	cursor: default;
	background-color: transparent;
}

.skin2 .jspVerticalBar .jspArrowUp {
	background-position: -21px 0;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 10px 10px 0px 0px;
	border-radius: 10px 10px 0px 0px;
	
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.skin2 .jspVerticalBar .jspArrowUp.jspActive {
	-webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	/* background-position: -42px 0; */
}

.skin2 .jspVerticalBar .jspArrowDown {
	background-position: -63px 0;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-radius: 0px 0px 10px 10px;
	border-radius: 0px 0px 10px 10px;
	
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.skin2 .jspVerticalBar .jspArrowDown.jspActive {
	-webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	/* background-position: 0 -84px; */
}

.skin2 .jspVerticalBar .jspTrack {
	background: transparent url(../images/02_arrow_v.png) repeat-y scroll 0 0;
}

.skin2 .jspVerticalBar .jspDrag {
	padding: 0 1px;
	width: 19px;
	background: transparent;
}

.skin2 .jspVerticalBar .jspDrag .jspDragTop {
	height: 100%;
	width: 17px;
	margin: 0 1px;
	background-color: #666666;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.skin2 .jspVerticalBar .jspDrag .jspDragTop:hover,
.skin2 .jspVerticalBar .jspDrag.jspHover .jspDragTop,
.skin2 .jspVerticalBar .jspDrag.jspActive .jspDragTop{
	-webkit-box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
}

.skin2.msie .jspVerticalBar .jspDrag .jspDragTop {
	height: 50%;
	width: 19px;
	margin: 0;
	position: absolute;
	left: 1px;
	top: 0;
	background: transparent url(../images/02_drag_v.png) no-repeat scroll 0 0;
}
.skin2.msie .jspVerticalBar .jspDrag.jspHover .jspDragTop,
.skin2.msie .jspVerticalBar .jspDrag.jspActive .jspDragTop {
	background: transparent url(../images/02_drag_v.png) no-repeat scroll 100% 0;
}
.skin2.msie .jspVerticalBar .jspDrag .jspDragBottom {
	height: 50%;
	width: 19px;
	position: absolute;
	top: 50%;
	left: 1px;
	background: transparent url(../images/02_drag_v.png) no-repeat scroll 0 100%;
}
.skin2.msie .jspVerticalBar .jspDrag.jspHover .jspDragBottom,
.skin2.msie .jspVerticalBar .jspDrag.jspActive .jspDragBottom {
	background: transparent url(../images/02_drag_v.png) no-repeat scroll 100% 100%;
}

.skin2 .jspVerticalBar .jspCap{
	/*
	uncomment if you want make scrollbar smaller than content width.
	height: 20px;
	height: 100%;
	display: block;
	*/
}

/* HORIZONTAL */
.skin3 .horizontal-only .last-line .line-spacer{
	height: 29px;
}

.skin3 .jspHorizontalBar {
	height: 19px;
	background-color: transparent;
}

.skin3 .jspHorizontalBar .jspArrow {
	width: 19px;
	background-color: transparent;
	background-image: url(../images/03_arrow_h.png);
	background-repeat: no-repeat;
	background-position: 0 19px;
}
.skin3 .jspHorizontalBar .jspArrow.jspDisabled{
	cursor: default;
	background-color: transparent;
}

.skin3 .jspHorizontalBar .jspArrowLeft {
	background-position: 0 -20px;
}
.skin3 .jspHorizontalBar .jspArrowLeft.jspActive {
	background-position: 0 -40px;
}

.skin3 .jspHorizontalBar .jspArrowRight {
	background-position: 0 -60px;
}

.skin3 .jspHorizontalBar .jspArrowRight.jspActive {
	background-position: 0 -80px;
}

.skin3 .jspHorizontalBar .jspTrack {
	background: transparent url(../images/03_arrow_h.png) repeat-x scroll 0 0;
}

.skin3 .jspHorizontalBar .jspDrag {
	height: 19px;
	background: transparent url(../images/03_drag_h.png) repeat-x scroll 0 -20px;
}
.skin3 .jspHorizontalBar .jspDrag:hover,
.skin3 .jspHorizontalBar .jspDrag.jspHover,
.skin3 .jspHorizontalBar .jspDrag.jspActive {
	background-position: 50% -60px;
}

.skin3 .jspHorizontalBar .jspDrag .jspDragLeft {
	width: 100%;
	height: 19px;
	background: transparent url(../images/03_drag_h.png) no-repeat 50% 0;
}

.skin3 .jspHorizontalBar .jspDrag:hover .jspDragLeft,
.skin3 .jspHorizontalBar .jspDrag.jspHover .jspDragLeft,
.skin3 .jspHorizontalBar .jspDrag.jspActive .jspDragLeft{
	background-position: 50% -40px;
}

.skin3 .jspHorizontalBar .jspCap{
	/*
	uncomment if you want make scrollbar smaller than content width.
	width: 20px;
	height: 100%;
	display: block;
	*/
}

/* VERTICAL */
.skin3 .vertical-only .last-line {
}

.skin3 .jspVerticalBar {
	width: 19px;
	background-color: transparent;
}

.skin3 .jspVerticalBar .jspArrow {
	height: 19px;
	background-color: transparent;
	background-image: url(../images/03_arrow_v.png);
	background-repeat: no-repeat;
	background-position: 0 19px;
}
.skin3 .jspVerticalBar .jspArrow.jspDisabled{
	cursor: default;
	background-color: transparent;
}

.skin3 .jspVerticalBar .jspArrowUp {
	background-position: -20px 0;
}
.skin3 .jspVerticalBar .jspArrowUp.jspActive {
	background-position: -40px 0;
}

.skin3 .jspVerticalBar .jspArrowDown {
	background-position: -60px 0;
}

.skin3 .jspVerticalBar .jspArrowDown.jspActive {
	background-position: -80px 0;
}

.skin3 .jspVerticalBar .jspTrack {
	background: transparent url(../images/03_arrow_v.png) repeat-y scroll 0 0;
}

.skin3 .jspVerticalBar .jspDrag {
	width: 19px;
	background: transparent url(../images/03_drag_v.png) repeat-y scroll -20px 0;
}

.skin3 .jspVerticalBar .jspDrag:hover,
.skin3 .jspVerticalBar .jspDrag.jspHover,
.skin3 .jspVerticalBar .jspDrag.jspActive {
	background-position: -60px 50%;
}


.skin3 .jspVerticalBar .jspDrag .jspDragTop {
	height: 100%;
	width: 19px;
	background: transparent url(../images/03_drag_v.png) no-repeat 0 50%;
}

.skin3 .jspVerticalBar .jspDrag:hover .jspDragTop,
.skin3 .jspVerticalBar .jspDrag.jspHover .jspDragTop,
.skin3 .jspVerticalBar .jspDrag.jspActive .jspDragTop{
	background-position: -40px 50%;
}

.skin3 .jspVerticalBar .jspCap{
	/*
	uncomment if you want make scrollbar smaller than content width.
	height: 20px;
	height: 100%;
	display: block;
	*/
}

/* SKIN 04 START */
/* HORIZONTAL */
.skin4 .horizontal-only .last-line .line-spacer{
	height: 40px;
}

.skin4 .jspHorizontalBar {
	height: 30px;
	background-color: #dddddd;
}

.skin4 .jspHorizontalBar .jspArrow {
	width: 30px;
	background-color: transparent;
	background-image: url(../images/04_arrow_h.png);
	background-repeat: no-repeat;
	background-position: 0 30px;
}
.skin4 .jspHorizontalBar .jspArrow.jspDisabled{
	cursor: default;
	background-color: transparent;
}

.skin4 .jspHorizontalBar .jspArrowLeft {
	background-position: 0 -30px;
}
.skin4 .jspHorizontalBar .jspArrowLeft.jspActive {
	background-position: 0 -60px;
}

.skin4 .jspHorizontalBar .jspArrowRight {
	background-position: 0 -90px;
}

.skin4 .jspHorizontalBar .jspArrowRight.jspActive {
	background-position: 0 -120px;
}

.skin4 .jspHorizontalBar .jspTrack {
	background: transparent url(../images/04_arrow_h.png) repeat-x scroll 0 0;
}

.skin4 .jspHorizontalBar .jspDrag {
	height: 16px;
	padding: 7px 0;
	background: transparent;
}
.skin4 .jspHorizontalBar .jspDrag:hover,
.skin4 .jspHorizontalBar .jspDrag.jspHover,
.skin4 .jspHorizontalBar .jspDrag.jspActive {
	/*background-position: 50% -60px;*/
}

.skin4 .jspHorizontalBar .jspDrag .jspDragLeft {
	width: 50%;
	height: 16px;
	position: absolute;
	top: 7px;
	left: 0;
	background: transparent url(../images/04_drag_h.png) no-repeat 0 0;
}

.skin4 .jspHorizontalBar .jspDrag:hover .jspDragLeft,
.skin4 .jspHorizontalBar .jspDrag.jspHover .jspDragLeft,
.skin4 .jspHorizontalBar .jspDrag.jspActive .jspDragLeft{
	background-position: 0 -20px;
}

.skin4 .jspHorizontalBar .jspDrag .jspDragRight {
	width: 50%;
	height: 16px;
	position: absolute;
	top: 7px;
	left: 50%;
	background: transparent url(../images/04_drag_h.png) no-repeat 100% 0;
}

.skin4 .jspHorizontalBar .jspDrag:hover .jspDragRight,
.skin4 .jspHorizontalBar .jspDrag.jspHover .jspDragRight,
.skin4 .jspHorizontalBar .jspDrag.jspActive .jspDragRight{
	background-position: 100% -20px;
}

.skin4 .jspHorizontalBar .jspCap{
	/*
	uncomment if you want make scrollbar smaller than content width.
	width: 20px;
	height: 100%;
	display: block;
	*/
}

/* VERTICAL */
.skin4 .vertical-only .last-line {
}

.skin4 .jspVerticalBar {
	width: 30px;
	background-color: #dddddd;
}

.skin4 .jspVerticalBar .jspArrow {
	height: 30px;
	background-color: transparent;
	background-image: url(../images/04_arrow_v.png);
	background-repeat: no-repeat;
	background-position: 0 30px;
}
.skin4 .jspVerticalBar .jspArrow.jspDisabled{
	cursor: default;
	background-color: transparent;
}

.skin4 .jspVerticalBar .jspArrowUp {
	background-position: -30px 0;
}
.skin4 .jspVerticalBar .jspArrowUp.jspActive {
	background-position: -60px 0;
}

.skin4 .jspVerticalBar .jspArrowDown {
	background-position: -90px 0;
}

.skin4 .jspVerticalBar .jspArrowDown.jspActive {
	background-position: -120px 0;
}

.skin4 .jspVerticalBar .jspTrack {
	background: transparent url(../images/04_arrow_v.png) repeat-y scroll 0 0;
}

.skin4 .jspVerticalBar .jspDrag {
	width: 16px;
	padding: 0 7px;
	background: transparent;
}

.skin4 .jspVerticalBar .jspDrag .jspDragTop {
	width: 16px;
	height: 50%;
	position: absolute;
	top: 0;
	left: 7px;
	background: transparent url(../images/04_drag_v.png) no-repeat 0 0;
}

.skin4 .jspVerticalBar .jspDrag:hover .jspDragTop,
.skin4 .jspVerticalBar .jspDrag.jspHover .jspDragTop,
.skin4 .jspVerticalBar .jspDrag.jspActive .jspDragTop{
	background-position: -20px 0;
}

.skin4 .jspVerticalBar .jspDrag .jspDragBottom {
	width: 16px;
	height: 50%;
	position: absolute;
	top: 50%;
	left: 7px;
	background: transparent url(../images/04_drag_v.png) no-repeat 0 100%;
}

.skin4 .jspVerticalBar .jspDrag:hover .jspDragBottom,
.skin4 .jspVerticalBar .jspDrag.jspHover .jspDragBottom,
.skin4 .jspVerticalBar .jspDrag.jspActive .jspDragBottom{
	background-position: -20px 100%;
}

.skin4 .jspVerticalBar .jspCap{
	/*
	uncomment if you want make scrollbar smaller than content width.
	height: 20px;
	height: 100%;
	display: block;
	*/
}

/* SKIN 05 START */
/* HORIZONTAL */
.skin5 .horizontal-only .last-line .line-spacer{
	height: 40px;
}

.skin5 .jspHorizontalBar {
	height: 30px;
	background-color: #dddddd;
}

.skin5 .jspHorizontalBar .jspArrow {
	width: 30px;
	background-color: transparent;
	background-image: url(../images/05_arrow_h.png);
	background-repeat: no-repeat;
	background-position: 0 30px;
}
.skin5 .jspHorizontalBar .jspArrow.jspDisabled{
	cursor: default;
	background-color: transparent;
}

.skin5 .jspHorizontalBar .jspArrowLeft {
	background-position: 0 -30px;
}
.skin5 .jspHorizontalBar .jspArrowLeft.jspActive {
	background-position: 0 -60px;
}

.skin5 .jspHorizontalBar .jspArrowRight {
	background-position: 0 -90px;
}

.skin5 .jspHorizontalBar .jspArrowRight.jspActive {
	background-position: 0 -120px;
}

.skin5 .jspHorizontalBar .jspTrack {
	background: transparent url(../images/05_arrow_h.png) repeat-x scroll 0 0;
}

.skin5 .jspHorizontalBar .jspDrag {
	height: 20px;
	padding: 5px 0;
	background: transparent;
}
.skin5 .jspHorizontalBar .jspDrag:hover,
.skin5 .jspHorizontalBar .jspDrag.jspHover,
.skin5 .jspHorizontalBar .jspDrag.jspActive {
	/*background-position: 50% -60px;*/
}

.skin5 .jspHorizontalBar .jspDrag .jspDragLeft {
	width: 50%;
	height: 20px;
	position: absolute;
	top: 5px;
	left: 0;
	background: transparent url(../images/05_drag_h.png) no-repeat 0 0;
}

.skin5 .jspHorizontalBar .jspDrag:hover .jspDragLeft,
.skin5 .jspHorizontalBar .jspDrag.jspHover .jspDragLeft,
.skin5 .jspHorizontalBar .jspDrag.jspActive .jspDragLeft{
	background-position: 0 -25px;
}

.skin5 .jspHorizontalBar .jspDrag .jspDragRight {
	width: 50%;
	height: 20px;
	position: absolute;
	top: 5px;
	left: 50%;
	background: transparent url(../images/05_drag_h.png) no-repeat 100% 0;
}

.skin5 .jspHorizontalBar .jspDrag:hover .jspDragRight,
.skin5 .jspHorizontalBar .jspDrag.jspHover .jspDragRight,
.skin5 .jspHorizontalBar .jspDrag.jspActive .jspDragRight{
	background-position: 100% -25px;
}

.skin5 .jspHorizontalBar .jspCap{
	/*
	uncomment if you want make scrollbar smaller than content width.
	width: 20px;
	height: 100%;
	display: block;
	*/
}

/* VERTICAL */
.skin5 .vertical-only .last-line {
}

.skin5 .jspVerticalBar {
	width: 30px;
	background-color: #dddddd;
}

.skin5 .jspVerticalBar .jspArrow {
	height: 30px;
	background-color: transparent;
	background-image: url(../images/05_arrow_v.png);
	background-repeat: no-repeat;
	background-position: 0 30px;
}
.skin5 .jspVerticalBar .jspArrow.jspDisabled{
	cursor: default;
	background-color: transparent;
}

.skin5 .jspVerticalBar .jspArrowUp {
	background-position: -30px 0;
}
.skin5 .jspVerticalBar .jspArrowUp.jspActive {
	background-position: -60px 0;
}

.skin5 .jspVerticalBar .jspArrowDown {
	background-position: -90px 0;
}

.skin5 .jspVerticalBar .jspArrowDown.jspActive {
	background-position: -120px 0;
}

.skin5 .jspVerticalBar .jspTrack {
	background: transparent url(../images/05_arrow_v.png) repeat-y scroll 0 0;
}

.skin5 .jspVerticalBar .jspDrag {
	width: 20px;
	padding: 0 5px;
	background: transparent;
}

.skin5 .jspVerticalBar .jspDrag .jspDragTop {
	width: 20px;
	height: 50%;
	position: absolute;
	top: 0;
	left: 5px;
	background: transparent url(../images/05_drag_v.png) no-repeat 0 0;
}

.skin5 .jspVerticalBar .jspDrag:hover .jspDragTop,
.skin5 .jspVerticalBar .jspDrag.jspHover .jspDragTop,
.skin5 .jspVerticalBar .jspDrag.jspActive .jspDragTop{
	background-position: -25px 0;
}

.skin5 .jspVerticalBar .jspDrag .jspDragBottom {
	width: 20px;
	height: 50%;
	position: absolute;
	top: 50%;
	left: 5px;
	background: transparent url(../images/05_drag_v.png) no-repeat 0 100%;
}

.skin5 .jspVerticalBar .jspDrag:hover .jspDragBottom,
.skin5 .jspVerticalBar .jspDrag.jspHover .jspDragBottom,
.skin5 .jspVerticalBar .jspDrag.jspActive .jspDragBottom{
	background-position: -25px 100%;
}

.skin5 .jspVerticalBar .jspCap{
	/*
	uncomment if you want make scrollbar smaller than content width.
	height: 20px;
	height: 100%;
	display: block;
	*/
}