/* 
 * LEIA:
 * 
 * O css e dividido em 2 grupos (BASE E ESPECIFICO):
 * BASE: css definido como base do template. O css fica dentro do diretorio raiz do numero do "template"
 * - Esse ccs possue 3 grupos (TAMANHO, ESTILO, POSICAO).
 * - Para cada uns desses grupos havera um sub-grupo especificando a qual modulo se refere
 * ESPECIFICO: css especifico para o numero do irmao. O css fica dentro do diretorio raiz do numero do "irmao"
 * - A estrutura desse parte fica a cargo do desenvolvedor do template,
 * - E recomandado usar o mesmo padao usado no grupo de css BASE se o codigo for muito extenso
 * 
*/

/*________________________________________________ CSS BASE - TEMPLATE  _____________________________________________________*/
	#topo{
		width:240px;
		height:60px; 
		display: inline-block;
		float: left;
		position: relative;
		z-index: 9999;
		top: 72px;
	}
	#topo #t1{
		width:100%; 
		height:30px; 
		display: inline-block;
	}
	#topo #t2{
		width:100%; 
		height:30px; 
		display: inline-block;
	}
	#topo #c1{
		width:30px; 
		height:30px;
		display: inline-block;
		float: right;
	}
	#topo #c2{
		width:30px; 
		height:30px;
		display: inline-block;
		float: right;
	}
	

	
	#embaixo{
		width:30px;
		height:60px; 
		display: inline-block;
		float: left;
		position: relative;
		z-index: 9999;
		top: 72px;
	}
	#embaixo #t1{
		width:60px; 
		height:30px; 
		display: inline-block;
	}
	#embaixo #c1{
		width:30px; 
		height:30px;
		display: inline-block;
		float: left;
	}
	#embaixo #t2{
		width:60px; 
		height:30px; 
		display: inline-block;
	}
	#embaixo #c2{
		width:30px; 
		height:30px;
		display: inline-block;
		float: left;
	}

#detalheLayoutFundo {
    height: 0;
    position: relative;
    z-index: 0;
}
#detalheLayoutFundo .detalhe1{
	width: 100%;
	margin: auto;
	z-index: -2;
	position: relative;
	height: 155px;
}

/*__________ TAMANHO __________*/
	.forma{
		margin-bottom: 30px;
	}

	/*** MIOLO ***/
	#conteinerConteudo #conteinerMiolo{
		height:auto; 
		margin:auto;
	}
	
	#conteinerMiolo h1{
		font-weight: bold;
		line-height: 35px;
	}
	
	/*** IMAGEM ***/
	.conteinerImagem{ 
		margin:auto;
	}

	.tituloItem h1{
		font-size:20px;
	}
	
	/*** LOGO ***/
	#boxLogo{ 
		width:810px;
		line-height:155px;
	}
	#boxLogo a{ 
		width: 810px;
		line-height: 155px;
		display: table-cell; 	
	}
	#boxLogo img{ 
		max-width:500px;
		max-height: 135px;	
	}
	#conteinerLogo{
		width:918px;
		margin:auto;
	}
	#layoutLogo{
		width:960px;
	}
	/*** MENU ***/
	.conteinerMenu{
		margin:auto;
	}
	.conteinerMenuBg{
		width:960px;
		margin:auto;
	}

	/*** SERVICOS ***/
	.conteinerServicos{
		width:210px;
		height: auto;
		display: block;
	}
	.conteinerServicos .titulo h1{
		width:90%;
		padding:8px 10px 0 10px;
		font-size:20px;
	}
 
	/*** CAIXAS ***/
	.caixa{
		display:inline-block;
	}
	.caixa .conteiner{
		margin: 5px auto!important;
	}
	.conteinerServicos h2{
		font-weight: bold!important;
	}
	/*** CONTEUDO ***/
	#conteinerConteudo{
		width:918px;
		margin-left:auto;
		margin-right:auto;
		padding-bottom:9px;
		display: table;
	}

	#conteinerConteudo{
		margin-top: 10px;
	}

	/*** SERVICOS ENDERECO ***/
	#conteinerEndereco .modelo2 .titulo h2{
		text-align: center;
	}
	#conteinerEndereco{
		width:878px;
		margin:auto;
	}

	/*** SERVICOS ENDERECO HORIZONTAL  ***/
	#conteinerEndereco{
		width:878px;
		margin-left:auto;
		margin-right:auto;
	}
	.regulagemConteudo{
		width: 100%;
	}
	/*** SERVICOS ENDERECO HORIZONTAL MODELO 1 ***/
	#conteinerEndereco .modelo1 .conteudo{
		width:266px;
	}
	
/****************************** Visitantes ******************************/

	/*** RODAPE ***/
	#conteinerVisitantesRodape{
		width:960px;
		margin:0 auto auto auto;
		padding-bottom:40px;
		padding-top:10px;
		height: 20px;
	}
	#visitantes .label, 
	#visitantes .quantidade{
		font-size: 12px;
	}
	.boxRodape, .boxRodape a{
		font-size: 12px;
	}
#rodape{margin-right: 10px;}

/*__________ POSICAO __________*/

	/*** FRASE EFEITO ***/
	#boxLetreiro{
		top:146px;
		position:absolute;
		z-index: 999;
	}
	
	/*** IMAGEM ***/
	.conteinerImagem{
		position:relative;
	}

	/*** LOGO ***/
	#boxLogo{
		vertical-align: middle;
		text-align: center;
	}
	#boxLogo a{ 
		vertical-align: middle;
		text-align: center;
	}
	#conteinerLogo{
		position: relative;
		margin: 0 auto!important;
	}

	/*** MENU ***/
	.conteinerMenu{
		position: relative;
	}

	/*** RODAPE ***/
	#conteinerVisitantes{
		vertical-align: middle;
		text-align: center;
		width: 235px;
	}
	.boxVisitantes{
		vertical-align: middle;
		text-align: center;
	}
	#conteinerRodape{
		float: right;
	}
	
/*__________ ESTILO __________*/

	/*** MENU ***/
	.menuHorizontal-mais a{	
		text-decoration: none;
		font-size: 14px;
	}
	.menuHorizontal .menuHorizontal-itens a{
		text-decoration: none;
		font-size: 14px;
	}
	.menuVertical .menuVertical-itens a,
	.menuVertical-mais a{
		text-decoration: none;
	}
	.menuHorizontal li ul, .menuVertical li ul{	top: 45px;}

/*DATA E HORAS*/
	#conteinerTopo{
		height: 30px;
	}
	#dataHora{
		width:960px;
		margin:auto;
		height: 30px;
		line-height: 30px;
		vertical-align: middle;
		position: relative;
		z-index:99900;
	}
	#dataHora div{
		font-family: "Arial";
		font-size: 12px;
	}
			
	#dataHora .layout{float: right}
	#dataHora .diaSemana,
	#dataHora .data,
	#dataHora .hora{float: left;}	
	#dataHora .hora{width: 54px;}
	#conteinerEndereco .separadorEndereco{
		border-style: dotted !important;
	}