/* css reset http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}:focus{outline:0}body{line-height:1;color:black;background:white}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;font-weight:normal}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:"" ""} /* clear fix http://www.webtoolkit.info/css-clearfix.html */ .clearfix:after { content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0 } .clearfix { display:inline-block } html[xmlns] .clearfix { display:block } * html .clearfix { height:1% } /* classes reutilizaveis */ .imgrpla{ display:-moz-inline-box; display:inline-block;/*display:block;font-size:1px;*/text-indent:-9000px;background:transparent none 0 0 no-repeat;font:0/0 Arial;overflow:hidden;} .imgrpl{background:transparent none 0 0 no-repeat;display:block;font-size:1px;text-indent:-9000px;} .show{display:block;} .hide{display:none;} .hidden{visibility:hidden;} .nb{border:none;background:transparent;} .fl{float:left;display:inline;} .fr{float:right;display:inline;} .cb{clear: both;} .selfix{vertical-align: 0 !important;vertical-align: -2px;} .radfix{width:13px !important;height:13px !important;width:15px;height:15px;vertical-align: -2px;_vertical-align: -1px;*vertical-align: -1px;border:none !important;background:none !important;padding:0;margin:0;} strong { font-weight: bold !important } /* uso geral */ /* forms */ input { height: 18px; line-height: 18px; padding: 2px; } input,select,textarea { border: 1px solid #FFFFFF; background: #FFFFFF; color: #000; font-family: Arial, Helvetica, sans-serif; line-height: 18px; } select option { padding: 2px; } textarea{ overflow:auto; } label { cursor: pointer; } /* fonte */ body,div,td,p,span,label.btn,input.btn,button.btn,a { color: #717171; font: 13px/1.2 Georgia, "Times New Roman", Times, serif; } /* links */ a{color: #D80000;} a:link{text-decoration:none;} a:visited{text-decoration:none;} a:active{text-decoration:none;} a:hover{text-decoration:underline;} * button {cursor:pointer!important;} /* Geral ----------------------------------------------- */ html { background: #f5f5f5 url(../images/body_bg.jpg) no-repeat left top; } body { background: transparent url(../images/tarja_vermelha.png) no-repeat right top; } a, a:link, a:visited, a:active { color: #D80000; text-decoration: none; } a:hover { color: #D80000; text-decoration: underline; } a img { border: none; } img.foto { border: 6px solid #409AC6 } h1, h2, h3, h4, h5, h6 { color: #D80000; font-weight: bold; text-align: left; text-shadow: 1px 2px 0px #EFEFEF; } h1 {font-size: 1.9em; margin: 0 0 5px; padding: 0.25em 0;} h2 {font-size: 22px; line-height: 26px; margin: 0 0 0px; padding: 0.25em 0;} h3 {font-size: 18px; line-height: 22px; margin: 0 0 5px; padding: 0.125em 0;} h4 {font-size: 16px; line-height: 18px; margin: 5px 0 0;} h5 {font-size: 14px; margin: 5px 0 0;} h6 {font-size: 12px; margin: 5px 0 0;} p {margin: 0.33em 0 15px 0;} ul, ol {margin: 1em 0; padding-left: 2.5em;} dt {margin: 0.5em 0 0;} dd {margin: 0.25em 0 0.5em 2.5em;} hr {background: #eaeaea; color: #eaeaea; clear:both; float:none; width:100%; height: 3px; margin:0; border:none; } strong { font-weight: bold; } /* Basicos ----------------------------------------------- */ .pointer { cursor: pointer; } .alignL { text-align: left !important; } .alignR { text-align: right !important; } .alignC { text-align: center !important; } .clearB { line-height: 1px !important; clear: both !important; } .clearN { clear: none !important; } .clearL { clear: left !important; } .clearR { clear: right !important; } .center { margin-left: auto !important; margin-right: auto !important; float: none; display: block; } .floatL { float: left !important; display: inline !important; height:auto !important; } .floatR { float: right !important; display: inline !important; height:auto !important; } .noBorder { border-width: 0 !important; } .fontBold { font-weight: bold !important; } .fontNormal { font-weight: normal !important; } .toLower { text-transform: lowercase; } .toUpper { text-transform: uppercase; } .displayNone { display: none !important; } .displayInline { display: inline !important; } .displayBlock { display: block !important; } /*.clearfix { clear:both; overflow:hidden; } .clearfix:after { clear:both; content: " "; display: block; }*/ .del { text-decoration: line-through; } .icons, .required { background-color: transparent; background-repeat: no-repeat; background-position: left top; padding-left: 20px !important; } .bgCenter { background-position: left center !important; } /*hr {background:#FFF;color:#FFF;clear:both;float:none;width:100%;height:1px;margin:0 0 1.45em;border:none;}*/ hr.space {background:#fff;color:#fff;visibility:hidden;} .imgreplacement { display:-moz-inline-box; display:inline-block; background:transparent none 0 0 no-repeat; text-indent:-3000px; font:0/0 Arial; overflow:hidden; color:rgba(255,255,255,0); vertical-align:bottom; } /* site 900px */ /* interna 900px */ /************************************************** ******************* SITE ************************** **************************************************/ .assinatura-orkestra, .btn, .jcarousel-next, .jcarousel-prev, .spacegallery a.next { background: transparent url('../images/vicenza_sprite.png') no-repeat 0 0; } p { color: #888888; font-size: 11px; text-shadow: 1px 1px 3px #FFF; } p.sub { font-size: 13px; color: #555555; } p.alert, p.sucess { font-size: 14px; } p.alert { color: #D80000; } p.sucess { color: #349405; } p a:hover { text-shadow: none; } .fechar { background: transparent url(../images/botoes_abrir_fechar.png) no-repeat -27px 0; height: 27px; width: 27px; } .fechar:hover { background-position: -27px bottom; } .abrir { background-position: 0 0 !important; } .abrir:hover { background-position: 0 bottom !important; } .options-cores a.color { border: 1px solid #E4E4E4; float: left; display: inline; margin: 0px; height: 16px; width: 16px; } .options-cores a.selected { border: 1px solid #D80000; } .btn { color: #E3E3E3 !important; display:-moz-inline-box; display:inline-block; font-size: 12px; line-height: 12px !important; text-align: center; } a.btn:hover { text-decoration: none; } input.btn, button.btn { border: medium none; color: #e3e3e3 !important; height: 27px; line-height: 12px; padding: 4px 10px 0; text-align: center; } .btn-verde-up, .btn-vermelho-up { padding: 10px 10px 5px !important; } .btn-verde-up { background-position: -73px -1px; } .btn-vermelho-up { background-position: -73px -35px; } .btn-verde-up:hover, .btn-vermelho-up:hover { background-position: -73px -69px; } .btn-verde-down, .btn-vermelho-down { padding: 4px 10px 11px !important; } .btn-verde-down { background-position: -73px -7px; } .btn-vermelho-down { background-position: -73px -41px; } .btn-verde-down:hover, .btn-vermelho-down:hover { background-position: -73px -75px; } .section { margin: 40px; } .coluna-a, .coluna-b { position: relative; width: 430px; } #inner { margin: 0 auto; width: 990px; padding-top: 45px; position: relative;} /************************************************** ******************** CABEÇALHO ******************** **************************************************/ #header { height: 95px; margin: 0 auto 5px; width: 310px } #logo { margin: 35px 20px 0 0; padding: 0; } #logo a img { display: block; } #menu { border-left: 1px solid #fbe5e5; margin: 0; padding: 15px 0 15px 18px; width: 120px; display: inline-block !important; } #menu li { margin: 0px 0px 0px 0px !important; width: 120px; } #menu li.last { margin-bottom: 0; } #menu li a { background-image: url('../images/menu.png'); display: block; clear:both; height: 11px;line-height: 11px; margin-bottom: 5px; } #menu li.last a { margin-bottom: 5px; } #menu li a:hover { text-decoration: none; } #menu li .home { background-position: 0 0; width: 39px; } #menu li .home:hover, html body#home #menu .home { background-position: 0 bottom; } #menu li .produtos { background-position: -41px 0; width: 69px; } #menu li .produtos:hover, html body#produtos #menu .produtos { background-position: -41px bottom; } #menu li .dicas { background-position: -112px 0; width: 40px; } #menu li .dicas:hover, html body#dicas #menu .dicas { background-position: -112px bottom; } #menu li .onde-encontrar { background-position: -154px 0; width: 120px; } #menu li .onde-encontrar:hover, html body#onde-encontrar #menu .onde-encontrar { background-position: -154px bottom; } #menu li .contato { background-position: -275px 0; width: 63px; } #menu li .contato:hover, html body#contato #menu .contato { background-position: -275px bottom; } /************************************************** ****************** AMBIENTES ********************** **************************************************/ #section-ambientes { margin: 25px 0 40px; } #galeria-ambientes { margin-left: 200px; position: relative; width: 590px; } #galeria-ambientes img { margin: 0 0 15px; } .spacegallery { margin-left: auto; width: 100%; position: relative; } .spacegallery img { position: absolute; left: 50%; margin-bottom: 0; } .spacegallery a.next { background-position: -1px -1px; height: 106px; position: absolute; right: -50px; top: 95px; width: 35px; z-index: 3; } #ambientes-info { padding-left: 15px; width: 185px; } .show-info { font-size: 11px; height: 365px; line-height: 17px; margin: 0 0 15px; position: relative; vertical-align: bottom; } .show-info h2 { color: #555555; font-size: 18px; line-height: 22px; } .show-info em { color: #888888; font-style: italic; } .show-info .zoom { display: block; font-size: 11px; margin-top: 5px; } .show-info .options-cores { display: block; margin-top: 6px; position: relative; } .show-info .btn { bottom: -30px; position: absolute; } .show-info .marca-cor_1 { left: -6px; } .show-info .marca-cor_2 { left: 12px; } .show-info .marca-cor_3 { left: 30px; } .show-info .marca-cor_4 { left: 47px; } .show-info .marca-cor_5 { left: 65px; } /************************************************** ***************** PRODUTOS ************************ **************************************************/ #section-produtos { margin: 0 0 40px; } .balao-info-produto { background: transparent url('../images/balao-info-produtos.png') no-repeat right 55px; border-left: 1px solid #D80000; left: 30px; padding: 55px 15px 8px 0; position: absolute; top: 87px; z-index: -1; } .balao-info-produto p { background-color: #D80000; color: #FFF; display: block;font-family: Arial, Helvetica, sans-serif; font-size: 11px; height: 36px; margin: 0; padding: 3px 4px 5px; text-shadow: none; text-transform: uppercase; } #frm_filtro { margin: 0 0 45px; padding: 0; position: relative; } #frm_filtro .fechar, #frm_filtro .abrir { display: none; left: 60px; position: absolute; top: -35px; } #filtro { margin: 0; padding: 0; height: 108px } #filtro li { display: block; height: 27px; } #filtro .options { height: 27px; } #filtro label { display: inline; float: left; margin-right: 10px; } #filtro a { color: #717171; font-size: 12px; line-height: 20px; margin-right: 5px; } #filtro a:hover, #filtro a.selected { color: #D80000; text-decoration: none; } #list-produtos { width: 950px; } ul#list-produtos { margin: 0px auto; padding-left: 0; } #list-produtos li { display: inline; float: left; height: 195px; margin: 5px 5px 15px; position: relative; width: 180px; } #list-produtos li a { display: block; } div#list-produtos { } .jcarousel-container { position: relative; } .jcarousel-container-horizontal { width: 900px; padding: 0 35px; } .jcarousel-clip { margin: 0; padding: 0; position: relative; overflow: hidden; z-index: 2; } .jcarousel-clip-horizontal { width: 900px; height: 195px; } .jcarousel-list { z-index: 1; overflow: hidden; position: relative; top: 0; left: 0; margin: 0; padding: 0; } /* Sem width/height causa loop infinito. */ .jcarousel-list li, .jcarousel-item { float: left; height: 195px; list-style: none; width: 180px; } .jcarousel-item-horizontal { margin: 0 !important; } .jcarousel-next, .jcarousel-prev { cursor: pointer; display: none; height: 106px; position: absolute; top: 10px; width: 35px; z-index: 3; } .jcarousel-next-horizontal { background-position: -1px -1px; right: 0px; } .jcarousel-prev-horizontal { background-position: -37px -1px; left: 0px; } .jcarousel-next-disabled-horizontal, .jcarousel-prev-disabled-horizontal { display: none !important; } /*************** PRODUTOS FILTRADOS *****************/ .produtos-filtrados { margin-top: 80px !important; } .produtos-filtrados #frm_filtro { display: inline; float: left; padding-top: 12px; width: 380px; } .produtos-filtrados #show-produtos { display: inline; float: right; position: relative; width: 610px; } .produtos-filtrados ul#list-produtos, .produtos-filtrados .jcarousel-container-horizontal, .produtos-filtrados .jcarousel-clip-horizontal { width: 540px; } .produtos-filtrados #frm_filtro .fechar, .produtos-filtrados #frm_filtro .abrir { display: block; top: -20px; } .produtos-filtrados #filtro .options { display: block; height: 27px; } .produtos-filtrados #filtro .set { display: block; } .produtos-filtrados div#list-produtos { } .produtos-filtrados div#list-produtos h2 { margin: 0 30px; } /*************** PRODUTO DETALHE ********************/ #section-produto-detalhe { } #section-produto-detalhe h2 small { display: block; font-size: 13px; } #section-produto-detalhe .coluna-a { margin-top: 30px; width: 990px } #section-produto-detalhe #produto-foto { position: relative; width: 510px; } #section-produto-detalhe .balao-info-produto { background-position: right 75px; left: 347px; top: 128px; padding-top: 75px; } #produto-descricao { width: 475px } /************************************************** ******************* DICAS ************************* **************************************************/ #section-dicas { } /************************************************** **************** ONDE ENCONTRAR ******************* **************************************************/ #section-onde-encontrar { } #section-onde-encontrar h4 { margin-top: 25px } #section-onde-encontrar dl.results { margin-top: 0 } #section-onde-encontrar .results dt { font-weight: bold; margin-top: 25px; } #section-onde-encontrar .results dd { color: #888888; font-size: 12px; margin-left: 0; } /************************************************** ****************** CONTATO ************************ **************************************************/ #section-contato { color: #717171; margin: 40px auto; width: 590px; } #section-contato h2, #section-contato h4 { margin: 0; padding: 0; } #section-contato fieldset { background: transparent url(../images/formulario_bg.gif) repeat 0 0;padding: 20px 30px;} .contato-assessoria span { color: #919191; display: block; font-size: 11px; } #section-contato label, #section-contato input, #section-contato select { display: inline; float: left; } #section-contato label { float: left; font-size: 11px; font-weight: bold; height: 24px; line-height: 24px; margin: 0 5px 10px 0; width: 70px; } #section-contato input#nome, #section-contato input#email { width: 445px } #section-contato input#telefone { width: 100px } #section-contato input#telefone, #section-contato select#estado { margin-right: 8px; } #section-contato input#cidade { width: 130px; } #section-contato textarea { height: 120px; padding: 5px; width: 518px; } /*************************************************** ************************ *************************** ***************************************************/ #chamada { margin: 25px 0 0 40px; position: relative; width: 500px; } #chamada h3 { background-image: url('../images/chamada_principal.png'); height: 58px; margin: 0 0 20px 0; padding: 0; width: 367px; } #chamada .fechar, #chamada .abrir { display: none; left: 371px; position: absolute; top: 49px; } /************************************************** ******************** RODAPE *********************** **************************************************/ #footer { margin-top: 35px; padding: 0 5px; } #footer p, #footer span { font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 15px; } #footer span { color: #B7B7B7; } #footer a.assinatura-orkestra { background-position: -1px -107px; float: right; height: 13px; width: 53px; }