/* * Skeleton V1.1 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 8/17/2011 */ /* Table of Content ================================================== #Site Styles #Page Styles #Media Queries #Font-Face */ /* #Site Styles ================================================== */ body {color: #444; background-image: url(../images/buildingshortsky.jpg), url(../images/bg_green.jpg); background-repeat: repeat-x, repeat; background-position: 50% 40px, top left; margin: 0;} html.ie body {background: #729648 url(../images/buildingshortsky.jpg) repeat-x 50% 40px;} body.home, body.single-campaign {background-image: url(../images/buildingtallsky.jpg), url(../images/bg_green.jpg); background-position: 50% -10px, top left;} html.ie body.home {background: #729648 url(../images/buildingtallsky.jpg) repeat-x 50% -10px; } h1, h2, h3, h4, h5, h6 {color: #444; font-weight: bold; font-family: Helvetica, Arial, sans-serif;} a, a:visited, a:link, a:hover {color: #076889} a.button, a.button:hover, input[type="submit"], input[type="submit"]:hover {background-color: #89B555; font-size: 16px; padding: 10px 20px;border: 1px solid #4e7720; color: white; text-shadow: 0 1px 0 #4e7720; background-image: linear-gradient(bottom, rgb(80,129,24), rgb(150,203,89)); background-image: -ms-linear-gradient(bottom, rgb(80,129,24), rgb(150,203,89)); background-image: -moz-linear-gradient(bottom, rgb(80,129,24), rgb(150,203,89)); background-image: -webkit-linear-gradient(bottom, rgb(80,129,24), rgb(150,203,89)); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(80,129,24)), color-stop(1, rgb(150,203,89)) ); } a.button:hover, input[type="submit"]:hover {background-image: none; background-color: #89B555;} html.ie a.button, html.ie a.button:hover, html.ie input[type="submit"], html.ie input[type="submit"]:hover {background-color: rgb(150,203,89);} input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus { border: 1px solid #AAA; color: #444; -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .2); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2); box-shadow: 0 0 3px rgba(0, 0, 0, .2); } header {background-color: #1b1b1b; border-bottom: 3px solid #54c2dd; margin-bottom: 20px;} header h1 {text-indent: 100%; margin: 0; white-space: nowrap; overflow: hidden; padding: 15px 0 6px; float: left;} header h1 a {display: block; background: url(../images/logo.png) no-repeat top left; width: 324px; height: 54px;} header a#back {display: block; float: right; width: 110px; font-size: 12px; padding: 6px 11px; background-color: #333; color: white; font-weight: bold; text-decoration: none; text-align: center;} header a#back span {font-family: ProximaNova-Bold; font-weight: normal; font-style: normal;} header a#back:hover span {color: #89b555;} /* #tagline {background-color: #333; margin: 0; padding: 0;} #tagline h3 {font-family: ProximaNova-Bold; font-weight: normal; font-style: normal; padding: 0; margin: 0; font-size: 14px; color: white; text-shadow: 0 1px 0 #6e993a; display: inline;} #tagline a {color: #f1e6b2; text-decoration: none} #tagline a#back {display: block; float: right; width: 110px; font-size: 12px; padding: 6px 11px; background-color: #222; color: white; font-weight: bold; text-decoration: none; text-align: center;} #tagline a#back span {font-family: ProximaNova-Bold; font-weight: normal; font-style: normal;} #tagline a#back:hover span {color: #f1e6b2;} */ header nav ul {list-style: none; padding: 0; margin: 25px 0 0; float: right;} header nav li {float: left;} header nav li a:link, header nav li a, header nav li a:visited {color: white; text-transform: capitalize; display: block; padding: 10px 13px 10px 10px; font-weight: bold; text-decoration: none; background: url(../images/nav_bg.png) no-repeat 100% 50%; font-size: 12px;} header nav li:last-child a {background: none;} header nav li a:hover, header nav li.current-menu-item a {color: #89b555} #content {background-color: #fff; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border: 2px solid #6ab9be; padding: 20px; margin-bottom: 30px;} .intro {color: #e2f6ca;} .intro h3 {font-family: ProximaNova-Bold; font-weight: normal; font-style: normal; color: white; font-size: 24px;} .intro h4 {font-size: 16px; color: white;} .intro ul {list-style: disc; margin-left: 40px;} h2.page-title {font-family: ProximaNova-Bold; font-weight: normal; font-style: normal; text-align: center; font-size: 60px; color: white; text-transform: lowercase; margin: 30px 0 80px; text-shadow: 1px -1px 0 #76c4ca, 2px -2px 0 #76c4ca, 3px -3px 0 #76c4ca, 4px -4px 0 #5ba6ac; padding-bottom: 40px;} h2#impact a {display: block; font-size: 14px;} h3 {font-size: 18px; clear: both; color: black;} .tags {background-color: #eff9e1; margin: 0; padding: 0; float: left; width: 100%; font-size: 12px; font-weight: bold;} .tags li {margin: 5px 0;} .tags li a {display: block; float: left; padding: 2px 8px; font-size: 11px; border: 1px solid #a5bf82; margin-left: 5px; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #d7e9bf; color: #597336; text-shadow: 0 1px 0 #fff;} footer#footer {background: url(../images/footer-seamless.gif) repeat-x top left; margin: 0; padding-top: 150px; padding-bottom: 0; font-size: 12px;} footer#footer p {font-size: 18px; margin: 0; color: white; padding: 0; color: #cacaca} footer#footer h3 {background: url(../images/logo_footer.png) no-repeat top left; text-indent: -9999px; font-size: 0; height: 20px; margin: 0 0 10px;} ul#menu-footer {padding: 10px 0 30px; margin: 0;} ul#menu-footer li {display: inline; padding: 0 10px 0 0} ul#menu-footer li a {color: white; font-weight: bold; text-decoration: none;} ul#social {width: 155px; list-style: none; padding: 0; margin: 0 auto;} ul#social li {float: left;} ul#social li a {display: block; width: 50px; height: 50px; text-indent: -9999px; font-height: 0;} ul#social li a#twitter {background: url(../images/grpn_icntw02.png) no-repeat top left;} ul#social li a#flickr {background: url(../images/grpn_icnfl02.png) no-repeat top left;} ul#social li a#pinterest {background: url(../images/grpn_icnpin.png) no-repeat top left;} /* #Page Styles ================================================== */ /* HOME PAGE */ body.home h3 a {font-size: 14px; padding: 0 5px;} h2#impact, .apply, .current-campaigns, .categories {background-color: #fff; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border: 2px solid #6ab9be; padding: 10px; margin-bottom: 15px;} h2#impact {font-size: 18px; line-height: 1.5em; color: black;} body.home .intro {background: url(../images/hr_marker.png) no-repeat bottom left; background-size: 100%; padding-bottom: 40px;} body.home .intro h3 {font-size: 20px; } /* Featured Campaign */ .featured {float: left; background-color: #fff; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border: 2px solid #6ab9be; padding: 10px; margin-bottom: 30px;} .featured span:first-child {display: block; font-family: ProximaNova-Bold; font-weight: normal; font-style: normal; padding: 10px 10px 0; text-transform: uppercase; color: #89b555} .featured h3 {font-family: ProximaNova-Bold; font-weight: normal; font-style: normal; font-size: 28px; padding: 0 10px 10px; color: #000} .featured h4 {font-size: 12px; margin: 0; padding-top: 15px; clear: both;} .featured p {font-size: 12px;} .featured .details p:first-child {font-size: 16px; line-height: 1.5em; padding-right: 10px;} .featured .details a.button {font-size: 16px; padding: 10px 20px; margin: 0;} .featured .photo {float: right; padding-bottom: 20px;} .featured .photo img {max-width: 100%;} .featured .photo .tags {padding: 0; padding-bottom: 5px; background-color: #eff9e1} .featured hr.clear {background: #fff url(../images/featured_hr.png) no-repeat top left; height: 34px; width: 100%; visibility: visible; background-size: 100%; border: none; margin: 0;} /* Grassroots Benefits */ .benefits {padding-top: 20px; padding-bottom: 40px; float: left; background: url(../images/hr_right.png) no-repeat bottom left; background-size: 100%; margin-bottom: 0;} .benefits h4 {font-size: 14px; color: white;} .benefits p {padding-right: 10px; color: #e2f6ca} /* Past Campaigns */ h3#past_header {font-family: ProximaNova-Bold; font-weight: normal; font-style: normal; font-size: 20px; color: white; text-transform: uppercase; background: url(../images/tree_small.png) no-repeat bottom left; padding: 14px 0 30px 60px; position: relative; top: 15px; zindex: 9999; margin: 0;} .past-campaigns {float: left; padding: 0; margin: 0 0 20px;} .past-campaigns li {background: url(../images/zebra_light.png) repeat-y top left; background-size: 100%; float: left; display: block; margin: 0; padding: 15px 35px 0 35px;} .past-campaigns li:nth-child(2n) {background: url(../images/zebra_dark.png) repeat-y top left;} .past-campaigns li:last-child {border-bottom: none;} .past-campaigns img {float: left; margin: 4px 0 15px;} .past-campaigns p.donors {width: 130px; height: 80px; float: right; text-align: center; line-height: 2.5em; margin-top: 4px;} .past-campaigns p.donors span {display: block; font-size: 30px; font-weight: bold;} .past-campaigns h4 {font-size: 14px; padding: 0 0 5px; margin: 0; line-height: 1.5em} .past-campaigns div {margin-left: 110px; margin-right: 180px;} /* Current Campaigns */ .current-campaigns li {display: block; float: left; border: 1px solid #ddd;} .current-campaigns li img {width: 194px;} .current-campaigns li a.title {background-color: white; display: block; text-decoration: none;} .current-campaigns li a.title strong {display: block; padding: 3px 10px;} .current-campaigns li a.title p {margin: 0; padding: 0 10px 5px; font-size: 12px; color: #444;} /* APPLY PAGE */ #get-started strong {display: inline; text-transform: none;} #get-started h4 {color: white; font-size: 18px; background: url(../images/hr_right.png) no-repeat top left; padding-top: 50px;} #get-started a#ready {display: block; margin-top: 30px; width: 300px; text-align: center;} #get-started ul {list-style: disc; margin-left: 40px;} #get-started ul li {padding-left: 0;} #get-started ul li div {background-color: #51702f; margin-top: 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; padding: 10px;} body.page-template-apply-php h2.page-title {padding-bottom: 40px;} body.page-template-apply-php .intro h3 {float: left; font-size: 18px; padding-top: 20px;} body.page-template-apply-php .intro p {font-size: 15px; padding: 10px 40px;} body.page-template-apply-php .intro ul, body.page-template-apply-php .intro ol {margin: 15px 60px 20px; font-weight: bold;} body.page-template-apply-php .booked {color: #2e2e2e; background: url(../images/zebra_light.png) repeat-y top left; background-size: 100%; padding: 20px 60px 10px; margin: 20px 30px; } html.ie body.page-template-apply-php .booked {background: none; background-color: #e2f6ca;} body.page-template-apply-php .booked h4 {color: #2e2e2e; font-size: 18px;} body.page-template-apply-php .booked p {padding: 0; font-size: 16px;} body.page-template-apply-php .booked strong {display: inline;} /* Application Form - General */ #applicant_info {float: right; margin-top: 20px;} #application {float: left; background-color: #fff; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border: 2px solid #6ab9be; padding: 20px; margin-bottom: 30px; margin-top: 20px;} #application fieldset {background: url(../images/hr_right.png) no-repeat bottom left; background-size: 100%; padding-bottom: 70px;} #application legend {font-size: 20px; padding-bottom: 20px; color: black;} #application legend#part-one {padding-bottom: 0;} #application fieldset.last {background: none; padding-bottom:0 } #application label {font-size: 16px; padding: 10px 0 5px;} #application label span {display: block; font-size: 14px; padding: 5px 0; color: #666;} #application label[for="organization_name"], #application label[for="organization_mission"], #application label[for="social_venture_name"] {padding-top: 30px} #application h4 {font-size: 18px; padding: 20px 0 0;} #application input[type="text"], #application input[type="email"], #application input[type="tel"], #application select {margin-bottom: 10px; font-size: 16px;} #application input[type="submit"], #get-started a#ready {-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 10px 20px; background-color: #88bc4d; color: white; font-size: 18px; text-shadow: 0 1px 0 #528615; border: 3px solid #c9e6a8; -webkit-box-shadow: inset 1px 1px 0 #7b9b56, inset -1px -1px 0 #7b9b56; -moz-box-shadow: inset 1px 1px 0 #7b9b56, inset -1px -1px 0 #7b9b56; box-shadow: inset 1px 1px 0 #7b9b56, inset -1px -1px 0 #7b9b56;} #application ul {padding-top: 5px} #application #terms input[type="text"] {width: 50px !important;} html.ie, html.ie9 .selectBox-dropdown {line-height: 1.2em; background-color: #729447 !important;} /* Booked Box */ #booked {clear: both; background-color: white; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; margin-bottom: 20px; border: 3px solid #c75252; padding-bottom: 15px; float: left; margin-top: 20px;} #booked h4 {font-size: 18px; color: white; background-color: #c75252; padding: 10px;} #booked p {font-size: 16px; padding: 10px 10px 0;} #booked h5 {font-size: 16px; padding: 0 30px 5px;} #booked ul {margin: 10px 30px; font-size: 16px; padding: 0;} /* Specifics */ #location-specific-yes, #location-specific-sorta, #political-sorta, #team-member {margin-left: 20px;} /* Bad Campaign Box */ #bad-campaigns {position: relative; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border: 2px solid #6AB9BE; margin-left: 20px; padding: 0px 20px;} #bad-campaigns:before {position: relative; left: -35px; top: 150px; content:""; display:block; width:0px; height:0px; border-bottom:13px solid transparent; border-top:13px solid transparent; border-right:13px solid #6AB9BE; font-size:0px; line-height:0px;} #bad-campaigns h5 {font-size: 14px;} #bad-campaigns li {background: url(../images/no-no-no-no-no.png) no-repeat 0 3px; padding-left: 20px;} #bad-campaigns li span {display: block; color: #b60000; font-size: 12px; font-style: italic;} /* Results */ #results p {font-size: 16px; padding: 5px 30px;} #results ul {padding-top: 10px; padding-left: 30px;} #results li {font-size: 16px; font-weight: bold; padding-left: 30px; background: url(../images/yea-yea-yea-yea-yea.png) no-repeat top left;} #results li span:first-child {font-weight: normal; font-style: italic; color: #32898e;} #results li span:last-child {font-weight: normal; font-style: italic; color: #55841c} #results label {text-transform: uppercase; text-align: right; padding: 4px 5px 0;} #results div.field span {font-style: italic; padding-top: 4px;} #results div.field span.if {color: #32898e;} #results div.field span.then {color: #55841c;} #results #talk-back {margin-left: 80px;} #results #talk-back p {padding-left: 0;} span#goal_if_txt, span#goal_then_txt {font-weight: bold; color: #32898e} span#goal_then_txt {color: #55841c} /* Terms & Conditions */ #terms ul {padding-left: 30px; font-size: 16px;} /* PAST CAMPAIGNS */ body.archive h2.page-title {padding-bottom: 0px;} body.archive form {margin: 50px 0 0;} body.archive input[type="text"] {-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font-size: 14px; border: 2px solid #6ab9be; height: 13px; width: 212px;} body.archive a.selectBox {width: 220px !important;} .campaign {height: 210px; background-color: #fff; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border: 2px solid #6ab9be; margin-bottom: 15px;} .campaign div {width: 220px; height: 130px; background-size: 220px; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; margin: 0 0 10px;} .campaign h3 {margin: 0; padding: 0 10px 5px; font-size: 12px; color: #076889; line-height: 1.5em;} .campaign a {text-decoration: none; display: block; margin: 0;} .campaign p {padding: 0px 10px 15px; margin: 0; font-size: 12px; line-height: 1em; color: #666} .campaign p.active {color: #BA0C2F; text-transform: uppercase; font-weight: bold;} h3.assistive-text {display: none !important;} #infscr-loading {display: block; margin: 0 auto; clear: both; text-align: center;} #infscr-loading h4 {color: white; display: block; margin: 0 auto; clear: both; text-align: center; color: white; padding: 20px; background-color: #4f692f; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;} #orglink {display: block; clear: both; background: url(../images/about_bg.png) no-repeat 50% 3px; background-size: 100%; padding: 10px; font-size: 15px; text-transform: uppercase; font-weight: bold; text-decoration: none; color: #c6eff2; font-family: ProximaNova-Bold; font-weight: normal; font-style: normal; text-shadow: 0 1px 0 #4c6928; text-align: center;} body.post-type-archive-campaign .nav-previous a, .tax-location .nav-previous a, .tax-issue-type .nav-previous a {clear: both; text-align: center; display: block; background: url(../images/load-campaigns.png) no-repeat top left; margin: 20px auto; width: 200px; height: 50px; text-indent: -9999px; font-size: 0;} body.post-type-archive-campaign .nav-previous a:hover .tax-location .nav-previous a:hover, .tax-issue-type .nav-previous a:hover {background-position: bottom left;} /* CAMPAIGN PAGE - SINGLE */ h3.raised {text-align: center; font-size: 28px; background-color: #dcf4f6; margin: 10px -10px -10px -10px; padding: 20px 0; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;} p.tipped, p.notip {display: block; background: url(../images/tipped.png) no-repeat top left; padding-left: 30px; font-weight: bold; color: #15a9b2; font-size: 16px; line-height: 1.5em;} p.notip {background: url(../images/notip.png) no-repeat top left;} p.matched {font-size: 16px; font-weight: bold;} h4.timeline {font-size: 16px; padding-bottom: 5px; padding-top: 0;} ul.location {clear: both; padding-top: 20px;} .impact-update h3 {font-size: 20px; color: white; text-transform: uppercase; background: url(../images/tree_small.png) no-repeat bottom left; padding: 14px 0 30px 60px; position: relative; top: 15px; zindex: 9999; margin: 0;} .impact-update h3 a {font-family: ProximaNova-Bold; font-weight: normal; font-style: normal; color: white; text-decoration: none;} .impact-update div.update {background: url(../images/zebra_light.png) repeat-y top left; padding: 30px 100px 30px 50px;} /* BLOG POSTS */ #blog-info {background-color: #e2f6ca; padding: 20px; margin-bottom: 20px;} #blog-info h3 {clear: none; color: #4f692f; margin: 0; padding: 0 0 5px; line-height: 1em} .post {background: url(../images/hr_right.png) no-repeat bottom left; padding-bottom: 50px; background-size: 100%;} .post h2 {font-family: ProximaNova-Bold; font-weight: normal; font-style: normal; line-height: 1em} .post h2 a {text-decoration: none; font-size: 24px;} .post h4 {font-size: 14px;} .post .meta {text-transform: uppercase; font-weight: bold; font-size: 12px; padding-bottom: 15px; color: #382820} .post ul {list-style: disc; padding-left: 30px;} .post .meta p {margin: 0 0 10px;} .post-content img {max-width: 100% !important;} .avatar {float: left; margin-right: 10px;} .commentlist {list-style: none; margin: 0; padding: 0;} .commentlist li {background: url(../images/zebra_light.png) repeat-y top left; background-size: 100%; float: left; display: block; margin: 0; padding: 15px 35px; display: block; width: 580px;} .commentlist li:nth-child(2n) {background: url(../images/zebra_dark.png) repeat-y top left;} .commentlist img {float: left; margin-top: 4px; margin-right: 15px;} .commentlist a {font-weight: bold; text-decoration: none;} .commentlist div.reply {display: none;} body.archive .categories form {margin: 0;} .categories form input[type="text"] {width: 90%; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font-size: 14px; border: 2px solid #6AB9BE; height: 13px;} .categories.flickr img {margin-right: 10px; margin-bottom: 10px; border: 2px solid #6AB9BE} .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; } h4#comments-title, h3#reply-title {clear: both; font-size: 16px; padding-top: 60px; background: url(../images/hr_right.png) no-repeat 0 30px; background-size: 100%;} span.required {display: none;} #commentform input[type="text"] {width: 50%;} #commentform textarea {width: 90%;} p.form-allowed-tags {display: none;} .twtr-doc {width: 100% !important;} .twtr-widget h3 {clear: none !important;} /* AUTHOR ARCHIVES */ #author-info {background-color: #e2f6ca; padding: 20px; margin-bottom: 20px;} #author-info img {margin: 0 20px 20px 0;} #author-info h3 {clear: none; color: #4f692f; margin: 0; padding: 0 0 5px; line-height: 1em} /* ORGANIZATIONS PAGE */ body.archive form.filterform {margin-top: 0;} /* ORGANIZATION PAGE - SINGLE */ .featured.organization p, .featured.organization li {font-size: 16px; line-height: 1.5em;} .featured.organization div.photo h3 {font-size: 14px; font-family: Helvetica, Arial, sans-serif; line-height: 1.5em; padding: 10px 0;} .featured.organization div.photo li {font-size: 14px; font-weight: bold;} .featured.organization div.photo li a {display: block; padding: 8px 0 9px 40px; line-height: 1em} .featured.organization a.twitter, .featured.organization a.Twitter {background: url(../images/icon_twitter.png) no-repeat top left;} .featured.organization a.Facebook, .featured.organization a.facebook {background: url(../images/icon_facebook.png) no-repeat top left;} .featured.organization a.website, .featured.organization a.Website {background: url(../images/icon_website.png) no-repeat top left;} .single-organization .past-campaigns li a {color: #444; text-decoration: none;} .past-campaigns p.active {color: #BA0C2F; float: right; text-transform: uppercase; font-weight: bold; width: 130px; height: 80px; text-align: center; line-height: 2.5em; margin-top: 4px;} /* ABOUT PAGES */ #showvideo {float: right; margin: 10px 0 20px 40px; border: 3px solid #3e2e25; background: url(../images/video_thumb.png) no-repeat top left; display: block; width: 200px; height: 108px; background-size: 100%;} #showvideo:hover {background-position: bottom left;} #video {display: none; margin: 0 auto; padding: 0 150px; margin-bottom: 30px; text-align: center;} #video a#close {float: right;} .about p, .about li {color: #e2f6ca; font-size: 16px; line-height: 1.5em;} .about h3 {font-family: ProximaNova-Bold; font-weight: normal; font-style: normal; font-size: 24px; color: white; padding: 20px 0;} .about h3 span {display: block; color: #e2f6ca; font-weight: normal; font-family: Helvetica, arial, sans-serif;} .about h4 {color: white; font-size: 18px;} .about a {color: #c6eff2; font-weight: bold; text-decoration: none;} .about h3.branch {background: url(../images/hr_right.png) no-repeat top left; padding-top: 50px; background-size: 100%; margin-top: 40px;} .about ul li {padding: 0 40px;} .about ul li strong {display: block; text-transform: uppercase; color: white; font-family: ProximaNova-Bold; font-weight: normal; font-style: normal;} .about strong {color: #e2f6ca;} .about blockquote, .about blockquote p {font-weight: bold; border-left: none; margin: 0; font-style: normal;} .about blockquote p {padding: 10px 80px 10px 0;} .about blockquote:nth-child(2n) p {padding: 10px 0 10px 80px; color: white;} ul#menu-about {background: url(../images/about_bg.png) no-repeat 50% 2px; text-align:center; background-size: 100%;} ul#menu-about li {display: inline;} ul#menu-about a {display: inline-block; padding: 10px; font-size: 15px; text-transform: uppercase; font-weight: bold; text-decoration: none; color: #c6eff2; font-family: ProximaNova-Bold; font-weight: normal; font-style: normal; text-shadow: 0 1px 0 #4c6928} ul#menu-about li span {display: none;} ul#menu-about a:hover, ul#menu-about li.current-menu-item a {color: #f2fca0} /* ABOUT - OUR REACH */ #reach {text-align: center; width: 722px; margin: 0 auto;} #reach img {max-width: 100%; margin-bottom: 20px;} #reach p { color: white;} /* ABOUT - TEAM */ #team h3.intro {text-align: center;} #team h3 img#team-shot {margin: 20px auto;} #team .author {padding-bottom: 20px;} #team .author img.avatar {float: left; margin: 0 20px 20px 0;} #team .author h3 {clear: none; margin: 0; padding: 0 0 0;} #team .author p {padding-right: 10px;} #team .author img+p, #team .author img+br {display: none;} /* ABOUT - PRESS */ ul.press li {padding-left: 0; font-weight: bold; color: white; font-size: 18px; clear: both;} ul.press li a {display: block; font-size: 16px;} ul.press li div {width: 100px; height: 100px; display: block; float: left; margin-right: 20px; background-size: 90%; -moz-background-size: 90% !important; margin-bottom: 20px;} #press-contact {float: right; width: 30%; margin-left: 100px; margin-bottom: 100px;} /* #Media Queries ================================================== */ /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { header h1, header h1 a {width: 360px !important;} header nav ul {margin-top: 0px; float: left} header nav li a {padding: 10px 9px;} header nav li:first-child a {padding-left: 0;} h2.page-title {margin: 30px 0 40px; padding-bottom: 40px;} .current-campaigns li img {width: 146px;} /* Apply */ #applicant_info {float: none;} #bad-campaigns {margin-left: 13px;} #results label {text-align: left; margin: 0; padding: 0; float: none; display: block;} #results #talk-back {margin-left: 30px;} /* Campaign Archive */ .campaign {height: 200px;} .campaign div {width: 172px; height: 102px; background-size: 172px;} body.archive a.selectBox {width: 172px !important;} /* Blog */ .commentlist li {width: 440px;} /* Reach */ #reach {width: 650px;} } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { header nav ul {margin-top: 0px; float: left} header nav li a span {display: none;} h2.page-title span {display: none;} .past-campaigns p.donors {display: none !important;} .past-campaigns div {margin-right: 0;} .current-campaigns li img {width: 394px;} /* apply */ #applicant_info {float: none;} body.page-template-apply-php .intro p {padding: 10px 0;} body.page-template-apply-php .intro ul, body.page-template-apply-php .intro ol {margin: 15px 0px 20px; font-weight: bold;} body.page-template-apply-php .booked {padding: 20px 30px 10px; margin: 20px 0; } #booked h5 {font-size: 16px; padding: 0 10px 5px;} #booked ul {margin: 10px 10px; font-size: 16px; padding: 0;} #bad-campaigns {margin-left: 0; width: 380px; margin-top: 10px;} #bad-campaigns:before {visibility: hidden;} #results p {font-size: 16px; padding: 5px 0px;} #results ul {padding-left: 0px;} #results label {text-align: left; padding: 4px 0;} #results div.field span {padding-top: 0px; padding-bottom: 15px;} #results #talk-back {margin-left: 0px;} /* Past Campaigns */ body.archive form {margin: 0 0 15px} body.archive a.selectBox {width: 420px !important;} .campaign {height: 200px; width: 200px !important; margin: 0 3px 15px !important;} .campaign div {width: 200px; height: 120px; background-size: 200px;} #location-filter select, #issue-filter select {width: 420px;} body.post-type-archive-campaign select, body.post-type-archive-campaign input[type="text"] {width: 413px !important; clear: both; margin-bottom: 15px !important;} /* Blog */ .post-content img {max-width: 376px !important; } .commentlist li {width: 300px;} /* Team */ #team h3 img#team-shot {width: 400px;} #team .author {padding: 10px 0 !important;} #team .author h3 {padding-top: 0;} /* Reach */ #reach {width: 420px;} } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { body {background-position: 50% 70px, top left; margin: 0;} header h1, header h1 a {width: 324px !important;} header nav ul {margin-top: 0; float: left;} header nav li a {font-size: 11px !important;} header nav li a span {display: none;} h2.page-title {margin: 30px 0 90px; padding-bottom: 0px;} h2.page-title span {display: none;} body.page-id-2173 h2.page-title {margin: 30px 0 40px;} .current-campaigns li img {width: 274px;} /* home */ .past-campaigns p.donors {display: none !important;} .past-campaigns div {margin-right: 0 !important;} .featured a.button {width: 258px; text-align: center; } /* apply */ #get-started a#ready {width: 250px;} #applicant_info {float: none;} #application { padding: 10px; } body.page-template-apply-php .intro p {padding: 10px 0;} body.page-template-apply-php .intro ul, body.page-template-apply-php .intro ol {margin: 15px 0px 20px; font-weight: bold;} body.page-template-apply-php .booked {padding: 20px 30px 10px; margin: 20px 0; } #booked h5 {font-size: 16px; padding: 0 10px 5px;} #booked ul {margin: 10px 10px; font-size: 16px; padding: 0;} #bad-campaigns {margin-left: 0; width: 270px; margin-top: 10px;} #bad-campaigns:before {visibility: hidden;} #results p {font-size: 16px; padding: 5px 0px;} #results ul {padding-left: 0px;} #results label {text-align: left; padding: 4px 0;} #results label {text-align: left; padding: 4px 0;} #results div.field span {padding-top: 0px; padding-bottom: 15px;} #results #talk-back {margin-left: 0px;} /* Past Campaigns */ body.archive form {margin: 0 0 15px} body.archive input[type="text"], body.archive a.selectBox {width: 300px !important;} .campaign {margin-bottom: 15px !important; height: 250px} .campaign div {width: 300px; height: 177px; background-size: 300px;} #location-filter select, #issue-filter select {width: 300px;} /* Blog */ .post h2 {font-size: 24px;} .post .meta {font-size: 11px; margin-bottom: 20px;} .commentlist li {width: 190px;} .post-content img {max-width: 256px !important; } /* Team */ #team h3 img#team-shot {width: 300px;} #team .author {padding: 10px 0 !important;} #team .author h3 {padding-top: 0; font-size: 18px} #team .author p {font-size: 13px} /* Reach */ #reach {width: 300px;} } /* GRPN-16 :: Center social icons */ ul#social li a { height: 52px; width: 53px; } ul#social { width: 192px; } ul#social li { margin-bottom: 5px; width: 60px; padding-left: 2px; padding-right: 2px; } .sidebar-social-icons { padding-left: 10px; }