/**************************************/
/*** FORCES PLAN GLOBAL STYLE SHEET ***/
/**************************************/
/*** 
/*** THIS CODE LAST UPDATED: 22/02/10
/***
//*** (REMEMBER TO CHANGE REVISION CODE IN 'php_config.inc.php')
/***


COLOURS:

Lime Green (menu rollover/selected & solid areas and borders)
	RGB: R=180; G=217; B=48		=> rgb(180,217,48)	or #b4d930	

Dark Lime Green (for headings only)
	RGB: R=172; G=211; B=30		=> rgb(172,211,30)	or #acd31e

Light Green Tint (menu bars and some button rollovers)
	RGB: R=228; G=242; B=175	=> rgb(228,242,175)	or #e4f2ac


Grey surround colour for whole web page:
	15% black (= 85% white)
	RGB: R=206; G=206; B=206	=> rgb(206,206,206)	or #cdcdcd

Fonts
	The body is Verdana
	The large heading font is Tahoma
	Sub-headings & Questions are Verdana

Padding/Margin Short-hand Syntax 
	padding: <top> <right> <bottom> <left>;
  eg	padding: 0px 5px 10px 5px;

***/


/***
/*** Set basic layout and incoroprate various fixes to known browser problems
/**/
/* Set body background colour white here so that it is white while pages loads (later set to grey ) */
body#main {color: black; background-color: white; margin: 0; padding-top: 20px; 
	min-width: 801px; 	/* Fix for NS6 (no horiz scroll bar if window too narrow) */
	text-align: center; 	/* Fix for IE5.x/IE6 in quirks mode (auto margins don't work), part 1.. */
	background: white url("../Images/watermark.gif") repeat left top; /* Used on T_E_S_T and D_E_M_O sites */
	}
#mainWrapper {width: 801px; margin: 0 auto; background: white url("../Images/bg.gif") repeat-y left top ; 
	text-align: left; 	/* .. Fix for IE5.x/IE6 in quirks mode (auto margins don't work), part 2 */
	}
#contentBorderWrapper {border-right: 1px solid black; } /* Extra DIV to provide right-border (but not for footer) */
* html #contentBorderWrapper {width: 800px; } /* 'Star-hack' for IE5.x/IE6 - without width being defined, border breaks up when page scrolled or menu links hovered over */
#header {border-bottom: 2px solid white; 	/* As all content is floated, seem to need border here in order for background to work properly in IE6/NS6 */
	background: rgb(180,217,48) url("../Images/headerPhotoRight_bg.jpg") no-repeat right top; 	/* Right-hand image rendered as background to avoid "pixel-squeeze" causing image to wrap to new line */
	}
#menu {width: 112px; float: left; }
#content {float: right; width: 626px; 
	min-height: 316px;  /* To give overall height of 600px; */ 
	}
* html #content {height: 316px; } /* 'Star-hack' for IE5.x/IE6 which effectively implements 'heignt' as 'min-height' */
#textMenu {width: 626px; float: right; }
#footerBar {
	clear: both; 
	background-color: rgb(180,217,48);
	/*border-top: 2px solid white;*/ 
	border-bottom: 4px solid black; 
	}
#footerBar div {height: 20px; border-top: 2px solid white; } /* Top border needs to go here; if on '#footerBar', you get 2px 'padding' above this DIV which cannot be removed */
#footer {padding-right: 1px; } /* Instead of black border */

/***
/*** Common (global) styles
/**/
body {font: 11px Verdana,sans-serif; color: #000000; 
	line-height: 1.5; } /* NOTE: 'normal' line-height may be browser-dependent but seems to be 1.2 for most browsers (ie NOT 1 !!)*/
select {font: 12px Verdana,sans-serif; }

h1, h2, h3 {line-height: 1; margin: 0; padding: 0; }
h1 {color: rgb(172,211,30); font-family: Tahoma,Verdana,sans-serif; font-size: 36px; font-weight: normal; margin-top: 32px; margin-bottom: 30px; }
h2 {color: rgb(172,211,30); font-size: 18px; font-weight: normal; margin-top: 32px; margin-bottom: 17px; }
h2.black {color: black; margin-bottom: 0; }
h2.spaced {margin-top: 70px; }
h3 {color: black; font-size: 12px; font-weight: bold; margin-top: 2em; margin-bottom: -0.8em; } /* Negative bottom margin to place closer to following paragraph */
h3.red {color: red; margin-bottom: 0; }
body.faqs h3 {margin-top: 3em; line-height: 1.5; }
/*body.policySummary h3 {margin-bottom: 16px; }*/

.bold {font-weight: bold; }
.red {color: red !important; }
.black {color: black !important; }
.grey {color: rgb(100,120,100) !important; }

p {padding: 0; margin: 20px 0 0 0; }
p.spaced {margin-top: 27px; margin-bottom: 25px; }
p.spaced2 {margin-top: 40px; margin-bottom: 30px; }
p.spaceAfter {margin-bottom: 40px; }
/*body.policySummary p {margin-top: 12px; }*/

img {border: 0; }

form {padding: 0; margin: 0; }
select {margin-bottom: 0px; }

table {border-collapse: collapse; }
td, th {text-align: left; vertical-align: top; }
td.nowrap, th.nowrap {white-space: nowrap; }

br.clear {clear: both; }
div.clear {clear: both; }
div.clear.border {border-bottom: 1px solid white; } /* In some cases(eg NS6), need a border to make it clear properly (or to stop margins from for some reason collapsing to nothing) */ 

ul, ol {padding: 0; margin: 10px 0 0 0; }
/*body.policySummary ul {margin-top: 12px; }*/
ol ul {list-style-type: disc; margin-top: -5px; }
ul.noBullets {list-style: none; }
/* Remove indent from lists: */
ul {margin-left: 15px; }
ul.noBullets {margin-left: 0px; }
* html ul {margin-left: 20px; } /* 'Star-hack' for IE5.x/IE6 which needs more margin to left-justify lists */
/* (8/1/10) WHEN INDEX NO LONGER DOUBLE FIGURES, MARGIN WAS REDUCED BUT STILL HAD INDENT, SO REDUCED FURTHER:
ol {margin-left: 25px; }
* html ol {margin-left: 30px; } /* 'Star-hack' for IE5.x/IE6 which needs more margin to left-justify lists /
ol h3 {color: rgb(172,211,30); margin-left: -25px; margin-top: 2em; margin-bottom: 1em; }
* html ol h3 {margin-left: -30px; } /* 'Star-hack' for IE5.x/IE6 which needs more margin to left-justify lists /
*/
ol {margin-left: 20px; }
* html ol {margin-left: 25px; } /* 'Star-hack' for IE5.x/IE6 which needs more margin to left-justify lists */
ol h3 {color: rgb(172,211,30); margin-left: -20px; margin-top: 2em; margin-bottom: 1em; }
* html ol h3 {margin-left: -25px; } /* 'Star-hack' for IE5.x/IE6 which needs more margin to left-justify lists */
/* Need more margin if index reaches double figures:
ol {margin-left: 30px; }
etc.

ul.noIndent {padding: 0; margin-left: 15px; }
ol.noIndent {padding: 0; margin-left: 25px; }
* html ul.noIndent {margin-left: 20px; } /* 'Star-hack' for IE5.x/IE6 which needs more margin to left-justify bullets 
* html ol.noIndent {margin-left: 30px; } /* 'Star-hack' for IE5.x/IE6 which needs more margin to left-justify bullets 
*/

ul.spaced li, ol.spaced li {margin-bottom: 10px; margin-top: 10px; }
ol.spaced ul li {margin-bottom: 5px; margin-top: 5px; }

/* Make bullets green: */
ul {color: rgb(172,211,30); }
ul span, ul.noBullets {color: #000; }

a:link, a:visited {color: black; text-decoration: underline; }
a:hover {text-decoration: none; }
a.hoverUnderline:link, a.hoverUnderline:visited {text-decoration: none; }
a.hoverUnderline:hover {text-decoration: underline; }

/***
/*** HEADER styles
/**/
#header img {float: left; border-right: white 2px solid; border-bottom: white 2px solid; }
#header img.left {border-bottom: 0; }
#header img.right {border-right: 0; }


/***
/*** MENU styles
/**/
#menu {font-size: 10px; background-color: rgb(228,242,175); }
#menu ul {list-style: none; padding: 0; margin: 0; }
#menu li {padding: 0; margin: 0; }
#menu ul.submenu {display: none; }

#menu a:link, #menu a:visited, #menu li.spacer {display: block; line-height: 12px; width: 100%; padding: 4px 0; 
	border-bottom: white 2px solid; color: #000; text-align: right; text-decoration: none; 
	}
#menu a:hover {background-color: rgb(180,217,48); }

#menu a.bigButton {text-align: center; background-color: rgb(180,217,48); padding-top: 12px; padding-bottom: 16px; }
#menu a.bigButton:hover {text-decoration: underline; }
#menu a.bigButton span {display: block; font-size: 12px; font-weight: bold; line-height: 20px; margin-bottom: 4px; }

#menu ul.submenu a:link, #menu ul.submenu a:visited {color: white; background-color: black; }
#menu ul.submenu a:hover {color: rgb(180,217,48); background: black url("../Images/submenuBg.gif") no-repeat left top; }


/*** Highlight active top-level menu item (when page itself, or any of its submenu pages, are displayed): ***/
body.home #menu a.home,
body.register #menu a.register,
body.quote #menu a.quote,
body.retrieveQuote #menu a.retrieveQuote,
body.phLogin #menu a.phLogin,
	body.updateDetails #menu a.phLogin,		/* Submenu of: policyholder login */
	body.amendCover #menu a.phLogin,
	body.changeAddress #menu a.phLogin,
	body.makeClaim #menu a.makeClaim,
	body.changePassword #menu a.phLogin,
body.aboutFP #menu a.aboutFP,
	body.whatsCovered #menu a.aboutFP,		/* Submenu of: about forces plan */
	body.whoCanBuy #menu a.aboutFP,
/*	body.policySummary #menu a.aboutFP,
	body.fullPolicy #menu a.aboutFP,*/
body.importantDocuments #menu a.importantDocuments,
body.otherInsurance #menu a.otherInsurance,
body.help #menu a.help,
	body.faqs #menu a.help,				/* Submenu of: help */
	body.contentsHints #menu a.help,
	body.definitions #menu a.help,
body.aboutCherish #menu a.aboutCherish,
/*	body.terms #menu a.aboutCherish,			/* Submenu of: about Cherish */
	body.complaints #menu a.aboutCherish,		/* Submenu of: about Cherish */
body.regulation #menu a.regulation,
body.contact #menu a.contact,
	body.helplines #menu a.contact,		/* Submenu of: contact */
	body.claimsProcedure #menu a.contact,
body.feedback #menu a.feedback
	{
	background-color: rgb(180,217,48);  
	}

/*** Hide cursor "link-indicator" behaviour of top-level menu item when corresponding page is displayed (NB link would still reload page if clicked): ***/ 
body.home #menu a.home,
body.register #menu a.register,
body.quote #menu a.quote,
body.retrieveQuote #menu a.retrieveQuote,
body.phLogin #menu a.phLogin,
body.aboutFP #menu a.aboutFP,
body.importantDocuments #menu a.importantDocuments,
body.otherInsurance #menu a.otherInsurance,
body.help #menu a.help,
body.aboutCherish #menu a.aboutCherish,
body.regulation #menu a.regulation,
body.contact #menu a.contact,
body.feedback #menu a.feedback
	{
	cursor: default; 
	}

/*** Also hide cursor "link-indicator" behaviour for header images when home page is active: ***/
body.home #header a {cursor: default; }

/*** Display sub-menu (if applicable): ***/
body.phLogin.loggedIn #menu ul.phLogin,
	body.updateDetails.loggedIn #menu ul.phLogin,	/* Submenu of: policyholder login */
	body.amendCover.loggedIn #menu ul.phLogin,
	body.changeAddress.loggedIn #menu ul.phLogin,
	body.makeClaim.loggedIn #menu ul.phLogin,
	body.changePassword.loggedIn #menu ul.phLogin,
body.aboutFP #menu ul.aboutFP,
	body.whatsCovered #menu ul.aboutFP,		/* Submenu of: about forces plan */
	body.whoCanBuy #menu ul.aboutFP,
/*	body.policySummary #menu ul.aboutFP,
	body.fullPolicy #menu ul.aboutFP,*/
body.help #menu ul.help,
	body.faqs #menu ul.help,			/* Submenu of: help */
	body.contentsHints #menu ul.help,
	body.definitions #menu ul.help,
body.aboutCherish #menu ul.aboutCherish,
/*	body.terms #menu ul.aboutCherish,			/* Submenu of: about Cherish */
	body.complaints #menu ul.aboutCherish,		/* Submenu of: about Cherish */
body.contact #menu ul.contact,
	body.helplines #menu ul.contact,		/* Submenu of: contact */
	body.claimsProcedure #menu ul.contact
	{
	display: block; 
	}
	
/*** Highlight active sub-menu menu item (and hide cursor "link-indicator" behaviour): ***/
body.updateDetails #menu a.updateDetails,		/* Submenu of: policyholder login */
body.amendCover #menu a.amendCover,
body.changeAddress #menu a.changeAddress,
body.makeClaim #menu a.makeClaim,
body.changePassword #menu a.changePassword,
body.whatsCovered #menu a.whatsCovered,		/* Submenu of: about forces plan */
body.whoCanBuy #menu a.whoCanBuy,
/*body.policySummary #menu a.policySummary,
body.fullPolicy #menu a.fullPolicy,*/
body.faqs #menu a.faqs,					/* Submenu of: help */
body.contentsHints #menu a.contentsHints,
body.definitions #menu a.definitions,
/*body.terms #menu a.terms,				/* Submenu of: about Cherish */
body.complaints #menu a.complaints,			/* Submenu of: about Cherish */
body.helplines #menu a.helplines,			/* Submenu of: contact */
body.claimsProcedure #menu a.claimsProcedure
	{
	color: rgb(180,217,48); background: black url("../Images/submenuBg.gif") no-repeat left top; cursor: default; 
	}

/*** Display 'make a claim' as separate menu item when policyholder not logged in: ***/
body.phLogin.loggedIn #menu a.makeClaimTop {
	display: none;
	}

/*** Only display 'FP2 sign up' button (and associated spacer) for homepage... */
#menu a.homeOnly, #menu li.spacer {
	display: none;
	}
body.home #menu a.homeOnly, body.home #menu li.spacer {
	display: block;
	}
/* ... plus don't highlight 'quote' entry in menu when doing quote for FP2 Registration: ***/
body.fp2Reg #menu a.quote
	{
	background-color: rgb(228,242,175);  
	}


/***
/*** TEXT-MENU styles
/**/
#textMenu {font-size: 10px; font-family: Tahoma,Verdana,sans-serif; text-align: left; }
#textMenu ul {float: left; list-style: none; text-align: center; padding: 0; margin: 52px 0 20px 0; }
/* BEFORE 'site plan' added (forcing 'other insurance services' onto 1st row):
#textMenu li {display: inline; line-height: 16px; margin: 0 14px; }

IF YOU NEED DIFFERENT SPACING ON THE 2 ROWS, ENCLOSE 1 IN '<SPAN>' TAGS:
#textMenu li {display: inline; line-height: 16px; margin: 0 6px; }
#textMenu span li {margin: 0 16px; }
*/
#textMenu li {display: inline; line-height: 16px; margin: 0 6px; }
#textMenu li.left {margin-left: 0; }
#textMenu li.right {margin-right: 0; }
#textMenu a:link, #textMenu a:visited {color: rgb(50%,50%,50%); text-decoration: none; }
#textMenu a:hover {text-decoration: underline; }


/***
/*** CONTENT styles (including INFOWRAPPER for floated info/help)
/**/
#content {margin-top: 20px; margin-bottom: 0px; }
/*body.policySummary #content {background: transparent url("../Images/keyfacts.gif") no-repeat 425px 32px; }*/
body.faqs h3, #content p, #content div.quoteBox, #content .displayBox {width: 533px; } /* Should really be 536px but reduced slightly for improved word wrap on home page */
div.contentWidth {
	position: relative; width: 536px;	/* Use where you want to right-justify elements in space to right of standard element (eg 2 buttons on same line).. */
	border-top: 1px solid white; 		/* .. sometimes needs this for positioned child element to work properly */
	}

#content ul, #content ol {margin-right: 100px; }	/* Right-margin used to reduce width as for <p>, etc. above (for some reason, using 'width' breaks listing style) */
#content ol ul {margin-right: 0; }				/* Don't want extra margin in nested lists */

#content p.alert, #content p.tip {width: 500px; }
#content p.alert, #content p.tip, #info p.alert, #info p.tip {padding-left: 33px; }
p.alert {background: transparent url("../Images/alertButton.gif") no-repeat 0px 3px; }
p.tip {background: transparent url("../Images/tipButton.gif") no-repeat 0px 3px; }
p.alert.extraParagraph, p.tip.extraParagraph {background: none; }
p.alert.oneline, p.tip.oneline {line-height: 3; }			/* Need to ensure single-line of text is tall enough to show whole icon.. */
p.alert.oneline, p.tip.oneline {background-position: left center; }	/* .. and that icon is vertically centred to text. */

#content p.note {width: 400px; margin: 0 0 12px 0; }
#content p.links {margin: 40px 0 40px 0; }
#content div.tight p, #content p.tight {margin-top: 10px; margin-bottom: 10px; } /* See also: #info p.tight */

#content table th {font-weight: bold; }
#content table td, #content table th {padding: 10px 20px 0 0; }

#content table.regulation {width: 578px; } /* Widened slightly (was 533px) to avoid sub-headings wrapping */
#content table.regulation td {padding: 0 50px 0 0; }
#content table.regulation th {padding: 32px 0 0 0; text-align: center; } /* To align icons with 'h2' headings */
body.regulation #content h1 {margin-bottom: 0; } /* Margin removed as it won't collapse with the following h2 'margin-top' inside a table */
#content table.regulation p {width: 100%; }

#content table.contact {width: 533px; margin: 20px 0; }
#content table.contact th {white-space: nowrap; }
#content table.contact p {width: 100%; margin: 0 0 10px 0; }

#content label {display: block;  
	font-size: 18px; font-weight: normal; color: rgb(172,211,30); 
	padding: 0; margin: 32px 0 14px 0; 
	}

body.form2col #content p {clear: both; }

body.form2col #content p label {display: inline; float: left; width: 300px; margin: 0; }
body.form2col #content p label.small {float: left; font-size: 11px; color: black; width: 500px; }
body.form2col #content p input {width: 200px; }
body.form2col #content p textarea {width: 100%; height: 150px; }
body.form2col #content p input.narrow {width: 130px; float: left; }
body.form2col #content input.checkbox {width: auto; }
body.form2col #content input.char2 {width: 25px; }
body.form2col #content input.char4 {width: 50px; }
body.form2col #content input.left {float: left; margin-top: 4px; margin-right: 10px; }
* html body.form2col #content input.left {margin-top: 0; } /* 'Star-hack' for IE5.x/IE6 which doesn't ened any top margin */

/* Changed 3/9/09 as it was affecting 'span's in star-rating code at end of Quote: */
/*body.form2col #content p span {float: left; width: 70px; padding-top: 3px; }*/
/* I think this is only used in 'register.php' & 'fp2.php' (with locally reduced width) to put 'BG116/EA' / 'FOR' (respectively) beside narrow text box), so could be written as:*/
/*body.register #content p span, body.fp2Reg #content p span {float: left; width: 70px; padding-top: 3px; }*/
/* Changed again 11/1/10 as it was still affecting 'span's in star-rating code at end of Quote in.. */
/* .. 'register.php' & 'fp2.php' (where 'register'/'fp2' included in body class). Fix was to add 'preifx' class to 'span's: */
body.register #content p span.prefix, body.fp2Reg #content p span.prefix {float: left; width: 70px; padding-top: 3px; }

/*** 2-column format when displayed as list (ie not form fields):							*/
/*** (need to use different method to space out entries so that text doesn't wrap underneath label)	*/ 
body.form2col #content div.listForm p {margin-top: 0px; }
body.form2col #content div.listForm p label {padding-bottom: 10px; }

body.form2col #content h2 label.small {display: inline; /* For some reason, need to repeat 'display: inline' for NS */
	float: none; width: auto; 
	font-size: 11px; color: black; margin-left: 1em
	}

body.form2col.yourDetails #content p label,
body.form2col.ddi #content p label,
body.form2col.changePassword #content p label,
body.form2col.updateDetails #content p label,
body.form2col.changeAddress #content p label,
body.form2col.makeClaim #content p label
	{color: black; font-size: 12px; font-weight: bold;  width: 200px; }
body.form2col.makeClaim #content p label {font-weight: normal; line-height: 1.3; width: 310px; margin-right: 10px; }
/* NB LABEL WIDTH, WAS: 315px BUT 314px MAX for IE6 to avoid wrapping (so make 310px to give some margin) 
*/
body.form2col.updateDetails #content p label {width: 250px; }
body.form2col.ddi #content p label {width: 300px; }

body.form2col.makeClaim #content p label.wide, 
body.form2col.yourDetails #content p label.wide 
	{width: auto; }

body.form2col.additionalInfo #content input.desc {width: 300px; }
body.form2col.additionalInfo #content input.value {width: 80px; }
body.form2col.additionalInfo #content th, body.buy #content td {vertical-align: middle; }
body.form2col.additionalInfo #content thead th {text-align: center; }
body.form2col.additionalInfo #content tbody th {text-align: right; font-weight: normal; }

body.form2col.importantInfo #content ol select {display: block; margin: 10px 0 20px 0; }
body.form2col.importantInfo #content ol p.alert {width: auto; margin-top: 15px; margin-bottom: 20px; }

body.form2col.ddi #content img {float: right; margin: 10px 100px; }
body.form2col.ddi #content div.ddiGuarantee {margin-top: 60px; }
body.form2col.ddi #content div.ddiGuarantee img {margin: 10px 20px; }
body.form2col.ddi #content div.ddiGuarantee ul {clear: both; font-size: 10px; margin-bottom: 20px; }

/* Style small links within/beside labels and headings (eg 'more info')... */
#content label a:link, #content label a:visited, #content h2 a:link, #content h2 a:visited {font-size: 11px; font-weight: normal; color: black; 
	text-decoration: underline; 
	margin-left: 1em; 
	}
#content label a:hover, #content h2 a:hover {text-decoration: none; }
body.form2col #content p label.small a:link {margin-left: 0; }
/* ... but undo this when 'full' link specified (and, as it is a heading, also reverse underlining, ie underline on hover): */
#content h2 a.full:link, #content h2 a.full:visited {font-size: inherit; font-weight: inherit; color: inherit; 
	text-decoration: none; 
	margin-left: 0; 
	}
#content h2 a.full:hover {text-decoration: underline; }

#content .displayBox {border: 2px solid rgb(180,217,48); padding-bottom: 32px; }
#content .displayBox h2, #content .displayBox h3, #content .displayBox p {width: auto; margin-left: 20px; margin-right: 20px; }

.importantInfo #content .displayBox {padding-bottom: 0; margin-bottom: 5px; }
.importantInfo #content .displayBox h3, .importantInfo #content .displayBox p {margin-top: 10px; margin-bottom: 10px; }
.importantInfo #content .displayBox table {margin-left: 20px; margin-bottom: 10px; }
.importantInfo #content .displayBox table td {padding-top: 5px}

#content div.nextButton {clear: both; margin-top: 38px; margin-bottom: 0px; }
#content div.nextButton.floated {clear: none; float: left; margin-top: 175px; margin-left: 25px; }
#content div.nextButton.floated.outsideQuotebox {margin-top: 25px; margin-left: 0; }
#content div.quoteBox div.nextButton {text-align: center; margin-top: 10px; margin-bottom: 30px; }

#content div.nextButton a:link, #content div.nextButton a:visited {
	font-size: 17px; line-height: 30px; font-weight: normal; 
	color: black; text-decoration: none; padding: 5px 40px 7px 0; margin: 20px 0;  
	background: transparent url("../Images/arrowButton.gif") no-repeat right center; 
	}
#content div.nextButton a.back:link, #content div.nextButton a.back:visited {
	padding-left: 40px; padding-right: 0; margin-right: 100px; 
	background: transparent url("../Images/arrowBackButton.gif") no-repeat left center;
	}
#content div.nextButton a.right:link, #content div.nextButton a.right:visited {margin-left: 200px; }
#content div.nextButton a:hover {text-decoration: underline; }

#content input.hiddenSubmitButton {	/* 'nextButton' actually used to submit form (via javascript) as actual form submit button cannot be styled to produce desired effect */
	position: absolute; 	/* However, need a real 'submit' button so that hitting return within a text field causes form to be submitted */
	left: -2000px; 		/* therefore, hide 'submit' button off page. NOTE 1: different combinations of left/right and +/-offset cause problems in some browers (eg IE) */
	width: 50px;		/* NOTE: for some browsers (eg IE7), need to define 'width' to prevent button extending width-ways right across visible screen */
	}

.infoWrapper {position: relative; width: 100%; border: none; } /* Need to define a width for IE to work */
.infoWrapper div {width: 270px; position: absolute; right: 4000px; bottom: 20px; 
	background-color: rgb(180,217,48); padding: 0px; 
	}
* html .infoWrapper div {bottom: 34px; } /* 'Star-hack' for IE5.x/IE6 which positions the DIV lower */
.infoWrapper div.wide {width: 400px; }
.infoWrapper div.veryWide {width: 600px; }
/* NB The following lines need to include '#content' to ensure 'score' is high enough to out-weight earlier definitions: */
#content .infoWrapper div p, #info .infoWrapper div p {width: auto; font-weight: normal; margin: 10px 20px; }
#content .infoWrapper div p.alert, #info .infoWrapper div p.alert {padding-left: 33px; background: transparent url("../Images/alertButtonWhite.gif") no-repeat 0px 3px; }
#content .infoWrapper div h3, #info .infoWrapper div h3 {margin: 20px 20px 10px 20px; }
.infoWrapper div a.button:link, .infoWrapper div a.button:visited {display: block; line-height: 27px; width: 60px; 
	font-weight: normal; color: black; text-align: center; text-decoration: none; margin: 10px 105px; 
	background: transparent url("../Images/closeButton.gif") no-repeat center center; 
	}
.infoWrapper div.wide a.button:link, .infoWrapper div.wide a.button:visited {margin-right: 170px; margin-left: 170px; } /* To centre 'Close' button: margin = (<DIV width> - <A width>) / 2 */
.infoWrapper div.veryWide a.button:link, .infoWrapper div.veryWide a.button:visited {margin-right: 270px; margin-left: 270px; }
.infoWrapper div a.button:hover {text-decoration: underline; }

/*** Quote Stage 2 Selection Boxes ***/
#content .itemBox {float: left; /* position: relative;  CANNOT COMBINE 'float: left' & 'position: relative' (OK in IE & FF but not NS) */ 
	border: 2px solid rgb(180,217,48); margin: 30px 30px 0px 0; }
#content .itemBox h3 {font-size: 20px; font-weight: normal; line-height: 36px; color: white; background-color: rgb(180,217,48); 
	margin: 0; padding: 0 0 2px 10px; 
	}
#content .itemBox div {position: relative; width: 250px; min-height: 134px; } /* Height increasd from 120px to facilitate additional Building Insurance text */
* html #content .itemBox div {height: 134px; } /* 'Star-hack' for IE5.x/IE6 which effectively implements 'heignt' as 'min-height' */
#content .itemBox p {width: auto; font-size: 10px; padding: 8px 10px 34px 10px; margin: 0; }
#content .itemBox label {position: absolute; right: 0; bottom: 0;  
	font-size: 16px; font-weight: bold; color: white; background: rgb(180,217,48) url("../Images/itemSelectBg.gif") no-repeat left top; 
	padding: 2px 0; /* Really want line-height = 25px (=> 27px height curved block inc 2px border) but doesn't work on IE when <input..> element included inside <label></label> tags */ 
	margin: 0; 
	min-width: 153px; text-align: right; white-space: nowrap; 
	}
* html #content .itemBox label {width: 153px;	/* 'Star-hack' for IE5.x/IE6 which effectively implements 'width' as 'min-width'.. */ 
	padding: 3px 0;}					/* .. also need slightly more padding above and below */
#content .itemBox input {margin-left: 10px; }
* html #content .itemBox input {margin-left: 5px; } /* 'Star-hack' for IE5.x/IE6 which has some margin built-in */

/*** Quote Stage 4 Quote Box ***/
#content div.quoteBox {border: 2px solid rgb(180,217,48); padding: 0px; margin-top: 32px; }
#content p.loggedIn {font-size: 10px; height: 32px; vertical-align: top; margin-top: 0; }	/* "Logged in " text.. */
#content div.quoteBox.loggedIn {margin-top: 0; }					/* .. instead of margin". */
#content div.quoteBox h2 {margin: 20px 20px 10px 20px; }
#content div.quoteBox h2 em {color: rgb(172,211,30); font-size: 38px; font-style: normal; font-weight: bold; }
#content div.quoteBox h3 {font-size: 11px; font-weight: normal; margin: 30px 0 10px 20px; }
#content div.quoteBox p {width: auto; margin: 0 20px; }
#content div.quoteBox p.indented {padding-left: 20px; margin-top: 0; }
#content div.quoteBox p.spaced {margin-bottom: 20px;}
#content div.quoteBox table {margin: 0 20px 20px 20px; }
/* <CAPTION> replaced by <P> as positioning of CAPTION too variable between browsers (can fix IE but still indents in MAC Safari)
#content div.quoteBox table caption {text-align: left; margin: 10px 20px 10px 20px; }
* html #content div.quoteBox table caption {padding: 10px 0; } /* 'Star-hack' for IE5.x/IE6 which applies the table margin to the caption */

#content div.quoteBox table.premium {width: 490px; line-height: 1.2; }
#content div.quoteBox table.premium tr {vertical-align: top; }
#content div.quoteBox table.premium th {font-weight: normal; padding: 15px 30px 5px 0; }
#content div.quoteBox table.premium thead th {font-weight: bold; padding-top: 5px; padding-bottom: 0; white-space: nowrap; }
#content div.quoteBox table.premium thead th.right {padding-right: 0; min-width: 100px; }	/* Set width of right-hand column in case cells are empty (no 'change cover' links).. */
* html #content div.quoteBox table.premium thead th.right {width: 100px; } /* .. 'Star-hack' for IE5.x/IE6 which effectively implements 'width' as 'min-width' */
#content div.quoteBox tr.mainItem td {padding: 15px 0 5px 0; }

#content div.quoteBox ul {margin-left: 35px; margin-right: 20px; }
#content div.quoteBox * html ul {margin-left: 40px; } /* 'Star-hack' for IE5.x/IE6 which needs more margin to left-justify bullets */

#content div.quoteBox table.tight td {padding-top: 2px; }

/*** Quote Stage 5-7 "Buy" Form fields ***/
/*** I DON'T THINK THESE ARE USED (see form2col above) ***/
body.buy #content label {display: inline; float: left; width: 300px; margin: 0; }
body.buy #content label.small {display: inline; /* For some reason, need to repeat 'display: inline' for NS */
	float: none; width: auto; 
	font-size: 11px; color: black; margin-left: 1em
	}
body.buy #content input {width: 200px; }
body.buy #content input.checkbox {width: auto; }
body.buy #content input.desc {width: 300px; }
body.buy #content input.value {width: 80px; }
body.buy #content input.char2 {width: 25px; }
body.buy #content div.indented {padding-left: 50px; }
body.buy #content div.indented label {width: 250px; }
body.buy #content h2 {margin-top: 40px; margin-bottom: -10px; }

body.buy #content th, body.buy #content td {vertical-align: middle; }
body.buy #content thead th {text-align: center; }
body.buy #content tbody th {text-align: right; font-weight: normal; }

body.buy #content ol.importantInfo select {display: block; margin: 10px 0 20px 0; } 


/*** Retrieve Quote ***/
#content table.quotes {margin-top: 20px; }
#content table.quotes th {text-align: center; padding-top: 8px;}
#content table.quotes td, #content table.quotes th {vertical-align: middle; }
#content table.quotes tr.expired {color: rgb(60%,60%,60%); }
#content table.quotes input { }


/*** Demands and Needs ***/
body.demandsAndNeeds #content table {width: 520px; margin-top: 20px; }
body.demandsAndNeeds #content table td, body.demandsAndNeeds #content table th {width: 50%; text-align: left; padding: 5px; border: 2px solid rgb(180,217,48); }
body.demandsAndNeeds #content table th {vertical-align: middle; background-color: rgb(180,217,48); }
body.demandsAndNeeds #content div.displayBox {width: 520px; ; margin-top: 20px; }



/***
/*** INFO styles (pop-up info/help window)
/**/
#info {padding: 0 20px 10px 20px; margin: 0; }
#info p {padding: 0; margin-top: 15px; max-width: 520px; }
#info p.tight {margin-top: 10px; margin-bottom: 10px; }
#info ul.spaced li {margin-bottom: 7px; }
#info table {width: 520px; }
#info table.bordered {margin-top: 10px; }
#info table.bordered td, #info table.bordered th {text-align: center; line-height: 1.3; padding: 5px; border: 2px solid rgb(180,217,48); }
#info table.bordered th {vertical-align: middle; background-color: rgb(180,217,48); }
#info table td.left {text-align: left; }
#info table.bordered tr.subrow td {border-top-width: 1px; border-bottom-width: 1px; }
#info table.bordered tr.subrow.newrow td {border-top-width: 2px; }
#info table.bordered tr.subrow td.subrow {border-left-width: 0; border-right-width: 0; }
#info table.bordered tr.subrow td.subrow.left {padding-left: 0; }

#info a.closeButton:link, #info a.closeButton:visited {display: block; line-height: 30px; width: 60px; 
	font-weight: normal; color: black; text-align: center; text-decoration: none; margin: 30px auto 10px auto; /* margin: 30px 0 10px 230px;  */
	background: transparent url("../Images/closeButtonWhite.gif") no-repeat center center; 
	}
#info a.closeButton:hover {text-decoration: underline; }


/***
/*** FOOTER styles
/**/
#footer {
/* (30/12/09) 'footerBar' moved out of 'footer' and to end of new 'contentBorderWrapper' DIV:
	clear: both; 
	border-top: 2px solid white;*/
	padding-top: 12px; 
	font-size: 10px; font-family: Tahoma,Verdana,sans-serif;
	line-height: 1.2; 
	background-color: white; /* Need to set background-color to cover mainWrapper background image & colour */
	}
#footer div.footerImage {float: left; width: 112px; }
#footer div.footerImage img {margin-top: 2px; }
#footer div.footerLeft {float: left; width: 334px; }
#footer div.footerRight {float: right; width: 330px; }
#footer div.clear div {height: 20px; }

#footer p {margin: 0; }
#footer p.gap {margin-top: 8px; }