Untitled diff
1 removal
981 lines
1 addition
981 lines
/* ===================================================================================
/* ===================================================================================
This is the tablet and desktop stylesheet. It applies to viewports above 768px.
This is the tablet and desktop stylesheet. It applies to viewports above 768px.
For the mobile first stylesheet which applies to all screen widths, see theme.scss.
For the mobile first stylesheet which applies to all screen widths, see theme.scss.
=================================================================================== */
=================================================================================== */
//* style variables *//
//* style variables *//
// headline font
// headline font
$headline-font: "Oswald", sans-serif;
$headline-font: "Oswald", sans-serif;
// alternative headline font
// alternative headline font
$headline-font-alt: "Oswald", sans-serif;
$headline-font-alt: "Oswald", sans-serif;
// main font
// main font
$font: "Droid Serif", serif;
$font: "Droid Serif", serif;
$turquoise: #53cfd7;
$turquoise: #53cfd7;
$grey: #ccc;
$grey: #ccc;
$ltgrey: #f2f2f2;
$ltgrey: #f2f2f2;
$charcoal: #656565;
$charcoal: #656565;
$red: #d41116;
$red: #d41116;
$green: #619114;
$green: #619114;
$facebook: #3b5998;
$facebook: #3b5998;
$twitter: #00aced;
$twitter: #00aced;
$onecolumn-bg: #fff;
$onecolumn-bg: #fff;
$twocolumn-color: #000;
$twocolumn-color: #000;
$nav-hover: $turquoise;
$nav-hover: $turquoise;
$nav-hover-color: #000;
$nav-hover-color: #000;
$nav-background: #000;
$nav-background: #000;
$nav-color: #fff;
$nav-color: #fff;
$desktop-site-bg: #fff;
$desktop-site-bg: #fff;
$desktop-site-color: #000;
$desktop-site-color: #000;
$nav-container-border: 0;
$nav-container-border: 0;
$headline-transform: uppercase;
$headline-transform: uppercase;
$flex-background: transparent;
$flex-background: transparent;
$flex-border: 3px solid #fff;
$flex-border: 3px solid #fff;
$flex-color: #fff;
$flex-color: #fff;
$theme-color-1: $turquoise;
$theme-color-1: $turquoise;
$theme-color-2: #000;
$theme-color-2: #000;
$theme-color-3: $grey;
$theme-color-3: $grey;
$theme-color-4: $charcoal;
$theme-color-4: $charcoal;
$icon-button-bg: $theme-color-4;
$icon-button-bg: $theme-color-4;
$onecolumn-container-padding: 50px 30px;
$onecolumn-container-padding: 50px 30px;
$onecolumn-container-border: 1px solid $theme-color-3;
$onecolumn-container-border: 1px solid $theme-color-3;
// border-radius mixin
// border-radius mixin
@import "border_radius";
@import "border_radius";
// fluid grid for tablet
// fluid grid for tablet
@import "grid-tablet";
@import "grid-tablet";
//compass css3 mixins
//compass css3 mixins
@import "compass/css3";
@import "compass/css3";
//mobile nav
//mobile nav
@import "mobile-nav";
@import "mobile-nav";
blockquote{
blockquote{
font-size: 24px;
font-size: 24px;
line-height: 28px;
line-height: 28px;
}
}
body {
body {
background: $desktop-site-bg;
background: $desktop-site-bg;
margin: 0;
margin: 0;
font: 15px/24px $font;
font: 15px/24px $font;
color: $desktop-site-color;
color: $desktop-site-color;
}
}
h1.title {
h1.title {
font-size: 48px;
font-size: 48px;
line-height: 50px;
line-height: 50px;
}
}
// page layout if the sidebar is turned on
// page layout if the sidebar is turned on
.onecolumn-container {
.onecolumn-container {
padding: $onecolumn-container-padding;
padding: $onecolumn-container-padding;
border: $onecolumn-container-border;
border: $onecolumn-container-border;
width: 100%;
width: 100%;
margin: 0px auto;
margin: 0px auto;
background: $onecolumn-bg;
background: $onecolumn-bg;
}
}
.twocolumn-container {
.twocolumn-container {
margin-top: 35px;
margin-top: 35px;
margin-bottom: 20px;
margin-bottom: 20px;
.left-column, .right-column-wide {
.left-column, .right-column-wide {
float: left;
float: left;
width: 67.2261208577%;
width: 67.2261208577%;
// 710px ÷ 1026px
// 710px ÷ 1026px
margin-right: 2.559454191033%;
margin-right: 2.559454191033%;
// 16px ÷ 1026px
// 16px ÷ 1026px
margin-bottom: 0;
margin-bottom: 0;
color: $twocolumn-color;
color: $twocolumn-color;
}
}
.right-column, .left-column-narrow {
.right-column, .left-column-narrow {
float: left;
float: left;
width: 30.214424951267%;
width: 30.214424951267%;
// 310px ÷ 1026px
// 310px ÷ 1026px
margin-bottom: 0;
margin-bottom: 0;
}
}
.right-column-wide {
.right-column-wide {
margin-right: 0;
margin-right: 0;
}
}
.left-column-narrow {
.left-column-narrow {
margin-right: 2.559454191033%;
margin-right: 2.559454191033%;
// 16px ÷ 1026px
// 16px ÷ 1026px
}
}
}
}
// site header image and subheadline
// site header image and subheadline
.site-header{
.site-header{
font-size: 36px;
font-size: 36px;
line-height: 40px;
line-height: 40px;
}
}
// wraps your site name or site logo
// wraps your site name or site logo
header {
header {
max-width: 50%;
max-width: 50%;
// 286px ÷ 1140px
// 286px ÷ 1140px
float: left;
float: left;
padding: 20px 0 20px 30px;
padding: 20px 0 20px 30px;
}
}
.site-logo {
.site-logo {
header, header.splash {
header, header.splash {
float: left;
float: left;
text-align: left;
text-align: left;
padding: 0;
padding: 0;
max-width: none;
max-width: none;
margin-left: 0;
margin-left: 0;
img {
img {
max-width: none;
max-width: none;
left: 0;
left: 0;
}
}
a{
a{
position: static;
position: static;
}
}
}
}
}
}
.header-container{
.header-container{
padding: 15px 0;
padding: 15px 0;
}
}
// site signup in the header
// site signup in the header
.header-signup{
.header-signup{
width: 30%;
width: 30%;
float: right;
float: right;
.email-signup {
.email-signup {
margin-top: 24px;
margin-top: 24px;
}
}
}
}
// site wide footer
// site wide footer
footer {
footer {
.footer-right {
.footer-right {
margin-top: 0;
margin-top: 0;
text-align: right;
text-align: right;
}
}
}
}
// hides off canvas nav
// hides off canvas nav
.wrap.active {
.wrap.active {
left: 0;
left: 0;
}
}
.sharetable {
.sharetable {
display: block;
display: block;
width: 487px;
width: 487px;
.facebook-cell {
.facebook-cell {
float: left;
float: left;
text-align: left;
text-align: left;
padding: 0 20px 0 0;
padding: 0 20px 0 0;
vertical-align: top;
vertical-align: top;
width: 320px;
width: 320px;
}
}
.twitter-cell {
.twitter-cell {
float: left;
float: left;
text-align: left;
text-align: left;
padding: 0 20px 0 0;
padding: 0 20px 0 0;
vertical-align: top;
vertical-align: top;
width: 75px;
width: 75px;
}
}
.gplus-cell {
.gplus-cell {
float: left;
float: left;
text-align: left;
text-align: left;
vertical-align: top;
vertical-align: top;
width: 52px;
width: 52px;
}
}
}
}
.mobile-visible {
.mobile-visible {
display: none;
display: none;
}
}
.desktop-visible {
.desktop-visible {
display: block;
display: block;
}
}
.flash-share {
.flash-share {
.float {
.float {
float: right;
float: right;
}
}
}
}
// icon which activates off canvas nav
// icon which activates off canvas nav
.menu-link {
.menu-link {
display: none;
display: none;
}
}
// top nav with drop downs
// top nav with drop downs
.nav-container{
.nav-container{
background: $nav-background;
background: $nav-background;
margin-bottom: -1px;
margin-bottom: -1px;
position: relative;
position: relative;
z-index: 5;
z-index: 5;
border-bottom: $nav-container-border;
border-bottom: $nav-container-border;
}
}
.subnav-container{
.subnav-container{
margin-bottom: 50px;
margin-bottom: 50px;
}
}
nav, .subnav {
nav, .subnav {
background-color: transparent;
background-color: transparent;
border-right: 0;
border-right: 0;
border-top: 0;
border-top: 0;
height: auto;
height: auto;
margin: 0;
margin: 0;
position: static;
position: static;
width: auto;
width: auto;
.topnav {
.topnav {
margin: 0;
margin: 0;
padding: 0;
padding: 0;
clear: both;
clear: both;
list-style: none;
list-style: none;
}
}
li {
li {
font-family: $headline-font;
font-family: $headline-font;
display: inline-block;
display: inline-block;
margin: 0 10px 0 0;
margin: 0 10px 0 0;
position: relative;
position: relative;
background-color: $nav-background;
background-color: $nav-background;
border: 0;
border: 0;
line-height: 55px;
line-height: 55px;
text-transform: $headline-transform;
text-transform: $headline-transform;
a {
a {
display: block;
display: block;
width: 100%;
width: 100%;
height: 100%;
height: 100%;
color: $nav-color;
color: $nav-color;
padding: 0 15px 0;
padding: 0 15px 0;
}
}
&:last-child {
&:last-child {
margin-right: 0;
margin-right: 0;
}
}
&:hover, &.active{
&:hover, &.active{
border-color: transparent;
border-color: transparent;
background-color: $nav-hover;
background-color: $nav-hover;
color: $nav-hover-color;
color: $nav-hover-color;
a {
a {
color: $nav-hover-color;
color: $nav-hover-color;
}
}
}
}
}
}
/* controls bg color of top when hovering on sub */
/* controls bg color of top when hovering on sub */
.sub {
.sub {
position: absolute;
position: absolute;
top: 54px;
top: 54px;
left: 0;
left: 0;
z-index: 99999;
z-index: 99999;
background-color: $nav-hover;
background-color: $nav-hover;
padding: 8px 0 5px 0;
padding: 8px 0 5px 0;
width: 200px;
width: 200px;
display: none;
display: none;
}
}
.sub li {
.sub li {
width: 100%;
width: 100%;
border: none;
border: none;
color: $nav-hover-color;
color: $nav-hover-color;
font-size: 14px;
font-size: 14px;
line-height: 28px;
line-height: 28px;
display: block;
display: block;
text-transform: none;
text-transform: none;
background-color: transparent;
background-color: transparent;
border-color:transparent;
border-color:transparent;
@include border-radius(0);
@include border-radius(0);
&.mobile-visible {
&.mobile-visible {
display: none;
display: none;
}
}
}
}
.sub a {
.sub a {
background: none;
background: none;
padding: 5px 20px 5px 22px;
padding: 5px 20px 5px 22px;
&:hover {
&:hover {
background-color: transparent;
background-color: transparent;
text-decoration: none;
text-decoration: none;
color: white;
color: white;
}
}
}
}
}
}
// navigation shown if a page has more than one subpage
// navigation shown if a page has more than one subpage
.subnav {
.subnav {
margin: 0 0 15px 0;
margin: 0 0 15px 0;
padding: 0;
padding: 0;
float: left;
float: left;
clear: both;
clear: both;
font-size: 13px;
font-size: 13px;
max-width: 100%;
max-width: 100%;
li{
li{
margin-bottom: 13px;
margin-bottom: 13px;
}
}
}
}
.desktop-nav {
.desktop-nav {
li:hover .sub {
li:hover .sub {
display: block;
display: block;
}
}
}
}
// follow page link shown in page stream
// follow page link shown in page stream
.page-follow {
.page-follow {
float: right;
float: right;
margin-top: -35px;
margin-top: -35px;
}
}
// inline radio buttons and check boxes
// inline radio buttons and check boxes
.radio-inline, .checkbox-inline {
.radio-inline, .checkbox-inline {
span {
span {
white-space: nowrap;
white-space: nowrap;
display: inline-block;
display: inline-block;
}
}
input[type="radio"], input[type="checkbox"] {
input[type="radio"], input[type="checkbox"] {
margin: 0;
margin: 0;
display: inline-block;
display: inline-block;
}
}
input[type="radio"]:checked+label, input[type="checkbox"]:checked+label {
input[type="radio"]:checked+label, input[type="checkbox"]:checked+label {
background-color: transparent;
background-color: transparent;
color: #505054;
color: #505054;
}
}
label {
label {
display: block;
display: block;
}
}
label.radio, label.checkbox {
label.radio, label.checkbox {
.option_label {
.option_label {
display: inline;
display: inline;
}
}
position: relative;
position: relative;
top: 2px;
top: 2px;
display: inline-block;
display: inline-block;
width: auto;
width: auto;
background-color: transparent;
background-color: transparent;
font-family: $font;
font-family: $font;
color: #505054;
color: #505054;
font-size: 15px;
font-size: 15px;
font-weight: normal;
font-weight: normal;
text-align: left;
text-align: left;
padding: 0;
padding: 0;
}
}
label.checkbox {
label.checkbox {
position: relative;
position: relative;
padding: 0;
padding: 0;
height: auto;
height: auto;
font-size: inherit;
font-size: inherit;
margin: 0;
margin: 0;
}
}
&.checkbox-inline {
&.checkbox-inline {
vertical-align: top;
vertical-align: top;
li {
li {
width: auto;
width: auto;
label {
label {
width: auto;
width: auto;
}
}
input[type="checkbox"] {
input[type="checkbox"] {
vertical-align: middle;
vertical-align: middle;
}
}
}
}
}
}
}
}
// inline radio buttons
// inline radio buttons
.radio.inline, .checkbox.inline, .inline label.radio {
.radio.inline, .checkbox.inline, .inline label.radio {
display: inline-block;
display: inline-block;
margin-right: 20px;
margin-right: 20px;
padding-top: 5px;
padding-top: 5px;
margin-bottom: 10px;
margin-bottom: 10px;
vertical-align: middle;
vertical-align: middle;
&:first-child {
&:first-child {
margin-left: 0;
margin-left: 0;
}
}
}
}
input[type="checkbox"],
input[type="checkbox"],
input[type="radio"] {
input[type="radio"] {
border: 0;
border: 0;
padding: 0;
padding: 0;
background: none;
background: none;
@include box-shadow(0);
@include box-shadow(0);
}
}
// wraps credit card icons
// wraps credit card icons
.cc {
.cc {
margin-top: 8px;
margin-top: 8px;
padding-bottom: 10px;
padding-bottom: 10px;
}
}
// paid membership options
// paid membership options
ul.membership-list {
ul.membership-list {
list-style: none;
list-style: none;
margin: 0;
margin: 0;
padding: 0;
padding: 0;
vertical-align: top;
vertical-align: top;
li.membership {
li.membership {
vertical-align: top;
vertical-align: top;
display: block;
display: block;
float: left;
float: left;
margin: 0 2% 1.22% 0;
margin: 0 2% 1.22% 0;
width: 32%;
width: 32%;
height: 250px;
height: 250px;
&:nth-child(3n) {
&:nth-child(3n) {
margin-right: 0;
margin-right: 0;
}
}
.buy {
.buy {
position: absolute;
position: absolute;
width: 88px;
width: 88px;
bottom: 15px;
bottom: 15px;
margin-left: -44px;
margin-left: -44px;
left: 50%;
left: 50%;
}
}
}
}
}
}
// featured content slider
// featured content slider
.page-features {
.page-features {
position: relative;
position: relative;
margin: 35px 0 50px 0;
margin: 35px 0 50px 0;
.features-headline {
.features-headline {
font-size: 36px;
font-size: 36px;
line-height: 40px;
line-height: 40px;
padding: 15px 65px;
padding: 15px 65px;
top: 41%;
top: 41%;
}
}
.single-feature, .multiple-features{
.single-feature, .multiple-features{
height: 455px;
height: fit-content;
}
}
}
}
.flex-direction-nav {
.flex-direction-nav {
top: 39%;
top: 39%;
}
}
.flex-prev, .flex-next {
.flex-prev, .flex-next {
display: block;
display: block;
height: 63px;
height: 63px;
font-size: 44px;
font-size: 44px;
border: $flex-border;
border: $flex-border;
color: $flex-color;
color: $flex-color;
padding: px;
padding: px;
}
}
.flex-prev{
.flex-prev{
left: 10px;
left: 10px;
}
}
.flex-next{
.flex-next{
right: 10px;
right: 10px;
}
}
// inline sign in form
// inline sign in form
.user-session-form-container {
.user-session-form-container {
.oauth-links {
.oauth-links {
margin-bottom: 0;
margin-bottom: 0;
}
}
.sign-in-with-email, .sign-up {
.sign-in-with-email, .sign-up {
border-left: 1px solid #ccc;
border-left: 1px solid #ccc;
padding-left: 4.762431%;
padding-left: 4.762431%;
position: relative;
position: relative;
}
}
}
}
.or-button{
.or-button{
display: block;
display: block;
}
}
.review-rules {
.review-rules {
float: right;
float: right;
font-size: 12px;
font-size: 12px;
padding: 0;
padding: 0;
}
}
// page specific styles
// page specific styles
.page-user-sessions-new-wide, .page-users-accounts-new-wide, .page-users-password-resets-new-wide, .page-users-passwords-new-wide {
.page-user-sessions-new-wide, .page-users-accounts-new-wide, .page-users-password-resets-new-wide, .page-users-passwords-new-wide {
.onecolumn-container {
.onecolumn-container {
margin: 0 auto;
margin: 0 auto;
margin-top: 0px;
margin-top: 0px;
width: 100%;
width: 100%;
border-bottom: 0;
border-bottom: 0;
}
}
footer {
footer {
margin: 0 auto;
margin: 0 auto;
width: 100%;
width: 100%;
}
}
}
}
.page-pages-show-voter-registration .iframe-wrapper {
.page-pages-show-voter-registration .iframe-wrapper {
left: 0;
left: 0;
width: 100%;
width: 100%;
}
}
#event_rsvp_guests_count, input.quantity, #signup_donations_to_raise_amount {
#event_rsvp_guests_count, input.quantity, #signup_donations_to_raise_amount {
width: 25%;
width: 25%;
}
}
.suggestion-tag-list {
.suggestion-tag-list {
li {
li {
margin: 15px 15px 10px 0;
margin: 15px 15px 10px 0;
}
}
}
}
input#donation_amount_other {
input#donation_amount_other {
width: 30%;
width: 30%;
}
}
.distance {
.distance {
.within {
.within {
position: relative;
position: relative;
top: 2px;
top: 2px;
display: inline;
display: inline;
padding-right: 5px;
padding-right: 5px;
}
}
}
}
.page-user-sessions-new-wide {
.page-user-sessions-new-wide {
h2 {
h2 {
font-size: 31.5px;
font-size: 31.5px;
line-height: 35px;
line-height: 35px;
}
}
}
}
// inline formatting for name, activity type and date in page stream for tablet and desktop view
// inline formatting for name, activity type and date in page stream for tablet and desktop view
ul#page-stream {
ul#page-stream {
li.activity {
li.activity {
span + a {
span + a {
display: inline;
display: inline;
}
}
}
}
.activity-time {
.activity-time {
display: inline;
display: inline;
}
}
.timeago {
.timeago {
display: inline;
display: inline;
padding-right: 0;
padding-right: 0;
float: none;
float: none;
font-size: 65%;
font-size: 65%;
color: inherit;
color: inherit;
}
}
.activity_links a {
.activity_links a {
display: inline;
display: inline;
}
}
.activity_content {
.activity_content {
clear: none;
clear: none;
}
}
}
}
ul.homepage_excerpt-list{
ul.homepage_excerpt-list{
li{
li{
.left{
.left{
width: 50%;
width: 50%;
padding-right: 20px;
padding-right: 20px;
float: left;
float: left;
}
}
.right{
.right{
width: 50%;
width: 50%;
padding-left: 20px;
padding-left: 20px;
float: left;
float: left;
border-left: 1px solid $theme-color-3;
border-left: 1px solid $theme-color-3;
}
}
}
}
}
}
.blog{
.blog{
.span7{
.span7{
width: 59.94475138121547% !important;
width: 59.94475138121547% !important;
margin-left: 0 !important;
margin-left: 0 !important;
display: table-cell !important;
display: table-cell !important;
float: none !important;
float: none !important;
vertical-align: top;
vertical-align: top;
padding-left: 10px;
padding-left: 10px;
}
}
.span5{
.span5{
display: table-cell !important;
display: table-cell !important;
float: none !important;
float: none !important;
}
}
.row-fluid{
.row-fluid{
display: table;
display: table;
table-layout: fixed;
table-layout: fixed;
}
}
.post-image{
.post-image{
height: 365px;
height: 365px;
}
}
h3{
h3{
font-family: $font;
font-family: $font;
text-transform: none;
text-transform: none;
font-size: 30px;
font-size: 30px;
line-height: 34px;
line-height: 34px;
margin-bottom: 10px;
margin-bottom: 10px;
color: black;
color: black;
}
}
.read-more, .read_more{
.read-more, .read_more{
display: inline-block;
display: inline-block;
font-style: inherit;
font-style: inherit;
a{
a{
color: $theme-color-4;
color: $theme-color-4;
}
}
}
}
.icon-button{
.icon-button{
background: transparent;
background: transparent;
color: $theme-color-4;
color: $theme-color-4;
padding-left: 0;
padding-left: 0;
i{
i{
width: 25px;
width: 25px;
height: 25px;
height: 25px;
background: $icon-button-bg;
background: $icon-button-bg;
@include border-radius(25px);
@include border-radius(25px);
overflow: hidden;
overflow: hidden;
text-align: center;
text-align: center;
margin-right: 8px;
margin-right: 8px;
}
}
}
}
hr{
hr{
margin: 50px 0;
margin: 50px 0;
}
}
}
}
.page-type-donation{
.page-type-donation{
.left{
.left{
width: 31.914893617021278%;
width: 31.914893617021278%;
float: left;
float: left;
}
}
.right{
.right{
width: 65.95744680851064%;
width: 65.95744680851064%;
margin-left: 2.127659574468085%;
margin-left: 2.127659574468085%;
float: left;
float: left;
}
}
}
}
.page-pages-show-petition-wide, .page-pages-show-moneybomb-wide, .page-pages-show-feedback-wide, .page-pages-show-endorsement-wide, .page-pages-show-signup-wide, .page-pages-show-volunteer-wide, .page-pages-show-vote-pledge-wide, .page-pages-show-survey-wide{
.page-pages-show-petition-wide, .page-pages-show-moneybomb-wide, .page-pages-show-feedback-wide, .page-pages-show-endorsement-wide, .page-pages-show-signup-wide, .page-pages-show-volunteer-wide, .page-pages-show-vote-pledge-wide, .page-pages-show-survey-wide{
.left{
.left{
width: 40.42553191489362%;
width: 40.42553191489362%;
float: left;
float: left;
}
}
.right{
.right{
width: 57.44680851063829%;
width: 57.44680851063829%;
margin-left: 2.127659574468085%;
margin-left: 2.127659574468085%;
float: left;
float: left;
}
}
}
}
// page specific styles
// page specific styles
.content-pages-show-blog-post, .content-pages-show-blog-post-wide{
.content-pages-show-blog-post, .content-pages-show-blog-post-wide{
font-size: 18px;
font-size: 18px;
line-height: 26px;
line-height: 26px;
}
}
.tablet-visible {
.tablet-visible {
display: none;
display: none;
}
}
// Tablet only
// Tablet only
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.radio-inline, .checkbox-inline {
.radio-inline, .checkbox-inline {
input[type="radio"], input[type="checkbox"] {
input[type="radio"], input[type="checkbox"] {
display: none;
display: none;
margin: 0 5px 0 10px !important;
margin: 0 5px 0 10px !important;
}
}
input[type="radio"]:checked+label, input[type="checkbox"]:checked+label {
input[type="radio"]:checked+label, input[type="checkbox"]:checked+label {
background-color: $theme-color-1;
background-color: $theme-color-1;
color: #fff;
color: #fff;
}
}
label.radio, label.checkbox {
label.radio, label.checkbox {
.option_label {
.option_label {
display: block;
display: block;
}
}
background-color: $theme-color-2;
background-color: $theme-color-2;
color: $theme-color-4;
color: $theme-color-4;
display: inline-block;
display: inline-block;
width: 80px;
width: 80px;
padding: 15px 5px;
padding: 15px 5px;
font-family: $headline-font;
font-family: $headline-font;
font-weight: bold;
font-weight: bold;
font-size: 19px;
font-size: 19px;
text-align: center;
text-align: center;
margin: 5px 5px 10px 0;
margin: 5px 5px 10px 0;
cursor: pointer;
cursor: pointer;
outline: none;
outline: none;
}
}
label.checkbox {
label.checkbox {
padding: 5px;
padding: 5px;
height: 30px;
height: 30px;
font-size: 16px;
font-size: 16px;
margin: 5px 5px 0 0;
margin: 5px 5px 0 0;
}
}
&.checkbox-inline {
&.checkbox-inline {
vertical-align: middle;
vertical-align: middle;
li {
li {
width: 100%;
width: 100%;
vertical-align: middle;
vertical-align: middle;
label {
label {
width: 100%;
width: 100%;
}
}
}
}
}
}
}
}
.distance .within {
.distance .within {
display: block;
display: block;
margin-bottom: 1em;
margin-bottom: 1em;
}
}
// off canvas nav to be used on tablets, since drop downs don't work on touch devices
// off canvas nav to be used on tablets, since drop downs don't work on touch devices
.nav-container {
.nav-container {
display:none;
display:none;
}
}
nav {
nav {
@include mobile-nav;
@include mobile-nav;
float: none;
float: none;
margin: 0;
margin: 0;
li {
li {
margin: 0;
margin: 0;
padding: 0;
padding: 0;
@include border-radius(0);
@include border-radius(0);
line-height: 21px;
line-height: 21px;
&.active, &.drop {
&.active, &.drop {
background-color: $theme-color-4;
background-color: $theme-color-4;
border-bottom: 1px solid darken($theme-color-4, 15);
border-bottom: 1px solid darken($theme-color-4, 15);
& > a {
& > a {
color: #fff;
color: #fff;
}
}
}
}
a {
a {
padding: .8em;
padding: .8em;
}
}
}
}
.sub {
.sub {
position: static;
position: static;
width: 100%;
width: 100%;
padding: 0;
padding: 0;
li {
li {
border-bottom: 1px solid darken($theme-color-4, 15);
border-bottom: 1px solid darken($theme-color-4, 15);
background-color: darken($theme-color-4, 5);
background-color: darken($theme-color-4, 5);
&:last-child {
&:last-child {
margin-bottom: 0;
margin-bottom: 0;
}
}
a {
a {
padding: 12px;
padding: 12px;
color: #ccc;
color: #ccc;
}
}
&.mobile-visible {
&.mobile-visible {
display: block;
display: block;
}
}
}
}
}
}
}
}
.menu-link {
.menu-link {
display: block;
display: block;
margin-right: 20px;
margin-right: 20px;
}
}
.wrap.active {
.wrap.active {
left: 16em;
left: 16em;
}
}
.supporter-nav li a {
.supporter-nav li a {
font-size:.85em;
font-size:.85em;
span, i {
span, i {
font-size: 1.176em;
font-size: 1.176em;
}
}
}
}
// javascript is used to wrap all iframes in a span called responsive-embed-wrapper to make them responsive.
// javascript is used to wrap all iframes in a span called responsive-embed-wrapper to make them responsive.
// once the iframe is wrapped in said span, it will be shown.
// once the iframe is wrapped in said span, it will be shown.
iframe[src *= 'youtube'] {
iframe[src *= 'youtube'] {
display: none;
display: none;
}
}
.responsive-embed-wrapper iframe {
.responsive-embed-wrapper iframe {
display: block;
display: block;
}
}
.fb-like-box iframe {
.fb-like-box iframe {
display: block;
display: block;
}
}
header {
header {
padding: 24px 0;
padding: 24px 0;
max-width: 78%;
max-width: 78%;
@each $current-headline-font in $headline-font {
@each $current-headline-font in $headline-font {
@if $current-headline-font == 'Josefin Sans' {
@if $current-headline-font == 'Josefin Sans' {
padding-top: 31px;
padding-top: 31px;
}
}
}
}
}
}
.header-signup .email-signup {
.header-signup .email-signup {
margin-top: 27px;
margin-top: 27px;
}
}
// replaces the subnav with breadcrumbs, as dropdowns don't work in touch devices
// replaces the subnav with breadcrumbs, as dropdowns don't work in touch devices
.tablet-visible {
.tablet-visible {
display: block;
display: block;
}
}
.desktop-visible {
.desktop-visible {
.subnav-container {
.subnav-container {
display: none;
display: none;
}
}
}
}
}
}
// Desktop above 1140px styles
// Desktop above 1140px styles
@media only screen and (min-width: 1140px) {
@media only screen and (min-width: 1140px) {
// maximum side width container
// maximum side width container
.width-container {
.width-container {
width: 1026px; /* 1140px - 10% for margins */
width: 1026px; /* 1140px - 10% for margins */
margin: 0 auto;
margin: 0 auto;
}
}
// paid membership options
// paid membership options
ul.membership-list {
ul.membership-list {
list-style: none;
list-style: none;
margin: 0;
margin: 0;
padding: 0;
padding: 0;
text-align: center;
text-align: center;
li.membership {
li.membership {
position: relative;
position: relative;
display: block;
display: block;
float: left;
float: left;
margin: 0 2% 1.22% 0;
margin: 0 2% 1.22% 0;
width: 32%;
width: 32%;
text-align: center;
text-align: center;
list-style: none;
list-style: none;
background-color: $ltgrey;
background-color: $ltgrey;
@include border-radius(2px);
@include border-radius(2px);
padding: 15px;
padding: 15px;
height: 250px;
height: 250px;
.membership-bottom {
.membership-bottom {
background-color: #444;
background-color: #444;
color: #ccc;
color: #ccc;
}
}
.membership-blurb {
.membership-blurb {
padding: 15px 0;
padding: 15px 0;
font-size: 13px;
font-size: 13px;
line-height: 16px;
line-height: 16px;
}
}
.buy {
.buy {
position: absolute;
position: absolute;
width: 88px;
width: 88px;
bottom: 15px;
bottom: 15px;
margin-left: -44px;
margin-left: -44px;
left: 50%;
left: 50%;
}
}
.badge {
.badge {
font-size: 12px;
font-size: 12px;
text-transform: uppercase;
text-transform: uppercase;
}
}
}
}
}
}
}
}
// blog-widget border
// blog-widget border
.blog-widget:nth-child(odd) {
.blog-widget:nth-child(odd) {
padding-right: 10px;
padding-right: 10px;
}
}
.blog-post-widget {
.blog-post-widget {
display: table-cell;
display: table-cell;
.blog-post-widget-image {
.blog-post-widget-image {
background-size: cover !important;
background-size: cover !important;
display: table-cell;
display: table-cell;
float: none !important;
float: none !important;
height: auto;
height: auto;
}
}
.blog-post-widget-right {
.blog-post-widget-right {
margin-left: 0 !important;
margin-left: 0 !important;
display: table-cell !important;
display: table-cell !important;
float: none !important;
float: none !important;
vertical-align: top;
vertical-align: top;
background-color: white;
background-color: white;
}
}
}
}
// styles when the site has a background image
// styles when the site has a background image
.with-background{
.with-background{
.onecolumn-container{
.onecolumn-container{
padding: 90px;
padding: 90px;
}
}
// style for homepage blog widget
// style for homepage blog widget
.blog-widget-parent {
.blog-widget-parent {
display: table-cell;
display: table-cell;
.blog-widget {
.blog-widget {
display: table-cell;
display: table-cell;
float: none;
float: none;
position: relative;
position: relative;
padding-bottom: 20px;
padding-bottom: 20px;
vertical-align:top;
vertical-align:top;
-moz-background-clip: padding;
-moz-background-clip: padding;
-webkit-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
background-clip: padding-box;
&:nth-child(odd) {
&:nth-child(odd) {
padding-right: 0px;
padding-right: 0px;
border-right: 10px solid transparent;
border-right: 10px solid transparent;
}
}
&:nth-child(even) {
&:nth-child(even) {
border-left: 10px solid transparent;
border-left: 10px solid transparent;
}
}
.share-bar {
.share-bar {
width: 100%;
width: 100%;
padding-left: 20px;
padding-left: 20px;
position: absolute;
position: absolute;
bottom: 0;
bottom: 0;
left: 0;
left: 0;
}
}
}
}
}
}
}
}
@media only screen and (max-width : 768px) {
@media only screen and (max-width : 768px) {
.page-pages-show-donation-wide {
.page-pages-show-donation-wide {
.radio-inline {
.radio-inline {
label.radio {
label.radio {
min-width: 123px;
min-width: 123px;
}
}
span:nth-child(2n) label.radio {
span:nth-child(2n) label.radio {
margin-right: 0;
margin-right: 0;
}
}
}
}
}
}
}
}