/* CSS PADRAO DO SITE 
ESTILOS UNICOS POR PAGINA DEVEM SER CHAMADOS POR ID E ESTILOS REPETIDOS POR CLASS
--------------------------------------------------------------------------------*/


/* Define todos os estilos gerais das páginas (Nao é reconhecido pelo Mozilla) */
body {
	font: normal 12px/13px Arial;
	color: #FFF;
	padding: 0px;
	margin: 0px;
	background: url('../images/bg.gif') #2F5378 repeat-x 0px 0px;
	text-align: center;
	width: 100%;
} 


/* Define todos os estilos gerais das divs, tds, selects e inputs */
div, td, select, input,a {
	font: normal 12px/13px Arial;
	color: #FFF;
	text-decoration: none;
}

/* Controla todo o conteudo da pagina */
h1 {
}

h2 {
}

img{
	border: 0px;
}


form {
	margin: 0px;
	padding: 0px;
}


a{

}

a:hover{

}

.clear{
	clear: both;
}

.hidden{
	visibility: hidden;
}

.none{
	display: none;
}

.block{
	display: block;
}

p {
	margin: 0px;
	padding: 0px;
}

/* Criada para centralizar o conteudo no Firefox */
#global {
	width: 100%;
	text-align: center;
}

.floatLeft {
	float: left;
}

.floatLeftImg{
	float:left;
	margin: 0px 10px 10px 0px;
}

.floatRight{
	float:right;
}

.floatRightImg{
	float:right;
	margin-left: 10px;
	margin-bottom: 10px;	
}


/* O padrao da tag lista deve ser ser margin ou padding igual a zero, caso queira colocar um valor diferente dessa em uma lista crie uma nova class usando o !important para diferenciar */

ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

li {
	margin: 0px;
	padding: 0px;
}

.marcado {
	font-weight: bold;
	color: #fff!important;
}

.desmarcado {
	font-weight: normal;
}

/* TOPO 
--------------------------------------------------------------------------------*/

#acessibilidade{
	background: url('../images/topo_acessibilidade.gif') no-repeat center top;
	width: 100%;
	height: 25px;
	margin: auto;
}

#acessibilidade #cotnrolaAcessibilidade{
	width: 1000px;
	text-align: center;
}

#acessibilidade #cotnrolaAcessibilidade a{
	display: block;
	float: right;
	width: 350px;
	margin: 6px 0px 0px 0px;
}


#topo{
	background: url('../images/topo.jpg') no-repeat center top;
	height: 56px;
}

#topo #controlaTopo{
	width: 900px;
	text-align: left;
	margin: auto;
}

#topo #logo{
	float: left;
	padding: 5px 30px 0px 0px;
}


#topo #menuSuperior{
	float: left;
	width: 640px;	
}

#topo #menuSuperior #linksSuperiores{
	float: right;
	width: 198px;
	text-align: left;
	margin-bottom: 0px;
}

#topo #menuSuperior #linksSuperiores li{
	border-right: 1px solid #FFF;
	padding: 3px 10px 0px 10px;
}

#topo #menuSuperior #linksSuperiores .ultimo{
	padding: 3px 0px 0px 11px!important;
	border: none;
}

#topo #menuSuperior ul li{
	float:left;
}

#topo #menuTopo li{
	background: url('../images/separador.gif') no-repeat right 10px;
	padding: 0px 8px 0px 9px;
}

#topo #menuTopo .ultimo{
	padding: 0px 0px 0px 9px!important;
	background: none;
}

/* MENU 
--------------------------------------------------------------------------------*/


/* CONTEUDO 
--------------------------------------------------------------------------------*/

#conteudo{
	width: 100%;
	height: 570px;
	text-align: center;
	position: relative;
	background: url('../images/chao.jpg') no-repeat center bottom;
}

#bgFloaters{
	background-color: #0f263e;
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 10;
	filter:alpha(opacity=70);
	-moz-opacity:.70;
	opacity:.70;
}

#controlaHome{
	width: 900px;
	margin: auto;
	text-align: left;
	position: relative;
}

#controlaConteudo{
	position: absolute;
	top: -454px;
	left: 0px;
	width: 880px;
	height: 560px;
	padding: 15px 20px 15px 0px;
	text-align: left;
	display: none;
	background-color: #2a4969;
}

#conteudo #fechar{
	float: right;
}

#conteudo #fechar img{
	vertical-align: middle; 
}

.fechar img{
	vertical-align: middle; 
}

/*--SCROLL -- */
#box{
	width: 880px;
}

#area_visivel_scroll{
	width:850px;
	height:500px;
	overflow:hidden;
	float:left;
	position:relative;
	margin-rigth: 10px;
	z-index: 4;
}

#conteudo_scroll{
	position:relative;
	padding: 0px 10px 0px 5px;
	z-index: 3;
	width: 100%px;
}

#scroll{
	float:left;
	text-align: center;
	margin: auto;
	z-index: 2;
	width: 22px;
}

#scroll div img{
	margin-left: 5px;
}

#trilho_scroll{
	height:450px;
	background: url('../images/linha_scroll.gif') repeat-y center top;
	width: 20px;
	position:relative;
	left:0px;
	text-align: left;
	z-index: 1;
}

#flashMetro{

}

.negativo{
	margin-left: -900px;
}

/*RODAPE
--------------------------------------------------------------------------------*/
#rodape, #rodape a{
	margin: 40px 0px 0px 0px;	
	font: normal 11px/11px Arial;
	color: #93A9BD;
	text-decoration: none;
}



/* CSS DA PÁGINA HISTÓRIA EM TEMAS
----------------------------------------------------------------------------------*/
#textoHistoriaEmTemas {
	float: left;
}
		
#topoInterno {
	float: left;
	padding: 0px 0px 30px 0px;
}

#menuLateral {
	float: left;
	width: 145px;
	padding: 0px 10px 0px 5px;
}

#menuLateral ul {
	padding: 0px;
	margin: 0px;
}

#menuLateral ul li {
	padding: 1px 0px 1px 0px;
	
}  	

#menuLateral ul li a {
	display: block;
	width: 125px;
	text-decoration: none;
}

#menuLateral ul li a span {
	display: block;
	padding-left: 8px;
}   	

#tituloEmImagem {
	float: left;
	width: 640px;
	border-bottom: 1px solid #667e99;
}

.faixa {
	float: left;
	width: 640px;
	background-color: #415c79; 
	height: 20px;
}

#conteudoPrincipal {
	float: left;
	width: 640px;
	padding: 15px;
	background-color: #385573;
	
}

.tituloDoTema {
	font: normal 15px/14px Arial;
	display: bolck;
	float: left;
	font-weight: bold;
	width: 300px;
	padding: 20px 0px 10px 15px;
}

.primeiroInfo {
	display: block;
	float: left;
	text-align: justify;
	width: 620px;
	padding-left: 15px;
}

#guardaTopicos {
	float: left;
	width: 550px;
	padding: 20px 0px 0px 40px;
}

.topicos {
	float: left;
	padding: 0px 0px 10px 0px;
	width: 540px;

}

.ajustaSetinha {
	float: left;
	margin: 3px 5px 0px 0px;
}

.ajustaTextoTopicos {
	display: block;
	float: left;
	font-weight: bold;
	width: 500px;
	padding: 0px 0px 5px 0px;
}

.linha {
	display: block;
	width: 541px;
	border-bottom:1px solid #667e99;
	text-align: right;
	margin-top: -20px;
}

.botaoFechar {
	float: left;
	margin: 0px 0px 0px 0px;
}

.ajustaTextosDentroBox {
	display: block;
	float: left;
	width: 405px;
	text-align: justify;
}

.ajustaTextosDentroBoxVideos{
	width:405px;
	display: block;
	float: left;
	text-align: justify;
}

.ajustaTextosDentroBoxVideos ul{
	margin: 0px 0px 0px 5px;
	width:400px;
}

.ajustaTextosDentroBoxVideos ul li{
	float:left;
	width:130px;
	margin: 0px 0px 12px 0px;
}

.ladoDireitoDentroDoBox{
	float: left;
	text-align: center;
	width: 105px;
	margin-left: 5px;
}

.ladoDireitoDentroDoBox img{
	cursor: pointer;
}

.textoAbaixoDaFoto{
	display: block;
}

.textoAbaixoDaFoto a{
	color: #b3d2f1;
	text-decoration: none;
	font-size: 11px;
}

.geralDoBox {
	display: none;
	float: left;
	width: 523px;
	border-left:1px solid #667e99;
	border-bottom:1px solid #667e99;
	border-right:1px solid #667e99;
	margin: 0px 0px 0px 0px;
	padding: 8px;
}


.um .marcado {
	background: url('historia_em_temas/images/metro_linha_azul.gif') #44668B no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.um .desmarcado {
	background: url('historia_em_temas/images/metro_linha_azul.gif') no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.dois .marcado {
	background: url('historia_em_temas/images/metro_linha_azul.gif') #44668B no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.dois .desmarcado {
	background: url('historia_em_temas/images/metro_linha_azul.gif') no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}	
	
.tres .marcado {
	background: url('historia_em_temas/images/metro_linha_verde.gif') #44668B no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.tres .desmarcado {
	background: url('historia_em_temas/images/metro_linha_verde.gif') no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.quatro .marcado {
	background: url('historia_em_temas/images/metro_linha_vermelha.gif') #44668B no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.quatro .desmarcado {
	background: url('historia_em_temas/images/metro_linha_vermelha.gif') no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.cinco .marcado {
	background: url('historia_em_temas/images/metro_linha_amarela.gif') #44668B no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.cinco .desmarcado {
	background: url('historia_em_temas/images/metro_linha_amarela.gif') no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}


.seis .marcado {
	background: url('historia_em_temas/images/metro_linha_lilas.gif') #44668B no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.seis .desmarcado {
	background: url('historia_em_temas/images/metro_linha_lilas.gif') no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.sete .marcado {
	background: url('historia_em_temas/images/metro_linha_azul.gif') #44668B no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.sete .desmarcado {
	background: url('historia_em_temas/images/metro_linha_azul.gif') no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.oito .marcado {
	background: url('historia_em_temas/images/metro_linha_azul.gif') #44668B no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.oito .desmarcado {
	background: url('historia_em_temas/images/metro_linha_azul.gif') no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.nove .marcado {
	background: url('historia_em_temas/images/metro_linha_azul.gif') #44668B no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.nove .desmarcado {
	background: url('historia_em_temas/images/metro_linha_azul.gif') no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.dez .marcado {
	background: url('historia_em_temas/images/metro_linha_azul.gif') #44668B no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.dez .desmarcado {
	background: url('historia_em_temas/images/metro_linha_azul.gif') no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.legendaVideos{
	display: block;
	padding: 10px 0px 10px 0px;
}

.legendaVideos a{
	color: #b3d2f1;
	text-decoration: none;
	font-size: 11px;
}

/* CSS DA PÁGINA DE LINHA DO TEMPO
----------------------------------------------------------------*/
#principalLinhaTempo {
	float: left;
	width: 828px;
}

#infoLateralDireito {
	display: block;
	float: right;
	margin-top: 25px;
}

#guardaLinhas {
	float: left;
	padding: 20px;
}

.ajustaPosicaoDaLinha {
	float: left;
	margin-bottom: 10px;
}

.ajustaPosicaoDaLinha a{
	display: block;
	width: 118px;
	float: left;
	
}

.infoDentroDaLinha {
	display: block;
	float: left;
	width: 524px;
	padding: 15px 10px 15px 15px;
}

.infoDentroDaLinhaGrande{
	padding: 0px 10px 15px 15px;
	display: block;
	float: left;
	width: 524px;
}



/*Fotos
----------------------------------------------------------------*/
.marcadoFotos {
	font-weight: bold;
	color: #43678b;
	background-color: #44668B;
	padding: 8px 7px 5px 5px;
}

#controlaFotosAmpliadas{
	width: 680px;
	position: relative;
	background-color:#385573;
	float: left;
}

#controlaFotosAmpliadas span{
	z-index:10;
	display: none;
	background-color:#385573;
	width: 660px;
	border:1px solid #374F67;		
	position: absolute;
	top: -630px; 
	left: 120px;
	padding: 10px;	
	text-align: center;
}

#controlaFotosAmpliadas span .horizontal{
	margin: 35px 0px 0px 0px!important;
}

#controlaFotosAmpliadas .legendas{
	text-align:left;
	background-color: #223C55;
	padding: 20px 20px 20px 20px;
	margin: 0px 0px 0px 7px;
	border:1px solid #374F67;
	width:320px;
	float:left;	
}

#controlaFotosAmpliadas .legendasHorizontal{
	background-color: #223C55;
	padding: 20px 20px 20px 20px;
	margin: 0px 10px 0px 0px;
	border:1px solid #374F67;
	width:320px;
	text-align:left;
	margin-top: 15px;
}

#controlaFotosAmpliadas span a{
	position: absolute;
	text-align: right;
	top: 8px;
	left: 603px;
}

#controlaFotosAmpliadas span img{
	margin: 0px 0px 0px 0px;
}




/*CSS PARA SLIDESHOW 
----------------------------------------------------------------*/

#controlaSlides{
	width: 900px; 
	position: relative; 
	text-align: center;
	margin: auto;
	z-index: 100;
}


#slides{
	border:1px solid #374F67;
	position: absolute; 
	top: -630px; 
	left: 115px;
	width: 640px;
	padding: 15px;
	background-color: #385573;	
	display: none;
	z-index: 100;
}

#slides a img{
	vertical-align: middle;
}

#slides div{
	margin-top: 20px;
	display: none;
}

#slides #controlaControle{
	background-color: #32475f;
	padding: 5px 10px 5px 10px;
	width: 73px;
	text-align: center;
	display: block;
	text-align: center;
}

#controlaControle a{
	width: 29px;
	float: left;
	margin-left: 5px;
	cursor: pointer;
}

#slides .off{
	filter:alpha(opacity=50);
	-moz-opacity:.50;
	opacity:.50;
	cursor: default;
} 


#fechaSlide{
	float: right;
}

#curiosidades div{
	display: none;
	padding: 25px 0px 0px 20px;
	height: 50px;
}

#curiosidades .saibaMais{
	position: absolute;
	text-align: left;
	top: 75px;
	left: 300px;
	height: 17px!important;
	width: 120px;
	margin: 0px!important;
	padding: 0px!important;
	display: block;
}

#crossAcessibilidade{
	background: url('../images/download.gif') no-repeat 0px 0px;
	width: 334px;
	height: 93px;
	float: left;
	margin-top: 3px;
}

#crossAcessibilidade a{
	display: block;
	margin: 30px 0px 0px 25px;
}

#consultas{
	background: url('images/consultas.gif') no-repeat 0px 0px;
	width: 325px;
	height: 94px; 
	margin: 0px 105px 0px 45px;
	float: left;
		}

#consultas div{
	display: none;
	padding: 25px 0px 0px 20px;
	height: 50px;
}

#consultas .saibaMais{
	position: absolute;
	text-align: left;
	top: 75px;
	left: 300px;
	height: 17px!important;
	width: 120px;
	margin: 0px!important;
	padding: 0px!important;
	display: block;
}

/*CSS DA PÁGINA DE CURIOSIDADES
-----------------------------------------------------------------*/

.curiosidadesMarcado {
	font-weight: bold;
	color: #fff!important;
}

.curiosidadesDesmarcado {
	font-weight: normal;
}


  .azul .curiosidadesMarcado {
	background: url('historia_em_temas/images/metro_linha_azul.gif') #44668B no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.azul .curiosidadesDesmarcado {
	background: url('historia_em_temas/images/metro_linha_azul.gif')  no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.verde .curiosidadesMarcado {
	background: url('historia_em_temas/images/metro_linha_verde.gif') #44668B no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.verde .curiosidadesDesmarcado {
	background: url('historia_em_temas/images/metro_linha_verde.gif')  no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.vermelha .curiosidadesMarcado {
	background: url('historia_em_temas/images/metro_linha_vermelha.gif') #44668B no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.vermelha .curiosidadesDesmarcado {
	background: url('historia_em_temas/images/metro_linha_vermelha.gif') no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.amarela .curiosidadesMarcado {
	background: url('historia_em_temas/images/metro_linha_amarela.gif') #44668B no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.amarela .curiosidadesDesmarcado {
	background: url('historia_em_temas/images/metro_linha_amarela.gif')  no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.lilas .curiosidadesMarcado {
	background: url('historia_em_temas/images/metro_linha_lilas.gif') #44668B no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.lilas .curiosidadesDesmarcado {
	background: url('historia_em_temas/images/metro_linha_lilas.gif')  no-repeat 5px 5px;
	padding: 5px 5px 5px 15px;
}

.ocupaEspacoDaImagem {
	float: left;
	width: 118px;
}

/* WIDGETS 
--------------------------------------------------------------------------------*/
#controlaWidgets{
	background-color: #3D7EB7; 
	padding: 10px 0px 5px 0px;
	width: 350px;
	border: 2px solid #5F5378;
	display: none;
	position: absolute; 
	top: -30px; 
	left: 543px;
	z-index: 14;
}

#widgets{
	list-style-image: none;
	list-style-type: none;
	margin-left: 15px;
	padding: 0px;
}

#widgets li {
	float: left;
	width: 160px;
	text-align: left;
	height: 25px;
	padding: 2px 0px 0px 0px;
}

#widgets li a {
	text-decoration: none;
	color: #FFF!important:
}

#widgets li img {
	margin: 0px 5px 0px 5px;
	vertical-align: bottom;
} 

#fechaCompartilhe {
	float: right;
	margin-right: 10px;
	color: #a8d9f7;
	text-decoration: none;
}

#compartilhe {
	position: relative;
	width: 370px;
	text-align: right;
	z-index: 14;
}