﻿/*
PROPRIETÁRIO: DirectCall
AUTOR: Leandro Corso (leandro.corso@directcall.com.br / contato@leandrocorso.com)
CRIAÇÂO: 06/10/2009
ULTIMA ATUALIZAÇÃO: 26/10/2009 (Leandro Corso)
VERSÃO: 1.0

######################

IMPORTANTE
AO ALTERAR ESTE ARQUIVO INSIRA A DATA E SEU NOME NO CAMPO "CRIAÇÃO" NO INÍCIO

######################

ÍNDICE DESTE ARQUIVO:

1. CONFIGUGRAÇÕES INICIAIS
1.1 ZERAR TODOS AS MARGENS E PADDINGS
1.2 CONFIGURA O COMPORTAMENTO DE ROLLOVER DE TODOS OS LINKS
1.3 FORMATA O HTML E O BODY

2. CABEÇALHO
2.1 FORMATA O TOPO DO SITE
2.2 ÁREA DO CLIENTE

3. MENUS
3.1 MENU INSTITUCIONAL (TOPO)
3.2 MENU DE NAVEGAÇÃO (LADO ESQUERDO) - VERSÃO FLASH
3.3 MENU DE NAVEGAÇÃO (LADO ESQUERDO) - VERSÃO HTML
3.4 MENU DE IDIOMAS
3.5 ABAS

4. CONTEÚDO
4.1 TÍTULO DA SEÇÃO (PÁGINA ABERTA)
4.2 SUB-TÍTULOS DA SEÇÃO
4.3 CORPO DO SITE
4.3.1 FLASH
4.3.2 LISTAS
4.3.3 ESTILOS DE PARÁGRAFO

5. ÁREAS ESPECIAIS
5.1 TOOLTIP (NOTAS DE RODAPÉ)
5.2 VEJA TAMBÉM
5.3 COMPARE
5.4 PSEUDO CITAÇÕES
5.5 PÁGINA DE CIDADES DC

6. RODAPÉ
*/


/*
1. CONFIGUGRAÇÕES INICIAIS

1.1 ZERAR TODOS AS MARGENS E PADDINGS
*/

*{ margin:0; padding:0; }

/*
1.2 CONFIGURA O COMPORTAMENTO DE ROLLOVER DE TODOS OS LINKS
*/

a{ text-decoration:none; color:#06c; }
a:focus{ outline:none; }
a:hover{ text-decoration:underline; }
a img{ border:none; }

/*
1.3 FORMATA O HTML E O BODY
*/

html{ background:url(../imagens/cabecalho_bg0.png) center 0 repeat-x; }
html#lowProfile{ width:1000px; }

body{
	/*background:url(../imagens/footer_bg.png) bottom repeat-x;*/
	font:8pt Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font:11px Arial, Helvetica, sans-serif;
}

#container{
	width:980px;
	position:relative;
	left:50%;
	margin-left:-500px;
	padding:0 10px 10px 10px;
}


/*
2. CABEÇALHO

2.1 FORMATA O TOPO DO SITE
*/

#cabecalho{
	height:128px;
	background:url(../imagens/cabecalho_bg1.png) center top no-repeat;
}

h1 a{
	display:block;
	position:absolute;
	top:25px;
	left:17px;
}

/*
2.2 ÁREA DO CLIENTE
*/

#area_do_cliente{
	position:absolute;
	top:10px;
	right:15px;
	width:230px;
	height:80px;
	overflow:hidden;
	font-size:11px;
	color:#fff;
}

#area_do_cliente.extrato{ background:url(../imagens/area_do_cliente_bg_extrato.png) no-repeat; }
#area_do_cliente.busca{ background:url(../imagens/area_do_cliente_bg_busca.png) no-repeat; }
#area_do_cliente.extrato #busca{ display:none; }
#area_do_cliente.busca #extrato{ display:none; }
#area_do_cliente h3, #area_do_cliente label{ display:none; }
#area_do_cliente ul{ display:table; font-size:10px; }
#area_do_cliente li{
	display:table-cell;
	height:20px;
	vertical-align:middle;
	padding:0px 5px;
}

#area_do_cliente a{ color:#fff; }
#area_do_cliente form{ padding:5px 10px; }
#area_do_cliente form p{ margin:2px 0px; }

#area_do_cliente #area_cliente_login,
#area_do_cliente #area_cliente_senha,
#area_do_cliente #area_cliente_busca{
	width:160px;
	height:13px;
	border:1px solid #fff;
	background:url(../imagens/area_do_cliente_bg_input.png) repeat-x;
	font-size:11px;
	color:#666;
}

#area_do_cliente .ok{ position:relative; top:3px; }

/*
3. MENUS

3.1 MENU INSTITUCIONAL (TOPO)
*/

#institucional{
	float:right;
	display:block;
	position:relative;
	right:-10px;
	top:90px;
	font:11px Verdana, Arial, Helvetica, sans-serif;
}

#institucional li{
	float:left;
	padding:0px 10px 3px 10px;
	list-style:none;
	border-right:1px solid #900;
}

#institucional .oquevcprecisa{
	padding:0;
	border:0;
	position:absolute;
	margin:-27px 0 0 -150px;
}

#institucional .oquevcprecisa:hover,
#institucional .oquevcprecisa a.ie6lixo:hover{
	background:none;
}

#institucional .oquevcprecisa a{
}

#institucional li a{ float:left; color:#900; }
#institucional .oquevcprecisa a{ color:#fff; }

#institucional li:hover,
#institucional li.over{ background:#900; }

#institucional li:hover ul,
#institucional li.over ul{ display:block; }

#institucional li:hover a,
#institucional li.over a{ color:#fff; text-decoration:none; }

#institucional li:hover li a,
#institucional li.over li a{ color:#666; }

#institucional li ul{
	display:none;
	width:350px;
	position:absolute;
	margin:15px 0px 0px -11px;
	background:#fff;
	padding:5px;
	border:1px solid #666;
	border-top:none;
	z-index:50;
}

#institucional ul li{
	padding:0;
	border:none;
}

#institucional li ul a{
	color:#666;
	padding:5px;
	display:block;
	width:340px;
}

#institucional li ul a:hover{
	background:rgb(80, 80, 128);
	color:#fff;
}


#institucional .oquevcprecisa_menu,
#institucional #oquevcprecisa_menu{
	z-index:500;
	top:30px;
}

#institucional .oquevcprecisa_menu,
#institucional #oquevcprecisa_menu,
#institucional .oquevcprecisa_menu li,
#institucional #oquevcprecisa_menu li,
#institucional .oquevcprecisa_menu li ul,
#institucional #oquevcprecisa_menu li ul{
	width:520px;
}

#institucional #oquevcprecisa_menu a .bullet,
#institucional .oquevcprecisa_menu a .bullet{
	display:none;
}

#institucional .oquevcprecisa_menu a,
#institucional #oquevcprecisa_menu a{
	width:510px;
}
#institucional .oquevcprecisa_menu li:hover,
#institucional #oquevcprecisa_menu li:hover,
#institucional .oquevcprecisa_menu li .aberto,
#institucional #oquevcprecisa_menu li .aberto{
	/*background:rgb(80, 80, 128);*/
	background:#900;
	color:#fff;

}

#institucional .oquevcprecisa_menu li .aberto .bullet,
#institucional #oquevcprecisa_menu li .aberto .bullet{
	display:inline;
}

#institucional .oquevcprecisa_menu ul,
#institucional #oquevcprecisa_menu ul{
	position:relative;
	float:left;
	border:none;
	background:rgb(245, 245, 245);
	margin:0px 0px 0px 0px;
	padding:5px 0px 0px 0px;
	border-bottom:20px solid #fff;
	display:none;
}
#institucional .oquevcprecisa_menu li ul li,
#institucional #oquevcprecisa_menu li ul li{
	padding:0px 0px 0px 10px;
}

#institucional .oquevcprecisa_menu li:hover ul li,
#institucional #oquevcprecisa_menu li:hover ul li{
	background:none;
	color:#fff;
}

#institucional .oquevcprecisa_menu li ul li a,
#institucional #oquevcprecisa_menu li ul li a,
#institucional .oquevcprecisa_menu li:hover ul li a,
#institucional #oquevcprecisa_menu li:hover ul li a{
	/*color:rgb(80, 80, 128);*/
	color:#900;
	margin:0px;
	padding:0px 5px 0px 5px;
}

#institucional .oquevcprecisa_menu li:hover ul li a:hover,
#institucional #oquevcprecisa_menu li:hover ul li a:hover{
	background:none;
	text-decoration:underline;
}

#institucional .oquevcprecisa_menu ul span,
#institucional #oquevcprecisa_menu ul span{
	display:block;
	color:#999;
	padding:0px 10px 5px 5px;
	margin-bottom:5px;
	font-size:10px;
	background:url(../imagens/oqvcprecisa_bg.png) left bottom no-repeat;
}


/*
#institucional .oquevcprecisa_menu li:hover,
#institucional .oquevcprecisa_menu li a.aberto{
	background:rgb(80, 80, 128);
	color:#fff;
}

#institucional .oquevcprecisa_menu{
}

#institucional .oquevcprecisa_menu ul{
	position:relative;
	float:left;
	border:none;
	background:rgb(209, 209, 223);
	margin:0px 0px 0px 0px;
	padding:0px;
	display:none;
}

#institucional .oquevcprecisa_menu ul li{
	float:left;
	padding:0px;
	color:#666;
	display:block;
	border-bottom:1px dashed #666;
}

#institucional .oquevcprecisa_menu ul a{
	margin:0;
	padding:10px;
}
*/

#institucional li.linha{ border-bottom:1px solid #ddd; }

#institucional li.ultimo{ border:none; }
.ultimo{ border:none; }

/*
3.2 MENU DE NAVEGAÇÃO (LADO ESQUERDO) - VERSÃO FLASH
*/

#navegacao.solucoes{
}

/*
3.3 MENU DE NAVEGAÇÃO (LADO ESQUERDO) - VERSÃO HTML
*/

#navegacao{
	float:left;
	width:174px;
	height:450px;
	margin-top:25px;
}

#navegacao h3{
	margin:0 !important;
	display:block;
}

#navegacao form{ margin:0px 0px 15px 0px; }
#navegacao p{ margin:0 !important; }
#navegacao label{ display:none; }

#navegacao_senha{
	width:119px;
	border:1px solid #ddd;
	height:15px;
	font-size:11px;
	color:#666;
}

#navegacao .ok{ position:relative; top:4px; }

#navegacao ul{
	list-style:none;
}

#navegacao li a{
	display:block;
	border-left:7px solid #ccc;
	border-bottom:1px solid #999;
	padding:2px 0px 2px 17px;
	margin:2px 0px 0px 0px;
	background:#fff;
	color:#666;
}

#navegacao li a:hover,
#navegacao li.ativo a{
	border-left:7px solid #933;
	border-bottom:1px solid #933;
	background:#ddd;
	color:#933;
	text-decoration:none;
}

#navegacao .teste_ja a{
	width:174px;
	height:80px;
	display:block;
	background:url(../imagens/testeja.gif) 0px 0px no-repeat;
	overflow:hidden;
	text-indent:-5000px;
	margin:25px 0px 0px 0px;
}

#navegacao .teste_ja a:hover{
	background:url(../imagens/testeja.gif) 0px -80px no-repeat;
}

#testeJa{
	position:absolute;
	top:200px;
	left:100px;
	z-index:50;
}
#testeJa p{
	position:absolute;
	top:170px;
	left:100px;
}

#navegacao.solucoes{
	background:url(../imagens/oquevoceprecisa_menu.png) top no-repeat;
	padding:40px 0 0 0;
	margin:43px 0 0 0;
}

#navegacao.solucoes a{
	padding:5px 0;
	margin:5px;
	border:none;
	border-bottom:1px solid #b2b2b2;
}

#navegacao.solucoes a:hover{
	border:none;
	border-bottom:1px solid #b2b2b2;
	background:none;
	color:#666;
	text-decoration:underline;
}

#navegacao.solucoes ul li ul,
#navegacao.solucoes .oquevcprecisa_menu .bullet,
#navegacao.solucoes #oquevcprecisa_menu .bullet,
#navegacao.solucoes #oquevcprecisa_menu span{ display:none; }

#navegacao.solucoes .oquevcprecisa_menu .aberto,
#navegacao.solucoes #oquevcprecisa_menu .aberto{
	font-weight:bold; 
	color:#990000;
}

/*
3.4 MENU DE IDIOMAS
*/

#idiomas{
	position:absolute;
	top:10px;
	right:0px;
	width:15px;
}

#idiomas li{
	margin-bottom:4px;
	list-style:none;
}

#idiomas abbr{
	display:block;
	width:15px;
	height:10px;
	text-indent:5000px;
	overflow:hidden;
	border:none;
}

#idiomas .pt{ background:url(../imagens/bandeira_pt_0.png) no-repeat; }
#idiomas .pt.ativo{ background:url(../imagens/bandeira_pt_1.png) no-repeat; }
#idiomas .uk{ background:url(../imagens/bandeira_uk_0.png) no-repeat; }
#idiomas .uk.ativo{ background:url(../imagens/bandeira_uk_1.png) no-repeat; }
#idiomas .it{ background:url(../imagens/bandeira_it_0.png) no-repeat; }
#idiomas .it.ativo{ background:url(../imagens/bandeira_it_1.png) no-repeat; }

/* 3.5 ABAS */

#categorias{
	font:8pt Tahoma, Verdana, Arial, sans-serif;
	margin:25px 0px 0px 0px !important;
}

#categorias li{
	background:#eee !important;
	padding:0;
	margin:0;
	border:2px solid #ddd;
	border-bottom:none;
	display:inline-block;
	text-align:center;
}

#categorias li.aberto{
	border-bottom:2px solid #fff;
	background:#fff !important;
}

#categorias a{
	color:#666;
	text-align:center;
	font:12px Arial, Helvetica, sans-serif;
}

#categorias li a strong{
	font-size:16px;
}

#categorias li.aberto a{
	color:#900;
}

/*
4. CONTEÚDO

4.1 TÍTULO DA SEÇÃO (PÁGINA ABERTA)
*/

h2{
	font:bold 24px Arial, Helvetica, sans-serif;
	color:#900;
	margin:40px 0px 20px 0px;
}

h2 span{ color:#666; font-size:18px; font-weight:normal; }

/*
4.2 SUB-TÍTULOS DA SEÇÃO
*/

h3{ margin-top:-20px; font:12px Verdana, Arial, Helvetica, sans-serif; }
h4{ font:bold 12px Verdana, Arial, Helvetica, sans-serif; margin:10px 0px; }

/*
4.3 CORPO DO SITE
*/

#conteudo{
	float:left;
	width:756px;
	min-height:650px;
	display:block;
	padding:0px 25px;
}

/*
4.3.1 FLASH
*/
#conteudo #midia{
	margin:27px 0px;
}

/*
4.3.2 LISTAS
*/
#conteudo ul{
	display:block;
	list-style:none;
	margin:15px 20px 15px 20px;
	font:10px Verdana, Arial, Helvetica, sans-serif;
}

#conteudo ul li{
	line-height:120%;
	padding:4px 10px 4px 15px;
	background-position:0px 5px;
	background:url(../imagens/li_bullet_01.png) 0px 4px no-repeat;
}

.ulHome li{
	font:12px Arial,Helvetica,sans-serif;
	padding:4px 10px 4px 15px;
	background-position:0px 5px;
	background:url(../imagens/li_bullet_01.png) 0px 4px no-repeat;
}


/*
4.3.3 ESTILOS DE PARÁGRAFO
*/

.upper{ text-transform:uppercase; }
.normal{ font-weight:normal; }
.regular{ font-style:normal; }

/*
5. ÁREAS ESPECIAIS

5.1 TOOLTIP (NOTAS DE RODAPÉ)
*/

#footnote{
	display:none;
}

#conteudo sup.interrogacao{
	background:url(../imagens/sup_tooltip.png) no-repeat;
	height:13px;
	width:13px;
	margin:3px 0px 0px 2px;
	overflow:hidden;
	position:absolute;
	text-indent:-50px;
	width:14px;
}

#conteudo sup.interrogacao a{
	display:block;
}

.tooltipBlock{
	max-width:none;
	background:#fff;
	border:2px solid #900;
	padding:5px;
	list-style:none;
	font:8pt Tahoma, Verdana, Arial, sans-serif;
}

.tooltipBlock h4,
.tooltipBlock h5{
	font-size:10pt;
	margin:5px;
}

.tooltipBlock h6{
	font-size:9px;
	margin:5px;
}

.tooltipBlock ul,
.tooltipBlock ol,
.tooltipBlock div,
.tooltipBlock p{
	display:block;
	border:none;
	background:none;
	margin:5px;
}

.tooltipBlock li{
	padding:3px 5px 3px 10px;
	background:url(../imagens/li_bullet_02.png) 0px 6px no-repeat;
	list-style:none;
}

.tooltipBlock ul li ul li,
.tooltipBlock .destaque li{
	background:url(../imagens/li_bullet_03.png) 0px 8px no-repeat;
}

.tooltipBlock .destaque{
	padding:5px;
	background:#ffc;
	color:#333;
}

.tooltipBlock .nota{
	color:#666;
}

/*
INDICADO PARA
*/

#indicadoPara{
	display:block;
}

.e1 #indicadoPara{
	position:relative;
	margin:10px 0 0 0;
}

#indicadoPara, #faq{
	background:#eee;
	padding:10px;
	width:auto;
	margin:25px 0 0 0;
}

#faq .abrir{
	margin:0;
	padding:5px 0;
	/*border-bottom:2px solid #fff;*/
}

#indicadoPara .abrir a, #faq .abrir a{
	padding:0 0 0 15px;
	background:url(../imagens/faq_seta.gif) no-repeat;
}

#indicadoPara ul{
	margin:10px 0 10px 10px;
	padding:0;
}

#faq .hide{
	display:none;
	padding:5px;
	margin-bottom:10px;
	/*background:#fff;*/
}

#faq .fechar, #indicadoPara .fechar{
	text-align:right;
}


/*
5.2 VEJA TAMBÉM
*/

#veja_tambem{
	margin:50px 0 30px 0;
}

#veja_tambem .versoes{
	margin:20px 0px;
}

#veja_tambem .versoes ul li{
	background:none;
	margin:0;
	padding:0 0 10px 0;
}

#veja_tambem .versoes .linha1{
	color:#900;
}

#veja_tambem .versoes p{
	margin:7px 0px;
	font-size:11px;
}

#vejaTambem{
	margin:50px 0 30px 0;
}

#vejaTambem *{
	margin:0;
	padding:0;
}
#vejaTambem h4{
	margin:0 0 5px 0;
}

/*
5.3 COMPARE
*/

.compare{ display:block; width:100%; }

.compare h4{ float:left; }

/*
5.4 PSEUDO CITAÇÕES
*/

.pseudoCitacao{
	color:#999;
	text-align:center;
	margin:30px 0px;
	display:block;
}

/*
5.5 PÁGINA DE CIDADES DC
*/

#noBrasil table{
	background:#eee;
	border-collapse:collapse;
	width:704px;
	text-align:center;
	/*margin:5px 20px;*/
}

#noBrasil td{
	border-bottom:1px solid #ddd;
}

#noBrasil td, #noBrasil th{
	padding:5px;
}

#noBrasil th{
	padding:5px;
	background:#ddd;
	border-bottom:1px solid #ccc;
}

#noBrasil .cidade{
	text-align:left;
}


#noExterior ul, #noExterior li{
	padding:0 !important;
	margin:0 !important;
	background:none !important;
}

#noExterior li a{
	display:block;
	float:left;
	padding:5px 5px 5px 15px;
	width:704px;
	background:#eee url(../imagens/faq_seta.gif) 0px 5px no-repeat;
	border:1px outset #eee;
}

#noExterior li ul{
	width:706px;
	background:#ffc !important;
	margin:0 0 10px 0 !important;
	padding:10px !important;
	float:left;
}

#noExterior li ul li{
	width:174px;
	float:left;
	padding:5px 0px !important;
	border-bottom:1px solid #ee9;
}

/*
6. RODAPÉ
*/

#rodape{
	display:block;
	float:left;
	width:100%;
	margin:60px 0 0 0;
	background:url(../imagens/footer_bg.png) top repeat-x;
}

#rodape #links{
	position:relative;
	width:775px;
	left:50%;
	margin-left:-500px;
	padding:20px 0 0 210px;
}

#rodape #links #uteis{
	border-left:1px dashed #ccc;
	padding-left:50px;
}

#rodape #links div{
	float:left;
	display:inline;
	margin:0 50px 0 0;
}

#rodape #links h4{
	margin:0 0 5px 0;
	display:block;
	font-size:11px;
	color:#666;
}

#rodape #links li{ list-style:none; }

#rodape #links a{ color:#999; }

#rodape #links #selos{
	float:left;
	display:block;
	width:700px;
	margin:20px 0px;
	padding:20px 0 0 0;
	border-top:1px dashed #ccc;
}

#rodape #links #selos li{
	float:right;
	margin:0 0 20px 40px;
}

#no_brasil table th{ text-align:left; }
th.localidade{ width:150px; }
th.produto{ width:100px; }
tr.padrao { color:#900 !important; }

#opcional{margin:25px 0 50px 0;}