/* * Skeleton V1.2 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 6/20/2012 */ /* Table of Contents ================================================== #Base 960 Grid #Tablet (Portrait) #Mobile (Portrait) #Mobile (Landscape) #Clearing */ /* #Base 960 Grid ================================================== */ .container { position: relative; width: 960px; margin: 0 auto; padding: 0; } .container .column, .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } .row { margin-bottom: 20px; } /* Nested Column Classes */ .column.alpha, .columns.alpha { margin-left: 0; } .column.omega, .columns.omega { margin-right: 0; } /* Base Grid */ .container .one.column, .container .one.columns { width: 40px; } .container .two.columns { width: 100px; } .container .three.columns { width: 160px; } .container .four.columns { width: 220px; } .container .five.columns { width: 280px; } .container .six.columns { width: 340px; } .container .seven.columns { width: 400px; } .container .eight.columns { width: 460px; } .container .nine.columns { width: 520px; } .container .ten.columns { width: 580px; } .container .eleven.columns { width: 640px; } .container .twelve.columns { width: 700px; } .container .thirteen.columns { width: 760px; } .container .fourteen.columns { width: 820px; } .container .fifteen.columns { width: 880px; } .container .sixteen.columns { width: 940px; } .container .one-third.column { width: 300px; } .container .two-thirds.column { width: 620px; } /* Offsets */ .container .offset-by-one { padding-left: 60px; } .container .offset-by-two { padding-left: 120px; } .container .offset-by-three { padding-left: 180px; } .container .offset-by-four { padding-left: 240px; } .container .offset-by-five { padding-left: 300px; } .container .offset-by-six { padding-left: 360px; } .container .offset-by-seven { padding-left: 420px; } .container .offset-by-eight { padding-left: 480px; } .container .offset-by-nine { padding-left: 540px; } .container .offset-by-ten { padding-left: 600px; } .container .offset-by-eleven { padding-left: 660px; } .container .offset-by-twelve { padding-left: 720px; } .container .offset-by-thirteen { padding-left: 780px; } .container .offset-by-fourteen { padding-left: 840px; } .container .offset-by-fifteen { padding-left: 900px; } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 959px) { #top { background-image: url('../images/bkrnd_top-grey-notch-tablet.png'); } #subnav li { padding: 0 10px 0 8px; } #subnav li.btn { margin-right: 10px; } #subnav li.btn a { padding: 0 9px; font-size: 14px; } #subnav li a, .title a.btn.all-location { font-size: 12px; } #searchform div { margin-left: 10px; } #searchform input.search[type="text"] { width: 95px; } #nav { top: 75px; } #nav #jsddm li { width: 95px; line-height: 1; } .home .rotator-content h1, .bottom-title h1 { font-size: 60px; } .rotator-content .button-photo img { right: 0px; width: 150px; height: auto; } .rotator-content p, .rotator-content .content p { font-size: 22px; } .content-box .header-text p { font-size: 14px; } .quarterly-newsletters .list, .quarterly-newsletters .document-photo { display: block; } .quarterly-newsletters .list, .quarterly-newsletters .document-photo { width: 100%; } .quarterly-newsletters .document-photo img { max-width: 100%; float: none; } .title a.btn { padding: 0 12px; font-size: 15px; } #map .map, .target-wrap { height: 299px; } .popup-form { width: 440px; } .intro-content { width: 250px; } a.target { height: 33px; width: 33px; background-size: auto 100%; } .intro-content h3 { font-size: 19px; } .intro-content p { font-size: 12px; } .intro-content a.more { font-size: 14px; } .intro-sidebar li { font-size: 12px; margin-bottom: 2px; } #popup-form1 .arrow { right: 198px; bottom: -45px; } #popup-form2 .arrow { left: -71px; top: 60px; } #popup-form4 .arrow { right: -15px; top: 59px; width: 15px; background-position: right top; } .page-template-video-php #tabs a { padding-left: 10px; padding-right: 10px; font-size: 20px; } .gform_fields li, .content .gform_wrapper li { margin-right: 29px !important; } #field_1_5 textarea { width: 220px; } .content input[type="text"], .gform_fields li, .gform_wrapper li, #content .donation-form .gform_fields li, #content .donation-form .gform_wrapper li { width: 230px; } .two-thirds .gform_fields li, .two-thirds .gform_wrapper li { margin-right: 13px !important; } #content .donation-form .gform_fields li, #content .donation-form .gform_wrapper li { margin-right: 10px; } #content .gform_wrapper input[type="text"] { width: 215px; } #content .gform_wrapper #field_5_2 input[type="text"], #content .gform_wrapper input[type="text"].full, #content .full.email input[type="text"], #content .full textarea { width: 456px; } .donation-form input[type="text"], .donation-form input[type="email"] { width: 280px; } .donation-form .gform_fields li, .donation-form .gform_wrapper li { width: 290px; } /* .content #field_1_5 input[type="text"], .gform_fields li#field_1_5, .gform_wrapper li#field_1_5 { width: 480px; } */ .donation-form .full input[type="text"] { width: 600px; } .donation-form .gform_fields li.full { width: 610px; } #footernav li { margin-left: 26px; } #footernav li.menu-item-102 { width: 110px; } #footernav li.menu-item-105 { width: 100px; } #footernav li.menu-item-113 { width: 100px; } #footernav li.menu-item-120 { width: 80px; } #bottom .footer-logo img { width: 60px; } #bottom .copyright { font-size: 10px; } #bottom .logos img { margin-left: 2px; } .cd-picture span.fa { height: 45px; } .container { width: 768px; } .container .column, .container .columns { margin-left: 10px; margin-right: 10px; } .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } .alpha.omega { margin-left: 0; margin-right: 0; } .container .one.column, .container .one.columns { width: 28px; } .container .two.columns { width: 76px; } .container .three.columns { width: 124px; } .container .four.columns { width: 172px; } .container .five.columns { width: 220px; } .container .six.columns { width: 268px; } .container .seven.columns { width: 316px; } .container .eight.columns { width: 364px; } .container .nine.columns { width: 412px; } .container .ten.columns { width: 460px; } .container .eleven.columns { width: 508px; } .container .twelve.columns { width: 556px; } .container .thirteen.columns { width: 604px; } .container .fourteen.columns { width: 652px; } .container .fifteen.columns { width: 700px; } .container .sixteen.columns { width: 748px; } .container .one-third.column { width: 236px; } .container .two-thirds.column { width: 492px; } /* Offsets */ .container .offset-by-one { padding-left: 48px; } .container .offset-by-two { padding-left: 96px; } .container .offset-by-three { padding-left: 144px; } .container .offset-by-four { padding-left: 192px; } .container .offset-by-five { padding-left: 240px; } .container .offset-by-six { padding-left: 288px; } .container .offset-by-seven { padding-left: 336px; } .container .offset-by-eight { padding-left: 384px; } .container .offset-by-nine { padding-left: 432px; } .container .offset-by-ten { padding-left: 480px; } .container .offset-by-eleven { padding-left: 528px; } .container .offset-by-twelve { padding-left: 576px; } .container .offset-by-thirteen { padding-left: 624px; } .container .offset-by-fourteen { padding-left: 672px; } .container .offset-by-fifteen { padding-left: 720px; } } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { #top { background-image: url('../images/bkrnd_top-grey-notch-mobilesm.png'); } #searchform div { /* margin-left: 10px; */ } #searchform input[type="text"].search { width: 145px; } #nav, #subnav li, #bottom .footernav, .button-photo, .view-larger, #quick-contact-wrapper-side { display: none; } #shiftnav-toggle-main { display: block !important; } #sf-sidebar { display: block !important; } .page-template-donate #sf-sidebar, .page-template-donate-new #sf-sidebar, .page-template-page-ecard-cpform-php #sf-sidebar { display: none !important; } .page-template-donate #shiftnav-toggle-main, .page-template-donate-new #shiftnav-toggle-main, .page-template-page-ecard-cpform-php #shiftnav-toggle-main { display: none !important; } #subnav li#menu-item-90 { display: block; margin-right: 0; } #subnav li.btn a { padding: 0 9px; font-size: 14px; } h1.logo { margin-left: 7px; } .title a.btn { margin-top: 10px; } .logo-text { padding-left: 80px; } .rotator, .gradient-bottom-img, #header, .rotator.interior { background-size: auto 100%; } .rotator-content { padding-right: 40px; padding: 40px; } .page-template-page-ecard-cpform-php .rotator-content { padding-right: 40px; padding-top: 200px; background-position: 40px 40px; background-size: 80% auto; } .rotator-content h1 { font-size: 42px; } .home .rotator-content h1, .bottom-title h1 { font-size: 48px; } .rotator-content p, .rotator-content .content p { font-size: 20px; } .rotator-content .button-photo img { right: 0px; width: 150px; height: auto; } .links a.btn { margin-top: 15px; padding: 0 15px; } .banner { right: 0; width: 140px; background-position: -10px top; } .banner .rotate { margin-left: 7px; } .controls a.prev { left: 5px; } .controls a.next { right: 5px; } .content-box .header-text p { font-size: 16px; } .content-box .header-photo img { max-width: 100%; } /* #middle { background-image: none; background-color: #FFF; } */ .tabs-content { padding: 0 20px; } #tabs a { font-size: 26px; } .page-template-video-php #tabs a { padding: 0px; float: none; } .page-template-video-php #tabs a.current { border: none; text-decoration: underline; } .current .tab-overlap { display: none; } .page-template-donate-php #tabs a { font-size: 30px; } .donate-header-box .header-text { } .donate-header-box .header-text p { /* font-size: 26px; */ } #org-info, #graph { margin-bottom: 20px; } #map { display: none; } /* #map .map, .target-wrap { height: 117px; } a.target { height: 18px; width: 18px; background-size: auto 100%; } */ .members .member { width: 100%; float: none; margin-right: 0; } .entrywrapper img.featured { margin-right: 0px; margin-bottom: 10px; } .featured-posts .entrywrapper img.featured, .featured-posts .entrywrapper .entry, .content-box .header-photo, .content-box .header-text, .quarterly-newsletters .list, .quarterly-newsletters .document-photo { display: block; } .quarterly-newsletters .list, .quarterly-newsletters .document-photo { width: 100%; } .quarterly-newsletters .document-photo img { max-width: 100%; float: none; } .page-template-location-php .featured-photo { text-align: center; margin-bottom: 10px; } .donate-header-box { background-image: none !important; } /* Start Forms */ .gform_fields li, .content .gform_wrapper li { margin-right: 0px; } textarea, .content input[type="text"], .gform_fields li, .gform_wrapper li, #field_1_5 textarea, .gform_fields li#field_1_5, .gform_wrapper li#field_1_5 { width: 290px; } #content .gform_wrapper #field_5_2 input[type="text"], .popup-frame .gform_wrapper #field_5_2 input[type="text"], #content .gform_wrapper input[type="text"].full, #content .full.email input[type="text"], #content .full textarea { width: 270px; } #content .gform_wrapper li.full span, .popup-frame .gform_wrapper li.full span { float: none; margin-right: 0; } .gform_fields li#field_1_5, .gform_fields li#field_1_10, .gform_footer input[type="submit"] { right: 0; position: relative !important; top: auto !important; } .gfield_checkbox { margin-top: 0px; } .gform_footer { margin-top: 20px; } #content .gform_footer { margin-bottom: 20px; } .mobile-wrap { padding: 0 20px; } .donation-form input[type="text"], .donation-form input[type="email"], .donation-form .gform_fields li, .donation-form .gform_wrapper li { width: 100% !important; } #content .donation-form input[type="text"], #content .donation-form .gform_fields li, #content .donation-form .gform_wrapper li { width: 95% !important; } .donation-form .radio-buttons span { display: block; } .ecard-snail { margin-left: 0; } .pure-u-1-4, .pure-u-6-24 { width: 50%; } .pure-u-1-2, .pure-u-12-24 { width: 100%; margin-bottom: 10px; } .ecard-gallery .ecard-thumb { width: 100%; float: none; } #donation_form dt, #donation_form dd { width: 100%; display: block; margin-bottom: 0; } #donation_form dd { margin-bottom: 1em; } #bottom .container { padding-top: 10px; } #bottom .logo-sn-copyright { padding-bottom: 15px; } #bottom .copyright { font-size: 10px; } .footer-logo, .social-copyright { display: block; } #bottom .footer-logo img { margin-left: 0; } #bottom a.btn.donate.btm { bottom: 0; } #bottom .logos img.interaction { width: 29%; } #bottom .logos img.global-impact { width: 25%; } #bottom .logos img.guide-star { width: 33%; } #bottom .logos { text-align: center; } .cd-picture span.fa { height: 25px; } .cd-timeline-content img { max-width: 200px; } .cd-timeline-block:nth-child(odd) .cd-timeline-content::before { border-right-color: #e2e0dd !important; } #IATS_PaymentBoxDiv label { float: none; display: block; } #IATS_PaymentBoxDiv #IATS_Payment_AccountTypeDiv label { display: inline; } #IATS_PaymentBoxDiv label.IATS_RadioAmtLabel, #IATS_PaymentBoxDiv #IATS_Payment_PaymentFrequencyDiv label { display: inline; } #IATS_PaymentBoxDiv input.IATS_PaymentInputField, #IATS_PaymentBoxDiv textarea.IATS_PaymentInputField, #IATS_PaymentBoxDiv #IATS_PaymentSectionDiv input.IATS_PaymentInputField, .donation-form #IATS_PaymentBoxDiv input[type="text"], #IATS_PaymentBoxDiv input.IATS_ACHInput { width: 195px !important; } #IATS_PaymentBoxDiv div.IATS_PaymentFrequencyItemDiv, #IATS_PaymentBoxDiv div.IATS_PaymentTypeItemDiv { padding-left: 0; } #IATS_PaymentBoxDiv #IATS_PaymentItemDiv_Comment #IATS_PaymentItemInput_Comment { margin-left: 0px; } ul.three-col li { width: 100%; float: none; } .page-template-donate-php #donation_form .table .table-cell { display: block; } .page-template-donate-php .portal-item { display: block; width: 100%; padding-right: 0; padding-left: 0; } .page-template-donate-php .logo-text h1 { font-size: 45px; } .page-template-donate-php .donation-intro .donation-intro-content { padding-top: 30px; margin-bottom: -20px; } .page-template-donate-php .donation-intro .donation-intro-content p { font-size: 16px; } .page-template-donate-php #donation_form .table-cell, .page-template-donate-php #donation_form .table-cell.state-province { width: 100%; padding-right: 0% !important; } .line-title { background: transparent; } .line-title h2 { background: transparent; padding: 0; } .container { width: 300px; } .container .columns, .container .column { margin: 0; } .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 300px; } /* Offsets */ .container .offset-by-one, .container .offset-by-two, .container .offset-by-three, .container .offset-by-four, .container .offset-by-five, .container .offset-by-six, .container .offset-by-seven, .container .offset-by-eight, .container .offset-by-nine, .container .offset-by-ten, .container .offset-by-eleven, .container .offset-by-twelve, .container .offset-by-thirteen, .container .offset-by-fourteen, .container .offset-by-fifteen { padding-left: 0; } } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { #top { background-image: url('../images/bkrnd_top-grey-notch-mobilelrg.png'); } textarea, .content input[type="text"], #content .gform_wrapper input[type="text"], .popup-frame .gform_wrapper input[type="text"], .gform_fields li, .gform_wrapper li, #content .full input[type="text"], .gform_fields li, .gform_wrapper li, #field_1_5 textarea, .gform_fields li#field_1_5, .gform_wrapper li#field_1_5, #content .full.email input[type="text"], #content .full textarea { width: 410px !important; } .cd-picture span.fa { height: 25px; } .cd-timeline-content img { max-width: 300px; } /* #map .map, .target-wrap { height: 164px; } a.target { height: 22px; width: 22px; } */ .container { width: 420px; } .container .columns, .container .column { margin: 0; } .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 420px; } } /* #Clearing ================================================== */ /* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } /* Use clearfix class on parent to clear nested columns, or wrap each row of columns in a
*/ .clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; } /* You can also use a
to clear columns */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }