div#wn1 { 
	position:relative; 
	width:125px; height:190px; 
	overflow:hidden;	
	}
div#wn2 { 
	position:relative; 
	width:125px; height:190px; 
	overflow:hidden;	
	}
div#wn3	{ 
	position:relative; 
	width:300px; height:200px; 
	overflow:hidden;	
	}
    
/* needed when dw_scrollObj.printEnabled = true */
div#lyr1, div#lyr2, div#lyr3 {
    position:absolute;
    }
    
/* Set small font-size or size/position of div's will be off in some browsers  */
div#scrollbar { 
    position:relative;
    width:11px; height:200px; 
    /* font-size:1px;  img display block is the solution, but people remove it then ask for help! */
    }
div#track { 
    position:absolute; left:0; top:12px;
    width:11px; height:176px;
    background: #336;
    }
div#dragBar {
    position:absolute; left:1px; top:1px;
    width:9px; height:20px;
    background-color:#ceced6;
    }  
div#up { position:absolute; left:0; top:0; }  
div#down { position:absolute; left:0; bottom:0; }

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

div#scrollbar 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 {
    -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 {
    float:left;
    width:149px;
    height:206px;
    margin:.3em 0 .3em 0;
    }

div.holder2 {
    float:left;
    width:149px;
    height:206px;
    margin:.3em 0 .3em 0;
    }
	
div#wn1, div#wn2, div#wn3 { 
    margin:1px;
    }

div.scroll_controls {
    float:right;
    position:relative;
    margin-top:10px;
    width:18px; height:180px;   
    }
    
/* 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:520px;
    height:214px;
    margin:1em 0 2em 0;
    border:1px dotted #999;
    }
div#scrollbar {
    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;
    }

/* over-ride styles in layout.css */    
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;
    }