body,html{margin:0px;padding:0px;background-image:url(sos.png);font-family:Verdana, Geneva, sans-serif;

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;

}


#dots{width:100%;top:0px; padding-top:5px;padding-bottom:5px;}
#dotHolder{margin:auto;width:140px; }
.dot1{width:6px;height:6px;border-radius:14px;background-color:white;margin-left:2px;margin-right:2px;float:left;}
.dot2{width:6px;height:6px;border-radius:14px;background-color:white;margin-left:2px;margin-right:2px;float:left;opacity:.5;}


#t1{font-size:30px;}
#t2{font-size:20px;}
#t5{width:100%;text-align:center;}

#contentArea{width:800px;background-color:#fff;padding:10px;margin:auto;}
.lessonTitle{padding:10px;border:1px solid grey;cursor:pointer;color:black!important;}
.lessonTitle:hover{background-color:#efefef;}


#navArea{width:506px;margin:auto;padding-top:3px;background-color:white;height:60px;}
#butangC1{width:33%;float:left;}
#butangC2{width:33%;float:left;}
#butangC3{width:33%;float:left;}

#butang1{margin:auto;padding:5px;width:90px;border-radius:3px;cursor:pointer;
	text-align:center;background-color:#f15a22;color:#ececec;}
#butang1:hover{opacity:.7;}
#butang2{margin:auto;padding:5px;width:90px;border-radius:3px;cursor:pointer;
	text-align:center;background-color:#f15a22;color:#ececec;}
#butang2:hover{opacity:.7;}
#butang3{margin:auto;padding:5px;width:90px;border-radius:3px;cursor:pointer;
	text-align:center;background-color:#f15a22;color:#ececec;}
#butang3:hover{opacity:.7;}

.desel{opacity:.2;cursor:none;}
.desel:hover{opacity:.2!important;cursor:auto!important;}

.spacer5{width:100%;height:5px;}
.spacer10{width:100%;height:15px;}

#area1{width:846px;padding:8px;background-color:#6c7a89;margin:auto;text-align:center;color:#eff;}
.intro{margin-bottom:0px;}



#area2outer{width:860px;background-color:white;margin:auto;border-bottom:1px solid #6c7a89;border-right:1px solid #6c7a89;border-left:1px solid #6c7a89;position:relative;} 

#area2{position:relative;width:430px;height:430px;background-color:white;margin:auto;overflow-y:hidden;}
#area2:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}



.selectedAnswer{background-color:#bfbfbf;}
.selectedAnswer:hover{background-color:#bfbfbf!important;}


.option{margin:auto;width:80%; padding:5px;margin-bottom:5px;cursor:pointer;border:1px solid grey; border-radius:5px;}
.option:hover{background-color:#ececec;}


#area2inner{position:absolute;width:430px;height:430px;top: 0;left: 0;bottom: 0;right: 0;}
#area2inner img{width:430px;height:430px;}

#qArea{position:absolute;width:430px;height:430px;top: 0;left: 0;right: 0;text-align:center;font-size:25px;}


#fb1{margin:auto;padding:2px;text-align:center;color:#ececec;background-color:#1e824c;width:140px;border-radius:3px;}

 #fb2{margin:auto;padding:2px;text-align:center;color:#ececec;background-color:#d91e18;width:140px;border-radius:3px;}
 
 #promo{text-align:center;}

@media screen and (max-width:880px){


#area1{width:96%;margin:auto;padding-right:0px;padding-left:0px;border-right:1px solid #6c7a89;border-left:1px solid #6c7a89;}
#area2outer{width:96%;margin:auto;background-color:white;margin:auto;} 

}


@media screen and (max-width:820px){
#contentArea{width:90%;background-color:#fff;padding:10px;margin:auto;}
}


@media screen and (max-width:506px){
#navArea{width:100%;} 
}


@media screen and (max-width:450px){
 #t2{font-size:17px;}
#navArea{width:100%;} 
#area2{width:100%;height:100%;}
 
#area2inner{width:100%;height:100%;}
#area2inner img{width:100%;height:100%;}

#qArea{width:100%;height:auto;top: 0;left: 0;right: 0;text-align:center;font-size:15px;}
.option{width:90%; padding:5px;margin-bottom:7px;}
#fb1{font-size:20px;}
 #fb2{font-size:20px;}
}