// $Id: site.less 23957 2015-10-31 19:33:04Z efolley $

@import "/assets/less/colors.less";
@import "/assets/less/fonts.less";
@import "/assets/less/mixins.less";

// Site Colors
@orange:            #f78f1e;
@red:               #e51b24;
@lightBlue:         #00aaf7;
@darkBlue:          #0760ac;

// Typography
@fontSize:          16px;
@lineHeight:        1.5;
@baseline:          @fontSize * @lineHeight;
@textColor:         #000;

/* ===============================================
   GLOBAL ELEMENTS
   =============================================== */

div.preview-notice {
    display: none;
}
body:after {
    display: none;
}

body,
button,
input,
select,
textarea {
    font-family: @roboto;
    font-size: @fontSize;
    color: @textColor;
}

button,
a.button {
    background-color: @red;
    color: @white;
}
body.is-form #content form button {
    height: auto;
    padding: 10px 20px;
    font-size: 40px;
    font-weight: bold;
}

h1 {
    color: @darkBlue;
    font-size: 36px;
    line-height: 1.25;
}
h2, h3 {
    color: @lightBlue;
    line-height: 1.25;
}
h4, h5, h6 {
    color: @black;
    line-height: 1.25;
}

body.is-form #content form h2 {
    color: @white;
    text-transform: uppercase;
    padding: 5px 10px;
    background-color: @darkBlue;
}

a {
    color: @orange;

    &:hover {
        text-decoration: underline;
    }
}

.captcha-wrapper {
    margin-bottom: .75rem;
}


button,
a.button {
    background: @orange;
}

span.req {
    color: @red;
}

#topbar {

    .sizer {
        background-color: @orange;
        .contain-floats;
        position: relative;

        .nav-list a {
            color: @white;
        }
    }
}

#top {

    .sizer {
        background-color: @white;
        .contain-floats;
    }
}

#bottom {

    .sizer {
        background-color: @orange;
        .contain-floats;

        .info {
            color: @white;

            a {
                color: @white;
                text-decoration: none;
            }
        }
    }
}

/***** CONTRIBUTION FORM BUTTON INPUTS *****/

form#contribution-form {

    div.simple-amount {
        width: auto;
        margin-right: 10px;

        input[name="amount"] {
            position: absolute;
            left: -9999px;
        }
        label {
            margin-left: 0;
            background: @lightBlue;
            color: @white;
            padding: 10px 0;
            font-size: 20px;
            text-align: center;
            width: 70px;
            .border-radius;
        }

        input[name="amount"]:checked ~ label {
            background: @orange;
        }
    }
    div.simple-amount-other {
        clear: both;
        margin-top: 10px;

        input[name="amount_other"] {
            width: 100px;
        }
    }
}


/* ===============================================
   DESKTOP LAYOUT
   =============================================== */
@media only screen and (min-width: 641px) {

body {
    background: #cceefd url(/images/bg_body.png) repeat-x;
}

.sizer {
    width: 1050px;
    margin: 0 auto;
}

#topbar {

    .sizer {
        padding: 0 90px;

        .nav-list {

            li {
                line-height: 36px;

                a {
                    font-size: 16px;
                    font-weight: bold;
                    text-decoration: none;
                }
            }
        }

        .signup {
            background: @darkBlue;
            width: 250px;
            position: absolute;
            top: 0;
            right: 80px;
            padding: 10px 10px 0;
            .border-radius(0 0 5px 5px);

            input[name="email"] {
                width: 100%;
                height: 30px;
            }
            input[name="zip"] {
                width: 50%;
                height: 30px;
                margin-right: 5%;
            }
            button {
                background-color: @orange;
                width: 45%;
                height: 30px;
                font-size: 80%;
            }
        }
        
        // overriding for 1/27/21 rework of this widget

        .signup-v2 {
            padding: 10px 20px;
            
            a.button {
                width: 100%;
                height: auto;
                padding: 15px 30px;
                font-size: 1.5rem;
                text-align: center;
            }
        }
    }
}

#top {

    .sizer {
        padding: 0 90px;
    }

    .logo {
        width: 400px;
        height: 92px;
        float: left;
    }

    .social-buttons {
        float: left;
        padding-top: 24px;

        ul {

            li {
                text-indent: 0;

                a {
                    background: @red;
                    color: @white;
                    font-size: 20px;
                    height: 30px;
                    width: 30px;
                    line-height: 30px;
                    text-align: center;
                    .border-radius(100px);
                }
            }
        }
    }
}

#topnav {

    .sizer {
        background-color: @lightBlue;
        padding: 0 90px;
        .contain-floats;

        > ul {
            display: table;
            width: 100%;
            padding-right: 20%;
            position: relative;

            > li {
                display: table-cell;
                position: relative;

                .menu-item-wrapper > a {
                    height: 60px;
                    line-height: 60px;
                    padding: 0 20px;
                    color: @white;
                    font-size: 22px;
                    font-weight: bold;
                    text-decoration: none;
                    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
                }

                &.nav7 {
                    display: block;
                    height: 119px;
                    width: 119px;
                    line-height: 119px;
                    background: url(/images/btn_donate_orange.png) no-repeat;
                    position: absolute;
                    top: -30px;
                    right: 0;
                    text-align: center;
                    text-transform: uppercase;
                    z-index: 100;

                    a {
                        padding: 0;
                    }
                }

            }
        }

        .level2 {
            width: 200px;
            position: absolute;
            top: 60px;
            left: -9999px;
            z-index: 99999;

            > ul {

                > li {
                    border-top: 1px solid @white;

                    > a {
                        color: @white;
                        background: #0b62ac;
                        display: block;
                        padding: 5px 10px;
                        text-decoration: none;

                        &:hover {
                            background: @lightBlue;
                        }
                    }
                }
            }
        }

        > ul > li:hover .level2 {
            left: 0;
        }
    }
}
#topnav > .sizer > ul > li.nav6 {
    display: none;
}
body.is-home #topnav > .sizer > ul > li.nav7 {
    background: url(/images/btn_donate_red.png) no-repeat;
}

#middle {

    .sizer {
        background: @white;
        .contain-floats;
    }
}
body.is-story #middle {

    .sizer {
        background: @white url(/images/bg_sidebar.png) top right repeat-y;
    }
}




#content {
    padding: 20px 50px;

    .bc-wrapper {

        a {
            color: @textColor;
            text-decoration: none;
        }
        span {
            color: @red;
        }
    }
}
body.is-story #content {
    width: 750px;
    float: left;
}
body.is-story.layout-no-sidebar {

    #middle .sizer {
        background: @white;
    }
    #content {
        width: 100%;
        float: none;
    }
}
body.is-home #content {
    width: 100%;
    padding: 0;
}

#sidebar {
    width: 300px;
    float: left;
}

#bottom {

    .sizer {
        padding: 20px 50px 0;

        .bottom-wrapper {
            margin-bottom: @baseline;
            .contain-floats;

            .search {
                float: right;

                input {
                    width: 100px;
                }
            }

            .logo {
                width: 350px;
                float: left;
            }

            .info {
                width: 450px;
                float: left;

                p {
                    margin: 0;

                    &.address {
                        font-size: 18px;

                        .phone {
                            font-weight: bold;
                        }
                    }

                    &.privacy {

                        a {
                            text-decoration: underline;
                        }
                    }
                }
            }
        }

        .p3-badge {
            width: 312px;
            height: 43px;
            margin: 0 auto;
            background: url(/images/bg_p3_badge.png) no-repeat;

            > div {
                width: 50%;
                float: left;
                text-indent: -9999px;

                a {
                    display: block;
                    height: 43px;
                }
            }
        }

    }
}

/***** SIDEBAR *****/

#sidebar {
    padding: 50px 10px 10px;

    h2 {
        color: @white;
        font-size: 30px;
    }

    .social-buttons {

        ul {
            display: table;
            width: 100%;

            li {
                text-indent: 0;
                margin: 0;
                display: table-cell;
                width: 25%;
                text-align: center;

                a {
                    background: @white;
                    color: @red;
                    font-size: 30px;
                    height: 40px;
                    width: 40px;
                    line-height: 40px;
                    text-align: center;
                    .border-radius(100px);
                    .inline-block;
                }
            }
        }
    }

}


/***** HOMEPAGE *****/

body.is-home {

    .slideshow {
        margin-bottom: 0;
    }


    .action {
        padding: 10px 125px;
        color: #2a2a2a;
        background-color: @orange;
        font-size: 14px;
        text-align: center;

        h2 {
            font-size: 40px;
            margin-bottom: @baseline/4;
            color: #2a2a2a;
        }

        .links {
            display: table;
            width: 100%;
            color: @white;
            font-size: 12px;

            .listed-item {
                display: table-cell;
                width: 14.28%;
                line-height: 1.25;

                .img {
                    float: none;
                    margin: 0 0 @baseline/4;

                    img {
                        .inline-block;
                    }
                }
            }
        }

    }

    .issues {
        padding: 10px 50px;
        text-align: center;

        h2 {
            color: @darkBlue;
            font-size: 40px;
            margin-bottom: @baseline/2;
        }
        h3 {
            font-size: 30px;
            color: @lightBlue;
            margin-bottom: @baseline/4;
        }

        .listed-item {

            .img {
                float: none;
                margin: 0 0 @baseline/2;

                img {
                    .inline-block;
                }
            }
            p.teaser {
                font-size: 14px;
                font-weight: 300;
            }
        }

        .top-row .listed-item {

            h3.title {
                font-size: 30px;
                color: @lightBlue;
                margin-bottom: @baseline/2;
            }

            &:last-child {

                h3.title {
                    margin-bottom: @baseline/2 + 20px;
                }
            }
        }
        .bottom-row .listed-item {

            h3.title {
                font-size: 22px;
                color: @red;
                text-transform: uppercase;
            }
        }
    }

    .charity {
        background: @red;
        padding: 20px 50px;
        .contain-floats;

        .column-1 {
            text-align: right;
            color: @white;

            h2 {
                color: @white;
                margin: 0;
                font-size: 36px;
                line-height: 50px;
            }
            p {
                margin: 0;
            }
        }
        .column-2 {

            .listed-item {
                margin-right: 20px;
                margin-bottom: 0;
                .inline-block();
                line-height: 60px;
                vertical-align: middle;
            }
        }
    }

    .whats-new {
        padding: 20px 100px;
        background: @lightBlue;

        h2 {
            color: @white;
            font-size: 40px;
            margin-bottom: @baseline/2;
            text-align: center;
        }
        .listed-item {
            padding: 15px;
            background: @white;
            .border-radius();

            .img {
                margin: 0 0 @baseline/3;
                float: none;
            }
            h3.title {
                width: 70%;
                margin-right: 5%;
                float: left;
                color: @orange;
                text-align: right;
            }
            p.readmore {
                float: left;
                width: 25%;

                a {
                    display: block;
                    height: 41px;
                    width: 41px;
                    background: url(/images/whats_new_readmore.png) no-repeat;
                    text-indent: -9999px;
                    float: right;
                }
            }
        }
    }

    .hf-101 {
        height: 587px;
        padding: 30px 440px 0 50px;
        background: url(/images/bg_hf101.jpg) no-repeat;

        h2 {
            font-size: 36px;
            color: #323232;
            text-align: center;
            margin: 0 0 @baseline/2;
        }

        .video-wrapper {
            background: @white;
            padding: 20px;
            .border-radius(10px);
            text-align: center;
            color: #323232;

            h3 {
                color: #323232;
                font-size: 22px;
                margin-bottom: @baseline/4;
            }
            p {
                margin: 0;
                font-size: 14px;
            }

            .video {
                margin-bottom: @baseline/2;
            }
        }
    }
    .hf-101-vid-only {
        padding: 20px;

        h2 {
            font-size: 36px;
            color: #323232;
            text-align: center;
            margin: 0 0 @baseline/2;
        }
    }
}

/***** SECTION COVERS *****/

body.section-cover {

    #middle {

        .sizer {
            background: @white;

            #content {
                width: 100%;
                float: none;
            }
        }
    }
}

body.sc1 {

    #content {

        .listed-item {

            h3.title {
                font-size: 18px;
                font-weight: 400;
            }
            .img {
                float: none;
                margin: 0 0 @baseline/3;
            }
        }
    }
}

body.sc2 {

    #content {

        .listed-item {

            &:nth-child(3n + 1) {
                background: #cceefd;
            }
            &:nth-child(3n + 2) {
                background: #ededed;
            }
            &:nth-child(3n + 0) {
                background: #fad1d3;
            }

            .txt {
                padding: 10px 20px 0;

                h3.title {
                    font-size: 30px;
                    font-weight: 400;
                    color: @textColor;
                }

                p.teaser {
                    font-sizer: 16px;
                    margin-bottom: @baseline/2;
                }

                .readmore a {
                    .inline-block;
                    padding: 10px;
                    background: @orange;
                    color: @white;
                    .border-radius();
                    font-size: 12px;
                }
            }
        }
    }
}

body.sc3 { // advocacy

    #content {

        .top {
            padding: 10px 50px;
            margin: 0 -50px @baseline;;
            background: @orange;
            color: @white;

            h1 {
                color: @white;
                font-size: 36px;
                font-weight: 400;
                margin-bottom: @baseline/2;
            }
        }

        .bottom {
            .contain-floats;

            .left {
                width: 620px;
                margin-right: 30px;
                float: left;

                .get-involved {
                    margin-bottom: @baseline;
                }

                .signup {
                    background: @lightBlue;

                    h2 {
                        color: @white;
                        background: @lightBlue;
                        padding: 5px 10px;
                        margin: 0;
                    }

                    form {
                        min-height: 200px;
                        padding: 140px 20px 10px;
                        background: url(/images/bg_adv_capitol.jpg) no-repeat;
                    }

                    input[name="email"] {
                        width: 100%;
                    }
                    input[name="zip"] {
                        width: 50%;
                        margin-right: 10%;
                    }
                    button {
                        width: 40%;
                    }
                }
                .voice {

                    h2 {
                        color: @white;
                        background: @orange;
                        padding: 5px 10px;
                        margin: 0;
                    }
                    .wrapper {
                        background: #fdddbb;
                        padding: 10px;
                        font-size: 14px;

                        h3 {
                            font-size: 16px;
                            color: @black;
                            text-align: center;
                            text-transform: uppercase;
                            margin: @baseline/3;
                        }

                        .img img {
                            margin: 0 auto;
                        }
                    }
                }

                .action-center {
                    border: 1px solid @darkBlue;
                    border-top: 0;
                    padding: 0 10px 10px;

                    h2 {
                        color: @white;
                        background: @darkBlue;
                        margin: 0 -10px;
                        padding: 5px 10px;
                        margin-bottom: @baseline/2;
                    }
                    h3 {
                        color: @lightBlue;
                    }
                    p {
                        border-bottom: 1px solid @lightBlue;
                        padding: 0 10px 10px;

                        &:last-child {
                            border-bottom: 0;
                        }
                    }
                }
            }

            .right {
                width: 300px;
                float: left;

                .vol {
                    padding: 10px 10px 1px;
                    background: #a4a6a7;
                    color: @white;

                    h2,
                    a {
                        color: @white;
                    }
                    li {
                        text-transform: uppercase;
                        margin-bottom: @baseline/4;
                    }
                }
                .speak {
                    padding: 10px 10px 1px;
                    background: @lightBlue;
                    color: @white;

                    h2,
                    a {
                        color: @white;
                    }
                    li {
                        text-transform: uppercase;
                        margin-bottom: @baseline/4;
                    }
                }
            }
        }
    }
}

/***** SLIDESHOW *****/

.slideshow {
    margin-bottom: @baseline;

    .listed-item {
        margin: 0;

        .img {
            float: none;
            margin: 0;
        }
    }
}

/***** EVENTS *****/

.tmpl-event-details {

    .reply-form {

        input.text,
        select,
        textarea {
            width: 100%;
        }

        button {
            height: auto;
        }
    }
}



} // end desktop layout

/* ===============================================
   MOBILE LAYOUT
   =============================================== */
@media only screen and (max-width: 640px) {

iframe {
    max-width: 100% !important;
}

.bc-wrapper,
.pt-wrapper .email,
.pt-wrapper .print,
.pt-wrapper .share,
.pt-wrapper .plusone,
#sidebar {
    display: none;
}

.preview-notice {
    background: #c00;
    padding: 5px 10px;
    min-height: 0;

    p {
        display: none;
    }
}

.mobile-wrapper {
    display: table;
    width: 100%;
    padding: 10px;

    .logo {
        display: table-cell;
        width: 70%;
        vertical-align: middle;
    }
    .quick-nav {
        text-align: right;
        font-size: 75%;
    }
}

#topbar {

    .sizer {
        padding: 10px;

        #menu-toggle {
            float: right;
        }

        h3 {
            color: @white;
            float: left;
            margin: 0;
        }
        a {
            color: @white;
        }
    }
}

#top {

    body.is-home {

        .action,
        .flex-control-nav,
        .flex-direction-nav {
            display:none;
        }

        .charity {
            padding: 10px;
            background: @red;

            h2 {
                color: @white;
            }
        }

        .whats-new {
            padding: 10px;
            background: @lightBlue;

            .img,
            .readmore {
                display: none;
            }
            h2 {
                color: @white;
            }
            h3.title {
                color: @white;
                text-align: center;
            }
        }
    }
}

.mobile-nav {

    > ul {
        display: none;
        float: none;
        width: 100%;
        .contain-floats;

        > li {
            float: none;
            margin: 0;
            width: 100%;
            height: auto;
            display: block;
            border-top: 1px solid @white;

            > .menu-item-wrapper {
                .contain-floats();

                > a {
                    display: block;
                    width: 100%;
                    color: @white;
                    background: @orange;
                    text-align: left;
                    height: auto;
                    line-height: 1;
                    font-size: 16px;
                    font-weight: bold;
                    .border-radius(0);
                    padding: 10px;

                    i {
                        display: none;
                    }
                }
                > div.subnav {
                    float: right;
                    padding: 6px 10px;
                    color: @white;
                    width: auto;
                    background: none;

                    i {
                        font-size: 16px;
                    }
                }

            }
        }
    }
    .level2 {
        display: none;

        > ul {

            > li {

                > a {
                    display: block;
                    line-height: 1;
                    padding: 8px 10px 8px 25px;
                    color: @white;
                    background: @lightBlue;
                    border-top: 1px solid #fff;
                    border-bottom: none;
                    text-decoration: none;
                }
            }
        }
    }
    ul ul ul {
        display: none;
    }
}

#content {
    padding: 10px;
}

#bottom {
    background: @orange;
    text-align: center;
    padding: 10px;

    .search {
        display: none;
    }

    .info img {
        .inline-block();
    }
}

body.homepage {

    .slideshow {

        .flex-direction-nav {
            display: none;
        }
    }

    .issues,
    .action {
        display: none;
    }

    .charity {
        background: @red;
        padding: 1rem;
        margin-bottom: 1.5rem;
        .contain-floats;

        .column-1 {
            text-align: center;
            color: @white;

            h2 {
                color: @white;
                margin: 0;
                font-size: 36px;
                line-height: 50px;
            }
            p {
                margin: 0;
            }
        }
        .column-2 {

            .listed-item {
                
                &.item-1 {
                    width: 100%;
                    margin-bottom: 1rem;
                    
                    img {
                        margin: 0 auto;
                    }
                }
                
                &.item-gt1 {
                    display: none;
                }
            }
        }
    }

    .whats-new {
        background: @red;
        padding: 10px;

        .img {
            display: none;
        }
        h3.title {
            color: @white;
        }
    }
}

} // end mobile layout

@media only screen and (max-width: 320px) {

    #content input.text,
    #content select,
    #content textarea {
        width: 175px;
    }
}