/* CSS Document */ /*FTstudio - Criado por Allan Sanches - Flashtoons Stúdio webdesign contato@flashtoons.com.br - studio.flashtoons.com.br */ /* -------------------- ESTRUTURA ------------------------ estruturação do site, containers, posicionamento e tamanho ----------------------------------------------------------- 1 - configs principais reset / body / page container conteúdo container divide conteúdo 2 colunas coluna esquerda coluna direita hack haslayout 2 - topo borda arredondada do topo container do topo telefones logotipo 3- rodapé container do rodapé loto fixo criado por borda arredondada do rodapé 4 - menu 5 - textos e formatações p.texto 6 - contato form configurações contato/orçamento page body container iframe contato container iframe orçamento fieldset labels - textareas - selects - botões CONFIGS PRINCIPAIS ------------------------------------------------------------------------------------- 1 */ /* reset */ * { padding:0; margin:0; } body { background-color:#2A2A2A; font: Arial, Helvetica, sans-serif; font-size:13px; color:#FFFFFF; text-align:center;} /*container principal */ #page { margin-top:35px; margin-bottom:35px; margin-right: auto; margin-left: auto; position: relative; width:930px;} /*container conteúdo principal - corpo do site */ #meio { background-color:#3E3E3E; width: 930px; position:relative; z-index:1 } /*conteudo - parte de dentro do meio*/ .conteudo { width: 930px;} /*Divide conteúdo em 2 colunas verticais*/ /*container coluna esquerda*/ .blocoesquerda{ width:320px; position:relative; float:left; margin-left:29px; margin-top:25px; text-align:center; } /*container coluna direita*/ .blocodireita{ width:525px; position:relative; float:right; margin-right:29px; margin-top:25px; text-align:center; } /*hack haslayout*/ .gat { width: 930px; height:25px; clear:both} /*container conteúdo monobloco*/ .monobloco{width:680px; margin-left:auto; margin-right:auto; } /*divide a tela verticalmente em 2 partes iguais*/ .metade{width:445px; float:left; margin-left:10px; margin-right:10px; margin-top:20px; text-align:center;} /*divide a tela verticalmente em 3 partes iguais*/ .triplo{width:290px; float:left; margin-left:10px; margin-right:10px; margin-top:20px; text-align:center;} /* TOPO ------------------------------------------------------------------------------------------------- 2 */ /*container topo*/ #topo{ background: url(images/topobg.jpg) repeat-x left top; widht:930px; height:89px; } /*borda arredondada do topo*/ #tampatopo{ background: url(images/tampatopo.jpg) no-repeat center top; width:930px; height:7px; } /*telefones fixos do topo*/ #telefone{ color:#CDCDCD; width:210px; height:65px; line-height:21px; float:right; text-align:left; font-weight:bold; margin-top:05px; margin-right:20px; background-image:url(http://www.buffettender.com.br/images/logotopodireita.jpg); background-repeat: no-repeat; background-position: right center;} /*logo fixo do topo*/ #logotopo{ width:294px; height:71px; margin-left:35px; margin-top:8px; float:left;} /* RODAPÉ ---------------------------------------------------------------------------------------------- 3 */ /*container rodape*/ #rodape{ background: url(images/rodapebg.jpg) repeat-x left top; height:64px; width:930px; } /*logo fixo do rodape*/ #logorodape{ width:145px; height:41px; margin-left:20px; margin-top:15px; float:left;} /*logo by ftstudio*/ #by{ width:116px; height:41px; margin-right:20px; margin-top:13px; float:right;} /*borda arredondada do rodape*/ #tamparodape{ background: url(images/tamparodape.jpg) no-repeat center top; width:930px; height:8px; } /* MENU ---------------------------------------------------------------------------------------------- 4 */ /*container do menu*/ #containermenu{ width:930px; height:40px; margin-left:auto; margin-right:auto; position:relative; z-index:2; } ul { margin: 0; padding: 0; list-style: none; height:40px; } li { float: left; position: relative; width: 155px; height:40px; line-height:40px; } li ul { display: none; position: absolute; top: 40px; left: 0px; } li ul li{ width:200px; } li:hover ul, li.over ul { display: block;} ul li a { display: block; text-decoration: none; color: #777; } /* hack pra corrigir o espaçamento entre os itens da lista no IE 6 */ * html ul li a { height: 1%; } /* links hover do menu e submenu, substituindo o bg */ .menulinks { font-size:13px; font-weight: bold;} a.menulinks:link { display:block; color: #A7A7A7; text-decoration: none; background: url(images/menu.jpg) repeat-x center top; } a.menulinks:visited { display:block; color: #A7A7A7; text-decoration: none; background: url(images/menu.jpg) repeat-x center top; } a.menulinks:active { display:block; color: #A7A7A7; text-decoration: none; background: url(images/menu.jpg) repeat-x center top; } a.menulinks:hover { display:block; color: #FFFFFF; text-decoration: none; background: url(images/menuhover.jpg) repeat-x center top; } .submenulinks { font-size:14px;} a.submenulinks:link { display:block; color: #A7A7A7; text-decoration: none; background: url(images/submenu.jpg) repeat-x center top; } a.submenulinks:visited { display:block; color: #A7A7A7; text-decoration: none; background: url(images/submenu.jpg) repeat-x center top; } a.submenulinks:active { display:block; color: #A7A7A7; text-decoration: none; background: url(images/submenu.jpg) repeat-x center top; } a.submenulinks:hover { display:block; color: #FFFFFF; text-decoration: none; background: url(images/submenuhover.jpg) repeat-x center top; } /* TEXTOS E FORMATAÇÕES ---------------------------------------------------------------------------------------- 5 */ /* texto paragrafo padrão */ p.texto{ font-size:15px; text-align:left; line-height:25px;} /* título maior */ h1{font-size:18px; color:#63C1E0; text-align:center; line-height:30px; } /* título menor */ h2 { font-size:15px; color:#63C1E0; text-align:left; background:url(images/h2bg.jpg) no-repeat left center; padding-left:20px; line-height:25px; font-weight:normal;} /* texto escuro usado pra observações nos cardápios */ .obs{color:#A3A3A3} /* link normal */ a { font-size:13px; font-weight: bold;} a:link { color: #A7A7A7; text-decoration: none; } a:visited { color: #A7A7A7; text-decoration: none; } a:active { color: #A7A7A7; text-decoration: none; } a:hover { color: #FFFFFF; text-decoration: none; } /* CONTATO FORM configurações ---------------------------------------------------------------- 6 */ /*contato/orçamento page body*/ #contato { background-color:#3E3E3E; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;} /*container do IFRAME contato*/ .contatoiframe{ width:850px; height:390px; position:relative; clear:both; margin-left:auto; margin-right:auto;} /*container do IFRAME orçamento*/ .orcamentoiframe{ width:850px; height:600px; position:relative; clear:both; margin-left:auto; margin-right:auto; } /* Fieldset e inputs config */ /*container do form cadastro*/ #cadastro fieldset { width:450px; position:relative; clear:both; margin-left:auto; margin-right:auto; border:0px;} /* labels dos inputs - nivel de bloco*/ #cadastro label{ float: left; width: 200px; text-align:right; line-height:25px;} /* define os campos de texto */ #cadastro input, textarea { width: 220px; margin: 5px 0; background: #5D5D5D; border:#FFFFFF 1px solid; color:#FFFFFF; } /* menus dropdown */ #cadastro select { width: 220px; margin: 5px 0; background: #5D5D5D; border:#FFFFFF 1px solid; color:#FFFFFF;} /* centraliza o label da textareamaior */ #cadastro label.ltextarea{line-height:150px;} /* textarea maior pra mensagem */ #cadastro textarea{ height: 150px;} /* botão enviar */ #cadastro input.botao { width:50px; background:#000000; color:#ffffff; border:2px solid #ffffff; margin-right:15px; float:right;} /* variação de botão pro botão apagar*/ #cadastro input.botao2 { width:50px; background:#3E3E3E; color:#A3A3A3; border:2px solid #A3A3A3; margin-right:15px; float:right;} /* FOTOS ------------------------------------------------------------------------------------------------- 2 */ /*container fotos monobloco*/ .fotosmonobloco{width:880px; margin-left:auto; margin-right:auto;}