/* Folha de Estilos - Casa Show Tintas
Ultima Alteração: 27/10/2007
Autor: Reginaldo Ornellas
*/

*, html, body {
margin:0;
padding:0;
}

body {
background: #CACAC9 url(images/bg.gif) top left repeat-x;
}

#container {
width: 740px;
margin: 0 auto;
overflow: auto;
display: block;
background: url(images/bg_conteudo.png) top left repeat-y;
}


#EditRegion1 {
width: 530px;
margin-top: 210px;
position: relative;
float: right;
z-index: 0;
background: #FFF;
padding-bottom: 40px;
text-align: center;
}


p.conteudo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
text-align: justify;
text-indent: 15px;
margin: 5px 15px;
}

.img_produtos {
width: auto;
height: auto;
padding: 0;
margin-top: 5px;
margin-right: 5px;
float: right;
z-index: 0;
}

/* ******************** TOP *********************** */

.top_logo {
width: 250px;
height: 120px;
/* background: url(images/top_logo.png) top left no-repeat; */
position: absolute;
margin-top: 10px;
margin-left: -110px;
z-index: 3;
}

.top_descricao {
width: 160px;
height: 75px;
/* background: url(images/top_logo.png) top left no-repeat; */
position: absolute;
margin-top: 110px;
margin-left: -80px;
z-index: 2;
}

.top_foto {
width: 430px;
height: 235px;
position: absolute;
margin-top: -220px;
margin-left: 40px;
z-index: 5;
}

.colorindo_sua_vida {
width: 530px;
height: 100px;
position: relative;
margin: 0;
}

#box_full {
width: 515px;
height: 140px;
position: relative;
margin: 5px auto;
clear: right;
border: 1px dotted #CCC;
}

#box_full p {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
margin: 5px 10px;
text-indent: 5px;
text-align: center;
}


.box_cores {
background: url(images/banner_cores.jpg) center center no-repeat;
border: 1px dotted #09F;
}
.box_tintometrica {
background: url(images/banner_tintometrica.jpg) center center no-repeat;
border: 1px dotted #CCC;
}
.box_materiais_diversos {
background: url(images/banner_material_diversos.jpg) center center no-repeat;
border: 1px dotted #CCC;
}

#box_half {
width: 255px;
height: 140px;
position: relative;
float: right;
margin: 5px;
}

.box_curso {
background: url(images/banner_curso_pintura.jpg) center center no-repeat;
}
.box_material_artesanato {
background: url(images/banner_material_pintura.jpg) center center no-repeat;
}

ul.conteudo {
margin-left: 20px;
margin-top: 10px;
text-align: left;
clear: left;
}
	
li.conteudo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
line-height: 20px;
list-style: square;
}


/* ******************** M E N U *********************** */

#menu {
width:180px;
margin: 200px auto 0;
}

#menu ul.menu {
margin-left: 0;
}
	
#menu ul.menu li {
list-style:none;
}

#menu ul.menu li a {
clear:left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
text-indent: 20px;
color:#FFF;
text-align: left;
text-decoration: none;
font-weight: bold;
display: block;
width: 180px;
height: 40px;
line-height: 40px; /* usando o mesmo valor de 'height' eu centralizo a palavra na vertical */
background: url(images/btn_menu.gif) bottom center no-repeat;
}

#menu ul.menu a:hover{
background: url(images/btn_menu.gif) top center no-repeat;
}

/* ******************** LEFT BAR *********************** */

#barra {
width: 205px;
height: auto;
position: relative;
float: left;
margin: 0 auto 0 5px;
padding-bottom: 10px;
text-align: center;
}

#previsao_tempo {
width:180px;
position: relative;
margin: 10px auto 0;
text-align: center;
vertical-align: bottom;
}


/* ******************** CENTRAL BAR *********************** */

#box {
width:520px;
height: auto;
position: relative;
clear: right;
margin: 5px 5px auto auto;
}


/* ******************** RIGHT BAR *********************** */

#box_third_right {
text-align: center;
width:170px;
position: relative;
float: right;
margin: 5px;
border: 1px dotted #CCC;
padding-bottom: 5px;
}

h1.produtos_tintas_residenciais {
width: auto;
height: 45px;
margin: 0 auto;
clear: both;
text-align: left;
background: url(images/h1_produtos_residenciais.png) top left no-repeat;
}
h1.produtos_tintas_artesanato {
width: auto;
height: 45px;
margin: 0 auto;
clear: both;
text-align: left;
background: url(images/h1_produtos_artesanato.png) top left no-repeat;
}
h1.produtos_mat_eletrico {
width: auto;
height: 45px;
margin: 0 auto;
clear: both;
text-align: left;
background: url(images/h1_produtos_eletrico.png) top left no-repeat;
}
h1.produtos_mat_hidraulico {
width: auto;
height: 45px;
margin: 0 auto;
clear: both;
text-align: left;
background: url(images/h1_produtos_hidraulico.png) top left no-repeat;
}
h1.produtos_mat_construcao {
width: auto;
height: 45px;
margin: 0 auto;
clear: both;
text-align: left;
background: url(images/h1_produtos_mat_contrucao.png) top left no-repeat;
}
h1.produtos_ferramentas {
width: auto;
height: 45px;
margin: 0 auto;
clear: both;
text-align: left;
background: url(images/h1_produtos_ferragens.png) top left no-repeat;
}


/* ============== FORMULARIO CONTATO ====================== */

#div_form_contato {
width: 530px;
height: 325px;
background: #999 url(images/bg_form_contato.jpg) top left no-repeat;
float: right;
}

#formulario_contato {
width: 300px;
height: auto;
overflow: hidden;
margin: 5px;
float: right;
}

#formulario_contato label {
width: 100px;
height: auto;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color:#FFF;
text-align: right;
margin: 2px auto 2px 5px;
}

#formulario_contato input, textarea {
background:#FFF; /* a cor do fundo dos três campos */
border:1px inset #CCC;/* Borda dos Campos 'text-area' */
width: 180px;
float: left;
margin: 2px auto 2px 5px;
}

#formulario_contato input.botao {
border:1px outset #CCC;/* Borda dos Campos 'text-area' */
width: 80px;
clear: both;
float:none;
margin: 5px auto;
}


#formulario_contato h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: small;
text-align: center;
color: #FF0;
padding: 5px auto;
clear: left;
}

.mapa {
width: 515px;
height: 360px;
clear: both;
float: right;
margin: 20px 5px;
border: 2px inset #CCC;
}

.alinhar_direita {
width: auto;
height: auto;
float: right;
margin: 5px;
}

.alinhar_esquerda {
width: auto;
height: auto;
float: left;
margin: 5px;
}

.alinhar_centralizado {
width: auto;
height: auto;
margin: 5px auto 5px auto;
}

#footer {
clear: both;
width: 740px;
height: 50px;
margin: 0;
background: url(images/bg_footer.jpg) top left no-repeat;
text-align: center;
}

#footer p.endereco {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
line-height: 40px;
}