/*
  hidding the test server warning so i can see how the page will really look
*/

#testServer{
    display:none;
}

.clear {
    height:0px;
    line-height:0px;
    border:none;
    margin:0px;
    padding:0px;
    font-size:0px;
    clear:both;
}

/*lists in xhtml are handeled differently than html.  These general rules should
make the lists look more like they used to without using a ton of inline styles.
More css will probably be needed so dont count on just this to save you.*/
ul li {
    list-style:disc inside none;
    margin:10px 0px 10px 10px;       /*top, right, bottom, and left*/
}
ol li {
    list-style:decimal inside none;
    margin:10px 0px 10px 10px;
}

ol{
    margin:10px 0px 10px 10px;
}

ul{
    margin:10px 0px 10px 10px;
}


/*
        Modal Box stuff ...
*/
.intAlert{
    font-weight:bold;
    color:#ff0000;
    text-transform:uppercase;
}

#darkenScreenObject{
    display:none;
    width :100%;
    height: 100%;

    position:fixed;
    top:0px;
    left:0px;

    background-color: #000;

    overflow:hidden;
    z-index: 3;
}

#box{
    display:none;
    position:absolute;
    top:50%;
    left:50%;
    width:500px;
    height:200px;
    margin-left:-250px;
    margin-top:-100px;
    background-color: #fff;
}

#boxInner{
    position:relative;
    font-size:16px;
    font-weight:bold;
    width:476px;
    height:176px;
    margin-top:10px;
    margin-bottom:10px;
    margin-left:auto;
    margin-right:auto;
    border:2px solid #000;
}

#boxInnerText{
    margin:5px;
    text-align:center;
}

#contWrap{
    position:absolute;bottom:0px;margin:5px;right:0px;width:240px;
    float:right;
    text-align: center;
    margin-bottom: 15px;
    margin-top: 15px;
}
.donate4 #contWrap{
    width: 170px;
}

#contWrap:hover{
    border:2px solid #FFF;
}

#continue{
    width:48px;
    height:48px;
    float:right;
    margin:30px 15px 5px 5px;
    background-image:url("../images/Next-48x48.png");
    margin:auto;float:none;
}

#continueText{
    text-align:center;
    width:120px;
    height:52px;
    float:right;
    margin:25px 5px 5px 5px;
    background-image:url("../images/contDonation.png");

    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.useExpressText {
    text-align:center;
    width:170px;
    height:36px;
    float:none;
    margin:5px 0px 0px;
    background-image:url("../images/useExpress.png");

    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.noThanksText{
    text-align:center;
    width:170px;
    height:36px;
    float:none;
    margin:5px 0px 0px;
    background-image:url("../images/noThanks.png");

    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

#canWrap{
    position:absolute;bottom:0px;margin:5px;width:240px;
    float:left;
    text-align: center;
    margin-bottom: 15px;
    margin-top: 15px;
}
.donate4 #canWrap{
    width: 170px;
}
/*.donationPageBody #container, .programPageBody #container {width: 900px;}*/

#canWrap:hover{
    border:2px solid #FFF;
}

#cancelCircle{
    background-image:url("../images/Cancel-48x48.png");
    width:48px;
    height:48px;
    float:left;
    margin:28px 5px 5px 15px;
    margin:auto;float:none;
}

#cancelText{
    background-image:url("../images/cancelDonation.png");
    width:120px;
    height:50px;
    float:left;
    margin:25px 5px 5px 5px;
}

/*    End Modal Box Stuff     */

/*******************************************************************************
 *  New three step template css
 ******************************************************************************/
html{
    background-color: #F1F1F1;
    height:100%;
}

body {
    margin: 0px;
    padding: 0px;
    background-color: #F1F1F1;
    font-family:  Arial, Helvetica, Verdana, Geneva, sans-serif;
    font-size: 12px;
    text-align: left;
    color: #000000;
    height:100%;
}

.block{
    display:block;
}

.absolute{
    position:absolute;
}

#container{
    width:900px;
    margin-left:auto;
    margin-right:auto;
    min-height:100%;
    background-color:#FFF;
    color:#5b5b5b;
}

#theForm{
    background-color:#FFF;
    float: left;
/*    display:block;*/
}
.donate4 #theForm{
    width: 100%;
}

.pipeSep{
    font-weight:bold;
}
.copy{
    width:900px; text-align:center;text-decoration:none;
}

.confirmRow {
    display: none;
}

/*
        Truck Header Styles
*/ 
.progressText{
    position:absolute;
    margin-top:5px;
    font-size:14px;
}

.progressText a, .progressText span{
    color:#FFF;
    text-decoration:none;
}

.truckBackground{
    background-color: blue;
}
.truckBackSize{
    position:absolute;
    height:41px;
    width:555px;
}

/* End Truck Header Styles */

.donate-section, .donate-subsection {
    text-align: left;
}
.donate-section {
    margin: 15px auto;
    padding: 0 45px;
}


.donateThankyou {
  color:#666666;
  padding: 0 134px 0 62px;
}

.inputsAndTestimonials{
    padding: 0 45px;
}
/* This is useful only on a desktop, when going mobile I'll set the background image to none */
.formFauxColumnWrapper{
    background:url("/images/fauxColGray.gif") repeat-y right;
    display: inline-block;
    width: 100%;
}

.formColumn{
    float:left;
    width:555px;
}

.testimonialColumn{
    float:right;
    width:250px;
    background: url("/images/needHelpGrad.gif") repeat-x #D7D7D9;
    padding-bottom: 15px;
}
.tallTestimonialCol{
    background: url("/images/needHelpGradTall.gif") repeat-x #D7D7D9;
}

.needHelpSpacer{
    height:67px;
    padding-left:15px;
    color:#5B5B5B;
}

.needHelpSpacer *{
}
.needHelpSpacer h1{
    margin-top:10px;
    font-size:24px;
}

.needHelpSpacer span{
    font-size:14px;
}
.testimonials{
    width:auto;
    padding: 0 20px;
}
.testimonials h2 {
    margin: 0;
}
.testimonial{
    margin: 12px auto 0;
    text-align:justify;
    color:#606060;
    font-style:italic;
}

.largeLeftQuote{
    float:left;
    margin-left:-10px;
    margin-top:-10px;
    font-size:28px;
}

.largeRightQuote{
    float:right;
    margin-bottom:-10px;
    margin-right:-10px;
    font-size:28px;
}

.testimonialSpacer{
    width: 150px;
    height: 0px;
    margin:12px auto 0;
    border-top: solid 1px #E1E1E1;
    border-bottom: solid 1px #c6c6c6;
}

.fieldset{
    border:1px solid #D3DCE5;
    margin-top:3px;
}

.fieldsetTop{
    margin-top:0px !important;
    /*the first fieldset does not need any margins*/
}

.fieldsetReview{
    margin:5px 0;
}

.firstFieldset{
}

.legendDiv{
    height:25px;
    width:100%;
    background: url("/images/legendBackground.gif") #F0F1F5 repeat-x;
}

.legendDiv span{
    font-size: 10px;
}

.legend{
    padding-top:5px;
    margin-left:10px;
    color:#5B5B5B;
    font-size:14px;
    font-weight:bold;
}

.fieldsetBody{
    margin: 15px 0;
    background: url("/images/helpFauxBody.gif") repeat-y right;
}

.fieldsetBodyReview{
    background-color:#f2f5fa;
}

.inputColumn{
    margin-left:20px;
    float:left;
    width:300px;
}


.textbox, textarea, select{
    border:1px solid #CAD2DD;
    color:#5b5b5b;
    background-color:#EFF0F4;
}

.textbox{
    height:16px;
    width:145px;
}
.textarea{
    width:100%;
    height:100px;
}




/* Used in donate1 and donate2 */
.inputRow{
    margin-bottom:8px;
}
.select {
    width:147px;
}
.formLabel, .formHelpText{
    font-weight:bold;
    font-size:13px;
    color:#606060;
    display: block
}
.hearAboutUs .formLabel {
    display: inline;
}
.formOptional{
    font-size:10px;
    font-weight: normal;
}


.footer-block{
    display: block;
}


/* Used on all the donation pages*/
.nextRow{
    padding: 15px 0;
    clear: both;
    float: left;
    width: 555px;
}


/* These are used by formsLetters and donate3  */
.tdLabel, .tdValue, .tdLabelSmall{
    padding:4px;
    border: 2px solid #e2ebf4;
}

.tdLabel, .tdLabelSmall{
    text-align:right;
    font-weight:bold;
}

.tdLabelSmall{
    width:85px;
}

.donateThankyou{
    padding: 0 45px;
    margin: 15px auto;
    text-align: left;
    max-width: 591px;
}
.next-step-boxes{
    float: left; 
    width:33.33%; 
    margin-right: 0px;
    text-align: center;
}
.next-step-text{

    margin-bottom: -10px;
    font-size: 20px;
    font-weight: 900;
    float: left;
    width: 30%;
    margin-right: 0px;
    text-align: center;
}
.ct-confirmation-outer{
    /*background-color:#f5be3e;*/ 
    /*width:300px;*/ 
    height:40px;
    margin: 0px auto 0 auto; 
    text-align: center;
}
.ct-confirmation-inner{
    color: #da5127;
    padding:10px 5px 5px 5px; 
    font-size: 23px;
    margin: 0 auto; 
    font-weight: bold;
}
.ct-need-help{
    margin: 0 auto; 
    min-width: 200px; 
    text-align: center; 
    font-size: 16px;
}
.thankyouHeader {
    color: black; 
    font-style: normal; 
    font-size: 20px;
    text-transform: none;
    text-align: center;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 800;
}

/*- - - - - - - - - - - - - - - - - - - - - - */






/*-----------------------------------------------------------------------------------------
           Stuff that only shows up in specific files below this line!! */


/* --------- donate1 ---------- */
.inputIndent {
    margin-left: 75px;
}
/*.thankyouHeader{
  font-size:16px;
}*/
.inputColumnWrapper{
    border-right: 2px solid #EEEFF3;
    float:left;
    width:278px;
}
.inputColumn2 {
    margin-left:50px;
    float:left;
    width:180px;
}

.notesRow{
    padding-left:50px;
    margin-bottom:15px;
    width:450px;
}

/* --------- donate2 ---------- */

#optionalFieldsetWrapper{
    margin-top:30px;
}
.fill{
    width:100%;
}

.gap{
    height:4px;
}
.state{
    width:50px;
}
.zip{
    width:92px;
}
.phone1, .phone2{
    width:30px;
}
.phone3{
    width:45px;
}
.col{
    float:left;
}
.col2{
    float:right;
}
.colPlus{
    float:left;
    padding-left:5px;
}
.sameAsDonorRadio{
    float:left;
    margin-top:8px;
}

.sameAsDonorP{
    float:left;
    margin-left:8px;
    margin-bottom:8px;
    width:270px;
}

.fieldsetHelp{
    width:175px;
    float:right;
    margin-right:20px;
    clear:right;
}

.fieldsetHelpTop{
    float:right;
    margin-right:20px;
    width:175px;
    height:10px;
    background-image: url("/images/fieldsetHelpTop.jpg");
}
.fieldsetHelpExpand {
    display: none;
}

.fieldsetHelpHeader{
    border-bottom:1px solid #d3dce5;
}
.fieldsetHelpCloser {
    display:none;
}

.fieldsetHelpContent p{
    margin-top:5px;
}

.helpHeaderSquared{
    width:100%;
    text-align:center;
    font-weight:bold;
}
.helpPic{
    position:absolute;
    margin-top:-18px;
}
.fieldsetHelpContent{
    padding-left:8px;
    padding-right:8px;
    border-left:1px solid #d3dce5;
    border-right:1px solid #d3dce5;
    text-align:justify;
    background-color:#eff0f4;
}
.fieldsetHelpBottom{
    float:right;
    margin-right:20px;
    margin-bottom:5px;
    width:175px;
    height:10px;
    background-image: url("/images/fieldsetHelpBottom.png");
}
.hearAboutUs .select, .hearAboutUs .textbox{
    float: right;
}
.hearAboutUs .gap {
    clear: both;
}

/* --------- donate3 ---------- */

.fieldsetBodyReview table{
    width:100%;
}

/* --------- formsLetters ---------- */

.confirmWrapper{
    width:100%;
    margin:auto;
    font-size:13px;
}
.mailRow{
    margin-bottom:3px;
}

.mailRow input{
    width:300px;
    border:1px solid black;
}
.mailLableWrapper{
    float: left;
    margin-top: 2px;
    padding-right:2px;
    text-align: right;
    width: 50px;
}
#noTitlesBody{
    width:300px;
    height:60px;
    margin-left:52px;
    color:#000;
    background-color:#fff;
    border: 1px solid #000;
}
#noTitlesSend{
    margin-left:52px;
}
#letter{
    width:600px;
    margin:auto;
}
.donate4 #letter {
    margin-top: 20px;
}
.solo{
    display:none;
}
.nonSolo{
    display:block;
}

/* Consider TRASHING */
/*
.headerBar{
  height:40px;
  background: url("/images/headerLinksGrad.png") white repeat-x;
}

.headerLinks{
  margin-top:12px;
  margin-right:12px;
  float:right;
  font-size:12px;
  color:#5D5D5D;
}

.headerLinks a{
  text-decoration:none;
  margin-left:3px;
  margin-right:3px;
  font-weight:bold;
  color:#5D5D5D;
}

.headerLinks a:hover{
  text-decoration:underline;
}

.headerSocial{
  width:86px;
  height:16px;
  margin: 12px;
  float:right;
}
.legendNew{
  height:30px;
  width:553px;
  background-color: blue;
}
#donateNow{
  width:153px;
  height:76px;
  border:none;
  background-image: url("/images/donateNowOff.png");
  display:block;
  float:left;
}
.back{
  margin-top:5px;
  float:left;
}
.donateFooter{
  margin-top:50px;
  text-align:center;
}
.monkeys{
  display:inline-block;
}
.footerBbb{
  margin-right:50px;
  margin-top:20px;
  float:right;
}
.hearAboutUsLabel{
  height:20px;
}

.hearAboutUsInputs{
  width:200px;
  float:left;
  text-align: center;
}
#hearAboutUsButton{
  margin-top:15px;
  margin-left: 15px;
}

.hearAboutUsLabels{
  width:140px;
  float:left;
}
.hearAboutUsLeft{
  width:50%;
  float:left;
}

.hearAboutUsRight{
  width:50%;
  float:right;
}
.inputColumnSep{
  float:left;
  margin-top:30px;
  margin-left:42px;
  margin-right:30px;
  width:2px;
  height:175px;
}*/

.noBold{
    font-weight: normal;
}

.formColumn {
    max-width: 555px;
}
.truckBackSize {
    width: 462px;
    padding-right: 93px; /* width of this portion of the step_all.png bg*/ 
    position: relative;    
    background-image: url("/images/step_all.png");
    background-position: right -82px;
    background-repeat: no-repeat;
}
.truckBackSize .filler{
    background: url(/images/step_all.png) repeat-x left -205px transparent;
    display: block;
    overflow: hidden;
}
.progressContainer {
    width: 100%;
}
.truckBackSize, .donate1 .truckBackSize, .donate2 .truckBackSize, .donate3 .truckBackSize {
    background-image: url(/images/step_all.png);
    background-repeat: no-repeat;
    background-position: right -82px;
}
.progressText{
    float: left;
    margin: 0;
    display: block;
    background-image: url(/images/step_all.png);
    background-repeat: no-repeat;
    background-position: right 0;
    height: 41px;
    position: relative;
    overflow: hidden;
}
.progressText a, .progressText span {
    padding: 5px 0 5px 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    display: block;
}
.filler .progressText {
    width: 48%;
}
.donate1 .progressText1, .donate2 .progressText2, .donate3 .progressText3{
    margin: 0;
}
.progressText {
    width: 33.3%
}
.donate2 .progressText3 span {
    width: 90%;
}
.donate1 .progressText2,.donate1 .progressText3, .donate2 .progressText3 {
    background-position: right -41px;
}
.donate2 .progressText1, .donate3 .progressText1, .donate3 .progressText2 {
    background-position: right -123px;
}


:not(.donate4) #contWrap:first-line, :not(.donate4) #canWrap:first-line {
    font-size: 24px;
}

#isDocumentNarrow {position: fixed; display: none;}

/*.donate4 #myContent {
    margin: 0 auto 0;
    width: 100%;
    max-width: 750px;
}*/
/*.donate4 #pageContainer {
    background-color: #fff;
}*/
.donate4 #header {
/*    background-color: transparent;*/
    /*    display: inline-block;*/
    width: 100%;
    margin: 0 auto;
    max-width: 930px;
}

.donate4 #content {
    padding-bottom: 30px;
}
.donate1 h2{
    font-size: 1.3em;
    text-align: center;
    margin-top: 10px;
}

@media all and (max-width: 930px) {
    .donate4 #container{
        margin: 0 !important;
        max-width:100%;
        /*padding:0 0px !Important;*/
        width:auto;
    }

    .donate4 #header{
        width: 100%;
        max-width: 100%;
        padding:10px 0;
    }
    .donate4 #mycontent{
        width: 100%;
    }
    .donate4 .next-step-text{
        width:33.33%;
    }
    .mobile-help{
        display: block !important;
    }
    #theForm > div.formColumn.donate-subsection > div:nth-child(3) > div.legendDiv > span > img{
        display: none;
    }


}


@media all and (max-width: 899px) {
   .donate4 #container, #myContent{
        max-width:100%;
        padding-top:0px !Important;
        margin-top:0px;
    }
    #charityURLText, .pipeSep{
        display: none;
    }
}    

@media all and (max-width: 630px) {

   .donate4 .next-step-boxes{
        float: none; 
        width:100%; 
        margin: 0 auto;
        text-align: center;
    }
  .donate4 .next-step-text{
        float: none;
        margin: 0 auto -20px auto;
    }
   .donate4 .ct-need-help{
        margin: 0 auto 10px auto; 

    }
}
@media all and (max-width: 600px) {
    .donate4 .next-step-boxes{
        float: none; 
        width:100%; 
        margin: 0 auto;
        text-align: center;
    }
    .donate4 .next-step-text{
        float: none;
        margin: 0 auto -20px auto;
    }
    .donate4 .ct-need-help{
        margin: 0 auto 10px auto; 
    }
}