* /*Sets padding and margin to 0 for all values*/
{
	padding: 0;
	margin: 0;
}
body, html {
	color: #333; 
	font-family: "Century Gothic", Verdana, Arial, Tahoma, sans-serif;
	background-color: #d9d9d9; 
	text-align: center; /*** Centers the design in old IE versions ***/
}
body {
	font-size: 70%;
/*display:table-cell;*/
vertical-align:middle;
text-align:center;
width:100%;
height:100%;
}
p {
	padding: 4px 0 4px 0;
}
a {
	color: #000099;
	border: 0;
}
a:hover {
	color: #0000FF;
	text-decoration: none;
}

h1, h2, h3, h4, h5 {
	font-weight: bold;
	padding: 5px 0px 0px 0px;
}
h1 {
	font-size: 2em;
}
h2 {
	font-size: 1.4em;
}
h3 {
	font-size: 1.3em;
}
h1 a, #header h2 {
	color: #fff;
}
img {
	border: 0;
}
div.imageContainer img {
	behavior: url('/assets/templates/sps/iepngfix.htc'); /** commented by HQ **/
}
.clear {
	clear: both;
}
.imageContainer {
  overflow:auto;
  width:652px;
  height:170px;
}
#mainContainer {
	width: 907px;
	margin: 20px auto 0px auto; /*** Centers the design ***/
	padding-top: 9px;
	min-height: 300px;
	background: #00f;
	text-align: left; /*** Because we centered the text in body we have to move the text back to left aligning ***/
}
* html #mainContainer {
	height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}
/**************************
HEADER
**************************/
#header {
	background: #fff;
	border-top: #fc0 solid 6px;
	padding-top: 2px;
	padding-bottom: 2px;
	height: 170px;
	width: 907px;
}
#masthead {
	float: left;
	width: 652px;
	height: 170px;
	margin-right: 3px;
	background-color: #fff;
}
#masthead img {
	width: 652px;
	height: 170px;
}
img#titleOverlay {
	width: 330px;
	height: 32px;
	position: absolute;
	margin-left: 55px;
	margin-top: -110px;
}
#masthead h1 {
	margin-left: 85px;
	margin-top: -90px;
	position: absolute;
	font-weight: normal;
	text-transform: lowercase;
	font-size: 250%;
	color: #00f;
}
#subhead {
	float: left;
	width: 252px;
	height: 170px;
	background-color: #fff;
}
#subhead img{
	width: 252px;
	height: 170px;
}


/*************************
TOP MENU
**************************/
#topmenu {
	/*margin: -28px 0 0 -907px; ** Move the column so it takes the positon as a top menu ***/
	/*margin: -68px 0 0 0px;*/
	/*margin: -2px 0 0 -612px;*/
	float: left;
	/*z-index: 100000;*/
	background: #fc0;
	padding: 5px 40px;
	width: 827px;
	height: 18px;
	overflow: hidden;
}
* html #topmenu {
	/*position: relative;  ** IE needs this  ***/
}
#topmenu ul {
	list-style: none;
}
#topmenu li {
	display: inline;
	float: left;
	padding: 0px 12px;
}
#topmenu a {
	text-decoration: none;
	line-height: 18px;
	padding-right: 1px;
	white-space: nowrap;
	text-transform: uppercase;
	color: #333;
	font-weight: bold;
	font-family: "Century Gothic", Arial, Verdana, sans-serif;
	font-size: 12px;
}
#topmenu li.active a {
	color:#fff;
}
#topmenu  a:hover,
#topmenu li.active a:hover {
	color: #00F;
}


/**************************
CONTENT AND COLUMNS
**************************/
.outer {
	/*margin-top: 28px; ** We need to add some space for our top menu ***/
	 /*padding-left: 165px;* HQ changed this */
	background-color: #fff; 
}
* html .outer {
/*** No need for hacking IE on this layout ***/
}
.inner {
	width: 742px; /*** This width is for non-IE browsers. Mozilla makes this necessary. Be sure to check your layout in different browsers if you changes this value. Especially IE7 seems to create a horizontal scroll if this value is set too large ***/
}
* html .inner {
	width: 100%;
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout.
***/
.float-wrap {
	float: left;
	width: 907px;
	margin-left: -165px; /*** Same length as .outer padding-left but with negative value ***/
	margin-left: 0px;
	height: 348px;
	overflow: auto;
}
* html .float-wrap {
/*** No need for hacking IE on this layout ***/
}
#content {
	float: left;
	width: 525px;
	padding: 20px 20px 5px 48px;
	height: 308px;
/*	overflow: auto;*/
}
.contentWrap {
	padding: 5px;
}
.contentWrap ol, .contentWrap ul {
	margin: 3px 0 5px 35px;
}
.contentWrap li {
	padding-bottom: 2px;
}
/**************************
RIGHT MENU
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/
#rightContainer {
/*	float: right;*/
	position:absolute;
	margin-left:424px;
	margin-left:590px;
	margin-top:28px;
	width: 224px;
	height: 252px;
	padding: 29px 0px 67px 63px;
	overflow: hidden;
	background-image: url('images/sps-watermark.png');
	background-position: 10px 275px;
	background-repeat: no-repeat;
}#right {
	float: left;
	padding: 0px 0px 0px 28px;
	border-left: 1px solid #d7deeb;
	height: 252px;
	width: 197px;
	overflow: auto;
}
#right ul {
	list-style: none;
	padding-bottom: 5px;
}
#right li {
	padding-bottom: 5px;
}
#right a {
	text-decoration: none;
	color: #333;
	font-weight: bold;
	font-family: "Century Gothic", Arial, Verdana, sans-serif;
	font-size: 100%;
}
#right li.active a {
	color: #00C;
}
#right a:hover,
#right li.active a:hover {
	text-decoration: underline;
}

/**************************
FOOTER
**************************/
#footer {
	width: 907px;
	margin: 0px auto;
	text-align: center;
	font-style: italic;
	background-color: #AEBCD7;
	padding: 9px 0px;
	font-family: Times New Roman, Arial, Tahoma, Verdana, sans-serif;
	font-size: 80%;
	font-weight: bold;
}
#footer p {
	padding: 4px 0 4px 0;
}
#footer ul {
	list-style: none;
	display: inline;
	clear: none;
}
#footer li {
	display: inline;
	float: left;
	padding: 0px 2px;
}
#footer a {
	text-decoration: none;
	color: #333;
}
#footer a:hover {
	text-decoration: underline;
	color: #333;
}
#footerStripe {
	width: 907px;
	margin: 0px auto;
	height: 4px;
	background-color: #00f;
	border-top: 1px solid #AEBCD7;
	overflow: hidden;
}
#ContactUs .special {
	display:none; /* for anti spam-bot field */
}
.required {border:2px solid #f00;}
.invalid {border:2px solid #d90;}
label.required {border:0;}
label.invalid {border:0;}