html, body
{
	padding: 0;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}

#capa {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #00A09A;
	z-index: 50;
}

#abrir_cartilha {
	position: absolute;
	right: 340px;
	top: 535px;
	z-index: 60;
	width: 207px;
	height: 54px;
	background-image: url(../imagens/bt_abrir_cartilha.png);
	cursor: pointer;
}

#area_total {
	position: relative;
	width: 800px;
	height: 600px;
	margin-left: 10px;
}

#area_conteudo {

}

#logo_camara {
	position: absolute;
	top: 5px;
	left: 5px;
}

#paginacao {
	position: absolute;
	top: 10px;
	right: 108px;
	width: 96px;
	height: 29px;
	background: url(../imagens/bg_paginacao.png) no-repeat top center;
}

.paginas {
	color: #454545;
	line-height: 30px;
	text-align: right;
	margin-right: 30px;
}

#bt_menu {
	position: absolute;
	top: 8px;
	right: 30px;
	width: 36px;
	height: 34px;
	background: url(../imagens/bt_menu.png) no-repeat top center;
}

#bt_menu:hover {
	background-position: bottom center;
}

#menu {
	display: none;
}

#topo {
	width: 100%;
	height: 46px;
	background-image: url(../imagens/bg_topo.png);
	background-repeat: no-repeat;
	background-color: #2CC34C; /* DEVE SER A MESMA DO PRIMEIRO ITEM DO ARRAY DE CORES DOS CAPITULOS. */
	padding-left: 50px;
	padding-top: 18px;
	color: #FFFFFF;
	
	/* Evitar que o padding aumente o tamanho da div. Não funciona no IE 7 pra baixo.*/
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

#conteudo {
	position: relative;
	width: 100%;
	height: 554px; /* Altura da #area_total - altura do #topo (contando a borda, se houver) */
	background-color: #FBFBFB;
}

#centro {
	position: relative;
	float: left;
	width: 720px;
	height: 100%;
	overflow: hidden;
}

#esquerda {
	position: relative;
	float: left;
	width: 40px;
	height: 100%;
	background-color: #F8F8F8;
}

#direita {
	position: relative;
	float: left;
	width: 40px;
	height: 100%;
	background-color: #F8F8F8;
}

#telas {
	position: relative;
	height: 100%;
}

.tela {
	position: relative;
	float: left;
	height: 100%;
	border-right: 1px solid transparent;
	padding: 20px 20px 30px 20px;
	
	/* Evitar que o padding aumente o tamanho da div. Não funciona no IE 7 pra baixo.*/
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.setas_esq_dir {
	position: absolute;
	width: 48px;
	height: 80px;
	top: 40%;
	background-image: url(../imagens/bt_prox_ant.png);
	background-repeat: no-repeat;
	cursor: pointer;
}

#seta_esquerda {
	left: -8px;
	background-position: top left;
	display: none;
}

#seta_direita {
	right: -8px;
	background-position: top right;
}

#seta_esquerda:hover {
	background-position: bottom left;
}

#seta_direita:hover {
	background-position: bottom right;
}

#borda_esquerda {
	float: left;
	width: 20px;
	height: 100%;
	background-color: #CCCCCC;
}

#borda_direita {
	float: right;
	width: 20px;
	height: 100%;
	background-color: #CCCCCC;
}

.menu_item {
	background: url(../imagens/bg_item_menu.png) no-repeat top center;
	width: 242px;
	height: 80px;
	margin-top: -1px;
	padding: 8px 14px 8px 18px;
	cursor: pointer;
	color: #FFFFFF;
	
	/* Evitar que o padding aumente o tamanho da div. Não funciona no IE 7 pra baixo.*/
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.menu_item:hover, .menu_selecionado {
	background-position: bottom center;
}

.menu_item_texto {
	margin-left: 20px;
}

.box_cor_capitulo {
	float: left;
	width: 10px;
	height: 10px;
	margin: 3px 6px 0 0;
}

#popup {
	position: absolute;
	width: 816px;
	height: 554px;
	left: -8px;
	z-index: 1;
	display: none;
}

#popup_conteudo {
	float: left;
	width: 800px;
	height: 100%;
	background-color: #CECFCD;
	padding: 20px;
	text-align: center;
	
	
	/* Evitar que o padding aumente o tamanho da div. Não funciona no IE 7 pra baixo.*/
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

/* Evita que os botões de navegação das telas sejam clicados. */
#popup_esquerda, #popup_direita {
	float: left;
	width: 8px;
	height: 100%;
}

.popup_tela {
	display: none;
}


#bt_fechar {
	position: absolute;
	top: 8px;
	right: 30px;
	width: 36px;
	height: 34px;
	background: url(../imagens/bt_fechar.png) no-repeat top center;
	display: none;
}

#bt_fechar:hover {
	background-position: bottom center;
}

#debug {
	position: absolute;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	background-color: #CCCCCC;
	z-index: 20;
	padding: 10px;
	top: 200px;
	left: 200px;
	display: none;
}

#caixa_info_menu {
	position: absolute;
	width: 162px;
	height: 92px;
	padding: 12px;
	top: 50px;
	left: 587px;
	z-index: 10;
	font-size: 18px;
	color: #F9F9F9;
	border: 1px solid #333333;
	background-color: #787574;
	
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	
	-webkit-box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 2px 6px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 2px 6px 0px rgba(50, 50, 50, 0.75);
	
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #787574),
		color-stop(1, #302C2C)
	);
	background-image: -o-linear-gradient(bottom, #787574 0%, #302C2C 100%);
	background-image: -moz-linear-gradient(bottom, #787574 0%, #302C2C 100%);
	background-image: -webkit-linear-gradient(bottom, #787574 0%, #302C2C 100%);
	background-image: -ms-linear-gradient(bottom, #787574 0%, #302C2C 100%);
	background-image: linear-gradient(to bottom, #787574 0%, #302C2C 100%);
}

#caixa_info_menu:after, #caixa_info_menu:before {
	position: absolute;
	border: solid transparent;
	content: ' ';
	width: 0;
	height: 0;
	bottom: 100%;
}
	
#caixa_info_menu:after {
	border-width: 10px;
	border-bottom-color: #787574;
	right: 12px;
}
	
#caixa_info_menu:before {
	border-width: 11px;
	border-bottom-color: #333333;
	right: 11px;
}
/*
#caixa_info_menu {
	position: absolute;
	background-color: #FFFFCC;
	width: 162px;
	height: 92px;
	padding: 12px;
	top: 50px;
	left: 587px;
	z-index: 10;
	border: 1px solid red;
	font-size: 18px;
	font-weight: bold;
}

#caixa_info_menu:after, #caixa_info_menu:before {
	position: absolute;
	border: solid transparent;
	content: ' ';
	width: 0;
	height: 0;
	bottom: 100%;
}
	
#caixa_info_menu:after {
	border-width: 10px;
	border-bottom-color: #FFFFCC;
	right: 12px;
}
	
#caixa_info_menu:before {
	border-width: 11px;
	border-bottom-color: red;
	right: 11px;
}
*/