@import url("basic.css");
@import url("Navigation.css");
@import url("contentItems.css");
@import url("Links.css");
@import url("Forms.css");
@import url("Structure.css");

/* Changeable */

/* Background of site and font */
body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #D3E2F0;
	/* Optional can be removed */
/*	background-image: url(../images/blueVertGrad.jpg); */
	background-image: url(../images/icon_background.gif);
	background-repeat: repeat-x;
	background-position: center top;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* Width control */
#wrapper {
	width: 58em;
	background-color: transparent;
}

/* Headings */
H1, H2, H3, H4, H5, H6 {
	font-family: Arial, Helvetica, sans-serif;
	color: #0055A4;
}

H1 {
	font-size: 150%;
}

H2 {
	font-size: 140%;
}

H3 {
	font-size: 130%;
}

H4 {
	font-size: 120%;
}

H5#strapline {
	font-size: 100%;
}

H5 {
	font-size: 110%;
}

H6 {
	font-size: 100%;
}

/* Horizontal Rules */

hr {
	border: #777777; /* Change Colour */
}
	
	
/* Paragraphs */	
p {
	font-family: Arial, Helvetica, sans-serif;
}
#mainContent ul li {
	color: #444444;
	background-image: url(../images/BlackBullet.png);
	font-size: 80%;
}

/* Top Banner */
#branding {
	background-color: #FFFFFF;
	/* Optional can be removed */
	background-image: url(../images/bubbles.jpg);
	background-repeat: no-repeat; /* Needed if you have an image can be set to no-repeat, repeat-x or repeat-y */
	background-position: right top; /* Needed if you have an image can be set to left, right, center and top, center, bottom */
	height: auto;
	width: 100%;
}

/* Top Navigation */
#topNav {
	background-color: transparent;
	/* Optional can be removed */
	background-image: url(../images/StraplineBackground.png);
	background-repeat: no-repeat; /* Needed if you have an image can be set to no-repeat, repeat-x or repeat-y */
	background-position: center top; /* Needed if you have an image can be set to left, right, center and top, center, bottom */
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #0055A4;
}
img.logo {
	padding-top: 10px;
	padding-left: 10px;
}

.padmerightTopImage {
	padding-right: 50px;
}

/* Middle Section Wrapper Options if using faux column effect on the right, plus background colour*/	
#middleWrapper {	
	background-color: #FFFFFF;
/* Optional can be removed */
	background-image:  url(../images/navFauxCol.jpg);
	background-repeat: repeat-y;
	background-position: 20% 0;
}
/*How the make a Faux column that reaches the bottom of the page
The column colour/background is actually an image, this needs to be 
created on a transparent background as follows.

Create a transparent graphic 2000px wide. If it is just a repeating 
image make it small in depth e.g. 5px.

Create your image within the 2000px (100%) depending on the width of your column 
e.g. Column 600px (30%). Save and place in style for the column wrapper 
(div that is containing the column) as per the stylesheet in this example.

The percentage of the column should match the percentage positioning of the
background style. If the column is on the right it is reversed e.g. the column 
is 30% wide so the positioning is 70% */


/* Size of middle and right sections combined N.B. if you add to this number you MUST take from #mainNav */	
#rightWrapper {
	width: 78%;
	background-repeat: no-repeat;
	background-position: right top;
}

#home #rightWrapper {
	background-image: url(../images/globeBackground.jpg);
}
#about #rightWrapper {
	background-image: url(../images/jigsaw.jpg);
}
#insurance #rightWrapper {
	background-image: url(../images/graphs.jpg);
}
#benefits #rightWrapper {
	background-image: url(../images/arrowBackground.jpg);
}
#contact #rightWrapper {
	background-image: url(../images/globeBackground.jpg);
}
#services #rightWrapper {
	background-image: url(../images/worldconcepts.jpg);
}
#international #rightWrapper {
	background-image: url(../images/handshake.jpg);
}

#testimonial #rightWrapper {
	background-image: url(../images/signPost.jpg);
}

#IMP #rightWrapper {
	background-image: url(../images/flag.jpg);
}


/* Size of left navigation column N.B. if you add to this number you MUST take from #rightWrapper */	
#mainNav {
	width: 20%;
}

/* Size of middle section N.B. if you add to this number you MUST take from #secondaryContent */	
#mainContent {
	width: 55%;
}
#mainContentForm {
	width: 65%;
}

/* Size of right column N.B. if you add to this number you MUST take from #mainContent */	
#secondaryContent {
	width: 23%;
}

/* Footer*/	
#footer {
	background-color: transparent;
	/* Optional can be removed */
	background-image: url(../images/FooterBackground.png);
	background-repeat: no-repeat; /* Needed if you have an image can be set to no-repeat, repeat-x or repeat-y */
	background-position: center top; /* Needed if you have an image can be set to left, right, center and top, center, bottom */
	height: 43px;
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: #0055A4;
}

/* Navigation*/
	
/* Bottom Bar Navigation*/	

ul.horizBottom a, ul.horizBottom a:visited {
	color: #0055A4;
}

ul.horizBottom a:hover, ul.horizBottom a:active {
	color: #6CAEDF;
}

ul.horizBottom a.thispage, ul.horizBottom a.thispage:visited {
	color: #6CAEDF;
}

ul.horizBottom a.thispage:hover, ul.horizBottom a.thispage:active {
	color: #000000;
}

ul.horizBottom a, ul.horizBottom a:visited, ul.horizBottom a.thispage, ul.horizBottom a.thispage:visited {
	font-size: 70%;
}

/* Side Navigation*/	

#mainNav ul.bar a, #mainNav ul.bar a:visited {
	color: #111111;
}

#mainNav ul.bar a:hover, #mainNav ul.bar a:active {
	color: #0055A4;
	text-decoration: underline;
}

#mainNav ul.bar a.thispage:link, #mainNav ul.bar a.thispage:visited {
	color: #0055A4;
}

#mainNav ul.bar a.thispage:hover, #mainNav ul.bar a.thispage:active {
	color: #000000;
}

#mainNav ul.bar a, #mainNav ul.bar a:visited {
	font-size: 90%;
	background-color: transparent;
	background-image: url(../images/NavGrad.jpg);
}

#mainNav ul.bar a.thispage:link, #mainNav ul.bar a.thispage:visited {
	font-size: 90%;
	background-color: transparent;
	background-image: url(../images/NavGradThis.jpg);
}

/* Links */	

h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link, h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited, a.DocumentLink:link, a.DocumentLink:visited, a:link, a:visited  {
	color: #315C9B; /* Change colour of links */
	border-bottom-color: #AAAAAA; /* Change colour of underline of links */
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active, a.DocumentLink:hover, a.DocumentLink:active, a:hover, a:active { 
	color: #222222; /* Change colour links on rollover */
}

/* Forms */	

input.btn {
	color: #FFFFFF; /* Colour of text on submit button */	
	border: 1px solid #6CAEDF;
	background-color: #0055A4;
}

input.btnhov {
	color: #000000; /* Colour of text on submit button on rollover */
	border: 1px solid #0055A4;
	background-color: #6CAEDF;
}

legend {
	color: #000000; /* Colour of title of form */
}