html, body{
margin:0px;padding:0px;height:100%;width:100%;font-family:"Times New Roman",Serif;font-size:15px;
background-color:#edc;background-size:15px 100%;
overflow:hidden;
}
/* Main Menu Setting */
body>.main{
width:100%;height:100%;display:none;
}
.main>.title{
width:100%;text-align:center;opacity:1;margin-top:5px;
}
.main>.title>.subtitle{
color:#621;font-size:13px;position:relative;top:-15px;left:0px;
}
.main>.menu{
width:100%;text-align:center;opacity:1;
}
.main>.menu>.item{
background:transparent url("/images/main-menu.png") no-repeat scroll center top;background-size:200px 35px;
width:200px;height:35px;line-height:35px;margin:10px auto;font-size:22px;font-weight:bold;color:#fff;
}
.main>.menu>.disabled{
color:#a87;
}
.main>.help{
z-index:3;position:absolute;top:0px;right:0px;width:30px;height:30px;
}
/* Game Setting */
body>.game{
width:100%;height:100%;display:none;
}
.game>.board{
margin:0px auto;margin-top:40px;padding-left:6px;padding-top:6px;
}
.game>.board>.block{
float:left;border:3px solid #721;border-right-width:0px;border-bottom-width:0px;
}
.game>.board>.block>.cell{
float:left;text-align:center;border:1px solid #310;padding:3px;
}
.game>.board>.block>.blank{
color:#f00;
}
.game>.board>.block>.selected{
box-shadow:0px 0px 12px #080 inset;
}
.game>.board>.block>.highlight{
box-shadow:0px 0px 12px #8bf inset;
}
.game>.board>.block>.cell>.note{
width:100%;height:100%;color:#654;
}
.game>.number-buttons{
margin:7px auto;padding-left:10px;opacity:0.3;
}
.game>.number-buttons>.number-button{
float:left;text-align:center;font-weight:bold;color:#fff;
border:2px outset #721;border-radius:5px;margin-left:-5px;background-color:#721;
}
.game>.number-buttons>.bottom{
margin-top:15px;
}
.game>.number-buttons>.disabled{
color:#843;
}
.game>.think-number-buttons{
width:95%;margin:8px auto;margin-top:5px;text-align:center;font-size:18px;opacity:0.3;
}
.game>.think-number-buttons>.number-button{
padding:2px 6px;margin:0px 2px;font-weight:bold;border:1px solid #caa;color:#521;
}
.game>.think-number-buttons>.noted{
background-color:#caa;
}
/* Stats Setting */
body>.stats{
width:100%;height:100%;display:none;
}
.stats>.title{
height:25px;line-height:25px;font-weight:bold;color:#621;background-color:#fff;width:90%;min-width:300px;margin:0px auto;text-align:center;opacity:0.7;
border-top-left-radius:5px;border-top-right-radius:5px;
}
.stats>.level{
height:100px;width:90%;min-width:300px;margin:10px auto;margin-top:0px;line-height:25px;text-align:center;border-top:1px solid #821;
}
.stats>.level>.col{
float:left;
}
.stats>.level>.victory{
width:21%;
}
.stats>.level>.seconds{
width:41%;
}
.stats>.level>.errors{
width:37%;
}
.stats>.level>.col>.title{
font-weight:bold;
}
/* Settings Setting */
body>.settings{
width:100%;height:100%;display:none;
}
.settings>.option{
padding:5px 0px;height:35px;line-height:35px;font-size:18px;width:90%;min-width:280px;margin:5px auto;
}
.settings>.option>.title{
float:left;width:40%;text-align:right;font-weight:bold;
}
.settings>.option>.value{
float:right;width:55%;height:25px;text-align:left;
}
.settings>.option>.range{
background:#fff url("/images/green.png") no-repeat scroll left top;background-size:10% 100%;opacity:0.7;
}
.settings>.option>.value>.checkbox{
transform:scale(1.75);-webkit-transform:scale(1.75);
}
/* Sub-Menu Setting */
.sub-menu{
z-index:1;position:absolute;top:0px;left:0px;height:40px;width:100%;margin-left:10px;
}
.sub-menu>.item{
margin-top:-30px;margin-left:2px;margin-right:2px;float:left;
}
.sub-menu>.timer{
float:right;width:150px;text-align:center;height:40px;line-height:40px;
}
/* Dialog Setting */
body>.dialog{
z-index:3;position:absolute;left:15%;top:15%;width:70%;height:40%;display:none;
border-radius:10px;border:2px solid #600;background-color:#fcc;opacity:0.95;box-shadow:0px 0px 15px #fff;
}
.dialog>.title{
font-size:1.2em;font-weight:bold;color:#600;text-shadow:0px 0px 10px #888;text-align:center;margin:15px 0px;
}
.dialog>.message{
line-height:25px;width:90%;margin:5px auto;text-align:center;
}
.dialog>.buttons{
width:100%;margin:10px auto;text-align:center;
}
.dialog>.buttons>button{
font-size:1.2em;font-weight:bold;background-color:#600;border:1px solid #a88;padding:5px 6px;border-radius:4px;color:#fff;margin:0px 3px;
}
/* Victory Setting */
body>.victory-win{
z-index:3;position:absolute;left:15%;top:15%;width:70%;height:50%;animation:expand 0.5s;-webkit-animation:expand 0.5s;display:none;
font-size:1.2em;border-radius:10px;border:2px solid #521;background-color:#fed;opacity:0.95;box-shadow:0px 0px 15px #fff;
}
.victory-win>.title{
font-size:2em;font-weight:bold;color:#521;text-shadow:0px 0px 10px #888;text-align:center;margin:15px 0px;
}
.victory-win>.record{
height:30px;line-height:30px;width:90%;min-width:180px;margin:5px auto;text-align:center;
}
.victory-win>.record>.title{
font-weight:bold;
}
.victory-win>.message{
color:#f00;margin:10px auto;text-align:center;
}
/* Expand */
@keyframes expand{
0%{left:50%;top:50%;width:0%;height:0%;}
100%{left:15%;top:15%;width:70%;height:50%;}
}
@-webkit-keyframes expand{
0%{left:50%;top:50%;width:0%;height:0%;}
100%{left:15%;top:15%;width:70%;height:50%;}
}
/* Fade In */
.fadein{
animation:fadein 2.5s;-webkit-animation:fadein 2.5s;
}
@keyframes fadein{
0%{opacity:0}
100%{opacity:1}
}
@-webkit-keyframes fadein{
0%{opacity:0}
100%{opacity:1}
}
/* Shake Button */
.shake{
animation:shake 0.3s;-webkit-animation:shake 0.3s;
}
@keyframes shake{
8%,41%{transform:translateX(-4px);}
25%,58%{transform:translateX(4px);}
75%{transform:translateX(-2px);}
92%{transform:translateX(2px);}
0%,100% {transform: translateX(0);}
}
@-webkit-keyframes shake{
8%,41%{transform:translateX(-4px);-webkit-transform:translateX(-4px);}
25%,58%{transform:translateX(4px);-webkit-transform:translateX(4px);}
75%{transform:translateX(-2px);-webkit-transform:translateX(-2px);}
92%{transform:translateX(2px);-webkit-transform:translateX(2px);}
0%,100% {transform: translateX(0);-webkit-transform: translateX(0);}
}
/* Stretch Menu */
.stretch{
animation:stretch 0.3s;-webkit-animation:stretch 0.3s;
}
@keyframes stretch{
0%{margin-top:-30px}
75%{margin-top:-10px}
100%{margin-top:-20px}
}
@-webkit-keyframes stretch{
0%{margin-top:-30px}
75%{margin-top:-10px}
100%{margin-top:-20px}
}
/* General Use */
.clear{
clear:both;
}
.mask{
z-index:2;position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:transparent;display:none;
}
.loading{
z-index:3;position:absolute;top:0px;left:0px;width:100%;height:60%;margin-top:30%;
font-size:1.5em;font-weight:bold;text-align:center;text-shadow:0px 0px 10px #c90;
}
.help-detail{
width:90%;max-width:300px;height:90%;max-height:450px;display:none;text-align:center;margin:0px auto;margin-top:5%;opacity:0.9;
}
.help-detail>.help-image{
width:100%;height:100%;border-radius:10px;border:2px solid #000;box-shadow:0px 0px 10px #fff;opacity:0.9;
}