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

img{border:0px solid #000;}
a.jScrollArrowUp {background: url(../images/basic_arrow_up.gif) no-repeat 0 0;}
a.jScrollArrowUp:hover {background-position: 0 -15px;}
a.jScrollArrowDown {background: url(../images/basic_arrow_down.gif) no-repeat 0 0;}
a.jScrollArrowDown:hover {background-position: 0 -15px;}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {background-position: 0 -30px;}
.orange-bar .jScrollPaneTrack {background:#f60;}
.orange-bar .jScrollPaneDrag {background: #00f url(../images/drag_grab.gif) no-repeat 50% 50%;}
.orange-bar .scroll-pane {background:#099;}
.holder {float: left; margin: 10px;}
.scroll-pane{width:470px; height:250px; overflow:auto; float:right; display:block;}
.wide {width: 470px;}
.super-wide {width: 470px; padding:0px 0 0px 0px;}

#pane1 {height:250px;}




#inTheMedia img{border:0px solid #000;}
#inTheMedia a.jScrollArrowUp {background: url(../images/basic_arrow_up.gif) no-repeat 0 0;}
#inTheMedia a.jScrollArrowUp:hover {background-position: 0 -15px;}
#inTheMedia a.jScrollArrowDown {background: url(../images/basic_arrow_down.gif) no-repeat 0 0;}
#inTheMedia a.jScrollArrowDown:hover {background-position: 0 -15px;}
#inTheMedia a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {background-position: 0 -30px;}
#inTheMedia .orange-bar .jScrollPaneTrack {background:#f60;}
#inTheMedia .orange-bar .jScrollPaneDrag {background: #00f url(../images/drag_grab.gif) no-repeat 50% 50%;}
#inTheMedia .orange-bar .scroll-pane {background:#099;}
#inTheMedia .holder {float: left; margin: 10px;}
#inTheMedia .scroll-pane{width:835px; height:293px; overflow:auto; float:right; display:block;}
#inTheMedia .wide {width: 835px;}
#inTheMedia .super-wide {width: 835px; padding:0px 0 0px 0px;}

#inTheMedia #pane1 {height:293px;}