Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rodrigo Maia_41334

Sites do menu só abrem direito no Firefox, nada do IE, Safari, etc

Recommended Posts

Por favor, sou iniciante em arquivos CSS e JS, tenho um código grande aqui pois não sei onde está o problema, caso possam me ajudar agradeço demais. O site funciona direitinho no FF, mas em nenhum outro browser. Estou postando o style.css


/* ------------------------------------------------------------ */

/* ----------- GREPTEM HTML 5 simple, unique template --------- */

/* ------------------------------------------------------------ */

/* ------------- http://themeforest.net/user/Grep ------------- */

/* ------------------------------------------------------------ */

/* ------------------------------------------------------------ */

/* ------------------------- CONTENT -------------------------- */

/* ------------------------------------------------------------ */

/* --- 1. RESET ----------------------------------------------- */

/* --- 2. MAIN ------------------------------------------------ */

/* --- 3. HOME ------------------------------------------------ */

/* --- 3-1. LOGO ---------------------------------------------- */

/* --- 3-2. SHARE BOX ----------------------------------------- */

/* --- 3-3. NAVIGATION ---------------------------------------- */

/* --- 4. INNER ----------------------------------------------- */

/* --- 4-1. BACK BTN ------------------------------------------ */

/* --- 5. TYPHOGRAPHY ----------------------------------------- */

/* --- PAGES -------------------------------------------------- */

/* --- 6. ABOUT PAGE ------------------------------------------ */

/* --- 7. BLOG PAGE ------------------------------------------- */

/* --- 8. WORK PAGE ------------------------------------------- */

/* --- 9. SERVICES PAGE --------------------------------------- */

/* --- 10. CONTACT PAGE --------------------------------------- */

/* --- 11. FOOTER -------------------------------------------- */

/* --- 12. PAGINATION ----------------------------------------- */

/* --- 13. jQuery SCROLLBAR ----------------------------------- */

/* --- 14. PRINT MEDIA ---------------------------------------- */

/* --- 15. FONT-FACE ------------------------------------------ */

/* ------------------------------------------------------------ */

/* ------------------------------------------------------------ */


/* --------------------------- */

/* --------- 1. RESET -------- */

/* --------------------------- */


html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;}

article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section { display:block;}

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,

q:before, q:after { content:''; content:none; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration:line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }

table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }


body { font:13px/18px Arial, Helvetica, sans-serif; *font-size:small; }

select, input, textarea, button { font:99% sans-serif; }

pre, code, kbd, samp { font-family:monospace, sans-serif; }


a:hover, a:active { outline:none; }

ol { list-style-type:decimal; }

nav ul, nav li { margin:0; list-style:none; list-style-image:none; }

small { font-size:85%; }

strong, th { font-weight:bold; }

td { vertical-align:top; }


sub, sup { font-size:75%; line-height:0; position:relative; }

sup { top:-0.5em; }

sub { bottom:-0.25em; }


pre { white-space:pre; white-space:pre-wrap; word-wrap:break-word; padding:15px; }

textarea { overflow:auto; }

.ie6 legend, .ie7 legend { margin-left:-7px; }

input[type=radio] { vertical-align:text-bottom; }

input[type=checkbox] { vertical-align:bottom; }

.ie7 input[type=checkbox] { vertical-align:baseline; }

.ie6 input { vertical-align:text-bottom; }

label, input[type=button], input[type=submit], input[type=image], button { cursor:pointer; }

button, input, select, textarea { margin:0; }

input:valid, textarea:valid { }

input:invalid, textarea:invalid { border-radius:1px; -moz-box-shadow:0px 0px 5px red; -webkit-box-shadow:0px 0px 5px red; box-shadow:0px 0px 5px red; }

.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color:#f0dddd; }


::-moz-selection{ background:rgba(0, 0, 0, 0.5); color:#fff; text-shadow:none; }

::selection { background:rgba(0, 0, 0, 0.5); color:#fff; text-shadow:none; }

a:link { -webkit-tap-highlight-color:rgba(0, 0, 0, 0.5); }


button { width:auto; overflow:visible; }

.ie7 img { -ms-interpolation-mode:bicubic; }


body { color:#fff; }

select, input, textarea { color:#333; }

h1, h2, h3, h4, h5, h6 { font-weight:normal; line-height: normal; }

a, a:active, a:visited { color:#000; text-decoration:none; }

a:hover { color:rgba(0, 0, 0, 0.7); }


/* --------------------------- */

/* --------- 2. MAIN --------- */

/* --------------------------- */


#wrap {

min-height: 740px;

min-width: 960px;

position: absolute;

width: 100%;

height: 100%;

overflow: hidden;

background: url(../images/bgr_shadow.png) no-repeat 50% 50% #4b596a;

}

#home {

position: absolute;

height: 100%;

width: 100%;

top: 0;

left: 0;

z-index: 1;

background: url(../images/bgr_pattern.png) repeat 50% 50%;

}

#home .header {

position: absolute;

top: 25%;

width: 100%;

margin: -170px 0 0;

left: 0;

}

.content_box {

overflow :hidden;

width: 940px;

height: 530px;

margin: -290px 0 0 -488px;

position: absolute;

top: 50%;

padding: 25px;

left: 50%;

}


/* --------------------------- */

/* --------- 3. HOME --------- */

/* --------------------------- */


#home {

position: absolute;

height: 100%;

width: 100%;

top: 0;

left: 0;

z-index: 1;

background: url(../images/bgr_pattern.png) repeat 50% 50%;

}

#home .header {

position: absolute;

top: 25%;

width: 100%;

margin: -170px 0 0;

left: 0;

}


/* ------- 3-1. LOGO --------- */

#logo {

display: block;

margin: 0 auto;

width: 1000px;

height: 200px;

background: url(../images/logo.png) no-repeat;

text-indent: -999em;

}


/* ----- 3-2. SHARE BOX ------ */

.share_box {

position: absolute;

top: 52px;

left: -170px;

font-family: 'WebSymbolsRegular', cursive;

z-index: 9;

opacity: 0.5;

filter: alpha(opacity=50);

font-size: 16px;

overflow: hidden;

height: 40px;

color: #000;

text-align: center;

line-height: 40px;

background: #fff;

-webkit-transition: all 300ms linear;

-moz-transition: all 300ms linear;

-o-transition: all 300ms linear;

-ms-transition: all 300ms linear;

transition: all 300ms linear;

}

.share_box:hover {

left: 0;

}

.share_box ul {

display: inline-block;

padding: 0 0 0 10px;

width: 160px;

overflow: hidden;

}

.share_box li {

display: inline-block;

padding: 0 5px;

list-style: none;

}

.share_box .btn_share {

font-family: 'WebSymbolsRegular', cursive;

overflow: hidden;

height: 40px;

width: 40px;

float: right;

text-align: center;

cursor: default;

line-height: 40px;

background: #fff;

}


/* ----- 3-3. NAVIGATION ----- */

nav {

height: 250px;

position: absolute;

top: 50%;

left: 50%;

width: 960px;

margin: -125px 0 0 -480px;

}

nav ul {

overflow: hidden;

text-align: center;

padding: 40px 0;

margin: -40px 0;

width: 960px;

}

nav li {

width: 150px;

opacity: 0.5;

filter: alpha(opacity=50);

height: 250px;

overflow: hidden;

position: relative;

display: inline-block;

background: #fff;

margin-right: 10px;

}

nav li:last-child {

margin-right: 0px;

}

nav li a {

width: 100%;

height: 100%;

display: block;

color: #000;

position: relative;

}

nav li .ca-icon {

/*font-family: 'WebSymbolsRegular', cursive;

font-size: 60px;

color: #333;

text-shadow: 0px 0px 1px #333;

line-height: 150px;

position: absolute;

width: 100%;

height: 50%;

left: 0px;

top: 0px;

text-align: center;*/

}

nav li .ca-main {

font-size: 20px;

color: #000;

opacity: 0.8;

filter: alpha(opacity=80);

position: absolute;

width: 100%;

text-transform: uppercase;

top: 158px;

left:0;

text-align:center;

}

nav li:hover {

background-color:#000;

z-index:999;

-webkit-transform:scale(1.1);

-moz-transform:scale(1.1);

-ms-transform:scale(1.1);

-o-transform:scale(1.1);

transform:scale(1.1);

}

nav li:hover .ca-icon {

color:#fff;

font-size:80px;

filter:alpha(opacity=80);

opacity:0.8;

}

nav li:hover .ca-main {

color:#fff;

top: 152px;

}


/* --------------------------- */

/* -------- 4. INNER --------- */

/* --------------------------- */


#section_load {

position: absolute;

width: 100%;

height: 100%;

display: none;

z-index: 10;

background: url(../images/bgr_shadow.png) no-repeat 50% 50% #73a711;

}

#section_load:before, #section_load:after {

content: "";

position: absolute;

top: 0;

left: -23px;

width: 23px;

height: 100%;

background: url(../images/bgr_shadow_w.png) repeat-y 0 0;

}

#section_load: before {

background-position: -23px 0;

left: auto;

right: -23px;

}

#section_load .inner_wrap {

position: absolute;

width: 100%;

height: 100%;

background: url(../images/bgr_pattern.png) repeat 50% 50%;

}


/* ------ 4-1. BACK BTN ------ */

#back {

position: absolute;

z-index: 9999;

opacity: 0.5;

filter: alpha(opacity=50);

left: 40px;

text-align: center;

overflow: hidden;

background: #fff;

display: block;

color: #000;

font-family: 'WebSymbolsRegular', cursive;

font-size: 45px;

color: #333;

text-shadow: 0px 0px 1px #333;

line-height: 50px;

width: 60px;

top: 40px;

height: 60px;

text-align: center;

}

.finished #back {

position: fixed;

}

.ie #back {

line-height: 55px;

}

.ie9 #back {

line-height: 62px;

}

#back:hover {

background: #000;

color: #fff;

}


/* --------------------------- */

/* ------ 5. TYPHOGRAPHY ----- */

/* --------------------------- */


h1 {

font-size:42px;

color:#fff;

text-transform:uppercase;

}

h2 {

font-size:18px;

padding:0 0 20px;

color:#fff;

}

h2 strong {

color:#000;

font-weight:normal;

}

.entry {

height:390px;

}

.entry p {

padding:0 0 18px;

}

.entry h2 {

font-size:20px;

padding:0 0 20px;

color:#fff;

}

.entry h3 {

font-size:18px;

padding:0 0 20px;

color:#fff;

}

.entry h4 {

font-size:16px;

padding:0 0 20px;

text-transform:uppercase;

color:#000;

}

.entry .dropcap {

float:left;

font-size:41px;

padding:8px 10px 0 0;

}

.entry blockquote {

font-style:italic;

background:url(../images/bgr_quote.png) no-repeat 0 0;

padding:0 0 0 25px;

}

.entry ul {

padding:0 0 10px 14px;

}

.entry ul li {

padding:0 0 10px 30px;

line-height:20px;

position:relative;

list-style:none;

cursor:default;

margin:0;

}

.entry ul li:before {

width:10px;

height:10px;

content:'\0000a0';

position:absolute;

left:4px;

top:5px;

background:rgba(0, 0, 0, 0.5);

}

.entry .highlight {

color:#000;

background:rgba(255, 255, 0, 0.7);

}

.entry .highlight.dark {

background:rgba(0, 0, 0, 0.5);

color:#FFF;

}

.entry img {

display:block;

}

.entry .left_image {

padding:0 18px 18px 0;

float:left;

}

.entry .right_image {

padding:0 0 18px 18px;

float:right;

}

.entry .table_style {

padding:2px 0 24px;

}

.entry .table_style table {

text-align:left;

border-collapse:collapse;

width:100%;

padding:0;

margin:0;

}

.entry .table_style th {

text-align:center;

padding:10px 9px;

font-size:18px;

font-weight:normal;

color:#fff;

border-bottom:1px solid rgba(0, 0, 0, 0.1);

background:url(../images/bgr_scroller.png) repeat;

}

.entry .table_style tbody {

background:url(../images/bgr_scroller.png) repeat;

}

.entry .table_style td {

text-align:center;

padding:9px 10px;

}

.entry .table_style tbody tr:hover td {

background:url(../images/bgr_scroller.png) repeat;

}


/* --------------------------- */

/* ------ 6, ABOUT PAGE ------ */

/* --------------------------- */


.about_content .text_content {

float:left;

width:480px;

}

.about_content.full_width .text_content {

float:none;

width:940px;

}

.about_content.full_width .text_content .entry {

padding:0 0 40px;

}

.about_content .image_content {

float:right;

width:400px;

margin:11px 0 0;

}

.about_content .image_content img {

display:block;

-moz-box-shadow:0 0 25px rgba(0, 0, 0, 0.5);

-webkit-box-shadow:0 0 25px rgba(0, 0, 0, 0.5);

box-shadow:0 0 25px rgba(0, 0, 0, 0.5);

}


/* --------------------------- */

/* ------- 7, BLOG PAGE ------ */

/* --------------------------- */


.blog_content h1 {

padding:0 0 20px;

}

.blog_content h2 {

font-size:30px;

padding:0 0 5px;

color:#fff;

}

.blog_content h3 {

font-size:18px;

padding:0 0 20px;

color:#fff;

}

.blog_content h3 strong {

color:#000;

font-weight:normal;

}

.blog_content .posts {

float:left;

width:940px;

}

.blog_content .post {

float:left;

width:940px;

}

.blog_content .text_content {

float:left;

width:480px;

height:310px;

}

.blog_content .text_content .entry {

height:325px;

}

.blog_content .post_full .text_content {

width:940px;

}

.blog_content .image_content {

float:right;

}

.blog_content .image_content img {

display:block;

height:325px;

width:400px;

cursor:pointer;

-moz-box-shadow:0 0 25px rgba(0, 0, 0, 0.5);

-webkit-box-shadow:0 0 25px rgba(0, 0, 0, 0.5);

box-shadow:0 0 25px rgba(0, 0, 0, 0.5);

}

.blog_content .image_content img.click {

cursor:pointer;

}


/* --------------------------- */

/* ------- 8. WORK PAGE ------ */

/* --------------------------- */


.work_content ul {

margin:-10px -80px -50px -40px;

overflow:hidden;

padding:25px 0 0 40px;

}

.ie7 .work_content ul {

width:1200px;

}

.work_content .pagination_nav {

right:4px;

}

.work_content li {

list-style:none;

float:left;

height:180px;

width:440px;

margin:0 41px -5px -27px;

padding:23px;

background:url(../images/bgr_work_item.png) no-repeat;

}

.work_content li a {

float:left;

height:176px;

width:440px;

position:relative;

}

.work_content li img {

margin:0;

padding:0;

height:176px;

width:440px;

display:block;

}

.work_content li a:hover:after {

content:"";

float:left;

height:176px;

width:440px;

background:rgba(0, 0, 0, 0.2);

position:absolute;

top:0;

left:0;

}


/* --------------------------- */

/* ----- 9. SERVICES PAGE ---- */

/* --------------------------- */


.services_content .text_content {

float:left;

width:580px;

}

.services_content .list_content {

float:right;

padding:51px 0 0;

width:300px;

}

.services_content .list_content li {

background:url(../images/bgr_nav.png) no-repeat -58px 0;

padding:0 0 10px 30px;

line-height:20px;

position:relative;

list-style:none;

cursor:default;

margin:0;

}

.services_content .list_content li:before {

width:10px;

height:10px;

content:'\0000a0';

position:absolute;

left:4px;

top:5px;

background:rgba(0, 0, 0, 0.5);

}


/* --------------------------- */

/* ---- 10, CONTACT PAGE ----- */

/* --------------------------- */


.contact_content .text_content {

float:left;

width:360px;

}

.contact_content .entry {

width:360px;

font-size:18px;

padding:15px 25px 0;

height:140px;

margin:0 -25px;

}

.contact_content .entry p {

display:block;

padding:0 0 16px;

line-height:22px;

}

.contact_content .entry span {

float:right;

color:#000;

}

.contact_content p.note {

padding:0 0 10px;

line-height:22px;

margin:-10px 0 0;

}

.contact_content form {

position:relative;

}

.contact_content form fieldset {

position:relative;

}

.contact_content .notification_ok {

width:360px;

display:block;

text-align:center;

color:#fff;

font-size:14px;

height:18px;

padding:8px 0;

line-height:18px;

background:rgba(0, 0, 0, 0.5);

}

.contact_content .name_border, .contact_content .email_border, .contact_content .message_border {

width:344px;

display:block;

position:absolute;

top:0;

opacity:0.5;

filter:alpha(opacity=50);

padding:8px;

height:18px;

left:0;

background:#F00;

}

.contact_content .name_border {

top:0;

}

.contact_content .email_border {

top:49px;

}

.contact_content .message_border {

height:117px;

top:98px;

}

.contact_content form input[type=text] {

background:rgba(0, 0, 0, 0.5);

border:0;

display:block;

width:344px;

position:relative;

z-index:9;

margin:0 0 15px;

padding:8px;

height:18px;

color:rgba(225, 225, 225, 0.7);

font-size:12px;

line-height:18px;

}

.contact_content form input[type=submit] {

background:rgba(225, 225, 225, 0.5);

border:0;

display:block;

position:relative;

z-index:9;

float:left;

cursor:pointer;

margin:0;

height:30px;

padding:0 10px;

color:rgba(0, 0, 0, 0.7);

font-size:15px;

line-height:30px;

}

.contact_content form input[type=submit]:hover {

background-color:rgba(0, 0, 0, 0.5);

color:#fff;

}

.contact_content form textarea {

background:rgba(0, 0, 0, 0.5);

border:0;

position:relative;

z-index:9;

display:block;

width:344px;

margin:0 0 15px;

padding:8px;

resize:none;

height:117px;

color:rgba(225, 225, 225, 0.7);

font-size:12px;

line-height:18px;

}

.contact_content .map_content {

float:right;

width:520px;

height:480px;

margin:-12px -23px -23px;

text-align:center;

color:#000;

padding:23px;

background: url(../images/bgr_map.png) no-repeat;

}

.contact_content .map_content h2 {

color:#000;

}

.contact_content .map_content .bMapLoadMsg h2 {

color:#000;

line-height:480px;

}


/* --------------------------- */

/* ------- 11. FOOTER -------- */

/* --------------------------- */


#footer-container {

position:fixed;

background-color:rgba(0, 0, 0, 0.2);

bottom:0;

border-top:1px solid rgba(0, 0, 0, 0.3);

left:0;

width:100%;

font-size:11px;

font-family:Arial, Helvetica, sans-serif;

padding:15px 0;

text-align:center;

color:#fff;

z-index:99;

}

.ie7 #footer-container, .ie8 #footer-container {

border:0;

background:transparent;

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000, endColorstr=#30000000);

zoom:1;

}

#footer-container p, #footer-container ul, #footer-container li {

display:inline;

}

#footer-container ul li {

padding:0 5px;

}

#footer-container a.home {

margin:0 4px 0 15px;

}

#footer-container a.home:before {

display:inline;

content:"·";

position:relative;

left:-8px;

color:#fff;

}

#footer-container a {

color:#fff;

}

#footer-container a.current, #footer-container a:hover {

color:#000;

}


/* --------------------------- */

/* ------ 12. PAGINATION ----- */

/* --------------------------- */


.pagination_nav {

float:right;

height:30px;

position:absolute;

top:15px;

right:2px;

padding:23px;

z-index:9;

}

.pagination_nav .innernav {

float:left;

}

.pagination_nav a {

float:left;

opacity:0.5;

filter:alpha(opacity=50);

overflow:hidden;

position:relative;

margin:0 0 0 10px;

float:left;

background:#fff;

position:relative;

font-size:15px;

color:#333;

text-shadow:0px 0px 1px #333;

line-height:30px;

width:30px;

height:30px;

text-align:center;

}

.pagination_nav a.next, .pagination_nav a.prev {

font-family:'WebSymbolsRegular', cursive;

font-size:20px;

line-height:27px;

}

.ie .pagination_nav a.next, .ie .pagination_nav a.prev {

line-height:31px;

}

.pagination_nav a.activeSlide, .pagination_nav a:hover {

background-color:rgba(0, 0, 0, 0.5);

z-index:999;

color:#fff;

opacity:0.8;

filter:alpha(opacity=80);

}

.pagination_nav a.next {

float:right;

}


/* --------------------------- */

/* --- 13. jQuery SCROLLBAR -- */

/* --------------------------- */


.jspContainer {

overflow:hidden;

position:relative;

}

.jspPane {

position:absolute;

overflow:hidden;

outline:none;

}

.jspScrollable {

outline:none;

}

.jspVerticalBar {

position:absolute;

top:0;

right:0;

width:10px;

height:100%;

}

.jspTrack {

background:url(../images/bgr_scroller.png) repeat;

position:relative;

}

.jspDrag {

background:url(../images/bgr_scroller.png) repeat;

position:relative;

top:0;

left:0;

cursor:pointer;

}

.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {

float:left;

height:100%;

}

.jspHorizontalBar {

position:absolute;

bottom:0;

left:0;

width:100%;

height:10px;

background:url(../images/bgr_scroller.png) repeat;

}

.jspHorizontalBar .jspCap {

float:left;

}

.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {

float:left;

background:url(../images/bgr_scroller.png) repeat;

height:100%;

}


/* --------------------------- */

/* ----- 14. PRINT MEDIA ----- */

/* --------------------------- */


@media print {

* { background:transparent !important; color:black !important; text-shadow:none !important; filter:none !important;

-ms-filter:none !important; }

a, a:visited { color:#444 !important; text-decoration:underline; }

a[href]:after { content:" (" attr(href) ")"; }

abbr[title]:after { content:" (" attr(title) ")"; }

.ir a:after, a[href^=javascript:]:after, a[href^=#]:after { content:""; }

pre, blockquote { border:1px solid #999; page-break-inside:avoid; }

thead { display:table-header-group; }

tr, img { page-break-inside:avoid; }

@page { margin:0.5cm; }

p, h2, h3 { orphans:3; widows:3; }

h2, h3{ page-break-after:avoid; }

.share_box, #back{ display:none; }

}


/* --------------------------- */

/* ------ 15. FONT-FACE ------ */

/* --------------------------- */


@font-face {

font-family:'WebSymbolsRegular';

src:url('fonts/websymbols-regular-webfont.eot');

src:url('fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),

url('fonts/websymbols-regular-webfont.woff') format('woff'),

url('fonts/websymbols-regular-webfont.ttf') format('truetype'),

url('fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');

font-weight:normal;

font-style:normal;

}


/* --------------------------- */

/* ----- TEMPLATE STYLE ------ */

/* --------------------------- */


.template_select {

position:fixed;

top:50px;

right:-30px;

color:#000;

width:30px;

padding:0 0 0 65px;

font-size:11px;

font-family:Arial, Helvetica, sans-serif;

z-index:9999;

}

#picker, #picker2 {

display:none;

margin:0 0 0 -10px;

}

.template_select .feature_color {

overflow:hidden;

}

.template_select .control {

float:left;

background:url(../images/ico_ts_control.png) no-repeat 0 -50px;

height:50px;

width:50px;

position:absolute;

left:15px;

top:0;

}

.template_select .control_hide {

background:url(../images/ico_ts_control.png) no-repeat;

}

.template_select form {

padding:8px 20px 10px 30px;

width:180px;

background:#fff;

}

.template_select ul {

float:left;

padding:0 0 10px;

overflow:hidden;

margin:0 -10px 0 0;

list-style:none;

}

.template_select li {

float:left;

width:27px;

height:15px;

margin:0;

padding:7px 10px 0 0;

list-style:none;

}

.template_select li a {

display:block;

width:27px;

height:15px;

}

.template_select h3 {

margin:0 0 10px -10px;

display:block;

padding:10px 0 0;

line-height:14px;

font-size:14px;

}

.template_select label {

margin:0 0 10px -10px;

display:block;

padding:10px 0 0;

line-height:14px;

font-size:14px;

}

.template_select input {

display:block;

width:27px;

height:15px;

border:0;

padding:0;

cursor:pointer;

text-indent:-999em;

background-image:url(../images/ico_colors.png);

}

.template_select select {

margin:0 0 10px;

font-size:11px;

width:180px;

color:#000;

padding:3px 5px;

line-height:11px;

}

.template_select form {

position:relative;

}


e o index.html:


<!doctype html>

<!--[if IE 7 ]> <html lang="en" class="no-js ie ie7"> <![endif]-->

<!--[if IE 8 ]> <html lang="en" class="no-js ie ie8"> <![endif]-->

<!--[if IE 9 ]> <html lang="en" class="no-js ie ie9"> <![endif]-->

<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

<head>

<meta charset="UTF-8">


<title>VS</title>

<meta name="description" content="Agência INC">

<meta name="author" content="www.agenciainc.com.br">


<link rel="shortcut icon" href="favicon.ico">

<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="css/jquery.fancybox.css">

<link rel="stylesheet" href="css/farbtastic.css">

<link rel="stylesheet" id="font" href="css/fonts/Terminal.css">


<script src="js/libs/modernizr.js"></script>


<script src="js/libs/jquery.js"></script>


<script src="js/libs/jquery.fancybox.js"></script>

<script src="js/libs/jquery.bMap.js" type="text/javascript"></script>

<script src="js/plugins.js"></script>

<script src="js/script.js"></script>

</head>

<body>

<div id="wrap">

<div class="share_box">

<span class="btn_share">+</span>

<ul>

<li><a href="#">Facebook</a></li>

<!--<li><a href="#">g</a></li>

<li><a href="#">s</a></li>

<li><a href="#">t</a></li>

<li><a href="#">y</a></li>-->

</ul>

</div>

<section id="home">

<div class="inner_wrap">

<header class="header">

<h1 id="logo">Viver Sóbrio</h1>

</header>

<nav>

<ul>

<li>

<a class="menu_about" href="#about">

<span class="ca-icon"><!--<img src="images\programa.png" height="70"width="70"">--></span>

<h2 class="ca-main">Quem Somos</h2>

</a>

</li>

<li>

<a class="menu_services" href="#services">

<span class="ca-icon"></span>

<h2 class="ca-main">Serviços</h2>

</a>

</li>

<li>

<a class="menu_work" href="#work">

<span class="ca-icon"></span>

<h2 class="ca-main">O Programa</h2>

</a>

</li>

<li>

<a class="menu_contact" href="#contact">

<span class="ca-icon"></span>

<h2 class="ca-main">contato</h2>

</a>

</li>

</ul>

</nav>

</div>

</section>


<section id="section_load">

<a id="back" href="#">〈</a>

<div class="inner_wrap">

</div>

</section>

</div>

<div id="footer-container">

<footer>

<p>© 2014 Viver Sóbrio. Todos os direitos reservados.</p>

<a class="home" href="#">Página Inicial</a>

<ul>

<li><a class="menu_about" href="#about">Sobre</a></li>

<li><a class="menu_services" href="#services">Serviços</a></li>

<li><a class="menu_work" href="#work">Programa</a></li>

<li><a class="menu_contact" href="#contact">Contato</a></li>

</ul>

</footer>

</div>


<!--<div class="template_select">-->


<a href="#" class="control control_hide"></a>

<form action="#">

<label for="color1">Home colors</label>

<div class="feature_color" id="home_colors">

<ul>

<li><a href="#4b596a"></a></li>

<li><a href="#0e579d"></a></li>

<li><a href="#25639c"></a></li>

<li><a href="#73a711"></a></li>

<li><a href="#e05a00"></a></li>

<li><a href="#ac2689"></a></li>

<li><a href="#96b000"></a></li>

<li><a href="#377906"></a></li>

<li><a href="#7d0f0f"></a></li>

<li><input type="text" id="color1" name="color1"></li>

</ul>

</div>

<div id="picker"></div>

<label for="color2">Inner colors</label>

<div class="feature_color" id="inner_colors">

<ul>

<li><a href="#4b596a"></a></li>

<li><a href="#0e579d"></a></li>

<li><a href="#25639c"></a></li>

<li><a href="#73a711"></a></li>

<li><a href="#e05a00"></a></li>

<li><a href="#ac2689"></a></li>

<li><a href="#96b000"></a></li>

<li><a href="#377906"></a></li>

<li><a href="#7d0f0f"></a></li>

<li><input type="text" id="color2" name="color2"></li>

</ul>

</div>

<div id="picker2"></div>

<label for="fonts">Font</label>

<select id="fonts">

<option value="css/fonts/Actor.css">Actor</option>

<option value="css/fonts/Arial.css">Arial, Helvetica</option>

<option value="css/fonts/Cicle.css">Cicle</option>

<option value="css/fonts/Exo.css">Exo</option>

<option value="css/fonts/Gudea.css">Gudea</option>

<option value="css/fonts/Kreon.css">Kreon</option>

<option value="css/fonts/Magra.css">Magra</option>

<option value="css/fonts/Ruluko.css">Ruluko</option>

<option value="css/fonts/Share.css">Share</option>

<option selected value="css/fonts/Terminal.css">Terminal</option>

<option value="css/fonts/Ubuntu.css">Ubuntu</option>

</select>

</form>

</div>

<script src="js/libs/farbtastic.js"></script>

<script src="js/ts.js"></script>

</body>

</html>


Muito obrigado pela atenção!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá amigo...

 

Primeiro sempre quando for postar código de preferência em usar o BBCode de código, ficará melhor, segundo a organização do CSS esta muito boa. E por último tente usar CSS Hack para ele abrir corretamente nos outros browsers.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.