/************************************** * PAGE LAYOUT * **************************************/ body { padding: 0px; margin: 0px; background-color: #E5EFD7; font-family: Lato, sans-serif; } .wrapper { width: 960px; margin: 0px auto; } pre.debug { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } /************************************** * CLEARFIX * **************************************/ .clear { clear: both; } /************************************** * CLICKABLE * **************************************/ .clickable { cursor: pointer; } .clickable:hover { background-color: #F6FFE6; } /************************************** * HEADER * **************************************/ .header h1 { color: #7AAA3E; font-family: Roboto, sans-serif; font-weight: 500; font-size: 46px; margin: 8px 0px; } .header h1 .highlight { color: #587532; } /************************************** * MAIN AREA * **************************************/ .main { background-color: #FCFFF7; box-shadow: 0px 0px 10px 1px #b0b0b0; -webkit-box-shadow: 0px 0px 10px 1px #b0b0b0; -moz-box-shadow: 0px 0px 10px 1px #b0b0b0; -o-box-shadow: 0px 0px 10px 1px #b0b0b0; -ms-box-shadow: 0px 0px 10px 1px #b0b0b0; padding: 16px 20px; } .main h2 { font-size: 32px; margin: 0px 0px 6px 0px; color: #3B4A28; } .main h2.spaced { margin-bottom: 24px; } /************************************** * FOOTER * **************************************/ .footer { margin-top: 16px; font-size: 15px; margin-bottom:24px; text-align: right; } .footer a { color: #008600; text-decoration: none; } .footer a:after { content: " | "; color: silver; } .footer a:hover { color: black; } .footer a:nth-last-child(1):after { content: ""; } .intro { background-color: #F5F5F5; padding: 14px -18px; text-align: center; } .col1, .col2 { width: 46%; line-height: 140%; } .col1 { font-size: 18px; float: left; margin-left: 8px; text-align: justify; } .col2 { font-size: 17px; float: right; margin-right: 16px; } /************************************** * FORMS * **************************************/ .formwrapper { width: 485px; margin: 0px auto; } .formwrapper.narrow { width: 432px; } .formfield { margin: 6px 0px; } .formfield.next-similar { margin-bottom: 6px; } .formfield.previous-similar { margin-top: 6px; } .formfield label, .formfield input { float: left; } .formfield input { font-size: 17px; padding: 4px; width: 270px; border: 1px solid #6CA825; border-radius: 1px; background-color: #F4FDE4; } .formfield label { width: 170px; font-size: 18px; padding-top: 7px; margin-right: 12px; font-weight: bold; } form.narrow .formfield label { width: 130px; } .formfield.submit { padding-left: 182px; margin-top: 24px; } form.narrow .formfield.submit { padding-left: 142px; } form .note { clear: both; font-size: 14px; margin-left: 182px; padding-top: 3px; } form .note:before { content: "↳"; margin-right: 5px; } form button { margin-top: 0px; background: #61AF12; border-top: 1px solid #529d26; border-right: 1px solid #2c5615; border-bottom: 1px solid #1d390e; border-left: 1px solid #2c5615; border-radius: 4px; box-shadow: inset 0 1px 10px 1px #6CDD28, 0px 1px 0 #2c5713, 0 2px 0px #305e14, 0 3px 2px 1px #111111; color: #fff; font: bold 17px/1 "helvetica neue", helvetica, arial, sans-serif; margin-bottom: 15px; padding: 10px 19px 12px 19px; text-align: center; text-shadow: 0px -1px 1px #1e2d4d; -webkit-background-clip: padding-box; } form button:hover { box-shadow: inset 0 0px 20px 1px #75DB38, 0px 1px 0 #324d1d, 0 2px 0px #37531f, 0 3px 2px 1px #111111; cursor: pointer; } form button:active { box-shadow: inset 0 1px 10px 1px #85BC59, 0 1px 0 #203213, 0 2px 0 #223413, 0 3px 3px 0 #111111; margin-top: 2px; margin-bottom: 13px; } /************************************** * TABLES * **************************************/ table { border-collapse: collapse; width: 100%; } table, td { border: 1px solid #688A3C; } th, td { padding: 7px 10px; } td { color: #292929; } th { text-align: left; font-size: 17px; background-color: #688A3C; border: 1px solid #5A6B46; color: #FDFFFD; text-shadow: 0px 1px 0px #1A5200; -webkit-text-shadow: 0px 1px 0px #1A5200; -moz-text-shadow: 0px 1px 0px #1A5200; -o-text-shadow: 0px 1px 0px #1A5200; -ms-text-shadow: 0px 1px 0px #1A5200; } th.icon { padding: 4px; text-align: center; } td.numeric { text-align: right; } td.name, td.total { font-weight: bold; } td.name { color: #203A00; } td.total { color: black; } tr.total td { border-top: 2px solid #030600; border-right: 1px solid #D3E8B7; border-left: 1px solid #D3E8B7; } tr.total td:nth-child(1) { border-left: 1px solid #688A3C; } tr.total td:nth-last-child(1) { border-right: 1px solid #688A3C; } td.meta { font-style: italic; } /************************************** * NOTIFICATIONS * **************************************/ .errors { color: #2F0003; margin-bottom: 30px; padding: 12px; border: 1px solid #6F0008; background-color: #FFF7F8; } .notices { color: #002F03; margin-bottom: 30px; padding: 12px; border: 1px solid #116F00; background-color: #F8FFF7; } /************************************** * LOGOS * **************************************/ .logo.thumb { margin-right: 11px; } img.logo.thumb { vertical-align: middle; height: 20px; } div.logo.thumb { font-size: 18px; font-weight: bold; font-style: italic; color: #1F2E0B; display: inline-block; } /************************************** * DASHBOARD * **************************************/ td.payment-methods { max-width: 240px; } /************************************** * LANDING * **************************************/ /* Layout */ .main .details, .main .subscribe { margin-top: 16px; width: 46%; } .main .details { float: left; padding-right: 4%; text-align: justify; border-right: 1px solid silver; } .main .subscribe { float: right; padding-left: 3%; } .main .more { margin-top: 16px; border-top: 1px solid silver; padding-top: 32px; text-align: justify; } .main .more .wrapper { width: 730px; margin: 0px auto; } /* Header */ .main h3 { margin: 0px; } .main h3.section { margin-top: 16px; border-top: 1px solid silver; padding-top: 16px; } .main .subscribe h3 { margin-bottom: 32px; } /* Text styles */ .main .leader { font-size: 18px; } .main .subscribe p { font-size: 18px; } p.error { font-weight: bold; color: #C50003; } /* Form */ #field_currency { text-align: right; border: 1px solid #6CA825; border-radius: 1px; background-color: transparent; font-size: 18px; } #field_amount, #field_email { border: 1px solid #6CA825; border-radius: 1px; background-color: transparent; font-size: 18px; padding: 1px 5px; } #field_amount { width: 55px; } #field_email { margin-top: 6px; width: 335px; } /* Button - thanks, Ari! */ p.pledge-button { padding-left: 15px; padding-top: 10px; } .green-button { margin-top: 0px; background: #66CC00; border-top: 1px solid #529d26; border-right: 1px solid #2c5615; border-bottom: 1px solid #1d390e; border-left: 1px solid #2c5615; border-radius: 4px; box-shadow: inset 0 1px 10px 1px #8eff4b, 0px 1px 0 #2c5713, 0 6px 0px #305e14, 0 8px 4px 1px #111111; color: #fff; font: bold 20px/1 "helvetica neue", helvetica, arial, sans-serif; margin-bottom: 15px; padding: 10px 15px 12px 15px; text-align: center; text-shadow: 0px -1px 1px #1e2d4d; -webkit-background-clip: padding-box; } .green-button:hover { box-shadow: inset 0 0px 20px 1px #bdff87, 0px 1px 0 #324d1d, 0 6px 0px #37531f, 0 8px 4px 1px #111111; cursor: pointer; } .green-button:active { box-shadow: inset 0 1px 10px 1px #a5df76, 0 1px 0 #203213, 0 2px 0 #223413, 0 4px 3px 0 #111111; margin-top: 5px; margin-bottom: 10px; } .green-button:disabled { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); } .no-padding { padding: 0px; } .padding { padding: 16px 20px; }