div#wn1, div#wn2 { 
	position:relative; 
	width:230px; height:100px; 
	overflow:hidden;	
	}
div#wn3,	div#wn4{ 
	position:relative; 
	width:200px; height:190px;
	overflow:hidden;	
	}
    
/* needed when dw_scrollObj.printEnabled = true */
div#lyr1, div#lyr2, div#lyr3, div#lyr4 {
    position:absolute;
    margin:0px 10px;
    *padding-bottom:0px;
    }
    
/* Set small font-size or size/position of div's will be off in some browsers  */
div#scrollbar, div#scrollbar4 { 
    position:relative;
    width:19px; height:200px; 
    /* font-size:1px;  img display block is the solution, but people remove it then ask for help! */
    font-size:1px;
    }
div#track, div#track4 { 
    position:absolute; left:-1px; top:21px;
    width:11px; height:158px;
    background: #F1F3F2;
    }
div#dragBar, div#dragBar4 {
    position:absolute; left:0px; top:1px;
    width:19px; height:20px;
    background-color:#C4C5C9;
    }  
div#up { position:absolute; left:0; top:0; }  
div#down { position:absolute; left:0; bottom:0; }

div.scroll_controls, div#extra_controls, div#scrollbar, div#scrollbar4 { 
    display:block; /* display:none initially , to hide from incapable */
    } 

div#scrollbar img, div#scrollbar4 img {
    display:block; /* so no gap or misplacement due to image vertical alignment */
    } 
    
/* for safari, to prevent selection problem for clutzy draggers */
div#scrollbar, div#track, div#dragBar, div#up, div#down, div#scrollbar4, div#track4, div#dragBar4 {
    -moz-user-select: none;
    -khtml-user-select: none;
}


/* ================================================================================================

    !!!!!!!! YOUR ATTENTION PLEASE !!!!!!!!

    Styles below particular to demo layout, not necessarily related to scrolling div code  

================================================================================================= */

div.holder1, div.holder2 {
    float:left;
    width:260px;
    height:116px;
    margin:2em 2em 2em 0;
    border:1px dotted #999;
    }
    
div#wn1, div#wn2, div#wn3, div#wn4 { 
    margin:6px;
    }

div.scroll_controls {
    float:right;
    position:relative;
    margin-top:10px;
    width:19px; height:100px;   
    }
    
/* position arrows */
div.scroll_controls .up {
    position:absolute;
    left:0; top:0px;
    }
div.scroll_controls .dn {
    position:absolute;
    left:0; bottom:0;
    }
    
img { border:none; } /* image maps */
    
div.holder3 {
    clear:left;
    float:left;
    width:230px;
    height:208px;
    margin:0 0 0 0;
    border:0;
    }
div.holder4 {
    clear:left;
    float:left;
    width:230px;
    height:208px;
    margin:0 0 0 0;
    border:0;
    }
div#scrollbar, div#scrollbar4 {
    float:right;
    margin-top:6px;
    }
/*
div#extra_controls {
    float:right;
    width:190px;
    }
    
div#extra_controls ul {
    margin:6px 0; padding:0; list-style:none;
    }
div#extra_controls ul li {
    margin:0 0 .5em 12px; 
    }
    
div#extra_controls ul li a:link, div#extra_controls ul li a:visited {
    color:#0F2F8D;
    }
    
div#extra_controls ul li a:hover {
    text-decoration:underline;
    }

  
div#wn1 h3, div#wn2 h3, div#wn3 h3 {
    margin:0 4px .3em 0;
    border:none;
    font-size:1em;
    }
    
div#wn1 p, div#wn2 p, div#wn3 p {
    text-align:left;
    padding-right:4px;
    margin:.3em 0 .6em;
    line-height:1.2;
    font-size:.9em;
    }

div#text h2.clearer {
    clear:both;
    }    
/*