body,html{margin:0px;padding:0px;background-image:url(bg.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;

}

#t1{text-align:center; font-size:40px;width:100%;background-color:#f9690e;padding-top:30px;padding-bottom:30px;}


#banner{background-color:#5C97BF;text-align:center;
  
  font-size:24px;
  color:#FFFFFF;width:100%;height:70px;}
#banner img{width:450px;}



#clearance{clear:both;float:none;width:100%;}

 
#gameArea{width:800px;height:460px;margin:auto;background-color:#fff;margin-top:0px;margin-bottom:10px;border: 1px solid #f9690e;box-sizing:border-box;}

#title1{text-align:center;background-color:#222324;height:40px;padding:20px;font-size:40px;color:#fff;font-family:Verdana, Geneva, sans-serif;}
#title2{text-align:center;background-color:#222324;height:40px;padding:5px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;}
#title2a{padding:5px;text-align:center;background-color:#6C7A89;min-height:40px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;width:auto;}

#pix1{margin-top:2px;text-align:center;}
#pix1 img{width:400px;}

#butang1{float:left;width:140px;margin:auto;text-align:center;background-color:#e67e22;height:24px;padding:5px;font-size:17px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang1:hover{opacity:.6;}

#butang2{float:right;width:140px;margin:auto;text-align:center;background-color:#e67e22;height:24px;padding:5px;font-size:17px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang2:hover{opacity:.6;}

#butang3{float:right;width:100px;margin:auto;text-align:center;background-color:#5C97BF;height:24px;padding:5px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang3:hover{opacity:.6;}

#butang4{margin:auto;width:200px;margin:auto;text-align:center;background-color:#5C97BF;height:24px;padding:5px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang4:hover{opacity:.6;}

 #butang5{margin:auto;width:200px;margin:auto;text-align:center;background-color:#5C97BF;height:24px;padding:5px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang5:hover{opacity:.6;}


#butang1a{float:left;width:220px;margin:auto;text-align:center;background-color:#e67e22;height:24px;padding:5px;font-size:17px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang1a:hover{opacity:.6;}

#butang2a{float:right;width:60px;margin:auto;text-align:center;background-color:#e67e22;height:24px;padding:5px;font-size:17px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang2a:hover{opacity:.6;}


 #butangholder{width:310px; margin:auto;}
 

#promo{margin:auto;text-align:center;margin-top:10px;}

 
#spacer{width:100%;height:20px;}
 
#spacer2{width:100%;height:10px;}

#spacer3{width:100%;height:15px;}


#holder{margin:auto;margin-top:20px;width:90%;}
#questionold{width:90%;padding:10px;border:3px solid grey;border-radius:8px;font-size:22px;}
#question{margin:auto;width:90%;padding:10px;background-color:#fde3a7;border-radius:8px;font-size:22px;text-align:center;}
#option1{margin:auto; padding:10px;border-radius:8px;font-size:17px;width:180px;background-color:#ececec;margin-top:40px;cursor:pointer;text-align:center;}
#option2{ margin:auto;padding:10px;border-radius:8px;font-size:17px;width:180px;background-color:#ececec;margin-top:10px;cursor:pointer;text-align:center;}
#option3{ margin:auto;padding:10px;border-radius:8px;font-size:17px;width:180px;background-color:#ececec;margin-top:10px;cursor:pointer;text-align:center;}
#option4{ margin:auto;padding:10px;border-radius:8px;font-size:17px;width:180px;background-color:#ececec;margin-top:10px;cursor:pointer;text-align:center;}


#option1:hover{background-color:#d35400;color:#efefef;}
#option2:hover{background-color:#d35400;color:#efefef;}
#option3:hover{background-color:#d35400;color:#efefef;}
#option4:hover{background-color:#d35400;color:#efefef;}


#feedback1{float:right;position:relative;}
#feedback1 img{width:30px;position:absolute;right:0px;top:-5px;}


#nextButang{margin:auto;clear:both;float:none;opacity:0;padding:8px;border-radius:6px;font-size:17px;width:50px;background-color:#D2D7D3;margin-top:40px;cursor:pointer;}

#nextButang:hover{background-color:#ececec;color:grey;}


#displayBar{width:100%;height:40px;background-color:#d35400;color:#efefef;cursor:pointer;}
#displayBar:hover{opacity:.7;}

#displayBar1{font-size:20px;line-height:40px;text-align:center;float:left;width:23%;}

#displayBar2{font-size:20px;line-height:40px;text-align:center;float:left;width:23%;}

#displayBar3{float:left;width:53%;height:100%;text-align:center;}
#displayBar3inner{width:100%;height:100%;font-size:20px;line-height:40px; }



#box1{text-align:center;width:500px;padding:20px;background-color:#87D37C;margin:auto;border-radius:3px;margin-top:10px;}

#box2{text-align:center;width:500px;padding:20px;background-color:#EEEEEE;margin:auto;border-radius:3px;margin-top:10px;}


.def1{margin:auto;width:margin-top:10px;width:500px;}
.def2{width:84px;padding:3px;float:left;background-color:#ececec;height:40px;margin-top:2px;padding-left:10px;}
.def3{width:382px;padding:3px;float:left;background-color:#ececec;margin-left:2px;height:40px;margin-top:2px;padding-left:10px;}


#score1{background-color:#03A678;font-size:19px;color:#efefef;padding:8px;text-align:center;width:300px;margin:auto;}
#score2{background-color:#D2D7D3;font-size:19px;padding:8px;text-align:center;width:150px;margin:auto;margin-top:4px;}
#score3{text-align:center;width:150px;margin:auto;margin-top:40px;}
#score4{text-align:center;width:200px;margin:auto;margin-top:40px;} 
#stars{text-align:center;width:100px;margin:auto;margin-top:40px;}





#butang6{margin:auto;width:230px;margin:auto;text-align:center;background-color:#5C97BF;height:24px;padding:5px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang6 img{float:right;}
#butang6:hover{opacity:.6;}






#hider{width:100%;height:40px;background-color:white;position:absolute;top:0px;}



#fcard{position:relative;border:2px solid #2e3131;width:350px;height:350px;margin:auto;overflow:hidden;background-color:#ececec;text-align:center;cursor:pointer;border-radius:4px;}
#fcard:hover{border:2px solid #95a5a6;}

#wcard{position:absolute;width:350px;height:350px;}


#imgholder{width:350px;height:350px;position:absolute;top:350px;}
#imgholder img{width:350px;height:350px;}


.theword{margin-top:110px;font-size:60px;color:#2e3131;}





@media screen and (max-width:360px) {
	
 #fcard{width:310px;height:310px;}
 
#wcard{width:310px;}
.theword{font-size:50px;margin-top:100px;}
#imgholder{width:310px;height:310px;position:absolute;top:350px;}
#imgholder img{width:310px;height:310px;}

}











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

}

@media screen and (max-width:650px) {
	#title1{font-size:32px;}
#gameArea{margin-top:15px;height:540px;}
}


@media screen and (max-width:450px) {
	#title1{font-size:25px;}
	#title2{font-size:15px;}
	 
}
 
 




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

 
#box1{width:auto;}

#box2{width:auto;}
}

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

#question{width:90%;padding:10px;background-color:#89C4F4;border-radius:8px;font-size:22px;}
#option1{ width:90%;}
#option2{width:90%;}
#option3{width:90%;}
#option4{width:90%;}

.def1{margin:auto;width:margin-top:10px;width:100%;}
.def2{width:27%;padding:1%;}
.def3{width:67%;padding:1%;}



}

@media screen and (max-width:475px) {
	#pix1 img{width:70%;}
	 
}



@media screen and (max-width:450px) {
	#banner img{width:100%;}
	 #nextButang{margin-top:20px;}
}

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

	#displayBar3inner{display:none;}
}


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

	#banner img{width:100%;height:auto;}
}