/* All pages */
body {
	text-align: center;
	background: #d9dbe4;
	color: #656565;
	margin: 0;
	padding: 0;
	font-family: Arial, 'HelveticaNeue-Roman', Helvetica, Tahoma, Verdana, sans-serif; 
	font-size: 90%;
}	
/* self clearing rules */
dl:after, div:after, ul:after, ol:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
* html dl, * html div, * html ul, * html ol {height: 1%}
dl, div, ul, ol {display: inline-block}
/* !IE Mac \*/
dl, div, ul, ol {display: block}
/* */
form {
	width: 930px;
	margin: 0 auto;
	text-align: left;
	position: relative;
}
/* The black region at the top of the page */
div#head {
	position: absolute;
	width: 930px;
	top: 0;
	left: 0;
	text-align: right;
	position: absolute;
	border-top: solid 1px white;
	color: #0d488c;
	background: white;
	height: 9.7em;
}
html[lang] div#head {height: auto;min-height: 9.7em}
	/* The logo, top left */
	#head p#logo {
		position: absolute;
		top: 12px;
		left: 45px;
		width: 254px;
		margin: 0;
		text-align: left;
	}
	#head fieldset {
		padding: 16px 8px 0 301px;
	}
		#head fieldset p {
			margin: 0;
			padding: 0 0 0.85em 0;
		}
		/* "Register", "Login" */
		#head fieldset a, a.button, a.gs_butnext, a.gs_butprev{
			text-decoration: none;
			padding: 0.1em 1.1em;
		}
		/* a button-style link. Why not? */
		a.button, a.gs_butnext, a.gs_butprev {
			padding: 0.1em 0.5em;
		}
		#head fieldset img {vertical-align: middle;}
		#head fieldset input {vertical-align: bottom;}
		
		/* Website search field */
		input#ctl00_HeaderPlaceHolder_PageHeader_searchTermBox {
			width: 183px;
			color: #0d488c;
			border: 1px solid #90a7c1;
			margin-right:4px;
		}
		
		p#new {
			background-image: url(/img/bg-new.png);
			background-repeat:no-repeat;
			background-position:159px bottom;
			padding: 0 0 12px 0;
			width:253px;
			float:right;
		}
		
		/* Submit button */
		input.submit,
		#content input#ctl00_ContentPlaceHolder_HomeSearch_btnMortgageSubmit3, 
		#content input#ctl00_ContentPlaceHolder_HomeSearch_btnMortgageSubmit2, 
		#content input#ctl00_ContentPlaceHolder_HomeSearch_btnMortgageSubmit,
		#productintro input, #refineform p input, #content input.submit, 
		#main fieldset input.submit, #main fieldset input.reset, #head fieldset a, 
		a.button, #main dl.pagenav dd input, a.gs_butnext, a.gs_butprev,
		input#ctl00_HeaderPlaceHolder_PageHeader_searchButton {
			color: #0d488c;
			background: white url(/img/bg-input-submit.png) center repeat-x;
			border: 1px solid #90a7c1;
			font-size: 90%;
			padding-top: 0.1em;
			padding-bottom: 0.1em;
			width: auto;
		}
		input#ctl00_HeaderPlaceHolder_PageHeader_searchButton {width: 62px;}
		
		input.reset, #refineform input.reset, #main fieldset input.reset {
			background: #cfe4f2 url(/img/bg-input-reset.png) center repeat-x;
		}

/* Main navigation, top */
map#nav ul {
	background: #0d488c url(img/bg-nav-ul.png) bottom left no-repeat;
	text-align: left;
	font-weight: bold;
	margin: 0.7em 0 0 0;
	padding-left: 17px;
}
#nav ul, #nav li, #nav a, #nav em {
	padding: 0.6em 0 0.5em 0;
}
	#nav li {
		display: inline;
	}
		#nav a, #nav em {
			color: white;
			padding-right: 1em;
			padding-left: 1em;
			background: url(/img/bg-nav-a.png) right no-repeat;
			font-style: normal;
			text-decoration: none;
		}
		#nav em, #nav a:hover {
			color: #0d488c;
			background: #f5f5f9 url(/img/bg-nav-em.png) bottom repeat-x;
		}
			#nav em a, #nav em a:hover {
				color: #0d488c;
				padding: 0;
				background: none;
			}

/* The container for the content and the related links */
div#main {
	background: white url(/img/bg-main.png) left repeat-y;
	margin: 0 0 0 0;
}
	div#content {
		float: left;
		margin: 9.7em 0 0 0;
	}

	/* This is the application style - with the gradient background, and tabs at the top. */
	#main fieldset, div#products {
		padding: 20px 0 0 0;
		margin: 0 21px 0 0;
		color: white;
		background: #5099d0 url(/img/bg-main-fieldset.png) top repeat-x;
		border-bottom: solid 3px white;
	}
	/* This is the series of tabs inside a fieldset */
	#main fieldset map ul, div#products map ul {
		background: white url(/img/bg-panel-map-ul.png) bottom right no-repeat;
		margin: 0 0 1.8em 0;
	}
	#main fieldset map ul, #main fieldset map li, #main fieldset map em, #main fieldset map a, #main fieldset map span,
	div#products map ul, div#products map li, div#products map em, div#products map a, #products map span {
		padding-top: 15px;
		padding-bottom: 8px;
	}

	*:first-child+html #main fieldset map em, *:first-child+html #main fieldset map a,
	*:first-child+html div#products map em, *:first-child+html div#products map a {
		padding: 0;
	}
	* html #main fieldset map em, * html #main fieldset map a,
	* html div#products map em, * html div#products map a {
		padding: 0;
	}
		#main fieldset map li, div#products map li {
			padding: 0;
			background: none;
			display: inline;
		}
			#main fieldset map em, #main fieldset map a,
			#products map em, #products map a {
				font-style: normal;
				text-decoration: none;
			}
				#main fieldset map span, #products map span {
					padding-left: 30px;
					padding-right: 30px;
				}
			/* First link */
			#main fieldset map .first a, div#products map .first a {
				background: #8c9294 url(/img/bg-fieldset-map-first-a.png) top left no-repeat;
			}
			/* Middle links */
			#main fieldset map a, div#products map a {
				background: #8c9294 url(/img/bg-fieldset-map-a.png) top left no-repeat;
			}
				#main fieldset map a span, #products map a span {
					color: #0d488c;
					background: url(/img/bg-fieldset-map-a-span.png) top right no-repeat;
				}
				/* Last link */
				#main fieldset map .last a span, #products map .last a span {
					background: url(/img/bg-fieldset-map-last-a-span.png) top right no-repeat;
				}
			/* Middle selected tabs */
			#main fieldset map em, #products map em {
				background: url(/img/bg-fieldset-map-em.png) top left no-repeat;
			}
			/* First selected tab */
			#main fieldset map .first em, #products map .first em {
				color: white;
				background: #1c7bc2 url(/img/bg-fieldset-map-first-em.png) top left no-repeat;
			}
				#main fieldset map em span, #products map em span {
					color: white;
					background: url(/img/bg-fieldset-map-em-span.png) top right no-repeat;
				}
				/* Last selected tab */
				#main fieldset map .last em span, #content map .last em span {
					color: white;
					background: url(/img/bg-fieldset-map-last-em-span.png) top right no-repeat;
				}

		/* Apps rules */
		#main fieldset th, #main fieldset td, #main fieldset dl, #main fieldset p input, #main fieldset p select, #main fieldset p textarea {
			font-size: 85%;
		}
	
	#content fieldset h2 {
		color: white;
		margin: 0 20px;
		padding: 0;
		border: none;
		font-weight: bold;
	}
	
	div#content fieldset ol, #content fieldset p {
		margin: 0 20px 1.5em 20px;
	}
	
	#main fieldset dl {
		margin: 0 0 0.5em 20px;
	}
	
			div#main fieldset dl dt {
				width: 241px;
				color: white;
				padding: 0;
			}
			div#main fieldset dl dd {
				width: 228px;
				padding: 0;
			}
			
	#main fieldset dl.level2 {
		margin: 0 0 0.5em 45px;
	}
				
			
				div#main fieldset input, div#main fieldset select, div#main fieldset textarea {
					/* For the Mortgage Affordability Calculator */
					width: 217px;
					border: solid 1px #7f9db9;
				}
								
				div#main fieldset input.readonly, div#main fieldset select.readonly, div#main fieldset textarea.readonly {
				    background-color: #ece9d8;
				    border: solid 1px #c9c7ba;
				}
				
				div#main fieldset #ctl00_ContentPlaceHolder_ctl00_drpClientType {
				    width:265px;
				}
				

	/* This is for contact forms and the favourites, because change is good. */
	fieldset#config, #main fieldset.config, div#choosefav {
		color: black;
		background: #e8edef;
	}
	div#choosefav {
		padding: 20px 0 0 0;
		margin: 0 21px 0 0;
	}
		#choosefav div {
			margin: 0 0 1.5em 0;
		}
		div#choosefav fieldset {
			margin: 0;
			padding: 0;
			color: black;
			background: none;
			border: none;
			float: left;
			clear: none;
			width: 255px; 
		}
			fieldset#config h2, #main fieldset.config h2, div#choosefav h2 {
				font-weight: normal;
			}
			div#choosefav fieldset dl dt {
				width: 32px;
				text-align: center;
			}
				#choosefav fieldset dt input {
					width: auto;
					border: none;
				}
			div#choosefav fieldset dl dd {
				width: 202px;
			}
            
            div#choosefav fieldset dl.level2 dd {
				width: 177px;
			}
            
		div fieldset#config dl dt, div#main fieldset.config dl dt, div div#choosefav dl dt {
			color: black;
		}
		#choosefav fieldset h2, #main fieldset.config h2, fieldset#config h2 {
			color: #0d488c;
			margin-bottom: 0.5em;
		}

	/* Related links, right */
	div#related {
		float: left;
		width: 185px;
		margin: 9.7em 0 0 0;
	}
		#related div {
			padding: 1em 12px 0 12px;
			background: #f2f3f8 url(/img/bg-related-div.png) repeat-x;
			margin: 0 0 0.9em 0;
		}
		#related h1, #related h2, #related h3 {
			margin: 2em 0 0.2em 0;
			font-size: 120%;
			color: #1678c1;
			font-weight: bold;
		}
			#related div h1, #related div h2, #related div h3 {
				margin: 0 0 1em 0;
				color: #656565;
			}
			#related div h3 {margin: 0 0 0.2em 0;}
				/* For icons, edit pencil, etc. */
				#related img {
					vertical-align: middle;
				}
		#related a {
			color: #1678c1;
			text-decoration: none;
		}
		#related dl, #related ul {
			margin: 0 0 1em 0;
		}
			#related dl dt {
				float: left;
				width: 28px;
				padding: 0;
			}
			#related dl dd {
				float: left;
				width: 133px;
				font-size: 85%;
			}
				#related dd a {
					color: black;
				}
				#related dd strong {
					font-size: 110%;
					color: #1678c1;
				}
		#related p {
			margin-right: 12px;
		}
		#related p, #related ul {
			font-size: 85%;
		}
			#related ul ul, #related ul ol, #related ol ul, #related ol ul {
				font-size: 100%;
			}
            
			#related ul li, #lowercontent ul li {
				background: url(/img/bullet-related.png) top left no-repeat;
				padding: 0 0 0.1em 28px;
			}
			/* These are for the favourites links.  It's not semantic, but you can't have everything. */
			#related ul li.header, #related ul li.first {
				color: #656565;
				background: none;
				font-size: 120%;
			}
		
			    #related ul li, #lowercontent ul li {
			        padding-left:32px;
			    }
			
				#related ul li a, #lowercontent ul li a {
					padding: 2px 0px;
				}
				#related a:hover, #lowercontent ul li a:hover {
					background: #e2e6eb;
				}
			/* For the edit the favourite link */
			#related p.edit {
				text-align: center;
				font-weight: bold;
				font-size: 90%;
				background: url(/img/bg-edit-lge.png) right no-repeat;
				padding: 6px 0 6px 17px;
				height: 38px;
				hei\ght: 26px;
				margin-right: 0;
			}
			html[lang] #related p.edit {
				height: auto;
				min-height: 26px;
			}
				#related p.edit a {
					color: #586165;
				}
				#related p.edit a:hover {
					text-decoration: underline;
					background: none;
				}
				.edit img {
					padding: 0 0.6em 0 0;
				}
			/* This is the sort of speech-bubble thing, shouting under the edit button */
			#related div.bubble {
				background: url(/img/bg-bubble.png) repeat-y;
				padding: 0;
			}
				#related .bubble h3 {
					color: #1678c1;
					background: url(/img/bg-bubble-h3.png) top no-repeat;
					margin: 0;
					padding: 22px 8px 0 8px;
					font-size: 90%;
				}
				#related .bubble p {
					color: black;
					background: url(/img/bg-bubble-p.png) bottom no-repeat;
					padding: 0 8px 20px 8px;
					margin: 0;
					font-size: 85%;
				}

/* Supplementary navigation, horizontal, bottom */
#supnav ul {
	background: #9eabb0;
	font-size: 85%;
	padding: 0 0 0 30px;
/*	padding: 0 0 0 214px;*/
}
#supnav ul, #supnav li, #supnav a, #supnav em {
	padding-top: 0.6em;
	padding-bottom: 0.6em;
}
	#supnav li {
		display: inline;
	}
		#supnav a, #supnav em {
			text-decoration: none;
			color: white;
			font-weight: bold;
			padding-right: 1.2em;
			padding-left: 1.1em;
			background: url(/img/bg-supnav-a.png) right no-repeat;
		}
		#supnav a:hover, #supnav em {
			background: #889498 url(/img/bg-supnav-a.png) right no-repeat;
			font-style: normal;
		}
		#supnav .last a, #supnav .last em {
			background-image: none;
		}

/* Disclaimer */
div#disclaimer {
	margin: 2em 0 0 0;
	font-size: 85%;
	color: #687174;
}
	#disclaimer div {
		width: 745px;
		float: left;
	}
		#disclaimer div p {
			margin: 0 30px 1em 0;
		}
	p#disawards {
		float: left;
		width: 185px;
		margin: 0;
		/* Not a great idea */
		text-align: center;
	}
	#disclaimer a {
		color: #687174;
	}

/* General rules */
ul.action, p.action, #lowercontent p, .linklist {
	font-size: 85%;
}
	#main ul.action li {background: none;}
p.action {text-align: right;}
.action a, #lowercontent p a, #related .action a, .linklist a {
	display: block;
	margin: 0 0 0 auto;
	text-align: left;
	color: #134988;
	width: 173px;
	text-decoration: none;
	background: url(/img/bg-action-a.png) top no-repeat;
}
.action a:hover, #lowercontent p a:hover, #related .action a:hover, .linklist a:hover {
	background: url(/img/bg-action-a-hover.png) top no-repeat;
}
		.action a span, #lowercontent p a span, .linklist a span {
			padding: 4px 15px 4px 8px;
			display: block;
			background: url(/img/bg-action-a-span.png) bottom no-repeat;
		}

/* A footnote does the old asterisk-as-bullet trick, plus is a bit smaller */
p.footnote {
	padding-left: 0.6em;
	text-indent: -0.7em;
	font-size: 85%;
	color: black;
}

/* Killing lists */
ul, ol, li, dl, dt, dd, fieldset, legend {
	margin: 0;
	padding: 0;
	list-style-type: none;
	border: none;
}
.print, legend, #wai {display: none;}
.c {text-align: center;}
.r {text-align: right;}
img.l {float: left;}
img.r {float: right;}
hr {
	margin: 0 0 0.5em 0;
	padding: 0;
	border: none;
	border-top: solid 1px #ced3d9;
	height: 1px;
}
a img {border: none;}
a {color: black;}
a:hover {text-decoration: none;}
p { margin: 0 0 1em 0;}
input, select, textarea, #main fieldset dl dd input.submit {
	font-family: Arial, 'HelveticaNeue-Roman', Helvetica, Tahoma, Verdana, sans-serif;
	font-size: 100%;
}
/* To hide stuff which is required for WAI */
.wai {
	position: absolute;
	top: -1px;
	left: -1px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
/* To indicate content which is omitted */
s, ins {
	text-decoration: none;
	color: black;
	background-color: #fcf;
	border: solid 1px #969;
	padding: 1px 3px;
}