/*----------------------------------------------------------------------------- WEBTASK WEBSTUDIO versao: 1.0 criacao: 10/04/2007 alteracao: 18/04/2007 autor: Marcelo Cintra de Melo email: marcelo@webtask.com.br website: www.webtask.com.br Versão preparatória para site oficial -----------------------------------------------------------------------------*/ /************************* CONFIGURAÇÕES GERAIS **************************/ * {margin:0px; padding:0px; text-indent:0px; text-decoration:none; border:none; list-style:none} html,body {margin:0;padding:0;height:100%;behavior:url("./js/csshover.htc");} /* fonte e cores */ html,body { background: #F8F9FB url(../imagens/bgGeral.jpg) repeat-x top left; font: normal 12px Arial, Helvetica, sans-serif; color:orange;} div#container { margin:0 auto; width:840px; background:#F8F9FB url(../imagens/centroBg.jpg) repeat-y top left; position:relative; clear:both; display:table; } /* elementos gerais */ br {clear:both;} .hide {display:none;} .fix {border:solid 1px red;} .imagem {float:left; overflow:hidden; text-indent:-7777px; font-size:1px;} /************************* CABEÇALHO **************************/ div#cabecalho { padding:27px 0px 50px 50px; float:left; position:relative; width:750px;} .logo {background:url(../imagens/logo.gif) top left no-repeat; height:97px; width:419px; position:relative; top:-5px; left:-15px;} .atendimentoBox{ float:left; width:300px; height:80px; /* margin-left:12px; margin-top:3px; */ position:absolute; top:30px; right:0px; } .atendimentoImg { float:right; background:url(../imagens/atendimentoImg.gif) top left no-repeat; width:80px; height:80px;} .atendimentoStatus {float:right; padding-top:11px;} .alerta {float:left; width:655px; height:15px; margin:0px 0px 20px 0px; margin-left:2px; border:solid 2px #ECEDE8; font-size:12px; color:#636466;padding:5px 0px 5px 82px; background:#F2F1DD; position:relative;} .alertaLogo {background:#F2F1DD url(../imagens/alerta.gif) no-repeat; float:left; height:40px; width:50px; position:absolute; top:-9px; left:10px;border:solid 2px #ECEDE8;} /************************* CONTEUDO GERAL **************************/ div#conteudo {padding:10px 0px 50px 50px; float:left;} /* Titulo da area*/ .tituloGeral {float:left; width:740px; height:24px; position:relative;} .tituloGeralLogo {position:absolute;} /************************* NOSSOS SERVIÇOS **************************/ /* Titulo da area */ #nossosServicos.tituloGeral { border-bottom:solid 1px #636466; } #nossosServicos .tituloGeralLogo { background:url(../imagens/nossosServicosLogo.jpg) top left no-repeat; height:60px; width:70px; top:-19px; right:-10px;} #nossosServicos .tituloGeralEscrito {background:url(../imagens/nossosServicosEscrito.gif) top left no-repeat; height:25px; width:360px;} .servicosGlobal {float:left; width:711px; height:223px; margin:30px 0px 70px 10px; border:solid 1px #A1A1A1; background:#ECEDEF url(../imagens/servicosGlobalBg.jpg) top left repeat-y;} /* botoes servicos */ #menuPrincipal {float:left; width:200px;} #menuPrincipal li {float:left; height:55px; width:100%; border-bottom:solid 1px #A1A1A1; border-right:solid 1px #A1A1A1; text-transform:uppercase; text-align:center; color:#50636e; font-weight:bold; line-height:55px; background: url(../imagens/botaoServicosBgNormal.gif) repeat-y top left;} #menuPrincipal li:hover { cursor:pointer; background:url(../imagens/botaoServicosBgHover.gif) repeat-y top left;} #menuPrincipal li.ativo, #menuPrincipal li.ativo:hover {background:none; color:#fff; border-right:0px; cursor: default;;} /* conteudo interno */ .conteudoInternoServicos {float:right; padding:10px 0px 0px 20px; position:relative; width: 491px;} .menuInternoServicos li { float:left; width:470px; margin-bottom:8px; padding:6px 0px 6px 10px;} .servicoSubtitulo { float:left; width:470px; font-weight:bold; color:#2E656B;} .servicoExplicacao {float:left; width:470px; color:#5C5758; padding:3px 0px 0px 7px;} .ServicosAreaSelecionada { background: url(../imagens/ServicosAreaSelecionada.jpg) no-repeat top left; position:absolute; float:left; width:40px; height:40px;} /* #hospedagem, #design, #sistemas {display:none;} */ /* ecommerce */ #ecommerce li {background:url(../imagens/servicoVermelhoBg.gif) repeat-y top left;} #ecommerce .ServicosAreaSelecionada {top:7px; left:-214px;} /* design */ #design li {background:url(../imagens/servicoAzulBg.gif) repeat-y top left;} #design .ServicosAreaSelecionada {top:64px; left:-214px;} /* Sistemas */ #sistemas li {background:url(../imagens/servicoVerdeBg.gif) repeat-y top left;} #sistemas .ServicosAreaSelecionada {top:120px; left:-214px;} /* Hospedagem */ #hospedagem li {background:url(../imagens/servicoAmareloBg.gif) repeat-y top left;} #hospedagem .ServicosAreaSelecionada {top:178px; left:-214px;} /************************* TRABALHOS REALIZADOS **************************/ /* Titulo da area */ #nossosTrabalhos.tituloGeral { border-bottom:solid 1px #636466; } #nossosTrabalhos .tituloGeralLogo { background:url(../imagens/nossosTrabalhosLogo.jpg) top left no-repeat; height:59px; width:65px; top:-17px; right:-10px;} #nossosTrabalhos .tituloGeralEscrito {background:url(../imagens/nossosTrabalhosEscrito.gif) top left no-repeat; height:22px; width:370px;} /* Informações sobre os trabalhos realizados*/ .trabalhosGlobal {float:left; padding:0px 0px 0px 10px;} .trabalhoParticular {float:left; width:180px; padding-top:30px;} .imagemSite {float:left; width:167px; height:129px; border:solid 2px #617286; position:relative; left:-3px;} .imagemSite:hover {border:solid 2px #DB020B;} .boxInfos {float:left; width:148px; height:90px; border:solid 1px #E0E7EF; padding:8px; background: #F6F7FB url(../imagens/boxInfos.gif) top left repeat-x; position:relative;} .boxInfos a{color:#414141; text-decoration:underline;} /* trabalhos especificos */ #areaVip .imagemSite {background:url(../imagens/areaVip.jpg) top left no-repeat;} #produtoraDVP .imagemSite {background:url(../imagens/dvp.jpg) top left no-repeat;} #redBearBlues .imagemSite {background:url(../imagens/redBear.jpg) top left no-repeat;} #piscinao .imagemSite {background:url(../imagens/piscinao.jpg) top left no-repeat;} #forumbolsa .imagemSite {background:url(../imagens/forumbolsa.jpg) top left no-repeat;} #horses .imagemSite {background:url(../imagens/horses.jpg) top left no-repeat;} #agroforn .imagemSite {background:url(../imagens/agroforn.jpg) top left no-repeat;} #globaldesk .imagemSite {background:url(../imagens/globaldesk.jpg) top left no-repeat;} #globalcore .imagemSite {background:url(../imagens/globalcore.jpg) top left no-repeat;} #duallshop .imagemSite {background:url(../imagens/duallshop.jpg) top left no-repeat;} #edsonLaino .imagemSite {background:url(../imagens/edsonLaino.jpg) top left no-repeat;} #nautica .imagemSite {background:url(../imagens/nautica.jpg) top left no-repeat;} #topdental .imagemSite {background:url(../imagens/topDental.jpg) top left no-repeat;} #cenedcursos .imagemSite {background:url(../imagens/cenedCursos.jpg) top left no-repeat;} #curriweb .imagemSite {background:url(../imagens/curriweb.jpg) top left no-repeat;} #diarioDaSerra .imagemSite {background:url(../imagens/diarioDaSerra.jpg) top left no-repeat;} #deleo .imagemSite {background:url(../imagens/deleo.jpg) top left no-repeat;} #namesMeanings .imagemSite {background:url(../imagens/namesMeanings.jpg) top left no-repeat;} #forumBovespa .imagemSite {background:url(../imagens/forumBovespa.jpg) top left no-repeat;} #aplba .imagemSite {background:url(../imagens/aplba.jpg) top left no-repeat;} #botucatuSpecial .imagemSite {background:url(../imagens/botucatuSpecial.jpg) top left no-repeat;} #teclasBrasil .imagemSite {background:url(../imagens/teclasbrasil.jpg) top left no-repeat;} /* Descrição dos trabalhos realizados */ .trabalhosGlobal strong { float:left; font-size:18px; color:#414141; clear:both; width:100%;} .trabalhosGlobal p {float:left; color:#414141; padding:10px 0px 20px 0px; font-size:12px; } .trabalhosGlobal em {float:left; color:#414141; font-size:12px;} .trabalhosGlobal .linkCliente {float:left; color:#0079A7; position:absolute; bottom:8px; left:8px; text-decoration:underline; font-size:12px;} .trabalhosGlobal .linkCliente:hover {color:#E6453D;} /************************* CONTATO **************************/ /* Coloca rodapé como elemento separado */ div#rodape { float:left; clear:both; width:100%;background:#92A4BC url(../imagens/rodapeBg.jpg) top left repeat-x; height:300px;} /* Centralizando rodape */ #centralizaRodape {margin:0 auto; width:780px; padding:27px 0px 50px 50px;} /* Título da Área */ #contato .tituloGeralLogo {background:url(../imagens/contatoLogo.jpg) top left no-repeat; height:69px; width:78px; top:-14px; right:-5px;} #contato .tituloGeralEscrito {background:url(../imagens/contatoEscrito.gif) top left no-repeat; height:19px; width:102px;} #contato.tituloGeral {border-bottom:solid 1px #fff;} /* Meios de contato */ address {float:left; width:237px; height:140px; margin-top:40px;} .contatoFormGlobal { float:left; width:485px; margin-top:40px; border-bottom:solid 1px #fff; display:table;} /* Outras formas de contato */ address { color:#FFF; font:normal 12px Arial, Helvetica, sans-serif;} address em { font:bold 12px Arial, Helvetica, sans-serif; } address a {color:#fff; text-decoration:underline;} address a:hover {color:#E2EA97;} /* Formulário de contato */ .inputContato, .textareaContato, .botaoContato {font:normal 12px Arial, Helvetica, sans-serif; color:#1D406F;} .inputContato {float:left; margin:0px 5px 5px 0px; width:151px; padding-left:5px; } .textareaContato {float:left; width:470px; height:80px; padding:5px;} .botaoContato { float:right; width:110px; height:16px; background:#FBFBFB; color:#2E4563; margin:5px 5px 5px 0px;} .mensagemStatusEnvio {color:#294735; background:#D2E5DA; float:left; width:480px; padding:2px 0px; margin:5px 0px; text-align:center;} .erro {background:#F0E0DB; color:#5E3427;} .erro a {color:#5E3427; text-decoration:underline;} .erro a:hover {color:#fff; background:#C07D68;text-decoration:none;} .msgCampoObrigatorio {color:#fff; background:none; width:363px; height:12px; line-height:11px; text-align:left; font-weight:bold;} .loadinContato {background:url(../imagens/loading.gif) no-repeat top left; float:left; width:300px; height:18px; position:relative; top:3px; left:-5px;} .campoObrigatorio {background:#FFFACC; float:left; margin:0px 5px 5px 0px; width:151px; padding-left:5px;}