/* Folha de Estilos Principal */

/* importando arquivos .css auxiliares */
/* Resetando a formatacao padrao dos navegadores */
@import url(reset_css.css);

html{
	font: 62.5% Arial, Helvetica, sans-serif;
	background: #f7be00 url(../images/layout/bg_body.jpg) repeat-x 0 0;
}

	body{
		color: #333;
		font-size: 1.6em;
		background: transparent;
		text-align: center;
		background: transparent url(../images/layout/bg_destaque.jpg) no-repeat center 220px;
	}
  
		div#container{
			width: 780px;
			margin: 0 auto;
			text-align: left;
		}
			
			/** topo **/
			div#logo{
				width: 100%;
				height: 220px;
				background: url(../images/layout/bg_container_logo.png) no-repeat center 0;
				text-indent: -90000px;
			}
			
				div#logo h1{
					width: 340px;
					height: 140px;
					background: url(../images/layout/bg_logo.png) no-repeat 0 5px;
					margin: 0 auto;
				}
				
				div#logo h2{
					width: 100%;
					height: 45px;
					background: url(../images/layout/bg_slogan.png) no-repeat 0 0;
					margin: 25px auto 0 auto;
				}
			
			/** destaque **/
			div#content ul#vantagens{
				width: 600px;
				margin: 90px 0;
			}
				
				div#content ul#vantagens li{
					height: 55px;
					text-indent: -90000px;
					background: url(../images/layout/bg_ul_destaque.png) no-repeat 0 0;
				}
				
					div#content ul#vantagens li#ate{ background-position: 0 -7px; }
					div#content ul#vantagens li#emb{ background-position: 0 -66px; }
					div#content ul#vantagens li#efi{ background-position: 0 -126px; }
				
				/** imagem junto com o texto da empresa **/	
				img.resp-amb{ float: right; }
				
				/** formulario de contato **/
				div#content div#contato{ background: url(../images/layout/bg_formulario_detalhe.jpg) no-repeat 630px 0; }
				
					div#content div#contato form{ width: 370px; float: left; }
						
						div#content div#contato form fieldset legend{ display: none; }
						
						div#content div#contato form fieldset label{ display: block; font: 1em 'Trebuchet MS', Arial, sans-serif; margin: 10px 0 0 0; }
						
						div#content div#contato form fieldset input, div#content form fieldset textarea{
							width: 355px;
							padding: 10px 5px;
							border: 1px solid #000;
							background: #000;
							color: #fff;
							filter: alpha(opacity=70);
							opacity: 0.7;
							-moz-border-radius: 3px;
							border-radius: 3px;
						}
							div#content div#contato form fieldset textarea{ font-family: Arial, Helvetica, sans-serif; font-size: 0.84em; overflow: auto; }
						
						div#content div#contato form fieldset button{
							border: none;
							display: block;
							width: 120px;
							height: 60px;
							cursor: pointer;
							background: url(../images/layout/bg_bt_form.jpg) no-repeat -26px -13px;
							text-indent: -90000px;
							margin: 0 auto;
						}
							
							div#content div#contato form fieldset button:hover{ background-position: -156px -13px; }
						
						/* estilos da validacao do formaulario atraves do plugin validate */
						div#content div#contato form fieldset em.error {
							position: relative;
							top: -25px;
							padding: 3px;
							display: block;
							width: 359px;
							font-size: 0.9em;
							background: #fff;
							border: 1px solid #f00;
							color: #f00;
						}
							
						div#content div#contato div#info{
							width: 370px;
							float: right;
						}
							
							div#content div#contato div#info ul#emails { margin: 10px 0 15px 0; }
							
								div#content div#contato div#info ul#emails li{
									height: 25px;
									padding: 3px 3px 3px 40px;
									background: url(../images/layout/bg_detalhes.png) no-repeat 0 0;
									text-shadow: #f1f1f1 0 1px 1px;
								}
									div#content div#contato div#info ul#emails li#cont{ background-position: -10px -33px; }
									div#content div#contato div#info ul#emails li#fatu{ background-position: -10px -80px; }
									div#content div#contato div#info ul#emails li#fina{ background-position: -10px -125px; }
				
				div#footer{
					width: 100%;
					clear: both;
				}
					
					div#footer p{
						width: 110px;
						height: 50px;
						background: url(../images/layout/bg_detalhes.png) no-repeat -11px -235px;
						text-indent: -90000px;
						margin: 0 auto;
					}
					
/************ elementos mais genericos ************/
em{ font-style: italic; }
strong{ font-weight: bold; }

/** titulos **/
div#content h2, div#content h3{
	width: 280px;
	height: 50px;
	background: url(../images/layout/bg_titulos.png) no-repeat -5px 0;
	text-indent: -90000px;
}
	div#content h2#con{ background-position: -5px -52px; }

	div#content h3{ height: 30px; }
	div#content h3#tel{ background-position: -5px -109px; }
	div#content h3#ema{ background-position: -5px -155px; }
	div#content h3#end{ background-position: -5px -201px; }

/** paragrafos **/
div#content p{
	margin: 20px 0;
	line-height: 1.8em;
	text-align: justify;
	text-shadow: #f1f1f1 0 1px 1px;
}
	
	div#info p{ line-height: 1.4em; margin: 5px 0 20px 0; }
		div#info p span#fone{
			display: block;
			width: 225px;
			height: 40px;
			background: url(../images/layout/bg_detalhes.png) no-repeat -13px -170px;
			text-indent: -90000px;
		}
	
	/* mensagens do formulario */
	div#content p.success, div#content p.error{
		font: 1.4em 'Trebuchet MS', Arial, sans-serif;
		text-shadow: none;
		text-transform: uppercase;
		color: #090;
		text-align: center;
		padding: 15px;
		background: #000;
		filter: alpha(opacity=70);
		opacity: 0.7;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
		div#content p.error{ color: #b00; }

/** separador **/
span.separator{
	display: block;
	width: 100%;
	height: 2px;
	background: url(../images/layout/bg_detalhes.png) no-repeat 0 0;
	margin: 20px 0;
}

div#contato:after{ 
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

/** links **/
a.link:link{ color:#000; text-decoration: underline; }
a.link:visited{ color:#666; text-decoration: none; }
a.link:hover{ color: #fff; background: #000; text-decoration: none; text-shadow: none; }
a.link:active{ color: #f30; background: #000; }