/* border: 1px solid red; 
http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block
*/


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}
#container_radio_payment {margin:10px 0}



/*
v2x Group_donation to replace _Amounthidden 
reference   : http://jsfiddle.net/496c9/
not-selector: http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector
*/
ul#group_donation {list-style-type: none;margin: 3px;padding:0px;display: inline-block;}
ul#group_donation > li { float:left; }
ul#group_donation > li > input[type="radio"] { display: none; }
ul#group_donation > li > input[type="radio"] + label {
cursor: pointer;
margin: 0 5% 1% 0;
text-align: left;
border-radius: 2px;
font-size: 1.1em;
border: 1px solid #CCCCCC;
padding: 7px 0 2px 5px;
height:24px;
width:100%;

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display:block;

}

ul#group_donation > li > input[type="radio"] + label { 
background: url("https://www.trailblz.info/common/images/checkmark-off-24x24.png") no-repeat scroll 5px 5px #fff;
padding-left:34px;
margin-right:10px;
}
ul#group_donation > li > input[type="radio"]:checked + label {   
background: url("https://www.trailblz.info/common/images/checkmark-on-24x24.png") no-repeat scroll 5px 5px #E1F4C3;
padding-left:34px;
}
ul#group_donation > li > input[type="radio"] + label > input[type="text"] { 
border: 1px solid #fff;
font-size: 1em;
color:#000;
width:94%;
padding:0;
}
ul#group_donation > li! > input[type="radio"] + label > input[type="text"] { 
margin: 0 10px 0 0 !important;
}
ul#group_donation > li > input[type="radio"] + label > input[type="text"] { 
margin: -6px 0 0 0 !important;
padding: 4px 3px 2px;
}

ul#group_donation > li > input[type="radio"]:checked + label > input[type="text"] { 
    border: 1px solid #CCCCCC !important;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none; 
	}
#otheramount {
    border: 1px solid #fff;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important; 
	font-size: 1.1em !important;
	margin: 2px !important;
}

/*
custom classes
*/
div > .payment-icon {
    float: left;
    margin:10px 4px 5px 0;
}

.register-donormatch-label {margin-top:-5px }
#container_donormatch_other {margin-top:15px }

.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
{
max-height:175px;
overflow-y:auto;
border:1px solid #ccc;
border-radius:2px;
}
.container-donation-fund-item,.container-classic-radiobutton.float:after,#frequency_qty:after,#frequency_qty > label:after{
    content:"";
    clear:both;
    display:block;
}



#container_group_payment {
xborder-bottom: 1px solid rgba(34, 34, 34, 0.12);
xmargin-bottom: 12px;
xpadding-bottom: 12px;
}

/* 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: auto; 
	overflow-y: auto; 
	max-height:200px;
	max-width: 415px; 
	margin:5px 10px 5px 10px;
	/* word-break:break-all; this fixes long url or text remove 6-28-16 */
	-webkit-overflow-scrolling: touch /* scrollbars iphone etc */
	}

.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
================================================== */

input[type="submit"],input[type="button"] {width:320px;margin:5px 5px 10px 10px; float:right}



input[type="text"],textarea,label.error {width:310px;} /* was width:320px; */


input[type="checkbox"] + label {width:400px;text-align:left;} /* Checkbox's second try follow this format */
input[type="checkbox"] + label#emaillistflaglabel {width:285px;margin-left:113px;}
input[type="radio"] + label {width:285px;text-align:left;} /* Checkbox's second try follow this format */

select {width:318px;}
#lawnsign_note {width:415px}
.donationfundamount {width:55px !important}

label {width:100px;} /* 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:60px !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:335px;text-align: left;}

/* This is used when descriptions are added to the donation amounts */
ul#group_donation.group-donation-include-description > li > input[type="radio"] + label { width:390px; }

.container-classic-radiobutton {height:25px;}
.xcontainer-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:165px;display:inline-block;text-align: left;float:left;vertical-align:middle;margin: .3em 0 0 .4em;}
.container-classic-radiobutton.floatleft {
float:left;
width:165px; /* 130px will give you two columns of buttons on smaller modes */
margin: .2em;
height:25px;
display: table-cell;
vertical-align: middle;
}
ul#group_donation > li > input[type="radio"] + label {width:175px;margin-right: 5px;}
/* #Tablet (Portrait) Phase #2
================================================== */

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

@media only screen and (min-width: 768px) and (max-width: 959px) {
input[type="submit"],input[type="button"] {width:225px;margin:5px 5px 10px 10px}
input[type="text"],textarea,label.error { width:215px; }
input[type="checkbox"] + label {width:310px;} /* Checkbox's follow this format */
input[type="checkbox"] + label#emaillistflaglabel { width:200px;margin-left:110; }
input[type="radio"] + label {width:310px} /* Checkbox's second try follow this format */
select { width:223px; }
#lawnsign_note {width:320px}
.donationfundamount {width:55px !important}
label.disclaimer {width:310px !important;}
#frequency_type,#fund_name {width:330px}

.register-item-disclaimer { max-width: 320px; }

.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:74px;width:26px;} /* label */
.register-card-year { width:100px; }
.register-card-month { width:100px;margin-right:0px}
.register-card-cvv {width:214px !important; }


.container-donation-fund-item > label {width:240px;}


/* This is used when descriptions are added to the donation amounts */
ul#group_donation.group-donation-include-description > li > input[type="radio"] + label { width:295px; }

.container-classic-radiobutton > label{ width:320px;}

.container-classic-radiobutton.floatleft {float:left; width:150px; }
.container-classic-radiobutton.floatleft > label {width:150px;}
ul#group_donation > li > input[type="radio"] + label {width:128px;margin-right: 4px;}
} /* end 768px */



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

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

@media only screen and (max-width: 767px) {
input[type="submit"],input[type="button"] {width:270px;margin:5px 5px 10px 5px}
input[type="text"],textarea,label.error { width:150px; }
input[type="checkbox"] + label {width:240px;} /* Checkbox's follow this format */
input[type="checkbox"] + label#emaillistflaglabel { width:240px;margin-left:0; }
input[type="radio"] + label {width:240px} /* Checkbox's second try follow this format */
select { width:158px; }
.donationfundamount {width:55px !important}
#lawnsign_note {width:260px}
label.disclaimer {width:240px !important;}
#frequency_type,#fund_name {width:273px}

.register-item-disclaimer { max-width: 255px; }

.register-item-label.card-year {width:100px;}
.register-item-label.card-cvv {width:85px;} /* label */
.register-card-year { width:158px; }
.register-card-month { width:158px;margin-right:0px}
.register-card-cvv {width:150px !important; }

.container-donation-fund-item > label {width:175px;}

.container-classic-radiobutton > label{ width:255px;}
.container-classic-radiobutton.floatleft {float:left; width:270px; }
.container-classic-radiobutton.floatleft > label {width:240px;}

ul#group_donation > li > input[type="radio"] + label {width:235px;margin-right: 1px;}
/* This is used when descriptions are added to the donation amounts */
ul#group_donation.group-donation-include-description > li > input[type="radio"] + label { width:235px; }
} /* 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) {
input[type="submit"],input[type="button"] {width:285px;margin:5px 0px 10px 10px}
input[type="text"],textarea,label.error { width:275px; }
input[type="checkbox"] + label {width:355px;} /* Checkbox's follow this format */
input[type="checkbox"] + label#emaillistflaglabel { width:250px;margin-left:113px; }
input[type="radio"] + label {width:355px} /* Checkbox's second try 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-disclaimer { max-width: 375px; }
.register-item-label.card-year {width:10px;}
.register-item-label.card-cvv {width:85px;} /* label */
.register-card-month { width:125px; }
.register-card-year { width:125px; }
.register-card-cvv { width:115px !important; }


.container-donation-fund-item > label {width:295px;}

/* This is used when descriptions are added to the donation amounts */
ul#group_donation.group-donation-include-description > li > input[type="radio"] + label { width:350px; }

.container-classic-radiobutton > label{ width:375px;}

.container-classic-radiobutton.floatleft {float:left; width:190px; }
.container-classic-radiobutton.floatleft > label {width:160px;}
ul#group_donation > li > input[type="radio"] + label {width:155px;margin-right: 5px;}
} /* end 480px */