/* Theme Name: Power Over Energy Description: Custom WP Theme built upon Starkers 4.0 by Elliot Jay Stocks. Version: 1.0 Author: MPD Tags: starkers, custom */ /* =========================== CONTENTS: 01 Sitewide defaults 02 Typography 03 Main Section Layouts =========================== */ /* ================= 01 SITEWIDE DEFAULTS =============== */ @import "css/reset_starkers.css"; @import "fonts/fontstyles.css"; a:focus { outline:none } a,.invert a:hover,a:hover.invert { color: #559cbe; text-decoration: none; } a:hover,.invert a,a.invert { color:#2f5466; } .clear { clear: both; } .bold { font-weight: bold; } .uppercase { text-transform: uppercase; } .hide { display: none; } .fLeft { float:left; } .fRight { float:right; } .fCenter { margin: 0 auto; } .aRight { text-align: right; } /* sup { font-size:.5em; vertical-align:top; } sub { font-size:.5em; vertical-align:bottom; } */ /* Micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/ */ .cf { zoom: 1; } .cf:before, .cf:after { content: ""; display: table; } .cf:after { clear: both; } /* Apply a natural box layout model to all elements */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .hoverShift img,input.hoverShift { -webkit-transition: margin 0.2s ease-out; -moz-transition: margin 0.2s ease-out; -o-transition: margin 0.2s ease-out; } .hoverShift a:hover img,input.hoverShift:hover { margin-top: -2px; } input[type=text],input[type=email], textarea { border:none; } .ir { text-indent: -9999px; } /* ================= 01 TYPOGRAPHY =============== */ .font_iBook,.in-slide-content,.sbTopHeading,.heading.inner { font-family: 'intro_bookregular'; } #menu-main-navigation,.font_iBold,.heading,.heading.inner span,.ctaLine { font-family: 'intro_boldregular'; } .font_iBlack,.in-slide-content span { font-family: 'intro_blackregular'; } /* Typograhy Guide 14 / 16 = 0.875em (14px equivalent) 16 / 16 = 1em (16px equivalent) 18 / 16 = 1.125em (18px equivalent) 21 / 16 = 1.3125em (21px equivalent) 24 / 16 = 1.5em (24px equivalent) 30 / 16 = 1.875em (30px equivalent) */ body { font: 1em Helvetica,Arial,sans-serif; color:#5c707c; } input[type=text],input[type=email] { color:#5c707c; font: 13px Helvetica,Arial,sans-serif; } /* ================= 02 MAIN SECTION LAYOUTS =============== */ html { height:100%; } body { background: url(images/bg.jpg) repeat; } body.page-template-page_facebooktab-php { background-color: #fff; background-image: none; } .wrap { width: 1000px; margin: 0 auto; } /* Header */ header { background-color: #5c707c; } header a { color:#c2d2d5; } header a:hover,header li.current_page_item a { color:#9fcf67; } header .wrap { position:relative; } #logo { float: left; margin: 0 0 0 -9px; } #menu-main-navigation { float:left; margin: 44px 0 0 0; text-transform: uppercase; font-size:15px; position:relative; z-index:5; } #menu-main-navigation li { display:inline-block; margin: 0 7px; } #subnav{ width: 350px; /*float: right;*/ font-size: 11px; text-align: right; position:absolute; top: 0; right: 0; z-index:0; } #menu-top-sub-nav { margin: 12px 0 0 0; } #menu-top-sub-nav li { display:inline-block; border-right: 1px solid #c2d2d5; padding: 0 8px; } #menu-top-sub-nav > li:last-child { border:none; padding-right:0; } #social-nav { margin: 14px 0 0 0; } #social-nav a { display:block; } #social-nav img { float:right; margin-left: 7px; } /* Branding */ #branding { height:338px; position:relative; overflow: hidden; } .shade { width:100%; height:24px; position:absolute; top: 0; background:url(images/shadow_fullspan_light.png) no-repeat top; z-index:30; } #branding .wrap { width:884px; } #arrow_left,#arrow_right { width:39px; height:39px; display:block; position:absolute; top: 155px; text-indent: -9999px; z-index:50; } #arrow_left { background: url(images/billboard/left.png) no-repeat 0 0; left:-39px; } #arrow_right { background: url(images/billboard/right.png) no-repeat 0 0; right:-39px; } .flexslider { height:338px; } .flexslider .slides { } .flexslider .slides li { opacity: 0; height:338px; background-repeat:no-repeat; background-position: 50% 50%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .in-slide-content { width: 100%; margin: 0 auto; color:#fff; text-shadow: 2px 2px 2px #000; font-size: 1.5em; line-height: 1.5em; position:absolute; z-index:9999; top:90px; } .in-slide-content span { font-size: 1.5em; } .in-slide-content h6 { font-size: .50em; font-style: italic; } .in-slide-content p.cta { font-size:.75em; text-transform: uppercase; } .in-slide-content a { color:#EC7429; } #branding.inner { height:196px; background-position: center center; background-image: url(images/billboard/bg_about.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .about #branding { background-image: url(images/billboard/bg_about.jpg); } .consumption #branding { background-image: url(images/billboard/bg_consumption.jpg); } .transmission #branding { background-image: url(images/billboard/bg_transmission.jpg); } .impact #branding { background-image: url(images/billboard/bg_impact.jpg); } .generation #branding { background-image: url(images/billboard/bg_generation.jpg); } .conservation #branding { background-image: url(images/billboard/bg_conservation.jpg); } .quiz-consumption #branding { background-image: url(images/billboard/bg_consumption.jpg); } .quiz-transmission #branding { background-image: url(images/billboard/bg_transmission.jpg); } .quiz-impact #branding { background-image: url(images/billboard/bg_impact.jpg); } .quiz-generation #branding { background-image: url(images/billboard/bg_generation.jpg); } .quiz-conservation #branding { background-image: url(images/billboard/bg_conservation.jpg); } .resources #branding { background-image: url(images/billboard/bg_resources.jpg); } .the-ads #branding { background-image: url(images/billboard/bg_ads.jpg); } .tips #branding { background-image: url(images/billboard/bg_tips.jpg); } .videos #branding { background-image: url(images/billboard/bg_videos.jpg); } /* Main */ #main { position:relative; } #main .shade { background-image:url(images/shadow_fullspan.png); } #main .wrap { background: url(images/bg_main.png) repeat-y 0 0; } #main img { max-width: 100%; height:auto; } #main.wrap .shadow-bottom{ background-image: url(images/shadow.png); background-repeat: no-repeat; height: 32px; position: absolute; bottom: 95%; } #mainColumn { width: 738px; float: left; padding-bottom: 30px; } .heading { height:84px; padding: 17px 27px 0 27px; background-color: #9fcf67; font-size: 42px; color: #fff; text-shadow: 1px 1px 1px #666; } .heading.inner { font-size: 25px; padding-top: 30px; line-height: 1.1em; } .heading.inner.line2 { padding-top:17px; } /* Entry */ .entry { padding: 22px 27px; line-height: 1.4em; } .entry > p,.entry ul,.entry ol { padding-bottom: 1.2em; } .entry > h1, .entry > h2, .entry > h3, .entry > h4, .entry > h5, .entry > h6 { font-size:1.2em; color:#559cbe; font-weight: bold; padding-bottom:1.2em; } .entry p.slogan { font-size:1.3em; } .entry p.shareText { font-size: 12px; text-transform: uppercase; text-align: center; } .entry img { padding:8px; background:url(images/bg_factDots.png); } .about-us .entry img { padding:0; background: none; } .entry img.alignleft, .entry .wp-caption.alignleft { float: left; margin: 0 15px 10px 0; } .entry img.alignright, .entry .wp-caption.alignright { float: right; margin: 0 0 10px 15px } .entry img.aligncenter, .entry .wp-caption.aligncenter { display:block; margin: 0 auto 10px auto; } .entry p.lesspad { padding-bottom: 0; } .arrowLink { display:inline-block; padding: 10px 35px 10px 0; background:url(images/bg_arrowLink.png) no-repeat right; } .entry .footnote { font-size:.7em; line-height: 1.4em; } .entry .footnote p { padding-bottom: 0; } .editlink { text-transform: uppercase; font-size: 10px; text-align: right; } .entry ul li { list-style-type: disc; margin-left: 25px; } .entry ol li { list-style-type: decimal; margin-left: 30px; padding: 0 0 8px 0;} /* factFrame */ .factFrame { width:213px; padding: 8px; margin: 10px 8px 30px 8px; display:inline-block; vertical-align: top; background:url(images/bg_factDots.png) repeat 0 0; } #ff1.factFrame { margin-left:0; } #ff3.factFrame { margin-right: 0; } .factText { height:235px; color:#fff; padding: 45px 10px 0 17px; } #ff1 .factText { background-color: #f68933; } #ff2 .factText { background-color: #559cbe; } #ff3 .factText { background-color: #9fcf67; } .factText h3 { width:96px; height:37px; float:left; margin: -45px 0 0 -17px; padding: 10px 0 0 15px; font-size: 1.1em; color:#fff; font-weight: bold; text-transform: uppercase; line-height: 1em; } #ff1 .factText h3 { background-image:url(images/f-orange.png); } #ff2 .factText h3 { background-image:url(images/f-blue.png); } #ff3 .factText h3 { background-image:url(images/f-green.png); } .factText h4 { font-size: .90em; line-height: 1.3em; font-weight: bold; margin-bottom: 5px; } .factText p { font-size: .90em; line-height: 1.3em; } #ff1 .factText h4 { color:#8e5020; } #ff2 .factText h4 { color:#2f5466; } #ff3 .factText h4 { color:#556f37; } /* Sidebar */ #sidebar{ width: 262px; float: right; font-size:0.875em; /* 14px */ padding-bottom: 50px; } .sbTopHeading { width:262px; height: 84px; padding: 20px 33px 0 33px; background:url(images/bg_sidebarHeading.png) no-repeat 0 0; font-size:1.5em; color: #fff; text-shadow: 1px 1px 1px #444; line-height: 1.15em; } #headlines { color:#46555e; padding: 15px 25px; font-weight: bold; line-height: 1.3em; } #headlines li { margin: 1em 0 1.8em;} #headlines a { width:97px; height:33px; display:inline-block; margin-top: 5px; background-image:url(images/buttons_teach-quiz.png); color:#46555e; text-indent: -9999px; } #headlines li a:first-child { background-position: 0 0 } #headlines li a:last-child { background-position: 0 -33px; } #stayInformed,#mc-embedded-subscribe-form { margin: 25px 0 0 0; } #stayInformed input[type=email], #mc-embedded-subscribe-form input[type=email] { width:207px; height:36px; background:url(images/input_email.png) no-repeat; margin: 0 0 8px 0; padding: 0 10px 0 40px; } #stayInformed input[type=submit], #mc-embedded-subscribe-form input[type=submit] { width:208px; height:36px; background:url(images/btn_stayInformed.png) no-repeat; border:none; text-indent:-9999px; } #stayInformed,#mc-embedded-subscribe-form { text-align: center; } #mc-embedded-subscribe-form label { display:none; } .mce_inline_error,#mce-error-response,#mce-success-response { margin: .5em 15px; font-size: .9em; } /* Footer */ footer .wrap { padding: 50px 0 30px 0; background:url(images/span-arrow-bottom.png) no-repeat top center; } footer, footer a { color:#5c707c; } footer a:hover,#menu-main-navigation-1 li.current_page_item a,#menu-footer-sub-nav li.current_page_item a { color:#559cbe; } #associates { background: url(images/hr-span.jpg) repeat-x bottom; padding-bottom: 20px; margin-bottom: 20px; } #associates li { height:; margin: 0 9px 0 0; display:inline-block; vertical-align: center; } #associates li:last-child { margin-right:0; } #associate img { display:inline-block; vertical-align: center; } #associates li.vertSep { height:53px; padding: 10px 20px 0 0; background: url(images/footer-span.jpg) no-repeat right; } #associates h3 { min-height:30px; padding: 7px 37px 0 0; background: url(images/ad-arrow.png) no-repeat right; font-size:14px; color: #5c707c; font-family: 'intro_boldregular'; } .groupLeft { float:left; } #menu-main-navigation-1,#menu-footer-sub-nav { font-weight: bold; font-size:14px; clear:both; } #menu-main-navigation-1 li,#menu-footer-sub-nav li { display:inline-block; border-right:1px solid #5c707c; padding: 0 .5em; } #menu-main-navigation-1 li:first-child, #menu-footer-sub-nav li:first-child { padding-left:0; } #menu-main-navigation-1 li:last-child, #menu-footer-sub-nav li:last-child { border:none; } #menu-footer-sub-nav { font-size:12px; margin: 10px 0; } p.copyright { font-size:10px; } footer #social-nav img { margin-left: 10px; } /* Faebook Tab */ #fbTab { width:776px; margin:0 auto; background: #fff; } #menu-facebook-tab-nav { width:776px; height:240px; padding:144px 0 0 200px; background: url(images/fbtab/bg_fbNav.jpg) no-repeat; font-size:15px; font-weight: bold; } #menu-facebook-tab-nav li { display:inline-block; margin: 0 10px; } #menu-facebook-tab-nav a { color:#556f37; } #menu-facebook-tab-nav a:hover,#menu-facebook-tab-nav li.current_page_item a { color:#fff; } #fbMain { min-height: 380px; }