/* ------------------- */
/*      STRUCTURE      */
/* ------------------- */

#wrapper {
	width: 790px;
	margin: 0px auto 0px auto;
	background-image: url('../assets/page_bg_y.jpg');
	background-repeat: repeat-y;
	background-position: center top;
}

#topHeader {
	width: 790px;
	height: 54px;
	background-image: url('../assets/top_header.jpg');
}

#topHeaderLeft {
	float: left;
	padding-left: 35px;
	padding-top: 30px;
}

#topHeaderRight {
	float: right;
	padding-right: 35px;
	padding-top: 30px;
}

#header {
	width: 790px;
	height: 183px;
	background-image: url('../assets/header_bg.jpg');
	background-position: center top;
	background-repeat: no-repeat;
}

#mainNav {
	width: 790px;
	height: 36px;
	background-image: url('../assets/main_nav_bg.jpg');
}

div#filling {
	clear: both;
	width: 750px;
	margin: 0 20px 0 20px;
}

div#left {
	float: left;
	width: 172px; /* subnav width */
	padding: 30px 46px 25px 38px; /* one line now */
} /* USE THESE */

div#right {
	float: right;
	width: 432px;
	padding: 30px 62px 25px 0px; /* one line now */
} /* USE THESE */

#footer {
	clear: both; /* This is really important */
	width: 790px;
	height: 28px;
	background-image: url('../assets/footer_bg.jpg');
}

#footerLeft {
	float: left;
	padding-left: 35px;
	padding-top: 5px;
}

#footerRight {
	float: right;
	padding-right: 35px;
	padding-top: 5px;
}

#designed {
	width: 790px;
	margin: 0px auto 0px auto; /* There are more proerties for this id under STYLES */
	padding: 15px 0 20px 0;
}



/* ------------------- */
/*       STYLES        */
/* ------------------- */

body {
	margin: 0px;
	background-color: #219C2D;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px; /* Being overridden by div#right */
}

p {
	color: #546B73;
	line-height: 155%;
}

a, a:visited, a:active {
	color: #219C2D;
}

a:hover {
	text-decoration: none;
}

h1 {
	color: #0066C3;
	font-size: 16px;
	font-weight: normal;
	padding-bottom: 10px;
	line-height: 22px; /* Can I size this better with percentages? */
	margin: 0; /* This is really important. Need to check this out, WHY needed? */
}

h1 span {
	color: #719F62;
	font-size: 16px;
	font-weight: normal;
	padding-bottom: 10px;
	line-height: 22px; /* Can I size this better with percentages? */
	margin: 0; /* This is really important. Need to check this out, WHY needed? */
}

h2 {
	color: #6595EE;
	font-size: 12px;
	font-weight: bold;
	padding-top: 8px;
}

h3 {
	color: #095AA5; /* Main page head */
	font-size: 24px;
	font-weight: normal;
	padding-bottom: 18px; 
}

ul {
	font-size: 11px;
	color: #219C2D;
	list-style-type: disc;
	line-height: 155%;
}

div#right {
	font-size: 12px; /* Can I size this better with percentages? */
}

div#left {
	color:#5EA7C3;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.imageRight {
	float: right;
	margin: 0 0px 15px 20px; /* NEW class may need to be created for images that appear within <p> */
}

.imageLeft {
	float: left;
	margin: 15px 15px 15px 0px;
}

.sideLeft img {
	padding-bottom: 12px;
	}
	
.sideRight {

}

#topHeader {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color:#FFF;
}

#footer { 
	font-size: 10px;
	color:#095AA5;
}

#footer a, #footer a:visited, #footer a:active { 
	color: #095AA5; /* It's interesting that color is NOT inherited but size is */
	text-decoration: underline;
}

#footer a:hover { 
	text-decoration: none;
}

#designed {
	text-align: center;
	font-size: 10px;
	color: #FFF
}

#designed a, #designed a:visited, #designed a:active {
	color: #FFF; /*  It's interesting that color is NOT inherited but size is */
	text-decoration: underline;
}

#designed a:hover {
	text-decoration: none;
}