#scrollbar1 { width: 98%; margin:auto; }
		#scrollbar1 .viewport { width:98.5%; height:510px; overflow: hidden; position:relative; }
		#scrollbar1 .overview { position:absolute; left: 0; top: 0; padding: 0; margin: 0; }
		#scrollbar1 .scrollbar{ background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
		#scrollbar1 .track { background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
		#scrollbar1 .thumb { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 0% 100%; height: 20px; width: 23px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -6px; }
		#scrollbar1 .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% -1%; overflow: hidden; height:5px; width: 23px; }
		#scrollbar1 .disable { display: none; }
		.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
		
		@media only screen and (max-width:800px){
			#scrollbar1 { width:98%;}
			#scrollbar1 .viewport { width:97.8%; height:1000px; }
			/*intro.html*/
			#dyk{ width:730px;}
			#dykHead{ width:90%; padding-left:10%;}
			.pageContent{ font-size:15px;}
			.levelBoxLink{font-size:14px;}
			#dykText{ font-size:15px;}
			#introBanner{ width:780px; height:35px; margin:0px auto;}
			.chapterTitle{ width:660px; height:35px; margin-top:0px;}
			#introOuter{background:url(images/bg-intro.png) #FFF; background-repeat:no-repeat; width:800px; height:1122px; margin: 0px auto;}
			#contentScroll{width:98%; height:970px;}
		}
		@media only screen and (max-width:768px){
			#scrollbar1 { width:98%;}
			#scrollbar1 .viewport { width:97.8%; height:800px; }
			/*Intro.html*/
			#dykHead{ width:90%; padding-left:10%;}
			.pageContent{ font-size:15px;}
			.levelBoxLink{font-size:14px;}
			#dykText p{ font-size:15px;}
			#introBanner{ width:750px; height:35px; margin:0px auto;}
			.chapterTitle{ width:650px; height:35px; margin-top:0px;}
			#introOuter{background:url(images/bg-intro.png) #FFF; background-repeat:no-repeat; width:768px; height:924px; margin: 0px auto;}
			#sequencingPage{ left:0px;}
			#dyk{ width:720px;}
			
		}
		@media only screen and (max-width:600px){
			#scrollbar1 { width:98%;}
			#scrollbar1 .viewport { width:96%; height:800px; }
			#footer{ width:95%;}
			#fContent{ font-size:10px!important;}
			/*intro.html*/
			#introOuter{ width:600px; height:944px;}
			#introBanner{ width:97%;}
			.contentArea{ width:540px;margin-left:10px;}
			#dyk{ width:540px; margin-left:15px;  }
			.levelBox{ width:550px; margin-left:10px;}
			.floatLeft{float:left;  margin-left:10px;}
			.floatRight{float:right;  margin-right:10px;}
		}

		@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
			
			#scrollbar1 .viewport { height:520px; }
			.pageContent{ font-size:15px;}
			.levelBoxLink{font-size:14px;}
			#dykText p{ font-size:15px;}
			#text1{font-size:20px;}
		}
		@media only screen and (min-device-width : 600px) and (max-device-width : 1024px) and (max-device-height:600px) and (orientation : landscape) {
			
			#scrollbar1 .viewport { height:370px; }
			#introOuter{ height:520px;}
		}