@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');
}
@font-face {
	font-family: 'myriadpro';
	src: url('fonts/myriadpro_regular.eot');
	src: url('fonts/myriadpro_regular.ttf');
}

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

#stage .credito.grande{
    display: block;
    /*background: rgba(255,0,0,.3);*/
    height: 15px;
    top: 266px;
    right: -183px;
}
#interatividade{
	background: #72c1cf;
}

.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{
	background:#72c1cf url(img/intro.png) no-repeat 0 0;
}
#intro blockquote{
	background: #6d74a5;
	width:210px;
	height:176px;
	padding:50px 30px;
	position: absolute;
	top:50%;
	left:60px;
	margin-top:-138px;
	display: table;
	text-align: center;
}
#intro blockquote p{
	color:#ffffff;
	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:427px;
	height:389px;
	position: absolute;
	top: 0;
    right: 22px;
}

#atividade{
	background:#72c1cf url(img/atividade.png) no-repeat 0 0;
}
#atividade blockquote{
	background: #6d74a5;
	width:220px;
	height:305px;
	padding:50px 30px;
	position: absolute;
	top:100px;
	left:35px;
	display: table;
	text-align: center;
}
#atividade blockquote p{
	color:#ffffff;
	display: table-cell;
	vertical-align: middle;
	font-family: 'museo500';
	font-size:19px;
	line-height:22px;
}
#atividade nav{
	width:280px;
	position: absolute;
	top:540px;
	left:35px;
	text-align:center;
}
#atividade nav span{
	width:22px;
	height:22px;
	display:inline-block;
	background: url(img/marcadores.png) no-repeat -24px 0;
}
#atividade nav span.active{
	background-position:0 0;
}
#atividade nav span.correct{
	background-position:-48px 0;
}
#atividade nav span.error{
	background-position:-72px 0;
}
#atividade ul{
	width:415px;
	position: absolute;
	top:40px;
	right:35px;
}
#atividade ul li, #popup blockquote{
	width:315px;
	height:100px;
	padding:0 30px 0 70px;
	border-radius:16px;
	background: #ddf0f4 url(img/list.png) no-repeat 19px center;
	margin-bottom:20px;
	list-style:none;
	display: table;
	position: relative; 
}
#atividade ul li p, #popup blockquote p{
	display: table-cell;
	vertical-align: middle;
	font-family: 'myriadpro';
	font-size:18px;
    line-height: 20px;
	color:#3c819e;
}
#atividade ul li{	
	cursor:pointer;
}
#atividade ul li.selected{
	background: #6d74a5 url(img/list_selected.png) no-repeat 19px center;
}
#atividade ul li.correct{
	background: #6cab44 url(img/list_selected.png) no-repeat 19px center;
	cursor:auto;
}
#atividade ul li.solved{
	background: #7c8c96 url(img/list_selected.png) no-repeat 19px center;
	cursor:auto;
}
#atividade ul li.error{
	background: #d64b4b url(img/list_selected.png) no-repeat 19px center;
	cursor:auto;
}
#atividade ul li.error_solved{
	opacity: .35;
	cursor:auto;
}
#atividade ul li.selected p, #atividade ul li.correct p, #atividade ul li.error p, #atividade ul li.solved p{
	color:#fff;
}
#atividade ul li .interrogacao{
	position: absolute;
	background: url(img/interrogacao.png) no-repeat 0 0;
	width: 39px;
	height:39px;
	top:26px; 
	right:-20px; 
	display:none;
}
#atividade ul li.error .interrogacao{
	display:block;
}

#atividade .avancar{
	bottom:25px; 
	right:155px;
}
#atividade .verificar{
	bottom:25px; 
	right:155px;
}
#atividade .refazer{
	bottom:25px;  
	right:240px;
}
#atividade .resposta{
	bottom:25px; 
	right:70px;
}

#popup{
	background: rgba(0,0,0,.8);
}
#popup article{
	width:485px; 
	height:270px; 
	padding:40px 45px;
	background:#6d74a5;
	position: absolute; 
	top:50%; 
	left:50%; 
	margin: -175px 0 0 -287.5px;
}
#popup article .fechar{
    top: auto;
	bottom: -30px;
	left:50%; 
	margin-left:-80px;
}
#popup blockquote{
	background: #ffffff url(img/list_error.png) no-repeat 19px center;
	position: absolute; 
	top:40px; 
	left:50%; 
	margin-left: -242.5px;
	width:385px;
	height:115px;
	cursor: auto;
}
#popup blockquote p{
	color:#d64b4b;
	font-weight:bold;
}
#popup div{
	position: absolute; 
	top:180px; 
	left:50%; 
	margin-left: -200px;
	width:400px;
	text-align: center;
}
#popup div p{
	font-family: 'myriadpro';
	color:#fff;
	font-size:18px;
	line-height:20px;
}

#parabens{
	background: rgba(0,0,0,.8);
}
#parabens article{
	width:340px; 
	height:95px; 
	padding:35px 35px 45px 35px;
	background:#6d74a5;
	display: table;
	position: absolute; 
	top:50%; 
	left:50%; 
	margin: -82.5px 0 0 -195px;
	text-align:center;
}
#parabens article.maior{
	height:125px; 
}
#parabens article p{
	display: table-cell;
	vertical-align: middle;
	font-family: 'museo500';
	font-size:18px;
	color:#ffffff;
}
#parabens article p strong{
	display: block;
	font-family: 'museo700';
	font-size:22px;
}
#parabens article .reiniciar{
	top: 145px;
	left:50%; 
	margin-left:-80px;
}

#parabens article.maior .reiniciar{
	top:175px; 
}


#atividade ul li .letra{
	position: absolute;
	left: 0px;
	top: 37px;
	width: 51px;
	text-align: center;
	font-size: 20px;
	color: #5a84a8;
	background: #ddf0f4;
}

#atividade ul li.selected .letra{color: #fff; background: #6d74a5;}
#atividade ul li.correct .letra{color: #fff; background: #6cab44;}
#atividade ul li.error .letra{color: #fff; background: #d64b4b;}
#atividade ul li.solved .letra{color: #fff; background: #7c8c96;}
#atividade ul li.error_solved .letra{ cursor: auto; background: #e3eff7;}

#popup .letra{
	position: absolute;
    left: 246px;
    top: 85px;
    width: 49px;
    text-align: center;
    font-size: 20px;
    color: #d64b4b;
    background: #ffffff;
}