/* Theme Name: Environmental Paper Network Theme URI: http://environmentalpaper.org Author: Scott Cielo of Code Connects Web Development Author URI: http://codeconnects.com Description: Custom WordPress theme built in 2012 for the Environmental Paper Network Version: 1.0 Tags: paper recycling environment sustainable positive */ /**************************** CSS reset, body, wrapper and general rules ****************************/ h1, h2, a, img, div, body { margin:0; padding:0; } body { font:12px helvetica, arial, tahoma, sans-serif; color:#58595b; } .mid-page { margin:0 auto; width:1024px; } .left { float:left; } .right { float:right; } .clearFix, .clear { clear: both; } .text_right { text-align: right; } .text_left { text-align:left; } .center { text-align: center; } .green-text { font:14px georgia; color:#6cb23e; } .green-heading { color:#6cb23e; } .middle { vertical-align:middle; } .green-dashed-divider { height: 18px; border-bottom: 1px dashed #6eb43f; width: 100%; margin-bottom: 12px; clear:both; } #mid-wrap { background: #fcfcfc url(/images/main-gradient.png) repeat-x; border-top:4px solid #e3e4e6; } #head, #content { width:1024px; margin:0 auto; } h1 { font-size:20px; color:#00381e; font-weight:normal; } h2 { font-size:18px; color:#3a7414; font-weight:normal; } li { margin-bottom:16px; } a img { border:none; } a { color:#417fda; text-decoration:none; } a:hover { color:#111; text-decoration:underline; } blockquote { background-color:#fff; } th, td { text-align:left; padding:7px 8px; } del { text-decoration:line-through; } table { border-collapse:collapse; border-spacing 0; } /*************************** Rules for Containers and Wrappers **************************************/ #pin { background:url(/images/pin.png); width:32px; height:39px; position:absolute; top:53px; left:630px; z-index:20; } .home #pin, .search-results #pin { background:none; } #content, #head { clear:both; } .container { margin-bottom:20px; } .oneCol { width:252px; float:left; margin:10px 6px 0 0; } .twoCol { width:636px; float:left; border-top:4px solid #53bfdc; background:#fff; margin:8px 0 0 22px; padding:32px 36px 0 24px; min-height:365px; } /* .twoCol * { position:relative; z-index:10; } */ .twoCol ul { padding:5px 0 5px 15px; } .twoCol p { margin:15px 0 20px 0; } #page-bottom { width:743px; height:126px; background:url(/images/dot.gif); float:right; margin:0px 15px 0 0; position: relative; z-index: 0; } #vert-rule1 { width:1px; height:512px; border-left:2px solid #f48a86; float:left; margin-top:4px; position:relative; right:3px; z-index: 100; } #vert-rule2 { width: 1px; height:512px; border-right: 2px solid #f48a86; float:left; margin-top:6px; margin-bottom:16px; position:relative; right:3px; z-index:100; } body .wct-td1 { background-color:#eee; } body .wct-sortdown { margin-left:7px !important; } body .wct-sortup { margin-left:10px !important; } body .wct-pagefield { padding-top:18px; } body .wct-pagefield a { margin-left:6px; margin-right:6px; } /**************************** Rules for top nav and header for all pages ****************************/ #top-wrap { position: relative; } #mast { height: 115px; background: #fff; width: 1024px; margin: 0 auto; position: relative; } #mast-border { width: 97%; height: 1px; background: #414141; border-bottom: 2px solid #ccc; padding: 0; margin: 0 auto; } #home a{ position:relative; left:22px; top:18px; display:block; background:url(/images/logo-sprite.jpg) no-repeat; width:358px; height:75px; padding:0; text-indent:-9999px; } #home a:hover { background-position: 0 -146px; } #nTop, #nBtm { list-style: none; margin: 0; padding: 0; border: none; } #nBtm { position: absolute; left: 25px; top: 14px; border-left: none; } #nav { height: 50px; background: #fff; width: 1024px; margin: 0 auto; position: relative; } #nTop li, #nBtm li { display: inline-block; } #socialButtons { line-height: 1.4; position: absolute; left: 849px; top: 5px; } #socialButtons ul { margin: 0; padding: 0; display: inline; list-style: none; } #socialButtons li { display:inline; } #socialButtons a { margin:0 5px 0 0; } #socialButtons a:hover { position:relative; top:-1px; left:-1px; } #mail-button, #face-button, #tweet-button, #utube-button { width:30px; height:30px; display:inline-block; background:url(/images/button-sprite.png); } #mail-button { background-position:-19px -212px; } #face-button { background-position:-56px -212px } #tweet-button { background-position:-90px -212px } #utube-button { background-position:-125px -212px } #newsletter { position:absolute; top:63px; /*left:486px;*/ left:756px; z-index:10; } #newsletter label, #search label, #socialButtons { font-size: 9px; text-transform: uppercase; color: #00324c; padding: 0 0 0 5px; margin: 0; } #newsButton { width: 52px; height: 38px; background:url(/images/button-sprite.png) -16px -151px; text-indent: -9999px; border: none; padding: 0; margin: 0; cursor:pointer; } #news, #searchBox { height: 22px; padding-top: 3px; width: 165px; font-size: 10px; text-indent: 12px; background: url(/images/mast-sprite.png) 0 -107px; border: none; position: relative; top: -6px; } #search { position: absolute; top: 10px; /*left: 486px;*/ left:756px; z-index:10; padding:0; margin:0; padding:0; margin:0; } #searchButton { width: 45px; height: 38px; background:url(/images/button-sprite.png) -16px -105px; border: none; text-indent: -9999px; cursor:pointer; } #search-results td { border:1px solid green; } #top-green-box { display:inline-block; background:#d7edcb url(/images/login-bg.png) no-repeat; position:absolute; left:715px; top:0; padding:12px 0 0 29px; height:103px; width:256px; } #facebook-connect { position: absolute; left: 745px; top: 46px; z-index: 200; } #facebook-connect a { display: inline-block; width: 104px; height: 38px; background: url(/images/button-sprite.png) -97px -155px; position: relative; top: 18px; left:4px; } /**************************** rules for home page mid-section ****************************/ .home #mid-wrap { background:#fff url(/images/home-gradient.png) repeat-x; } #content { padding-left:24px; } .home #content { padding-left:9px; position:relative; } #sliding-panels { width:710px; height:360px; float:left; list-style:none; padding:0; margin:0; } #slide-nav { position:absolute; top:308px; left:492px; z-index:300; margin:0; padding:0; } #slide-nav a:hover, #slide-nav *:hover { text-decoration:none; } #slide-prev, #slide-next { position:absolute; top:7px; text-indent:-9999px; display:inline-block; background:url(/images/home-sprite.png) no-repeat 0 0; width:23px; height:30px; } #slide-prev { background-position:-290px -400px; left:163px; } #slide-next { background-position:-365px -400px; left:191px; } #slide-prev:hover { background-position:-290px -350px; } #slide-next:hover { background-position:-365px -350px; } #slide-pager li { text-indent:-9999px; list-style:none; display:inline-block; background:url(/images/bullets.png) no-repeat -4px 0; width: 15px; height: 22px; } #slide-pager li.activeSlide { background-position:0 -22px; width: 22px; } .slide-left { width:252px; float:left; } .slide-text { width:208px; height:252px; background:url(/images/home-sprite.png) 0 -325px; margin:12px 0 0 8px; padding:18px; } .slide-text h1 { margin:41px 0 0 17px; font-size:24px; color:#00381e; font-weight:normal; } .slide-text p { margin-left:17px; } .slide-link-pointer { width:237px; height:57px; background:url(/images/button-sprite.png); margin:4px 0; } .slide-photo { float:left; width:450px; } .photo-wrap { width:450px; height:312px; background:url(/images/home-sprite.png); } .photo-wrap img { width: 386px; height: 248px; background: url(/images/loading.gif) no-repeat 50% 50%; margin:27px 0 0 27px; border: none; } .photo-wrap img a { border:0; display:block; } .home-slide-link { margin:0; padding:0; } .home-slide-link a { display:inline-block; margin:0 0 10px 10px; padding:10px 46px 0 0; width:176px; height:28px; background:url(/images/go-button.png) no-repeat right top; text-align:right; } .question-mark { width:47px; height:73px; background: url(/images/question-mark.png) no-repeat; position:absolute; top:77px; left:191px; z-index:200; } #home-apps ul { background:none; } #home-apps { width:272px; height:330px; background:url(/images/home-sprite.png) 0 -630px; float:left; padding-top:20px; padding-left:10px; margin:10px 0 6px; } #blog-button { background:url(/images/home-sprite.png) -5px -1225px; width:267px; height:71px; margin:14px 0 0 4px; } #blog-button a { display:inline-block; width:42px; height:38px; background:url(/images/button-sprite.png) -16px -281px; border:none; text-decoration:none; position:relative; top:28px; left:206px; } /**************************** Rules for corkboard feeds and footer ****************************/ #cork-board { background: #777 url(/images/cork-bg.jpg); clear: both; padding: 0 10px 20px; border-top: 1px solid #877965; border-bottom:1px solid #877965; } #cork-top-shadow { height:1px; width: 100%; background: #414141; } #cork-board h2 { font: 18px georgia, serif; color:#504e44; text-align: center; } #featured { width:221px; margin-left:16px; margin-top:7px; } #featured-head { padding-top:23px; height:38px; background:url(/images/yellow-note-top.png); } #featured-body { background:url(/images/yellow-note-bg.png) repeat-y; padding:5px 5px 0; } #featured h3 { margin: 0; font-size: 18px; line-height: 190%; padding: 0; } #featured h3 a { text-decoration: none; } #featured p { border-top: 1px dashed #6eb43f; border-bottom: 1px dashed #6eb43f; padding: 15px 10px 10px; margin-bottom: 0; } #featured p + p { border-top:none; border-bottom:1px dashed #6eb43f; padding: 0px 10px 10px; margin-bottom:0; } #news-feed { width:223px; margin-left:20px; margin-top:1px; } #news-feed-head { background: url(/images/post-it-sprite.png) 0 -225px; height:36px; padding-top:29px; } #news-feed-body { background: url(/images/post-it-bg.png) repeat-y -484px 0; padding:5px 5px 0; } #alerts { width:237px; margin-left:18px; margin-top:7px; } #alerts-head { background:url(/images/post-it-sprite.png) 0 0; height:36px; padding-top:23px; } #alerts-body { background:url(/images/post-it-bg.png) repeat-y 0 0; margin-left:1px; padding:5px 4px 0 1px; } ul.rss-items { list-style:none; padding:0; margin:0; } a.rss-item { font-weight:bold; display:inline-block; padding-bottom:5px; } #twitter-feed { width:239px; margin-left:16px; margin-top: 2px; } #twitter-feed-head { background:url(/images/post-it-sprite.png) 0 -75px; height:1px; padding-top:25px; } #twitter-feed-body { background:url(/images/post-it-bg.png) repeat-y -239px 0; padding-left:2px; } .twtr-widget .twtr-tweet { border-bottom:1px dashed #6eb43f !important; } .twtr-widget .twtr-doc { border-radius:0 !important; } #tweet { padding-bottom:20px; } div.twtr-hd { padding-top:2px; } .twtr-tweet-text { padding:4px 0; font: 13px helvetica, arial, tahoma, sans-serif; } #news-feed h4 { margin:0 5px 5px 10px; font-size:13px; padding:0; padding-top:10px; } #news-feed p, li.rss-item { padding:0 10px 10px; font-size:13px; border-bottom:1px dashed #6eb43f; margin:0; } li.rss-item { margin-top:11px; padding-bottom:11px; } .twtr-hd a, #alerts-head a { color:#504E44; } .twtr-hd a { font: 18px georgia, serif; } .twtr-doc .twtr-hd h4 a:hover, #alerts-head a:hover { color:#417FDA !important; } #eco-watch { background:#eee; margin:0; padding:12px 0; text-align:center; } #eco-watch img.left { width:24px; height:24px; margin:-4px 0 0 14px; } #eco-watch img.right { width:24px; height:24px; margin:-4px 14px 0 0; } /**************************** Rules for side navigation and project buttons ****************************/ #left-nav-cap { width:248px; height:30px; background:url(/images/side-nav-cap.png) no-repeat right top; } #leftNav { margin:0; padding:0 0 50px; list-style:none; background:url(/images/side-nav-bg.png) no-repeat right bottom; width:248px; min-height:204px; } #leftNav li { margin:0; } #leftNav a { text-decoration: none; text-indent: 20px; color: #58595a; padding: 0; margin: 0; display: block; width: 193px; height: 22px; background: url(/images/nav-sprite.png) 0 -35px; margin: 6px 0 0 11px; padding-top: 8px; } #leftNav a:hover, #leftNav .current-menu-item a { background-position:0 0; } #leftNav #topLink, #leftNav .first-menu-link a { font-size: 19px; color: #f5f5f5; background: url(/images/button-sprite.png); width:237px; height:41px; margin:0; padding-top: 16px; } .menu-donate-container .last-menu-link { display:none; } #projects { width: 267px; height: 211px; background: url(/images/apps-sprite.png) no-repeat 0px -250px; padding: 24px 0 0; margin: 10px 0 0 10px; color: #464749; font-size: 10px; list-style: none; vertical-align: top; } #projects li { padding: 0; margin: 5px 10px 0 10px; display: inline; } #projects a { text-decoration: none; display: inline-block; text-align:center; } #projects .wiyp { background:url(/images/apps-sprite.png) 4px 0px; width:60px; height:53px; padding-top:56px; } #projects .pulp { background:url(/images/apps-sprite.png) 4px -120px; width: 70px; height: 54px; padding-top: 57px; } #projects .steps { background:url(/images/apps-sprite.png) -146px -120px; width: 53px; height: 49px; padding-top: 52px; } #projects .pap-calc { background:url(/images/apps-sprite.png) -71px 0px; width: 60px; height: 52px; padding-top: 53px; position: relative; top: -20px; } #projects .re-paper { background:url(/images/apps-sprite.png) -71px -120px; width: 53px; height: 58px; padding-top: 59px; position: relative; top: -20px; } #projects .carb-count { background:url(/images/apps-sprite.png) -146px 0px; width:75px; height:56px; padding-top:63px; position:relative; top:-20px; } /**************************** Rules for forms and footers ****************************/ #addForm input, #editForm input, #addForm textarea, #editForm textarea, #membership_request input { margin-bottom: 12px; } #footer { clear: both; padding-top:15px; margin:0; background: #fff; border-top: 1px solid #414141; font-size:14px; } #credits { color:#888; padding-bottom:8px; } #join-link { position:absolute; left:924px; top:6px; } #membership-button, .button.gform_button { width:135px; height:36px; background:url(/images/membership-button.png); border:none; text-indent:-9999px; } /**************************** Rules for specific content blocks ****************************/ #speakers img { border: 2px solid black; float: left; margin: 6px 8px 0 0; padding: 5px; background-color: #a5cd85; } #speakers li { margin-bottom: 2px; } #apps img, #projects-page img, #state_paper_industry_2007 img { float: left; margin-bottom: 10px; } #wiyp-img { margin-left:9px; margin-right:30px; position:relative; top:6px; } #wiyp-p { clear:left; margin-top:48px; } #repaper-img { margin-right:27px; position:relative; top:-6px; } #repaper-p { } #carbon-img { margin-right:36px; margin-left:3px; position:relative; top:-16px; } #carbon-p { margin-top:48px; } #steps-img { margin-right:27px; } #steps-p { clear:left; padding-top:10px; position:relative; z-index:1000; } #calculator-img { margin-right:30px; } #pulp-img { margin-right:6px; margin-top:18px; } #pulp-p { clear: left; position:relative; z-index:1000; } #resources h3 { margin-bottom: 3px; margin-top: 23px; } #resources p { margin-top: 3px; } #org_list { width: 653px; } #steering_logos { list-style: none; text-align:center; } #steering_logos li { display: inline-block; } #steering_logos img { border:1px solid black; box-shadow:3px 6px 6px #777; margin:6px 10px; } .sort_up, .sort_down { height: 18px; width: 21px; display: inline-block; text-indent: -9999px; } .sort_up { background: url(/images/up-arrow.png) no-repeat center bottom; } .sort_down { background: url(/images/down-arrow.png) no-repeat center bottom; } #donate a { display:block; width:564px; height:36px; padding-top:13px; background:url(/images/donate.png) no-repeat right top; } .donate p { margin:17px 10px 18px 22px; } #state-2011-img { float:left; margin:0 25px 28px 0; box-shadow:#aaa 4px 10px 6px; } .repaper-icon { margin:-11px 17px 0 0; } .carbon-counts h1 { background:url(/images/Forest_Carbon_Counts_icon_small.png) no-repeat; text-indent:59px; margin-bottom:18px; height:35px; padding-top:15px; } .main-photo { background:url(/images/home-sprite.png) no-repeat 0 -1000px; width:235px; height:147px; padding:28px 13px 16px; margin:0 0 15px; position:relative; top:-17px; right:-20px; } #membership_request input, #membership_request textarea { box-shadow:#aaa 1px 2px 2px; } #membership_request #membership-button { box-shadow:none; } a.pdf { background: url(/images/pdf.png) no-repeat left center; padding-left: 20px;line-height: 16px; } a.doc { background: url(/images/word.png) no-repeat left center; padding-left: 20px; line-height: 16px; } .ten-facts ol { margin:0; padding:18px 0 15px 28px; } .ten-facts li { font:24px georgia; color:#6cb23e; font-weight:normal; font-style:italic; clear:both; margin:0; } .ten-facts img { float:left; margin-right:15px; margin-bottom: 20px; padding:2px; border:1px solid #999; box-shadow:1px 3px 4px #999; } .ten-facts img:hover { border-color:green; box-shadow:1px 3px 4px #444; } .ten-facts span.body-text { display:inline-block; font:12px helvetica, arial, tahoma, sans-serif; color:#58595b; vertical-align:top; } .twoCol .repaper-sponsors { padding:0; } .repaper-sponsors { margin: 35px 0 0 0; } .repaper-sponsors li { list-style:none; display:inline-block; padding:0; margin:0 50px 0 0; } .repaper-sponsors img { padding:8px; border:1px solid #777; box-shadow:1px 3px 5px #888; } .repaper-sponsors img.newpage { padding-top:11px; padding-bottom:5px; } .repaper-sponsors img.boise { padding-top:6px; padding-bottom:10px; } #repaper-head { padding:11px 0 11px 82px; background:url(/images/repaper_project_icon_small.png) no-repeat; } #repaper-head span { font-size:18px; color:#3a7414; } /****************** WordPress Styles to try and cover unknown uses ****************/ /**** Text elements ****/ ol { list-style: decimal; } ol ol { list-style: upper-alpha; } ol ol ol { list-style: lower-roman; } ol ol ol ol { list-style: lower-alpha; } ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; } dl { margin: 0 0 24px 0; } dt { font-weight: bold; } dd { margin-bottom: 18px; } strong { font-weight: bold; } cite, em, i { font-style: italic; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } sup, sub { height: 0; line-height: 1; position: relative; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } /**** Text meant only for screen readers ****/ .screen-reader-text { position: absolute; left: -9000px; } /***** =Search results page *****/ .search-results .hentry { padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #ccc; } /* =Gallery listing -------------------------------------------------------------- */ .format-gallery .size-thumbnail img, .category-gallery .size-thumbnail img { border: 10px solid #f1f1f1; margin-bottom: 0; } .format-gallery .gallery-thumb, .category-gallery .gallery-thumb { float: left; margin-right: 20px; margin-top: -4px; } .home #content .format-gallery .entry-utility, .home #content .category-gallery .entry-utility { padding-top: 4px; } /**** Attachment pages ****/ .attachment .entry-content .entry-caption { font-size: 140%; margin-top: 24px; } .attachment .entry-content .nav-previous a:before { content: '\2190\00a0'; } .attachment .entry-content .nav-next a:after { content: '\00a0\2192'; } /* =Images -------------------------------------------------------------- */ /* Resize images to fit the main content area. - Applies only to images uploaded via WordPress by targeting size-* classes. - Other images will be left alone. Use "size-auto" class to apply to other images. */ img.size-auto, img.size-full, img.size-large, img.size-medium, .attachment img { max-width: 100%; /* When images are too wide for containing element, force them to fit. */ height: auto; /* Override height to match resized width for correct aspect ratio. */ } .alignleft, img.alignleft { display: inline; float: left; margin-right: 24px; margin-top: 4px; } .alignright, img.alignright { display: inline; float: right; margin-left: 24px; margin-top: 4px; } .aligncenter, img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } img.alignleft, img.alignright, img.aligncenter { margin-bottom: 12px; } .wp-caption { background: #f1f1f1; line-height: 18px; margin-bottom: 20px; max-width: 632px !important; /* prevent too-wide images from breaking layout */ padding: 4px; text-align: center; } .wp-caption img { margin: 5px 5px 0; } .wp-caption p.wp-caption-text { color: #888; font-size: 12px; margin: 5px; } .wp-smiley { margin: 0; } .gallery { margin: 0 auto 18px; } .gallery .gallery-item { float: left; margin-top: 0; text-align: center; width: 33%; } .gallery-columns-2 .gallery-item { width: 50%; } .gallery-columns-4 .gallery-item { width: 25%; } .gallery img { border: 2px solid #cfcfcf; } .gallery-columns-2 .attachment-medium { max-width: 92%; height: auto; } .gallery-columns-4 .attachment-thumbnail { max-width: 84%; height: auto; } .gallery .gallery-caption { color: #888; font-size: 12px; margin: 0 0 12px; } .gallery dl { margin: 0; } .gallery img { border: 10px solid #f1f1f1; } .gallery br+br { display: none; } #content .attachment img { /* single attachment images should be centered */ display: block; margin: 0 auto; } /**** Mobile Safari ( iPad, iPhone and iPod Touch ) ****/ pre { -webkit-text-size-adjust: 140%; } code { -webkit-text-size-adjust: 160%; } #access, .entry-meta, .entry-utility, .navigation, .widget-area { -webkit-text-size-adjust: 120%; } #site-description { -webkit-text-size-adjust: none; } /**** Attachment pages ****/ .pop-form .gform_wrapper { padding:20px; } .pop-form .gform_wrapper li { margin-bottom:5px; } .pop-form input, .pop-form textarea { background:#f5f5f5 !important; } .pop-form input.large { width:360px !important; } .pop-form input.medium { width:280px !important; } .pop-form .gform_wrapper .gform_heading { width:100%; } .pop-form .gfield_description { font-size:100% !important; }