body {
	margin: 0;
	padding: 0;
	background-color: #F0F0F0;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	/*font: 12px "Times New Roman", Times, serif;*/
	/*font: 12px Arial;*/
}
p,ul{
	padding-top: 0;
	margin-bottom: 0;
	margin-top: 0;
	padding-bottom: 1em;
}
img {
	border: 0;
	padding: 0;
	margin: 0;
}
form {
	border: none;
	margin: 0;
	padding: 0;
}
h4 {
	padding: 0;
	margin: 0;
}
a {
	color:#003399;
}
a:visited {
	color:#333;
}
a:hover {
	color:#C70303;
	text-decoration: none;
}

#accessibility {
	visibility: hidden;
}
#container {
	margin: 15px 0 0 -375px;
	padding: 0;
	position: absolute;
	left: 50%;
	width: 800px;
}
#header {
	margin: 0 0 20px 0;
}
#navigation {
	float:left;
	width: 142px;
	margin: 0 !IMPORTANT;
	margin: 0;
	padding: 0 !IMPORTANT;
	padding: 0;
}
div#navigation {
	color: #333333;
}
#home-rcol {
	float: left;
}


/***************** Content Area Styles ***********************/
#content-home, #content-inside {
	float: left;
}
#content-home {
	width: 461px;
	margin: 0 10px 20px 10px !IMPORTANT;
	margin: 0 10px 0 10px;
	background-image: url(/assets/content_bg.gif);
	background-repeat: repeat-y;
}
#content-inside { 
	width: 611px; 
	margin: 0 10px 20px 10px !IMPORTANT;
	margin: 0 10px 0 10px;
	background-image: url(/assets/content2_bg.gif);
	background-repeat: repeat-y;
}
/*created #content-inside li so that I could edit the contents inside the list items on  specials.asp. sh. */ 
#content-inside li{	
    clear: both;
	height: 10px;
	width: 400px;
/* I removed background-image: url(/assets/arrow.jpg);. This removed the arrrows to the left of each list item. sh.*/
	background-repeat: no-repeat;
	background-position: 0.0em 0.7em;
	float:left; 
	display:block; 
	padding:4px 0px 4px 0px;
	clear:both;
/*reduced the line height to 5px from 10px. sh. */
	line-height: 5px;
} 

#content {
	margin: 0 10px 0 10px;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
}
#content .listing {
	clear: both;
	margin: 0 0 20px 0;
	padding: 10px;
	border:1px solid #CCC;
	height: 150px;
}
#content img.left {
	float: left;
	margin: 0 10px 0 0;
}
#content img.right {
	float: right;
	margin: 0 0 0 10px;
}
#content h1, #content h2 { margin: 0 0 10px 0; padding: 0; font: 12px Verdana, Arial, Helvetica, sans-serif; }
#content h1 {
	font-size: 18px;
	color:#003366;
}
#content h2 {
	font-size: 14px;
	font-weight:bold;
	color: #C70303;
}
#content h3, #content h5 {
	font-size: 14px;
	font-weight:bold;
	color: #003366;
	letter-spacing: .1em;
}
#content h5 {
	padding: 20px 0 0 0;
	margin: 0;
}

#content p {
	text-indent: 30px;	
}

#content ul {
/* reduced margin from 30px to 10px. sh. */
	margin: 10px;
}
#content li {
	list-style-position: outside;
	margin: 0 0 4px 30px;
}
.qa {
	font-weight: bold;
}
.qa-text {
	margin-left: 15px; 
}
.small-date {
	font-size: 10px;
	color:#666;
}

ul.inpage { list-style: none; padding: 0; margin: 20px 0px 0px 20px; background-color:#FFCCCC; }
/*#subnavLeft ul li { width:157px; float:left; display:block; padding:4px 0px 4px 0px; }*/
ul.inpage li { 
	width: 400px;
/* I removed background-image: url(/assets/arrow.jpg);. This removed the arrrows to the left of each list item. sh.*/
	background-repeat: no-repeat;
	background-position: 0.0em 0.7em;
	float:left; 
	display:block; 
	padding:4px 0px 4px 0px;
	clear:both;
/*reduced the line height to 5px from 10px. sh. */
	line-height: 5px;
}

/***************** Footer Area Styles ***********************/
#footer {
	clear: left;
	margin: 325px 0 0 0 !IMPORTANT;
	margin: 0;
	padding: 0;
	font-size: 9px;
}

#footer a {
	text-decoration: none;
	color:#333333;
}
#footer a:hover {
	text-decoration:underline;
	color:#333333;
}
