/* border: 1px solid red; */
hr { border-top: 2px dotted #D5D5D3; margin-top: 10px;height:0;} 
input[type="checkbox"] {float:left;margin:10px 0 2px 0px}

label {font-weight:normal;font-size:auto;font: inherit;float:left;vertical-align:middle;text-align:right;display:block;margin:.4em .5em 0 .5em; }
input[type="text"],textarea { margin:3px 3px 3px 3px;}
label.error {text-align:left}
.ui-state-error, .ui-state-highlight {margin-bottom:10px;}
select {padding:5px 3px 5px 3px;margin:4px 0 4px 0;}

body.paddingtop10{padding-top:10px} /* Required extra spacing below our top banner */
body.paddingtop50,body.social-banner{padding-top:50px} /* social-banner can be removed on next full release. 10-7-13 */

#donation-top-banner h1 {font-family: Verdana,Arial,Helvetica;font-size: 2em;line-height: 1.4; margin-bottom: 0;font-weight:normal}

/*
custom classes
*/
div > .payment-icon {
    float: left;
    margin-bottom: 5px;
    margin-right: 3px;
}
div > .visa {
    margin-left: 8px;
}
.container-donation-fund-item > input {float:left}

.frequency_prefix{width:15px;float:left;}
.frequency_suffix {width:190px;text-align:left}
#_recurringfrequencyqty {width:25px;float:left}
#DonationFundAggregate{clear:both}

.container-frequency-header {
border-bottom: 1px solid #BCBCBA;
margin:5px 10px 10px 0;
padding:4px
}
input[type="text"] {
padding:8px 3px 7px 3px;
}

.container-donation-fund-item,.container-classic-radiobutton.float:after,#frequency_qty:after,#frequency_qty > label:after{
    content:"";
    clear:both;
    display:block;
}

/* http://stackoverflow.com/questions/4604005/how-to-make-a-div-grow-in-height-while-having-floats-inside 
   using the :after with float:left items will hold the height of the outer div. PRH
*/
#container_group_donation:after,#container_group_recurring:after,#frequency_qty:after {
    margin:0 0 15px 0;
	content:"";
    clear:both;
    display:block;
	} /* Holds Frequency Radio buttons */



.container-classic-radiobutton > #_donationother {float:left;margin:.5em .4em 0 0}


.container-classic-radiobutton.floatleft > input[type="radio"] {vertical-align:middle;margin: .1em 0 0 0;}
 
.register-item-description {color: #666; font-size: 1.2em; font-weight: 600;border-bottom: 1px solid #D5D5D3;;margin-bottom:10px;}
.register-item-disclaimer {color: #666; font-size: .9em; overflow-x: hidden; overflow-y: auto; max-height:150px;margin:5px 10px 5px 10px; }
.register-item-captcha { padding-top: 20px; }

.zcontainer-captcha { margin-left: 110px;}

.funds-over-error {color:#CD0A0A} 

#frequency_qty {clear:both;padding:10px 0 0 0;}

select > option {padding-bottom:3px;margin-bottom:3px;}

.container-image-donation-creditcard {
	background-image: url('https://www.trailblz.info/common/images/cvv_code108x156.png');
    background-repeat: no-repeat;
    width:108px;
    height:156px;
}

/* (Default View - Full Screen) Phase #1
================================================== */
#button-validate,#button-validate-fake {width:425px;margin:5px 0 10px 10px}
input[type="text"],textarea,label.error {width:310px;}
input[type="checkbox"] + label {width:280px;text-align:left;} /* Checkbox's second try follow this format */
select {width:318px;}
#lawnsign_note {width:415px}
.donationfundamount {width:55px !important}
label {width:95px} /* css label 105px smaller 85px */
label.disclaimer {width:410px !important;text-align:left;font-size:.8em}
#frequency_type,#fund_name,#lawnsign_not {width:430px}


.register-card-month {width:80px ; float:left;}
.register-card-year {width:80px;margin:4px 0 4px 0 ;float:left;}
.register-card-cvv {width:50px !important; }
.register-item-label.card-year {width:5px;} 
.register-item-label.card-cvv {margin:0.4em 1em 0 1em;width:25px } /* label good */

.container_group_donation {margin-left:20px}
.container-donation-fund-item > label {width:345px;text-align: left;}

.container-classic-radiobutton {height:25px;}
.container-classic-radiobutton > label{ width:415px;text-align:left; margin: 0;float:right} /* This is used when descriptions are added to the donation amounts */

.container-classic-radiobutton.floatleft > label {width:100px;display:inline-block;text-align: left;float:none;vertical-align:middle;margin: .3em 0 0 .4em;}
.container-classic-radiobutton.floatleft {
float:left;
width:125px; /* 130px will give you two columns of buttons on smaller modes */
margin: .2em;
height:25px;
display: table-cell;
vertical-align: middle;
}


/* #Tablet (Portrait) Phase #2
================================================== */

    /* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {
#button-validate,#button-validate-fake {width:320px;margin:5px 0 10px 10px}
input[type="text"],textarea,label.error { width:215px; }
input[type="checkbox"] + label {width:180px;} /* Checkbox's follow this format(6-10-16 was 190px) */
select { width:223px; }
#lawnsign_note {width:320px}
.donationfundamount {width:55px !important}
label.disclaimer {width:310px !important;}
#frequency_type,#fund_name {width:330px}

.register-item-label.card-year {width:0px;}
.xregister-item-label.card-cvv {margin-left:14px;width:26px !important;} /* label good */

.register-item-label.card-year {width:8px;}
.register-item-label.card-cvv {margin-left:60px;width:26px;} /* label */
.register-card-year { width:105px; }
.register-card-month { width:105px;margin-right:0px}
.register-card-cvv {width:225px !important; }

.container-donation-fund-item > label {width:250px;}
.container-classic-radiobutton > label{ width:320px;}

.container-classic-radiobutton.floatleft {float:left; width:150px; }
.container-classic-radiobutton.floatleft > label {width:120px;}
} /* end 768px */



/*  #Mobile (Portrait) Phase #4
================================================== */

    /* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
#button-validate,#button-validate-fake {width:260px;margin:5px 0 10px 10px}
input[type="text"],textarea,label.error { width:155px; }
input[type="checkbox"] + label {width:120px;} /* Checkbox's follow this format (6-10-16 was 130px)  */
select { width:163px; }
.donationfundamount {width:55px !important}
#lawnsign_note {width:260px}
label.disclaimer {width:240px !important;}
#frequency_type,#fund_name {width:273px}

.register-item-label.card-year {width:85px;}
.register-item-label.card-cvv {margin-left:60px;width:26px;} /* label */
.register-card-year { width:173px; }
.register-card-month { width:173px;margin-right:0px}
.register-card-cvv {width:165px !important; }

.container-donation-fund-item > label {width:185px;}
.container-classic-radiobutton > label{ width:255px;}

.container-classic-radiobutton.floatleft {float:left; width:270px; }
.container-classic-radiobutton.floatleft > label {width:240px;}
} /* end 320px */

/* #Mobile (Landscape) 2 columns narrow Phase #3
================================================== */

    /* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {
#button-validate,#button-validate-fake {width:375px;margin:5px 0 10px 10px}
input[type="text"],textarea,label.error { width:275px; }
input[type="checkbox"] + label {width:250px;} /* Checkbox's follow this format */
select { width:283px; }
.donationfundamount {width:55px !important}
#lawnsign_note {width:375px}
label.disclaimer {width:360px !important;}
#frequency_type,#fund_name {width:390px}

.register-item-label.card-year {width:10px;}
.register-item-label.card-cvv {margin-left:60px;width:25px;} /* label */
.register-card-month { width:125px; }
.register-card-year { width:125px; }
.register-card-cvv { width:115px !important; }


.container-donation-fund-item > label {width:305px;}
.container-classic-radiobutton > label{ width:375px;}

.container-classic-radiobutton.floatleft {float:left; width:190px; }
.container-classic-radiobutton.floatleft > label {width:160px;}
} /* end 480px */