/*********************************************************************************/ /** **/ /** Montagem: Hudson Marinho (http://www.ratts.com.br/) **/ /** Contato: hudsonmarinho@ratts.com.br **/ /** Ano: Março/2010 **/ /** **/ /*********************************************************************************/ *{ margin: 0; padding: 0; list-style: none; text-decoration: none; outline:0; } address,th{ font-style: normal; font-weight: normal; } table{ border-collapse: collapse; border-spacing: 0; } caption,th{ text-align: left; } img,fieldset{ border: none; } ol,ul{ list-style: none; font-size: inherit; } a{ border: 0; text-decoration: none; color: #000; } a:hover{ text-decoration: underline; } h1,h2,h3,h4,h5,h6{ font-weight: normal; display: block; } p{ display: block; } label{ display: block; cursor: pointer; } /* html & body */ html,body{ height:100%; } html{} body{ background: url(../imagens/bg_body_h.jpg) #fff; font-family: 'Trebuchet MS', Arial; font-size: 12px; } /* estrutura */ /* topo */ div#top{ width: 942px; height: 100px; margin: 0 auto; } div#top p{ width: 294px; height: 100px; float: left; } /* menu */ div#top ul#menu{ width: 618px; height: 100px; float: right; } div#top ul#menu li{ height: 100%; float: left; } div#top ul#menu li a{ height: 100%; background: url(../imagens/menu.jpg) no-repeat 0 0; display: block; text-indent: -30000px; } div#top ul#menu li a:hover{} div#top ul#menu li a.menuInicio{ width: 55px; background-position: 0 0; } div#top ul#menu li a.menuQuemsomos{ width: 117px; background-position: -55px 0; } div#top ul#menu li a.menuServicos{ width: 89px; background-position: -172px 0; } div#top ul#menu li a.menuProdutos{ width: 99px; background-position: -261px 0; } div#top ul#menu li a.menuClientes{ width: 89px; background-position: -360px 0; } div#top ul#menu li a.menuProjetos{ width: 91px; background-position: -449px 0; } div#top ul#menu li a.menuContato{ width: 78px; background-position: -540px 0; } div#top ul#menu li a.menuInicio:hover{ background-position: 0 -100px; } div#top ul#menu li a.menuQuemsomos:hover{ background-position: -55px -100px; } div#top ul#menu li a.menuServicos:hover{ background-position: -172px -100px; } div#top ul#menu li a.menuProdutos:hover{ background-position: -261px -100px; } div#top ul#menu li a.menuClientes:hover{ background-position: -360px -100px; } div#top ul#menu li a.menuProjetos:hover{ background-position: -449px -100px; } div#top ul#menu li a.menuContato:hover{ background-position: -540px -100px; } div#top ul#menu li a.Active_menuInicio{ width: 55px; background-position: 0 -200px; cursor: default; } div#top ul#menu li a.Active_menuQuemsomos{ width: 117px; background-position: -55px -200px; cursor: default; } div#top ul#menu li a.Active_menuServicos{ width: 89px; background-position: -172px -200px; cursor: default; } div#top ul#menu li a.Active_menuProdutos{ width: 99px; background-position: -261px -200px; cursor: default; } div#top ul#menu li a.Active_menuClientes{ width: 89px; background-position: -360px -200px; cursor: default; } div#top ul#menu li a.Active_menuProjetos{ width: 91px; background-position: -449px -200px; cursor: default; } div#top ul#menu li a.Active_menuContato{ width: 78px; background-position: -540px -200px; cursor: default; } /* alinha */ .divAlign{ width: 942px; margin: 0 auto; } /* destaques */ div#destaques{ width: 100%; height: 390px; background: url(../imagens/bg_destaques.png) repeat-x bottom; } div#bgAgua{ width: 100%; height: 390px; background: url(../imagens/bg_agua.jpg) no-repeat bottom center; } div#destaques div.divAlign{} div#destaques div.divAlign div{ width: 294px; height: 348px; padding: 13px 0 13px 0; border-top: solid 1px #afb7a8; border-bottom: solid 1px #afb7a8; float: left; } div#destaques div.divAlign div p{ width: 294px; margin: 0 0 20px 0; padding: 7px 0 20px 0; background: url(../imagens/bg_grid.jpg) repeat-x bottom; } div#destaques div.divAlign div p a{ width: 294px; display: block; } div#destaques div.divAlign div p a:hover{ text-decoration: none; } div#destaques div.divAlign div p a strong{ width: 208px; padding: 5px 0 5px 0; display: block; float: right; font-size: 12px; color: #559333; text-transform: uppercase; font-weight: normal; } div#destaques div.divAlign div p a:hover strong{ color: #33581f; } div#destaques div.divAlign div p a img{ width: 77px; height: 82px; display: block; float: left; } div#destaques div.divAlign div p a:hover img{} div#destaques div.divAlign div p a span{ width: 208px; display: block; float: right; color: #95a18c; font-size: 11px; line-height: 13px; } div#destaques div.divAlign div p a:hover span{ color: #51574c; } div#destaques div.divAlign ul{ width: 618px; height: 315px; float: right; } div#destaques div.divAlign ul li{} div#destaques div.divAlign ul li img{} div#indexOrcamentos{ width: 100%; height: 230px; padding: 24px 0 0 0; background: url(../imagens/bg_darkgreen.jpg); border-bottom: solid 3px #3d6528; } div#indexOrcamentos ul#soliciteorcamento{ width: 294px; height: 210px; float: left; } div#indexOrcamentos ul#soliciteorcamento li{ line-height: 25px; } div#indexOrcamentos ul#soliciteorcamento li h3{ width: 294px; height: 30px; background: url(../imagens/title_indexorcamentos.gif) no-repeat left center; text-indent: -30000px; } div#indexOrcamentos ul#soliciteorcamento li p{ width: 294px; margin-bottom: 10px; color: #e3eeda; font-size: 12px; } div#indexOrcamentos ul#soliciteorcamento li ul{} div#indexOrcamentos ul#soliciteorcamento li ul li{} div#indexOrcamentos ul#soliciteorcamento li ul li a{ font-size: 14px; color: #e3eeda; } div#indexOrcamentos ul#soliciteorcamento li ul li a:hover{ text-decoration: underline; color: #b4db16; } div#indexOrcamentos ul#downloaddocumentostecnicos{ width: 618px; height: 210px; float: right; } div#indexOrcamentos ul#downloaddocumentostecnicos li{ line-height: 25px; } div#indexOrcamentos ul#downloaddocumentostecnicos li h3{ width: 618px; height: 30px; background: url(../imagens/title_downloaddocumentostecnicos.gif) no-repeat left center; text-indent: -30000px; } div#indexOrcamentos ul#downloaddocumentostecnicos li ul{} div#indexOrcamentos ul#downloaddocumentostecnicos li ul li{ width: 309px; float: left; } div#indexOrcamentos ul#downloaddocumentostecnicos li ul li a{ font-size: 14px; color: #e3eeda; display: block; } div#indexOrcamentos ul#downloaddocumentostecnicos li ul li a:hover{ text-decoration: underline; color: #b4db16; } div#indexMain{ width: 100%; height: 234px; background: url(../imagens/bg_infobar.png) repeat-x #00548b; } div#indexMain div.divAlign{} div#indexMain div.divAlign ul#ultimosprojetos{ width: 294px; height: 234px; float: left; font-weight: bold; } div#indexMain div.divAlign ul#ultimosprojetos li{} div#indexMain div.divAlign ul#ultimosprojetos li h1{ width: 294px; height: 60px; background: url(../imagens/title_ultimosprojetos.png) no-repeat 0 0; text-indent: -30000px; } div#indexMain div.divAlign ul#ultimosprojetos li ul{} div#indexMain div.divAlign ul#ultimosprojetos li ul li{ width: 294px; height: 20px; padding: 5px 0 0 0; background: url(../imagens/bg_grid_azul.png) repeat-x bottom; color: #e3eeda; font-size: 11px; font-weight: normal; } div#indexMain div.divAlign div#benvindo{ width: 618px; height: 234px; float: right; } div#indexMain div.divAlign div#benvindo h2{ width: 618px; height: 60px; background: url(../imagens/title_benvindos.png) no-repeat; font-size: 11px; text-indent: -30000px; } div#indexMain div.divAlign div#benvindo p{ width: 618px; height: 62px; padding: 10px 0 0 0; font-family:Arial, Helvetica, sans-serif; font-weight: normal; color: #e3eeda; } div#indexMain div.divAlign div#benvindo p em{ color: #fff; } div#indexMain div.divAlign div#benvindo ul{} div#indexMain div.divAlign div#benvindo ul li{ float: left; margin: 0 12px 0 0; } div#indexMain div.divAlign div#benvindo ul li a{} div#indexMain div.divAlign div#benvindo ul li a:hover{} div#indexMain div.divAlign div#benvindo ul li a img{ border: solid 5px #00497c; } div#indexMain div.divAlign div#benvindo ul li a:hover img{ border: solid 5px #0068b0; } div#informationBar{ width: 100%; padding: 0 0 25px 0; background: url(../imagens/bg_foor_verde.jpg) repeat-x top; } div#informationBar div.divAlign{} div#informationBar div.divAlign div#twitter{ width: 294px; min-height: 100px; padding: 3px 0 0 0; float: left; color: #fff; background: #65a541; } div#informationBar div.divAlign div#twitter h3{} div#informationBar div.divAlign div#twitter h3 a{ width: 294px; height: 56px; display: block; background: url(../imagens/title_twitter.png) no-repeat; text-indent: -30000px; } div#informationBar div.divAlign div#twitter h3 a:hover{} p#preloader{ width: 294px; height: 227px; background: url(../imagens/ajax-loader_2.gif) center center no-repeat; } ul#twitter_update_list{ margin: 0; padding: 0; } ul#twitter_update_list li{ width: 264px; padding: 15px; background: #65a541; border-bottom: 1px solid #72b84c; color: #e3eeda; font-size: 11px; text-transform: capitalize; } ul#twitter_update_list li a{ color: #f00; display: none; } ul#twitter_update_list li span{ display: block; } ul#twitter_update_list li span a{ color: #00f; } ul#twitter_update_list li.firstTweet{} ul#twitter_update_list li.lastTweet{ border-bottom: none; } a#profileLink{ display: block; padding: 0.3em 1em; color: #fff; background-color: #888; } div#informationBar div.divAlign div#footeri_info{ width: 618px; padding: 3px 0 0 0; float: right; } div#informationBar div.divAlign div#footeri_info p{ width: 294px; float: left; } div#informationBar div.divAlign div#footeri_info p strong{ width: 294px; height: 56px; display: block; text-indent: -30000px; } div#informationBar div.divAlign div#footeri_info p a{ width: 294px; display: block; } div#informationBar div.divAlign div#footeri_info p a:hover{ text-decoration: none; } div#informationBar div.divAlign div#footeri_info p a img{ border: solid 15px #65a541; } div#informationBar div.divAlign div#footeri_info p a:hover img{ border: solid 15px #7cca50; } div#informationBar div.divAlign div#footeri_info p a span{ width: 294px; height: 65px; padding: 19px 0 0 0; display: block; background: url(../imagens/bg_footerinfo.gif) no-repeat 0 0; color: #e3eeda; font-size: 11px; } div#informationBar div.divAlign div#footeri_info p a:hover span{ background-position: 0 -84px; color: #fff; } div#informationBar div.divAlign div#footeri_info p#melhoresServicos{} div#informationBar div.divAlign div#footeri_info p#melhoresServicos strong{ background: url(../imagens/title_melhoresservicos.png) no-repeat; } div#informationBar div.divAlign div#footeri_info p#dicasSustentaveis{} div#informationBar div.divAlign div#footeri_info p#dicasSustentaveis strong{ background: url(../imagens/title_dicas.png) no-repeat; } div#footer{ width: 100%; background: url(../imagens/bg_footer.png) repeat-x top; } div#footer div.divAlign{} div#footer div.divAlign form#formNews{ width: 294px; height: 30px; padding: 34px 0 0 0; display: block; float: left; color: #fff; } div#footer div.divAlign form#formNews input{ width: 257px; height: 20px; padding: 4px 5px 0 5px; border: none; display: block; float: left; background: url(../imagens/input_formnews.png) no-repeat 0 0; font-family: 'Trebuchet MS', Arial; font-size: 12px; color: #838080; } div#footer div.divAlign form#formNews button{ width: 27px; height: 24px; background: url(../imagens/button_formnews.png) no-repeat; border: none; display: block; float: right; text-indent: -30000px; cursor: pointer; } div#footer div.divAlign ul#menuBottom{ width: 440px; height: 50px; padding: 34px 0 0 0; float: right; } div#footer div.divAlign ul#menuBottom li{ float: left; } div#footer div.divAlign ul#menuBottom li a{ height: 24px; display: block; background: url(../imagens/menu_footer.png) no-repeat 0 0; text-indent: -30000px; } div#footer div.divAlign ul#menuBottom li a:hover{} div#footer div.divAlign ul#menuBottom li a.menuFooterInicio{ width: 46px; background-position: 0 0; } div#footer div.divAlign ul#menuBottom li a.menuFooterQuemsomos{ width: 86px; background-position: -46px 0; } div#footer div.divAlign ul#menuBottom li a.menuFooterServicos{ width: 62px; background-position: -132px 0; } div#footer div.divAlign ul#menuBottom li a.menuFooterProdutos{ width: 64px; background-position: -194px 0; } div#footer div.divAlign ul#menuBottom li a.menuFooterClientes{ width: 62px; background-position: -258px 0; } div#footer div.divAlign ul#menuBottom li a.menuFooterProjetos{ width: 62px; background-position: -320px 0; } div#footer div.divAlign ul#menuBottom li a.menuFooterContato{ width: 58px; background-position: -382px 0; } div#footer div.divAlign ul#menuBottom li a.menuFooterInicio:hover{ background-position: 0 -24px; } div#footer div.divAlign ul#menuBottom li a.menuFooterQuemsomos:hover{ background-position: -46px -24px; } div#footer div.divAlign ul#menuBottom li a.menuFooterServicos:hover{ background-position: -132px -24px; } div#footer div.divAlign ul#menuBottom li a.menuFooterProdutos:hover{ background-position: -194px -24px; } div#footer div.divAlign ul#menuBottom li a.menuFooterClientes:hover{ background-position: -258px -24px; } div#footer div.divAlign ul#menuBottom li a.menuFooterProjetos:hover{ background-position: -320px -24px; } div#footer div.divAlign ul#menuBottom li a.menuFooterContato:hover{ background-position: -382px -24px; } div#footer div.divAlign ul#menuBottom li a.Active_menuFooterInicio{ width: 46px; background-position: 0 -48px; cursor: default; } div#footer div.divAlign ul#menuBottom li a.Active_menuFooterQuemsomos{ width: 86px; background-position: -46px -48px; cursor: default; } div#footer div.divAlign ul#menuBottom li a.Active_menuFooterServicos{ width: 62px; background-position: -132px -48px; cursor: default; } div#footer div.divAlign ul#menuBottom li a.Active_menuFooterProdutos{ width: 64px; background-position: -194px -48px; cursor: default; } div#footer div.divAlign ul#menuBottom li a.Active_menuFooterClientes{ width: 62px; background-position: -258px -48px; cursor: default; } div#footer div.divAlign ul#menuBottom li a.Active_menuFooterProjetos{ width: 62px; background-position: -320px -48px; cursor: default; } div#footer div.divAlign ul#menuBottom li a.Active_menuFooterContato{ width: 58px; background-position: -382px -48px; cursor: default; } div#footer div.divAlign div#copyright{} div#footer div.divAlign div#copyright p{ width: 471px; height: 38px; padding: 31px 0 0 0; float: left; color: #838080; font-size: 11px; } div#footer div.divAlign div#copyright a{} div#footer div.divAlign div#copyright a:hover{} div#main{ width: 100%; padding: 25px 0 25px 0; background: url(../imagens/bg_infobar.png) #00558b; margin: 0 auto; color: #fff; } div#main div#colLeft{ width: 600px; padding: 0 40px 0 0; float: left; } div#main div#colLeft p{ margin: 0 0 20px 0; font-size: 14px; line-height: 20px; color: #e3eeda; } div#main div#colLeft p em{ color: #fff; } div#main div#colRight{ width: 290px; float: right; } div#main div#colRight span{ display: block; margin: 0 0 25px 0; text-align: center; color: #e3eeda; font-size: 11px; } div#main div#colRight span img{ display: block; margin: 0 0 7px 0; border: solid 15px #0d6aa1; } div#main div.dicasLeft{ width: 600px; padding: 0 40px 0 0; float: left; } div#main div.dicasLeft p{ margin: 0 0 20px 0; font-size: 14px; line-height: 20px; color: #e3eeda; } div#main div.dicasLeft p em{ color: #fff; } div#main div.dicasRight{ width: 290px; float: right; } div#main div.dicasRight span{ display: block; margin: 0 0 25px 0; text-align: center; color: #e3eeda; font-size: 11px; } div#main div.dicasRight span img{ display: block; margin: 0 0 7px 0; border: solid 15px #0d6aa1; } div#main p.hr{ width: 942px; height: 1px; color: red; border-bottom: 1px dashed #0D6AA1; margin: 0 0 40px 0; } .titles{ height: 30px; margin: 0 0 20px 0; font-size: 28px; text-transform: uppercase; } div#main .textBasic{ margin: 0 0 10px 0; font-size: 14px; line-height: 20px; color: #e3eeda; font-weight: normal; font-family: Tahoma, Arial, Verdana; } div#main .textBasic em{ color: #fff; } div#main div#clientes{} div#main div#clientes ul{} div#main div#clientes ul li{ width: 290px; height: 20px; padding: 7px 0 0 10px; margin-bottom: 10px; background: #0d6aa1; float: left; color: #e3eeda; text-transform: uppercase; font-size: 11px; } /* contato */ form#formContato{ width: 600px; margin: 0 0 20px 0; } form#formContato h1{ width: 430px; height: 48px; margin: 0 0 20px 0; font-size: 28px; text-transform: uppercase; } form#formContato button{ width: 106px; height: 48px; background: url(../imagens/button_enviar.png) no-repeat 0 0; border: none; cursor: pointer; text-indent: -30000px; } form#formContato button:hover{ background-position: 0 -48px; } form#formContato p{} form#formContato p label{ padding: 0 0 5px 0; display: block; } form#formContato p input{ background: #0d6aa1; border: none; font-family: 'Trebuchet MS', Arial; font-size: 12px; color: #fff; } form#formContato p textarea{ width: 420px; height: 170px; padding: 5px; background: #0d6aa1; border: none; font-family: 'Trebuchet MS', Arial; font-size: 12px; color: #fff; } form#formContato p.inputBig{ width: 430px; } form#formContato p.inputBig input{ width: 420px; height: 28px; padding: 5px; } form#formContato p.inputSmall{ width: 205px; float: left; } form#formContato p.inputSmall label{} form#formContato p.inputSmall input{ width: 195px; height: 28px; padding: 5px; } iframe#cttHF{ width: 430px; height: 400px; margin: 0 0 25px 0; overflow: hidden; border: none; display: block; } .produtos, .projetos{ font-size: 12px; } .produtos h1, .projetos h1{} h2, h2{ margin: 0 0 10px 0; font-size: 20px; text-transform: uppercase; color: lightblue; } h3, h3{ margin: 0 0 10px 0; font-size: 16px; text-transform: uppercase; color: lightgreen; } h4, h4{ margin: 0 0 10px 0; font-size: 16px; text-transform: uppercase; color: #6ae4dc; } .produtos p, .projetos p, .dicasLeft{ margin: 0 0 30px 0; } .produtos ul, .dicasLeft ul{ margin: 0 0 40px 0; color: #fff; } .produtos ul li, .dicasLeft ul li{ padding: 0 0 0 13px; margin: 0 0 2px 0; background: url(../imagens/grid_li_2.gif) no-repeat left 7px; font-size: 14px; } /* .projetos div{} .projetos div ul{ padding: 10px; margin: 0 0 10px 0; color: #fff; } .projetos div ul li{} .projetos div ul li ul{} .projetos div ul ul li{ padding: 0 0 0 13px; margin: 0 0 2px 0; background: url(../imagens/grid_li_2.gif) no-repeat left center; font-size: 14px; } */ div#proLeft, div#proCenter, div#proRight{ width: 300px; float: left; } div#proLeft ul, div#proCenter ul, div#proRight ul{ margin: 0 0 50px 0; } div#proLeft ul li, div#proCenter ul li, div#proRight ul li{} div#proLeft ul li h2, div#proCenter ul li h2, div#proRight ul li h2{ margin: 0 0 10px 0; font-size: 20px; text-transform: uppercase; color: lightblue; } div#proLeft ul li ul, div#proCenter ul li ul, div#proRight ul li ul{} div#proLeft ul li ul li, div#proCenter ul li ul li, div#proRight ul li ul li{ width: 290px; height: 20px; padding: 7px 0 0 10px; margin-bottom: 10px; background: #0d6aa1; color: #e3eeda; text-transform: uppercase; font-size: 11px; } div#proLeft{} div#proCenter{ margin: 0 21px; } div#proRight{} ul#ultimosprojetos a.agua { color: #00CCFF; text-decoration:underline; } ul#ultimosprojetos a.agua:hover { color: #00CCFF; text-decoration:none; } ul#ultimosprojetos a.esgoto { color: #FFCC66; text-decoration:underline; } ul#ultimosprojetos a.esgoto:hover { color: #FFCC66; text-decoration:none; } #abimaq { float: left; padding-left: 30px; padding-top: 5px; } div#destaques div#apsVideo{ float: right; width: 618px; height: 348px; } /* Floater ------------------------------------- */ #floater { box-shadow:5px 5px 10px black; /* implementação para o firefox */ -moz-box-shadow:5px 5px 10px black; /* implementação para safari */ -webkit-box-shadow:5px 5px 10px, black; position:absolute; z-index:1000; left:50%; margin-left:-200px; margin-top:100px; border: 5px solid white; outline: 0; height: 400px; }