html {overflow-x:auto;height:100%;} /* fixes MSIE scrollbar bug */
	
body {
	font: 100% Arial, Helvetica, sans-serif;
	font-size:12px;
	background: #000;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #333;
}
a {
color: #ccc;
}
a:hover {
color: #fff;
text-decoration: none;
}
a img {
color: #ccc;
text-decoration: none;
border: 1px solid #fff;
}
a img:hover {
color: #fff;
text-decoration: none;
border: 1px solid #ccc;
}
.whiteborder {
border: 1px solid #fff;
}

td {vertical-align: top;}
.firstline {margin-top:0;}

#outercontainer {
	position: relative;
	width: 998px;
	margin: 0 auto;
	background: url(../images/site/borderbg.gif) repeat-y 50% 0; /* re-renters bg-img position */
}
#middlecontainer {
	position: relative;
	width: 964px;
	margin: 0 auto;
	background: transparent url(../images/site/duskbg.jpg) no-repeat 50% 0; /* re-renters bg-img position */
}

#container {
	width: 960px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	/* background: #333; used to give the background color to the secondary content */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
}
#header {
	position:relative;
	height:193px;
	/* background: transparent url(../images/site/headerexample.jpg) no-repeat 50% 0;  re-renters bg-img position */
	padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}


#menu {padding: 2px 0; margin:0;}
#menu ul {margin:0; padding:0; float:left;}
#menu ul li {display:inline;}
#menu ul li a {float:left; height:26px; background: url(../images/nav/pri_nav.jpg) no-repeat 0px 0px; color:#000;}
#menu ul li a:hover {color:#000;}

#menu ul li a.li1 {width:240px;} #menu ul li a.li1:hover {background-position: 0px -50px;}
#menu ul li a.li2 {width:240px; background-position: -240px 0;} #menu ul li a.li2:hover {background-position: -240px -50px;}
#menu ul li a.li3 {width:240px; background-position: -480px 0;} #menu ul li a.li3:hover {background-position: -480px -50px;}
#menu ul li a.li4 {width:240px; background-position: -720px 0;} #menu ul li a.li4:hover {background-position: -720px -50px;}



#maincontent {
	width: 960px;
	color: #FFF;
	padding: 0 0; /* was 0 20px remember that padding is the space inside the div box and margin is the space outside the div box */
}


/* CONTENT BEGINS ---------------------------------------------------------------------- */
#primarycontent {
	position: relative;
	width: 640px;
	float: left;
	background:transparent;
}
#secondarycontent {  /* DIFFERING VALUES */
	position: relative;
	width: 290px;
	background:transparent;
	padding: 0 15px;
	float: right;
}
#prefooter {
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#DDDDDD;
	clear:both;
	}
/* FOOTER BEGINS ---------------------------------------------------------------------- */
#footer {
	position: relative;
	margin: 0 auto;
	width: 964px;
	height: 28px;
	padding: 0 0px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background: #DDDDDD url(../images/site/footer.gif) no-repeat 50% 0;
	color: #FFF;
	clear:both;
	}
#subfooter {
	height:25px; background-color:#000; color:#FFF; padding: 10px;
}
	#subfooter a {
		color: #ccc;
		}
	#subfooter a:hover {
		color: #fff;
		text-decoration: none;
		}