/* Custom formmaster form style sheet
==================================================*/

td, select, input, textarea {
	margin: 						0;
	font-size: 						16px;
	line-height: 					24px;
	font-family: 					Arial,"Helvetica Neue",Helvetica,sans-serif;
}

h1, h2 {
	line-height: 					normal;
}

body {
	background: 					url(/form_assets/macquariecreditunion_26/shopping-background.jpg);
	/* background: 					url(/form_assets/vermilian_116/Work-BG.gif); Background video */
	background-position: 			center;
	background-repeat: 				no-repeat;
	background-size: 				cover;
	background-attachment: 			fixed; 
}


/* Main container */

div#wrapper {
	padding: 						0 0 30px 0;
	margin: 						auto;
	width: 							100%;
	border: 						0;
	max-width: 						900px;
	background: 					rgba(255,255,255,0.9);
}

div#wrapper table {
	padding: 						20px;
	margin: 						auto;
	width: 							100%;
	max-width: 						600px;
	-moz-box-sizing:				border-box;
	box-sizing:						border-box;
}

div#wrapper table table {
	padding: 						0;
}

.section td {
	padding-right: 					20px;
	-moz-box-sizing:				border-box;
	box-sizing:						border-box;
}

#headerImg {
	height: 						100%;
	padding: 						20px 0;
	text-align: 					center;
	border-bottom: 					4px solid  #01abc5;
}

td.header {
	font-size: 						24px;
	line-height: 					normal;
}

td.valerr  {
	padding: 						0 0 20px 0;
}

td:last-child, td.default:last-child {
	padding-right: 					0;
}

td.mainheader, td#headerImg {
	display: 						block;
	width: 							100%;
	font-size: 						25px;
	/*
	background-color: 				white;
	*/
}

td#headerImg img {
	max-width: 						200px;
}


td.mainheader {
	display: 						none; /* Hiding the main form title */
	margin-bottom: 					30px;
}

.bullet {
	vertical-align: 				top;
}

td.header, td.default {
	padding: 						0 20px 20px 0;
	-moz-box-sizing:				border-box;
	box-sizing:						border-box;
	width: 							50%;
}

td.paddingFooter {
	padding: 						0;
}

.header {
	height: 						auto;
	color: 							#01abc5;
}


/* buttons
==================================================*/

#btnstart img, #btnnext img, #btnsubmit img, #btnsave img, #btnback img, #btnnone img, #btnprint img, #btnexport img {
	display: 						none;
}

/* Primary CTA */

	#btnstart:before {
		margin:								0 !important; 
	}

	/* Secondary CTA */

	#btnsave, #btnback, #btnnone, #btnprint, #btnexport {
		background: 						none;
	}

	#btnstart:before, #btnnext:before, #btnsubmit:before, #btnsave:before, #btnback:before, #btnnone:before, #btnprint:before, #btnexport:before {
		margin: 							0 20px;
		line-height: 						47px;
		font-size: 							20px;
		font-weight: 						bold;
		display: 							inline-block;
		text-align: 						center;
		color: 								#fff;
		height: 							50px;
		width: 								160px;
		margin: 							0 0 20px 0;
		border: 							3px solid #01abc5;
		-moz-box-sizing:					border-box;
		box-sizing:							border-box;
		position: relative;
	}


	#btnstart:before, #btnnext:before, #btnsubmit:before {
		background-color: 					#01abc5;
	}

			/*
			#btnstart:hover:before, #btnnext:hover:before, #btnsubmit:hover:before, #btnstart:hover:after {
				background-color: 					#0294ab;
				border: 							3px solid #0294ab;
			}	
			*/

	#btnstart:last-child, #btnnext:last-child, #btnsubmit:last-child, #btnsave:last-child, #btnback:last-child, #btnnone:last-child, #btnprint:last-child, #btnexport:last-child {
		margin-right: 						0;
	}

	#btnsave:before, #btnback:before, #btnnone:before, #btnprint:before, #btnexport:before {
		color: 								#01abc5;
	}

	#btnstart:before {
		content: 							"Start";
	}

			#btnstart:hover:before {
				content: 							"Let's go";
			}

	#btnnext:before {
		content: 							"Next";
	}

	#btnsubmit:before {
		content: 							"Submit";
	}

	#btnsave:before {
		content: 							"Save";
	} 

	#btnback:before {
		content: 							"Back";
	}

	#btnnone:before {
		content: 							"Back";
	}

	#btnprint:before {
		content: 							"Print";
	}

	#btnexport:before {
		content: 							"Export";
	}

			#btnexport:hover:before {
				content: 							"to PDF";
			}

div#progressBar {
	background-color: 				#fff;
	width: 							100%;
}

div#progressBar ul.formProgressList {
	margin: 						0;
}

div#progressBar ul.formProgressList li.formProgressListItemActive, 
div#progressBar ul.formProgressList li.formProgressListItem {
	height: 						40px;
	line-height: 					40px;
	padding: 						0; 
	margin: 						0;
	width: 							40px;
	text-align: 					center;
	font-weight: 					bold;
}

li.formProgressListItem {
	background-color: 				#fff;
	color: 							#01abc5;
}

li.formProgressListItemActive {
	background-color: 				#01abc5;
	color:							#fff;
}


/* Input styling
==================================================*/

div#wrapper table input[type='checkbox'] {
		width: 						15px !important;
		width: 						32px\9 !important;
	}

.singleAddressPopDown {
	background: 					white;
	border-radius: 					6px;
	border: 						1px solid #e3e3e3; /* match this with input border colour */
	margin-top: 					10px;
}

div.singleAddressPopDown div.results ul li {
	margin: 						5px 5px 10px 5px !important;
	list-style: 					none;
}

div#wrapper table input, div#wrapper table select {
	height: 						40px;
	border-radius: 					6px !important;
	border: 						1px solid #e3e3e3;
	padding: 						8px !important;
	width: 							87% !important;
	margin: 						0 10px 0 0;
	color: 							#545454;
	-moz-box-sizing:				border-box;
	box-sizing: 					border-box;
}

select.valerr, input.valerr  {
	height: 						40px;
	border-radius: 					6px !important;
	border: 						1px solid #e51717;
	padding: 						8px !important;
	width: 							87% !important;
	margin: 						0 10px 0 0;
	color: 							#e51717;
	-moz-box-sizing:				border-box;
	box-sizing: 					border-box;
}

div#wrapper table textarea {
	margin: 						0 10px 0 0;
}

div#wrapper table input:focus, div#wrapper table select:focus, div#wrapper table textarea:focus {
	outline: 						none;
	border: 						1px solid #01abc5;
}

/* Specific elements */

div#wrapper input.checkbox, div#wrapper input.radio {
	width: 							20px !important;
	width: 							32px\9 !important;
}

div#wrapper textarea {
	max-width: 						850px;
	width: 							100% !important;
	padding: 						10px;
	-moz-box-sizing:				border-box;
	box-sizing: 					border-box;
}


/* Error styling
==================================================*/

div#wrapper table table.valerr {
	padding: 						20px;
	-moz-box-sizing:				border-box;
	box-sizing: 					border-box;
	background: 					#e51717;
	border:							1px solid #e51717;
	margin: 						40px 0 40px 0;
	color: 							#fff;
}

td.valerr {
	color: 							#e51717;
}

table.valerr th {
	color: 							#fff;
	font-size: 						20px;
	padding: 						0 0 10px 0;
}


/* Form verification
==================================================*/

.VerificationGroupView, .VerificationWhatWeWillNeed {
	border-radius: 					6px;
	border: 						1px solid #01abc5;
	margin: 						10px 0px;
	padding: 						10px;
}

div.VerificationGroupView h2, div.VerificationGroupView div.VerificationGroupViewHeader h2 {
	color: 							#000;
	font-size: 						20px;
	font-weight: 					bold;
	margin: 						0 0 20px 0;
	padding: 						5px 0;
	text-align: 					left;
}

.VerificationWhatWeWillNeed ul {
	list-style: 					circle;
}


/* Breakpoints for smaller screens/mobile
==================================================*/

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

	table, tbody, tr, th, td {
		display: 							block;
		width: 								100%;
		-moz-box-sizing:					border-box;
		box-sizing: 						border-box;
	}

	td.header, td.default {
		padding: 							0 0 20px 0;
		width: 								100%;
	}

	div#wrapper table input, div#wrapper table select, div#wrapper table textarea {
		margin: 							0 10px 0 0;
		width: 								92% !important;
		min-width: 							300px;
	}

	td.mainheader h2 {
		font-size: 							25px !important;
		line-height: 						30px;
		text-align: 						center;
	}

	div#progressBar {
		margin-top: 						20px;
	}

}


/* Smart phones */

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

	h2.mainheader {
		line-height: 						35px;
		font-size: 							30px;
	}

	td .inputContainer img {
		position: 							absolute;
		margin: 							15px 0 0 0;
	}

	div#wrapper table input, div#wrapper table select, div#wrapper table textarea {
		width: 								90% !important;
	}

	iframe#verificationIFrame {
		margin: 							20px 0 0 0;
		height: 							506px !important;
	}

	.VerificationWhatWeWillNeed ul,
	.VerificationWhatWeWillNeed li {
		margin: 							0;
		padding: 							0;
		list-style: 						none;
	}

	.VerificationWhatWeWillNeed {
		width: 								100%;
		-moz-box-sizing:					border-box;
		box-sizing: 						border-box;
	}

	div#wrapper table input, div#wrapper table select, div#wrapper table textarea {
		min-width: 							0;
	}

	div#wrapper {
		width: 								100% !important;
		padding: 							0 !important;
	}

	div#progressBar ul.formProgressList li.formProgressListItemActive, div#progressBar ul.formProgressList li.formProgressListItem {
		height: 							35px;
		line-height: 						35px;
		width: 								35px;
	}

	td.header, td.default {
		padding: 							0 0 10px 0;
	}

	td.default.inputContainer {
		padding: 							0 0 20px 0;
	}

	div#wrapper table input[type='checkbox'] {
		width: 								30px !important;
	}

	/* buttons*/

	#btnstart:before, #btnnext:before, #btnsubmit:before, #btnsave:before, #btnback:before, #btnnone:before, #btnprint:before, #btnexport:before  {
		height: 							50px;
		width: 								93%;
		margin: 							10px 0;
	}

	#btnstart:after, #btnnext:after, #btnsubmit:after, #btnsave:after, #btnback:after, #btnnone:after, #btnprint:after, #btnexport:after {
	  margin-top: 10px;
	}

}