body,html{margin:0px;padding:0px;

font-family:Arial, Helvetica, sans-serif;
background-image:url('sos.png');
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}

#topSpace{width:100%;height:40px;}

@font-face {
    font-family: F1;
    src: url('monofonto.otf'); 
	 
    }


#clearer{float:none;clear:both;}
#clearer2{float:none;clear:both;}
#structMargin{height:420px;}


#sixSecondTimer{width:320px;margin:auto;margin-bottom:10px;height:4px;}
#sixSecondTimerInner{width:320px;float:left;height:4px;background-color:#c0392b;}

#mainTimer1{height:6px;width:60%;background-color:#b7472a;float:left;}
#mainTimer2{height:6px;width:40%;background-color:yellow;float:left;}


#dotHolder{width:60px;margin:auto;}
#dot1{width:15px;float:left;}
#dot2{width:15px;float:left;}
#dot3{width:15px;float:left;}
#dot4{width:15px;float:left;}
#dot5{width:15px;float:left;}
#dot6{width:15px;float:left;}

 #starArea{height:50px;width:160px;margin:auto;text-align:center;color:#efffff;font-family:arial,calibri;}
 #starArea2{height:50px;width:100px;margin:auto;}
 .star{float:left;width:25px;opacity:.1;text-align:center;}
  .staro{float:left;width:25px;text-align:center;}
 
#endText0{text-align:center;width:100%;font-size:25px;color:white;margin-bottom:15px;}
#endText1{text-align:center;width:100%;font-size:50px;}
#endText2{text-align:center;width:100%;font-size:60px;}

#endText3{text-align:center; }

#endText3a{text-align:center;margin:20px;font-size:35px;font-family:Franchise; }
#endText3b{text-align:center;margin:20px;font-size:25px;  }

#endText5{font-size:20px; }

#txt1{text-align:center;width:100%;font-size:30px;}
#txt2{text-align:center;width:100%;}
#txt3{text-align:center;width:100%;}

#display1{float:left;height:0px;padding:10px;}
#display2{float:right;height:0px;padding:10px;}


#appAreaLarge{width:800px;height:530px;margin:auto;background-color:#ffc30f;position:relative;}

#medalArea{position:absolute;width:180px;right:20px;top:50px;}

#logo img{width:800px;}

#butang1{width:200px;border-radius:8px;background-color:#efefef;text-align:center;cursor:pointer;margin:auto;height:40px;font-size:25px;line-height:1.7;}
#butang1:hover{opacity:.8;}

#butang1a{width:200px;border-radius:8px;background-color:#efefef;text-align:center;cursor:pointer;margin:auto;height:40px;font-size:25px;line-height:1.7;}
#butang1a:hover{opacity:.8;}

#butang2{float:left;border: 2px solid grey;width:100px;border-radius:8px;background-color:#efefef;text-align:center;cursor:pointer;margin:auto;height:30px;font-size:18px;line-height:1.7;}
#butang2:hover{opacity:.8;}

#butang3{border: 2px solid grey;width:100px;border-radius:8px;background-color:#efefef;text-align:center;cursor:pointer;margin:auto;height:30px;font-size:18px;line-height:1.7;}
#butang3:hover{opacity:.8;}

#butang4{float:right;border: 2px solid grey;width:100px;border-radius:8px;background-color:#efefef;text-align:center;cursor:pointer;margin:auto;height:30px;font-size:18px;line-height:1.7;}
#butang4:hover{opacity:.8;}

#butang5{width:180px;border-radius:8px;background-color:#efefef;text-align:center;cursor:pointer;margin:auto;height:40px;font-size:25px;line-height:1.7;}
#butang5:hover{opacity:.8;}

#butang6{float:left;border: 2px solid grey;width:60px;border-radius:8px;background-color:#efefef;text-align:center;cursor:pointer;margin:auto;margin-left:14px;height:30px;font-size:18px;line-height:1.7;}
#butang6:hover{opacity:.8;}

 

#bHolder{margin:auto;width:300px;}

  #answerArea{width:240px;height:40px;font-family:tf;text-align:center;margin:auto; }

#answerArea3{width:240px;height:40px;font-family:tf;text-align:center;margin:auto; }

.tile1{width:60px;height:60px;float:left;background-color:#f2f1e6;border:2px solid #ffc30f;box-sizing: border-box;
		font-size:50px;font-family:F1;line-height:50px;}




#finalword{font-size:50px;font-family:F1;line-height:50px;}



#spacer1{width:100%;height:20px;}
#spacer2{width:100%;height:30px;}
#spacer3{width:100%;height:60px;}
#spacer4{width:100%;height:40px;display:none;}

#gridArea{width:330px;height:330px;font-family:tf;text-align:center;margin:auto; background-color:#f2f1e6;box-sizing: border-box;border:1px solid #542c2d;}

#gridArea2{width:332px;height:332px;font-family:tf;text-align:center;margin:auto; background-color:#f2f1e6;box-sizing: border-box;border:1px solid #542c2d;}
#gridArea3{width:250px;height:50px;font-family:tf;text-align:center;margin:auto;border:3px solid #efefef}
#gridArea4{width:350px;height:50px;font-family:tf;text-align:center;margin:auto;border:3px solid #efefef}

.quad{width:50%;height:50%;float:left;}

#quad1x{background-color:red;}
#quad2x{background-color:blue;}
#quad3x{background-color:white;}
#quad4x{background-color:green;}

.tile2{font-size:65px;line-height:70px; cursor:pointer;
width:50%;height:50%;float:left;box-sizing: border-box;border:1px solid #542c2d;
background-color:#e8ecf1;font-family:F1,Arial, Helvetica, sans-serif;}

.tile2:hover{opacity:.8;font-size:70px;}

.tile3{font-size:120px;line-height:130px; cursor:pointer;
width:100%;height:100%;float:left;box-sizing: border-box;border:1px solid #542c2d;
background-color:#fefad4;font-family:F1,Arial, Helvetica, sans-serif;}
.tile3:hover{opacity:.8;font-size:150px;}

 
.tile4{font-size:75px;line-height:95px; cursor:pointer;
width:110px;height:110px;float:left;box-sizing: border-box;border:1px solid #542c2d;
background-color:#e8ecf1;font-family:F1,Arial, Helvetica, sans-serif;}

.tile4:hover{opacity:.8;font-size:70px;}

.tile5{font-size:38px;line-height:40px; cursor:pointer;
width:50px;height:50px;float:left;box-sizing: border-box;border:3px solid #542c2d;
background-color:#e8ecf1;font-family:F1,Arial, Helvetica, sans-serif;}

.tile5:hover{opacity:.8; }

.tile6{font-size:38px;line-height:40px; cursor:pointer;
width:50px;height:50px;float:left;box-sizing: border-box;border:3px solid #b7472a;
background-color:#b7472a;font-family:F1,Arial, Helvetica, sans-serif;color:#efefef;}

.tile6:hover{opacity:.8; }



.tile7{font-size:38px;line-height:40px; cursor:pointer;
width:50px;height:50px;float:left;box-sizing: border-box;border:3px solid #b7472a;
background-color:#b7472a;font-family:F1,Arial, Helvetica, sans-serif;color:#efefef;}
 


#hsarea{text-align:center;}


#structimg{text-align:center;}
#structimg img{width:320px;}


#answerArea2{display:none; }























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

#appAreaLarge{width:100%; }
#logo img{width:100%;}
#answerArea{display:none; }
#answerArea2{display:block;width:330px;height:40px;background-color:white;margin:auto;text-align:center;font-size:33px; }
#spacer4{width:100%;height:40px;display:block;}
}


@media screen and (max-width:670px) {
#medalArea{display:none;}
}


@media screen and (max-width:480px) {
#topSpace{width:100%;height:5px;}
 
#logo img{margin-bottom:70px;}
}




@media screen and (max-width:360px) {
#gridArea4{width:308px;height:50px;font-family:tf;text-align:center;margin:auto;border:3px solid #efefef;}

.tile6{width:44px;font-size:38px;line-height:40px; cursor:pointer;
height:50px;float:left;box-sizing: border-box;border:1px solid #b7472a;
background-color:#b7472a;font-family:F1,Arial, Helvetica, sans-serif;color:#efefef;}

}




@media screen and (max-width:332px) {
#gridArea2{width:320px;height:332px;font-family:tf;text-align:center;margin:auto; background-color:#f2f1e6;box-sizing: border-box;border:1px solid #542c2d;}
 #answerArea2{width:320px; }
 #gridArea{width:320px;}
.tile4{font-size:75px;line-height:95px; cursor:pointer;
width:106px;height:110px;float:left;box-sizing: border-box;border:1px solid #542c2d;
background-color:#e8ecf1;font-family:F1,Arial, Helvetica, sans-serif; }
}