@charset "utf-8";
/* CSS Document */

/* reset margin and padding to 0 and set site wide font family.  Text align > center is to center the webpage.  The MainContainer will then reset the Text Align for content */
body {
	margin: 0px;
	padding: 0px;
	background-color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
}

/* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
.clearfloat { 
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/* This is the main div for the content of the site.  It sets the content width and resets the text align to be left for all content contained within it */
#MainContainer {
	width: 860px;
	margin: 20px auto 0px auto;
	padding: 0px;
	text-align: left;
}

/* This is the main container for the header.  It not only contains all header content but also is responsible for the shade background for the header. */
#MainHeader {
	position: relative;
	width: 860px;
	height: 104px;
	background-image: url(../images/headerBkgrundShade.gif);
	background-position: left;
	background-repeat: repeat-x;
	margin: 0px;
	padding: 0px;
}

/* This is the div for aligning the contact information within the header to the top right.  It is also responsible for displaying the rounded edges on the right hand side of the header thus the height attribute of 104px */
#ContactContainer {
	position: absolute;
	height: 104px;
	top: 0px;
	right: 0px;
	text-align: right;
	background-image: url(../images/HeaderRightCap.gif);
	background-position: right;
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
}

#MainContentContainer {
	position: relative;
	top: 10px;
	width: 860px;
	background-image: url(../images/contentBkgrundShade.gif);
	background-position: top;
	background-repeat: repeat-x;
	padding: 0px;
	margin: 0px 0px 10px 0px;
}

#MainContent {
	width: 456px;
	margin: 0px 184px 0px 190px;
	padding: 15px;
}

#MainContentWide {
	width: 640px;
	margin: 0px 0px 0px 190px;
	padding: 15px;
}

/* This is the container for the left column that holds the main navigation */
#LeftColumn {
	float: left;
	width: 170px;
	margin: 0px 5px;
	padding: 15px 5px;
}

/* This is the container for the right column which may or may not have content.  It's optional. */
#RightColumn {
	float: right;
	width: 164px; 
	margin: 0px 5px;
	padding: 15px 5px;
}

/* This is the main container for the footer.  It specifies the width, height and a background image for the custom borders on top and bottom. */
#MainFooter {
	position: relative;
	top: 10px;
	width: 860px;
	height: 45px;
	background-image: url(../images/footerBkgrundShade.gif);
	background-position: top;
	background-repeat: repeat-x;
	padding: 0px;
	margin: 0px 0px 20px 0px;
}

/* This dive is designed to hold the footer content and display the rounded corners and custom border on the left hand side of the footer. */
#FooterContent {
	float: left;
	height: 100%;
	background-image: url(../images/FooterLeftCap.gif);
	background-position: left;
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px 15px;
}

/* This class is resuable for whenever you need to align an image to the left.*/
img.leftAlign {
	float: left;
}

/* This class is reusable for whenever you need to align an image to the right*/
img.rightAlign {
	position: absolute;
	top: 0px;
	right: 0px;
	margin: 0px;
	padding: 0px;
}

/* This class is only used once and is intended to properly position the logo within the header.  It is a class so we avoid having a parent wrapper div and have unecessary CSS + HTML */
img.logoHeader {
	position: absolute;
	top: 16px;
	left: 14px;
}

#ContactContainer.contactInfo {
	font-size: 9pt;
	color: #FFF;
	margin: 0px;
}

/* The contentInfo class is designed for the display of the contact information in the page header.  All content must be wrapped in a <p></p> tag for this class to function properly. */
#ContactContainer.contactInfo p {
	margin: 0px;
	padding: 4px 8px 4px 2px;
}

/* This sets the attributes for a unvisited, visited and active link for the contact info in the header.  It only applies to the link if it's in a paragraph. */
#ContactContainer.contactInfo a, a:link, a:visited, a:active {
	font-size: 9pt;
	color: #FFF;
	text-decoration: underline;
}

/* This sets the attributes for hovering over a link for the contact info in the header.  Again, it only applies to the link if it's in a paragraph. */
#ContactContainer.contactInfo a:hover {
	color: #DE1818;
	text-decoration: underline;
}

#LeftColumn.mainNav {
	font-size: 11pt;
}

#LeftColumn.mainNav ul, li {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

#LeftColumn.mainNav li {
	margin: 0px 0px 16px 0px;
}

#LeftColumn.mainNav a, a:link, a:active, a:visited {
	display: block;
	height: 24px;
	font-size: 11pt;
	text-decoration: none;
	color: #000;
	margin: 0px;
	padding: 6px 0px 0px 8px;
}

#LeftColumn.mainNav a:hover {
	text-decoration: none;
	background-image: url(../images/mainnav_hoverOver.gif);
	background-position: inherit;
	background-repeat: no-repeat;
	color: #FFF;
}

#LeftColumn.mainNav em {
	display: block;
	height: 24px;
	background-image: url(../images/mainnav_hover.gif);
	background-position: inherit;
	background-repeat: no-repeat;
	color: #FFF;
	font-style: normal;
	margin: 0px;
	padding: 6px 0px 0px 8px;
}

#RightColumn.rightColumn h1 {
	font-size: 12pt;
	color: #1177DF;
	margin: 0px;
	padding: 4px 0px;
}

#RightColumn.rightColumn p {
	font-size: 10pt;
	margin: 0px;
	padding: 4px 0px;
}

#RightColumn.rightColumn a, a:link, a:visited, a:active {
	font-size: 10pt;
	color: #1177DF;
	text-decoration: underline;
}

#RightColumn.rightColumn a:hover {
	color: #DE1818;
	text-decoration: underline;
}	

#MainContent.mainContent h1 {
	font-size: 18pt;
	font-weight: normal;
	color: #1177DF;
	margin: 0px;
	padding: 4px 0px;
}

#MainContent.mainContent h2 {
	font-size: 12pt;
	font-weight: bold;
	margin: 0px;
	padding: 8px 0px 0px 0px;
}

#MainContent.mainContent h3, h4, h5, h6 {
	font-size: 11pt;
	font-weight: bold;
	margin: 0px;
	padding: 8px 0px 0px 0px;
}

#MainContent.mainContent p {
	font-size: 11pt;
	margin: 0px;
	padding: 4px 0px 10px 0px;
}

#MainContent.mainContent a, a:link, a:visited, a:active {
	font-size: 11pt;
	color: #1177DF;
	text-decoration: underline;
}

#MainContent.mainContent a:hover {
	color: #DE1818;
	text-decoration: underline;
}	

#MainContent.mainContent ul {
	margin: 0px 0px 0px 14px;
	padding: 0px;
}

#MainContent.mainContent li {
	list-style-image: url(../images/squareBullet.gif);
	list-style-type: none;
	margin: 4px 0px 4px 12px;
	padding: 0px;
}

#MainContentWide.mainContent h1 {
	font-size: 18pt;
	font-weight: normal;
	color: #1177DF;
	margin: 0px;
	padding: 4px 0px;
}

#MainContentWide.mainContent h2 {
	font-size: 12pt;
	font-weight: bold;
	margin: 0px;
	padding: 8px 0px 0px 0px;
}

#MainContentWide.mainContent h3, h4, h5, h6 {
	font-size: 11pt;
	font-weight: bold;
	margin: 0px;
	padding: 8px 0px 0px 0px;
}

#MainContentWide.mainContent p {
	font-size: 11pt;
	margin: 0px;
	padding: 4px 0px 10px 0px;
}

#MainContentWide.mainContent a, a:link, a:visited, a:active {
	font-size: 11pt;
	color: #1177DF;
	text-decoration: underline;
}

#MainContentWide.mainContent a:hover {
	color: #DE1818;
	text-decoration: underline;
}	

#MainContentWide.mainContent ul {
	margin: 0px 0px 0px 14px;
	padding: 0px;
}

#MainContentWide.mainContent li {
	list-style-image: url(../images/squareBullet.gif);
	list-style-type: none;
	margin: 4px 0px 4px 12px;
	padding: 0px;
}

#FooterContent.footerContent {
	color: #1177df;
	font-size: 10pt;
}

#FooterContent.footerContent ul {
	margin: 0px;
	padding: 14px 0px;
}

#FooterContent.footerContent li {
	display: inline;
	background-image: url(../images/redarrow.gif);
	background-position: left;
	background-repeat: no-repeat;
	margin: 0px 16px 0px 8px;
	padding: 0px 0px 0px 10px;
}

#FooterContent.footerContent a, a:link, a:active, a:visited {
	font-size: 10pt; 
	text-decoration: none;
	color: #1177df;
	display: inline;
	margin: 0px;
	padding: 0px;
}

#FooterContent.footerContent a:hover {
	color: #DE1818;
	text-decoration: underline;
}