/* background-color: transparent; has been used in some of the selectors, this is the default and it is not strictly necessary to declare this info - it does serve a purpose in that it supplies information for you to see*/
body {/* set everything to zero for a good cross-browser starting point */
	margin: 0;/*zeroes the margins on the body*/
	padding: 0;/*zeroes the padding on the body ** Opera carries a default padding and requires this zeroing*/
	border: 0;/*zeroes off any existing border*/
	background-color: #FFFFFF;/*sets the body background colour*/
	color: #666; /*set the default text color */
	text-align: center; /* Hack to centre the wrapper in IE5.x pc */
	font-family: Arial, Verdana, Helvetica, sans-serif;/*set the default fonts */
	font-size: 100.01%;/* Sets default font size. This odd value compensates for several browser bugs. First, setting a default font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. Current "best" suggestion is to use the 100.01% value for this property */
	min-width: 785px; /* Prevents the body becoming narrower than our wrapper div - keeps the content from disappearing off the left edge with Gecko browsers */
}

#wrapper {
	margin: 5px auto;/* centers the wrapper first value - 5px is applied to the top and bottom margins, auto sets the excess space on the view port evenly to the left and right*/
	width: 960px; /* sets the width of the wrapper */
	position: relative; /* important to position it relatively */
	background-color: #FFFFFF;/* sets the wrappers background color*/
	border: 1px solid #000;/* sets a border to all 4 sides */
	text-align: left;/* Realigns the text to the left after the IE hack in the body rule */
}

#banner {
	background-image: url(../images/header_r1_c1_r1_c1.jpg);
	background-repeat: no-repeat;
	position: relative;
	height : 126px;
}



#banner .right {/* Float the right hand image to the right in the banner */
	float: right;/*Floats the image to the right*/
}


#content .left {/* Floats the images in the main content area to the left */
	float: left;/*Floats the image to the left*/
	margin: 5px 20px 2px 0;/*sets the margins so the image sits nicely in the p elements*/
	border: 1px solid #000;/*sets a border on the image*/
}


#content .right {/* Floats the images in the main content area to the right */
	float: right;/*Floats the image to the right*/
	margin: 5px 0 2px 20px;/*sets the margins so the image sits nicely in the p elements*/
	border: 1px solid #000;/*sets a border on the image*/
}




#contact {
	/* Begin laying out the contact div */
	float: left;
	/* Floats the div to the left to make a column */
	width: 185px;
	/*sets a width for the div - Imperative for IE mac */
	background-color: transparent;
	/* no colour required for the bg colour*/
	background-image: url(../images/navBacking.jpg);
	background-repeat: repeat-y;

}

#rightContent{
	/* Begin laying out the contact div */
	float: right;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	/* Floats the div to the left to make a column */
	width: 185px;

	/*sets a width for the div - Imperative for IE mac */
	background-color: #6B7889;
}

#navigation {
	background-color: transparent;
	color: #FFFFFF;
	text-align: left;
	list-style-image: none;
	list-style-type: none;
}

#navigation ul {
	list-style-type: none;
	font-weight: normal;
}

 

#navigation ul li {
	/*The 3 margin property/value pairs are a hack to make the links butt together in IE 5.01*/
	/* zeroes off the padding*/
	margin: 0;
	padding: 0;
	/*zeroes off the margins*/
	margin: 0 0 -3px 0;
	/*This takes the 3px off the margin in IE 5.01 - IE 5.5 cannot see this hack so stays with the 0 value from the last margin property*/
	ma\rgin: 0;
	/* IE 5.01 and IE5.5 cannot see this selector - resets the margins on other browsers back to zero - the escape character must not come immediately before the letters a,b,c,d,e or f if it does it will be seen as a hex character and the hack will fail*/
}

/*Begin styling the link lists - visited is styled the same as link, not absolutely necessary to decalre visited but its there.
Note that the reference is to "a" and not "a:link". This makes the link act as a button in a cross-browser way. */
/*You will notice that I have set two selectors on this rule. This is fine when the occasion arises - saves time and space*/
#navigation a, #navigation a:visited {
	color: #FFFFFF;
	display: block;
	/* required to make the links act like a button*/
	text-decoration: none;
	padding-bottom: 0px;
}

/* sets the link styles for hover and focus*/
/*You will notice that I have set two selectors on this rule, this is fine when the occasion arises - saves time and space*/
#navigation a:hover, #navigation a:focus {
	/*use dual selectors if the properties and values are the same for each*/
	color: #0B1967;
	background-color: #6F78A5;
	/* changes the hover and focus text to white*/
}



#footer {
	/* Begin laying out and styling the footer div */
	color: #fff;
	/*sets the text to white*/
	background-color: #6666CC;
	/*sets a background colour for the footer*/
	font-size: 80%;
	/* sets the footer text size */
	padding: 4px 10px 4px 10px;
	/*sets the padding values*/
	text-align: right;
	/* aligns the text to the right*/
}


#footer p {
	background-color: #E4E4E4;/*sets the background colour for the p element when it is in the footer div*/
	padding: 4px 4px 4px 10px;/* sets the padding values*/
	margin: 0;/*zeroes off the margins */
}


#footer p.designer {/* Styles the bottom P in the footer that gives the validation and designer info */
	background-color: #101B4C;/*sets the background colour*/
	padding: 4px 4px 4px 10px;/*sets the padding values*/
	margin: 0;/*zeroes off the margins*/
	color: #fff;/*sets the text colour to white*/
	border-top: 1px solid #000;/*gives a top border to separate it from the other content in the footer, this should be the last item in the footer */
}


#footer a {/* Styles the links within the footer */
	color: #fff;/*sets the text to white*/
	text-decoration: underline; /*keeps the underline*/
}

#footer a:hover, #footer a:focus {
	text-decoration: none;/*removes the underline*/
}





/* Begins laying out the address */
#add {/* Set the containing add div */
	padding: 18px 0 0 0;/* sets the padding values - the 18px value allows the "tab" background image to show above the content*/
	width: 185px;/* sets a width for the div*/
	background-color: transparent; /* no background colour required*/
	margin-top: 20px;/* moves the div down and away from the navigation div */
}


#contact #navigation h3 {
	font-size: 70%;
	padding: 0 0 0 0px;
	color: #fff;
	width: 175px;
	margin: 0 3px 0 3px;
	background-color: transparent;
}
	
	
#contact #navigation #add h3 {
	font-size: 70%;
	padding: 0 0 0 0;
	color: #fff;
	margin: 0 10px 0 10px;
	width: 160px;
	background-color: transparent;
	border-bottom : dotted Gray;
}


#contact #navigation #add address {
	/* Sets the styling for the address element */
	font-size: 70%;
	/*scales the font size*/
	padding: 7px 5px 15px 10px;
	/*sets the padding*/
	margin: 0;
	/*zeroes off the margins*/
	color: #333;
	/* changes the default text colour*/
	font-style: normal;
	/* removes the default italic style for address */
}


#content {/* Begin laying out and styling the content div */
	margin-left: 23px;
	margin-right: 60px;
	padding-bottom: 20px;
	text-align: justify;
}

#content #navigation #add address {
	/* Sets the styling for the address element */
	font-size: 70%;
	/*scales the font size*/
	padding: 5px 5px 0 10px;
	/*sets the padding*/
	margin: 0;
	/*zeroes off the margins*/
	color: #000033;
	/* changes the default text colour*/
	font-style: normal;
	/* removes the default italic style for address */
}

#content  #navigation #add h3 {
	font-size: 70%;
	padding: 0 5px 0 5px;
	color: #fff;
	margin: 0 5px;
	width: 180px;
	background-color: transparent;
	border-bottom : 1px solid Gray;
	border-top: 1px solid Gray;
}

#content  #navigation a, #contact #navigation a:visited {
	color: #333333;
	padding: 0;
	margin: 0;
	display: block;
	/* required to make the links act like a button*/
	text-decoration: none;
	/*removes the underline*/
	text-align : Left;
}

/* sets the link styles for hover and focus*/
/*You will notice that I have set two selectors on this rule, this is fine when the occasion arises - saves time and space*/
#content  #navigation a:hover, #contact #navigation a:focus { /*use dual selectors if the properties and values are the same for each*/
	color: #fff;/* changes the hover and focus text to white*/
}


#pageheading {
	border-bottom : 2px solid Navy;
	color: #0B1967;
	font-weight: bold;
	margin-right: 60;
	margin-left: 23px;
	padding-right: 10;
}

.teamTitle {
	color: #990000;
	text-decoration: underline;
	border-bottom-width: 1px;
	border-bottom-style: none;
	border-bottom-color: #990000;
}

.sidebarText {
	font-size: 75%;
	margin: 0;
	padding:0;
	color: #666666;
	font-style: normal;
	text-align:left;
}

.sidebarHeader {
	font-size: 90%;
	margin: 0;
	padding:0;
	color: #333333;
	font-style: normal;
	font-weight: 500;
	text-align:left;
}

#content h2 {
	font-size: 100%;
	/* scale the font size*/
	/*font-family: Georgia, "Times New Roman", Times, serif;
	/* sets the font family*/
	margin: 0 0 10px 30px;
	/* set the margins*/
	padding-top: 0px;
	/* adds the top padding to move it down from elements above - could be done with a top margin*/
	color: Red;
	/* sets the font colour*/
	/*font-style: italic;
	/* sets the font style*/
	font-weight: normal;
	/* sets the font weight to slightly less than bold - Where this isn't supported it seems mainly to default to normal - to make the text bold, if that is your wish, you can simply remove this property*/
}

#content h3 {
	/* sets the margins*/
	/* adds padding to the top to give a little clearance below the banner*/
	color: #990000;
	/*set the font style */
	font-weight: bold;
	font-size: 16px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 10px;
	font-family: "Century Gothic", Arial, Verdana;
	/* sets the font weight to slightly less than bold - Where this isn't supported it seems mainly to default to normal - to make the text bold, if that is your wish, you can simply remove this property*/
}

#content h4 {
	font-size: 100%;/* scale the font size*/
	/*font-family: Georgia, "Times New Roman", Times, serif;/* sets the font family*/
	margin: 0 0 10px 30px;/* set the margins*/
	padding-top: 20px;/* adds the top padding to move it down from elements above - could be done with a top margin*/
	color: #0B1967;/* sets the font colour*/
	font-style: italic;/* sets the font style*/
	font-weight: 200; /* sets the font weight to slightly less than bold - Where this isn't supported it seems mainly to default to normal - to make the text bold, if that is your wish, you can simply remove this property*/
}

#content h5 {
	font-size: 80%; /*scales the main content title*/
	/*font-family: Georgia, "Times New Roman", Times, serif;/* sets the default fonts for h1 ** Notice that fonts that consist of more than word are surrounded in quotes*/
	margin: 0 0 10px 30px;/* sets the margins*/
	padding-top: 20px;/* adds padding to the top to give a little clearance below the banner*/
	color: #333333;/* set the colour for the text*/
	font-style: normal; /*set the font style */
	font-weight: 100;/* sets the font weight to slightly less than bold - Where this isn't supported it seems mainly to default to normal - to make the text bold, if that is your wish, you can simply remove this property*/
}

#content h6 {
	font-size: 80%;/* scale the font size*/
	/*font-family: Georgia, "Times New Roman", Times, serif;/* sets the font family*/
	margin: 0 0 10px 30px;/* set the margins*/
	padding-top: 20px;/* adds the top padding to move it down from elements above - could be done with a top margin*/
	color: #666666;/* sets the font colour*/
	font-style: italic;/* sets the font style*/
	font-weight: 100; /* sets the font weight to slightly less than bold - Where this isn't supported it seems mainly to default to normal - to make the text bold, if that is your wish, you can simply remove this property*/
}


/* sets the inline links in the #content div if required*/
#content a:link, #content a:visited{
	color: #000099; /*sets the link and visited text color*/
	background-color: transparent;/* no background color required*/

}

#content a:hover, #content a:focus{
	color: #333333;/* sets the text color for hover and focus*/
	text-decoration: none;/*removes the underline*/
}

/* Wraps around left col, #secnav, and center column, #contentwrapper. */
#floatwrapper {
	float: left; /* Moves div to the left, creating a large column to the left of #features that will then be further divided. */
	width: 80%; /* Sets width to 80 percent of the window. */
	position: relative; /* Because of MacIE's faulty positioning and float models, all floated objects will overlap the background and borders of the fixed footer. Adding position: relative and a smaller z-index than the footer to all the floats fixes this. */
	z-index: 100; /* See note above. */
	}

/* Forms the right column within #floatwrapper. Wraps around #content so that #content can have margins applied so its text won't butt up against the adjacent columns. If padding were used to do this, it would throw the widths off and cause content to not fit on screen. */
#contentwrapper {
	float: right; /* Moves content column to the right of the secondary nav column. */
	width: 74%; /* Sets width to 74 percent of #floatwrapper. This width was chosen because the secondary nav column needs to be set at 25 percent, because 25 percent of 80 percent (the width of #floatwrapper) is 20 percent, the width we want the left column to take up in relation to the window. That leaves 75 percent for this column, but rounding errors and browser miscalculations can make either column slightly too big. Setting it to a lower number so the total combined widths are less than 100 percent keeps these errors from throwing off the design. */
	position: relative; /* Because of MacIE's faulty positioning and float models, all floated objects will overlap the background and borders of the fixed footer. Adding position: relative and a smaller z-index than the footer to all the floats fixes this. */
	z-index: 100; /* See note above. */
	}



/* CLEARING FLOATS -------------------------------------------------------------------------------------------------------------- */
/* The following selectors keep floats from overflowing out of their parent elements. This is done by generating a character within the parent but after the float, so that the parent must expand to hold the generated character, appearing to contain the floats in the process. */
.clearfix:after {
	content: "."; /* This dot is the actual content that will be appended to the end any div this class is applied to. */
	clear: both; /* Makes the generated content appear after the floats. */
	height: 0; /* Sets its height to zero so it doesn't show. */
	visibility: hidden; /* Sets its visibility to hidden so it doesn't show. */
	display: block; /* Overwrites the default inline display of the generated content. Needed because only blocks can have clear set on them. */
}
 
.clearfix {
	display: inline-block; /* Makes it work in MacIE. MacIE does not support generated content but will automatically contain a float if the container has this display property. */
	}

/* The first selector below makes it work in WinIE. WinIE does not support generated content, but will automatically contain a float if the container has a width or height assigned. "height: 1%" can be used because WinIE will not honor this height and will expand the div to whatever height necessary to show the content. */
/* The second selector below overwrites the inline-block display used to help MacIE. */
/* Hides from MacIE \*/
* html .clearfix {
	height: 1%;
	}
.clearfix {
	display: block;
	}
/* End hide from MacIE */

/* FORMS ------------------------------------------------------------------------------------------------------------------------ */
form {
	font-size: 0.9em; /* Sets font size smaller than default. */
	}

/* Groups related questions together. */
fieldset {
	margin: 1em 0; /* Sets space between fieldset and content above or below. */
	padding: 1em; /* Sets space within fieldset so content within doesn't touch its borders. */
	border: 1px solid #eef6fb; /* Sets border. */
	background: url(../images/form-bg.jpg) repeat-x #eef6fb; /* Sets background image and tiles it horizontally. Also sets backup background color. */
	}

/* Labels what its fieldset is about. */
legend {
	padding: 0.2em 0.4em; /* Sets space between text of legend and its edges. */
	border: 1px solid #eef6fb; /* Sets border. */
	background: #eef6fb; /* Sets background color. */
	font-family: Georgia, "Times New Roman", Times, serif; /* Sets font family options. */
	font-weight: bold; /* Makes text bold. */
	}

/* Used to create questions - a label-input pair or, in the case of checkboxes and radio buttons, several label-input pairs that are related. */
form div {
	float: left; /* Makes label-input pairs display in columns */
	width: 10em; /* Sets width of label-input pairs. Needed to keep IE from expanding the divs and dropping the left col */
	margin: 0.5em 1em 0.5em 0; /* Sets space between label-input pairs */
	position: relative; /* Because of MacIE's faulty positioning and float models, all floated objects will overlap the background and borders of the fixed footer. Adding position: relative and a smaller z-index than the footer to all the floats fixes this. */
	z-index: 200; /* See note above. */
	}

label {
	display: block; /* Makes label display on line above input rather than to its left. However, this makes IE drop the left col if you don't include a width on the div which holds the label */
	font-weight: bold; /* Makes text bold */
	}
	
/* Used on divs which contain more than one label-input pairs, or in other words, questions with checkboxes or radio buttons. */
.multiple {
	float: none; /* Removes float so it can occupy its own line. */
	width: auto; /* Sets width back to auto so that it can expand to the width it needs to accommodate its content, instead of 10em set above. */
	}

.multiple label {
	display: inline; /* Sets labels to display next to their inputs, rather than below, since labels for checkboxes and radio buttons should display right next to their buttons. */
	}

input, textarea {
	border: 1px solid #1c306b; /* Sets border to navy blue. */
	background: #c6d2c6; /* Sets background color to gray. */
	}

/* Keeps IE from displaying background around checkboxes and radio buttons. */
.multiple input {
	border: none; /* Removes border set above. */
	background: none; /* Removes background set above. */
	}

/* Paragraphs may be used in the form to head a number of checkbox-label pairs, for instance. This selector controls how they are formatted. */
form p {
	margin: 0.8em 0 0.2em 0; /* Sets spacing between paragraphs and adjacent content. */
	}