@charset "utf-8";
/* CSS Document */

@import "reset.css";

* {margin:0; padding:0;}
html, body {background:#ffcb05 url(../images/bg-website.jpg) repeat-x; font:12px Verdana, Geneva, sans-serif; color:#000000;}

a img {border:0;}
a {text-decoration:none; cursor:pointer; color:#0b7312;}
a:active, a:focus {text-decoration:none;}
a:hover {text-decoration:underline;}

div.clear,html body span.clear {background:none; border:0; clear:both; display:block; float:none; font-size:0; margin:0; padding:0; overflow:hidden; visibility:hidden; width:0; height:0}
div.spacer {margin:5px 0; background:none; border:0; clear:both; display:block; float:none; overflow:hidden; visibility:hidden;}

p, li {line-height:170%;}
h1 {margin-bottom:30px; line-height:150%;}
h1 {font-size:24px;}
h2 {font-size:16px; color:#0b7312; margin-bottom:20px;}
h3 {font-size:14px;}

#limites {width:1002px; margin:20px auto 0 auto;}

	.sair { position:absolute; margin:0 0 0 880px;}

	.esquerda {float:left;}
	.direita {float:right;}

	a.logo {background:url(../images/logo-emc.png) no-repeat; display:block; text-indent:-9999px; width:214px; height:147px; margin:0 auto;}
	a.logo-projeto-agora {background:url(../images/logo-projeto-agora.gif) no-repeat; display:block; text-indent:-9999px; width:190px; height:73px; margin:5px auto 20px auto;}
	a.logo-editora-horizonte {background:url(../images/logo-editora-horizonte.gif) no-repeat; display:block; text-indent:-9999px; width:108px; height:38px; margin:5px auto 0 auto;}

	#caderno {background:url(../images/bg-caderno.png) 0 0 repeat-y;}
		#caderno #conteudo {width:620px; margin:0 0 0 330px;}
		#caderno #conteudo p {margin-bottom:15px;}
		#caderno #conteudo .content {width:560px; margin:25px auto -15px auto;}
		
	#caderno-topo {background:url(../images/bg-caderno-acabamento.png) left top; height:58px;}
	#caderno-rodape {background:url(../images/bg-caderno-acabamento.png) left bottom; height:58px; padding-bottom:25px;}
	
	#oestudo a.saiba-mais {position:absolute; background:none; width:100px; height:30px; margin:330px 0 0 50px; text-indent:-9999px; display:block}
	#jogo a.como-funciona {position:absolute; background:none; width:170px; height:50px; margin:230px 0 0 60px; text-indent:-9999px; display:block}
		
	#listaFiquePorDentro {margin:20px 20px 0 40px; list-style:none;}	
	#listaFiquePorDentro li {background:url(../images/ico-seta.gif) no-repeat 0 2px; font-size:13px; font-weight:bold; padding-left:25px; margin:10px 0;}
	#listaFiquePorDentro a {color:#0b7312; }
	
	#boxes { margin-top:50px;}
	
	.box-01 {background:url(../images/box-jogo-destaque.jpg) no-repeat; width:576px; height:385px; margin:0 auto 15px auto;}
	.box-01 .texto {margin:120px 0 0 376px; width:155px; height:200px; position:absolute; overflow:hidden; }
	
	.box-02 {background:url(../images/box-estudo.jpg) no-repeat; width:288px; height:280px;}
	.box-02 .texto {margin:70px 0 0 45px; width:205px; height:78px; position:absolute; overflow:hidden; }
	
	#polaroid {width:330px; position:relative; margin-bottom:20px;}
	#polaroid .polaroid-1, #polaroid .polaroid-2, #polaroid .polaroid-3 {display:block; position:absolute; text-indent:-9999px;} 
	#polaroid .polaroid-1 { background:url(../images/polaroid-1.png) no-repeat; width:207px; height:212px; z-index:3; right:5px; top:40px;}
	#polaroid .polaroid-2 { background:url(../images/polaroid-2.png) no-repeat; width:211px; height:215px; z-index:2; left:13px; top:100px;}
	#polaroid .polaroid-3 { background:url(../images/polaroid-3.png) no-repeat; width:182px; height:175px; z-index:1; left:18px; top:0; }
	
	#area-login h1 {background:url(../images/area-reservada-lateral.gif) no-repeat; width:183px; height:92px; margin:25px 0 0 0; display:block;}
	#area-login #formLogin {margin:20px 0 0 0;}

	#quizTopo {background:url(../images/bg-quiz.gif) 0 top; height:115px; width:537px; margin-top:30px;}
	#quizRodape {background:url(../images/bg-quiz.gif) 0 bottom; height:100px; width:537px; margin-top:-20px;}
	#quizQuadro {background:url(../images/bg-quiz-geral.gif) repeat-y; padding:0 90px; width:357px;}
	
	.lista-depoimentos li {border-bottom:#063 dashed 2px; margin-bottom:20px;}
	
	
	.popNegative {
		background: #f7e1e1 url(../images/popNegative.png) no-repeat 10px 50%;
		border: 1px solid #f7b8b8;
		padding: 10px 10px 10px 32px;
		margin-bottom:20px;
		}
		
	.popAviso {
		background: #fff8db url(../images/popWarning.png) no-repeat 10px 50%;
		border: 1px solid #eeda88;
		padding: 10px 10px 10px 32px;
		margin-bottom:20px;
		}
	
	#rodape {color:#004907; text-align:center; font-size:10px; font-weight:bold; margin:20px 0;}
	
	.correta { background:#fff url(../images/correta.png) no-repeat left ; color:#060; font-weight:bold; padding-left:25px;}
	.errada { background:#fff url(../images/errada.png) no-repeat left; color:#C00; padding-left:25px;}
	
/********************************
TITULOS
*********************************/
	
	body.fiquePorDentro h1 {background:url(../images/tit-fique-por-dentro.gif) no-repeat; text-indent:-9999px; height:43px; margin:0 0 0 30px;}
	body.estudo h1 {background:url(../images/tit-o-que-e-o-estudo.gif) no-repeat; text-indent:-9999px; height:43px; margin:0 0 0 30px;}
	body.comoParticipar h1 {background:url(../images/tit-como-participar.gif) no-repeat; text-indent:-9999px; height:43px; margin:0 0 0 30px;}
	body.kitEducacional h1 {background:url(../images/tit-kit-educacional.gif) no-repeat; text-indent:-9999px; height:43px; margin:0 0 0 30px;}
	body.quiz h1 {background:url(../images/tit-quiz.gif) no-repeat; text-indent:-9999px; height:43px; margin:0 0 0 30px;}
	body.depoimentos h1 {background:url(../images/tit-depoimentos.gif) no-repeat; text-indent:-9999px; height:43px; margin:0 0 0 30px;}
	body.quemSomos h1 {background:url(../images/tit-quem-somos.gif) no-repeat; text-indent:-9999px; height:43px; margin:0 0 0 30px;}
	body.contato h1 {background:url(../images/tit-contato.gif) no-repeat; text-indent:-9999px; height:43px; margin:0 0 0 30px;}
	body.jogo h1 {background:url(../images/tit-jogo-educativo.gif) no-repeat; text-indent:-9999px; height:90px; margin:0 0 0 20px;}
	body.fichaSemOficina h1 {background:url(../images/tit-ficha.gif) no-repeat; text-indent:-9999px; height:90px; margin:0 0 0 20px;}
	body.fichaComOficina h1 {background:url(../images/tit-ficha-oficina.gif) no-repeat; text-indent:-9999px; height:90px; margin:0 0 0 20px;}
	body.acesso h1 {background:url(../images/tit-acesso-restrito.gif) no-repeat; text-indent:-9999px; height:43px; margin:0 0 0 30px;}
	
/********************************
MENU
*********************************/
	
	#fitinha {background:url(../images/fitinha.png) no-repeat; width:106px; height:34px; position:absolute; text-indent:-9999px; z-index:2; margin:-50px 0 0 -5px;}
	
	#area-menu {width:237px; margin:-60px 0 0 87px; text-align:center; font-size:10px; color:#034e0d; font-weight:bold; float:left;}
		#area-menu #bg-menu {background:url(../images/bg-menu.png) repeat-y; padding:15px 0 80px 0;}
		#area-menu #bg-menu-rodape {background:url(../images/bg-menu-rodape.png) no-repeat left bottom; height:235px;}
	
		#area-menu #menu {width:173px; height:420px; margin:25px auto 0 auto; background:url(../images/menu.png) no-repeat left; list-style: none; }
		#area-menu #menu a {display:block; text-indent:-9999px;}
		
		#area-menu #menu .menu-1 a {height:33px;}
		#area-menu #menu .menu-9 a {height:37px;}
		
		#area-menu #menu .menu-2 a, #area-menu #menu .menu-3 a, #area-menu #menu .menu-4 a, #area-menu #menu .menu-5 a, #area-menu #menu .menu-6 a, #area-menu #menu .menu-7 a,
		#area-menu #menu .menu-8 a {height:50px;}
		
		#area-menu #menu a:hover {z-index:1000;}
		#area-menu #menu .menu-1 a:hover {background:url(../images/menu.png) right 0;}
		#area-menu #menu .menu-2 a:hover {background:url(../images/menu.png) right -33px;}
		#area-menu #menu .menu-3 a:hover {background:url(../images/menu.png) right -83px;}
		#area-menu #menu .menu-4 a:hover {background:url(../images/menu.png) right -133px;}
		#area-menu #menu .menu-5 a:hover {background:url(../images/menu.png) right -183px;}
		#area-menu #menu .menu-6 a:hover {background:url(../images/menu.png) right -233px;}
		#area-menu #menu .menu-7 a:hover {background:url(../images/menu.png) right -283px;}
		#area-menu #menu .menu-8 a:hover {background:url(../images/menu.png) right -333px;}
		#area-menu #menu .menu-9 a:hover {background:url(../images/menu.png) right -383px;}
		
		#area-menu #menu .selected {z-index:1000;}
		#area-menu #menu .menu-1 .selected {background:url(../images/menu.png) right 0;}
		#area-menu #menu .menu-2 .selected {background:url(../images/menu.png) right -33px;}
		#area-menu #menu .menu-3 .selected {background:url(../images/menu.png) right -83px;}
		#area-menu #menu .menu-4 .selected {background:url(../images/menu.png) right -133px;}
		#area-menu #menu .menu-5 .selected {background:url(../images/menu.png) right -183px;}
		#area-menu #menu .menu-6 .selected {background:url(../images/menu.png) right -233px;}
		#area-menu #menu .menu-7 .selected {background:url(../images/menu.png) right -283px;}
		#area-menu #menu .menu-8 .selected {background:url(../images/menu.png) right -333px;}
		#area-menu #menu .menu-9 .selected {background:url(../images/menu.png) right -383px;}
		
/********************************
SHOW HIDE
*********************************/
		
	table.datas-oficina {border-collapse: collapse; margin:20px 0 20px 20px; width:530px; font-size:11px;}
	table.datas-oficina th {font-weight:bold; padding:5px;}
	table.datas-oficina tr td {border:none; padding:5px;}
	
/********************************
PAGINADOR
*********************************/
	
	#indice{text-align:center; padding: 20px 0 0 0; float:right; margin-top:8px;}
	#paginacao{text-align:center; padding: 20px 0 0 0; float:left; font-size:11px;}
		.pag-atual{float:left; padding:5px; background:#030; color:#fff; margin:3px; border: 1px solid #060;}
		.pag-pontinhos{float:left; padding:5px; background:#063; color:#fff; margin:3px; border: 1px solid #060;}
		.pag-navegacao-off{float:left; padding:5px; background:#e7dab5; color:#94815b; margin:3px; border: 1px solid #d0c196;}
		
		.pag-link{float:left; padding:5px; background:#063; margin:3px; border: 1px solid #060;}
		.pag-link a{color:#fff; text-decoration:none;}
		.pag-link a:hover{text-decoration:underline;}
		
		.pag-navegacao{float:left; padding:5px; background:#063; margin:3px; border: 1px solid #060;}
		.pag-navegacao a{color:#fff; text-decoration:none;}
		.pag-navegacao a:hover{text-decoration:underline;}

	

/********************************
FORMULARIOS
*********************************/
	
	form label {display:block; line-height: 14px; padding: 0px 0px 5px 0px;}
	form input, form select, form textarea {border:#d9d3c6 solid 1px; padding:3px; color:#675f5b;}

	.esquecisenha { background:url(../images/ico-senha.gif) no-repeat; font-size:12px; font-weight:normal; margin:25px auto 0 auto; width:176px; height:16px;}
	.esquecisenha a {color:#6a3f0f; }
	
	input, select, textarea {font-size: 12px;}
	#form-acesso {width:170px; margin:0 auto;}
	#formLogin label {float:left; width:50px; padding-top:5px;}
	#formLogin .btnEntrar {width:50px;}
	#formLogin input {margin-bottom:5px; width:100px; padding:1px;}
	
	label.error {	/* remove the next line when you have trouble in IE6 with labels in list */
	color: red;	font-style: italic;	margin-left: 10px;	width: auto; display: inline;}
	
	div.error { display: none; }
	input {	border: 1px solid black; }
	input.checkbox { border: none }
	input:focus { border: 1px dotted black; }
	input.error, select.error { border: 1px dotted red; }
	form.cmxform .gray * { color: gray; }	
	
	form em {color:#C00;}
	
/* BOTOES SIMPLES */

.buttonWrapper,
.formButtonWrapper {float: left; height: 30px; margin-bottom: 20px; overflow: hidden; width: 49%; }
.formButtonWrapper {height: 30px; margin-bottom: 20px; overflow: hidden; width:100%; display: block;}
		
		.formButtonWrapper input,
		.formButtonWrapper.alt input {background:#060; border: 1px solid #030; color: #fff; cursor: pointer; display: block; float: left; font-family: "Lucida Grande", Verdana, Arial, sans-serif; font-size: 11px; line-height: 1.3em; margin: 0 7px 0 0; padding: 5px 10px 6px 10px; text-decoration: none;}