/*
Norwich and Peterborough Building Society
Astra mortgages
astra_master.css
Author: Robin Scott 
Date created: 15/01/07
Last modified: 22/02/07

Colours:
Dark blue:		#005DAA
Light blue:		#7F99CD
Yellow:			#FFD200
Orange:			#ED8A05
Very dark blue: #043C70

Index
=General
=Structure
=Header
=Navigation
=Left Navigation
=Left Column
=Mid Column
=Right Column
=Footer
*/

/* =General */
* {
	margin: 0px;
	padding: 0px;
}
h1, h2, h3, h4, h5 {
	font: 0.9em Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: white;
	line-height: 1.4em;
	margin-bottom: 1em;
}
h4 {
	color: #005DAA;
	font-size: 140%;
}
ul > h2 {
	margin-top: 20px;
}
h2 {
	font-size: 0.8em;
	margin: 1.4em 0px 0.6em 0px; 
}
p, li, address {
	font: 0.73em Verdana, Arial, Helvetica, sans-serif;
	color: black;
	line-height: 1.6em;
	margin-bottom: 1em;
}
address {
	text-decoration: none;
	font-weight: bold;
}
ul {
	list-style-type: none;
}
p span {
	font-size: 1em;
	font-weight: bold;
	color: #005DAA;
}
a:link, a:visited, a:hover {
	text-decoration: underline;
	color: #005DAA;
	line-height: 1.2em;
}
a:hover {
	color: #005DAA;
}
.extra {
	margin-top: 27px;
}
p.clearleft {
	float: right;
	clear: left;
}
/*
a[href$=".pdf"] {
	background: url(../images/pdf.png) no-repeat 100% 0;
	padding: 0 23px 10px 0;
}
a[href$=".doc"] {
	background: url(../images/word.png) no-repeat 100% 0;
	padding: 0 23px 10px 0;
}
a[href$=".xls"] {
	background: url(../images/excel.png) no-repeat 100% 0;
	padding: 0 23px 10px 0;
}
*/
.width54 {
	width: 54%
}
.width50 {
	width: 50%
}
.width20 {
	width: 20%
}
.width16 {
	width: 16%
}
.news_image {
	float: right;
	margin: 0 0 0 1em;
}

/* =Structure */
body {
	background: url(../images/back_grey.gif);
}
#wrapper {
	background-color: white;
	width: 100%;
	max-width: 1024px;
	min-width: 770px;
	margin: 0px auto;
	text-align: left;
}
/* =Header */
#header {
	background: #005DAA url(../images/header_blocks.jpg) no-repeat right top;
	width: 100%;
}
/* #header .logo {
	margin: 0px 0px 5px;
} */
#header ul.help_nav {
	float: right;
	display: block;
	margin: 30px 0px;
}
#header ul.help_nav li {
	display: inline;
	border-right: 1px solid white;
	padding: 0px 10px;
}
#header ul.help_nav li.last {
	border-right: none;
	margin-right: 15px;
}
#header ul.help_nav a {
	font-size: 85%;
	color: white;
}
#header ul.help_nav a:link, #header ul.help_nav a:visited, {
	color: #FFFFFF;
}
/* =Navigation */
ul#nav {
	background: white url(../images/nav_blocks.jpg) no-repeat right top;
	float: left;
	width: 100%;
}
ul#nav li {
	float: left;
	background: #FFD200 url(../images/tab-r.gif) no-repeat right top;
	margin-right: 3px;
	margin-bottom: 0px;
	font: 13px Arial, Helvetica, sans-serif bolder;
}
ul#nav li a {
	background: url(../images/tab-l.gif) no-repeat;
	text-decoration: none;
	text-align: center;
	font-weight: bolder;
	display: block;
	color: #043C70;
	min-width: 80px;
	height: 17px;
	padding: 3px 10px 3px;
	text-decoration: none;
	float: left; /* IE5/Mac only */
}
ul#nav li.home {
	margin-left: 20px;
}
ul#nav li:hover, ul#nav li:focus, ul#nav li.over {
	background: #FBB453 url(../images/tab-r-on.gif) no-repeat right top;
}
ul#nav li a:hover, ul#nav li a:focus {
	background: url(../images/tab-l-on.gif) no-repeat left top;
}
.home ul#nav li.home, .products ul#nav li.products, .calculators ul#nav li.calculators, .downloads ul#nav li.downloads, .approval ul#nav li.approval, .register ul#nav li.register, .legal ul#nav li.legal, .panel ul#nav li.panel,.lending ul#nav li.lending, .contact ul#nav li.contact  {
	background: url(../images/selctab_right.jpg) no-repeat right top;
}
.home ul#nav li.home a, .products ul#nav li.products a, .calculators ul#nav li.calculators a, .downloads ul#nav li.downloads a, .approval ul#nav li.approval a, .register ul#nav li.register a, .panel ul#nav li.panel a, .legal ul#nav li.legal a, .lending ul#nav li.lending a, .contact ul#nav li.contact a  {
	background: url(../images/selctab_left.jpg) no-repeat;
	padding: 9px 15px 3px;
	font-size: 15px;
	height: 39px;
}
/* Commented Backslash Hack for IE5/Mac \*/
ul#nav li a { float: none; }
/* End IE5/Mac hack */

/* =Left Column */
div#left_col {
	float: left;
	padding: 10px 0px 0px 20px;
}
div#left_col .left_content {
	background: #FFFFFF;
	padding: 30px 0px 10px 0px;
	margin-bottom: 10px;
}
div#left_col h1 {
	background-color: #043C70;
	padding: 2px 10px;
}
div#left_col p {
	color: white;
	padding: 2px 10px;
}
ul#left_nav li {
	background: url(../images/left_nav_btn_top.gif) no-repeat;
	width: 93px;
	margin: 0px 0px 4px 5px;
	font-size: 0.8em;
	font-family: Arial, Helvetica, sans-serif;
	float: left;
}
ul#left_nav li a {
	background: url(../images/left_nav_btn_bottom.gif) no-repeat bottom;
	text-align: center;
	font-weight: bold;
	display: block;
	color: #043C70;
	text-decoration: none;
	padding: 4px;
}
p.link, p.link a {
	font-weight: normal;
	text-align: left;
	margin: 50px 0px 0px 0px;
	background: none;
	color: white;
	width: auto;
}
p.news, p.news a {
	margin: 10px 0px 0px 0px;
	line-height: 1.7em;
}
p.link a:link {
	text-decoration: underline;
}
p.link a:hover, p.link a:visited, p.link a:active {
	color: white;
	line-height: 1.7em;
}
div#left_col p.white {
	width: 100%;
	height: 10px;
	background-color: white;
	color: white;
	margin: 25px 0px 15px 0px;
	padding: 0px;
}
ul#news {
	padding-left: 10px;
}
ul#news li a {
	font-weight: normal;
	text-align: left;
	margin: 40px 0px 0px 0px;
	background: none;
	color: white;
	width: auto;
}

ul#news li a:link {
	text-decoration: underline;
}
ul#news li a:hover, ul#news li a:visited, ul#news li a:active {
	color: white;
}
div#left_col h2, div#left_col h3, div#left_col h4 {
	font-weight: bold;
	color: white;
	line-height: 1.7em;
	margin: 0px 0px 1em 10px;
}
div#left_col h4 {
	font-size: 120%;
	margin: 0px 0px 0.7em 10px;
}
div#left_col h3 {
	margin: 0px 0px 0px 10px;
}
/* =Mid Column */
div#mid_col {
	float: left;
	padding: 5px 0px 0px 26px;
}
div#mid_col h1, div#mid_col h2, div#mid_col h3 {
	font-weight: bold;
	font-size: 150%;
	color: #005DAA;
	margin-bottom: 0.5em;
}
div#mid_col h2 {
	font-size: 90%;
}
div#mid_col h3 {
	font-size: 73%;
}
div#mid_col table#central-links td {
	width: 20%;
	vertical-align: top;
	background-color: #005DAA;
}
div#mid_col table#central-links td a {
	text-decoration: none;
}
div#mid_col table#central-links td a p {
	color: white;
	font: 11px Verdana, Arial, Helvetica, sans-serif bold;
	padding-top: 10px;
	width: 80%;
	text-align: center;
}
div#mid_col table#central-links td.one a {
	display: block;
	height: 122px;
	background-color: #005DAA;
	background: url(../images/btn_8day.gif) no-repeat;
}
div#mid_col table#central-links td.one a:hover, div#mid_col table#central-links td.on-one a {
	background: url(../images/btn_8day.gif) no-repeat 0 -122px;
}
div#mid_col table#central-links td.two a {
	display: block;
	height: 122px;
	background-color: #005DAA;
	background: url(../images/btn_service.gif) no-repeat;
}
div#mid_col table#central-links td.two a:hover, div#mid_col table#central-links td.on-two a {
	background: url(../images/btn_service.gif) no-repeat 0 -122px;
}
div#mid_col table#central-links td.three a {
	display: block;
	height: 122px;
	background-color: #005DAA;
	background: url(../images/btn_onlineapps.gif) no-repeat;
}
div#mid_col table#central-links td.three a:hover, div#mid_col table#central-links td.on-three a {
	background: url(../images/btn_onlineapps.gif) no-repeat 0 -122px;
}
div#mid_col table#central-links td.four a {
	display: block;
	height: 122px;
	background-color: #005DAA;
	background: url(../images/btn_risk.gif) no-repeat;
}
div#mid_col table#central-links td.four a:hover, div#mid_col table#central-links td.on-four a {
	background: url(../images/btn_risk.gif) no-repeat 0 -122px;
}
div#mid_col table#central-links td.left {
	width: 7%;
	background: url(../images/options-left.gif) no-repeat;
}
div#mid_col table#central-links td.right {
	width: 3%;
	background: url(../images/options-right.gif) no-repeat right 0;
}
#holder {
	margin: 20px 0px 0px 0px;
	position: relative;
	height: 200px;
}
#layer2, #layer3, #layer4 {
	visibility: hidden;
	position: absolute;
	background-color: white;
	top: 0px;
	left: 0px;
}
div#mid_col h1.sub {
	font-size: 98%;
}
div#mid_col ul.latest h2 {
	font-size: 110%;
	color: #005DAA;
	padding: 0px;
	margin: 0px;
	text-decoration: none;
}
div#mid_col ul.latest p {
	font-size: 0.82em;
	padding: 0px;
	margin: -1px;
	color: #005DAA;
}
div#mid_col ul.latest li {
	float: left;
	margin-right: 30px;
	display: block;
}
div#mid_col ul.latest li a {
	background: url(../images/yellow_bullet.gif) no-repeat 0 3px;
	display: block;
	padding-left: 35px;
}
div#mid_col table.download {
	width: 100%;
}
div#mid_col table.download td {
	background: url(../images/yellow_bullet_dwn.gif) no-repeat 0 3px;
	/*margin-right: 30px;*/
	display: block;
	vertical-align: top;
	padding: 0px 0px 15px 0px;
	width: 50%;
}
div#mid_col table.download h2 {
	font-size: 74%;
	color: #005DAA;
	padding: 0px;
	margin: 0px;
	width: 100%;
	padding-left: 30px;
	text-decoration: none;
}
div#mid_col table.download p {
	font-size: 0.6em;
	padding: 0px;
	margin: 0px;
	padding-left: 30px;
	color: #005DAA;
}
div#mid_col div.contacts {
	width: 45%;
	float: left;
	margin-right: 13px;
}
div#mid_col div.contacts a {
	color: black;
}
div#mid_col p.sub {
	clear: left;
	margin-bottom: 0px;
}
div#mid_col ul.bullets li {
	list-style: disc inside;
	padding-left: 10px;
	text-indent: -10px;
}
div#mid_col div.contact_profile img {
	margin-bottom: 0.5em;
}
div#mid_col div.contact_profile {
	float: left;
	width: 50%;
	margin-top: 1em;
}
div#mid_col img.contact_map {
	float: left;
}
div#mid_col h2.contact_areas {
	clear: both;
}

/* =Right Column */
div#right_col {
	float: right;
	padding-right: 20px;
}
div#right_col h1, div#right_col h2 {
	height: 150px;
	font-size: 109%;
	display: block;
	background-image: url(../images/banner3_left.jpg);
	background-repeat: no-repeat;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 5%;
	/*margin: 0px;*/
}
div#right_col h1 a, div#right_col h2 a {
	background: url(../images/banner3_right.jpg) no-repeat 100% 100%;
	text-align: center;
	height: 150px;
	display: block;
	color: #005DAA;
	text-decoration: none;
}
div#right_col h1 a span, div#right_col h2 a span {
	display: block;
	padding: 40px 5% 0px 0px;
}
div#right_col h2 {
	background: url(../images/banner2_left.jpg) no-repeat;
	margin-top: 10px;
	font-size: 135%;
}
div#right_col h2 a {
	background: url(../images/banner2_right.jpg) no-repeat 100% 100%;
}
ul#dataclause li {
	list-style: disc inside;
	padding-left: 10px;
	text-indent: -10px;
}
table.dataclause {
	font: 0.73em Verdana, Arial, Helvetica, sans-serif;
	color: black;
	line-height: 1.6em;
	margin-bottom: 1em;
}

/* =Right Column Standard page content */
div#right_col .right_content {
	background: #005DAA url(../images/left-content-back.jpg) no-repeat;
	padding: 30px 0px 10px 0px;
	margin-bottom: 10px;
}
div#right_col .right_content h5 {
	background-color: #043C70;
	padding: 2px 10px;
}
div#right_col .right_content li {
	color: white;
}

/* double column class for bullets */
.double {
	display: block;
}
.double li {
	width: 30%;
	float: left;
}
.double li.second {
	float: right;
	width: 50%;
}
#text_column p.links, #text_column_home p.links {
	margin: 1em 0px;
}
#text_column p.acrobat, #text_column_home p.acrobat {
	display: inline;
	margin: 0 10px 20px;
}
#text_column img.award, #text_column_home img.award {
	margin: 10px 20px 20px;
}
/* =Footer */
#footer {
	background-color: #005DAA;
	clear: both;
	height: 170px;
	margin: 20px 0px 0px 0px;
	border-top: 1px solid #CCCCCC;
}
#footer p {
	color: white;
	font-size: 0.6em;
	margin: 10px 0px 0px 25%;
}

/*form styling*/

.form #content form {
	color: #02277e;
}

.form #content form fieldset {
	border: 0px none;
	background: #e5f3e9;
	margin: 3em 0px;
	padding: 20px 4px 10px;
	position: relative;
	border-top: 24px solid; /* Top border only works properly in Firefox */
	border-top-color: #FFFFFF;
}

.form #content form fieldset legend {
	margin-top: 0px;
	position: absolute;
	top: -1.8em;
	left: -8px;
	width: 101.5%;
	font-weight: bold;
	background: #fff;
	line-height: 1.5em;
	border-bottom: 1px solid #0d824c;
	padding-bottom: 3px;
}


/* Hack that targets all modern browsers except IE7. This is required to show the underlined legend differently in Firefox which does not extend the underline out to the edge of the fieldset, background contains line.png to create false underline - not ideal*/

html>/**/body.form #content form fieldset legend { 
	border-bottom: 1px solid #FFFFFF;
}

html>/**/body.form #content form fieldset {
	padding: 35px 4px 10px;
	background-image: url(../images/line.png);
	background-repeat: repeat-x;
}
/* End hack */


.form #content form fieldset label {
	display: block;
	font-size: 0.9em;
	margin-top: -0.8em;
	font-weight: bold;
}

.form #content form fieldset input, .form #content form fieldset textarea, .form #content form fieldset select {
	display: block;
	position: relative;
	top: -1.2em;
	left: 12em;
	width: 50%;
	border: 1px solid #0d824c;
	/* Inset as per style guide */
	border: 2px inset #0d824c;
}

/* Selects are smaller because they have times in them */
.form #content form fieldset select {
	width: 10em;
}

/* spans are used to display validation messages */
.form #content form span.rules {
	position: relative;
	left: 15em;
	top: -1.4em;
	font-size: 0.9em;
	font-weight: bold;
	line-height: 180%;
	color: #c00;
}

.form #content fieldset.radio span.rules {
	left: 0;
}

.form #content form span.radio {
	left: 5em;
	top: -1em;
}

.form #content form fieldset input.short {
	width: 15%;
}

.form #content form fieldset label.check input {
	width: 15px;
	top: -1em;
	border: 0px none;
}

.form #content form fieldset label.radio {
	float: left;
	width: 30%;
}

.form #content form fieldset label.radio input {
	display: inline;
	top: 2px;
	left: 0px;
	border: 1px solid #000000;
	width: auto;
	margin-left: 4em;
}

.form #content form fieldset label.tick {
	float: left;
	width: 60%;
	border: 0px none;
}

.form #content form fieldset label.tick input {
	display: inline;
	top: 2px;
	left: 0px;
	border: 1px solid #000000;
	width: auto;
	margin-left: 2em;
}

.form #content form fieldset label.long input {
	top: -0.5em;
	left: 0px;
	width: 15px;
}

.form #content form fieldset label.long {
	font-weight: normal;
	margin: 1em 0;
}

.form #content form fieldset label.long input {
	top: 0.5em;
}

.form #content form fieldset label.inline input {
	display: inline;
	top: 0.2em;
	margin-left: 0.3em;
	border: 1px solid #000000;
}

.form #content form button {
	font-size: 1.2em;
	font-weight: bold;
	color: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background: #0d824c;
	padding: 6px;
	cursor: pointer;
	margin-top: -1.5em;
	border: 1px solid #000000;
}

.form #content span {
	color: #0d824c; /* Mandatory field asterisks */
}

.form #content form fieldset input.hidden {
	display: none;
}

/* List of errors */
div#errors {
	border: 2px solid #c00;
	margin: 0 1.8em;
	background: url(../images/exclamation.gif) no-repeat 5px 3px;
}

#errors dl dt {
	font-weight: bold;
	margin: 0.8em 2.4em 0.8em 60px;
}

#errors dl dd {
	display: block;
	margin-left: 60px;
	padding-left: 28px;
	line-height: 21px;
	background: url(../images/x.gif) no-repeat 0 50%;
}

.clear {
clear:left;
}

.mbe {
	clear:both;
	margin-top: 500px;
	margin-bottom: 100px;
}