﻿body, small {
    font-family: "purista-web-n4","purista-web","Helvetica Neue","Helvetica"; /*,Helvetica,Arial,sans-serif !important;*/
}

.failure {
    word-break: break-all;
    display: block;
}

.failureContainer {
    max-width: 600px;
    width: 600px;
}

.errorWrapper {
    max-width: 600px;
    width: 600px;
    background-color: white;
    border: 1px solid gray;
    margin: auto;
}

.ui-dialog-buttonset /*jquery dialog button override*/ {
    float: right !important;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number], input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: textfield !important;
}

/* DONATIONS CSS */

span.error, #lblCCNumber > span.error {
    font-size: 1em !important;
    float: right;
    margin-top: -0.3125em !important;
    margin-left: 1em;
    color: red !important;
    background-color: white !important;
    z-index: 4;
    padding: 2% !important;
}

select.error {
    border-color: #c60f13 !important;
    background-color: rgba(198,15,19,0.1) !important;
}

.DonationHelper fieldset {
    border: none;
    padding: 0;
    width: 100%;
    background: none;
    border-radius: 0;
    overflow: hidden;
    text-align: left;
    position: relative;
}

.DonationHelper h2 {
    font-size: 17px;
    line-height: 19px;
    margin: 60px 0 0 2%;
}

.DonationHelper fieldset footer {
    font-size: 10px;
    color: #999;
    width: auto;
    position: absolute;
    bottom: 15px;
    left: 21px;
}

.donationerror {
    clear: both;
    padding: 10px;
}

.DonationHelper fieldset legend {
    margin: 0 0 0 2%;
    background: none;
    padding: 0 3px;
    font-size: 18px;
    font-weight: bold;
}

.DonationHelper fieldset p {
    width: 48%;
    float: left;
    margin: 0 0 0 2%;
    position: relative;
    padding-top: 14px;
    text-align: left;
    font-size: 14px;
    line-height: 30px;
}

    .DonationHelper fieldset p.required label:before {
        content: "\002A";
        display: block;
        float: right;
        padding-left: 3px;
    }

    .DonationHelper fieldset p span.errorMsg, .DonationHelper fieldset .sfError, .errorMsg {
        line-height: 17px;
        color: #CC0000;
        font-size: 10px;
    }

    .DonationHelper fieldset p.full-width span.errorMsg {
        left: 14.5%;
    }

    .DonationHelper fieldset p.check span.errorMsg {
        bottom: -8px;
        padding-left: 19px;
    }

    .DonationHelper fieldset p.center {
        width: 100%;
        clear: both;
        float: left;
        text-align: center;
    }

.DonationHelper .divCreateAccount .full-width input[type="text"] {
    width: 33.8%;
}

.DonationHelper a.button, .DonationHelper input[type="submit"], .button {
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    font-family: inherit;
    font-weight: bold;
    line-height: 1;
    margin: 0 !important;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    padding-top: 0.75em;
    padding-right: 1.5em;
    padding-bottom: 0.7525em;
    padding-left: 1.5em;
    font-size: 1em;
    /*background-color: #2ba6cb;
	border-color: #2284a1;*/
    color: white !important;
    border-radius: 5px;
}

.DonationHelper fieldset label {
    float: left;
    display: inline-block;
    width: auto;
    padding-top: 10px;
    padding-right: 2%;
    /*text-align: right;*/
    height: 2.3125em;
    font-size: 12px;
    font-weight: bold;
    line-height: 1em;
}

.DonationHelper fieldset select {
    font-size: 0.875em;
    height: 2.3125em;
    margin: 0;
    background: #efefef;
    text-align: left;
    border: 1px solid #ccc;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    padding: 0.25em 0.5em;
    width: 70%;
    float: left;
}

.DonationHelper fieldset ul, .DonationHelper header ol {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}


button.button {
    margin: 0 !important;
}

.amount {
    float: left;
    padding-right: 10px;
    border-radius: 5px;
    padding-bottom: 10px;
}

    .amount > button {
        background-color: #BEC3C8 !important;
        border-color: #BEC3C8 !important;
    }

button.activeAmount, .otheramount.activeAmount > span {
    background-color: #1FAAE1 !important;
    border-color: #1FAAE1 !important;
    font-weight: bold;
    color: #fff;
}

.otheramount.activeAmount > input {
    border-color: #1FAAE1 !important;
}

.otheramount {
    width: 100%;
}

    .otheramount > span {
        border-radius: .5em 0em 0em .5em !important;
        border-style: solid solid solid !important;
        border-width: 1px !important;
        background-color: #BEC3C8 !important;
        border-color: #BEC3C8 !important;
        font-weight: bold;
        color: #fff;
        padding: 0em 0em 0em .5em;
        margin: 0px !important;
        height: 2.6em!important;
        width: 1.5em !important;
    }

    .otheramount > input {
        border-radius: 0em .5em .5em 0em !important;
        border-style: solid solid solid !important;
        border-width: 1px !important;
        border-color: #ccc !important;
        height: 3em!important;
        /* margin: 0 0 0 0.2em !important;
		padding: 0.2em !important;*/
        width: 8em !important;
    }

#lblRegion > span, #lblCCNumber > span {
    padding: 0 !important;
    margin-left: 0 !important;
}

#donationAmounts .designation select {
    height: 2.5em;
}

#amountPopup,#amountError {
    float: left;
    
    
    padding: 10px;
}
#amountPopup {
color: #ffffff;
    border-radius: 5px;
    background-color: #0f5c76;
    margin: 10px 5px 30px 5px;
}
#amountError {
width:100%;
margin: 10px 5px 0px 5px;
}

.tributeChk /*, .commentChk*/ {
    clear: both !important;
    padding: 0px 0px 0px 10px !important;
    margin: 0px 0px 0px 5px!important;
    /*width: 60% !important;*/
    max-width: 520px !important;
    text-align: justify !important;
      box-sizing:unset !important;
}



.donationProjectLabel {
    padding-bottom: 10px !important;
}

p.expiration {
    width: 80% !important;
}

.ccv {
    clear: both;
    width: 100%;
    /*padding: 35px 0px 10px 0px;*/
    float: left;
}

.ccnumberexp /*credit card number and expiration section*/ {
 height: 110px;
    margin: 0px !important;
    padding: 0px !important;
    padding: 0;
    margin: 0;
    float: left;
    display: inline;
}
.expSelectorWrapper {
width:160px;
float:left;
}
.expirationWrapper {
    width: 280px; 
    height: 50px; 
    padding: 0; 
    margin: 0; 
    float: left;
}
.expirationError{
    padding-top:0px !important;
    width:110px !important;
    text-align:left;
    height:20px !important;
}
.expirationErrorWrapper{
    float:left;
    width: 110px;
}
p.ccccv {
    height: 80px !important;
}

.txtCCCCV {
    width: 80px !important;
    margin-right: 0px !important;
    float: left;
}

.cmbCCExpMonth, .cmbCCExpYear {
    width: 70px !important;
    
}

.txtEmail {
    margin: 0 !important;
    padding-bottom: 0px !important;
}

.ccvlocationhelp {
    background-color: white;
    border: 1px solid gray;
}

#txtCCNumber {
    background-image: url(../images/creditCard.png), url(../images/creditCard.png);
    background-position: 2px -121px, 200px -61px;
    background-size: 120px 361px, 120px 361px;
    background-repeat: no-repeat;
    padding-left: 54px;
    width: 225px;
    margin: 0;
}

    #txtCCNumber.visa {
        background-position: 2px -163px, 200px -61px;
    }

    #txtCCNumber.visa_electron {
        background-position: 2px -205px, 200px -61px;
    }

    #txtCCNumber.mastercard {
        background-position: 2px -247px, 200px -61px;
    }

    #txtCCNumber.amex {
        background-position: 2px -289px, 200px -61px;
    }

    #txtCCNumber.discover {
        background-position: 2px -331px, 200px -61px;
    }

    #txtCCNumber.valid.visa {
        background-position: 2px -163px, 200px -87px;
    }

    #txtCCNumber.valid.visa_electron {
        background-position: 2px -205px, 200px -87px;
    }

    #txtCCNumber.valid.mastercard {
        background-position: 2px -247px, 200px -87px;
    }

    #txtCCNumber.valid.amex {
        background-position: 2px -289px, 200px -87px;
    }

    #txtCCNumber.valid.discover {
        background-position: 2px -331px, 200px -87px;
    }

.txtCCCity {
    width: 85% !important;
    min-width: 250px;
}

.txtCCZipCode, .ackCardPostalCode {
    width: 100px !important;
}

.cmbCCRegion, .cmbCountry, .custom-combobox-input {
    width: auto !important;
}
.regionCountryPostalWrapper{
    float: left; 
    display:inline-block;
}
.cmbRegionWrapper, .cmbCountryWrapper {
    float: left;
    display: inline-block;
    padding-right: 5px;
}

.postalCodeWrapper {
    float: left;
    display: inline-block;
    max-width:230px;
}



.donationFormLabel {
    text-align: left;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .DonationHelper fieldset p {
        width: 96%;
        margin: 0;
        text-align: left;
    }

        .DonationHelper fieldset p.check span.errorMsg {
            position: relative;
            top: auto;
            left: auto;
            bottom: auto;
        }

        .DonationHelper fieldset p.check {
            padding-left: 20%;
        }

    .DonationHelper .divCreateAccount .full-width input[type="text"] {
        width: 65%;
    }

    .DonationHelper .full-width select, .DonationHelper .full-width input[type="text"] {
        width: 67%;
    }
}

@media screen and (min-width: 0px) and (max-width: 773px) {
    #chkTribute, #commentChk {
        padding: 0 !important;
        margin: 0 !important;
    }

    .tributeChk, .commentChk, .receiveEmails {
        padding: 0 0 0 10px !important;
        margin: 0 !important;
         width: 90% !important;
        text-align: left !important;
    }

    .chkTribute, .chkReceiveEmails {
        padding: 0 0 0 0 !important;
        margin: 0 !important;
    }

    .DonationHelper section {
        padding-left: 0;
    }

    .DonationHelper fieldset label {
        height: 25px;
        padding-top: 10px;
    }

    .DonationHelper .step3 fieldset label {
        height: auto;
        padding-top: 0;
    }

    .DonationHelper .pAlreadyMember label {
        padding-top: 0;
    }

    #donationAmounts .designation select {
        width: 100%;
    }

    #donationAmounts {
        padding: 40px 0 0px;
    }

    .DonationHelper fieldset p span.errorMsg, .DonationHelper fieldset .sfError {
        bottom: -13px;
    }

    .DonationHelper p.full-width label {
        width: 27%;
    }

    .DonationHelper h2 {
        margin-left: 0;
    }
}

@media screen and (min-width: 601px) and (max-width: 700px) {
    .DonationHelper header li:before {
        left: 41.5%;
    }

    
}

@media screen and (min-width: 401px) and (max-width: 600px) {
    .DonationHelper header li:before {
        left: 40.5%;
    }

    .contactName {
        padding: 0;
    }

    .ccnumexpwrapper {
        float: left;
        width: 100% !important;
        /*height: 200px !important;*/
        padding-bottom: 10px;
    }

    
}
/*iPhone 6plus*/
@media screen and (min-width: 0px) and (max-width: 430px) {
  

    .ccnumexpwrapper {
        float: left;
        width: 100% !important;
        height: 200px !important;
        padding-bottom: 10px;
    }
}
/*iPhone 6*/
@media screen and (min-width: 0px) and (max-width: 400px) {


    .DonationHelper header li:before {
        left: 33.5%;
    }

    .contactName {
        padding: 0;
    }

    .amount {
        width: 200px !important;
    }

    .ccnumexpwrapper {
        float: left;
        width: 100% !important;
        height: 200px !important;
        padding-bottom: 10px;
    }
}



/* tooltips */
/* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */
.tooltipster-default {
    border-radius: 5px;
    border: 2px solid #000;
    background: #4c4c4c;
    color: #fff;
}

    /* Use this next selector to style things like font-size and line-height: */
    .tooltipster-default .tooltipster-content {
        font-family: Arial, sans-serif;
        font-size: 14px;
        line-height: 16px;
        padding: 8px 10px;
        overflow: hidden;
    }

    /* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */
    .tooltipster-default .tooltipster-arrow .tooltipster-arrow-border {
        /* border-color: ... !important; */
    }


/* If you're using the icon option, use this next selector to style them */
.tooltipster-icon {
    cursor: help;
    margin-left: 4px;
}








/* This is the base styling required to make all Tooltipsters work */
.tooltipster-base {
    padding: 0;
    font-size: 0;
    line-height: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999999;
    pointer-events: none;
    width: auto;
    overflow: visible;
}

    .tooltipster-base .tooltipster-content {
        overflow: hidden;
    }


/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
.tooltipster-arrow {
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

    .tooltipster-arrow span, .tooltipster-arrow-border {
        display: block;
        width: 0;
        height: 0;
        position: absolute;
    }

.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-top: 8px solid;
    bottom: -7px;
}

.tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border {
    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    border-top: 9px solid;
    bottom: -7px;
}

.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-bottom: 8px solid;
    top: -7px;
}

.tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    border-bottom: 9px solid;
    top: -7px;
}

.tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border {
    left: 0;
    right: 0;
    margin: 0 auto;
}

.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span {
    left: 6px;
}

.tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
    left: 5px;
}

.tooltipster-arrow-top-right span, .tooltipster-arrow-bottom-right span {
    right: 6px;
}

.tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border {
    right: 5px;
}

.tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border {
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
    border-left: 8px solid;
    top: 50%;
    margin-top: -7px;
    right: -7px;
}

.tooltipster-arrow-left .tooltipster-arrow-border {
    border-top: 9px solid transparent !important;
    border-bottom: 9px solid transparent !important;
    border-left: 9px solid;
    margin-top: -8px;
}

.tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border {
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
    border-right: 8px solid;
    top: 50%;
    margin-top: -7px;
    left: -7px;
}

.tooltipster-arrow-right .tooltipster-arrow-border {
    border-top: 9px solid transparent !important;
    border-bottom: 9px solid transparent !important;
    border-right: 9px solid;
    margin-top: -8px;
}


/* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */

.tooltipster-fade {
    opacity: 0;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    -ms-transition-property: opacity;
    transition-property: opacity;
}

.tooltipster-fade-show {
    opacity: 1;
}

.tooltipster-grow {
    -webkit-transform: scale(0,0);
    -moz-transform: scale(0,0);
    -o-transform: scale(0,0);
    -ms-transform: scale(0,0);
    transform: scale(0,0);
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform;
    -webkit-backface-visibility: hidden;
}

.tooltipster-grow-show {
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -o-transform: scale(1,1);
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}

.tooltipster-swing {
    opacity: 0;
    -webkit-transform: rotateZ(4deg);
    -moz-transform: rotateZ(4deg);
    -o-transform: rotateZ(4deg);
    -ms-transform: rotateZ(4deg);
    transform: rotateZ(4deg);
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform;
}

.tooltipster-swing-show {
    opacity: 1;
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1);
    -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
    -moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
    -ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
    -o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
    transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
}

.tooltipster-fall {
    top: 0;
    -webkit-transition-property: top;
    -moz-transition-property: top;
    -o-transition-property: top;
    -ms-transition-property: top;
    transition-property: top;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}

.tooltipster-fall-show {
}

.tooltipster-fall.tooltipster-dying {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;
    top: 0 !important;
    opacity: 0;
}

.tooltipster-slide {
    left: -40px;
    -webkit-transition-property: left;
    -moz-transition-property: left;
    -o-transition-property: left;
    -ms-transition-property: left;
    transition-property: left;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}

    .tooltipster-slide.tooltipster-dying {
        -webkit-transition-property: all;
        -moz-transition-property: all;
        -o-transition-property: all;
        -ms-transition-property: all;
        transition-property: all;
        left: 0 !important;
        opacity: 0;
    }


/* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */
.tooltipster-content-changing {
    opacity: 0.5;
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}

/* updates to DEV version of donations forms */
#donationAmounts {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 50px 0 0px;
}

    #donationAmounts li {
        float: left;
        display: block;
        margin-bottom: 10px;
        margin-right: 10px;
    }

        #donationAmounts li.designation {
            float: none;
            width: 100%;
            clear: both;
            position: absolute;
            top: 0;
            left: 0;
        }

#tributeBox {
    padding-top: 10px;
}

.DonationHelper section {
    padding-left: 5%;
    padding-right: 5%;
}

#pAlreadyMember {
    float: none;
    width: 100%;
    clear: both;
    margin: 0;
}

    #pAlreadyMember label {
        width: auto;
    }

.DonationHelper section ol li {
    display: block;
    float: left;
    width: 25%;
    white-space: nowrap;
    font-size: 12px;
    text-align: center;
}

.contactName, .contactNameRight {
    width: 250px;
    min-width: 250px;
    display: inline;
    float: left;
}

.contactName {
    padding-right: 20px;
}



.DonationHelper fieldset {
    border: 1px solid #dadada;
    border-radius: 5px;
    margin: 20px auto;
    padding: 20px;
}

    .DonationHelper fieldset legend {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
        font-size: 18px;
        font-weight: bold;
        margin: 0 0 0 2%;
        padding: 0 3px;
    }

.DonationHelper header ol {
    background: #eee;
    width: 100%;
    display: block;
    overflow: hidden;
    padding: 8px 20px;
    border-radius: 4px;
}

.DonationHelper header ol {
    background: #eee;
    width: 100%;
    display: block;
    overflow: hidden;
    padding: 8px 20px;
    border-radius: 4px;
}

.DonationHelper header li {
    position: relative;
    z-index: 4;
    padding: 30px 0 0;
}

.DonationHelper header span {
    color: #9c9c9c;
}

.DonationHelper header .active span {
    color: black;
}

.DonationHelper header li.active:before {
    background: red;
}

.DonationHelper header li:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 43.5%;
    width: 23px;
    height: 23px;
    border-radius: 23px;
    display: block;
    z-index: 6;
    background: #ccc;
    border: 3px solid white;
    -webkit-box-shadow: 0 2px 4px #ccc;
    -moz-box-shadow: 0 2px 4px #ccc;
    box-shadow: 0 2px 4px #ccc;
}

.DonationHelper header li:after {
    z-index: 5;
    content: "";
    position: absolute;
    top: 15px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #cecece;
}

.divCreateAccount {
    clear: both!important;
}

.DonationHelper .pAlreadyMember a, .DonationHelper .pNotMember a {
    display: inline-block;
    background: #2ba6cb;
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
}

.DonationHelper .step3 input[type="checkbox"] {
    margin: 0.75em 0 1em;
}

#donationAmounts .errorMsg {
    color: red;
    font-size: 13px;
}

.step2 .pNotMember {
    float: none;
    width: 100%;
}

    .step2 .pNotMember label {
        width: auto;
    }

.DonationHelper .full-width {
    width: 100%;
}

.DonationHelper p.full-width label {
    width: 13.3%;
}

.DonationHelper input[type="checkbox"] + label {
    float: none;
    width: auto;
    margin-left: 5px;
}

#pStartDate select {
    width:auto;
    max-width: 100px;
    margin-right: 10px;
}

    #pStartDate select + select {
        width: auto; /* 70px;*/
        max-width: 100px;
    }
.chkTribute, .chkReceiveEmails {
    float: left;
    padding: 0;
    margin-right: -8px;
}
.receiveEmails {
    padding: 0 0 0 10px !important; 
    margin: 0 !important; 
    text-wrap: normal; 
    max-width:520px !important;
    height: 15px !important;
}
.sendNewsLetterWrapper {
float: left; 
display: inline; 
padding-top: 15px;
}


.progressOverlay {
    position: fixed;
    z-index: 98;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #fff;
    filter: alpha(opacity=90);
    opacity: 0.9;
}

.progressOverlayContent {
    z-index: 99;
    margin: 250px auto 100px auto;
    width: 80px;
    height: 80px;
}

.processingMessage {
    padding-left: 35%;
    text-align: center;
}
/*-------------- Donation Loader -------------*/

#circularG {
    position: relative;
    width: 128px;
    height: 128px;
}

.circularG {
    position: absolute;
    background-color: #1ACFE4;
    width: 29px;
    height: 29px;
    -moz-border-radius: 19px;
    -moz-animation-name: bounce_circularG;
    -moz-animation-duration: 1.12s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: linear;
    -webkit-border-radius: 19px;
    -webkit-animation-name: bounce_circularG;
    -webkit-animation-duration: 1.12s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: linear;
    -ms-border-radius: 19px;
    -ms-animation-name: bounce_circularG;
    -ms-animation-duration: 1.12s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-direction: linear;
    -o-border-radius: 19px;
    -o-animation-name: bounce_circularG;
    -o-animation-duration: 1.12s;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: linear;
    border-radius: 19px;
    animation-name: bounce_circularG;
    animation-duration: 1.12s;
    animation-iteration-count: infinite;
    animation-direction: linear;
}

#circularG_1 {
    left: 0;
    top: 50px;
    -moz-animation-delay: 0.42s;
    -webkit-animation-delay: 0.42s;
    -ms-animation-delay: 0.42s;
    -o-animation-delay: 0.42s;
    animation-delay: 0.42s;
}

#circularG_2 {
    left: 14px;
    top: 14px;
    -moz-animation-delay: 0.56s;
    -webkit-animation-delay: 0.56s;
    -ms-animation-delay: 0.56s;
    -o-animation-delay: 0.56s;
    animation-delay: 0.56s;
}

#circularG_3 {
    top: 0;
    left: 50px;
    -moz-animation-delay: 0.7s;
    -webkit-animation-delay: 0.7s;
    -ms-animation-delay: 0.7s;
    -o-animation-delay: 0.7s;
    animation-delay: 0.7s;
}

#circularG_4 {
    right: 14px;
    top: 14px;
    -moz-animation-delay: 0.84s;
    -webkit-animation-delay: 0.84s;
    -ms-animation-delay: 0.84s;
    -o-animation-delay: 0.84s;
    animation-delay: 0.84s;
}

#circularG_5 {
    right: 0;
    top: 50px;
    -moz-animation-delay: 0.98s;
    -webkit-animation-delay: 0.98s;
    -ms-animation-delay: 0.98s;
    -o-animation-delay: 0.98s;
    animation-delay: 0.98s;
}

#circularG_6 {
    right: 14px;
    bottom: 14px;
    -moz-animation-delay: 1.12s;
    -webkit-animation-delay: 1.12s;
    -ms-animation-delay: 1.12s;
    -o-animation-delay: 1.12s;
    animation-delay: 1.12s;
}

#circularG_7 {
    left: 50px;
    bottom: 0;
    -moz-animation-delay: 1.26s;
    -webkit-animation-delay: 1.26s;
    -ms-animation-delay: 1.26s;
    -o-animation-delay: 1.26s;
    animation-delay: 1.26s;
}

#circularG_8 {
    left: 14px;
    bottom: 14px;
    -moz-animation-delay: 1.4s;
    -webkit-animation-delay: 1.4s;
    -ms-animation-delay: 1.4s;
    -o-animation-delay: 1.4s;
    animation-delay: 1.4s;
}

@-moz-keyframes bounce_circularG {
    0% {
        -moz-transform: scale(1);
    }

    100% {
        -moz-transform: scale(.3);
    }
}

@-webkit-keyframes bounce_circularG {
    0% {
        -webkit-transform: scale(1);
    }

    100% {
        -webkit-transform: scale(.3);
    }
}

/*@-ms-keyframes bounce_circularG {
    0% {
        -ms-transform: scale(1);
    }

    100% {
        -ms-transform: scale(.3);
    }
}*/

@-o-keyframes bounce_circularG {
    0% {
        -o-transform: scale(1);
         transform: scale(1);
    }

    100% {
        -o-transform: scale(.3);
         transform: scale(.3);
    }
}

@keyframes bounce_circularG {
    0% {
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -moz-transform: scale(.3);
        -o-transform: scale(.3);
        -ms-transform: scale(.3);
        -webkit-transform: scale(.3);
        transform: scale(.3);
    }
}
/*- See more at: http://cssload.net/#sthash.IaQduiqo.dpuf*/

