/* CSS Document */

/* general page setup color #FFFFFF=white and no margins. The actual htm webpages
display all content inside a <div align="center"></div> tag which centres the actual page content. 
This is only obvious on a screen larger than 1000 pixels wide */
body
{
	background-color: #FFFFFF;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* styling for normal paragraphs (p) #000000=black and refers to text color */
p
{	
	font-family: Arial, Helvetica, sans-serif; 
	font-size: small; 
	color: #000000;
	margin-left: 0;
	margin-right: 10;
	margin-bottom: 4;
	padding-left: 0;
	padding-right: 10;
	padding-bottom: 4;
	text-align: left;
}

/* styling for table cells (td) #000000=black and refers to text color */
td
{	
	font-family: Arial, Helvetica, sans-serif; 
	font-size: small; 
	color: #000000;
	text-align: left;
}

.topleft
{
	background-image:url(Images/all-building.JPG);
	background-repeat:no-repeat;
}

.fadetop
{
	background-image:url(Images/all-fade-top.JPG);
	background-repeat: repeat-y;
}


.fadeleft
{
	background-image:url(Images/all-fade-left.JPG);
	background-repeat: repeat-x;
}
.fadeleftstretch
{
	background-image: url(Images/all-fade-left-stretched.JPG);
	background-repeat: repeat-x;
}

.quicklinks
{
color: #FFFFFF;
}

/* styling for normal lists as shown in the main text body (ul = unordered list, ol = ordered list, li = list bullet point) 
#000000=black and refers to text color */
ul, ol, li
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	color: #000000;
	text-align: left;
}

/* styling for footer paragraph on Welcome page (i.e. small grey text)
color #999999 = grey and refers to text color */
.footer
{
	font-family:Arial, Helvetica, sans-serif;
	color: #999999;
	font-size: x-small;
	margin-right: 5;
	padding-right: 5;
 }
 
/* styling for heading level 1 - i.e. large grey heading on Welcome page */
h1 
{
	font-family: Arial, Helvetica, sans-serif; 
	font-size: x-large;
	color: #999999;
	font-weight: bold;
	margin-top: 10px;
	margin-left: 0;
	padding-top: 10px;
	padding-left: 0;
	text-align: left;
}

/* styling for heading level 2 - i.e. medium black page headers */
h2
{
	font-family: Arial, Helvetica, sans-serif; 
	font-size: medium;
	color: #000000;
	font-weight: bold;
	margin-top: 7px;
	margin-left: 0;
	padding-top: 7px;
	padding-left: 0;
	text-align: left;
}

h2.IFA
{
	font-family: Arial, Helvetica, sans-serif; 
	font-size: medium;
	color: #142647;
	font-weight: bold;
	margin-top: 7px;
	margin-left: 0;
	padding-top: 7px;
	padding-left: 0;
	text-align: left;
}


/* styling for heading level 3 - i.e. aqua headings on welcome and with-profits pages
color #6D92D5 = a dark aqua */
h3
{
	font-family: Arial, Helvetica, sans-serif; 
	font-size: medium;
	color: #224178;
	font-weight: bold;
	margin-top: 7px;
	margin-left: 0;
	padding-top: 7px;
	padding-left: 0;
	text-align: left;
}

/*  styling for heading level 4 - same as normal text but bold. color#000000 = black
Used in several webpages, and also as a header on right hand submenus */
h4
{
	font-family: Arial, Helvetica, sans-serif; 
	font-size: small;
	color: #000000;
	font-weight: bold;
	margin-top: 7px;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 7px;
	padding-left: 0;
	padding-bottom: 0;
	text-align: left;
}

/* styling for heading level 5 - color#6D92D5 = dark aqua text. Used for 'site last updated' 
text on Welcome page and within righthand menus on Customer Services > Products sections */
h5
{
	font-family: Arial, Helvetica, sans-serif; 
	font-size: small;
	color: #224178;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 5px;
	padding-bottom: 0;
	padding-left: 0;
	text-align: left;
}

/* use as a "class" to give things a light background - currently set to a light aqua*/
.lightbackground
{
	background-color: #BACCEC;
}

/* use as a "class" to give things a dark background - currently set to a dark aqua */
.darkbackground
{
	background-color: #6D92D5;
}


/* styling for the search button. color#FFFFFF=white background color#D8E2F4 = light acqua */
.searchbutton 
{  
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	background-image: url(Images/all-searchbuttonbackground.JPG);
	border: #142647; 
	border-style: solid; 
	border-top-width: 1px; 
	border-right-width: 1px; 
	border-bottom-width: 1px; 
	border-left-width: 1px;
}

/* Use this to make the top row of a table display with navy background and white text. 
You should apply this to the td (cell) tag not the tr (row) tag though. */
.tableheaderrow
{
	background-color: #142647;
	color: #FFFFFF;
	font-weight: bold;
}

/* styling for hyperlinks used in main body text. Please note, the 5 pseudo classes of link,
visited, focus, hover and active are in the correct order */
a 			
{
	font-family: Arial, Helvetica, sans-serif; 
	text-decoration: underline; 
	font-size: small; 
	font-weight: bold; 
	color: #000000
}
/* styling for hyperlinks used in main body text  a:link= psuedo class of 'normal link' 
i.e. what an unvisited link looks like */
a:link 
{
	font-family: Arial, Helvetica, sans-serif; 
	text-decoration: underline; 
	font-size: small;
	font-weight: bold;
}
/* styling for hyperlinks used in main body text  a:visited= psuedo class of 'visited link'
i.e. - what happens to a link that has already been visited */
a:visited 	
{
	font-family: Arial, Helvetica, sans-serif;  
	text-decoration: underline;
	font-size: small; 	
	font-weight: bold; 
}
/* styling for hyperlinks used in main body text  a:focus= psuedo class of 'focus link'
i.e. - what happens when the link is in focus and ready to accept input such as a mouse click */
a:focus 	
{
	font-family: Arial, Helvetica, sans-serif; 
	text-decoration: underline; 
	font-size: small; 
	font-weight: bold; 
}
/* styling for hyperlinks used in main body text  a:hover= psuedo class of 'hovered link'
i.e. - what happens when you hover over link */
a:hover 	
{
	font-family: Arial, Helvetica, sans-serif; 
	text-decoration: none; 
	font-size: small; 	
	font-weight: bold; 
}
/* styling for hyperlinks used in main body text  a:active= psuedo class of 'active link'
i.e. - what happens when you click on link */
a:active 	
	{
	font-family: Arial, Helvetica, sans-serif; 
	text-decoration: none; 
	font-size: small; 	
	font-weight: bold; 
}
		


/* styling for white legal, data prot, sitemap links and the table cell containing these links */
.legal-links
{
	color: #142647;
	font-weight: bold;
}

/* styling for main horizontal navigation menu bar (i.e. Home, Contact us, About Us, etc */
ul#mainlinks
{
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
list-style-type: none;
background: #142647;
float: left;
width: 100%;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
vertical-align: bottom;
}
ul#mainlinks li
{
display: inline;
vertical-align: bottom;
}
ul#mainlinks a
{
display: block; 
float: left; 
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
padding: 3px 20px;
border-right: 1px solid #FFFFFF;
vertical-align: bottom;
}
ul#mainlinks a:hover
{
display: block;
float: left;
color: #142647;
font-weight: bold;
text-decoration: none;
background: #FFFFFF;
vertical-align: bottom;
}

/* styling for left hand column sublinks */
ul#leftsublinks
{
margin-left: 0;
margin-top: 10;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
list-style-type: none;
}
ul#leftsublinks a
{
display: block;
text-decoration: none;
font-weight: normal;
color: #FFFFFF;
padding: 3px 4px;
width: 177px;
border: 0;
}
ul#leftsublinks a:hover
{
display: block;
text-decoration: none;
font-weight: normal;
background: #142647;
color: #FFFFFF;
}

/* styling for right hand coloumn sublinks*/
ul#rightsublinks
{
margin-left: 0;
margin-top: 10;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
list-style-type: none;
float: right;
}

ul.textright
{
text-align: right;
}

ul#rightsublinks a
{
display: block;
text-decoration: none;
font-weight: normal;
background: #FFFFFF;
color: #000000;
padding: 3px 3px;
width: 175px;
border-bottom: 1px solid #142647;
}
ul#rightsublinks a:hover
{
display: block;
text-decoration: none;
font-weight: normal;
background: #142647;
color: #FFFFFF;
}

/* styling for forms */
.form
	{
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: small;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
	width: 120px
}