/* --- Agosto de 2006 -------------------------------------------------- */
/* CSS Layout - Móveis Klóss - www.moveiskloss.com.br                    */
/* Desenvolvido por: Rael B. Riolino - iNovaStudio - www.inovastudio.com */
/* --------------------------------------------------------------------- */


/* ### PADRÃO ### */

*{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; border:0; margin:0; padding:0;}
body{margin:0; background:#FFF URL(../_img/sup-esq.gif) repeat-x;}
p{color:#666; margin-top:10px;}
h1, h2{
	float:right;
	text-align:right;
	font-size:16px;
	font-weight:bold;
	font-style:italic;
	color:#a1241e;
	margin:0px 5px 10px 0px;
}
h2{width:750px;}

/* ### DIVs ### */


#divisao{
	position:absolute;
	width:50%;
	left:50%;
	background:#FFF URL(../_img/sup-dir.gif) repeat-x;
	height:200px;
}

#corpo{
	width:100%;
	height:200px;
	display:block;
	position:absolute;
	margin-left:-387px;
	background:#FFF URL(../_img/sup-dir.gif) repeat-x;
}





/* ### SUPERIOR ### */

#superior{
	display:block;
	width:770px;
	height:135px;
	background:#FFF URL(../_img/sup-centro.gif) repeat-x;
}

#logo{
	position:absolute;
	top:25px;
}

#menu{position:absolute; top:97px; left:0px; width:770px;}
#menu ul{list-style:none; float:right;}
#menu li{display:inline; padding: 0px 5px; margin: 0px 5px;}
#menu li a{text-decoration:none; padding-bottom:5px; font-weight:bold; color:#666;}
#menu li a:hover{color:#a1241e;}

#showroom .showroom, #empresa .empresa, #produtos .produtos, #servicos .servicos, #contato .contato{border-bottom:4px solid #EEE;}






/* ### CENTRO ### */

#centro{
	width:770px;
}

.txt{
	clear:both;
	display:block;
	border-top:1px dashed #DDD;
	text-align:justify;
	float:right;
	margin:0px 8px 20px 10px;
}
.txt.tempresa{width:550px;padding:0px 0px 10px 200px;background:#FFF url(../_img/empresa.jpg) no-repeat 30px 10px;}

/* ### RODAPE ### */

#rodape{
	width:100%;
	margin-left:52px;
	display:block;
	clear:both;
}
#rodape address{
	width:500px;
	font-size:10px;
	color:#666;
	font-style:normal;
	padding:2px 0px 0px 70px;
}
.rbarra{
	padding-right:335px;
	display:block;
	width:100%; height:14px;
	background: #EEE url(../_img/inf-esq.gif) no-repeat top left;
}



/* ### SHOWROOM ### */

#srdescr{padding:10px 0px; width:600px;}

#srlista{
	text-align:center;
	width:100%;
	height:210px;
	white-space:nowrap;
	margin-bottom:10px;
	overflow:auto;
}


/* ### PRODUTOS ### */

.linha{
	display:block;
	width:350px; height:160px;
	padding:10px 0px 10px 0px;
	border-top:1px dashed #CCC;
	border-bottom:1px dashed #CCC;
	margin:0px 10px 10px 10px;
}
.linha.institucional{float:right;}
.linha.residencial{float:left; margin-top:28px;}
.linha span{padding-top:10px; color:#999; display:block;}
.linha a{text-decoration:none;}

#prodlist{padding:10px 0px; clear:both; display:block;}

.proditem{
	width:190px; height:190px;
	display:block;
	text-align:center;
	float:left;
	padding:10px 0px 5px 0px;
	margin:5px 0px;
	border: 1px solid #EEE;
}
.proditem img{margin-bottom:5px;}
.proditem a{text-decoration:none; color:#000; display:block;}
.proditem a:hover span{border:1px solid #EEE; background-color:#F6F6F6;}

#medidas{float:left;}
#medidas table{width:200px;}
#medidas tbody th, tbody td{border-bottom:1px solid #CCC; padding:5px 0px;}
#medidas tbody th{text-align:left; padding-left:20px;}
#medidas tbody td{text-align:center;}
#medidas caption{font-size:14px; color:#333; padding:5px 0px;}

/* icones */
.altcadeira{background:#FFF url(../_img/_altcadeira.gif) no-repeat 2px;}
.altassent{background:#FFF url(../_img/_altassento.gif) no-repeat 2px;}
.comprimento{background:#FFF url(../_img/_comprimento.gif) no-repeat 2px;}
.largura{background:#FFF url(../_img/_largura.gif) no-repeat 2px;}
.altmesa{background:#FFF url(../_img/_altmesa.gif) no-repeat 2px;}
.comprmesa{background:#FFF url(../_img/_comprimentomes.gif) no-repeat 2px;}
.largmesa{background:#FFF url(../_img/_largurames.gif) no-repeat 2px;}
.diamesa{background:#FFF url(../_img/_diametromes.gif) no-repeat 2px;}

.prodimg{
	float:left;
	display:block;
	width:200px; height:200px;
	text-align:center;
	padding:20px;
	margin:-40px 0px 10px 0px;
}

#prodcores{padding:0px 10px; float:right; width:270px; margin-bottom:10px; display:block;}
#prodcores ul{float:right;}
#prodcores h3{font-size:12px; margin:4px 0px 4px 3px;}
#prodcores li{display:block; float:right; margin:0px 2px; margin:2px solid #FFF; list-style:none; text-align:center; width:85px;}
#prodcores li span{font-size:10px;}

#proddescr{text-align:justify; float:right; padding:0px 10px 10px 10px; border:1px solid #EEE; width:244px; margin:15px 10px 0px 0px; _margin:0px 7px 0px 0px;}

#palha{
	width:120px; height:45px;
	padding:5px 10px 5px 65px;
	border:1px solid #EEE;
	float:left; margin-top:5px;
	background: #FFF url(../_img/palha.gif) no-repeat 2px 2px;
}
#palha h3{font-size:12px; }
#palha span{font-size:12px;}

/* ### CONTATO ### */

#formulario{margin:10px 10px 0px 10px; width:700px;}

.campos{float:left; display:block; width:380px;}
.mensagem{float:left; display: block; width:280px; padding:0px 0px 10px 20px; _padding-bottom:0px;}

#formulario label{display:block; width:100px; padding:2px 5px 2px 30px; margin:2px 5px; float:left; clear:both; font-weight:bold; color:#666; text-align:right; background:#F3F3F3 url(../_img/form-corte.gif) no-repeat left top;}
#formulario input{display:block; float:left; padding:2px 0px; margin:2px 5px; border-bottom:1px dashed #CCC; color:#a1241e;}
#formulario select{display:block; float:left; padding: 4px 0px 0px 0px; margin: 2px 5px;}
#formulario textarea{display:block; border:1px dashed #CCC; padding:5px; margin:2px 0px 2px 5px; width:275px; height:110px; color:#a1241e;}

#formulario span{float:left; font-size:14px; color:#666; padding-top:4px;}
#formulario strong{text-align:center; background-color:#F6F6F6; padding:2px 0px; margin:0px 5px 10px 5px; color:#666; display:block;}
#formulario .ddd{width:20px; text-align:center;}
#formulario .imensagem{width:260px; text-align:right; float:none; margin:2px 0px;}

.botoes{ clear:both; display:block; margin:0px 5px; padding:10px 2px 0px 2px; text-align:right; border-top:1px solid #EEE;}
.botoes button{padding:1px 5px; width:240px;}