/* Stylesheet for my demo pages for jScrollPane - these styles aren't necessary for using jScrollPane and aren't specific to any particular example */

.blue-bar a.jScrollArrowUp {	background: url(../img/blue_arrow_up.gif) repeat-x 0 0;}
.blue-bar a.jScrollArrowUp:hover {	background-position: 0 -16px;}
.blue-bar a.jScrollArrowDown {	background: url(../img/blue_arrow_down.gif) repeat-x 0 0;}
.blue-bar a.jScrollArrowDown:hover {	background-position: 0 -16px;}
.blue-bar a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {	background-position: 0 -30px;}
 
.orange-bar a.jScrollArrowUp {	background: url(../img/orange_arrow_up.gif) repeat-x 0 0;}
.orange-bar a.jScrollArrowUp:hover {	background-position: 0 -15px;}
.orange-bar a.jScrollArrowDown {	background: url(../img/orange_arrow_down.gif) repeat-x 0 0;}
.orange-bar a.jScrollArrowDown:hover {	background-position: 0 -15px;}
.orange-bar a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {	background-position: 0 -30px;}



.green-bar a.jScrollArrowUp {	background: url(../img/green_arrow_up.gif) repeat-x 0 0;}
.green-bar a.jScrollArrowUp:hover {	background-position: 0 -15px; }
.green-bar a.jScrollArrowDown {	background: url(../img/green_arrow_down.gif) repeat-x 0 0;}
.green-bar a.jScrollArrowDown:hover {	background-position: 0 -15px;}
.green-bar a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {	background-position: 0 -30px;}


.blue-bar .jScrollPaneTrack {	background: #FFF8D3; background: url(../img/bg_blue.gif) repeat-y center; }
.blue-bar .jScrollPaneDrag {	background: #3391CE;background: url(../img/blue_drag.gif) repeat-y center; }
.blue-bar .scroll-pane {	background: #F3A14B;}

.orange-bar .jScrollPaneTrack {	background: #ECE8D4;background: url(../img/bg_orange.gif) repeat-y center;}
.orange-bar .jScrollPaneDrag {	background: #F3A14B;background: url(../img/orange_drag.gif) repeat-y center; }
.orange-bar .scroll-pane {	background: #F3A14B;}


.green-bar .jScrollPaneTrack {	background: #E8EAE4;background: url(../img/bg_green.gif) repeat-y center;}
.green-bar .jScrollPaneDrag {	background: #A3D165;background: url(../img/green_drag.gif) repeat-y center; }
.green-bar .scroll-pane {	background: #A3D165;}
			
.holderSx {	float: left;width: 310px;  border:0px solid red;   background: url(../img/bg_box_green.gif) no-repeat bottom; padding: 5px 10px 5px 0;}
.holderDx {	float: left; width: 310px;   border:0px solid red;   background: url(../img/bg_box_orange.gif) no-repeat bottom; padding: 5px 10px 5px 0;}

.holderSpace {	float: left;width: 10px; height:300px; border:0px solid red;}
.holderDx  .intro, .holderSx  .intro {padding:7px 0; height:90px;}

 

.scroll-pane {
	width: 310px;
	height: 210px;
	overflow: auto;
 
	float: left;
}

.wide {
	width: 650px;
	height: 260px;
}

.super-wide {
	width: 700px;
}

.tall {
	height: 400px;
}


#pane0 {	
 
	background: #FFFFFF; 
}

#pane1 {	
background: #F2F5EA;
	 
}


#pane2 {
background: #FFFAE4;
 
	
}
#pane3 {
	height: 190px;
}
#pane4 {
	height: 190px;
}