/* Custom Styles */
#UserForm{background:#f1f5f8;border-radius:5px;width:94%;padding:1% 3%;margin:10px 0 2% 0;border-bottom:0;position:relative;}
#UserForm #UserForm-Inner{width:100%;padding:0%;margin:0;background:none;}

#UserForm {
	color:#666666;
	font-size: 110%;
}
#UserForm p {
	color:#666666;
}
#UserForm h3{color:#333333;}
#UserForm fieldset legend {
	color:#333333;
	font-size:100%;
	font-weight: bold;
	margin: 0 0;
	display: block;
	padding: 20px 0 10px;
}
#UserForm h4{color:#666666;font-size:110%;}
#UserForm label{
	line-height: 2em;
}

#UserForm .FormInput input[type="text"], #UserForm .FormInput input[type="password"], #UserForm .FormInput input[type="email"], #UserForm .FormInput input[type="number"], #UserForm .FormInput select, #donateOtherAmount{ 
	-webkit-appearance: none;
	border:1px solid #e5eaed;
	border-collapse:collapse;
	background:#fff;
	color:#999;
	border-radius:6px;
	padding:8px;
	width:100%;
	font-size: 100%;
}
#UserForm .FormFields input[type="submit"]{
	border:none; border-collapse:collapse;
	background:rgba(0, 149, 214, 1);
	color: #fff;
	font-size:140%;
	font-weight:bold;
	border-radius:5px;
	padding:2% 10% 2% 6%;
	background-image: url('/images/templates/icons/right-arrow-white-18x14.png');
	background-repeat: no-repeat;
	background-position: right;
	background-position-x: 85%;
}
#UserForm .FormFields input[type="submit"]:hover{
	background:#F08B33;
	background-image: url('/images/templates/icons/right-arrow-white-18x14.png');
	background-repeat: no-repeat;
	background-position: right;
	background-position-x: 85%;
}

.donationTypeRadioBox{padding:2%;width:28%;float:left;margin-right:1%;border-radius:5px;background:#fe9b37;position:relative;}
	.donationTypeRadioBox:hover{background:#ffcf00;}
.donationTypeRadioBox label{font-size:120%;font-weight:bold;}
.donationTypeInfo{width:100%;margin-top:5%;padding-top:5%;border-top:1px solid #D4792A;font-size:80%;}
div.jquery-radiobutton-wrapper {
    height: 21px;
   /* position: absolute;
    left: 17px;
    top: 8px;
    z-index: 50;*/
    width: 21px;
	float:left;
	margin-right:5px;
}
div.jquery-radiobutton-wrapper a.jquery-radiobutton {
    background: url("/images/templates/buttons/radiobutton.png") repeat scroll 0 0 transparent;
    cursor: default;
    display: block;
    height: 21px;
    outline: medium none;
    width: 21px;
}
div.jquery-radiobutton-wrapper a.jquery-radiobutton-on {
    background-position: 21px 0;
}

.Donationtype{
	padding:0px;
	width:47%;
	float:left;
	margin-right:1%;
	border: 1px solid #e8edf0;
	border-radius:5px;
	color: #00447e;
	background-color:#ffffff;
	position:relative;
	font-size:90%;
	box-sizing: border-box;
	background-position-x: 10px;
	background-position-y: 10px;
	background-repeat: no-repeat;
}
	.Donationtype:hover{
		background-color:#ffcf00;
		border: 1px solid #00447e;
	}
	#UserForm .Donationtype label {
		display: block;
		padding: 20px 1% 4% 88px;
	}
	.Donationtype b {
		font-size: 150%;
	}
	.Donationtype .exampletext {
		font-size: 70%;
		color: #333;
		clear: both;
		text-align: center;
		padding-top: 20px;
		line-height: 1.2em;
	}
	.Donationtype:hover p{
	}
	#RegularDonation {
		background-image: url('/images/donor/icon-calendar-67x68.png');
		float: right;
	}
	#SingleDonation {
		background-image: url('/images/donor/icon-heart-67x68.png');
		float: left;
	}
#RegularDonationFields fieldset {
	display: inline-block;
}
	
.DonationAmountBox{
	padding:3% 1% 1% 1%;
	width:19%;
	float:left;
	margin-right:1%;
	border: 1px solid #e8edf0;
	border-radius:5px;
	color: #00447e;
	background-color:#ffffff;
	position:relative;
	font-size:120%;
	box-sizing: border-box;
	min-height: 160px;
	background-position-x: 10px;
	background-position-y: 10px;
	background-repeat: no-repeat;
}
	.DonationAmountBox:hover{
		background-color:#ffcf00;
		border: 1px solid #00447e;
	}
	.DonationAmountBox b {
		font-size: 150%;
		padding-left: 60px;
	}
	.DonationAmountBox .exampletext {
		font-size: 70%;
		color: #333;
		clear: both;
		text-align: center;
		padding-top: 20px;
		line-height: 1.2em;
	}
	.DonationAmountBox:hover .exampletext{
	}
	.DonationOtherBox{
		width:19%;
		margin-right: 0;
	}
.DonationAmountBox .greentick, .Donationtype .greentick {
	background: url('/images/donor/green-tick.png') no-repeat;
	width: 27px;
	height: 27px;
	position: absolute;
	top: -5px;
	right: -3px;
	display:none;
}
.selectedBox {
	border: 1px solid rgba(0, 199, 52, 1);
}
#DonationAmount250Wrapper {
	background-image: url('/images/donor/icon-calendar-51x48.png');
}
#DonationAmount100Wrapper {
	background-image: url('/images/donor/icon-flasks-51x48.png');
}
#DonationAmount70Wrapper {
	background-image: url('/images/donor/icon-phone-51x48.png');
}
#DonationAmount45Wrapper {
	background-image: url('/images/donor/icon-clipboard-51x48.png');
}
#DonationAmountOther {
	text-align: center;
}
#DonationAmountOther b {
	padding-left: 0;
}

#donateAmountOtherValue{
	clear: both;
}
#donateOtherAmount { /* input */
	width: 60%;
	padding: 8px;
}

#AccountInformation {
	width: 100%;
}
	.twoColumn{
		box-sizing: border-box;
		width: 50%;
		padding-right: 3%;
		float: left;
	}
	.twoColumn:nth-child(2){
		padding-right: 0;
		padding-left: 3%;
	}
	.twoColumn .FormFields, #OrganisationTR .FormFields {
		width: 95%;
	}
		.twoColumn .FormLabel, .twoColumn .FormInput {
			width: 100%;
		}

#PrivacyCollectionWrapper, #KeepUpdatedWrapper {
	float: left;
	display: inline-block;
	width: 10%;
}
#UserForm #PrivacyCollectionLabel, #UserForm #KeepUpdatedLabel {
	float: left;
	display: inline-block;
	width: 80%;
	line-height: 1em;
}
		
/* Validation */
#UserForm .FormInput input[type='text'].wrong, #UserForm .FormInput select.wrong {
	border: 1px solid red !important;
	background: #fff url('/images/templates/icons/16x15_warning_red.gif');
	background-repeat: no-repeat;
	background-position: right;
	background-position-x: 92%;
}
#UserForm .FormInput  input[type='text'].correct, #UserForm .FormInput select.correct {
	border: 1px solid #e5eaed !important;
	background: #fff url('/images/templates/icons/13x13_tick_green.gif');
	background-repeat: no-repeat;
	background-position: right;
	background-position-x: 92%;
}
#UserForm .FormInput input[type='text'].active, #UserForm .FormInput select.active {
	border: 1px solid #0096d7 !important;
}
.backButton {
	position: relative;
	top: 8px;
}

/*ToolTip*/
#AmountInfo{}
#AmountInfo p{color:#000;position:absolute;top:40px;left:0;background:red;padding:1%;width:150px;background:#fe9b37;border-radius:10px;border-top-left-radius:0;font-size:90%;/*opacity:0.85;filter:alpha(opacity=85);*/display:none;}


/*Custom - Dynamic Dollar Handles*/
.DollarHandleWrapper{
	width:100%;
	margin:0;
	padding:0;
	display:inline-block;
}
	#DollarHandleFiveWrapper{} /*Default*/
	#DollarHandleFourWrapper .DonationAmountBox {width:24%;}
		#donateForm .DollarHandleFiveOverride .DonationAmountBox{width:19%;}
		
		#DollarHandleFourWrapper #DonationAmount15Wrapper,#DollarHandleFiveWrapper #DonationAmount15Wrapper { background-image: url('/images/donor/TA_icon_school.png'); }
		#DollarHandleFourWrapper #DonationAmount20Wrapper,#DollarHandleFiveWrapper #DonationAmount20Wrapper { background-image: url('/images/donor/icon-clipboard-51x48.png'); }
		#DollarHandleFourWrapper #DonationAmount25Wrapper,#DollarHandleFiveWrapper #DonationAmount25Wrapper { background-image: url('/images/donor/TA_icon_paper-booklets.png'); }
		#DollarHandleFourWrapper #DonationAmount35Wrapper,#DollarHandleFiveWrapper #DonationAmount35Wrapper { background-image: url('/images/donor/TA_icon_mouse-pointer.png'); }
		#DollarHandleFourWrapper #DonationAmount45Wrapper { background-image: url('/images/donor/TA_icon_dna.png'); }
		#DollarHandleFourWrapper #DonationAmount50Wrapper { background-image: url('/images/donor/TA_icon_umbrella.png'); }
		#DollarHandleFourWrapper #DonationAmount80Wrapper { background-image: url('/images/donor/TA_icon_magnifying-glass.png'); }
		#DollarHandleFourWrapper #DonationAmount100Wrapper { background-image: url('/images/donor/TA_icon_phone.png'); }
		#DollarHandleFourWrapper #DonationAmount150Wrapper { background-image: url('/images/donor/TA_icon_piggy-bank.png'); }
		#DollarHandleFourWrapper #DonationAmount200Wrapper { background-image: url('/images/donor/TA_icon_speech-bubbles.png'); }
		#DollarHandleFourWrapper #DonationAmount250Wrapper { background-image: url('/images/donor/TA_icon_phone.png'); }
		#DollarHandleFourWrapper #DonationAmount300Wrapper { background-image: url('/images/donor/TA_icon_house.png'); }
		#DollarHandleFourWrapper #DonationAmount350Wrapper { background-image: url('/images/donor/TA_icon_wig.png'); }
		#DollarHandleFourWrapper #DonationAmount400Wrapper { background-image: url('/images/donor/TA_icon_phone.png'); }
		#DollarHandleFourWrapper #DonationAmount500Wrapper { background-image: url('/images/donor/TA_icon_open-book.png'); }
		#DollarHandleFourWrapper #DonationAmount750Wrapper { background-image: url('/images/donor/TA_icon_stethoscope.png'); }
		#DollarHandleFourWrapper #DonationAmount1000Wrapper { background-image: url('/images/donor/TA_icon_multiple-books.png'); }
		#DollarHandleFourWrapper #DonationAmount1250Wrapper { background-image: url('/images/donor/TA_icon_legal-doc.png'); }
		#DollarHandleFourWrapper #DonationAmount1500Wrapper { background-image: url('/images/donor/TA_icon_beakers.png'); }
		#DollarHandleFourWrapper #DonationAmount1750Wrapper { background-image: url('/images/donor/TA_icon_microscope.png'); }
		#DollarHandleFourWrapper #DonationAmount2000Wrapper { background-image: url('/images/donor/TA_icon_speech-bubble.png'); }
		#DollarHandleFourWrapper #DonationAmount2250Wrapper { background-image: url('/images/donor/TA_icon_computer-mouse.png'); }
		#DollarHandleFourWrapper #DonationAmount2500Wrapper { background-image: url('/images/donor/TA_icon_skateboarder.png'); }
		#DollarHandleFourWrapper #DonationAmount3000Wrapper { background-image: url('/images/donor/TA_icon_paper-booklets.png'); }
		#DollarHandleFourWrapper #DonationAmount4000Wrapper { background-image: url('/images/donor/TA_icon_mouse-pointer.png'); }
		#DollarHandleFourWrapper #DonationAmount5000Wrapper { background-image: url('/images/donor/TA_icon_beakers.png'); }

@media only screen and (max-width: 1000px) {
	.Donationtype p {
		line-height: 1.2em;
	}
	.DonationAmountBox {
		min-height: 200px;
		background-size: 30%;
		padding: 1.5% 1% 1% 1%;
	}
	.DonationAmountBox b {
		padding-left: 35%;
		font-size: 120%;
	}
	.FormFields {
		
	}
}
@media only screen and (max-width: 700px) {
	.DonationAmountBox {
		min-height: auto;
		height: auto;
		width: 100%;
		background-size: 8%;
	}
		#DollarHandleFourWrapper .DonationAmountBox {width:100%;}
		#donateForm .DollarHandleFiveOverride .DonationAmountBox{width:100%;}
	.DonationAmountBox b {
		display: inline-block;
		float: left;
		width: 30%;
		box-sizing: border-box;
		padding-left: 10%;
	}
	.DonationOtherBox{
		padding-left: 10%;
	}
	#DonationAmountOther br {
		display: none;
	}
	#donateAmountOtherValue{
		clear: none;
		float: left;
		margin-left: 0;
		width: 50%;
	}
	.DonationAmountBox .exampletext {
		clear: none;
		text-align: left;
		line-height: 1.5em;
		display: inline-block;
		padding-top: 0px;
		font-weight: normal;
		width: 70%;
		float: left;
	}
	.twoColumn, .twoColumn:nth-child(2) {
		width: 100%;
		padding: 0px;
	}
	#UserForm .FormFields input[type="submit"]{
		background-image: none;
		padding: 2% 10%;
		width: 100%;
	}
	#UserForm .FormFields input[type="submit"]:hover{
		background-image: none;
	}
}
@media only screen and (max-width: 480px) {
	.Donationtype {
		width: 100%;
		min-height: 90px;
	}
	#RegularDonation {
		float: left;
		margin-top: 10px;
	}
}