/*--- Elementos comuns ---*/

* { margin: 0; padding: 0; border: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 12px }
BODY { margin: 0; background-image: url(../img/bg-corre.gif); background-repeat: repeat-x; text-align: center }

/*--- Estilo dos elementos ---*/
a {	color: #000; text-decoration: none }
a:hover { color: #00a0a1; text-decoration: none }
li { list-style: none }
input, textarea, select { background-color: #F9F9F9; border: 1px solid #999999 }
p { line-height:20px; padding:0} 

h1{ font-size: 28px; margin-bottom: 18px; font-weight: bold; color: #008084 }

h2{ font-size: 28px; margin-bottom: 18px; font-weight: bold; color: #008084 }
h2 a{ font-size: 28px; margin-bottom: 18px; font-weight: bold; color: #008084 }
h2 a :hover { text-decoration: underline }

h3{ clear: both; font-size: 14px; margin: 6px 0 }

.left{ float: left }
.right{ float: right }
.clear{ clear:both }

.red {color:#F00; font-size:9px; vertical-align:middle !important}

/* Envolve o site inteiro */
#principal { margin-left: auto; margin-right: auto; width: 960px; text-align: left }
#principal:after { content:"."; display:block; clear:both; visibility:hidden; height:0; overflow:hidden } 

div#menu { background:url(../img/bg-menu.gif) no-repeat; margin-top: 39px; float: left }
div#menu:after { content:"."; display:block; clear:both; visibility:hidden; height:0; overflow:hidden } 
div#menu ul { margin-left: 16px; line-height: 36px}
div#menu ul li a { font-weight: bold; font-size: 16px }

img#logo { margin: 12px 0 16px 18px }
img#topo-telefone { float: right; margin-top: 3px }
img#orcamento { margin-top: 20px; float: left }


/*---  Chamadas  ---*/
#linha-chamada:after { content:"."; display:block; clear:both; visibility:hidden; height:0; overflow:hidden } 
#linha-chamada { height: 100% }

	div#chamada-empresa { width: 450px; float: left; margin-top: 22px; margin-bottom: 32px }
	div#chamada-empresa img { float: left; margin-left: -6px; margin-right: -1px; margin-top: -1px }
	div#chamada-empresa p { float:left; margin-left:12px; margin-top:45px; width:275px }

	div#chamada-produtos { width: 450px; float: right; margin-top: 22px; margin-bottom: 32px }
	div#chamada-produtos h2 { float: right }
	div#chamada-produtos img { float: right; margin-top: 6px }
	div#chamada-produtos p {float:left; margin-right:12px; margin-top:45px; text-align:right; width:275px }

/*--- Rodape ---*/ 
div#rodape{ background-image: url(../img/bg-rodape.gif); background-repeat: repeat-x; background-color: #101010; height: 270px; margin-top:30px }
div#rodape p { color: #FFF }
div#rodape-conteudo { width: 960px; margin-left: auto; margin-right: auto; text-align: left }

	div#rodape-dicas { width: 620px; float: left }
	div#rodape-dicas h2 { color: #FFF; margin-top: 28px; margin-bottom: 12px }
	div#rodape-dicas h3 a { color: #00a0a1; font-size: 22px; margin-top: 22px; margin-bottom: 10px }
	div#rodape-dicas a { color: #FFF; float: left; border-bottom: 1px dotted #FFF; font-style: italic }
	div#rodape-dicas a:hover { color: #00a0a1 }
	div#rodape-dicas p {clear:both; margin-bottom:15px}
	
	div#rodape-onde-estamos { width: 250px; float: right}
	div#rodape-onde-estamos h2 { color: #FFF; margin-top: 28px; margin-bottom: 12px; float: right }
	div#rodape-onde-estamos h3 { color: #00a0a1; font-size: 22px; margin-top: 32px; margin-bottom: 10px }
	div#rodape-onde-estamos p { margin-top: 10px; text-align: right; float: right }
	div#rodape-onde-estamos a { color: #FFF; clear: both; float: left; margin-top: 20px; font-style: italic }
	div#rodape-onde-estamos a:hover { color: #00a0a1 }

/*--- Empresa ---*/ 
div#empresa { width: 610px; margin: 28px 0 21px 0; float: right; min-height:420px}
.box {background-color:#FFF; padding:5px 10px; position:relative; width:588px}
.box .boxTop {background: url(../img/boxTop.gif) no-repeat; width:608px; height:5px; position:absolute; top:0; left:0}
.boxBottom {background: url(../img/boxBottom.gif) no-repeat; width:608px; height:5px}
.box ul li {background: url(../img/marcador.gif) no-repeat 0 4px; margin:10px 0; padding:0 0 0 13px}

.box #logomarcas { background-color: #E1EAF2; border: 1px solid #E1EAF2; float: left; padding: 5px; text-align: center; width: 575px }
.box #logomarcas ul {float:left; text-align:center; width:100%}
.box #logomarcas ul li {background:none; float:left; margin:0 7px; padding:0}

div#empresa .fade {height:198px; margin:0 0 20px 0}

/*--- Produtos ---*/ 
div#produtos { width: 610px; margin: 28px 0 21px 0; float: right; min-height:420px }
div#produtos p { margin-bottom: 15px } 
div#produtos ul { /*margin-right: 100px; width: 160px;*/ float: left } /*se tiver segunda  coluna, ativa o css comentado*/
div#produtos ul li{ /*margin: 14px 0 14px 0; font-weight: bold; font-size: 14px*/ }

/*--- Localizaçao ---*/ 
div#localizacao { width: 610px; margin: 28px 0 21px 0; float: right; min-height:420px}
.mapa { height:364px; width:588px}

/*--- Trabalhe Conosco ---*/
div#Trabalhe { width: 610px; margin: 28px 0 21px 0; float: right; min-height:420px}

/*--- Contato ---*/ 
div#form-contato { width: 610px; margin: 28px 0 21px 0; float: right; min-height:420px}
div#form-contato p { float: left; margin-bottom: 20px}
div#form-contato .box {background-color:#FFF; padding:5px 10px; position:relative; width:588px; _width:608px}
div#form-contato .boxTop {background: url(../img/boxTop.gif) no-repeat; width:608px; height:5px; _margin-bottom:-10px}
form#formulario { clear:both; margin:0 auto; padding:0; width:327px;  _margin-left:130px}
form#formulario input { height: 23px; padding:3px 0 0 3px}
form#formulario .botao {margin-left:13px; padding:0}
input#btn-enviar { width: 100px }
div#form-contato .box ul li { background-image:none}
div#mensagem-enviado {float:left; width:100%}
div#mensagem-enviado p {margin:0; text-align:center; width:100%}


/* Orcamento de Pecas */
.inline {display:inline-block}
.Orcamento .Titulo {background-color:#f1f6f9; display:block; font-weight:bold; margin:5px 0; padding:4px 10px}
.Orcamento .grade {margin:0 auto; width:470px}
.Orcamento .grade * {vertical-align:top}
.Orcamento .campo {margin:6px 0; vertical-align:bottom}
.Orcamento .boxImportante {background-color:#F9F9F9; padding:10px}

.height44 {height:44px}

.checkbox {border:0}

.w147 {width:147px}
.w150 {width:150px}
.w460 {width:460px}
.mt15 {margin-top:15px !important} 
.mr5 {margin-right:5px}
.ml5 {margin-left:5px}
.pr5 {padding-right:5px}
.centro {text-align: center}
.btEnviar {height:23px; width:100px}

/* Formularios de Adicionar, Editar, etc. Eles devem usar os atributos abaixo por causa da validacao. O 'margin-bottom' dos outros formularios, está no input, textarea, etc, mas nos formularios que tem validacao por jQuery tem que ter esse "margin-bottom" na lista (li). Todos esses formularios, devem ter o id abaixo! */
form#formularios input, form#formularios select { margin: 0 !important}
form#formularios ul li, ul#visualiza-registro li { margin-bottom: 17px}
form#formularios label.error { font-size: 10px; color: #F00; display:block}
input#_btn-adicionar-editar { height: 29px; width: 80px}
li.marginBottom0 { margin-bottom: 0 !important}
ul#visualiza-registro li strong { display: block; font-size: 14px}

/* Dicas uteis */
h2#titulo-dica-util { margin: 0 0 -6px 0; font-size: 1.4em }
h2#titulo-dica-util * { font-size: 1em }
h2#titulo-dica-util *:hover { color: #00a0a1 }
h3#data-dica-util { font-size: 0.9em; font-weight: normal }
h4#breve-descricao-dica-util { font-size: 1em; font-weight: normal; font-style: italic; margin-top: 15px }
div#descricao-dica-util { margin-top: 15px }
div#descricao-dica-util * { text-align: justify }
div#descricao-dica-util h2 { font-size: 14px; color: #000 }
div#descricao-dica-util table, div#descricao-dica-util table tr td { border: 1px solid #000 }
div#descricao-dica-util table tr th { background: #F2F2F2 }
div#descricao-dica-util p { margin-bottom: 13px }
div#descricao-dica-util ol li { list-style: decimal inside; background: none }
div#descricao-dica-util ul li { list-style: disc inside; background: none }
div#descricao-dica-util ul, div#descricao-dica-util ol { margin-bottom: 13px }

	/* Listagem */
	ul#listagem-dicas-uteis { margin-top: 20px }
	div.data-listagem { background: #E3ECF3; width: 70px; height: 31px; text-align: center; font-weight: bold; float: left; margin: 2px 10px 0 0; padding-top: 17px; border: 1px solid #CEE1EF }
	ul#listagem-dicas-uteis li { border-bottom: 1px dotted #000; margin-bottom: 20px; height: 60px }
	ul#listagem-dicas-uteis li h4 a { color: #008084 }

	/* Paginacao */
	div#paginacao { padding-top: 15px; height: 30px; clear: both; float: right }
	div#paginacao ul li * { font-size: 12px }
	div#paginacao ul li { background: none; padding-left: 3px }
	div#paginacao ul li a { padding: 3px 10px 4px 8px; display: block; background: url(../img/bg-btn-pag.gif) no-repeat }
	div#paginacao ul li a:hover { background: url(../img/bg-btn-pag-hover.gif) no-repeat; color: #000 }
	li#prox-paginacao a, li#ant-paginacao a { background: url(../img/bg-prox-ant-pag.gif) no-repeat !important }
	li#prox-paginacao a:hover, li#ant-paginacao a:hover { background: url(../img/bg-prox-ant-pag-hover.gif) no-repeat !important }
	li.numero-paginacao, li#numero-paginacao-atual, li#ant-paginacao, li#prox-paginacao, li.reticencias { float: left }
	li.numero-paginacao, li#numero-paginacao-atual, li.reticencias { margin-left: 5px }
	li#numero-paginacao-atual { padding-top: 3px !important }
	li.reticencias { font-weight: bold; padding: 6px 1px 0 0 !important }
	#ant-paginacao { margin-right: 10px }
	li#prox-paginacao { margin-left: 10px }
	li#numero-paginacao-atual { padding: 1px 8px }
	
/* Links Úteis */
div#produtos ul#links-uteis { float: none }
div#produtos ul#links-uteis li { background: none; margin: 0; padding: 0 }
div#produtos ul#links-uteis li h3 { margin-bottom: 15px }
div#produtos ul#links-uteis li ul { float: none; margin: 0 0 15px 15px }
div#produtos ul#links-uteis li ul li { margin-bottom: 10px }
div#produtos ul#links-uteis li ul li a { color: #00a0a1; font-weight: bold }
div#produtos ul#links-uteis li ul li a:hover { text-decoration: underline }

.cloudcarousel {border: 1px solid #eee;}

