body {
	background: #ffeeaa url(pageback.gif) repeat fixed;
	margin: 0px;
	padding: 0px;
	color: #000077;
	font: bold 16px Arial, Helvetica, sans-serif;
	text-align: center;
}

#flags {
	border: opx solid #000000;
	position: absolute;
	top: 40px;
	right: 1px
	padding: 2px 2px 2px 2px;
	z-index: 4;
}
#flags img {
	width: 40px;
	border:0px;
	z-index: 4;
	cursor:crosshair;
}
div, p, ul, li, h1, h2, h3, h4, h5, h6 { margin: 0px; padding: 0px; }

p.blender{
	color: #91908F;
	font-size: 10%
}

h1, h2, h3, h4, h5, h6 { color: #FFAE00; }
#container {
	margin: 10px auto 10px;
	top: 5px;
	width: 780px;
	height: 600px;
	border-top: 0px solid #000000;
	border-right: 2px solid #000000;
	border-bottom: 2px solid #000000;
	border-left: 2px solid #000000;
	padding: 0px 0px 25px;
	background: #404040 url(none) no-repeat center bottom;
	text-align: left;
	position: relative;
}
#pageHeader h1 {
	border: 1px solid #000000;
	margin-bottom: 32px;
	background: url(to_header_01.jpg) no-repeat;
	height: 32px;
}
#pageHeader h1 span { display: none; }

/* Above: That's just for dumping the text allowing the backround image in it's containing element to show through*/

#pageHeader h2 {
	width: 774px;
	background: #ffffff url(to_beauty.gif) no-repeat;
	position: absolute;
	height: 17px;
	top: 3px;
	right: 3px;
	left:3px;
}

/*#pageHeader h2 span { display: none; }*/
#pageHeader { position: relative; }
#quickSummary {
	margin: 0px;
	border: 1px solid #000000;
	background: url(summaryback.jpg) repeat;
	padding: 0px;
	width: 160px;
	position: absolute;
	z-index: 1;
	top:67px;
	left: 0px;
	height: 165px;
}
#quickSummary p {
	margin: 0px 0px 0px 0px;
	color: #A323A3;
	font: bolder small-caps 1.1em/1em "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#quickSummary p.p1 {
	margin-top: 5px;
	border: 0px solid #23282C;
	padding: 0px;
	color: #FFAE00;
	text-align: center;
}
#quickSummary p.p2 {
	margin-top: 5px;
	border: 0px solid #23282C;
	padding: 0px;
	color: #999999;
	font-weight: normal;
	text-align: center;
}
#quickSummary p a {
	color: #CCCCCC;
	font-weight: normal;
	text-decoration: none;
	padding-left: 0px;
	margin-left: 0px;
	display: block;
	background: url(ani1.gif) no-repeat left center;
	cursor:crosshair;
}
#quickSummary a:hover {
	color: #EBEBEB;
	font-weight: normal;
	text-decoration: none;
	background: url(ani2.gif) no-repeat left center;
	cursor:crosshair;
}
#footer {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	width: 160px;
	position: relative;
	left: 0px;
	top:500px;
	text-align: center;
	border-top: 1px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
	background: url(summaryback.jpg) repeat;
}
#preamble {
	margin: 0px 0px 0px 175px;
	width: 590px;
	border: 2px solid #000000;
	padding: 10px 0px;
	background: #91908F url(none) repeat center top;
	text-align: center;
	position: relative;
	top: 0px;
	left: 0px;
/*	z-index: 3;*/
}
#preamble p {
	padding: 0px 0px 0px;
	margin: 0px auto;
	width: 500px;
	color: #000077;
	font: bold 1.2em/1em "Trebuchet MS", Arial, Helvetica, sans-serif;
	letter-spacing: 0.08em;
	text-align: left;
}
#preamble p.p3 { padding-bottom: 0px; }
div#preamble h3 {
	width: 400px;
	margin: 0px;
	padding: 0px 0px 0px 34px;
	background: url(h3back.gif) no-repeat left top;
	font-size: 16px;
	line-height: 24px;
	text-align: left;
	position: absolute;
	top: -24px;
	z-index: 1;
	left: -3px;
	height: 23px;
}
#supportingText {
	margin: 0px 0px 0px 175px;
	width: 510px;
/*	height: 300px;*/
	padding: 0px;
	position: relative;
}
#supportingText p { padding: 5px 12px 1em; }
#supportingText p1 { padding: 5px 12px 1em; }
#supportingText div {
	border: 1px solid #000000;
	padding: 0px;
	margin: 25px 0px 0px 0px;
	width: 590px;
	background: #91908F;
	position: relative;
	z-index: 2;
}
#supportingText iframe {
	border:0px;
	padding=5px;
}
#supportingText img {
	border:0px;
	padding=10px;
}
#supportingText h3 {
	width: 400px;
	margin: 0px;
	padding: 0px 0px 0px 24px;
	background: url(h3back.gif) no-repeat left top;
	font-size: 16px;
	line-height: 24px;
	position: absolute;
	top: -24px;
	z-index: 1;
	height: 23px;
	left: -2px;
}
#intro a {
	color: #FFCC00;
	font-weight: bold;
	text-decoration: none;
	cursor:crosshair;
}
#supportingText a {
	color: #FFAE00;
	font-weight: bold;
	text-decoration: none;
	cursor:crosshair;
}
#supportingText a:hover { border-bottom: 2px dashed #FFAE00; color: #CCCCCC;	cursor:crosshair;
 }
#supportingText a:active { border-bottom: 2px dashed #333333;
        background: #5A6269;
	cursor:crosshair;
 }
div#supportingText div#requirements {
	margin-bottom: 0px;
	background: #61605F url(none) no-repeat center bottom;
}
/* the background image above is what gives the transparency effect, 
it's just a carefully cut out chunk of the #container divs background image
with a semi-transparent overlay on it.   Oh... I can't wait for true PNG surrport*/
div#supportingText div#explanation {
	height:430px;
}
div#listing {
	margin: 0px 0px 0px 10px;
	padding-left: 30px;
	list-style: none; text-align: left;
	background: url(ani2.gif)  no-repeat left center; 
	border: 0px solid #000000;
	width: 300px;
	left: 20px;
}
#linkList {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	width: 160px;
	background: url(ani2.gif) no-repeat;  /* this is just here as a preloader for the nav mouseover to kill the delay when it's first hit.. it can't be seen in this position because of an overlaying background image*/
	position: absolute;
	left: 0px;
	top: 260px;
	z-index: 2;
}

#lselect, #lfavorites, #larchives, #lresources {
	border: 1px solid #000000;
	padding: 0px;
	margin: 10px 0px 40px;
	background: #60676F;
	font-size: .9em;
	position: relative;
}
#linkList h3 {
	width: 160px;
	border-top: 0px #000000;
	border-right: 1px solid #000000;
	border-bottom: 0px #000000;
	border-left: 0px #000000;
	margin: 0px;
	padding: 0px;
	background: url(h3back.gif) no-repeat left top;
	font-size: 16px;
	line-height: 24px;
	position: absolute;
	top: -24px;
	z-index: 1;
	left: -2px;
	height: 24px;
}
#linkList h3 span { margin: 0px; padding: 0px 0px 0px 34px; }
/*#linkList span { margin: 0px; padding: 0px; display: block; }*/

div#lselect a.c {
	margin: 0px 0px -15px; /* seemed to have to do that because of the extra   in each li item */
	padding: 0px 15px 0px 0px;
	display: inline;
	background: url(none);
	color: #FFCC00;
	font-weight: normal;
	font-variant: normal;
	font-size: 1em;
	text-decoration: none;
	text-transform: capitalize;
	text-align: center;
	cursor:crosshair;
}
/* The following 4 divs all use the same background file...
 it's larger than it needs to be to allow the text to resize PLUS you can 
 use the background-position to offset it in different divs for the illusion 
 of more than one file without the bandwith loss*/
 
div#lselect {
/*	background: url(to_leftcol_02.jpg) repeat-y -50px -620px;*/
	background: url(summaryback.jpg) repeat;
	color: #999999;
}
div#lresources {
	background: url(to_leftcol_02.jpg) no-repeat -20px -20px;
	text-align: left;
}
div#larchives {
	background: url(to_leftcol_02.jpg) no-repeat -40px -20px;
}
div#lfavorites {
/*	background: url(to_leftcol_02.jpg) no-repeat -60px -20px;*/
	background: url(summaryback.jpg) repeat;
}
#linkList ul { list-style: none; text-align: center; }
#linkList li { margin: 0px; padding: 2px 0px; }
#linkList a {
	padding-left: 28px;
	margin-left: 0px;
	display: block;
	background: url(ani1.gif) no-repeat left center;
	color: #BBBBBB;
	font-weight: bold;
	font-size: 1em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: left;
	cursor:crosshair;
}
#linkList a:hover {
	background: url(ani2.gif) no-repeat left center;
	color: #EBEBEB;
	cursor:crosshair;
}
div#lselect a.c:hover {
	background: none;
	color: #CCCCCC;
	font-style: italic;
	text-decoration: none;
	cursor:crosshair;
}
div#linkList div#lresources a {
	margin: 0px 0px -10px;
	padding: 0px;
	display: inline;
	background: url(none);
	text-transform: capitalize;
	cursor:crosshair;
}
div#linkList div#lresources ul { margin: 0px; padding-left: 15px; text-align: left; }
/* Stupid IE5, almost made it without a hack, but don't have time figure 
out how to get rid of extra pixels from the border or even if I can without 
resorting to a hack.  By the way, this is called the SBMH short for Simple
Box Model Hack, just Google it for more info if you need*/
#linkList h3 { \left: -1px; lef\t: -2px; \width: 201px; w\idth: 160px; }