html { min-height: 100%; margin-bottom: 1px; }

body {
	color: black;
	background-color: white;
	margin: 0px;
	padding: 0px;
	font-family: Georgia,"Times New Roman", Times, serif;
	font-size: 11px;
}

p {
	margin: 0px 5px 0px 20px;
	padding: 0px;
}

img {
	border:none;
	margin: 0px;
}

h2 {
	font-size:1em;
}

a:link { color: #32439B; text-decoration: none; }
a:active { color: #32439B; text-decoration: none; }
a:visited { color: #32439B; text-decoration: underline; }
a:hover { color: #ffc400; text-decoration: none;}

/* area de nfiguracao do layout*/
#site {
	width: 770px;
	margin: 0px auto;
	padding: 0px;
	}
#coluna-esquerda{
	width: 215px;
	margin-right: 10px;
	padding: 0px;
	float: left;
	}
#coluna-meio{
	width: 320px;
    padding: 0px;
	float: right;
	}

#coluna-direita{
	width: 215px;
	margin-left: 10px;
	padding: 0px;
	float: right;
	}

#coluna-esquerda-cnt {
	width: 205px;
	padding: 0px 0px 0px 10px;
	margin: 0px;
	float: left;
}

#coluna-direita-cnt {
	width: 205px;
	padding: 0px 0px 0px 10px;
	margin: 0px;
	float: left;
}

#rodape-site {
	clear:both;
	width:770px;
	height:50px;
	text-align:center;
	margin:10px 0px;
}

/*-----------------------------*/
/*area de nfiguração do menu*/
/*---------------------------*/

/*tags muns aos dois menus */
#menu-esquerda, #menu-direita {
	width: 215px;
	height: 40px;
	margin: 0px;
	padding: 8px 0px 0px 0px;	
	font-family: helvetica, arial, sans-serif;
	text-align: center;
	font-size:1.1em;
	}

#menu-esquerda img, #menu-direita img {
	vertical-align: middle;
	}

#menu-esquerda a, #menu-direita a{
	text-decoration: none;
	font-size: 1em;
	}

#menu-esquerda a:hover, #menu-direita a:hover{
	text-decoration: underline;
	}


/*especificidades de cada menu*/
#menu-esquerda{	background: url(../images/menu-esquerda.jpg) no-repeat;	}
	
#menu-esquerda a { color: #000000; }

#menu-direita{	background: url(../images/menu-direita.jpg) no-repeat;	float: right; }

#menu-direita a{ color: #ffffff; }

/*area de configuracao do pensamento ou frase que define a secao*/
#pensamento {
	background: url(../images/abre-aspas.jpg) no-repeat left top;
	display: block;
	padding: 20px 0px 0px 45px;
	font-size: 1.4em;
	font-weight: normal;
	margin: 20px auto;
	}

#pensamento span {
	background: url(../images/fecha-aspas.jpg) no-repeat right bottom;
	display: block;
	padding: 0px 45px 20px 0px;
	}
#pensamento span em {
	font-size:.8em;
	font-weight:normal;
	display:block;
	text-align:right;
	margin-top: 1em;
}

/*----------------------------------*/
/*area de configuracao dos headers */
/*--------------------------------*/

/*propriedades muns a todos os headers*/
h1#aempresa, h1#contato, h1#odesign, h1#ahtmlizacao, h1#ati, h1#aequipe, h1#ostextos, h1#osservicos, h1#osprodutos, h1#asareas, h1#omapa, h1#alocalizacao, h1#agaleria, h1#osclientes, h1#oseuarquivo, h1#oseudesign, h1#onossodigo, h1#parceiros, h1#obrasao {
	background-repeat: no-repeat;
	background-position: left top;
	width:100%;
	height: 31px;
	padding: 0px;
	margin: 0px 0px 5px 0px;
	}

h1#aempresa span, h1#contato span, h1#odesign span, h1#ahtmlizacao span, h1#ati span, h1#aequipe span, h1#ostextos span, h1#osservicos span, h1#osprodutos span, h1#asareas span, h1#omapa span, h1#alocalizacao span, h1#agaleria span, h1#osclientes span, h1#oseuarquivo span, h1#oseudesign span, h1#onossodigo span, h1#parceiros span, h1#obrasao span, h1#portfolio span	{
	display: none
	}

h1#portfolio {
	background-repeat: no-repeat;
	background-position: left top;
	width:100%;
	height: 31px;
	padding: 0px;
	margin:10px 0px 5px 0px;
	}

/*headers principais*/
h1#aempresa { 
	background-image: url(../images/h1-empresa.jpg);
	}

h1#contato {
	background-image: url(../images/h1-ntato.jpg);
	}

h1#odesign { 
	background-image: url(../images/h1-design.jpg);
	}

h1#ahtmlizacao { 
	background-image: url(../images/h1-htmlizacao.jpg);
	}

h1#ati { 
	background-image: url(../images/h1-ti.jpg);
	}
	
/*headers secundarios ou de seções */
h1#aequipe { 
	background-image: url(../images/h1-equipe.jpg);
	}
	
h1#ostextos { 
	background-image: url(../images/h1-textos.jpg);
	}	
	
h1#osservicos { 
	background-image: url(../images/h1-servicos.jpg);
	}		
	
h1#osprodutos { 
	background-image: url(../images/h1-produtos.jpg);
	}			
	
h1#asareas { 
	background-image: url(../images/h1-areas.jpg);
	}				
	
h1#omapa { 
	background-image: url(../images/h1-mapa.jpg);
	}		

h1#alocalizacao { 
	background-image: url(../images/h1-localizacao.jpg);
	}						
	
h1#agaleria { 
	background-image: url(../images/h1-galeria.jpg);
	}		

h1#osclientes { 
	background-image: url(../images/h1-clientes.jpg);
	}			
	
h1#oseuarquivo { 
	background-image: url(../images/h1-seuarquivo.jpg);
	}		

h1#oseudesign { 
	background-image: url(../images/h1-seudesign.jpg);
	}		
	
h1#onossodigo { 
	background-image: url(../images/h1-nossodigo.jpg);
	}
h1#parceiros {
	background-image: url(../images/h1-parceiros.jpg);
}

h1#obrasao {
	background-image: url(../images/h1-obrasao.jpg);
}

h1#portfolio { 
	background-image: url(../images/h1-portfolio.gif);
}

/* ----------------------------------------------------------- */
/*tags de configuracao dos textos dentro das areas de conteudo*/
/* --------------------------------------------------------- */

/*texto*/
#coluna-esquerda-cnt big, #coluna-direita-cnt big {
	font-size:1.3em;
	font-weight: normal;
	padding: 0px;
	margin: 0px;
}

#coluna-esquerda-cnt p, #coluna-direita-cnt p {
	font-size: 1em;
	padding: 0px;
	margin: 0 0 1em 0;
	font-weight: normal;
	}
/*list ou list+link*/
#coluna-esquerda-cnt ul, #coluna-direita-cnt ul, #coluna-central-cnt ul {
	padding: 0px; 
	margin: 0px 0px 1em 0px;
	}
	
#coluna-esquerda-cnt ul li , #coluna-direita-cnt ul li, #coluna-central-cnt ul li{
	background: url(../images/bullet-list-2.jpg) no-repeat left top;
	list-style-type:none;
	padding-left: 15px;
	}
	
ul.links li a {	
	font-size: 1em;
	background: url(../images/bullet-list.jpg) no-repeat left top;
	padding-left: 15px;
    margin-left: -15px;
    list-style-type: none;
	}

ul.links li a:hover {	
	background: url(../images/bullet-list-3.jpg) no-repeat left top; 
	}

/*separadores ou quebra de linha*/	
#coluna-esquerda-cnt br, #coluna-direita-cnt br, #coluna-central-cnt br{
	padding-bottom: 10px;
	clear:both;
	}

div.barra-azul, div.barra-amarela {
	display: block;
	width: 111px;
	height: 37px;
	margin: 0px auto;
	padding: 0px;
	}

	div.barra-azul {
		background: url(../images/barra-azul.jpg) no-repeat left top;
	}
	div.barra-amarela {
		background: url(../images/barra-amarela.jpg) no-repeat left top;
	}
	
img.vinne-azul {
	display:block;
	margin:5px auto 10px auto;
	padding:0px;
}

/* formularios e botoes*/
input {
	width: 190px;
	background: url(../images/bg-input.jpg) repeat-x left top;
	border: solid gray 1px;
}

textarea {
	width: 190px;
	background: url(../images/bg-input.jpg) repeat-x left top;
	border: solid gray 1px;
}

.btn-input {
	background: url(../images/bg-botoes.jpg) no-repeat left top;
	text-align: right;
	float: right;
	width: 70px;
	height: 37px;
	border: 0;
	padding-right: 9px;
	margin-right: 9px;
	margin-left: 0px;
	margin-top: 10px;
	}
	
/* ------------------------------------------------ */	
/* especificidades do layout para a secao de design*/
/* ---------------------------------------------- */
a.galeria-exp {
	background:url(../images/btn-galleria-pic-vect.jpg) no-repeat left top;
	width:183px;
	height:123px;
	display:block;
	}
	
a.galeria-exp span {
	font-size:1em;
	margin:0px;
	padding:70px 20px 15px 10px;
	display:block;
	color:#ffffff;
	text-align:right;
	}
	
a.galeria-exp:hover span {
	color:#ffc400;
	}

a.portfolio-clientes{
	background:url(../images/btn-portfolio-link.gif) no-repeat left top;
	width:202px;
	height:141px;
	display:block;
	float: left;	
	}

a.portfolio-clientes span{
	font-size:1em;
	margin:0px;
	padding:90px 10px 10px 50px;
	display:block;
	color:#000000;
	}

a.portfolio-clientes:hover span {
	color:#ffffff;
	}
	
a.cliente-lista, a.cliente-lista:hover{
	float: left;
	padding: 2px;
	margin: 0px 2px;
	}

a.cliente-lista{
	border: solid 2px #ffffff; 	
	background-color:#c2c2c2; 	
	}

a.cliente-lista:hover {
	border: solid 2px #FFC400; 	
	background-color:#f2f2f2; 	
	}

a.btn-portfolio{
	background-image:url(../images/btn-portfolio.gif);
	background-position:left top;
	background-repeat:no-repeat;
	display:block;
	height:80px;
	width:201px;
	margin:0px auto;
	position:relative;
	text-decoration:none;	
	}
	a.btn-portfolio p {
		font-size:9px;
		font-family:verdana, arial;
		position:relative;
		margin-left:105px;
		top:30px;
	}
	
a.btn-portfolio:hover {
	color:black;
	text-decoration:underline;
}
/*navegacao e configuracao do portfolio*/

#portfolio-box {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 600px;
	height:400px;
	border:solid #ffffff 5px;
	margin-left: -300px;
	margin-top: -200px;
	padding:0px 10px;
	background-color:#0060b6;	
}

/* ------------------------------------------------ */	
/* especificidades do layout para a secao de design*/
/* ---------------------------------------------- */
	
/*navegacao no portfolio*/

#panel-container {
  width: 320px;
  height: 252px;
  margin:0px 0px;
  padding:19px 0px 0px 0px;
  background-image: url(../images/panel2.gif);
  background-position:left top;
  background-repeat:no-repeat;
  float:left;
}

#panel {
  width: 286px;
  display:block;
  height: 215px;
  margin-left: auto;
  margin-right:auto;
  background-image: url(../images/portfolio.jpg);
  background-repeat: no-repeat;
  background-position:left top;
}

#reference-title {
	margin:0px;
	width:285px;
	position:relative;
	left:5px;
	display:block;
	border:dashed #000000 1px;
	background-color:#ccdff0;
	padding:2px 10px;
	text-align:center;	
	float:left;
	color:#000000;
}

#content span {
  	cursor:pointer;
 	text-decoration: none;
  	margin-right:8px;
	border: solid black 1px; 
	padding:2px;
	line-height:3em; 
}

.references {
	display:block;
	float:right;
	width:250px;
}

a.close {
	position:absolute;
	left:592px;
	top:0;
	display:block;
	z-index:100;
	text-align:center;
	padding:5px;
	border-left:solid #f1f1f1 5px;
	border-bottom:solid #f1f1f1 5px;
	background-color:#f2f2f2;
	font-size:1.5em;
	font-weight:bolder;
	color:#000000;
	text-decoration:none;
	font-family:verdana,arial,helvetica,sans-serif;
}

a.close:hover {
	color:#f2f2f2;
	background-color:#595959;
}

/* portfolio box jobs...*/ 

#box {position:absolute; left:340px; top:47px; z-index:1;}

#up {position:absolute; left:575px; top:47px; z-index:2; cursor:pointer;}

#track{position:absolute; left:575px; top:72px; z-index:3;}

#down{position:absolute; left:575px; top:350px; z-index:5; cursor:pointer;}

#contentMask{position:absolute; left:355px; top:60px; width:198px; height:295px; clip:rect(0,198px,295px,0); overflow:hidden; z-index:6;}

#content{position:absolute; left:0; top:0; width:198px;}


/*configuracao para os box da area da empresa*/

div#box-0, div#box-1, div#box-2, div#box-3 {
	display:block; 
	clear:both;
}

/* ------------------------------- */
/* area de configuracao do ropape */
/* ----------------------------- */

#rodape-site a {
	text-decoration:none;
	margin:10px 5px;
}

#rodape-site a img {
	border:none;
	margin:0;
	padding:0;
}