/* =structure */
* {
	margin: 0px;
	padding: 0px;
}
p, h1, h2, h3, ul, ol, li, tr, td, hr {
	margin: 0px;
	padding: 0px;
}
h2 
{
	margin: 0px;
	padding: 0px;
	FONT-WEIGHT: bold;
	FONT-SIZE: 1em;
	margin: 20px 0px 12px -6px;
	padding: 0px 0px 5px 0px;
	WIDTH: 100%;
	COLOR: #02277e;
	BORDER-BOTTOM: #02277e 2px solid;
	FONT-FAMILY: Verdana;
}

BODY {
	FONT: 72%/16px Verdana, Sans-Serif; COLOR: #02277e;
	background-image: url(../images/background.gif);
	text-align: center;
}
DIV.container 
{
	margin: 0px auto;
	width: 70em;
	max-width: 95%;
	min-width: 730px;
	position: relative;
	text-align: left;
}
a {
	color: #02277e;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
FORM {
	MARGIN: 0px 50px 1em;
	WIDTH: 730px;
	TEXT-ALIGN: left;
	float: left;
}
p {
	padding-top: 10px;
	padding-bottom: 10px;
}
h1 {
	clear: left;
	font-size: 130%;
	padding: 10px 0px 15px 0px;
}
p.result {
	border-top: 1px solid #3366CC;
	margin-top: 10px;
	padding-left: 25px;
	background: url(../Images/info_icon.gif) no-repeat 0px 10px;
} 
p.info_text {
	margin: -18px 0px 0px 250px;
	font-size: 0.8em;
	line-height: 14px;
	padding: 0px;
	width: 200px;
}
p.small_print {
	font-size: 0.8em;
}
p.instructions, p.disclaimer {
	padding: 15px;
	background-color: #e9edf6;
	margin: 15px 0px 15px 0px;
}
DIV.row, DIV.row_dpa, DIV.row_checkbox, DIV.row_indent, DIV.row_button, DIV.row_date, DIV.row_long, DIV.row_helpout, DIV.row_insurance { /* These are all the DIV varieties */
	CLEAR: both;
	position: relative;
	width: 730px;
	padding-bottom: 10px
}
DIV.row label, DIV.row_dpa label, DIV.row_checkbox label, DIV.row_indent label, DIV.row_button label, DIV.row_date label, DIV.row_long label, DIV.row_helpout label, DIV.row_insurance label { 
	display: block;
	width: 200px;
	padding-top: 8px;
	padding-bottom: 8px
}
.labelHeight { /* Rule to dictate height of Insurance control/Quotation*/
	height: 60px
}
DIV.row_insurance { /*Extra height for insurance radios*/
	height: 160px;
}
/*
=nav (with sliding doors: http://www.alistapart.com/articles/slidingdoors/) */

hr.underline {
	clear: left;
	color: #0d824c;
	margin-top: -26px;
	height: 7px;
}
ul#nav {
	list-style-type: none;
	position: relative;
}

/* All sections that have a selected tab */
.login ul#nav, .credit ul#nav, .banking ul#nav, .financial ul#nav, .insurance ul#nav, .mortgages ul#nav, .personal ul#nav, .savings ul#nav, .apply ul#nav, .products ul#nav, .rates ul#nav, .services ul#nav, .case ul#nav, .calculator ul#nav, .applications ul#nav, .approval ul#nav, .register ul#nav, .icontact ul#nav, .request ul#nav, .bus ul#nav, .gfinancial ul#nav, .gsavings ul#nav, .property ul#nav {
	bottom: -5px;
}

ul#nav li {
	float: left;
	background: url(../images/tab-r.gif) no-repeat right top;
	margin-right: 1px;
	font-size: 1.12em;
	font-family: Arial, Helvetica, sans-serif;
}

ul#nav li.loginselected, ul#nav li.registerselected, ul#nav li.logoutselected, ul#nav li.app_historyselected, ul#nav li.key_factsselected, ul#nav li.applicationselected {
	background: url(../images/tab-r-on.gif) no-repeat right top;
	position: relative;
	top: -3px;
	bottom: -5px;
}

ul#nav li:hover, ul#nav li:focus {
	background: url(../images/tab-r-on.gif) no-repeat right top;
}

ul#nav li a {
	color: #fff;
	background: url(../images/tab-l.gif) no-repeat;
	text-decoration: none;
	font-weight: bold;
	display: block;
	padding: 7px 7px 2px;
	float: left; /* IE5/Mac only */
}

/* Commented Backslash Hack for IE5/Mac \*/
ul#nav li a { float: none; }
/* End IE5/Mac hack */

ul#nav li.loginselected a, ul#nav li.registerselected a, ul#nav li.logoutselected a, ul#nav li.app_historyselected a, ul#nav li.key_factsselected a, ul#nav li.applicationselected a {
	background: url(../images/tab-l-on.gif) no-repeat;
	padding-top: 11px;
	padding-bottom: 3px;
}

ul#nav li a:hover, ul#nav li a:focus {
	background: url(../images/tab-l-on.gif) no-repeat left top;
}


/* =helpDetails
right help header*/
DIV#divHelpDetails {
	float: right;
	text-align: center;
	border-top: 2px solid #831570;
	border-bottom: 2px solid #831570;
	margin-top: 20px;
	padding: 2px 0px 2px 0px;
}

DIV#divHelpDetails h1, DIV#divHelpDetails h2, DIV#divHelpDetails h3 {
	color: #831570;
	font-size: 120%;
	margin: 0px;
	padding: 3px 0px 3px 0px;
}
DIV#divHelpDetails h2 {
	font-size: 160%;
	padding-top: 0px;
}
DIV#divHelpDetails h3 {
	font-size: 110%;
	font-weight: normal;
}
/* =login */
DIV#divLogin {
	width: 100%;
	font-weight: bold;
	font-size: 110%;
	margin: 15px 5px;
	text-align: center;
	clear: both;
	color: #831570;
}

/* =intro copy */
DIV.intro {
	border: solid 1px #849ACF;
	margin: 0px 0px 20px 0px;
	padding: 9px 13px 9px 13px;
}
DIV.intro ul {
	margin: 0px 20px 0px 10px;
	list-style-type: none;
}
DIV.intro ul li {
	line-height: 17px;
	padding: 0px 0px 0px 24px;
	margin: 18px 0px 0px 0px;
	height: 20px;
}

DIV.intro ul li.one {
	background: url(../Images/one_icon.gif) no-repeat;
	margin-top: 4px;
}

DIV.intro ul li.two {
	background: url(../Images/two_icon.gif) no-repeat;
}

DIV.intro ul li.three {
	background: url(../Images/three_icon.gif) no-repeat;
}

/* =notes */
p.notes 
{
	z-index:0;
	font-size: 99%;
	position: absolute;
	width: 180px;
	left: 580px;
	background-color: #fff1cb;
	padding: 10px;
}

p.notes2 
{
	z-index:0;
	font-size: 99%;
	position: absolute;
	width: 150px;
	left: 610px;
	background-color: #fff1cb;
	padding: 10px;
}


p.notes span, p.notes2 span {
	font-weight: bold;
}


/* =textarea
First page disclaimer */
/*textarea {
	border: none;
	padding: 15px;
	FONT: 100%/16px Verdana, Sans-Serif; COLOR: #000066; TEXT-ALIGN: left;
	background-color: #e9edf6;
	margin: 15px 0px 15px 0px;
	width: 95%;
}*/

/* =logo 
logo */
#ImageLogo, .imageLogo {
	margin: 20px 0px 10px 0px;
	/*height:82px;
	width:290px;*/
	height:97px;
	width:684px;
}
.imageLogo {
	float: left;
}
.systemLogo {
	font-size: 130%;
	color: Red;
	FONT-WEIGHT: bold;
	LEFT: 100px; 
	TOP: 0px;
	position: absolute;	
	padding: 10px 0px 15px 0px;	
}

/* =navigation
top icon navigation bar */
FORM .navbar {
	CLEAR: both;
	DISPLAY: inline;
	LEFT: 100px;
	WIDTH: auto;
	POSITION: relative;
	TOP: 0px;
	margin: 15px 10px 0px 0px
}
.navbar {
	CLEAR: both;
	DISPLAY: inline;
	LEFT: 100px;
	WIDTH: auto;
	POSITION: relative;
	TOP: 0px;
	margin: 15px 10px 0px 0px
}

/* =fieldset */
FORM FIELDSET {
	BORDER: 0px;
	clear: left;
}
/* =links 
*/

/* =legend
form legend - page section title */
FORM LEGEND {
	FONT-WEIGHT: bold; FONT-SIZE: 1em; margin: 20px 0px 12px -6px; padding: 0px 0px 5px 0px; TEXT-TRANSFORM: capitalize; WIDTH: 100%; COLOR: #02277e; BORDER-BOTTOM: #02277e 2px solid; FONT-FAMILY: Verdana;
}
form legend.sub_legend {
	FONT-WEIGHT: bold; FONT-SIZE: 1em; margin: 0px 0px 5px -6px; padding: 0px 0px 5px 0px; TEXT-TRANSFORM: capitalize; WIDTH: 100%; COLOR: #0d824c; BORDER-BOTTOM: 0px;	
}

FORM .appButton {
	DISPLAY: inline; 
	LEFT: 240px; 
	FLOAT: left; 
	height: 35px; 
	WIDTH: 122px; 
	POSITION: relative; 
	TOP: 0em;
}


/* =buttons */
FORM INPUT.button , FORM INPUT.buttonSearch , FORM INPUT.buttonSearchWide , FORM INPUT.buttonDate , FORM INPUT.inputDate , FORM INPUT.buttonDate , FORM INPUT.buttonCalculate , FORM INPUT.buttonContinue, FORM INPUT.button_wide, FORM INPUT.button_left, FORM INPUT.button_left_wide, FORM INPUT.button_xtrawide, FORM INPUT.button_insurance, FORM INPUT.button_xtrawide_centre, FORM INPUT.button_xtrawide_centre2 , FORM INPUT.button_nextprev, FORM INPUT.button_nextprev_wide {
	/*FLOAT: left;*/
	POSITION: relative; 
	border: 1px solid #3366CC; 
	height: 20px; 
	background: #e9edf6; 
	width: 93px; 
	margin: 0px 10px 30px 0px	
}
FORM INPUT.button_wide, FORM INPUT.button_left_wide {
	width: 120px;
}

FORM INPUT.button_left, FORM INPUT.button_left_wide {
	left: 50px;
}

FORM INPUT.buttonSearch , FORM INPUT.buttonDate , FORM INPUT.buttonCalculate {  /* extra rule! This positions buttons next to controls rather than below. */
	position: absolute;
	top: 4px;
	left: 490px;
	width: 75px;
}
FORM INPUT.buttonSearchWide {
	position: absolute;
	top: 10px;
	left: 490px;
	width: 120px;
}
FORM INPUT.button_xtrawide {
	width: 135px;
}
FORM INPUT.button_xtrawide_centre {
	width: 155px;
	position: absolute;
	top: 10px;
	left: 250px;	
}
FORM INPUT.button_xtrawide_centre2 
{
	position: absolute;
	width: 180px;
	left: 440px;
	top: 10px;
}
FORM INPUT.button_nextprev
{
	left: 250px;
}

FORM INPUT.button_nextprev_wide
{
	left: 250px;
	width: 155px;
}


FORM INPUT.button_insurance {
	margin: 0px 10px 25px 0px;
}

/* =grid
Grid stlying */
table.DataGrid {
	margin: 15px 0px 15px 0px;
	border: 1px solid White;
	border-bottom: 1px solid #B2B2D1;
	width: 100%
}
table.DataGrid2 {
	margin: 15px 0px 15px 0px;
	border: 1px solid White;
	border-bottom: 1px solid #B2B2D1;
	width: 550px
}
.DataGrid th , .DataGrid td {
	font-size: 90%;
	padding: 5px 0px 5px 5px;
	border: none;
}
.DataGrid2 th , .DataGrid2 td {
	font-size: 95%;
	padding: 5px 5px 5px 5px;
	border: none;
}
.DataGrid th, .DataGrid2 th { /* Extra rule */
	background: #e9edf6;
	border-left-color: White;
	border-left-style: solid;
	border-left-width: 2px;
	}
.DataGrid td, .DataGrid2 td { /* Extra rule */
	border-top: 1px solid #B2B2D1;
}
.custNo {
	font-weight: bold;
}
.gridbutton , .gridbuttonTracking {
	position: relative;
	width: 75px;
	top: 0px;
	left: 0px;
	height: 20px;
	font-size: 99%;
	/*color: White;*/
	font-weight: bold;
	border: none;
	/*background: #0d824c;*/
	border: 1px solid #3366CC; 
	background: #e9edf6; 
}
.gridbuttonTracking {
	width: 92px;
}
table.DataGrid th.APRHeader {
	font-size: 135%;
}

/*=insurance iframe*/
iframe {
	width: 620px;
	height: 850px;
	border-style: none;
	padding:0px;
}
/* =inputs
inputs and selects */


input , select {
/*	position: absolute;
	top: 10px;
	left: 250px;
	width: 225px;*/
	width: 180px;
}



input.initial { /* extra rule! */
	width:30px;
	top: 0px;
}
DIV.row_long select {
	width: 300px;
}

/* =dpa
DPA page */
DIV.row_dpa label {
	width: 330px;
}

/* =radio buttons
radio buttons */
DIV.row table, DIV.row_dpa table, DIV.row_helpout table, DIV.row_insurance table {
	position: absolute;
	top: 2px;
	left: 250px;
	width: 200px;
	height: 20px;
}

DIV.row table input, DIV.row_dpa table input, DIV.row_helpout table input, DIV.row_insurance table input {
	position: static;
	width: auto;
	margin-right: 5px
}

DIV.row table label, DIV.row_dpa table label, DIV.row_helpout table label, DIV.row_insurance table label { 
	display: inline;
}

DIV.row_dpa table {
	left: 380px;
}

DIV.row_insurance table {
	height: 150px;
	top: 0px;
}
DIV.row_insurance label {
	padding-top: 18px;
}
DIV.row_insurance label span.label1, DIV.row_ins urance label span.label2 {
	position: absolute;
	width: 15em;
}
DIV.row_insurance label span.label1 {
	top: 19px;
	left: 305px;
}
DIV.row_insurance label span.label2 {
	top: 68px;
	left: 340px;
}

/* =checkboxes */
DIV.row_checkbox {
	border-bottom: 1px solid #3366CC;
	margin: 0px 0px 15px 0px
}

DIV.row_checkbox label {
	width: 630px;
	margin: 0px 0px 5px 0px;
}

DIV.row_checkbox input {
	left: 358px;
	top: 7px;
}

/* =help icons */
div.helpIcons, div.row_dpa .helpIcons, div.helpIcons_button, div.row_indent .helpIcons, div.row_helpout .helpIcons {
	position: absolute;
	margin: 0px;
	top: 10px;
	left: 500px;
	z-index: 99;
}
div.helpIcons a, div.row_dpa .helpIcons a, div.row_button .helpIcons a, div.row_indent .helpIcons a, div.row_helpout .helpIcons a {
	text-decoration: none;
	cursor: help;
}
div.helpIcons a:hover, div.row_dpa .helpIcons a:hover, div.row_button .helpIcons a:hover, div.row_indent .helpIcons a:hover, div.row_helpout .helpIcons a:hover {
	text-decoration: none;
	border: none; /* Haslayout value required to make this work in IE*/
}
div.helpIcons a div, div.row_dpa .helpIcons a div, div.row_button .helpIcons a div, div.row_indent .helpIcons a div, div.row_helpout .helpIcons a div {
	display: none;
}
div.helpIcons a:hover div, div.row_dpa .helpIcons a:hover div, div.row_button .helpIcons a:hover div, div.row_indent .helpIcons a:hover div, div.row_helpout .helpIcons a:hover div {
	display: inline;
	position: absolute;	
	left: -225px; /* Don't really understand why this is necessary!*/
	top: -10px;
}
div.helpIcons a:hover div table, div.row_dpa .helpIcons a:hover div table, div.row_button .helpIcons a:hover div table, div.row_indent .helpIcons a:hover div table, div.row_helpout .helpIcons a:hover div table {
	width: 206px;
	border: none;
	padding: 0px;
	margin: 0px;
}
div.helpIcons a:hover div table tr.top, div.row_dpa .helpIcons a:hover div table tr.top, div.row_button .helpIcons a:hover div table tr.top, div.row_indent .helpIcons a:hover div table tr.top, div.row_helpout .helpIcons a:hover div table tr.top {
	height: 25px;
	background-image: url(../Images/help_top.gif);
	background-repeat: no-repeat;
	}
div.helpIcons a:hover div table tr.middle, div.row_dpa .helpIcons a:hover div table tr.middle, div.row_button .helpIcons a:hover div table tr.middle, div.row_indent .helpIcons a:hover div table tr.middle, div.row_helpout .helpIcons a:hover div table tr.middle {
	background-image: url(../Images/help_mid.gif);
	background-repeat: repeat-y;
}
div.helpIcons a:hover div table tr.bottom, div.row_dpa .helpIcons a:hover div table tr.bottom, div.row_button .helpIcons a:hover div table tr.bottom, div.row_indent .helpIcons a:hover div table tr.bottom, div.row_helpout .helpIcons a:hover div table tr.bottom {
	height: 23px;
	background-image: url(../Images/help_bottom.gif);
	background-repeat: no-repeat;
}
div.helpIcons a:hover div table p, div.row_dpa .helpIcons a:hover div table p, div.row_button .helpIcons a:hover div table p, div.row_indent .helpIcons a:hover div table p, div.row_helpout .helpIcons a:hover div table p {
	font: 0.9em Verdana, Arial, Helvetica, sans-serif;
	color: Black;
	padding: 0px 15px 0px 40px;
	line-height: 13px;
}
/* help icons extra rules - these control the position of helpicons which are NOT div.row */
div.row_dpa .helpIcons {
	left: 540px;
	top: 8px;
}
div.row_dpa .helpIcons a:hover div {
	left: -360px
}
div.row_button .helpIcons {
	left: 577px;
	top: 7px;
}
div.row_button .helpIcons a:hover div, div.row_indent .helpIcons a:hover div {
	left: 25px
}
div.row_helpout .helpIcons a:hover div {
	left: -175px;
}

/* =date fields */
DIV.row_date label {
	width: 500px;
}
DIV.row_date span.date_years {
	position: absolute;
	left: 300px;
}
DIV.row_date span.date_months {
	position: absolute;
	left: 400px;
}
DIV.row_date input {
	width: 40px;
	top: 7px;
}
DIV.row_date input.date_months {
	left: 348px;
	width: 40px;
}
/* =value */
DIV.row span.value {
	font-size: 118%;
	position: absolute;
	left: 237px;
	padding-top: 3px;
}
/* =error messages */
FORM .ErrorMsg, FORM .ErrorMsg_radio, FORM .ErrorMsg_help, FORM .ErrorMsg_checkbox, FORM .ErrorMsg_dpa, FORM .ErrorMsg_button, FORM .ErrorMsg_button_out, FORM .ErrorMsg_below ,FORM .ErrorMsgCalculate, FORM .ErrorMsgBooking{
	position: absolute;
	left: 490px;
	top: 10px;
	FONT-SIZE: 11px;
	COLOR: red;
	LINE-HEIGHT: 110%;
	padding: 2px 0px 2px 21px;
	height: 15px;
	width: 200px;
	/*background: white url(../Images/alert_icon.jpg);
	background-repeat: no-repeat;*/
	background: #ffe4c2;
	display: block;
	z-index: 98;
}
/* error message extra rules */
DIV.row .ErrorMsgCalculate
{
   left:575px; 
}
DIV.row_dpa .ErrorMsg_radio {
	left: 480px;
}
FORM .ErrorMsg_radio {
	left: 455px;
	top: 6px;
}
FORM .ErrorMsgBooking {
	left: 455px;
}
FORM .ErrorMsg_checkbox {
	left: 490px;
	height: 15px;
}
FORM .ErrorMsg_dpa {
	left: 570px;
	top: 8px;
}
FORM .ErrorMsg_help {
	left: 525px;
}
DIV.row_indent .ErrorMsg {
	left: 525px;
}
FORM .ErrorMsg_button {
	left: 575px;
	top: 7px;
}
FORM .ErrorMsg_button_out {
	left: 600px;
	top: 7px;
}
DIV.row_long .ErrorMsg {
	left: 547px;
}
FORM .ErrorMsg_below {
	left: 250px;
	top: 32px;
	width: 250px;
}

FORM .ErrorInline{
	FONT-SIZE: 11px;
	COLOR: red;
}


/* =specific rules */

DIV.row #LabelGender table { /* specific target of miss-aligned radio*/
	width: 240px;
}
DIV.row #YourInsurance1_RadioButtonListInsurance { /* specific target of miss-aligned radio*/
	width: 290px;
}

div.updatepanel 
{
	font-size: 99%;	
	position: absolute;
	left: 580px;
	width: 180px;
	TOP: 130px;	
	font-weight: bold;	
}
div.updatepanel2
{
	z-index: 100;
	background-color: #ffe4c2;	
	font-size: 99%;	
	position: absolute;
	left: 580px;
	TOP: 145px;		
	width: 180px;
	font-weight: bold;	
}
.updatepaneltop
{
	z-index: 101;
}
.timeDropDown1
{
	width: 42px;
	position: absolute;
	top: 10px;
	left: 250px;
}

.timeDropDown2
{
	width: 42px;
	position: absolute;
	top: 10px;
	left: 295px;	
}

.inputFieldsPos {
	position: absolute;
	top: 10px;
	left: 250px;
}

.inputFieldsPos1 {
	position: absolute;
	top: 10px;
	left: 0px;
}

.inputFieldsPos2 {
	position: absolute;
	top: 10px;
	left: 295px;
}
.inputFieldsPos3 {
	position: absolute;
	top: 10px;
	left: 305px;
}
.inputFieldsPos4 {
	position: absolute;
	top: 10px;
	left: 440px;
}

.inputFieldsPosLargeCombo {
	position: absolute;
	top: 10px;
	left: 250px;
	width: 240px;
}

.specialOffer{
	COLOR: red;
	font-weight: bold;
}

.price{
	font-weight: bold;
}

.textArea {
	position: absolute;
	top: 10px;
	left: 250px;
	width: 250px;
}
table.dataSummary {
	background-color: #fff1cb;
	width: 730px;	
	border: none;	
}
table.dataSummary tr, table.dataSummary td {
	border: none;	
	font-size: 1em;
	/*font-weight: bold	;*/
}