@charset "UTF-8";
/* Puzzlecolor CSS Document */

*{margin:0; padding:0;}

body {
	font-family:Tahoma, "Comic Sans MS", cursive;
	font-size:12px;
	color:#444;
	margin:0;
	background-color:#222;
}

h1 {margin:10px 0; font-size:16px; font-weight:normal;}
li {list-style:none;}
a {text-decoration:none; color:#087 !important;}

.w30 {width:30%;}
.w60 {width:60%;}
.w100 {width:100%;}

.m0 {margin:0;}
.mt10 {margin-top:10px;}
.mt20 {margin-top:20px;}
.ml5 {margin-left:5px;}
.mr5 {margin-right:5px;}
.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom:20px;}
.mb30 {margin-bottom:30px;}
.mh5 {margin-left:5px; margin-right:5px;}
.mv10 {margin-top:10px; margin-bottom:10px;}
.mv20 {margin-top:20px; margin-bottom:20px;}
.mcenter {margin-left:auto; margin-right:auto;}

.p0 {padding:0;}
.p5 {padding:5px;}
.p10 {padding:10px;}
.pv5 {padding-top:5px; padding-bottom:5px;}
.pv10 {padding-top:10px; padding-bottom:10px;}
.pv12 {padding:0 12px;}
.pv20 {padding-top:20px; padding-bottom:20px;}
.ph5 {padding-left:5px; padding-right:5px;}
.ph20 {padding-left:20px; padding-right:20px;}
.ph30 {padding-left:30px; padding-right:30px;}

.fs12 {font-size:12px;}
.fs13 {font-size:13px;}
.fs14 {font-size:14px;}
.fs16 {font-size:16px;}
.fs18 {font-size:18px;}
.fs20 {font-size:20px;}
.fs22 {font-size:22px;}
.white {color:#fff;}
.text-center {text-align:center;}
.text-right {text-align:right;}

.img-responsive {max-width:100%; height:auto; display:block;}

.bgWhite {background-color:#fff;}
.bgWhite2 {background-color:rgba(255, 255, 255, 0.2);}
.bgWhite7 {background-color:rgba(255, 255, 255, 0.7);}
.bgBlue {background-color:#90B8F4;}
.bgBlack1 {background-color:rgba(0, 0, 0, 0.1);}
.bgBlack2 {background-color:rgba(0, 0, 0, 0.2);}
.bgBlack4 {background-color:rgba(0, 0, 0, 0.4);}

.edgRad10 {border-radius:10px;}

.anim {transition:all 0.5s ease 0.1s;}

.hidden {display:none;}
		
.flL {float:left;}
.flR {float:right;}


.ui-page {max-width:400px;}
.ui-mobile label, .ui-controlgroup-label {font-size:14px; margin:5px 0;}


/* page */
#one, #five {color:#555; background-color:#9FD;}

.bgtest {background:url(bgtest.jpg) top left; background-size:auto 100%;}

.head-info {padding:10px; background-color:rgba(255, 255, 255, 0.8); border-bottom-left-radius:10px; border-bottom-right-radius:10px;}

.main {min-height:430px;}

.gamezone {padding:5px 0; height:210px; background-color:rgba(255, 255, 255, 0.5); border: 1px solid #999;}
.grid {width:100%; margin:0; padding:0; list-style-type:none; float:left;}
.gza, .gzc {width:3% !important;} .gzb {width:94% !important;}

.card {width:31%; height:80px; margin:5px 3px; border-radius:10px; cursor:pointer; float:left;}
.highlight {border:1px dashed rgba(0, 0, 0, 0.40); background-color:rgba(0 ,0, 0, 0.2); width:31%; height:78px; margin:5px 2px; float:left;}

.dgrbar {height:20px;}

.doverlay {position:absolute; top:0; left:0; height:100%; padding:0; background-color:rgba(0, 0, 0, 0.5); opacity:1;}
.result {padding:20px 30px; margin:32% auto 0; opacity:0;}

.back {padding:5px 10px; font-size:12px;}

	@media screen and (min-height : 565px) {
.main {min-height:500px;}
	}