/* @name:		Forms
 * @site:		ME Bank
 * @author:		RBurnie, Hugeobject, http://www.hugeobject.com.au
 */
 
form {
	margin: 2em 20px 3em 20px;
}
form + form {
	margin-bottom: 5em;
}
fieldset {
	/*border-top: 1px solid #cfcfcf;*/
}
/* legend same as h2 (different margin/padding) */
legend {
	padding: 0.2em 5px 0.2em 0;
	margin: 0.25em 0;
	font-size: 1.3em;
	font-weight: bold;
	color: #00427a;
}
form p.instruction {
	margin: 0;
	padding: 5px;
}
fieldset ol {
	list-style-type: none;
	margin: 0 !important;
}
fieldset ol li {
	padding: 2px 0 8px 0;
	margin-bottom: 1px;
	border-bottom: 1px solid #e1ebe6;
}
fieldset fieldset {
	border-top: 0;
}
fieldset fieldset legend,
legend.small {
	font-size: 1em;
}
fieldset fieldset ol {
	border-top: 1px solid #dbdbdb;
}
fieldset fieldset ol li {
	padding: 8px 0 2px 0 !important;
	border-top: 1px solid #e1ebe6;
	border-bottom: 0;
}
label {
	display: block;
	float: left;
	width: 30%;
	padding-right: 2%;
	font-weight: bold;
}
fieldset.checkbox-group,
fieldset.radio-group {
	
}
fieldset.checkbox-group ol li,
fieldset.radio-group ol li {
	padding-left: 30% !important;
	/* ie6/7 not respecting padding so will use margin instead - wont look as good tho */
}
fieldset.checkbox-group label,
fieldset.radio-group label {
	float: none;
	width: auto;
	padding-right: 0;
	cursor: pointer;
	font-weight: normal;
}
/* = INPUTS = _________________________________________________________ */
input {
	padding: 1px;
	border: 1px solid #BFD6EA;/*#dbdbdb;*/
	width: 200px;
}
input.small,
input.small {
	width: 100px;
}
input.tiny,
input.tiny {
	width: 50px;
}
/* == RADIOS and CHECKBOXES == -------------------------------------------
 *	Should always be inside label tags to we will turn of borders for inputs in labels
 */
label input {
	padding: 0;
	border: 0;
	width: auto;
}

textarea {
	border: 1px solid #BFD6EA;/*#dbdbdb;*/
}
/* = SELECTS = ________________________________________________________ */
select {
	padding: 1px;
	border: 1px solid #BFD6EA;/*#dbdbdb;*/
	width: 205px;
}
select.small { width: 105px; }
select.tiny {
	width: 55px;
	font-size: 0.85em;
}
/* = BUTTONS = ________________________________________________________ */
fieldset div.button-wrapper {
	padding:0 0 8px 31%;
	border-bottom: 1px solid #e1ebe6;
}

button.submit {
	display: block;
	/*
	For some reason ie6/7 need block set otherwise doesnt render visually
	event tho its pretty much same as button.go which doesnt need block ?
	*/
	width: 65px;
	height: 19px;
	border: 0;
	text-indent: -999em;
	background: transparent url(../images/buttons2/submit.gif) 0 0 no-repeat;
	cursor: pointer;
}
button.submit:hover,
button.submit.hover {
	background-position: 0 -19px !important;
}
button.go {
	/* Dont use display:block here */
	width: 40px;
	height: 19px;
	border: 0;
	text-indent: -999em;
	background: transparent url(../images/buttons2/go.gif) 0 0 no-repeat;
	cursor: pointer;
}
button.go:hover,
button.go.hover {
	background-position: 0 -19px !important;
}
form#sub_search button.go,
button.go-on-blue {
	background: transparent url(../images/buttons2/go.gif) 0 0 no-repeat;
}

form sup.required {
	font-size: 1em;
	bottom: 0;
	padding: 0 2px;
}
/* = SPECIAL = ________________________________________________________ */

/* == SEARCH IN SUB_2 == */
form#sub_search {
	width: 208px; /* 220 - 12 */
	height: 48px;
	margin: 0;
	padding: 6px 0 6px 12px;
	background: #ecf3f6 url(../images/nav/rmenu_items_background.png) top left repeat-x;
	/*background: #bfd6ea;  /* url(../images/widget/quick-links-btm.gif) bottom left no-repeat; */
}
form#sub_search legend {
	margin: 0;
	padding: 0.2em 0;
	font-size: 1.2em;
	font-weight: normal;
	color: #4672ac;
}
form#sub_search input {
	width: 135px;
	margin: 0 6px 0 0;
	border: 1px solid #9fc2e0;
	font-size: 0.9em;
}

/* == MOBILE BANKING MANAGERS (SPECIAL HEADER) FORM == ____________________________ */
/*
	NB: div#mobile_banking_managers_header is also a div.banner
*/
div#mobile_banking_managers_header {
	height: auto;
}
div#mobile_banking_managers_header img { 
	float: left;
	margin-bottom: 1px;
}
div#mobile_banking_managers_header a {
	display: block;
	float: left;
	width: 495px;
	height: 49px;
	background: #E2ECF5 url(../images/corners/special-mobile-lender-book-babtn.png) 0 -49px no-repeat;
	text-indent: -9999px;
}
div#mobile_banking_managers_header a:hover {
	background-position: 0 0;
}
div#mobile_banking_managers_header form {
	display: block;
	float: left;
	width: 495px;
	margin: 0;
	padding: 13px 0;
	background: #0D5491 url(../images/corners/special-mobile-lender-form.png) bottom left no-repeat;
}
div#mobile_banking_managers_header fieldset {
	padding-left: 268px;
	background: transparent url(../images/corners/special-mobile-lender-book.png) center left no-repeat;
}
div#mobile_banking_managers_header legend {
	font-size: 0;
	line-height: 0;
	text-indent: -999em;
}
div#mobile_banking_managers_header label { 
	position: absolute;
	left: -999em;;
}
div#mobile_banking_managers_header input {
	width: 140px;
	height: 1.2em;
	margin: 0 6px 0 14px;
	border: 1px solid #9fc2e0;
	font-size: 1em;
}
div#mobile_banking_managers_header button.go {
	background-color: #7CACD4;
	background-image: url(../images/buttons2/go-w-on-d-blue.gif);
}
/* == CONTACT ME FORMS == ________________________________________________ 
	Form id's are:
	- pb_enquiry_form (Personal)
	- bb_enquiry_form (Business)
	
	They are in a td and will be enhanced via js
*/
td.form-wrapper {
	padding: 0;
}
form#pb_enquiry_form,
form#bb_enquiry_form {
	margin: 0;
	padding: 0;
	padding-bottom: 0.5em;
	background: #EAF0F5;
	/* setting border color but only setting border width with JS */
	border-color: #00427A;
	border-style: solid;
	border-width: 0;
}

form#call_back_personal.modal,
form#call_back_business.modal,
form#request_mobile_lender.modal {
	width: 428px;
	height: 350px;
	background: #fff;
	border: 1px solid #00427A;
	margin: 0;
	padding: 2em 20px 3em 20px;
}
form#call_back_personal.modal {
	height: 425px;
}
form#request_mobile_lender.modal {
	height: 427px;
}
form#pb_enquiry_form fieldset.col,
form#bb_enquiry_form fieldset.col {
	width: 50%;
	float: left;
}
form#pb_enquiry_form fieldset.col legend,
form#bb_enquiry_form fieldset.col legend {
	padding-left: 5px;
}
form#pb_enquiry_form div.button-wrapper,
form#bb_enquiry_form div.button-wrapper,
form#call_back_personal div.button-wrapper,
form#call_back_business div.button-wrapper,
form#request_mobile_lender div.button-wrapper {
	float: right;
	padding: 5px;
	padding-right: 20px;
	text-align: right;
	clear:both;
	border:0;
}
form#call_back_personal div.button-wrapper,
form#call_back_business div.button-wrapper,
form#request_mobile_lender div.button-wrapper,
form#fhsa_registration div.button-wrapper { padding-right: 0; }

form#pb_enquiry_form ol li,
form#bb_enquiry_form ol li,
form#call_back_personal ol li,
form#call_back_business ol li,
form#request_mobile_lender ol li,
form#fhsa_registration ol li {
	border: 0;
}
form#pb_enquiry_form label,
form#bb_enquiry_form label {
	width: 15%;
	padding-left: 5px; /* right is 2% */
}

form#pb_enquiry_form span.fauxset span.field-wrapper,
form#bb_enquiry_form span.fauxset span.field-wrapper,
form#call_back_personal span.fauxset span.field-wrapper,
form#call_back_business span.fauxset span.field-wrapper,
form#request_mobile_lender span.fauxset span.field-wrapper,
form#fhsa_registration span.fauxset span.field-wrapper {
	padding-right: 2px;
}
form#pb_enquiry_form span.fauxset span.field-wrapper label,
form#bb_enquiry_form span.fauxset span.field-wrapper label,
form#call_back_personal span.fauxset span.field-wrapper label,
form#call_back_business span.fauxset span.field-wrapper label,
form#request_mobile_lender span.fauxset span.field-wrapper label,
form#fhsa_registration span.fauxset span.field-wrapper label {/*background: red;*/
	width: 90% !important;
	font-size: 0.8em;
	font-weight: normal;
}
form#pb_enquiry_form span.fauxset span.tiny,
form#bb_enquiry_form span.fauxset span.tiny,
form#call_back_personal span.fauxset span.tiny,
form#call_back_business span.fauxset span.tiny,
form#request_mobile_lender span.fauxset span.tiny,
form#fhsa_registration span.fauxset span.tiny {
	display: block;
	width: 55px;
	float: left;
}
form#pb_enquiry_form span.fauxset span.small,
form#bb_enquiry_form span.fauxset span.small,
form#call_back_personal span.fauxset span.small,
form#call_back_business span.fauxset span.small,
form#request_mobile_lender span.fauxset span.small,
form#fhsa_registration span.fauxset span.small {
	display: block;
	width: 105px;
	float: left;
}
form#pb_enquiry_form span.fauxset span.radio-group,
form#bb_enquiry_form span.fauxset span.radio-group {
	display: block;
	margin-left: 16%; /* ie6/7: 8%; */
}
form#call_back_personal span.fauxset span.radio-group,
form#call_back_business span.fauxset span.radio-group,
form#request_mobile_lender span.fauxset span.radio-group,
form#fhsa_registration span.fauxset span.radio-group {
	display: block;
	margin-left: 30%; /* ie6/7: need to test; */
}
form#pb_enquiry_form span.fauxset span.radio-group label,
form#bb_enquiry_form span.fauxset span.radio-group label,
form#call_back_personal span.fauxset span.radio-group label,
form#call_back_business span.fauxset span.radio-group label,
form#request_mobile_lender span.fauxset span.radio-group label,
form#fhsa_registration span.fauxset span.radio-group label {
	width: 90% !important;
	font-weight: normal;
}
form#pb_enquiry_form textarea,
form#bb_enquiry_form textarea {
	width: 300px;
	margin: 10px;
}

/* == LOCATE ME - MAPS FORM == ___________________________________________
	Also defining the wrapper for gmaps here
*/
form#maps_form {
	float: left;
	width: 175px; /* 195 - 20 */
	height: 415px; /* 425 - 10 */
	margin: 0;
	padding: 10px;
	background: #194276;
	color: #fff;
}
form#maps_form fieldset li {
	border: 0;
}
form#maps_form legend {
	background: #194276;
	color: #fff !important;
}
li#maps-postcode-area label,
li#maps-postcode-area input {
	width: 80px;
}
form#maps_form fieldset.radio-group {
	font-size: 0.9em;
}
form#maps_form fieldset.radio-group ol { margin: 0; }
form#maps_form fieldset.radio-group li {
	padding-left: 0 !important;
	margin-left: 0 !important;
}
form#maps_form fieldset.radio-group label {
	padding-left: 16px;
}
form#maps_form fieldset.radio-group label input {
	margin-left: -16px;
}
/* === GMAP WRAPPER === */
div#gmap {
	float: left;
	width: 734px; /* 930 - 195 - 1 */ /* ie6 */ _width:723px;
	height: 435px;
	margin: 0 0 0 1px;
	background: #EAF0F5;
}
div#gmap_msg {
	width: 534px;
	height: 335px;
	background: #fff;
	position: absolute;
	top: 0;
	left: 0;
	padding: 50px 100px;
	overflow: auto;
}


div.form_errors {
	background: #fff;
	border: 1px solid #00427A;
}
div.form_errors p {
	padding-top: 1em;
	font-weight: bold;
	color: red;
}
div.form_errors ul {
	list-style-type: square !important;
	list-style-image: url(../images/icons/square-sm-ul.gif) !important;
	list-style-position: outside !important;
}
div.cbContent div.form_errors ul {
	margin-left: 50px !important;
}
div.form_errors li {
	line-height: 1em !important;
	margin-bottom: 0.2em !important;
}
input.error,
select.error,
textarea.error { background:#ffff80;}
input.focus,
select.focus,
textarea.focus { background:#ffffcc; }