@charset "utf-8"; /*! * CSS3 * FRAMEBASE v1 (http://www.dudacaletti.com.br) * Copyright 2014 * No Licensed * Developer: Eduardo Petry Caletti * E-mail: contato@dudacaletti.com.br */ /* ========================================================================== //// OBSERVAÇÕES GERAIS - OBS 1: #000 será a cor padrão para todos os seletores. - OBS 2: O posicionamento padrão dos objetos será left. - OBS 3: Esse CSS será derivado para templates. //// OBSERVAÇÕES HTML 5 E CSS3 - HEADER: define o cabeçalho. - NAV: define o menu ou a navegação do site. - ARTICLE: define uma parte da página que tem uma composição de formulários, textos etc. Por exemplo, pode ser um post de forum, blog, comentários etc. - SECTION: define uma seção do layout em um determinado element. Ele pode conter um header e também um footer se preciso. - ASIDE: consiste em envolver informações que tem algo a ver com o conteúdo principal do site. Pode ser um menu lateral, um sidebar padrão com menu, banner, busca etc. - FOOTER: define o rodapé do elemento ou do layout. ========================================================================== */ /* ========================================================================== * ========================================================================== */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* ========================================================================== end * ========================================================================== */ /* ========================================================================== HTML ========================================================================== */ html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } /* ========================================================================== end HTML ========================================================================== */ /* ========================================================================== BODY ========================================================================== */ body { margin: 0; padding: 0; font-family: 'Archivo Narrow', sans-serif; } /* ========================================================================== end BODY ========================================================================== */ /* ========================================================================== SELETORES ========================================================================== */ h1, h2, h3, h4, h5, h6, p { margin: 0; padding:0; } /* === CABEÇALHO H1 === */ h1 { color: #000; } h1.amarelo { color: #FC0; } h1.azul { color: #09C; } h1.branco { color: #fff; } h1.laranja { color: #F90; } h1.roxo { color: #936; } h1.verde { color: #690; } h1.vermelho { color: #C00; } h1.titulo-categorias { font-size: 2em; color: #4C78C0; text-align:left; padding: 0 0 0 0; margin-top: 0; } h1.titulo-destaques { font-size: 2em; color: #000; text-align:left; padding: 0 0 10px 0; border-bottom:1px dotted #ccc; margin-top: 0; } h1.titulo-destaques1 { font-size: 2em; color: #000; text-align:left; margin-top: 0; } h1.id-pagina { font-size: 2em; color: #000; text-align:left; border-bottom: 1px dotted #CCC; padding: 0 0 15px 0; margin: 0 0 15px 0; } h1.mais-produtos { font-size: 2em; color: #000; text-align:center; border-bottom: 1px dotted #CCC; padding: 0 0 15px 0; margin: 0 0 15px 0; } h1.titulo-pedidos { font-family: 'Archivo Narrow', sans-serif; font-size: 0.8em; color: #FFF; text-align:center; padding: 20px; background-color:#D9251C; margin-bottom: 20px; border-radius: 5px; } /* === end CABEÇALHO H1 === */ /* === CABEÇALHO H2 === */ h2 { color: #000; } h2.amarelo { color: #FC0; } h2.azul { color: #09C; } h2.branco { color: #09C; } h2.laranja { color: #F90; } h2.roxo { color: #936; } h2.verde { color: #690; } h2.vermelho { color: #C00; } h2.listaproduto { color:#000; font-size: 1em; padding: 7px 0 7px 0; } /* === end CABEÇALHO H2 === */ /* === CABEÇALHO H3 === */ h3 { color: #000; } h3.amarelo { color: #FC0; } h3.azul { color: #09C; } h3.branco { color: #fff; } h3.laranja { color: #F90; } h3.roxo { color: #936; } h3.verde { color: #690; } h3.vermelho { color: #C00; } /* === end CABEÇALHO H3 === */ /* === CABEÇALHO H4 === */ h4 { color: #000; } h4.amarelo { color: #FC0; } h4.azul { color: #09C; } h4.branco { color: #fff; } h4.laranja { color: #F90; } h4.roxo { color: #936; } h4.verde { color: #690; } h4.vermelho { color: #C00; } /* === end CABEÇALHO H4 === */ /* === CABEÇALHO H5 === */ h5 { font-size: 0.8em; color: #fff; } h5.amarelo { color: #FC0; } h5.azul { color: #09C; } h5.branco { color: #09C; } h5.laranja { color: #F90; } h5.roxo { color: #936; } h5.verde { color: #690; } h5.vermelho { color: #C00; } /* === end CABEÇALHO H5 === */ /* === CABEÇALHO H6 === */ h6 { color: #000; } h6.amarelo { color: #FC0; } h6.azul { color: #09C; } h6.branco { color: #09C; } h6.laranja { color: #F90; } h6.roxo { color: #936; } h6.verde { color: #690; } h6.vermelho { color: #C00; } /* === end CABEÇALHO H6 === */ /* === CABEÇALHO PRODUTOS === */ h2.titulo-produto { font-size: 1.2em; color: #01458E; } h3.ref-produto { font-size: 1em; color: #666; font-weight:normal; } h3.valor-produto { font-size: 1em; color: #D9251C; } /* === end CABEÇALHO PRODUTOS === */ /* === SPAN === */ span { color: #D9251C; font-size:2em; font-weight:bold; } span.preto { color: #000; font-size:1.5em; } span.amarelo { color: #FC0; } span.azul { color: #09C; } span.branco { color: #09C; } span.laranja { color: #F90; } span.roxo { color: #936; } span.verde { color: #690; } span.vermelho { color: #C00; } /* === end SPAN === */ /* === PARÁGRAFO === */ p { font-size: 1em; color: #000; } p.amarelo { color: #FC0; } p.azul { color: #09C; } p.branco { font-size: 1em; color: #fff; } p.laranja { color: #F90; } p.roxo { color: #936; } p.verde { color: #690; } p.vermelho { color: #C00; } p.texto-rodape { font-size: 1em; color: #666; } /* === end PARÁGRAFO === */ /* === SELETOR DE TIPO === */ i { color: #000; } i.amarelo { color: #FC0; } i.azul { color: #09C; } i.branco { color: #09C; } i.laranja { color: #F90; } i.roxo { color: #936; } i.verde { color: #690; } i.vermelho { color: #C00; } /* === end SELETOR DE TIPO === */ /* === NEGRITO === */ strong { font-weight: bold; } /* === end NEGRITO === */ /* === MARCADOR === */ mark { color: #000; background: #ff0; } /* === end MARCADOR === */ /* === SMALL === */ small { font-size: 80%; } /* === end SMALL === */ /* === HR === */ hr { border: 1px dotted #ccc; } /* === end HR === */ /* === TABLE === */ table { border-spacing: 0; border-collapse: collapse; } /* === end TABLE === */ /* === DESTACAR TEXTO === */ blockquote { color: #fff; background-color: #000; padding: 5px; margin: 10px 0 10px 0; } /* === end DESTACAR TEXTO === */ /* === ADDRESS === */ address { margin-bottom: 20px; font-style: normal; line-height: 1.42857143; } /* === end ADDRESS === */ .pedido { font-size: 0.9em; color: #fff; text-decoration:none; font-weight:normal; -webkit-transition: all ease 0.5s; } .pedido:hover { font-size: 0.9em; color: #D8E4F7; text-decoration:none; font-weight:normal; padding-left: 10px; } .meus-pedidos { font-size: 0.9em; color: #fff; text-decoration:none; font-weight:bold; -webkit-transition: all ease 0.5s; line-height:normal; } .meus-pedidos:hover { font-size: 0.9em; color: #D8E4F7; text-decoration:none; font-weight:bold; line-height:normal; } .link-branco { font-size: 1em; color: #fff; text-decoration:none; font-weight:bold; -webkit-transition: all ease 0.5s; } .link-branco:hover { font-size: 1em; color: #F5D9D7; text-decoration:none; font-weight:bold; } .link-branco:active { font-size: 1em; color: #fff; text-decoration:none; font-weight:bold; -webkit-transition: all ease 0.5s; } .link-branco:visited { font-size: 1em; color: #fff; text-decoration:none; font-weight:bold; -webkit-transition: all ease 0.5s; } .link-email { font-size: 1.2em; color: #999; text-decoration:none; font-weight:bold; -webkit-transition: all ease 0.5s; } .link-email:hover { font-size: 1.2em; color: #D9251C; text-decoration:none; font-weight:bold; } .link-excluir { font-size: 1em; margin: 7px 0 7px 0; color: #999; text-decoration:none; font-weight:bold; -webkit-transition: all ease 0.5s; } .link-excluir:hover { font-size: 1em; margin: 7px 0 7px 0; color: #D9251C; text-decoration:none; font-weight:bold; } /* ========================================================================== end SELETORES ========================================================================== */ /* ========================================================================== NAV MENU ========================================================================== */ #menu-principal ul { width: 600px; background-color:#97BBF6; margin: 0; padding: 10px; float: right; list-style:none;font-size: 1em; text-align: center; font-weight: bold; border-radius:10px; } #menu-principal ul li { display: inline; padding: 0 0 0 14px; } #menu-principal ul li a { display: inline; color: #fff; text-decoration: none; } #menu-principal ul li a:hover { color: #FC3; text-decoration: none; } .menu-categorias ul { width: 100%; margin: 5px 0 0 0; padding: 0; list-style:none; font-size: 1em; text-align: left; border-bottom: none; } .menu-categorias ul li { display: block; } .menu-categorias ul li a { display: block; color: #fff; text-decoration: none; font-weight:normal; -webkit-transition: all ease 0.5s; background-color:#4C78C0; padding:10px; border-radius:5px; margin-bottom: 2px; } .menu-categorias ul li a:hover { color: #fff; text-decoration: none; font-weight:bold; background-color:#D9251C; padding-left: 30px; } .menu-rodape ul { padding: 0; list-style:none;font-size: 0.8em; text-align: left; border-bottom: none; } .menu-rodape ul li { display: inline; padding: 0 20px 0 0; } .menu-rodape ul li a { display: inline; color: #000; text-decoration: none; font-weight:bold; } .menu-rodape ul li a:hover { color: #FC9F9A; text-decoration: none; font-weight:bold; } .menuopcoes ul { padding: 0; list-style:none;font-size: 1.2em; text-align: center; border-bottom: none; } .menuopcoes ul li { display: inline; padding: 0 20px 0 20px; border-left: 1px solid #666; border-right: 1px solid #666; } .menuopcoes ul li a { display: inline; color: #666; text-decoration: none; font-weight:bold; -webkit-transition: all ease 0.5s; } .menuopcoes ul li a:hover { color: #05458D; text-decoration: none; font-weight:bold; } /* ========================================================================== end NAV MENU ========================================================================== */ /* ========================================================================== IMG ========================================================================== */ img { max-width: 100%; border: 0; } img.logo { max-width: 100%; border: 0; } img.logo-site { width: 170px; border: 0; margin: 0 0 0 0; } img.foto-produto { max-width: 100%; border: 1px dotted #ccc; padding: 10px; margin: 10px 0 10px 0; border-radius: 5px; transition: all ease 0.5s; -webkit-transition: all ease 0.5s; } img.foto-produto:hover { max-width: 100%; border: 1px dotted #000; padding: 10px; margin: 10px 0 10px 0; border-radius: 5px; opacity: 0.4; filter: alpha(opacity=40); } img.icone { width: 22px; margin: 0 0 5px 0; padding: 7px; border-radius: 5px; background-color:#01458E; -webkit-transition: all ease 0.5s; } img.icone:hover { width: 22px; margin: 0 0 5px 0; padding: 7px; border-radius: 5px; background-color:#052445; } img.icone-carrinho { width: 35px; margin: 0 0 5px 0; } img.padrao { margin: 0 0 20px 0; } img.flutuante { max-width: 100%; margin: 0 20px 20px 0; float: left; } /* ========================================================================== end IMG ========================================================================== */ /* ========================================================================== LISTA ORDENADAS E NÃO ORDENADAS ========================================================================== */ ol, ul { top: 0; left: 0; bottom: 0; right: 0; } li { display: block; margin: 0 0 5px 0; transition: all ease 0.5s; -webkit-transition: all ease 0.5s; text-decoration: none; } li:hover { color: #ccc; } /* ========================================================================== end LISTA ORDENADAS E NÃO ORDENADAS ========================================================================== */ /* ========================================================================== PAGINAÇÃO ========================================================================== */ .paginacao { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; } .paginacao > li { display: inline; } .paginacao > li > a, .paginacao > li > span { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #000; text-decoration: none; background-color: #fff; border: 1px solid #ddd; } .paginacao > li:first-child > a, .paginacao > li:first-child > span { margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .paginacao > li:last-child > a, .paginacao > li:last-child > span { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .paginacao > li > a:hover, .paginacao > li > span:hover, .paginacao > li > a:focus, .paginacao > li > span:focus { color: #000; background-color: #eee; border-color: #ddd; } .paginacao > .active > a, .paginacao > .active > span, .paginacao > .active > a:hover, .paginacao > .active > span:hover, .paginacao > .active > a:focus, .paginacao > .active > span:focus { z-index: 2; color: #fff; cursor: default; background-color: #D9251C; border-color: #D9251C; } .paginacao > .disabled > span, .paginacao > .disabled > span:hover, .paginacao > .disabled > span:focus, .paginacao > .disabled > a, .paginacao > .disabled > a:hover, .paginacao > .disabled > a:focus { color: #999; cursor: not-allowed; background-color: #fff; border-color: #ddd; } .paginacao-lg > li > a, /* === LARGE / GRANDE === */ .paginacao-lg > li > span { padding: 10px 16px; font-size: 18px; } .paginacao-lg > li:first-child > a, .paginacao-lg > li:first-child > span { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .paginacao-lg > li:last-child > a, .paginacao-lg > li:last-child > span { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .paginacao-sm > li > a, /* === SMALL / PEQUENO === */ .paginacao-sm > li > span { padding: 5px 10px; font-size: 12px; } .paginacao-sm > li:first-child > a, .paginacao-sm > li:first-child > span { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .paginacao-sm > li:last-child > a, .paginacao-sm > li:last-child > span { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } /* ========================================================================== end PAGINAÇÃO ========================================================================== */ .pagination{ padding: 0; text-align: center; } .pagination ul{ margin: 0; padding: 0; text-align: center; /*Set to "right" to right align pagination interface*/ font-size: 1em; } .pagination li{ list-style-type: none; display: inline; padding-bottom: 1px; } .pagination a, .pagination a:visited{ padding: 10px; border: 1px solid #9aafe5; text-decoration: none; color: #2e6ab1; } .pagination a:hover, .pagination a:active{ border: 1px solid #2b66a5; color: #000; background-color: #A2C6ED; transition: all ease 0.5s; -webkit-transition: all ease 0.5s; } .pagination a.currentpage{ background-color: #01458E; color: #FFF !important; border-color: #2b66a5; font-weight: bold; cursor: default; } .pagination a.disablelink, .pagination a.disablelink:hover{ background-color: white; cursor: default; color: #929292; border-color: #929292; font-weight: normal !important; } .pagination a.prevnext{ font-weight: bold; } /* PAGING --------------------------------------------------------- */ #paging-table { width: 100%; height: auto; float: left; position: relative; text-align:center; } .paging-table-estrutura { width: auto; margin: 0 38% 0 38%; } .page-far-left { display: block; float: left; height: 24px; margin: 0 4px 0 0; width: 24px; background-color:#01458E; border-radius: 5px; transition: all ease 0.5s; -webkit-transition: all ease 0.5s; } .page-far-left:hover { display: block; float: left; height: 24px; margin: 0 4px 0 0; width: 24px; background-color:#000; border-radius: 5px; } .page-far-left-1 { display: block; float: left; height: 24px; margin: 0 4px 0 0; width: 24px; background-color:#01458E; border-radius: 5px; transition: all ease 0.5s; -webkit-transition: all ease 0.5s; } .page-far-left-1:hover { display: block; float: left; height: 24px; margin: 0 4px 0 0; width: 24px; background-color:#000; border-radius: 5px; } .page-left { display: block; float: left; height: 24px; width: 24px; } .page-far-right { display: block; float: left; height: 24px; margin: 0 4px 0 4px; width: 24px; background-color:#01458E; border-radius: 5px; transition: all ease 0.5s; -webkit-transition: all ease 0.5s; } .page-far-right:hover { display: block; float: left; height: 24px; margin: 0 4px 0 4px; width: 24px; background-color:#000; border-radius: 5px; } .page-far-right-1 { display: block; float: left; height: 24px; margin: 0 4px 0 4px; width: 24px; background-color:#01458E; border-radius: 5px; transition: all ease 0.5s; -webkit-transition: all ease 0.5s; } .page-far-right-1:hover { display: block; float: left; height: 24px; margin: 0 4px 0 4px; width: 24px; background-color:#000; border-radius: 5px; } .page-right { display: block; float: left; height: 24px; width: 24px; } #page-info { float: left; line-height: 16px; padding: 3px 12px 0 12px; color:#000; text-align: center; } /* ========================================================================== BREADCRUMB // Localização do Usuário
  1. Home
  2. Library
  3. Data
========================================================================== */ .breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: none; } .breadcrumb > li { display: inline-block; } .breadcrumb > li + li:before { padding: 0 5px; color: #000; content: "/\00a0"; text-decoration:none; } .breadcrumb > .active { color: #F60; } /* ========================================================================== end BREADCRUMB ========================================================================== */ /* ========================================================================== FORMULÁRIOS PADRÃO ========================================================================== */ label { width: 100%; color: black; margin: 0 10px 0 0; font-weight: bold; } radio, select, input, textarea { font-family: 'Archivo Narrow', sans-serif; width: 70%; padding: 1%; margin: -5px 0 10px 0; border: 1px solid #ccc; font-size: 1em; border-radius: 5px; background-color:#fff; } input[type="button"], input[type="reset"], input[type="submit"] { width: auto; background-color: #053160; border: 1px solid #053160; font-weight: bold; -webkit-appearance: button; cursor: pointer; color: #fff; border-radius: 5px; } .campo1 { width: 100%; padding: 1%; background-color:#fff; border: 1px solid #ccc; margin: 0 0 10px 0; font-size:1.2em; color:#999; } .campo2 { width: 49.8%; padding: 1%; background-color:#fff; border: 1px solid #ccc; margin: 0 0 10px 0; font-size:1.2em; color:#999; } .campo3 { width:37.8%; padding: 1%; background-color:#fff; border: 1px solid #ccc; margin: 0 10px 10px 0; font-size:1em; color:#999; } .botao { width: auto; font-family: 'Archivo Narrow', sans-serif; padding: 1%; background-color:#053160; border: 1px solid #053160; font-size:1em; color:#fff; font-weight:bold; border-radius: 5px; } .campoquantidade { width: 100%; padding: 1%; background-color:#fff; border: 1px solid #ccc; font-size:1em; color:#999; margin: 5px 0 5px 0; text-align:center; } .campoordem { width: 100%; padding: 1%; background-color:#fff; border: 1px solid #ccc; margin: 0 0 25px 0; font-size:1.2em; color:#999; } /* ========================================================================== end FORMULÁRIOS PADRÃO ========================================================================== */ /* ========================================================================== LIKEBOX e YOU TUBE RESPONSIVO ========================================================================== */ /* --- LIKEBOX --- */ #fb-root { display: none; } .fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] { width: 100% !important; height: 100%; } /* --- end LIKEBOX --- */ /* --- YOU TUBE --- */ .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .video-youtube { border: 0; } /* --- end YOU TUBE --- */ /* ========================================================================== end LIKEBOX e YOU TUBE RESPONSIVO ========================================================================== */ /* ========================================================================== DIVS ID e CLASSES ESTRUTURAIS HTML5 ========================================================================== */ #main, #top, #header, #menu, #slide, #search, #content, #footer, #copyright { width: 100%; height: auto; position: relative; float: left; margin: 0 auto; } #box1, #box2, #box3, #box4, #box5, #box6, #box7, #box8, #box9, #box10, #box11, #box12, #box13, #box14, #box15 { width: 100%; height: auto; position: relative; float: left; } .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10, .box11, .box12, .box13, .box14, .box15 { width: 100%; height: auto; position: relative; float: left; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } #content { margin-bottom: 30px; } #header { position: relative; margin: 0 0 0 0; } #search { position: relative; background-color:#ededec; z-index:9999; margin:-20px 0 0 0; } #slide { height: 300px; margin: 0; position: relative; background-color:#000; z-index:888; } #slide-interno { height: 300px; margin: 0; position: relative; background-color:#000; z-index:888; } #back-header { height: 300px; margin: 0; position: relative; background:url(../jpg/slide2.jpg) center no-repeat; } #recorte { width: 100%; height: 26px; float: left; z-index: 9999; margin: -15px 0 0 0; position: relative; background:url(../png/recorte.png) center no-repeat; } #recorte2 { width: 100%; height: 26px; float: left; z-index: 8888; margin: -15px 0 0 0; position: relative; background:url(../png/recorte2.png) center no-repeat; } #recorte1 { width: 100%; height: 26px; float: left; z-index: 9999; margin: -20px 0 -15px 0; position: relative; background:url(../png/recorte.png) center no-repeat; } #recorte-interno { width: 100%; height: 26px; z-index: 9998; margin: -17px 0 0 0; position: relative; background-color:#000; background:url(../png/recorte.png) center no-repeat; } #box1 { position: relative; float: left; background-color:#D9251B; } #footer { clear: both; margin: 0 0 0 0; padding: 20px 0 20px 0; background-color:#D9251C; } #copyrght { padding: 5px 0 5px 0; background-color:#000; } .box-slide { width: 360px; padding: 2%; margin: 80px 0 0 11.5%; border-radius: 5px; background-color:#053160; } .logo { margin: 0 0 10px 0; text-align:center; } .slide1 { width: 100%; height: 300px; position: relative; float: left; background:url(../jpg/slide2.jpg) center no-repeat; } .slide2 { width: 100%; height: 300px; position: relative; float: left; background:url(../jpg/slide1.jpg) center no-repeat; } .col-1-4 { margin-bottom: 25px; } .box-comprar { width: 100%; background-color:#01458E; margin: 5px 0 0 0; float: right; padding: 5px 10px 5px 10px; border-radius: 5px; text-align:center; } #selecionar-mobile { width: 100%; height: auto; position: relative; float: left; margin-bottom: 25px; display:none; } .recorte-footer { width: 100%; height: 100px; position: relative; float: left; background:url(../jpg/backfooter1.jpg) center no-repeat; } .box-compras-lista { width: 20%; background-color:#D9251C; margin: 0 0 0 0; float: right; padding: 5px 10px 5px 10px; border-radius: 5px; text-align:center; } .texto-alinhado-esquerda { text-align: left; } .texto-alinhado-direita { text-align: right; margin:0; } .texto-alinhado-centro { text-align: center; } .espaco-box { padding: 0 0 0 10px; } .categorias { width: 20%; height: 100%; position: relative; float: left; } .produtos { width: 79%; height: auto; position: relative; float: left; padding: 0 0 2% 2%; background-color:#fff; border-radius: 10px; margin: 0 0 25px 1%; } .box-margem { margin: 0 0 40px 0; } /* ========================================================================== end DIVS ID e CLASSES ESTRUTURAIS ========================================================================== */ /* ========================================================================== GRID SYSTEM ========================================================================== */ [class*='col-'] { float: left; padding-right: 20px; } [class*='col-']:last-of-type { padding-right: 0px; } .grid { width: 100%; max-width: 1140px; min-width: 755px; margin: 0 auto; overflow: hidden; } .grid:after { content: ""; display: table; clear: both; } .grid-pad { padding: 20px 0 20px 0; } .grid-pad > [class*='col-']:last-of-type { padding-right: 20px; } .push-right { float: right; } /* ========================================================================== end GRID SYSTEM ========================================================================== */ /* ========================================================================== CONTENT COLUNAS ========================================================================== */ .col-1-1 { width: 100%; } .col-2-3, .col-8-12 { width: 66.66%; } .col-1-2, .col-6-12 { width: 50%; } .col-1-3, .col-4-12 { width: 33.33%; } .col-1-4, .col-3-12 { width: 25%; } .col-1-5 { width: 20%; } .col-1-6, .col-2-12 { width: 16.667%; } .col-1-7 { width: 14.28%; } .col-1-8 { width: 12.5%; } .col-1-9 { width: 11.1%; } .col-1-10 { width: 10%; } .col-1-11 { width: 9.09%; } .col-1-12 { width: 8.33%; } .col-1-13 { width: 80%; } /* ========================================================================== end CONTENT COLUNAS ========================================================================== */ /* ========================================================================== LAYOUT COLUNAS ========================================================================== */ .col-11-12 { width: 91.66%; } .col-10-12 { width: 83.333%; } .col-9-12 { width: 75%; } .col-5-12 { width: 41.66%; } .col-7-12 { width: 58.33%; } /* ========================================================================== end LAYOUT COLUNAS ========================================================================== */ /* ========================================================================== CONTENT COLUNAS PORTAIS // E-COMMERCE // GRID 1140px Cálculo para Pixels: Objeto / Contexto = Resultado Coloque o ponto duas casas para direita e acrescente o sinal de porcentagem. Ex.: 840px / 1140px = 0,7368 - Resultado: 73.68% Ex.: 300px / 1140px = 0,2631 - Resultado: 31.25% ========================================================================== */ .col-principal { width: 73.68%; position: relative; float: left; margin: 0; } /* === Coluna de Conteúdo // 840px === */ .col-sidebar { width: 26.31%; position: relative; float: right; margin: 0; } /* === Coluna Sidebar // 300px === */ /* ========================================================================== end CONTENT COLUNAS PORTAIS // E-COMMERCE // GRID 1140px ========================================================================== */ /* ========================================================================== GRID e DIV FIXAS ========================================================================== */ #fixo-top { width: 100%; position: fixed; float: left; top: 0; padding: 1% 2.5% 1% 2.5%; background-color: #000; z-index: 9999; } /* === TOPO === */ #fixo-right { width: 20%; height: 100%; position: fixed; float: right; right: 0; padding: 2.5%; background-color: #000; z-index: 9999; } /* === DIREITA === */ #fixo-footer { width: 100%; position: fixed; float: left; bottom: 0; padding: 1% 2.5% 1% 2.5%; background-color: #000; z-index: 9999; } /* === TOPO === */ #fixo-left { width: 20%; height: 100%; position: fixed; float: left; left: 0; padding: 2.5%; background-color: #fff; z-index: 9999; -webkit-box-shadow: 0px 0px 3px #000; -moz-box-shadow: 0px 0px 3px #000; box-shadow: 0px 0px 3px #000; } /* === ESQUERDA === */ #grid-geral { width: 80%; height: auto; position: relative; float: left; left: 20%; margin: 0; padding: 0; } /* === GRID sem Padding === */ #grid-top { width: 100%; height: auto; position: relative; float: left; } /* === Top irá variar === */ #grid-right { width: 80%; height: auto; position: relative; float: right; right: 20%; padding: 2.5%; } #grid-footer { width: 80%; height: auto; position: relative; float: left; bottom: 20%; padding: 2.5%; } #grid-left { width: 80%; height: auto; position: relative; float: left; left: 20%; padding: 2.5%; } /* ========================================================================== end GRID e DIV FIXAS ========================================================================== */ /* ========================================================================== BACKGROUND DIVS ========================================================================== */ .back-amarelo { width: 100%; height: auto; background-color: #FC0; } .back-azul { width: 100%; height: auto; background-color: #09C; } .back-branco { width: 100%; height: auto; background-color: #fff; } .back-laranja { width: 100%; height: auto; background-color: #F90; } .back-preto { width: 100%; height: auto; background-color: #000; } .back-roxo { width: 100%; height: auto; background-color: #936; } .back-verde { width: 100%; height: auto; background-color: #690; } .back-vermelho { width: 100%; height: auto; background-color: #C00; } /* ========================================================================== end BACKGROUND DIVS ========================================================================== */ /* ========================================================================== MEDIA QUERIES 767px ========================================================================== */ @media handheld, only screen and (max-width: 767px) { .grid { width: 100%; min-width: 0; margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; } [class*='col-'] { width: auto; float: none; margin-left: 10px; margin-right: 0; margin-top: 10px; margin-bottom: 10px; } label { width: 100%; color: black; margin: 0 0 0 0; font-weight: bold; } radio, select, input, textarea { font-family: 'Archivo Narrow', sans-serif; width: 100%; padding: 3%; margin: -5px 0 10px 0; border: 1px solid #ccc; font-size: 1em; border-radius: 5px; background-color:#fff; } input[type="button"], input[type="reset"], input[type="submit"] { width: 100%; background-color: #053160; border: 1px solid #053160; font-weight: bold; -webkit-appearance: button; cursor: pointer; color: #fff; border-radius: 5px; } .box-compras-lista { width: 94%; background-color:#D9251C; margin: -10px 3% 0 3%; float: left; padding: 5px 10px 5px 10px; border-radius: 5px; text-align:center; } .box-comprar { width: 100%; background-color:#01458E; margin-top: 5px; margin-bottom: 25px; padding: 5px 10px 5px 10px; border-radius: 5px; text-align:center; } .col-1-5 { width: 100%; } .col-1-13 { width: 100%; } .box-slide { width: 90%; padding: 5%; margin: 100px 5% 0 5%; border-radius: 5px; background:url(../png/rodape.png) center repeat; } .produtos { width: 100%; } .ocultar-mobile { display:none; } #selecionar-mobile { width: 100%; height: auto; position: relative; float: left; margin-bottom: 25px; background-color:#000; } .categorias { display:none; } #recorte { display: none; } #recorte1 { display: none; } #recorte2 { display: none; } #footer { margin-top:0; } .texto-alinhado-esquerda { text-align: center; } .texto-alinhado-direita { text-align: center; } .texto-alinhado-centro { text-align: center; } .campo1 { width: 100%; padding: 3%; background-color:#fff; border: 1px solid #ccc; margin: 0 0 10px 0; font-size:1.2em; color:#999; } .campo2 { width: 100%; padding: 3%; background-color:#fff; border: 1px solid #ccc; margin: 0 0 10px 0; font-size:1.2em; color:#999; } .campo3 { width:100%; padding: 2%; background-color:#fff; border: 1px solid #ccc; margin: 5px 0 10px 0; font-size:1em; color:#999; } .botao { width: auto; font-family: 'Archivo Narrow', sans-serif; padding: 3%; background-color:#053160; border: 1px solid #053160; font-size:1em; color:#fff; font-weight:bold; border-radius: 5px; margin-bottom: 20px; } #content { margin:0; } .recorte-footer { display:none; } .paging-table-estrutura { width: 100%; margin: 0; } .menuopcoes ul { padding: 0; list-style:none;font-size: 1.2em; text-align: center; border-bottom: none; } .menuopcoes ul li { display: block; padding: 0 0 10px 0; border-left: none; border-right: none; border-bottom: 1px dotted #666; } .menuopcoes ul li a { display: block; color: #666; text-decoration: none; font-weight:bold; -webkit-transition: all ease 0.5s; } .menuopcoes ul li a:hover { color: #05458D; text-decoration: none; font-weight:bold; } } /* ========================================================================== end MEDIA QUERIES 767px ========================================================================== */