/*Documento CSS style_index.css*/ 
 
body{
     background-image:url(/static/img/textura-terra.jpg);
     background-attachment: fixed;
     /*background-repeat: no-repeat;
     background-position: 5px;*/
 }
	 
#container{/*página onde estão todos elementos*/
       width: 960px;
       margin: 0 auto;   
       /*border:1px dotted #DEB887;*/ 
 }

#header{/*cabeçalho*/
	   width: 915px;
	   height: 110px;
	   border:4px solid #8FBC8F;  
	   margin: 0 auto;  
	   background: #8FBC8F; /*verde acizentado*/
	   font-size: 14px;
	   text-align: center;/*alinhamento ao centro, pode ser left ou right*/
	   font-family: "lucinda grande", "lucinda sans", verdana, sans-serif;
	   background-image:url(/static/img/logo-site2.png);/*declarar uma imagem*/
	   background-repeat:no-repeat;/*para não repetir uma imagem*/
	   background-position: left center; /*10px -30px; /*movimenta a imagem -use pixels ou left bottom; top, left top, right, top etc.*/
	   border-radius: 10px;
	   box-shadow: 5px 5px 5px 1px #000000;
}

 #picture{
	width: 1200px;  /*aumenta o cabeçalho (o box que contém o cabeçalho. A div grande*/
	height:150px; /*aumenta o box do cabeçalho na vertical*/
	border: 8px solid #CCCC33;/*aumentando os pixels aumenta  a espessura das bordas.*/ 
	box-shadow:12px 12px 12px 12px black; /*#8B4513;/*sombra ao redor da div*/
	/*float: center;/*coloca a imagem no centro da div, ou  à esquerda da janela, à direita right.*/
	}




 #left {
	 float:left;
	 width: 200px;
	 height: 780px;
	 margin-top:12px;/*separa a div left da div do cabeçalho.*/
	 margin-left:16px;/*separa a div left da div container. A div de todos os elementos*/  
	 margin-right:10px;/*cola a div left na div do centro . Prestar atenção à sombra*/  
	 padding-top:-60px;/*espaço entre ajax e o menu em cima*/
	 padding-bottom:20px;/*espaço enter a div e o texto*/
	 padding-left:12px;/*espaço enter a div e o texto*/
	 padding-right:12px;/*espaço enter a div e o texto*/
	 list-style:none; /*retira a marcação de lista. As bolinhas. Só funciona se retirar a ul*/
	 background-color: #EDE4C4; /*#F5F5DC;/*#FFFFC1;/*E9FCA7*/
	 /*box-shadow: 10px 10px 10px 10px #888888;*/
	 }
	 
	
#content > #principal {/*div do meio*/
     float:left;
	 width:470px;
	 height: 780px; 
	 margin-top:12px;/*separa a div left da div do cabeçalho.*/
	 padding:12px;/*espaço entre o texto e a div*/
	 background-color: #FFFFFF; 
	 /*background-image:url(img/inicio.gif);
	 background-repeat: no-repeat;
	 background-position: bottom;*/
	 box-shadow: 2px 1px 2px 2px #888888;
        }  
	 
	 
#content > #right {
     float: left;/*o float tem que ser left-não right*/
	 width:155px;
	 height: 780px;
	 margin:14px;/*cola a div right na div do centro . Prestar atenção à sombra*/    
	 /*margin-bottom:6px;/*descola a div right da div do rodapé . Prestar atenção à sombra*/    
	 list-style:none; /*retira a marcação de lista. As bolinhas. Só funciona se retirar a ul*/
	 padding-left: 12px; /*espaço entre o texto e a div*/
	 padding:12px;
	 background-color: #f6f6bb; /*#F5F5DC; /*#FFFFC1;/*E9FCA7*/
	 /*box-shadow: 10px 10px 10px 10px #888888;*/
	}  
	 
 a {
	/*border: 1px dotted #181818;/*aumentando os pixels aumenta  a espessura das bordas.*/ 
	text-decoration:none;
	color: #03240E;
	}
	
 span.destaque{
		color:red;
		font-size:12px;
	}

 #special_link{
	
	}
	/*e todas as propriedades que ele terá
	font-size: 28px;
	color: blue;
	}

	/*#content {
		 float:right;
		 width: 440px;*/

 #menu a{
	display: block;
	padding: 1px 0 1px 5px;
	border: 1px solid #000000;
	width: 180px;
	background-color: #FFFFFF; /*#339966;*/
	text-decoration: none;
	/*background-image: url(img/fundo1.jpg);*/
	}
.menu{
	list-style-type:none;
	margin:20px 0 0 360px;/*aumenta ou diminui a barra de menus afastando para a direita,
	reduzindo na horizontal e aumentando na vertical. o 1º número faz as palavra home, sobre descerem, 
	o 4º número movimenta as palavras para a esquerda ou direita */
	/*border:1px solid #990000;/*vermelho escuro*/
	float:left;
	}

 .menu li {
	position: relative;
	float: left; /*movimenta a div das palavras home, sobre, etc*/
	/*border-right:1px dotted #CCCC33;/* #FF0000;*/
	margin-bottom: 1px;/*espaço entre um bloco de submenu e o de baixo*/
	padding-left:-5px;/*aumenta o espaço entre a palavra e a borda do menu*/
	/*padding-right:5px;/*aqui tem que ser igual, para que a palavra fique centralizada*/
	background-color: #EDE4C4; /*#F8F8F8; /*Fundo do submenu*/
	height: 1px;/* linha que aparece no cabeçalho. aumentando ou diminuindo o nº de pixels, aumenta ou 
	diminui também o espaço colorido da linha (div).aqui é a div do cabeçalho.*/
	width: 80px;/*aumenta o espaço entre as palavras home, sobre, etc. a largura da linha ou 
	div que está no cabeçalho janela -barra de rolagem horizontal.*/
	line-height: 88px;/*sobe ou desce as palavras Home, Sobre, Serviços, etc.*/
	}
	
	
	
  #menu a:hover {
	border: 1px solid #000000;
	/*background-color:#FFFF99;*/
	background-image: url(img/button.jpg ); 
	/*color:#000000; */
	}

  .menu li a{
	font-family:Tahoma;
	font-size:18px;
	color:#A0522D; /*cor da fonte do menu*/
	text-decoration:none;
	}
 .menu li ul{
	position:absolute;
	top:38px;/*diminui o espaço entre o topo do menu e do submenu, (aumentando o número a cortina desce)*/
	left:-60px; /*movimenta o submenu para left or right*/
	display:none;
	}
	.menu li:hover ul, /*aqui em hover são dois pontos*/
	.menu li ul li:hover ul,
	.menu li.over ul, /*Cuidado: aqui em over é apenas um ponto*/
	.menu li ul li.over ul {
	display:block;
	}
	.menu li ul li {
	border:1px dotted #DEB887;
	display:block;
	width:200px; /*aumenta a largura do bloco do submenu---------*/
	height:30px; /*altura do bloco de submenu*/
	line-height:15px;/*Centraliza verticalmente*/
	}
	 
.luto{
	background-color: black;
	color: beige;
}

#destaque{
background-color: #FFFF80;
}

h2{
margin-top: 50px;
color:#A0522D;
text-align: center;

      }
em{
   font-family: Cursive, "lucinda grande", "lucinda sans", verdana, sans-serif;
   color:#A0522D;
  }
  
  
 p{
margin-top: 30px;
width:450px;
color:#000000;
text-align: justify;
      }

#footer{
        clear: both;
	 width: 900px;
	 /*height: 60px;*/
	 margin: 0 auto;  
	 background: #FFFFC1;
	 padding-top: 1px;
	 padding-bottom: 12px;
	 padding-left: 12px;
	 box-shadow: 1px 4px 4px 5px #000000;/*#888888;*/
	 }