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

/*  #scrollmain {width:165px; height:240px; margin:0 0 15px 0;}  */

#scrollmain {width:230px; height:336px; margin:10px 0 15px 0;}


#new-version
{
/*
	border: 2px solid #f00;
	margin: 1em 0;
	padding: .5em 1em 0;
	background:#FF0000;
*/
}

#new-version h1
{
	margin-top: 0;
}

a.jScrollArrowUp {
	background: url(../images/basic_arrow_up.gif) repeat-x 0 0;
}
a.jScrollArrowUp:hover {
	background-position: 0 -15px;
}
a.jScrollArrowDown {
	background: url(../images/basic_arrow_down.gif) repeat-x 0 0;
}
a.jScrollArrowDown:hover {
	background-position: 0 -15px;
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	background-position: 0 -30px;
}


.orange-bar .jScrollPaneTrack {
	background: #f60; width: 15px; height: 168px; top: 16px;
}
.orange-bar .jScrollPaneDrag {
	background: #00f url(../images/drag_grab.gif) no-repeat 50% 50%; width: 15px; height: 20px; top: 0px;
}
.orange-bar .scroll-pane {
	background: #69f;
}
			
.holder {
	float: left;
	margin:0px;
	padding:0 0 0 7px;
	width:149px;
}

.scroll-pane {
	width: 230px;
	height: 334px;
	overflow: auto;
	float: left;
overflow: visible; position: absolute; top: 0px;	
}
.scroll-pane ul {list-style:none; margin:0px; padding:0px;}
.scroll-pane ul li {list-style:none; margin:0px; padding:3px 0 2px 0;}
.scroll-pane ul li a {font-family:arial; text-decoration:none; font-weight:normal; color:#646464; font-size:11px; display:block; line-height:16px; padding:0 2px 0 2px;}
.scroll-pane ul li a:hover {font-family:arial; text-decoration:none; font-weight:normal; color:#703d04; font-size:11px; display:block; background-color:#f7cc57; line-height:16px;}



.wide {
	width: 230px;
}

.super-wide {
	width: 230px;
}

.tall {

}

			#pane1, #pane2, #pane3, #pane4 {
				height: 233px;
			}
			
			.osX .jScrollPaneTrack {
				background: url(../images/osx_track.gif) repeat-y;
			}
			.osX .jScrollPaneDrag {
				background: url(../images/osx_drag_middle.gif) repeat-y; padding:6px 0px 6px 0;
			}
			.osX .jScrollPaneDragTop {
				background: url(../images/osx_drag_top.gif) no-repeat;
				height: 6px; width: 15px;
			}
			.osX .jScrollPaneDragBottom {
				background: url(../images/osx_drag_bottom.gif) no-repeat;
				height: 7px; width: 15px;
			}
			.osX a.jScrollArrowUp {
				height: 24px; width: 15px; top: 0px;
				background: url(../images/osx_arrow_up.png) no-repeat 0 -30px;
			}
			.osX a.jScrollArrowUp:hover {
				background-position: 0 0;
			}
			.osX a.jScrollArrowDown {
				height: 24px; width: 15px; bottom: 0px;
				background: url(../images/osx_arrow_down.png) no-repeat 0 -30px;
			}
			.osX a.jScrollArrowDown:hover {
				background-position: 0 0;
			}
			
			.left .jScrollPaneTrack {
				left: 0;
				right: auto;
			}
			.left a.jScrollArrowUp {
				left: 0;
				right: auto;
			}
			.left a.jScrollArrowDown {
				left: 0;
				right: auto;
			}
		
			
			/* IE SPECIFIC HACKED STYLES */
			* html .osX .jScrollPaneDragBottom {
				bottom: -1px;
			}
			/* /IE SPECIFIC HACKED STYLES */