@charset "utf-8";
body  {
	margin: 0; /* É recomendável zerar a margem e o preenchimento do elemento body para acomodar os diferentes padrões de navegador */
	padding: 0;
	text-align: center; /* Isso centraliza o contêiner em navegadores IE 5*. O texto é então definido como o padrão de alinhamento à esquerda no seletor #container */
	color: #000000;
	background-image: url(../images/fundo.jpg);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
}
h2 {
	padding-bottom: 2px;
	color: #06C;
	font-size: 14px;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
}
h3 {
	margin-top: 0;
	margin-bottom: 0.5em;
	padding-bottom: 2px;
	color: #046280;
	font-size: 10px;
}
h4 {
	margin-top: 0;
	margin-bottom: 0.5em;
	padding-bottom: 2px;
	color: #FFF;
	font-size: 10px;
}


/* Dicas para layouts elásticos
1. Como o tamanho total dos layouts elásticos baseia-se no tamanho das fontes padrão do usuário, eles são mais imprevisíveis. Usados corretamente, eles também são mais acessíveis para aqueles de precisam de fontes de tamanho maior, pois o comprimento da linha permanece proporcional.
2. O dimensionamento dos divs deste layout baseia-se no tamanho de fonte 100% no elemento body. Se você reduzir o tamanho total do texto usando um tamanho de fonte: 80% no elemento body ou no #container, lembre-se de que o tamanho de todo o layout será reduzido proporcionalmente. Convém aumentar as larguras dos vários divs para compensar isso.
3. Se o tamanho da fonte for alterado em proporções diferentes em cada div, e não no design global (p.ex.: o tamanho de fonte 70% é atribuído a #sidebar1 e o tamanho de fonte 85% é atribuído a #mainContent), o tamanho total de cada div será alterado proporcionalmente. Convém fazer ajustes com base no tamanho de fonte final.
*/
.thrColElsHdr #container {
	width: 780px;  /* Esta largura criará um contêiner que se ajustará em uma janela de navegador de 800px se o texto estiver nos tamanhos de fonte padrão do navegador */
	background: #FFFFFF; /* As margens automáticas (juntamente com a largura) centralizam a página */
	border: 1px solid #000000;
	text-align: left; /* Isso substitui text-align:  center do elemento body. */
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
} 
.thrColElsHdr #header {
	background-color: #009500;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
} 
.thrColElsHdr #header h1 {
	margin: 0; /* Se a margem do último elemento for zerada no div #header, a margem não será reduzida - um espaço inexplicável entre divs. Se o div tiver uma borda ao redor dele, isso não será necessário, pois também evitará a redução da margem */
	padding: 10px 0; /* Usar preenchimento em vez de margem permitirá manter o elemento longe das bordas do div */
	
	}

/* Dicas para a barra lateral 1:
1. Lembre-se de que, se você definir um valor de tamanho de fonte neste div, a largura total do div será ajustada de acordo.
2. Como estamos trabalhando em espaços "m", é melhor não usar o preenchimento na própria barra lateral. Ele será adicionado à largura para navegadores compatíveis com padrões, criando uma largura real desconhecida. 
3. Para criar o espaço entre a lateral do div e os elementos nele contidos, insira margens esquerda e direita nesses elementos, assim como na regra ".thrColElsHdr #sidebar1 p".
*/
.thrColElsHdr #sidebar1 {
	float: left;
	width: 11em; /* A cor do plano de fundo será exibida para o comprimento do conteúdo na coluna, mas não mais do que isso */
	padding: 15px 0; /* O preenchimento da parte superior e inferior cria um espaço visual dentro deste div */
	font-family: Arial, Helvetica, sans-serif;
}
.thrColElsHdr #sidebar2 {
	float: right;
	width: 11em; /* A cor do plano de fundo será exibida para o comprimento do conteúdo na coluna, mas não mais do que isso */
	padding: 15px 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	text-align: center;
}

.thrColElsHdr #sidebar1 h3, .thrColElsHdr #sidebar1 p, .thrColElsHdr #sidebar2 p, .thrColElsHdr #sidebar2 h3 {
	margin-left: 10px; /* As margens direita e esquerda devem ser fornecidas para cada elemento que será colocado nas colunas laterais */
	margin-right: 10px;
}


/* Dicas para mainContent:
1. Se você atribuir a este div #mainContent um valor de tamanho de fonte diferente do valor do div #sidebar1, as margens do div #mainContent se basearão em seu respectivo tamanho de fonte e a largura do div #sidebar1 se baseará em seu respectivo tamanho de fonte. Convém ajustar os valores desses divs.
2. O espaço entre o mainContent e sidebar1 é criado com a margem esquerda do div mainContent.  Não importa quanto conteúdo exista no div da barra lateral 1, o espaço da coluna permanecerá igual. Você pode remover a margem esquerda se desejar que o texto do div #mainContent preencha o espaço #sidebar1 quando o conteúdo em #sidebar1 terminar.
3. Para evitar que a flutuação se solte em uma resolução mínima suportada de 800 x 600, os elementos dentro do div mainContent devem ter 430 pixels ou menos (incluindo imagens). Contudo, se o tamanho da fonte do navegador do usuário estiver definido com um tamanho menor do que o normal, menos espaço estará disponível no div #mainContent do que o exibido no teste.
4. No Comentário Condicional do Internet Explorer abaixo, a propriedade zoom é usada para fornecer "hasLayout" de mainContent." Isso evita diversos erros específicos do IE.
*/
.thrColElsHdr #mainContent {
	margin: 0 12em 0 12em;
	font-size: 80%;
} 
.thrColElsHdr #footer {
	padding: 0 10px;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	font-size: 10px;
	background-color: #060;
	color: #FFF;
} 
.thrColElsHdr #footer p {
	margin: 0; /* Se as margens do primeiro elemento forem zeradas no rodapé, não haverá possibilidade de redução de margem - um espaço entre divs */
	padding: 10px 0; /* O preenchimento neste elemento criará um espaço, exatamente como ocorreria na margem, sem o problema de redução da margem */
}
.thrColElsHdr #menu {
	float: none;
	width: 100%; /* O preenchimento da parte superior e inferior cria um espaço visual dentro deste div */
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFF;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
	background-color: #FFCC03;
}

/* Diversas classes para reutilização */
.fltrt { /* Esta classe é usada para flutuar um elemento à direita na página. O elemento flutuante deve preceder o elemento e estar próximo dele na página. */
	float: right;
	margin-left: 8px;
}



.fltlft { /* Esta classe é usada para flutuar um elemento à esquerda em sua página */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* Esta classe deve ser colocada em um elemento div ou break e deve ser o último elemento antes do fechamento de um contêiner que deve conter uma flutuação completamente */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.oddRow{
	background-color: #AEFFAE;
}
a:link {
	text-decoration: none;
	color: #000;
}
a:visited {
	text-decoration: none;
}
a:hover {
	color: #E2E2E2;
	text-decoration: none;
}
h1 {
	padding-bottom: 2px;
	color: #000;
	font-size: 11px;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: normal;
	font-variant: normal;
}