/* All pages */
body {
	color: white;
	background: #025288;
	font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
	font-size: 80%;
	margin: 0;
	padding: 0;
	text-align: center;
}

/* If Cufon isn't working */
#branches h2, #custtype em, #puff strong, #strap, #custtype a {
	font-family: 'Century Gothic', sans-serif;
}

/* self clearing rules */
dl:after, div:after, ul:after, dd:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
* html dl, * html div, * html ul, * html li, * html #nav map em,
* html #nav map a, * html dd {height: 1%;}
dl, div, ul, dd {display: inline-block;}
/* !IE Mac \*/
dl, div, ul, dd {display: block;}
/* */

/* Wraps around all the content, 100% wide */
form {
	color: #414141;
	background: #ebeff4;
}

div#outer, #disclaimer div {
	text-align: left;
	/* Unconventional */
	width: 950px;
	margin: 0 auto;
}

/* The stuff at the top of the page */
div#head {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	color: #025288;
	background: white;
}
	/* Logo, phone number, branch links */
	#head div {
		width: 934px;
		margin: 0 auto;
		position: relative;
		padding: 0.4em 0 0 0;
	}
		#head p#logo {
			position: absolute;
			width: 344px;
			top: 29px;
			left: 1px;
			margin: 0;
			margin-top:-15px;
			text-align: left;
			padding: 0;
		}
			.print, #logo img {display: none;}
			#logo a img, #logo img.screen {display: inline;}

		/* The area to the right of the logo */
		#head div p {
			font-size: 140%;
			letter-spacing: -0.05em;
		}
		#head div p, #head div div {
			margin: 0 0 0 344px;
			padding: 0.3em 0 0.2em 0;
			text-align: right;
			font-weight: bold;
			width: auto;
		}
		#head div div {
			padding: 0.4em 0 0 0;
		}
		/* The two customer types */
		map#custtype {
			display: block;
			border-top: solid 1px white;
		}
		#head #custtype ul {
			font-weight: normal;
			padding: 0;
			margin: 0;
		}
			#custtype li {
				float: right;
			}
				#custtype a, #custtype em {
					display: block;
					color: black;
					background: #ebeff4;
					text-decoration: none;
					padding: 8px 0.7em;
					border-top: solid 3px white;
					border-left: solid 0.3em white;
				}
				#custtype em, #custtype a:hover, #custtype em a {
					color: white;
					background: #025288;
					padding-top: 11px;
					border-top: none;
					font-style: normal;
				}
					#custtype em a, #custtype em a:hover {
						display: inline;
						padding: 0;
						border: none;
					}

			#head p strong {
				color: #ef9221;
				font-size: 145%;
			}
			#head img {
				vertical-align: top;
			}

	/* The area at the top of the screen with the thick blue line */
	#head fieldset, div#candy {
		margin: 0;
		width: auto;
		padding: 0;
	}
	#head fieldset {
		border-top: solid 4px #025288;
		background: #ebeff4;
	}
	/* fix */
	div#ctl00_googleSearch {
		width: auto;
		padding: 0;
	}
		/* Search fields */
		div#head fieldset p {
			margin: 0.4em auto 0 auto;
			width: 934px;
			font-size: 100%;
			letter-spacing: 0;
			padding: 0;
			font-weight: normal;
		}
			/* Search field */
			#head fieldset p input {
				width: 124px;
			}
			#head fieldset p input:focus, #head fieldset p input:hover {
				border: solid 1px #ef9221;
			}
			/* Search button */
			#head fieldset p input.SearchButton {
				width: auto;
				color: #ef9221;
				background: #ebeff4;
				border: none;
				padding: 0;
				cursor: pointer;
			}

div#outer {
	padding: 6.7em 0 0 0;
}

/* Main content, centre */
div#maincontent {
	width: 696px;
	float: left;
	/* The old switcheroo */
	position: relative;
	left: 234px;
}

/* A three-column layout, with calls-to-action locked to the bottom of the content. 
Your basic nightmare. */
div.threecol {
	background: url(/img/bg-threecol.png) 0 0 no-repeat;
	position: relative;
	/* This assumes there is a call-to-action at the bottom */
	padding: 0 0 5em 0;
	margin: 2em 0 1em 0;
}
	.threecol div {
		float: left;
		width: 163px;
	}
	.threecol div.col3 {
		width: 160px;
	}
		.threecol h2, .threecol h3 {
			color: white;
			background: #025288 url(/img/bg-threecol-h2.png) 0 100% no-repeat;
			text-align: center;
			margin: 0 3px 0.8em 0;
			font-size: 120%;
			padding:0;
		}
		.col3 h2, .col3 h3 {
			margin-right: 0;
		}
			.threecol h2 a, .threecol h3 a, 
			#content .threecol h2 a:visited, 
			#content .threecol h3 a:visited {
				color: white;
				text-decoration: none;
				display: block;
				padding: 0.5em 26px 1.2em 26px;
			}
		.threecol p {
			margin: 0 15px 1em 15px;
		}
		.threecol p.action {
			position: absolute;
			bottom: 0;
			width: 130px;
			left: 0;
		}
		.col2 p.action {
			left: 163px;
		}
		.col3 p.action {
			left: 326px;
		}
			#content .threecol .action a, #content .threecol a.action, #content dl a.action {
				width: 130px;
				background: #ef9221 url(/img/sprite-action.png) -495px 0 repeat-y;
			}
			.threecol .action a:hover, .threecol a.action:hover, dl a.action:hover {
				background: #ef9221 url(/img/sprite-action.png) -1380px 0 repeat-y;
			}
				.threecol .action span, dl .action span {
					background: url(/img/sprite-action.png) -755px 100% no-repeat;
				}
				.threecol .action a:hover span, dl .action:hover span {
					background: url(/img/sprite-action.png) -1640px 100% no-repeat;
				}
					.threecol .action span span, dl .action span span {
						background: url(/img/sprite-action.png) -625px 0 no-repeat;
						padding: 0.8em 36px 0.8em 1px;
					}
					.threecol .action a:hover span span, dl .action:hover span span {
						background: url(/img/sprite-action.png) -1510px 0 no-repeat;
					}
						/* This is to hide content which allows the links to make sense out of context */
						.threecol .action span span span, dl .action span span span {
							padding: 0;
							background: none;
						}

/* Call-to-action with a 50/50 split */
	.action50 div {
		width:209px;
	}
	.action50 p.action {
		width: 220px;
	}

/* Navigation, left */
div#nav {
	width: 234px;
	float: left;
	/* The old switcheroo */
	position: relative;
	right: 696px;
	padding: 1.8em 0 0 0;
}
	#mnav ul {
		margin: 0 20px 0 0;
	}
		/* General */
		#mnav em {font-style: normal;}
		#mnav a, #mnav strong {
			display: block;
			color: #025288;
			background: url(/img/bg-mnav-a.gif) 0 7px no-repeat;
			text-decoration: none;
			padding: 0.4em 0 0.4em 10px;
			font-weight: normal;
			border-left: none;
		}
		/* You are here */
		#mnav a:hover, #mnav strong {
			color: #ef9221;
			background: none;
			padding-left: 3px;
			border-left: solid 7px #ef9221;
		}
		#mnav ul strong {
			font-weight: bold;
		}
			/* As home is the parent of all sections */
			#mnav ul ul {
				margin: 0;
			}
				/* First level */
				#mnav li.parent {
					border-top: solid 1px #7792be;
					border-bottom: solid 1px #7792be;
				}
					#mnav ul ul ul {
						margin: 0 0 0 10px;
					}
						#mnav ul ul ul li.parent {
							border-top: none;
							border-bottom: none;
						}
							/* First level */
							#mnav ul ul ul ul li {
								border-top: dotted 1px #7792be;
							}

/* Crumb-trail */
#crumb ol {
	font-size: 90%;
	margin: 0 0 0.7em 0;
}
	#crumb li {
		display: inline;
	}
		#crumb a {
			background: url(/img/bg-crumb-a.gif) 100% 3px no-repeat;
			padding: 0 8px 0 0;
			text-decoration: none;
		}
		#crumb em {
			font-style: normal;
		}

/* Content, centre */
div#content {
	float: left;
	width: 486px;
}
	h1 {
		font-size: 165%;
		font-weight: normal;
		color: #ef9221;
		margin: -3px 0 0.6em 0;
	}

/* Related links, right */
div#related {
	float: left;
	width: 210px;
}
	/* This is a strapline, but used in the related links */
	p#relstrap {
		text-align: center;
		font-size: 130%;
		color: #025288;
		margin: 0 0 1.5em 10px;
	}
	#related h1, #related h2, #related h3, #related h4, #related h5, #related h6 {
		font-size: 130%;
		color: #025288;
		font-weight: normal;
		margin: 0 0 0.1em 10px;
		border-bottom: solid 3px #025288;
		padding: 0 0 0 20px;
		background: url(/img/bg-related-h.gif) 7px 4px no-repeat;
	}
		#related h1 a, #related h2 a, #related h3 a, #related h4 a, #related h5 a, #related h6 a {
			text-decoration: none;
		}

	#related div {
		margin: 0 0 1em 10px;
		padding: 0 0 15px 0;
		background: url(/img/bg-puff.png) 0 100% no-repeat;
	}
		#related div div {
			border: solid 1px #cecece;
			padding: 0.8em 16px 0 6px;
			margin: 0;
			background: none;
		}
			#related div div div {
				border: none;
				padding: 0;
			}

	/* This is the abstract pattern, and the drop-shadow */
	#related ul, p#relstrap {
		background: url(/img/bg-related.png) top right no-repeat;
		padding-top: 35px;
	}
	/* Telephone numbers, etc. */
	#related p.important {
		border-top: dotted 1px #025288;
		padding-bottom: 0.5em;
		text-align: center;
		font-size: 140%;
		border-bottom: dotted 1px #025288;
		margin-bottom: 0.5em;
		padding-top: 0.5em;
	}
	#related p, #related ul, #related dl {
		margin-left: 10px;
	}
	/* Default list of links in related links */
	#related ul {
		margin-bottom: 2em;
	}
	#related ul li {
		padding: 0.5em 16px;
		background: none;
		border-bottom: dotted 1px #025288;
	}
		#related ul li a {
			text-decoration: none;
			background: url(/img/bullet-related.gif) right no-repeat;
			padding: 0 8px 0 0; 
			display:block;
		}
		/* This isn't consistent, but helps old IE, if the text wraps */
		* html #related ul a {
			display: block;
		}

/* Call-to-action */
.action a, a.action, .action a:visited, a.action:visited {
	display: block;
	width: 165px;
	color: white;
	background: #ef9221 url(/img/sprite-action.png) 0 0 repeat-y;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	font-size: 110%;
/*	margin: 0 0 0 auto;*/
}
#content .action a:visited, a.action:visited {
	color: white;
}
.action a:hover, a.action:hover {
	background: #ef9221 url(/img/sprite-action.png) -885px 0 repeat-y;
}
	.action span {
		display: block;
		color: white;
		background: url(/img/sprite-action.png) -330px 100% no-repeat;
	}
	.action a:hover span, a.action:hover span {
		background: url(/img/sprite-action.png) -1215px 100% no-repeat;
	}
		.action span span {
			background: url(/img/sprite-action.png) -165px 0 no-repeat;
			padding: 0.4em 36px 0.4em 1px;
		}
		.action a:hover span span, a.action:hover span span {
			background: url(/img/sprite-action.png) -1050px 0 no-repeat;
		}
			/* This is to hide content which allows the links to make sense out of context */
			.action span span span {
				padding: 0;
				background: none;
			}
			
h2, #content fieldset legend {
	margin: 0 0 0.5em 0;
	padding: 0.5em 0 0 0;
	color: #025288;
	font-size: 130%;
}

h3, h4, h5, h6 {
	font-size: 125%;
	margin: 0 0 1em 0;
}
h3 {font-size: 125%;}
h4 {font-size: 100%;}
h5, h6 {
	font-size: 90%;
	color: #025288;
}
h6 {color: #ff6a19;}

blockquote {
	margin: 0 0 1em 0;
	background: white;
	border: solid 1px white;
	border-left: solid 5px #025288;
	padding: 19px 14px 0 15px;
	font-style: italic;
}
/* IE + Italics = daft */
* html #content blockquote {
	width: 483px;
	wid\th: 448px;
}
	blockquote cite {
		font-style: normal;
	}

/* Disclaimer */
div#disclaimer {
	color: white;
	background: #025288;
	margin-top: 4.2em;
	padding-top: 1em;
	font-size: 85%;
}
		/* Supplementary navigation */
		map#supnav {
			margin: 0 0 1em 0;
		}
			/* The home icon */
			#supnav p {
				float: left;
				padding: 0 7px 0 0;
			}
				#supnav p img {
					vertical-align: top;
				}

			#supnav li {
				background: url(/img/bg-supnav-li.gif) left no-repeat;
				padding: 0 17px 0 10px;
				display: inline;
			}
				#supnav ul a {
					text-decoration: none;
					border-bottom: dotted 1px white;
				}
				/* You are here */
				#supnav ul em, #supnav ul a:hover {
					font-style: normal;
					border-bottom: solid 1px white;
				}

		#disclaimer a {
			color: white;
		}

/* Killing lists */
ul, ul li, dl, dt, dd, fieldset, legend, map ol, map li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	border: none;
}
ul {
	margin: 0 0 1em 0;
}
#content ul {
	margin: 0 1em 1em 1em;
}
	#content ul li {
		margin-bottom: 0.7em;
	}
	ul li {
		background: url(/img/bullet-default.gif) 2px 4px no-repeat;
		padding-left: 15px;
	}
		ul ul {
			margin-top: 1em;
		}
			ul ul li {
				background: url(/img/bullet-default-ul.gif) 2px 4px no-repeat;
			}
ol li {
	margin-bottom: 0.5em;
	/* tut */
	display: list-item;
}

map li, map ul ul li {
	background: none;
	padding: 0;
}
/* Hiding WAI text */
#head legend label, .action span span span {
	position: absolute;
	top: -1px;
	left: -1px;
	height: 1px;
	width: 1px;
	overflow: hidden;
}
p {margin: 0 0 1em 0;}
a img {border: none;}
a {color: #025288;}
#content a:visited {color: #ef9221;}
#content a:hover {text-decoration: none;}
input, select, textarea {
	color: #4a4a4a;
	background: white;
	border: solid 1px #025288;
	padding: 0.15em 0.2em;
	font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
	font-size: 100%;
}
hr {
	height: 1px;
	margin: 0.5em 0;
	padding: 0;
	border: none;
	border-top: dotted 1px #4f71a9;
}
*:first-child+html legend {margin-left: -7px;}
* html legend {margin-left: -7px;}
input.button, legend input {
	border: none;
	padding: 0;
	background: none;
	vertical-align: bottom;
}
/* To indicate content which is omitted */
s, ins {
	text-decoration: none;
	color: black;
	background-color: #fcf;
	border: solid 1px #969;
	padding: 1px 3px;
}