﻿* {
    margin: 0px;
    padding: 0px;
    font-family: 'Roboto Slab', serif;
}

body {
    background: #3d4648;
}

#Header {
    background-color: #3d4648;
}
    #Header .wrap {
        max-width: 698px;
        height: 70px;
        padding: 0px 20px 0px 128px;
        margin: 0px auto;
        background-image: url(/MailingList/images/master/logo.png);
        background-position: 20px 12px;
        background-repeat: no-repeat;
    }
    #Header h1 {
        line-height: 70px;
        color: #fff;
        white-space: nowrap;
    }

#Footer{
    background-color: #3d4648;
}
    #Footer .wrap {
        max-width: 800px;
        min-height: 70px;
        padding: 10px 20px 80px 20px;
        margin: 0px auto;
        text-align: center;
    }
        #Footer .wrap a {
            color: #6c7b7e;
            text-decoration: none;
        }
#Content{
    background: #e8e7de;
    overflow: hidden;
}
    #Content .content{
        max-width: 800px;
        padding: 20px;
        margin: 0px auto;
    }
    #Content .content-wrap{
        margin: 0px -12px 0px -12px;
    }
    #Content h1{
        margin:0px 4px 24px 4px;
        color: #3c4043;
        border-bottom: 1px solid #3c4043;
    }
    #Content .cw4,
    #Content .cw5,
    #Content .cw8,
    #Content .cw10,
    #Content .cw12,
    #Content .cw15,
    #Content .cw16,
    #Content .cw20{
        float: left;
        padding: 0px 12px 12px 12px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    #Content .cw4{
        width: 20%;
    }
    #Content .cw5{
        width: 25%;
    }
    #Content .cw8{
        width: 40%;
    }
    #Content .cw10{
        width: 50%;
    }
    #Content .cw12{
        width: 60%;
    }
    #Content .cw15{
        width: 75%;
    }
    #Content .cw16{
        width: 80%;
    }
    #Content .cw20{
        clear: both;
        float: none;
    }
    #Content .module{
        padding: 12px;
        margin:0px -12px;
    }
        #Content .module .md-title{
            padding: 12px;
            color: #fedc57;
            background-color: #3c4043;
            -moz-border-radius: 5px 5px 0px 0px;
            -webkit-border-radius: 5px 5px 0px 0px;
            border-radius: 5px 5px 0px 0px;
        }
            #Content .module .md-title h2{
                font-size: 18px;
                line-height: 18px;
                color: #fedc57;
                white-space: nowrap;
                text-align: center;
            }
        #Content .module .md-content{
            padding: 12px;
            background-color: #fff;
            -moz-border-radius: 0px 0px 5px 5px;
            -webkit-border-radius: 0px 0px 5px 5px;
            border-radius: 0px 0px 5px 5px;
            overflow: hidden;
        }
            #Content .module .md-content h2{
                padding-bottom: 12px;
                font-size: 18px;
                line-height: 26px;
                color: #3c4043;
            }
            #Content .module .md-content p{
                padding-bottom: 12px;
                color: #3c4043;
            }
        #Content .module .errorMessage {
            clear: both;
            padding: 12px 12px 12px 12px;
            color: #fff !important;
            background-color: #f34949;
            text-align: center;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            overflow: hidden;
        }
        #Content .module .successMessage {
            clear: both;
            padding: 12px 12px 12px 12px;
            color: #fff !important;
            text-align: center;
            background-color: #47ab3f;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            overflow: hidden;
        }
        #Content .module div label {
            display: block;
            font-size: 14px;
            line-height: 18px;
            color: #3c4043;
            white-space: nowrap;
        }
        #Content .module div.required label {
            font-weight: bold;
        }
            #Content .module div.required label.alert {
                color: #b10c0c;
            }
        #Content .module div input[type=text],
        #Content .module div input[type=tel],
        #Content .module div input[type=file],
        #Content .module div input[type=email],
        #Content .module div input[type=number],
        #Content .module div input[type=date],
        #Content .module div input[type=time],
        #Content .module div input[type=password],
        #Content .module div select {
            width: 100%;
            height: 36px;
            padding: 0px 6px;
            background-color: #e8e7de;
            color: #3c4043;
            line-height: 36px;
            font-size: 16px;
            border: 0px;
            border-radius: 0px;
            -moz-border-radius: 0px;
            -webkit-border-radius: 0px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }
        #Content .module div select {
            line-height: normal;
            height: 36px;
            background-image: url(/images/forms/dropdown-arrow.svg);
            background-size: 18px 7px;
            background-position: right center;
            background-repeat: no-repeat;
        }
        #Content .module div textarea {
            width: 100%;
            height: 100px;
            padding: 8px 6px;
            background: #e8e7de;
            color: #3c4043;
            font-size: 16px;
            border: 0px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            border-radius: 0px;
            -moz-border-radius: 0px;
            -webkit-border-radius: 0px;
        }
            #Content .module div input[type=text].alert,
            #Content .module div input[type=tel].alert,
            #Content .module div input[type=email].alert,
            #Content .module div input[type=number].alert,
            #Content .module div input[type=date].alert,
            #Content .module div input[type=file].alert,
            #Content .module div input[type=time].alert,
            #Content .module div input[type=password].alert,
            #Content .module div textarea.alert,
            #Content .module div select.alert {
                border: solid 1px #b10c0c;
                background: #fff;
                color: #000;
            }

@media(max-width:640px) {
    #Header h1{
        font-size: 18px;
    }
    #Content .cw4,
    #Content .cw5,
    #Content .cw8,
    #Content .cw10,
    #Content .cw12,
    #Content .cw15,
    #Content .cw16{
        float: none;
        width: auto;
    }
}
        
    #Content .submission{
        clear: both;
        padding-top:20px;
        margin: 0px 8px;
        overflow: hidden;
    }
        #Content .submission a,
        #Content .submission span,
        #Content .submission button,
        #Content .submission input[type=submit]{
            display: block;
            float: right;
            height: 40px;
            padding: 0px 8px;
            margin: 4px;
            line-height: 40px;
            background-color: #3c4043;
            border: 0px;
            color: #fff;
            font-size: 16px;
            text-decoration: none;
            cursor: pointer;
            -webkit-transition: background-color 300ms;
            -moz-transition: background-color 300ms;
            -o-transition: background-color 300ms;
            -ms-transition: background-color 300ms;
            transition: background-color 300ms;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
    }
            #Content .submission a:hover,
            #Content .submission span:hover,
            #Content .submission button:hover,
            #Content .submission input[type=submit]:hover{
                background-color: #f2c822;
            }