/* Cliente: Portobello Projeto: Portobello Exporevestir 2009 */ /* -------------- PALETA DE CORES -------------- #808080 - cor do texto principal */ /* -------------- ORDEM DOS ATRIBUTOS -------------- { position:; top:; left:; float:; clear:; display:; width:; height:; margin:; padding:; border:; background:; font:; text:; color:; } */ /* -------------- ELEMENTOS e CLASSES -------------- */ /* ------- GERAL ------- */ * { margin: 0; padding: 0; z-index: 1; } /* reseta todas as margens, paddings e define o nivel das camadas do site */ html, body { background: #e6e6e6; font: 100% Tahoma, Arial, sans-serif; } body { padding: 5px 0 30px; } #limites { position: relative; width: 993px; margin: 0 auto; padding-bottom: 25px; border: 1px solid #fff; background: url(../imagens/limites_bg.gif) #fff bottom repeat-x; font-size: .75em; color: #808080; } /* ------- CLASSES ------- */ .direita { float: right; } .esquerda { float: left; } p.direita, p.esquerda { float: none; } p.direita { text-align: right; } p.esquerda { text-align: left; } .centro { text-align: center; } a.botao { display: inline-block; padding: 4px 6px; border-left: 4px solid #b2b2b2; background: #404040; font-size: 1.16em; font-weight: bold; color: #fff; } a.botao:hover { border-color: #404040; background: #b2b2b2; } /* contendo float */ .contemfloat:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .contemfloat { display: inline-block; } /* Hides from IE-mac \*/ * .contemfloat { height: 1%; } .contemfloat { display: block; } /* End hide from IE-mac */ /* ------- ELEMENTOS ------- */ a { text-decoration: none; } p { line-height: 1.5em; } h1 { height: 87px; clear: both; text-indent: -9999em; } form fieldset { border: 0; } form input, form select, form textarea, form button { font-family: inherit; font-size: inherit; } form input, form select, form textarea { padding: 8px; border: 1px solid #cecece; color: #808080; } form select { font-size: 1.16em; } form a.botao { border-width: 1px 0; border-style: solid; border-color: #d9d9d9; background: #404040; font-size: .8em; font-weight: normal; color: #b2b2b2; } form a.botao:hover { color: #808080; } form button { margin-left: 112px; padding: 2px 6px; border: 0; background: url(../imagens/botao_bg.gif) #404040 repeat-y; font-size: 1.16em; font-weight: bold; color: #fff; } html > body form button { padding: 4px 6px; } /* ------- TOPO ------- */ #topo { height: 127px; } #topo h2 { position: absolute; top: 52px; left: 59px; width: 190px; height: 24px; background: url(../imagens/topo_logo.png) 0 -26px no-repeat; text-indent: -9999em; overflow: hidden; } #home #topo h2 { width: 159px; background-position: 0 0; } #topo h2 a { display: block; height: 100%; } #topo ul#menu { float: right; display: inline; margin-right: 130px; list-style: none; } html > body #topo ul#menu { margin-right: 157px; } #topo ul#menu li { float: left; margin-right: 27px; } #topo ul#menu li a { display: block; height: 84px; background: url(../imagens/topo_menu.png) no-repeat; text-indent: -9999em; overflow: hidden; } #topo ul#menu li#menu_produtos a { width: 82px; } #topo ul#menu li#menu_produtos a:hover { background-position: -110px 0; } #produtos #topo ul#menu li#menu_produtos a { background-position: -225px 0; } #topo ul#menu li#menu_blog a { width: 102px; background-position: 0 -109px; } #topo ul#menu li#menu_blog a:hover { width: 102px; background-position: -110px -109px; } #blog #topo ul#menu li#menu_blog a { background-position: -225px -109px; } #topo ul#idiomas { position: absolute; top: 48px; right: 59px; float: right; border-width: 1px 0; border-style: solid; border-color: #d9d9d9; background: #404040; font-size: .83em; line-height: 15px; text-align: center; list-style: none; } #topo ul#idiomas li { display: inline; margin: 0 5px; } #topo ul#idiomas li a { color: #b2b2b2; } #topo ul#idiomas li.ativo a, #topo ul#idiomas li a:hover { color: #808080; } /* ------- PAGINAS ESPECIFICAS------- */ /* ------- PAGINA INICIAL ------- */ #home #destaque { width: 994px; margin: 0 auto 39px; } #home h1 { margin-bottom: 15px; background: url(../imagens/home_titulo_acompanhe.png) no-repeat; } #home h3 { height: 61px; margin-bottom: 29px; background: url(../imagens/home_titulo_revestir.png) no-repeat; clear: both; text-indent: -9999em; } #home #conteudo #acompanhe dl { float: left; width: 280px; margin: 0 0 45px 29px; } #home #conteudo #acompanhe dl dt { font-size: 1.5em; color: #404040; } #home #conteudo #acompanhe dl#cadastro dt { width: 126px; height: 22px; background: url(../imagens/home_titulo_cadastre.png) no-repeat; text-indent: -9999em; } #home #conteudo #acompanhe dl dd p { margin-bottom: 19px; } #home #conteudo #acompanhe dl dd p strong { font-size: 1.16em; } #home #conteudo #revestir img.esquerda { margin-left: 30px; } #home #conteudo #revestir p { margin: 108px 43px 0 444px; line-height: 2em; } #home #conteudo #revestir p strong { font-size: 1.5em; } /* ------- PRODUTOS ------- */ #produtos h1 { background: url(../imagens/produtos_titulo.png) no-repeat; } /* ------- COLUNA 1 ------- */ #produtos #coluna1 { float: left; display: inline; width: 390px; margin: 31px 0 0 29px; } #produtos #coluna1 h3 { margin-top: 45px; font-size: 1.5em; font-weight: normal; color: #404040; } #produtos #coluna1 ul.modelos { margin-top: 10px; text-indent: -9999em; overflow: hidden; list-style: none; } #produtos #coluna1 ul.modelos li { margin-bottom: 14px; } #produtos #coluna1 ul.modelos li a { display: block; background: url(../imagens/produtos_lista-modelos.png) no-repeat; } #produtos #coluna1 ul.modelos li.ecodecor a { width: 98px; height: 17px; } #produtos #coluna1 ul.modelos li.ecodecor a:hover { background-position: 0 -355px; } #produtos #coluna1 ul.modelos li.argile, #produtos #coluna1 ul.modelos li.vogue, #produtos #coluna1 ul.modelos li.ecoparquet { margin-bottom: 10px; } #produtos #coluna1 ul.modelos li.argile a { width: 68px; height: 21px; background-position: 0 -31px; } #produtos #coluna1 ul.modelos li.argile a:hover { background-position: 0 -386px; } #produtos #coluna1 ul.modelos li.vogue a { width: 68px; height: 21px; background-position: 0 -62px; } #produtos #coluna1 ul.modelos li.vogue a:hover { background-position: 0 -417px; } #produtos #coluna1 ul.modelos li.cement a { width: 137px; height: 17px; background-position: 0 -92px; } #produtos #coluna1 ul.modelos li.cement a:hover { background-position: 0 -447px; } #produtos #coluna1 ul.modelos li.pietra a { width: 160px; height: 21px; background-position: 0 -123px; } #produtos #coluna1 ul.modelos li.pietra a:hover { background-position: 0 -478px; } #produtos #coluna1 ul.modelos li.pietra_vermont a { width: 168px; height: 17px; background-position: 0 -154px; } #produtos #coluna1 ul.modelos li.pietra_vermont a:hover { background-position: 0 -509px; } #produtos #coluna1 ul.modelos li.ecoparquet a { width: 160px; height: 21px; background-position: 0 -185px; } #produtos #coluna1 ul.modelos li.ecoparquet a:hover { background-position: 0 -540px; } #produtos #coluna1 ul.modelos li.goa a { width: 48px; height: 17px; background-position: 0 -216px; } #produtos #coluna1 ul.modelos li.goa a:hover { background-position: 0 -571px; } #produtos #coluna1 ul.modelos li.bauhaus a { width: 91px; height: 17px; background-position: 0 -247px; } #produtos #coluna1 ul.modelos li.bauhaus a:hover { background-position: 0 -602px; } #produtos #coluna1 ul.modelos li.marmo a { width: 150px; height: 17px; background-position: 0 -278px; } #produtos #coluna1 ul.modelos li.marmo a:hover { background-position: 0 -633px; } /* ------- COLUNA 2 ------- */ #produtos #coluna2 { margin: 31px 29px 0 425px; } #produtos #coluna2 ul.modelos { position: relative; right: -12px; list-style: none; text-indent: -9999em; overflow: hidden; } html > body#produtos #coluna2 ul.modelos { right: -15px; } #produtos #coluna2 ul.modelos li { display: inline; float: left; margin: 0 0 15px 15px; } #produtos #coluna2 ul.modelos li a { display: block; width: 160px; height: 160px; background: url(../imagens/produtos_modelos.jpg) no-repeat; } #produtos #coluna2 ul.modelos li.ecodecor a:hover { background-position: 0 -715px; } #produtos #coluna2 ul.modelos li.argile a { background-position: -175px 0; } #produtos #coluna2 ul.modelos li.argile a:hover { background-position: -175px -715px; } #produtos #coluna2 ul.modelos li.vogue a { background-position: -350px 0; } #produtos #coluna2 ul.modelos li.vogue a:hover { background-position: -350px -715px; } #produtos #coluna2 ul.modelos li.cement a { background-position: 0 -175px; } #produtos #coluna2 ul.modelos li.cement a:hover { background-position: 0 -890px; } #produtos #coluna2 ul.modelos li.pietra a { background-position: -175px -175px; } #produtos #coluna2 ul.modelos li.pietra a:hover { background-position: -175px -890px; } #produtos #coluna2 ul.modelos li.pietra_vermont a { background-position: -350px -175px; } #produtos #coluna2 ul.modelos li.pietra_vermont a:hover { background-position: -350px -890px; } #produtos #coluna2 ul.modelos li.ecoparquet a { background-position: 0 -350px; } #produtos #coluna2 ul.modelos li.ecoparquet a:hover { background-position: 0 -1065px; } #produtos #coluna2 ul.modelos li.goa a { background-position: -175px -350px; } #produtos #coluna2 ul.modelos li.goa a:hover { background-position: -175px -1065px; } #produtos #coluna2 ul.modelos li.bauhaus a { background-position: -350px -350px; } #produtos #coluna2 ul.modelos li.bauhaus a:hover { background-position: -350px -1064px; } #produtos #coluna2 ul.modelos li.marmo { float: right; margin-right: 14px; } #produtos #coluna2 ul.modelos li.marmo a { background-position: -350px -525px; } #produtos #coluna2 ul.modelos li.marmo a:hover { background-position: -350px -1240px; } #produtos #coluna2 a.pdf { position: absolute; display: block; margin: -100px 0 0 15px; width: 335px; height: 85px; background: url(../imagens/produtos_botao_pdf.png) no-repeat; text-indent: -9999em; overflow: hidden; } #produtos #coluna2 a.pdf:hover { background-position: 0 -85px; } /* ------- PRODUTO ------- */ #produto #limites { padding-bottom: 0; } #produto #conteudo { position: relative; } #produto #conteudo h1 { margin-bottom: 30px; } #produto #conteudo p.descricao { position: absolute; top: 17px; left: 323px; width: 640px; } #produto #conteudo #galeria { width: 994px; margin: 0 auto 30px; } #produto #conteudo ul.modelos { height: 88px; padding: 16px 0 0 57px; background: url(../imagens/produto_thumbs_bg.gif) repeat-x; list-style: none; } #produto #conteudo ul.modelos li { float: left; display: inline; margin: 0 7px; } #produto #conteudo ul.modelos li a { display: block; width: 75px; height: 74px; background: url(../imagens/produto_thumbs.png) no-repeat; text-indent: -9999em; overflow: hidden; } #produto #conteudo ul.modelos li.ecodecor a:hover { background-position: 0 -74px; } #produto #conteudo ul.modelos li.argile a { background-position: -88px 0; } #produto #conteudo ul.modelos li.argile a:hover { background-position: -88px -74px; } #produto #conteudo ul.modelos li.vogue a { background-position: -179px 0; } #produto #conteudo ul.modelos li.vogue a:hover { background-position: -179px -74px; } #produto #conteudo ul.modelos li.cement a { background-position: -267px 0; } #produto #conteudo ul.modelos li.cement a:hover { background-position: -267px -74px; } #produto #conteudo ul.modelos li.pietra a { background-position: -356px 0; } #produto #conteudo ul.modelos li.pietra a:hover { background-position: -356px -74px; } #produto #conteudo ul.modelos li.pietra_vermont a { background-position: -446px 0; } #produto #conteudo ul.modelos li.pietra_vermont a:hover { background-position: -446px -74px; } #produto #conteudo ul.modelos li.ecoparquet a { background-position: -536px 0; } #produto #conteudo ul.modelos li.ecoparquet a:hover { background-position: -536px -74px; } #produto #conteudo ul.modelos li.goa a { background-position: -624px 0; } #produto #conteudo ul.modelos li.goa a:hover { background-position: -624px -74px; } #produto #conteudo ul.modelos li.bauhaus a { background-position: -714px 0; } #produto #conteudo ul.modelos li.bauhaus a:hover { background-position: -714px -74px; } #produto #conteudo ul.modelos li.marmo a { background-position: -803px 0; } #produto #conteudo ul.modelos li.marmo a:hover { background-position: -803px -74px; } #produto.ecodecor h1 { background: url(../imagens/produto_ecodecor_titulo.png) no-repeat; } #produto.argile h1 { background: url(../imagens/produto_argile_titulo.png) no-repeat; } #produto.vogue h1 { background: url(../imagens/produto_vogue_titulo.png) no-repeat; } #produto.cementwood h1 { background: url(../imagens/produto_cementwood_titulo.png) no-repeat; } #produto.pietra h1 { background: url(../imagens/produto_pietra_titulo.png) no-repeat; } #produto.pietra_vermont h1 { background: url(../imagens/produto_pietra-vermont_titulo.png) no-repeat; } #produto.ecoparquet h1 { background: url(../imagens/produto_ecoparquet_titulo.png) no-repeat; } #produto.goa h1 { background: url(../imagens/produto_goa_titulo.png) no-repeat; } #produto.bauhaus h1 { background: url(../imagens/produto_bauhaus_titulo.png) no-repeat; } #produto.marmo h1 { background: url(../imagens/produto_marmo_titulo.png) no-repeat; } #produto.ecodecor #conteudo p.descricao { top: 6px; left: 200px; width: 770px; } #produto.argile #conteudo p.descricao { left: 141px; width: 820px; } #produto.vogue #conteudo p.descricao { left: 143px; width: 825px; } #produto.cementwood #conteudo p.descricao { left: 260px; width: 707px; } #produto.pietra_vermont #conteudo p.descricao { top: 7px; } #produto.ecoparquet #conteudo p.descricao { top: 7px; left: 301px; width: 670px; } #produto.goa #conteudo p.descricao { top: 23px; left: 118px; width: 840px; } #produto.bauhaus #conteudo p.descricao { top: 23px; left: 205px; width: 750px; } #produto.marmo #conteudo p.descricao { left: 297px; width: 667px; } /* ------- CADASTRO ------- */ #cadastro h1 { margin-bottom: 30px; background: url(../imagens/cadastro_titulo.png) no-repeat; } #cadastro #conteudo form { margin: 0 29px; } #cadastro #conteudo form p { font-size: 1.33em; color: #808080; } #cadastro #conteudo form p strong { font-size: 1.37em; font-weight: normal; color: #b2b2b2; } #cadastro #conteudo form ol { margin-top: 21px; list-style: none; } #cadastro #conteudo form ol li.paises, #cadastro #conteudo form ol li ol { margin: 0; } #cadastro #conteudo form ol li.paises { display: none; } #cadastro #conteudo form ol li.paises.ativo { display: list-item; } #cadastro #conteudo form ol li { overflow: hidden; } #cadastro #conteudo form ol li ul { margin-left: 112px; list-style: none; } #cadastro #conteudo form ol li { margin-bottom: 15px; } #cadastro #conteudo form ol li ul li { display: block; margin: 0; line-height: 28px; } * html #cadastro #conteudo form ol li ul li.arquiteto { position: relative; left: -3px; margin: -5px 0 5px; } * html #cadastro #conteudo form ol li ul li.outros label { position: relative; top: -7px; } #cadastro #conteudo form ol li label { float: left; width: 97px; margin-right: 15px; padding-top: 8px; font-size: 1.16em; text-align: right; color: #404040; } #cadastro #conteudo form ol li label.secundario { position: relative; top: -8px; float: none; margin-left: 10px; } html > body#cadastro #conteudo form ol li label.secundario { top: 0; } #cadastro #conteudo form ol li.check label { float: none; margin-left: 112px; } #cadastro #conteudo form ol li ul li label { float: none; margin: 0; padding: 0; } #cadastro #conteudo form ol li input { width: 584px; } #cadastro #conteudo form ol li input#ddd, #cadastro #conteudo form ol li input#numero { width: 24px; } #cadastro #conteudo form ol li input#telefone { width: 71px; } #cadastro #conteudo form ol li input#cep, #cadastro #conteudo form ol li select { width: 162px; } #cadastro #conteudo form ol li input#cidade, #cadastro #conteudo form ol li input#bairro { width: 252px; } #cadastro #conteudo form ol li input#endereco { width: 574px; } #cadastro #conteudo form ol li input#complemento { width: 413px; } #cadastro #conteudo form ol li select { position: relative; top: 7px; width: 180px; } html > body#cadastro #conteudo form ol li select { top: 0; } #cadastro #conteudo form ol li label input { width: auto; padding: 0; border: 0; } #cadastro #conteudo form ol li a.botao { position: relative; top: 4px; } #cadastro #conteudo form ol li a.duvida { display: block; margin: 3px 0 -10px 112px; padding-left: 9px; background: url(../imagens/seta.gif) 0 2px no-repeat; font-size: .8em; color: #404040; } html > body#cadastro #conteudo form ol li a.duvida { margin-bottom: 0; } .sucesso #conteudo .texto { margin: 0 29px; } .sucesso #conteudo h3 { margin-bottom: 5px; font-size: 1.83em; font-weight: normal; color: #b2b2b2; } .sucesso #conteudo p { margin-bottom: 1em; font-size: 1.33em; color: #808080; } /* ------- ENGLISH ------- */ .english #topo ul#menu li a { background-image: url(../imagens/topo_menu_en.png); } #home .english h1 { background-image: url(../imagens/home_titulo_acompanhe_en.png); } #home .english #conteudo #acompanhe dl#cadastro dt { width: 136px; height: 27px; background-image: url(../imagens/home_titulo_cadastre_en.png); } #produtos .english h1 { background-image: url(../imagens/produtos_titulo_en.png); } #cadastro .english h1 { background-image: url(../imagens/cadastro_titulo_en.png); } #produtos .english #coluna2 a.pdf { background-image: url(../imagens/produtos_botao_pdf_en.png); } #produto.bauhaus .english #conteudo p.descricao { top: 32px; } #produto.goa .english #conteudo p.descricao { top: 16px; } #produtos .english #coluna2 ul.modelos li.ecodecor a:hover { background-position: 0 -1430px; } #produtos .english #coluna2 ul.modelos li.argile a:hover { background-position: -175px -1430px; } #produtos .english #coluna2 ul.modelos li.vogue a:hover { background-position: -350px -1430px; } #produtos .english #coluna2 ul.modelos li.cement a:hover { background-position: 0 -1605px; } #produtos .english #coluna2 ul.modelos li.pietra a:hover { background-position: -175px -1605px; } #produtos .english #coluna2 ul.modelos li.pietra_vermont a:hover { background-position: -350px -1605px; } #produtos .english #coluna2 ul.modelos li.ecoparquet a:hover { background-position: 0 -1780px; } #produtos .english #coluna2 ul.modelos li.goa a:hover { background-position: -175px -1780px; } #produtos .english #coluna2 ul.modelos li.bauhaus a:hover { background-position: -350px -1778px; } #produtos .english #coluna2 ul.modelos li.marmo a:hover { background-position: -350px -1955px; }