div#wn1, div#wn2, div#wn3, div#wn4 {position:relative;width:100%; overflow:hidden;}
div#wn1, div#wn2, div#wn3{height:100%;}
div#wn4 {height:92%;}

div#scrollbar1, div#scrollbar2, div#scrollbar3, div#scrollbar4 {position:relative; margin:20px 0 0;width:100%; height:100%;}

div#scrollbar1 .up, div#scrollbar2 .up, div#scrollbar3 .up, div#scrollbar4 .up { position:relative; left:0; top:0; background:url(../images/scroll-arrow-up.gif);background-repeat: no-repeat; float:left;width:23px; height:20px; display:inline-block;}  
div#scrollbar1 .down, div#scrollbar2 .down, div#scrollbar3 .down, div#scrollbar4 .down {position:relative; left:10px; bottom:0; background:url(../images/scroll-arrow-down.gif);background-repeat: no-repeat;width:23px; height:20px;  display:inline-block; float:left;}

/* for clutzy draggers */
div#scrollbar1, div#scrollbar2, div#scrollbar3, div#scrollbar4 {
-moz-user-select: none;
-khtml-user-select: none;
}
/* safari, chrome, opera have very prominent outline by default 
opera shows outline movement with scrolling and won't allow none
set to suit your page design
*/
div#wn1:focus, div#scrollbar1:focus, div#scrollbar1 .track:focus, div#scrollbar1 .dragBar:focus,
div#wn2:focus, div#scrollbar2:focus, div#scrollbar2 .track:focus, div#scrollbar2 .dragBar:focus 
div#wn3:focus, div#scrollbar3:focus, div#scrollbar3 .track:focus, div#scrollbar3 .dragBar:focus
div#wn4:focus, div#scrollbar4:focus, div#scrollbar4 .track:focus, div#scrollbar4 .dragBar:focus  {outline:1px dotted #eee;}


@media only screen and (min-width: 320px) and (max-width: 767px){
div#wn1, div#wn2, div#wn3, div#wn4{overflow:visible}
div#scrollbar1, div#scrollbar2, div#scrollbar3, div#scrollbar4, div#scrollbar1 .up, div#scrollbar2 .up, div#scrollbar3 .up, div#scrollbar4 .up, div#scrollbar1 .down, div#scrollbar2 .down, div#scrollbar3 .down, div#scrollbar4 .down {display:none}
#lyr1, #wn1{position:static!Important;}
}