/* CSS Document */
#wn{ padding:0; margin: 0px;}  #lyr1{ margin:0 10px 0 0px;padding:0;}
#left{ position:relative; float:left; width:150px; margin:110px 0 0 0px; text-align:center; }
#left ul{ list-style-type:none; font-weight:bold;}
#left li{ list-style-type:none; margin:0; padding:10px 0 10px 0;}

#abt{ width:700px; height:200px; position:relative; margin: 0px; padding: 0; float: left;}
div#scrollbar {  display:block; /* initially display:none; to hide from incapable */    }
div#wn	{ position:relative; width:730px;  height:250px; overflow: hidden; float:left; margin:0px; padding:0px;} /* Content and width*/
    
div#scrollbar { position:relative; width:11px;  height:240px;  /* height of scroll bar */ float:right; margin: 10px  0  0 480px; font-size:1px; /* so no gap or misplacement due to image vertical alignment */ }

div#track { float:right; position:absolute; background: #ddd;  left:2px; top:12px; /* top margin of scroll bar */ width:7px; height:216px;			/* height of scroll bar */	  }
	
div#dragBar { position:absolute; left:3px; top:1px;  width:5px; height:5px; background-color:#7f7f7f; }  

div#lyr1{ 	width:700px;			/* text box with */ }

div#up { position:absolute; left:0; top:0; }  
div#down { position:absolute; left:0; bottom:0; }

/* for safari, to prevent selection problem  */
div#scrollbar, div#track, div#dragBar, div#up, div#down {
    -moz-user-select: none;
    -khtml-user-select: none;
}


/* so no gap or misplacement due to image vertical alignment
font-size:1px in scrollbar has same effect (less likely to be removed, resulting in support issues) */

div#scrollbar img {     display:block;      } 


@media only screen { 
#abt{ width:98%; height:200px;} 		 	     div#wn	{ width:100%;  height:250px; }
div#scrollbar { margin: 10px  0  0 50%;} 		       div#lyr1  { width:95%;	}

}
 
 
@media only screen and (min-width: 980px) and (max-width: 1050px) {
#abt{ width:98%; height:200px; margin-bottom:45px;} 		 	     div#wn	{ width:100%;  height:250px; }
div#scrollbar { margin: 10px  0  0 50%;} 		       div#lyr1  { width:95%;	}
}


 
@media only screen and (min-width: 480px) and (max-width: 979px) {
/*	#abt{ width:400px; height:250px; margin-bottom:50px;}
	div#wn	{ width:410px;  height:290px; } div#track {height:256px;} div#wn p{ text-align:left;}
	div#scrollbar {margin: 10px  0  0 270px; height:280px;}
	div#lyr1{ 	width:400px;	}*/
	
#abt{ width:98%; height:250px; margin-bottom:45px;} 		 	     div#wn	{ width:100%;  height:250px; }
div#scrollbar { margin: 10px  0  0 50%;} 		       div#lyr1  { width:95%;	}
}

@media only screen and (max-width: 479px) {
	#abt{ width:280px; height:250px; margin-bottom:50px;}
	div#wn	{ width:290px;  height:290px; } div#track {height:256px;} div#wn p{ text-align:left;}
	div#scrollbar {margin: 10px  0  0 160px; height:280px;}
	div#lyr1{ 	width:270px;	}
}