body {
	font: 70%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-color: #42413C;
	margin: 10;
	padding: 5;
	
	color: #000;
}

/* ~~ Seletores de elementos/tag ~~ */
ul, ol, dl { /* Devido a variações entre navegadores, é recomendado zerar o padding e a margem nas listas. É possível especificar as quantidades aqui ou nos itens da lista (LI, DT, DD) que eles contêm. Lembre-se: o que você fizer aqui ficará em cascata para a lista de navegação a não ser que você escreva outro seletor mais específico. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 5 auto;	 /* ao remover a margem superior, as margens podem escapar das suas containing div. A margem inferior restante vai mantê-la afastada de qualquer elemento que se segue. */
	padding-right: 20px;
	padding-left: 20px; /* adicionando o padding para os lados dos elementos dentro dos divs, ao invés dos próprios divs o livra de qualquer combinação de modelo de caixa. Um div aninhado com padding lateral também pode ser usado como método alternativo. */
}
a img { /* esse seletor remove a borda azul padrão exibida em alguns navegadores ao redor de uma imagem circundada por um link. */
	border: none;
}

/* ~~ A estilização dos links do seu site deve permanecer nesta ordem – incluindo o grupo de seletores que criam o efeito hover. ~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* a não ser que você estilize seus links para que pareçam extremamente únicos, é melhor utilizar links sublinhados para uma identificação visual mais rápida. */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* esse grupo de seletores dará ao navegador que estiver usando um teclado a mesma experiência hover do que uma pessoa usando um mouse. */
	text-decoration: none;
}

/* ~~ esse contêiner de largura fixa envolve os outros divs~~ */
.container {
	width: 1109px;
	background-color: #FFF;
		margin: 0 auto; /* o valor automático nos lados, combinado com a largura, centraliza o layout */
}

/* ~~o cabeçalho não tem uma largura definida. Ele pode ocupar toda a largura do layout. Possui um alocador de espaço de imagem que deve ser substituído pelo seu logotipo com link~~ */
.header {
	background-color: #ADB96E;
}

}

    #menu ul {
    padding:0px;
    margin:0px;
   
    list-style:none;
	border: 1px;
    }
	#menu ul li { display: inline; }
	    #menu ul li a {
   
    display: inline-block;
     list-style:none;
    float:left;
    padding:0 15px;

    /* visual do link */
    background-color:white;
    color: #333;
    text-decoration: none;
    border-bottom:3px solid #EDEDED;
    }
	    #menu ul li a:hover {
    
    color: #6D6D6D;
    border-bottom:3px solid #EA0000;
    }


.content {
	padding: 10px 0;
	width: 1100px;
	float: right;
}
/* ~~ O rodapé ~~ */
.footer {
	padding: 10px 0;
	background-color: #F2F2F2;
	position: relative;/* isso possibilita que o hasLayout do IE6 faça a limpeza corretamente. */
	clear: both; /* essa propriedade de limpeza força o contêiner a reconhecer o conteúdo das colunas e onde elas terminam. */
}


input[type="submit"], input[type="submit"]:focus, input[type="submit"]:active,  
button, button:focus, button:active {
    /* Remove all decorations to look like normal text */
    background: none;
    border: none;
    display: inline;
    font: inherit;
    margin: 0;
    padding: 0;
    outline: none;
    outline-offset: 0;
    /* Additional styles to look like a link */
    color: blue;
    cursor: pointer;
    text-decoration: underline;
}
/* Remove extra space inside buttons in Firefox */
input[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
    border: none;
    padding: 0;
}	



.tres-colunas{
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;

}

.duas-colunas{
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
  
}


textarea{
    resize: none; /* impede que o próprio usuário altere o tamanho do textarea */
    width:980px;
    height:200px;
    overflow-y: auto;
}

a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
bottom: 30px;
left: 90%;
margin-left: -76px;
z-index: 999;
}


.tooltip {
    position: relative;
    display: inline-block;
    
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: auto;
    background-color: black;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 5px 0;
	white-space: pre;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}