@font-face {
	font-family: 'museo500';
	src: url('fonts/museo500.eot');
	src: url('fonts/museo500.ttf');
}
@font-face {
	font-family: 'museo700';
	src: url('fonts/museo700.eot');
	src: url('fonts/museo700.ttf');
}

#interatividade, #intro, #jogo{
	background: #ea6282;
}

.tela{ width:800px; height:600px; }

.botao{
	position: absolute;
	width: 150px;
	height:32px;
	border-radius:10px;
	background: #fff;
	font-family: 'museo700';
	font-size:17px;
	color:#567d82;
	line-height:33px;
	box-shadow:rgba(0,0,0,.3) 0px 0px 15px;
	text-decoration: none;
	border-bottom: #dee7e8 4px solid; 
	text-align: center;
}
.botao.iniciar{
	width: 115px;
	height:45px;
	line-height:48px;
}
.botao.fechar{	
	height:45px;
	line-height:48px;
	text-indent: 0;
}


#intro blockquote{
	background: #ffda8c;
	width:210px;
	height:220px;
	padding:50px 30px;
	position: absolute;
	top:50%;
	left:60px;
	margin-top:-160px;
	display: table;
	text-align: center;
}
#intro blockquote p{
	color:#3c5269;
	display: table-cell;
	vertical-align: middle;
	font-family: 'museo500';
	font-size:18px;
	line-height:22px;
}
#intro blockquote .iniciar{
	bottom:-22px;
	left:50%;
	margin-left:-57.5px;
}

#intro .grafismo{
	background: url(img/grafismo.png) no-repeat 0 0;
	width:434px;
	height:507px;
	position: absolute;
	top:50%;
	right:0px;
	margin-top:-253.5px;
}

#jogo article{
	position: absolute; top:50%; left:50%;
	width:515px; height:450px;
	margin:-225px 0 0 -257px; 
}
#jogo article .casa, #jogo article .casa .item{
	position: absolute; width:137px; height:137px; 
	background: url(img/elementos.png) no-repeat;
}
#jogo article .casa[data-full=false]{ cursor:pointer; }
#jogo article .casa[data-full=true]{ cursor:auto; }
#jogo article .casa[data-status=off]{ background-position:0 -140px; }
#jogo article .casa[data-status=on]{ background-position:0 0; }
#jogo article .item[data-status=off]{ background:none; }
#jogo article .item[data-status=selected]{ background-position:0 -280px; }
#jogo article .item[data-status=o]{ background-position:0 -420px; }
#jogo article .item[data-status=x]{ background-position:0 -560px; }

#jogo article .conexao{
	position: absolute; width:117px; height:108px; 
	background: url(img/conexoes.png) no-repeat;
}
#jogo article .conexao[data-status=off]{ background:none; }
#jogo article .conexao[data-image=h]{ background-position:0 -326px; }
#jogo article .conexao[data-image=v]{ background-position:0 -215px; }
#jogo article .conexao[data-image=d1]{ background-position:0 0; }
#jogo article .conexao[data-image=d2]{ background-position:0 -108px; }

#jogo article #c0{ top:0; left:0; }
#jogo article #c1{ top:0; left:189px; }
#jogo article #c2{ top:0; right:0; }
#jogo article #c3{ top:157px; left:0; }
#jogo article #c4{ top:157px; left:189px; }
#jogo article #c5{ top:157px; right:0; }
#jogo article #c6{ bottom:0; left:0; }
#jogo article #c7{ bottom:0; left:189px; }
#jogo article #c8{ bottom:0; right:0; }

#jogo article #n0{ top:10px; left:100px; }
#jogo article #n1{ top:10px; left:290px; }
#jogo article #n2{ top:170px; left:100px; }
#jogo article #n3{ top:170px; left:290px; }
#jogo article #n4{ top:330px; left:100px; }
#jogo article #n5{ top:330px; left:290px; }
#jogo article #n6{ top:80px; left:10px; }
#jogo article #n7{ top:80px; left:200px; }
#jogo article #n8{ top:80px; left:388px; }
#jogo article #n9{ top:260px; left:10px; }
#jogo article #n10{ top:260px; left:200px; }
#jogo article #n11{ top:260px; left:388px; }
#jogo article #n12{ top:90px; left:104px; }
#jogo article #n13{ top:90px; left:293px; }
#jogo article #n14{ top:250px; left:104px; }
#jogo article #n15{ top:250px; left:296px; }


#parabens{
	background: rgba(0,0,0,.8);
}
#parabens article{
	width:320px; 
	padding:45px 35px;
	background:#ffda8c;
	display: table;
	position: absolute; 
	top:50%; 
	left:50%; 
	margin-left:-195px;
	text-align:center;
}
#parabens article p{
	display: table-cell;
	vertical-align: middle;
	font-family: 'museo500';
	font-size:18px;
	color:#333333;
}
#parabens article p strong{
	display: block;
	font-family: 'museo700';
	font-size:22px;
}
#parabens article .reiniciar{
	bottom: -30px;
	left:50%; 
	margin-left:-75px;
}

#pergunta{
	background:#ea6282 url(img/bg_pergunta.png) no-repeat center 60px;
}
#pergunta blockquote{
	width:445px; 
	height:225px; 
	padding:0 55px;
	background:#ffda8c;
	display: table;
	position: absolute; 
	top:40px; 
	left:50%; 
	margin-left:-277.5px;
	text-align:center;
}
#pergunta blockquote p{
	display: table-cell;
	vertical-align: middle;
	font-family: 'museo700';
	font-size:19px;
	color:#3c5269;
}

#pergunta ul{
	width:515px; 
	position: absolute; 
	top:285px; 
	left:50%; 
	margin-left:-257.5px;
}
#pergunta ul li{
	width:515px; 
	height:55px; 
	list-style:none;
	display: block;
	background: #ffd1dc;
	border-radius:8px;
	margin-bottom:20px;
	text-align:center;
	font-family: 'museo500';
	font-size:20px;
	color:#3c5269;
	line-height:55px; 
	cursor: pointer;
}
#pergunta ul li.selected{
	background: #ffda8c;
	color:#3c5269;
}
#pergunta ul li.correct{
	background: #418c30;
	color:#ffffff;
}
#pergunta ul li.should{
	background: #ffffff;
	color:#418c30;
}
#pergunta ul li.error{
	background: #991f1a;
	color:#ffffff;
}

#pergunta .verificar{
	bottom: 35px;
	left:50%; 
	margin-left:-75px;
}