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



#gameArea{width:800px;height:auto;min-height:500px;margin:auto;background-color:#fff;margin-top:10px;margin-bottom:70px;}

#title1{text-align:center;background-color:#6C7A89;height:40px;padding:20px;font-size:40px;color:#fff;font-family:Verdana, Geneva, sans-serif;}
#title2{text-align:center;background-color:#6C7A89;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;}
#title3a{text-align:center;background-color:#6C7A89;min-height:40px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;width:auto;}

#pix0{margin-top:2px;text-align:center;}
#butang1{float:left;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;}
#butang1:hover{opacity:.6;}

#butang2{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;}
#butang2:hover{opacity:.6;}

#butang4{margin:auto;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;}
#butang4:hover{opacity:.6;}



#playbutang{position:relative;width:100px;border:1px solid grey;border-radius:12px;margin:auto;margin-top:30px;cursor:pointer;
-webkit-user-select: none;      
-moz-user-select: none; 
-ms-user-select: none; 
-o-user-select: none;
user-select: none;

}
#playbutang:hover{opacity:.6;}
#playbutang img{width:30px;position:absolute;top:-4px;}
#butangText{margin-left:35px;}
 #butangholder{width:250px; margin:auto;}

#passage{padding:2%;width:96%;text-align:center;color:#fff;background-color:#6C7A89;}

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

#glossArea{width:780px;padding:10px;margin:auto;background-color:#fff;}
#spacer{width:100%;height:40px;}


#pix1{width:50%;text-align:center;float:left;}
#pix2{width:50%;text-align:center;float:right;}
#pix1 img{border:8px solid #FFF;cursor:pointer;}
#pix2 img{border:8px solid #FFF;cursor:pointer;}
 
#pix1 img{width:45%;}
#pix2 img{width:45%;}

#struct{text-align:center;}

#feedback1{width:150px;margin:auto;background-color:#019875;color:#fff;text-align:center;float:none;clear:both;border-radius:3px;font-size:28px;padding:3px;}
#feedback2{width:150px;margin:auto;background-color:#EC644B;color:#fff;text-align:center;float:none;clear:both;border-radius:3px;font-size:28px;padding:3px;}
#feedback3{text-align:center;}

.ppx img{float:left;width:120px;height:120px;}
.ppxHolder{float:left;width:120px;height:140px;text-align:center;cursor:pointer;}
.ppxHolder:hover{opacity:.8;}

#uber{width:720px;margin:auto;height:600px;background-color:#fff;}

@media screen and (max-width:745px) {#uber{width:600px;margin:auto;}}
@media screen and (max-width:615px) {#uber{width:480px;margin:auto;}}
@media screen and (max-width:495px) {#uber{width:360px;margin:auto;}}
@media screen and (max-width:375px) {#uber{width:240px;margin:auto;}}



@media screen and (max-width:820px) {
	body,html{background-image:none;}
#gameArea{width:100%;}
 #glossArea{width:95%;}
#pix0 img{width:60%;margin:auto;}
}

@media screen and (max-width:650px) {
	#title1{font-size:32px;}
#passage{padding:2%;width:96%;float:left;height:auto;}
#quiz{margin:2%;margin-top:40px;width:95%;height:300px;float:left;border: 1px solid #3CF; border-radius:1px;position:relative;}
#gameArea{margin-top:15px;}
}


@media screen and (max-width:450px) {
	#title1{font-size:25px;}
	#title2{font-size:15px;}
	#banner{width:100%;height:50px;background-color:#F39C12;padding-left:0%;}
	#pix1 img{width:55%;}
#pix2 img{width:55%;}
}

@media screen  and (max-width:820px){
#bannerb{width:100%;}
#bannerb img{width:100%;}
#allContent{width:96%;padding:2%;border:0px;}
#bar1{}
}


@media screen  and (max-width:600px){
#bannerb{display:none;}
#banners{width:100%;display:inline;}
#banners img{width:100%;}
#allContent{width:96%;padding:2%;border:0px;}
#bar1{}
}

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

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