html{height:100%;}
body{
    height:100%;
    min-height:700px;
	min-width:960px;
	background-color:#999;
}
body:before{
    content:'';
    position:fixed;
    left:50%; top:0; 
	width:200%;height:200%;
	margin-left:-80px;
    background-color:#cec1a6;
    z-index:0;
	transform-origin:top left;
	transform:rotate(-20deg);
}
body:after{
    content:'';
    position:fixed;
    left:0; right:0;
    top:0; bottom:0;
    z-index:-1;
	transition:background-color 0.3s;
}
strong{font-weight:bold;}
em{font-style: italic;}
header>div, article, footer{
    width:960px;
    margin:0 auto;
    position:relative;
}
header{
	position:relative;
    height:75px;
    z-index:100;
}
header:after{content:'';position:absolute;left:0;top:0;right:0;height:7px;background-color:#517382;z-index:100;}

header .game-name{
    width:290px;
    height:143px;
    background: url('../img/title-big.png') 0 0 no-repeat;
	position:absolute;
	top:0px;
	left:35px;
}
.game header .game-name{
    background: url('../img/title-small.png') 0 0 no-repeat;
}

header .logo{
    width:191px;
    height:37px;
    background:url('../img/logo.png') 0 0 no-repeat;
    left:435px;
    top:20px;
    position:absolute;
}

.no-text{overflow:hidden;text-indent:-999em;}

article{
    min-height:700px; /*555 + paddings*/
    height:100%;
    margin-top:-75px;
    padding-top:75px;
    padding-bottom:70px;
    z-index:50;
}

#steps{
    position:relative;
    width:100%;
    height:100%;
    /*overflow:hidden;*/
}

.guide{
    width:227px;
    height:502px;
    background:url('../img/guide-big.png') 0 0 no-repeat;
    position:absolute;
}
.message{
    position:absolute;
    background: transparent 0 0 no-repeat;
    overflow:hidden;
    text-indent:-999em;
    transition:transform 0.3s;
    z-index:50;
}

.message-intro{
    left:85px;
    top:145px;
    background-image:url('../img/message-intro.png');
    width:250px;
    height:147px;
}
.message-difficulty{
    left:93px;
    top:126px;
    background-image:url('../img/message-difficulty.png');
    width:245px;
    height:20px;
}
.message-select-image{
    left:135px;
    top:40px;
    background-image:url('../img/message-select-image.png');
    width:117px;
    height:16px;
}
.message-help{
    left:75px;
    top:65px;
    background-image:url('../img/message-help.png');
    width:221px;
    height:177px;
}
.message-win{
    left:-105px;
    top:333px;
    background-image:url('../img/message-win.png');
    width:364px;
    height:202px;
}


.button{
    position:absolute;
    background: transparent 0 0 no-repeat;
    overflow:hidden;
    text-indent:-999em;
    transition:transform 0.3s;
    cursor:pointer;
    z-index:100;
}
.button-play{
    left:60px;
    top:345px;
    background-image:url('../img/button-play.png');
    width:313px;
    height:96px;
}
.button-or{
    left:45px;
    top:218px;
    background-image:url('../img/or.png');
    width:18px;
    height:33px;
    z-index:400;
}
.button-easy{
    left:80px;
    top:169px;
    background-image:url('../img/button-easy.png');
    width:292px;
    height:59px;
}
.button-hard{
    left:80px;
    top:253px;
    background-image:url('../img/button-hard.png');
    width:292px;
    height:59px;
}
.button-replay{
    left:765px;
    top:54px;
    background-image:url('../img/button-replay.png');
    width:196px;
    height:198px;
}
.button-help{
    left:760px;
    top:500px;
    background-image:url('../img/button-help.png');
    width:52px;
    height:32px;
    z-index:9999;
}
.button-save{
    left:765px;
    top:279px;
    background-image:url('../img/button-save.png');
    width:196px;
    height:107px;
}
a.button:hover{
    animation: button-wiggle 0.6s infinite;
}
@keyframes button-wiggle{
    5%{transform:rotate(1deg)}
    25%{transform:rotate(4deg)}
    80%{transform:rotate(-3deg)}
    100%{transform:rotate(0deg)}
}


.step-0, .step-1,.step-2, .step-3{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transition:all 0.5s;
    transform: scale(0);
    opacity:0;
    transform-origin: 50% 50%;
    z-index:-100;
}
.step-0{
    opacity:1;
    transform: scale(1);
    z-index:0;
}
.at-step-1:after{background-color:#c0876a;}
.at-step-2:after{background-color:#8ca2ad;}
.at-step-3:after{background-color:#afa898;}
.finito:after{background-color:#915f7a;}


.step-3 .preview{
    width:504px;
    height:504px;
    position:absolute;
    left:230px;
    top:15px;
    opacity:0;
    z-index:-1;
    transition:opacity 0.3s;
}

.puzzle-item{display:none;}
.game .preview{opacity:0.01;}
.game .puzzle-item{display:block;}
.game .puzzle-grid{left:217px;}
.show-on-win,
.win .hide-on-win{transform:scale(0);}

.hide-on-win,
.win .show-on-win{transform:scale(1);}

.help .step-3 .preview{opacity:0.9;z-index:1000}



#steps .active-step{transform:scale(1);opacity:1;z-index:1;}

footer{
    margin-top:-70px;
    height:70px;
    color:#fff;
    font-size:15px; 
    font-family: 'Roboto Slab', serif;;
    z-index:100;
}
footer a{color:#fff;text-decoration:none;}
footer a:hover{color:#dbab3c;}