body {
	background-color: #f6f6f6;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-family: "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	text-align: center;
}

p {
	font-weight: 600;
	padding: 0;
	margin: 0;
}

h1 {
	padding: 0 0 0 0;
	margin: 0;
	text-decoration: none;
	font-size: 1.8em;
	font-weight: 600;
}

h2 {
	color: #000000;
	padding: 0 0 0 5px;
	font-weight: 400;
	border-bottom: #E5E5E5 1px solid;
}

h3 {
	padding-left: 20px;
	color: #666666;
	text-decoration: none;
	font-weight: normal;
	font-size: 0.95em;
}

a:link {
	color: #cc0000;
	text-decoration: none;
}

a:active {
	color: #cc0000;
	text-decoration: none;
}

a:visited {
	color: #cc0000;
	text-decoration: none;
}

label {
		margin: 0 0 5px 0;
		display: inline-block;
		width: 50%;
	}
	
input, select, textarea, button {
	font-family:inherit;
	font-size: 1em;
	color: #000000;
	background-color: #eeeeee;
	text-align: left;
	padding: 4px;
	border: #6699cc 1px solid;
	border-radius: 3px;
	max-width: 240px;
}

input {
	margin: 0 0 5px 0;
	display: inline-block;
	width: auto;
}

input[type="radio"] {
	vertical-align: top;
}

input[type="checkbox"] {
	width: 25px;
	height: 25px;
	vertical-align: middle;
}

input[type="radio"] {
	width: 25px;
	height: 25px;
	margin-left: 0;
	vertical-align: middle;
}

input[type="submit"] {
	color: #FFFFFF;
	margin: 5px 5px 5px 0;
	background-color: #666666;
	border-radius: 4px;
	font-size: 1.0em;
	padding: 5px;
	font-weight: 400;
	text-align: center;
}

input[readonly="readonly"] {
	border: 0;
	background-color: #FFF;
}

select {
	margin: 0 0 5px 0;
	display: inline-block;
	width: 23%;
}

select + select {
	width: 23%;
}

select + input {
	width: 23%;
}

select#country, select#teltype, select#teltype2, #purchaselist_id, select#payfreq {
	width: auto;
}


.txfieldright {
	font-size: 0.7em;
	font-weight: 500;
	padding: 10px 20px 10px 10px;
	text-align: right;
}

#banner {
	background-color: #FFF;
	width: 800px;
	border: #E5E5E5 1px solid;
	border-bottom: 0;
	padding: 10px;
	text-align: left;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	min-height: 120px;
}

#imagebox {
	float: right;
	text-align: center;
}

#imagebox img {
	max-width: 300px;
}

#bannerImg {
	max-width: 100%;
}

.outercontainer {
	width: 800px;
	margin: auto;
	border: #E5E5E5 1px solid;
	border-top: 0;
	padding: 10px;
	background-color: #FFF;
	margin-bottom: 10px;
	margin-top: 0;
	text-align: center;
}

#container, #errorbox {
	text-align: left;
}

.errormsg {
	display: inline-block;
	margin-left: 4px;
	color: #FF0000;
	font-weight: normal;
}

.error {
	color: #FF0000;
	font-weight: 600;
}

.disabled {
	opacity: 0.5;
}

#giftaidradiobox {
	display: inline-block;
	vertical-align: middle;
}

#giftaidtextbox {
	display: inline-block;
	vertical-align: middle;
	width: 50%;
}

span.small {
	font-size: 0.7em;
	margin-left: 4px;
}

#purchaseLabel span:nth-child(1), #purchase2Label span:nth-child(1), #donationLabel span:nth-child(1), #donation2Label span:nth-child(1) {
	width: 96%;
	display: inline-block;
}

#purchaseLabel span:nth-child(2), #purchase2Label span:nth-child(2), #donationLabel span:nth-child(2), #donation2Label span:nth-child(2) {
	text-align: right;
	display: inline-block;
	position: relative;
	left: 25px;
	color: #000;
	font-weight: normal;
}

#purchase, #purchase2, #donation, #donation2 {
	padding-left: 16px;
}

#purchaselist_id {
	position: relative;
	left: 16px;
}

#purchase + .errormsg, #purchase2 + .errormsg, #donation + .errormsg, #donation2 + .errormsg{
	position: relative;
	right: 5px;
}

#payfreqDetails {
	display: inline;
    margin-left: 4px;
}

@media screen and (max-width: 800px) {
	body {
		background-color: #FFF;
	}
	
	#banner {
		width: auto;
		border: none;
	}
	.outercontainer {
		width: auto;
		border: none;
	}
	
	#purchaseLabel span:nth-child(2), #purchase2Label span:nth-child(2), #donationLabel span:nth-child(2), #donation2Label span:nth-child(2) {
		left: 23px;
	}
}

@media screen and (max-width: 700px) {
	#purchaseLabel span:nth-child(2), #purchase2Label span:nth-child(2), #donationLabel span:nth-child(2), #donation2Label span:nth-child(2) {
		left: 21px;
	}
}

@media screen and (max-width: 540px) {
	#imagebox {
		float: none;
		text-align: left;
		width: auto;
	}

	label {
		display: block;
		margin: 5px 0 2px 0;
		width: 100%;
	}
	
	input[type="submit"] {
		width: calc(100% - 30px);
		max-width: 540px;
	}
	
	.outercontainer {
		text-align: left;
	}
	
	select {
		margin: 0 0 5px 0;
		display: inline-block;
		width: auto;
	}

	select + select {
		width: auto;
	}
	
	select + input {
		width: auto;
	}
	
	#purchaseLabel, #purchase2Label, #donationLabel, #donation2Label {
		display: inline;
		width: auto;
	}
	
	#purchaseLabel span:nth-child(1), #purchase2Label span:nth-child(1), #donationLabel span:nth-child(1), #donation2Label span:nth-child(1) {
		width: calc(100% - 30px);
		display: block;
	}
	
	#purchaseLabel span:nth-child(2), #purchase2Label span:nth-child(2), #donationLabel span:nth-child(2), #donation2Label span:nth-child(2) {
		z-index: 1;
		left: 4px;
	}
	
	#purchase, #purchase2, #donation, #donation2 {
		position: relative;
		right: 14px;
	}
	
	#purchase + .errormsg, #purchase2 + .errormsg, #donation + .errormsg, #donation2 + .errormsg{
		position: relative;
		right: 19px;
	}
	
	#purchaselist_id {
		position: relative;
		left: 3px;
	}
}

@media screen and (max-width: 400px) {
	input[type="text"] {
		width: calc(100% - 41px);
		max-width: 400px;
	}
	
	select {
		width: calc(100% - 31px);
		max-width: 400px;
	}
	
	
	#purchase, #purchase2, #donation, #donation2 {
		width: calc(100% - 53px);
	}
	
	#purchaselist_id {
		position: relative;
		left: 2px;
		width: calc(100% - 47px);
	}
	
	select#country, select#teltype, select#teltype2 {
		width: calc(100% - 31px);
		max-width: 400px;
	}
	
	#imagebox img {
		width: 90%;
	}
	
	#giftaidtextbox {
		width: 100%;
	}
}

/*Transaction response styles */
#wrapper {
	width: 800px;
	margin: auto;
	border: #E5E5E5 1px solid;
	padding: 0 10px 10px 10px;
	background-color: #FFF;
	margin-bottom: 10px;
	margin-top: 10px;
	text-align: left;
}

#wrapper h3 {
	padding: 0;
}

#responseheader {
	font-size: 1.8em;
	text-align: center;
	font-weight: 600;
	margin: 0 0 10px 0;
}

#wrapper p {
	font-weight: normal;
	font-size: 0.9em;
	padding-bottom: 10px;
}

#wrapper p.responsemessage {
	font-size: 1em;
}

#wrapperbottom {
	text-align: right;
	padding-top: 10px;
}

#responsefooter {
	text-align: center;;
}


.txtitle {
	font-weight: 500;
	margin: 0 0 3px 0;
}

.txheadlabel, .txtotallabel {
	font-weight: 500;
	margin: 0 0 3px 0;
	width: 50%;
}

#totallabel {
	border-top: 1px dashed;
	border-bottom: 1px dashed;
}

.txfield {
	display: inline-block;
}

.txamount {
	display: inline-block;
	width: 45%;
	font-size: 1em;
}

#carddetails, #address{
	display:inline-block;
	vertical-align: top;
	width: 45%;
}

#carddetails {
	width: 50%;
}

#paymentinformation .txfield{
	display: block;
}

a.responsebutton {
	color: #FFFFFF;
	margin: 8px 5px 8px 0;
	background-color: #666666;
	border-radius: 4px;
	padding: 5px;
	font-weight: 400;
	text-align: center;
	display: inline-block;
	width: auto;
}

#paymentInfo, #securelogo {
	display: inline-block;
	vertical-align: bottom;
}

#openingmessage {
	min-height:100px;
}

@media screen and (max-width: 800px) {
	#wrapper {
		width: auto;
		border: none;
	}
}

@media screen and (max-width: 620px) {
	.txlabel, .txtotallabel {
		display: inline-block;
		width: 40%;
	}
}

@media screen and (max-width: 540px) {
	.txheadlabel {
		display: inline-block;
	}
	
	a.responsebutton {
		width: 97%;
	}
	
	#carddetails, #address{
		display: block;
		vertical-align: top;
		width: 100%;
		margin-top: 10px;
	}
	
	#wrapperbottom {
		text-align: center;
		padding-top: 10px;
	}
	
}

@media screen and (max-width: 400px) {
	.txheadlabel {
		display: block;
		margin-top: 6px;
		margin-bottom: 0px;
	}
}


.successfulMessageBox {
	color: #3c763d;
	border: 2px solid #d6e9c6;
    margin: 15px 80px 15px 80px;
    padding: 10px 5px 10px 5px;
    text-align: center;
	background-color: #dff0d8;
	border-radius: 4px;
}

.failedMessageBox {
	color: #a94442;
	border: 2px solid #ebccd1;
    margin: 15px 80px 15px 80px;
    padding: 10px 5px 10px 5px;
    text-align: center;
	background-color: #f2dede;
	border-radius: 4px;
}