html{height:100%;}
body{
    background: #e3e1dc;
    height:100%;
    min-height:100%;
}
body:before{
    content:'';
    position:absolute;
    left:0; right:0;
    top:0; height:7px;
    background-color:#517382;
    z-index:200;
}
header, article, footer{
    width:960px;
    margin:0 auto;
    position:relative;
}
header{
    height:145px;
    z-index:10;
}
header .game-name{
    width:192px;
    height:142px;
    background: url('../img/title-big.png') 0 0 no-repeat;
    float:left;
	margin-left:40px;
}
header .logo{
    width:206px;
    height:53px;
    background:url('../img/logo.png') 11px 15px no-repeat;
    margin-top:7px;
    margin-left:207px;
    float:left;
	border-left:2px solid #9fa0a4;
}

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

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

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

.guide{
    position:absolute;
    background:url() 0 0 no-repeat;
}
.message{
    position:absolute;
    background: transparent 0 0 no-repeat;
    overflow:hidden;
    text-indent:-999em;
    transition:transform 0.3s;
}

.message-intro{
    left:189px;
    top:-94px;
    background-image:url('../img/message-intro.png');
    width:708px;
    height:307px;
}
.message-difficulty{
    left:495px;
    top:-14px;
    background-image:url('../img/message-difficulty.png');
    width:413px;
    height:134px;
}
.message-help{
    left:106px;
    top:-39px;
    background-image:url('../img/message-help.png');
    width:183px;
    height:133px;
}
.message-win{
    left:30px;
    top:64px;
    background-image:url('../img/message-win.png');
    width:233px;
    height:114px;
}


.button{
    position:absolute;
    background: transparent 0 0 no-repeat;
    overflow:hidden;
    text-indent:-999em;
    transition:transform 0.3s;
    cursor:pointer;
}
.button-play{
    left:480px;
    top:239px;
    background-image:url('../img/button-play.png');
    width:313px;
    height:96px;
}
.button-or{
    left:692px;
    top:266px;
    background-image:url('../img/or.png');
    width:24px;
    height:42px;
    z-index:400;
}
.button-easy{
    left:555px;
    top:162px;
    background-image:url('../img/button-easy.png');
    width:313px;
    height:96px;
}
.button-hard{
    left:555px;
    top:315px;
    background-image:url('../img/button-hard.png');
    width:313px;
    height:96px;
}
.button-replay{
    left:-10px;
    top:234px;
    background-image:url('../img/button-replay.png');
    width:313px;
    height:96px;
}
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-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-1 .guide{
    width:479px;
    height:483px;
	background-image:url('../img/guide-step-1.png');
	left:-11px;
	top:-84px;
}
.step-2 .guide{
    width:403px;
    height:438px;
	background-image:url('../img/guide-step-2.png');
    left:-11px;
    top:-60px;
}
.step-3 .guide{
    width:403px;
    height:438px;
	background-image:url('../img/guide-step-3.png');
    left:-11px;
    top:-60px;
}
.win .step-3 .guide{background-image:url('../img/guide-step-3-win.png');}

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

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


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

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