body,td,th {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
}
body {
	background-color: #FFFFFF;
}

/* myborder,#wrapper,#header1,#header2, #leftnav, #picture1, #footer1 { border: 1px solid #000000; } */

/* .myborder lists all the div ID's that will take on the defined border style so that changing the border style in .myborder will change the borders for all the listed divs classes*/


/* container styles */

/* set wrapper width in px to set a fixed width of the web page, set margins to '0 auto' and position to 'relative' so the page is centered. All other layers must be nesting within 'wrapper'and position set to 'absolute' so there position is referenced against top-left of wrapper. If nested layers are set to 'relative' then the position is set relative to the nearest top and left objects and this can be awkward to work with at times. NOTE: I found it is easier to set wrapper height to a fixed size while developing then change it to 'auto' before publishing */

#wrapper {
	position:relative;
	visibility:visible;
	width:960px;
	height:1000px;
	z-index:1;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
	
#header1 {
	position:absolute;
	width:960px;
	height:220px;
	background:url(headerimage.gif); /* header logo for all pages */
	top:0px;
	z-index:2;
	left: 0px;
	overflow: visible;
}
#leftnav {
	position:absolute;
	width:200px;
	height:280px;
	left:0px;
	z-index:4;
	top: 250px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #3333CC;
}

#header2 {
	position:absolute;
	width:960px;
	height:25px;
	z-index:3;
	left: 0px;
	top: 220px;
}

#header3 {
	position:absolute;
	width:735px;
	height:44px;
	z-index:5;
	top: 253px;
	left: 211px;
	padding-left: 10px;
	overflow: visible;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #3333CC;
}

#maincontent {
	position:absolute;
	width:735px;
	height:905px;
	left:213px;
	z-index:6;
	top: 306px;
	padding-left: 10px;
	overflow: visible;
}



/* LINKS default setup */

a {
	font-size: 14px;
	font-weight:normal;
}
a:link {
	color: #000000;
	text-decoration: none;
}
a:active {
	color: #000000;
	text-decoration: none;
}
a:visited {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color:#FF9900;
	text-decoration: underline;
}

/* HEADING STYLES */


.myh1 {
	font-size: 32px;
	color: #FF0000;
	font-weight: bold;
}
.myh2 {
	font-size: 28px;
	color: #0000FF;
	font-weight: bold;
}
.myh3 {
	font-size: 20px;
	vertical-align:top;
	color:#3333CC;
	font-weight: bold;
}
.myh4 {
	font-size: 24px;
	color:#66cc00;
	font-weight:100
}
.myh5 {
	font-size: 14px;
	font-style:italic;
	color: #000000;
	font-weight: normal;
}
.myh6 {
	font-size: 14px;
	color: #000000;
	font-weight: bold;
}

.smallprint {
	font-size: 10px;
	color: #000000;
	font-weight: normal;
}

.myh7 {
	font-size: 16px;
	vertical-align:top;
	color:#FF0000;
	font-weight: bold;
}


/* CUSTOM IMAGE TAG STYLE */

img {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 2px;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	border: medium solid #000000;
}

img.logo {  /* overrides the standard img formatting set above */
	margin: 0;
	padding: 0;
	border: 0;
}



/* My Custom Styles aka Classes */


a.mylink { /* This sets the general properties for my custom defined link style */
	font-size: 12px;
	font-style: italic;
	color:#006600; }
	
/* Below are the specific properties for the different link states */

a.mylink:link {
	color:#006600
	text-decoration: none; }

a.mylink:active {
	color: #006600;
	text-decoration: none; }
	
a.mylink:visited {
	color: #006600;
	text-decoration: none; }
	
a.mylink:hover {
	color:#FF9900;
	text-decoration: underline; }