body{margin:0px;padding:0px;


-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;

background-color:#eff5fd;background-image:url('sos.png');

}
#banner{background-color:#e67e22;width:100%;margin:auto;text-align:center;font-size:36px;margin-top:0px;font-family: 'Paytone One', sans-serif;color:#FFFFFF;
border-bottom:5px solid #F5AB35;

 
}
#banner img{height:50px;margin-top:8px;}

#feature{height:250px;}
#feature:hover{color:#CC3300;cursor:pointer;}
#featurehead{margin-top:20px;margin-left:10px;background-color:#FF6600;color:#FFFFFF;width:100px;padding:1px;text-align:center;}
#featuretext{margin-top:20px;margin-left:10px;width:100px;padding:1px;text-align:center;}

#spacer{height:10px;}
.spacer3{height:10px;width:100%;font-size:9px;}
#navbar{height:40px;width:800px;margin:auto;}


.smallMenu{width:100%;margin:auto;font-family:Arial, Helvetica, sans-serif;font-size:24px;cursor:pointer;padding:2px;padding-top:30px;text-align:center;height:40px;margin-top:5px;border-radius:4px;background-color:#F93;}
.blue{background-color:#66CCFF;color:white;}
.blue:hover{background-color:#66CCDD;color:white;}

.orange{background-color:#F93;color:white;}
.orange:hover{background-color:#CC1100;color:white;}

.green{background-color:#66CCFF;color:white;}
.green:hover{background-color:#66CCDD;color:white;}

.brown{background-color:#33CC00;color:white;}
.brown:hover{background-color:#66CCDD;color:white;}

.navelement{

background-color:#87c444;
	color: #fff;
	float: left;
	width: 180px;
	text-align: center;
	margin-top: 3px;
	height:28px;
	 font-family: 'Paytone One', sans-serif;
	 
	cursor:pointer;
	border:2px solid #21692e;
	border-radius:2px;
}

#ne1{margin-right:20px;}
#ne2{margin-right:24px;}
#ne3{margin-right:20px;}

.navelementsmall{
	border-radius:2px;
	color: #27241d;
	float: left;
	width: 4%;
	text-align: center;
	margin-top: 3px;
	height:28px;
	 font-family: 'Paytone One', sans-serif;
	 background-color:#ffa123;
	cursor:pointer;
}
#navbar3{color: #fff;width:100%;margin:auto;text-align: center;margin-bottom: 3px;height:28px;font-family: 'Paytone One', sans-serif;cursor:pointer;background-color:#97ba42;}
#navbar3:hover{color:#993300;}

#jrbar{position:fixed;width:140px;height:440px;background-color:#FFFFFF;right:-20px;top:120px;border:solid 1px #FF9900;font-family:Arial, Helvetica, sans-serif;

border-radius: 15px;
}
#close{position:absolute;bottom:0px;height:20px;background-color:#666666;color:#FFFFFF;width:123px;text-align:center;cursor:pointer;
border-bottom-left-radius: 15px;}
#close:hover{background-color:#666643;}
#jrlink{text-align:center;padding:15px;padding-top:40px;height:90px;border-bottom:solid 1px #ff9900;width:100px;}
#jrlink:hover{color:#CC3300;}

.arrow{cursor:pointer;right:40px;position:absolute;}
#ne1{height:32px;color:#efefef;font-size:20px;}

#navContent{
	border: solid 5px #F2F1EF;overflow:hidden;
	width:790px;height:450px;margin:auto;background:white;position:relative;}
	

#infoBar{position:absolute;width:100%;float:left; line-height:10px;}
#qtitle{font-size:26px; padding-left:150px;font-family:Arial, Helvetica, sans-serif;position:absolute;top:15px;color:#FFF;}
.text4{font-family:Arial, Helvetica, sans-serif;position:absolute;
font-size:26px; padding-left:40px;top:15px;
color:#FFF; }



#game1{
margin:auto;
width:800px;
height:400px;
right:0px;
position:absolute;
z-index:0;
}

#game2{

margin:auto;	
width:800px;
height:400px;
right:-800px;
position:absolute;
z-index:1;
} 


 .qq{text-align:center;width:50px;padding:1px;background-color:#FFFBEA;height:100%;float:right;margin-left:5px;border-right:1px solid #CC3300;}
 .pp{text-align:center;width:50px;padding:1px;background-color:#FFFBEA;height:100%;float:right;margin-left:5px;border-right:1px solid #CC3300;}
 .rr{text-align:center;width:50px;padding:1px;background-color:#FFFBEA;height:100%;float:right;margin-left:5px;border-right:1px solid #CC3300;}
 .ss{text-align:center;width:50px;padding:1px;background-color:#FFFBEA;height:100%;float:right;margin-left:5px;border-right:1px solid #CC3300;}
 

#innerBox{position:absolute;}
	
#quizList{ margin:auto;width:90%;height:345px;overflow-y:scroll;border:1px #97ba42 solid;overflow-x:hidden;}	

#quizListH{ height:0px;}	
#page1Message{ width:100%;height:40px;text-align:center; font-family: arial;font-size:24px;color:#333;margin-top:15px;}	


.spacer2{height:2px;width:800px;;background-color:#EECC62;clear:both;float:none;}

.box1{cursor: pointer; height:25px;width:100%;font-family: arial;opacity:.6;overflow:hidden;}
.contactLine{margin-left:80px;width:500px;height:80px;font-size:25px;font-family:Arial, Helvetica, sans-serif;color:#333; }
.contactLine2{ font-size:23px;color:#4D8989; }

a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}
#pageno{position:absolute;text-align:center;bottom:15px; width:80px;font-family: sans-serif;font-size:10px;right:46%;}
.gameBox{width:50%;height:80px;padding-top:8px;padding-bottom:8px;float:left;text-align:center;}
.gameBox img:hover{background-color:#FFC;}

.exBox1{padding-left:40px;padding-right:40px;width:718px;height:35px;padding-top:15px;float:left;
border: 1px solid #f5d77f;text-align:center;font-family: arial, sans-serif;z-index:1;}
.exBox2{position:absolute; padding-left:45px;padding-right:50px;width:300px;height:70px;padding-top:15px;padding-bottom:15px;}

.exBox2 img:hover{background-color:#F8D67C;}
.exBox4{position:absolute;bottom:10px;text-align:right;padding-left:45px;padding-right:50px;width:300px;height:25px;padding-top:15px;padding-bottom:10px;float:left;}
.exBox4 img:hover{cursor:pointer;background-color:#F7F7F5;}
.exBox5{position:absolute;bottom:10px;right:8px;padding-left:45px;padding-right:50px;width:300px;height:25px;padding-top:15px;padding-bottom:10px;float:left;}
.exBox5 img:hover{cursor:pointer;background-color:#F7F7F5;;}

.redbox{background-color:#990000;padding:4px;margin:12px;color:#FFFFCC;font-size:20px;font-family:Arial, Helvetica, sans-serif;cursor:pointer;}
 
.questionText{
font-family:Arial, Helvetica, sans-serif;
font-size:27px;
color:#2e3131;
text-align:center;
padding-top:80px;
padding-bottom:10px;
width:710px;
margin:auto;
margin-bottom:40px;
}

.qpix{width:200px;height:200px;padding-left:40px;float:left; }
.qpix img{width:200px;height:100%;}

.questionText2{
font-family:Arial, Helvetica, sans-serif;
font-size:27px;
color:#000;
text-align:center; 
padding-top:80px;
padding-bottom:10px;
width:710px;margin:auto;
}

.text1{font-family:Arial, Helvetica, sans-serif;
font-size:23px;margin-left:40px;
color:#009900;}
.text2{font-family:Arial, Helvetica, sans-serif;
font-size:22px;margin-left:40px;
color:#CC3300;}

.text3{font-family:Arial, Helvetica, sans-serif;
font-size:22px;text-align:center; 
color:#2c3e50;}

.text3x{font-family:Arial, Helvetica, sans-serif;
font-size:22px;text-align:center; 
color:#2c3e50;}


.option{
font-family:Arial, Helvetica, sans-serif;
width:250px;
margin:auto; 
margin-top:10px;
font-size:21px;
color:#2e3131;
padding:5px;
position:relative;
border: 2px solid white;
border-radius: 8px;
cursor:pointer;
background-color:#ececec;
text-align:center;
}

.option:hover{
 
color:#FFF;
background-color:#00b5cc;
}

.optionlong{width:400px;}


.optionxtra{margin-left:300px;}



#fbimg{position:absolute;top:-10px;right:-20px;}
#fbimglong{position:absolute;top:-10px;right:-20px;}

.feedback1{
width:150px;
padding:5px;
font-size:30px;
color:#FFFFCC;
background-color:#009900;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
margin-left:40px;
}

.feedback2{
width:150px;
padding:5px;
font-size:30px;
color:#FFFFCC;
background-color:#CC3300;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
float:left;
margin-left:40px;
margin-right:12px;
}

.feedback3{
color:#CC3300;
font-family:Arial, Helvetica, sans-serif;
padding-top:13px;
padding-left:40px;
margin-left:10px;
}


.active{height:32px;color:#C63;background-color:#006600;}

.flatBlueButton{
width:150px;
padding:5px;
font-size:20px;
color:#FFFFCC;
background-color:#66CCFF;
font-family:Arial, Helvetica, sans-serif;
text-align:center;margin-left:40px;
border-radius:5px;
}

.flatBlueButton:hover{background-color:#9EE7FE;cursor:pointer;}

.myletter{

background-color:#FFCC00;
padding:2px;padding-right:6px;padding-left:6px;width:120px;color:#FFFFFF;margin-right:10px;
}


.mynotes{position:absolute;right:20px;top:70px;z-index:100;}
.dloads{position:absolute;right:20px;top:170px;z-index:101;}
#mymenu{position:absolute;right:20px;top:5px;padding:9px;width:50px;
text-align:center;color:#FFF;border:solid white 1px;border-radius:3px;
cursor:pointer;font-family:Arial, Helvetica, sans-serif;cursor:pointer;z-index:101;}


.mynotes:hover{border: 3px solid #FEF2D8;cursor:pointer;}
.dloads:hover{border: 3px solid #FEF2D8;cursor:pointer;}
#mymenu:hover{background-color:#FF9966;cursor:pointer;}

#sideBar{ position:absolute; right:0px;top:0px;width:90px;height:0px;background-color:#FEF2D8;z-index:99;}

#navbar2{text-align:center;}
.bottomlink{ padding:5px;margin:5px;padding-top:1px;padding-bottom:1px; 
background-color:#CC3300;color:#FFFFCC;}


#extremefooter{margin:auto;text-align:center;position:absolute;bottom:0px;width:100%;font-family:Arial, Helvetica, sans-serif; }
#extremefooter img{position:relative;bottom:-5px;width:500px;margin:auto;}

#promo{margin-bottom:5px;text-align:center;}

#messageBox{width:90%;padding:5%;font-family:Arial, Helvetica, sans-serif;font-size:24px;}
 
#easyButang{margin-right:100px;margin-top:7px;float:right;width:200px;border: 1px solid grey;border-radius:3px;text-align:center;font-size:14px;cursor:pointer;}
#easyButang:hover{background-color:#ECFFF2;}



#newNextButang{text-align:center;font-family:Arial;clear:both;float:none;margin:auto;opacity:0.2;padding:6px;border-radius:6px;font-size:16px;width:50px;background-color:#D2D7D3;margin-top:0px;cursor:pointer;}

#newNextButang:hover{background-color:#ececec;color:grey;}




.fstext1{font-family:Arial, Helvetica, sans-serif;
font-size:23px;text-align:center; padding:5px;
color:#333; margin-bottom:3px;}
.fstext1a{font-family:Arial, Helvetica, sans-serif;
font-size:23px;  
color:#fff;background-color:#009900;padding:5px;width:35px;text-align:center;margin-bottom:3px;}


.fstext2{font-family:Arial, Helvetica, sans-serif;
font-size:23px;text-align:center; padding:5px;
color:#333;}
.fstext2a{font-family:Arial, Helvetica, sans-serif;
font-size:23px;text-align:center; 
color:#fff;background-color:#CC3300;padding:5px;width:35px;text-align:center;}









@media screen and (max-width:1350px) {
#jrbar{display:none;}

}

@media screen and (min-width:801px) {
#navbar3{display:none;}

}

@media screen and (max-width:800px) {
#banner{width:100%;}
#navbar{display:none;}
#navContent{width:99%;height:400px;border: none;}
#game1{width:100%;}
#spacer{height:5px;}
#quizList{width:80%;margin:auto;margin-top:30px;float:none;height:280px;}
#sideBar{display:none;}
#game2{width:100%;}
.questionText{font-size:25px;padding-left:5%;padding-top:60px;width:92%;}
.questionText2{font-size:25px;padding-left:40px;padding-top:60px;width:92%;}
.optionold{width:90%;margin:15px;font-size:16px;padding:2px;margin-left:5%;}
.feedback1{margin-left:20px;}
.feedback2{margin-left:20px;}
.feedback3{padding-top:2px;}
.exBox2{text-align:center;width:40%;float:left;position:relative; margin-left:6%;margin-top:5px;margin-bottom:5px;padding-left:0px;padding-right:0px;height:auto;padding-top:5px;padding-bottom:5px;}
.exBox2 img{margin:auto;text-align:center;}
.exBox1{display:none;}
#aHolder{position:relative;overflow-y:scroll;height:400px;margin:auto;width:auto; text-align:center;}
#aHolder img{margin:auto;text-align:center;}
#aHolder2{position:relative;width:100%;margin:auto;}
.redbox{display:none;}
 #qtitle{display:none;}
 #easyButang{float:none;margin:auto;}
 .flash{display:none !important; }
 .contactLine{ margin:auto;width:90%;height:70px;font-size:25px;}
.contactLine2{ font-size:14px;}
 .optionxtra{margin-left:270px;width:40%;}
 .qpix{width:170px;height:170px;padding-left:40px;float:left;}
 .qpix img{width:170px;height:170px;}
}

@media screen and (max-width:770px) {
#navContent{}
}

@media screen and (max-width:720px) {
.qq{display:none;}
.pp{display:none;}
.rr{display:none;}
.ss{display:none;}
}

@media screen and (max-width:680px) {
.exBox2{width:100%;margin:auto;margin-top:5px;margin-bottom:5px;text-align:center;top:0px;left:0px;}

}

@media screen and (max-width:610px) {
.gameBox img{width:90%;}

}


@media screen and (max-width:580px) {
.hideat580{display:none;}
}

@media screen and (max-width:525px) {

.questionText{font-size:20px;}
.gameBox img{width:300px;}
.gameBox{width:100%;height:70px;padding-top:3px;padding-bottom:3px;}
#gameBoxHolder{height:400px;overflow-y:scroll;overflow-x:hidden;}
.optionlong{font-size:16px;}
.optionxtra{margin:auto;margin-top:7px;width:80%;margin-bottom:3px;}
}


@media screen and (max-width:500px) {

#page1Message{font-size:18px;}
#extremefooter img{width:100%;}
}


@media screen and (max-height:800px) {
#extremefooter{display:none;}
}



@media screen and (max-width:450px) {
 


.optionlong{width:90%;}
 

}









@media screen and (max-width:360px) {
#banner img{width:94%;}
}