body{margin:0px;padding:0px;}


#qq{margin:auto;padding:10px; max-width:90%;border:3px solid grey;text-align:center;border-radius:4px;}


.col1{width:95px;float:left;text-align:center;}
.col2{width:95px;float:left;text-align:center;}
.col3{width:130px;float:left;text-align:center;}

.col4{width:210px;float:left;text-align:center;}
.col5{width:210px;float:left;text-align:center;}
 

#cantre{width:320px;margin:auto;}
#cantre2{width:420px;margin:auto;}

.clearme{clear:both;
float:none;}

 #butang3{float:left;width:20px;margin:auto;margin-left:3px;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;}
 #butang3 img{width:15px;}

#navArea{
width:96%;margin:auto;height:0px;
 
}

#butang1{float:left;width:20px;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:20px;margin:auto;margin-left:10px;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;}

#bArea{width:200px;margin:auto;height:40px;padding-top:20px;}

#ybutton{position:relative;width:230px;margin:auto;text-align:center;border:2px solid #5C97BF;height:24px;padding:5px;font-size:18px;color:#000;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#ybutton:hover{opacity:.6;}

#ybuttonfb{position:absolute;top:0px;right:0px;}
#ybuttonfb img{width:32px;}

#nbutton{position:relative; width:230px;margin:auto;margin-top:10px;text-align:center;border:2px solid #5C97BF;height:24px;padding:5px;font-size:18px;color:#000;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#nbutton:hover{opacity:.6;}

#nbuttonfb{position:absolute;top:0px;right:0px;}
#nbuttonfb img{width:32px;}

#fbArea{clear:both;float:none;height:40px;text-align:center;}

#nxbutton{opacity:.2;width:60px;margin:auto;text-align:center;background-color:grey;height:20px;padding:3px;font-size:16px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}

.hov{opacity:1!important;}
.hov:hover{opacity:0.6!important;}

#gameArea{
width:840px;
margin:auto;
background-color:white;
}

#structions{

clear:both;
float:none;
text-align:center;
}

 #cardHolder{width:760px;margin:auto;margin-top:25px;float:none;clear:both;}

.vbox{width:176px;height:200px;border:2px solid grey;
	margin-left:5px;margin-right:5px;text-align:center;
	font-size:25px;margin-bottom:5px;cursor:pointer;float:left;}
.vbox:hover{border:#89C4F4 2px solid;}
.vbox img{width:150px;height:150px;}

.piclabel{text-align:center;clear:both;float:none;}


#clearfoot{clear:both;float:none;width:100%;height:1px;}

#titleArea{text-align:center;font-size:30px; margin-top:17px;}


#im1 img{max-width:100%;}

.mypara{padding:14px;}

.emph{color:#2c3e50;font-weight: 900;}

.zample{margin-left:30px;color:#013243;font-weight: 900;}

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



@media screen and (max-width:840px){
#cardHolder{width:100%;}
.vbox{width:23%;}
}

@media screen and (max-width:700px){
#cardHolder{width:100%;}
.vbox{width:30%;}
}

@media screen and (max-width:510px){
#cardHolder{width:100%;}
.vbox{width:44%;}
}
@media screen and (max-width:420px){
#cantre2{width:210px;margin:auto;}
}


@media screen and (max-width:360px){
.vbox img{width:140px;}
}