
/* Clarendon font
====================================== */	

@font-face {
	font-family: 'Clarendon Blk BT';
	src: url('../fonts/ClarendonBT-Black.eot');
	src: url('../fonts/ClarendonBT-Black.eot?#iefix') format('embedded-opentype'),
		url('../fonts/ClarendonBT-Black.woff2') format('woff2'),
		url('../fonts/ClarendonBT-Black.woff') format('woff'),
		url('../fonts/ClarendonBT-Black.ttf') format('truetype'),
		url('../fonts/ClarendonBT-Black.svg#ClarendonBT-Black') format('svg');
	font-weight: 900;
	font-style: normal;
}


/* Custom formmaster form style sheet
==================================================*/


td, select, input, textarea {
	margin: 						0;
	font-size: 						16px;
	line-height: 					24px;
	font-family: "proxima-nova", Helvetica, Arial, sans-serif !important;
}

body {
	background: 					none; /* Background image */
	background-position: 			center;
	background-repeat: 				no-repeat;
	background-size: 				cover;
	background-attachment: 			fixed; 
	font-family: "proxima-nova", Helvetica, Arial, sans-serif !important; 
}

a:link, a:visited, a:active {	
	color:#ff8200;
	text-decoration:none;
	}
	
a:hover {	
	color:#ff8200;
	text-decoration:underline;
	}
	

/*header tags*/

h1 { 
	font-size: 3.5em;
	line-height:1.1em;
    color: #067aae;
    margin: 30px 0;
    font-family: 'Clarendon Blk BT', helvetica;
	
	}
h2 {
	font-size: 2.8em;
	line-height:1.1em;
    color: #067aae;
    margin: 50px 0;
    font-family: 'Clarendon Blk BT', helvetica;
	}
h3 {
	font-size: 1.5em;
	line-height:1.2em;
    color: #2caae2;
    margin: 30px 0;
font-weight:normal;
}
h4 {
	font-size: 1.45em;
	line-height:1.2em;
    color: #067aae;
    margin: 10px 0;
font-weight:bold;
	}


/* Main container */


div#wrapper {
padding: 0 0 30px 0;
    margin: auto;
    width: 100%;
    border: 0;
    background-color: #f4f4f4;
    background-image: url(/form_assets/bankvic_93/header-bg.gif);
    background-repeat: repeat-x;
}

div#wrapper.introPg {
	
    background-color: #e6e6e7;
   
}



div#wrapper table {
	padding: 						20px;
	margin: 						auto;
	width: 							100%;
	max-width: 						1000px;
	-moz-box-sizing:				border-box;
	box-sizing:						border-box;
}

	div#wrapper.introPg table {
		padding: 						0;
		margin: 						auto;
		width: 							100%;
		max-width: 						none;
		-moz-box-sizing:				border-box;
		box-sizing:						border-box;
}


div#wrapper table table {
	padding: 						0;
}

div.outer-container {
	width: 100%; 
	margin: 0 auto; 
	position:relative;
	background-color: #f4f4f4;
	
	}
	
div.container {
	width: 100%;
	max-width:900px;
	-moz-box-sizing:				border-box;
	box-sizing:						border-box;
	margin: 0 auto; 
	position:relative;
	padding:20px;
	
	
	}
	
div.options-list {
	
	background-color:#ffffff;
	width:100%;
	padding:1%;
	-moz-box-sizing:				border-box;
	box-sizing:						border-box;
	margin:40px auto;
	}
	
	
	td.paddingHeader {
	
	padding-top:50px;	

	}


div#wrapper.introPg td.paddingHeader {
	
	padding-top:0;	

	}
	
	
.section td {
	padding-right: 					20px;
	-moz-box-sizing:				border-box;
	box-sizing:						border-box;
}

#headerImg {
	height: 						100%;
	padding: 						25px 0 40px;
	text-align: 					center;

}

#headerImg img {
	height: 						auto;
	width:                          100%;
	max-width:                      260px;

}

td.header {
	font-size: 					1.6em;
	line-height: 					normal;
	color:						#067aae;
	font-weight:					normal;
	padding: 					20px 20px 20px 0;
}

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;
}

td.mainheader {
	display: 						none; /* Hiding the main form title */
	margin-bottom: 					30px;
}

.bullet {
	vertical-align: 				top;
}

td.header, td.default, td.radio-required {
	-moz-box-sizing:				border-box;
	box-sizing:					border-box;
	width: 						50%;
}

td.default {

	padding: 					0 20px 20px 0;
	font-size:					1em;
	font-weight:				normal;
	color:						#067aae;
	position: relative;
}

td.default.inputContainer {
	
	font-weight:					normal;
	}

td.paddingFooter {
	padding: 						0;
}

.header {
	height: 						auto;
}


/*Intro page styling */


#wrapper.introPg p {
	
	color: #067aae;
	
	}

ul.r-list {
	font-size: 14px;
    font-weight: bold;
    line-height: 24px;
    margin: 0;
    padding: 0;
    text-align: center;
    padding: 0;
	
}

ul.r-list li {
	margin: 0;
    display: inline-block;
    width: 48%;
    padding: 5% 0;
    box-sizing: border-box;
    vertical-align: top;
    text-align: center;
    font-size: 1.5em;
	line-height:1.2em;
    font-weight: bold;
    color: #067aae;
	
}

ul.r-list li.r-header {
	
	vertical-align: top;
    text-align: left;
    list-style: none;
	width:100%;
	
	}
	
#wrapper.introPg .introPgFooter {
	
	padding: 						20px;
	margin: 						0 auto;
	width: 							100%;
	max-width: 						1000px;
	-moz-box-sizing:				border-box;
	box-sizing:						border-box;
		
	}
	
	#wrapper.introPg .introPgFooter td {
		
		text-align:                     center!important;
		font-size:                      12px;
		line-height:                     18px;
	}
	
	
	ul.hypList li {
		list-style-type:none;
		padding: 0 0 0 20px;
		text-indent:-20px;
		 color: #067aae;
		
		}
		
	ul.hypList li:before {
		content:"-";
		width:20px;
		height:20px;
		line-height:20px;
		font-size:18px;
		
		margin:0 10px 0 0;
		
		}



/* buttons
==================================================*/

/*#btnstart img, #btnnext img, #btnsubmit img, #btnsave img, #btnback img, #btnnone img, #btnprint img, #btnexport img, #btngreenIdNext img, #btnsubmitIncomplete img, div.VerificationGroupViewBtns div img, #btngreenIdVerification img {
	display: 						none;
}*/


#btnstart img, #btnnext img, #btnsubmit img, #btnsave img, #btnback img, #btnnone img, #btnprint img, #btnexport img, #btngreenIdNext img, #btnsubmitIncomplete img, #btngreenIdVerification 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, 
	#btngreenIdNext:before, #btnsubmitIncomplete:before, #btngreenIdVerification:before {
		margin: 							0 20px;
		line-height: 						48px;
		font-size: 							24px;
		font-weight: 						normal;
		display: 							inline-block;
		text-align: 						center;
		color: 								#fff;
		height: 							50px;
		width: 								160px;
		margin: 							0 20px 20px 0;
		-moz-box-sizing:					border-box;
		box-sizing:							border-box;
		border:                             2px solid #ff8200;
		
	}

	#btnstart:before, #btnnext:before, #btnsubmit:before, #btngreenIdNext:before, #btnsubmitIncomplete:before, #btngreenIdVerification:before {
		background-color: 					#ff8200;
	}

			#btnstart:hover:before, #btnnext:hover:before, #btnsubmit:hover:before, #btngreenIdNext:hover:before, #btnsubmitIncomplete:hover:before, #btngreenIdVerification:hover:before {
				background-color: 					#067aae;
				border-color:                       #067aae;
			}

	#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: 								#ff8200;
		
	}
	
		#btnsave:hover:before, #btnback:hover:before, #btnnone:hover:before, #btnprint:hover:before, #btnexport:hover:before {
		color: 								#067aae;
		border-color:                       #067aae;
		
		}

	#btnstart:before {
				content: 							"Let's go";
			}

	#btnnext:before {
		content: 							"Next";
	}

	#btnsubmit:before {
		content: 							"Submit";
	}
	#btngreenIdNext:before {
		content:							"Next";
	}
	#btnsubmitIncomplete:before {
		content:							"Verify later";
	}
	#btngreenIdVerification:before {
		content: 							"Verify";
	}

	#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;
	border-top: 6px solid #2caae2;
}

div#progressBar ul.formProgressList li.formProgressListItemActive, 
div#progressBar ul.formProgressList li.formProgressListItem {
	height: 					50px;
	line-height: 					50px;
	padding: 					0; 
	margin: 					0;
	width: 						50px;
	text-align: 					center;
	font-weight: 					normal;
	font-size:					1.5em;
}

li.formProgressListItem {
	background-color: 				#fff;
	color: 						#2caae2;
}

li.formProgressListItemActive {
	background-color: 				#2caae2;
	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#wrapper table input, div#wrapper table select  {
	height: 						40px;
	border-radius: 					6px !important;
	border: 						1px solid #e3e3e3;
	padding: 						8px !important;
	width: 							95% !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 !important;
	padding: 						8px !important;
	width: 							87% !important;
	margin: 						0 10px 0 0;
	color: 							#e51717 !important;
	-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 #067aae;
}

/* Specific elements */

div#wrapper input.checkbox, div#wrapper input.radio {
	width: 							20px !important;
	width: 							32px\9 !important;
}

div#wrapper table input[type='checkbox'] {
		min-width:50px;
		
	}

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 #067aae;
	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;
}



/* ------- new classes to target required icon on different types of input ------*/
td.radio-required input {
    margin: 0 3px;
    position: relative;
    vertical-align: middle;
    border-style: solid;
    border-width: 1px;
    height: 20px;
    line-height: 20px;
    padding-left: 5px !important;
	vertical-align: middle;
}

td.radio-required {
    padding: 0 20px 20px 0;
    font-size: 1em;
    font-weight: normal;
    color: #067aae;
	position: relative;
}

/*td.radio-required img[alt^="Required"] {
	position: relative;
    top: 22px !important;
    left: 466px !important;
}*/

td img[alt^="Required"] {
		position: 	absolute;
		top: 0 !important;
		right: 0 !important;
	}
	
	div#wrapper table:first-child table:first-child tr td.radio-required {
		padding-top: 0;
		position: relative;
	}



	



/* 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: 								94% !important;
		min-width: 							300px;
	}

	ul.r-list li {
	margin: 0;
    display:block;
    width: 100%;
    padding: 5% 0;
    font-size: 1.5em!important;
line-height:1.2em!important;
    font-weight: bold!important;
	
}

	td.mainheader h2 {
		font-size: 							25px !important;
		line-height: 						30px;
		text-align: 						center;
	}
	
	   div#wrapper table:first-child table:first-child tr td {
		   padding:20px 0 20px 0;
	}


	/* radio required icon*/
	
	td.radio-required {
		padding: 0 20px 0 0;
		width: 100%;
	}
	div#wrapper table td.radio-required input {
		min-width: 0;
	}
	
	div#wrapper input.radio {
		width: 50px !important;
		margin: 0 10px 10px 0;
	}
	
}


/* 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;
	}

	.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;
	}

	ul.r-list li:nth-child(2) {
    padding-top: 20px !important;
}

	/* buttons*/

	#btnstart:before, #btnnext:before, #btnsubmit:before, #btnsave:before, #btnback:before, #btnnone:before, #btnprint:before, #btnexport:before, #btngreenIdNext:before, #btnsubmitIncomplete:before, div.VerificationGroupViewBtns div:before  {
		height: 							50px;
		width: 								100%;
		margin: 							10px 0;
	}
	
	
	
	

}

