@charset "utf-8";
/* CSS Document */


/********
################# CSS RESET
********/

* {
text-decoration:none;
margin:0;
padding:0;
}

body {
margin:0;
padding:0;

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#000;
font-size:14px;
}

a img, fieldset {border:none;}
input {vertical-align: middle;}
hr {display:none;}




/********
################# ESTRUTURAÇÃO
********/

#geral {
width:100%; /* widescreen */
}


/********
MENU
********/

#menu {
height:47px;
background:black;
}

	#menu ul {
	margin:0 auto;
	width:980px; /* coloca a ul do menu no tamanho de 980, para caber nas resoluções e manter o aspecto wide :D */
	}

	#menu ul li {
	float:left;
	list-style:none;
	}

	#menu ul li a {
	display:block;
	margin-right:57px;
	margin-top:19px;
	}

/* tip do menu */
#menu-tip {
height:15px;
background:white;
}

	#menu-tip ul {
	margin:0 auto;
	width:980px; /* coloca a ul do menu no tamanho de 980, para caber nas resoluções e manter o aspecto wide :D */
	}
	
	#menu-tip ul li {
	float:left;
	list-style:none;
	}
	
	#menu-tip ul li a {
	display:block;
	margin-right:30px;
	margin-left:20px;
	}

	#menu-tip ul li a.menu-tip-contato {margin-left:89px;} /* reposiciona o TIP do menu CONTATO, pois ele fica um pouco mais a direita que os outros */



/********
TOPO
********/


#topo {
height:464px;
background:top center no-repeat #e4e4e4;
}

	#topo h1 {
	float:left;
	margin-top:340px;
	}
	
	#topo h1 .logo {
	/* faz o image replacement */
	display: block;
	text-indent: -999px;
	overflow:hidden;
	background:url(imagens/topo-logo09.png);
	
	/* não achei a solução nos tutoriais, mas sem definir os tamanhos, o logo não aparecia ¬¬ */
	width:199px;
	height:121px;
	}

#topo h2 {
float:right;
margin-top:397px;
}

	#topo h2.slogan {
	/* faz o image replacement */
	display: block;
	text-indent: -999px;
	overflow:hidden;
	background:url(imagens/topo-slogan09.png);
	
	/* não achei a solução nos tutoriais, mas sem definir os tamanhos, o logo não aparecia ¬¬ */
	width:372px;
	height:63px;
	}





/********
CONTEÚDO
********/


#meio {
background:url(imagens/conteudo-bg.jpg) no-repeat center bottom #e4e4e4;
padding:30px 0px;
overflow:auto; /* acerta o problema de não englobar os elementos dentro dele que tem algum float */
}


#conteudo {
margin:0 auto; /* centraliza o conteúdo */
width:950px;
}


/********
RODAPÉ
********/


#rodape {
background:url(imagens/rodape-bg.gif);
padding:17px 17px 0px 17px;
height:235px;
color:#FFF;

clear:both;
}


/* MENU DO RODAPE */

	#rodape ul {
	float:left;
	}
	
	#rodape ul li {
	list-style:none;	
	}
		
	#rodape ul li a {
	display:block;
	padding:4px;
	border:dashed 1px #FFF;
	margin-bottom:9px;
	color:#FFF;	
	}

	#rodape ul li a:hover {text-decoration:underline;}

/* OUTRA PARTE DO RODAPE */

	#rodape p {
	float:right;
	text-align:right;
	
	background:url(imagens/rodape-logo09.png) right bottom no-repeat; /* logo da 09 no background */
	height:100%;
	}


/* CLASSES ALEATÓRIAS */

.rodape-email-tel {color:#a8a8a8; font-style:italic;}
.rodape-email-tel a {color:#a8a8a8;}
.rodape-email-tel a:hover {text-decoration:underline;}

.cor-cinza {color:#a8a8a8;}

.rede-social {
display:block;
width:20px;
float:right;
margin-top:10px;
margin-left:10px;
}




/********
INTERNAS
********/


#interna {
margin:0 auto; /* centraliza o conteúdo */
width:950px;
}

	#interna h1 { /* estilização do h1 */
	/* posicionamento */
	padding:55px 0px 5px 0px;
	margin:0px 0px 25px 0px;
	border-bottom:solid 1px #b6b6b6;
	
	/* fonte */
	font-size:24px;
	color:#013656;
	font-style:italic;
	font-weight:normal;
	letter-spacing:-2px;
	}
	
	#interna p {
	margin-bottom:15px;	
	}
	
	#interna a:hover {text-decoration:underline;}



/* SOBRE NOS */

#interna.sobre-nos h1 { 
background:url(imagens/sobre-nos-titTip.gif) no-repeat; /* Na classe de cada página interna só se muda a imagem de bg do h1. O resto já foi carregado no #interna h1  */
}

#interna.sobre-nos h2 {
font-size:18px;	
color:#003555;
font-weight:bold;
}

.fonte-destaque {
font-size:18px;
color:#003555;
font-style:italic;
}

/* perfil de cada um */
#interna.sobre-nos ul {

}

#interna.sobre-nos ul li {
list-style:none;
width:310px;
float:left;
margin-right:40px;
}



/* PORTFOLIO */

#interna.portfolio h1 { 
background:url(imagens/portfolio-titTip.gif) no-repeat; 
}

/* Jquery dos thumbs */

.qitem {
width:235px;
height:172px;	
/*border:4px solid #222;*/
margin:0px 2px 2px 0px;
background: url(imagens/portfolio-thumbBg.gif);	
	
/* required to hide the image after resized */
overflow:hidden;
	
/* for child absolute position */
position:relative;
	
/* display div in line */
float:left;
cursor:hand; cursor:pointer;
}

	.qitem img {
		border:0;
	
		/* allow javascript moves the img position*/
		position:absolute;
		z-index:200;
	}

	.qitem .caption {
		position:absolute;
		z-index:0;	
		color:#ccc;
		display:block;
	}

		.qitem .caption h4 {
			font-size:16px;
			padding:10px 5px 0 8px;
			margin:0;
			color:#369ead;
		}

		.qitem .caption p {
			font-size:14px;	
			padding:3px 5px 0 8px;
			margin:0;
		}



/* Setting for bars */
.bar1, .bar2, .bar3, .bar4 {
	position:absolute;
	background-repeat: no-repeat; 
	z-index:200;
}

.clear {
	clear:both;	
}

/* FIM Jquery dos thumbs */



/* PORTFOLIO-CASE */

#portfolio-case {
margin-bottom:56px;
height:594px; /* acerta o margin bottom */
}

	#portfolio-case img {
	float:left;
	margin-right:10px;
	}
	
	#portfolio-case h2 {
	font-size:24px;
	font-weight:normal;
	color:#003555;
	
	margin-bottom:15px;
	}

	
	#portfolio-case ul {
	display:block;
	margin:0px 0px 0px 620px;
	}
	
	#portfolio-case ul li {
	list-style:url(imagens/portfolio-setaLi.gif);
	}


.fizemos {
color:#003555;
font-weight:bold;
}


#portfolio-continue {
clear:both;	
}

	#portfolio-continue h3 {
	font-size:24px;
	color:#013656;
	font-style:italic;
	font-weight:normal;
	letter-spacing:-2px;
	
	margin-bottom:10px;
	}




/* SERVIÇOS */

#interna.servicos h1 { 
background:url(imagens/servicos-titTip.gif) no-repeat;
}

#interna.servicos h2 {
font-size:16px;
font-style:italic;
}



/* CONTATO */

#interna.contato h1 { 
background:url(imagens/contato-titTip.gif) no-repeat;
}

/* formulário de contato */

#interna.contato form {
width:350px;
height:400px;
background:url(imagens/contato-form-bg.png) no-repeat; /* background com as aspas */
padding-left:91px;
padding-top:31px;
}

#interna.contato label {
display:block;
margin-bottom:15px;
}

#interna.contato input, textarea {
width:350px;
border:none;

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#000;
font-size:14px;
}

#interna.contato input {height:38px; line-height:38px;}

#interna.contato input.btEnviar { /* estrutura de classes para fazer o botão Submit ser uma imagem. É semelhante ao IMAGE REPLACEMENT. */
float:right;
width:100px;
height:31px;
border:none;
background: transparent url(imagens/contato-form-btEnviar.png) no-repeat center;
overflow:hidden;
text-indent:-999px;

font-size:0;
display:block;
line-height:0;

cursor: pointer; /* seta o mouse como "mãozinha", pois não tinha overflow, e o mouse continuava seta quando passava por cima */
cursor: hand; /* para o IE 5.x */
}

.erro {color:#F00;} /* texto de erro do formulário */