/*------------------------------------------- 
discern the ancestors first---all these are until we get to the #### notes -------------------------------------------*/
body
{
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	padding: 0px;
	margin-top: 0px;
}

p,h1,pre { margin: 0px 5px 10px 10px; }

h1
{
	font-size: 14px;
	padding-top: 10px;
	color: #9999ff;
}
h2
{
	font-size: 16px;
	color: #6699ff;
}
h3
{
	font-size: 12px;
	color: #9999ff;
}
a:link
{
	color: #9999ff;
	text-decoration: none;
}

a:visited
{
	color: #9999ff;
	text-decoration: none;
}

a:hover
{
	color: #6699ff;
	text-decoration: none;
	background: #ccffff;
}

a:focus 
{ 	
	color: #336699;
	text-decoration: none;
}

a:active
{
	color: #003399;
	text-decoration: none;
}
/*-----------------------------------------------
now that the ancestors are happy you can start w/ the next items in the order that they show up
-------------------------------------------*/
#mainDiv
/*-------------------------------------------
This is the Outer wrapper It's margins that say auto are what makes it float in the center don't change that.
-------------------------------------------*/
{
	width: 800px;
	\width: 820px;
	w\idth: 800px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	padding: 0px;
	border: 1px solid #6699ff;
}

#hdrDiv
/*-------------------------------------------
This is the this is for your Header Banner it is actually the correct sizing for the graphic
-------------------------------------------*/
{
	height: 162px;
	width: 800px;
}

/*-------------------------------------------
This is the Nav Bar with a single graphic for a gradient fill
-------------------------------------------*/

#topNavBar
{
	height: 25px;
	margin: 15px 0;
	padding: 5px 0 0 0;
	text-align: center;
	font-size: 12px;
	border: 1px solid #ccccff;
}

#topNavBar a {
/*--------------------------------------------
this element gets the word/link spacing I was looking for
--------------------------------------------*/
	margin-right: 1.5em;
	/*-note: 900=bold-*/
	font-weight: 900;
	}

#bodyCenter
{
	width: 540px;
	line-height: 1.2em;
	padding: 0px;
	float: left;
	margin: 20px 8px 40px 10px;
	text-align: center;
	border: 1px solid #ccffff;
}
/*----bodyCenter has a float Left but text align center keep the margins the same for both body styles--*/

#bodyLeft
{
	width: 540px;
	line-height: 1.2em;
	padding: 0px;
	float: left;
	margin: 20px 8px 40px 10px;
	border: 1px solid #ccffff;
}
/* bodyLeft has a float Left but no text align because Left always defaults */

#panelRight
/*-------------------------------------------
This is the Right side panel usually for a Unordered list of links
-------------------------------------------*/
{
	width: 195px;
	padding: 0px 3px 5px 0px;
	float: right;
	margin: 30px 7px 5px 3px;
	border: 1px solid #ccccff;
}
/*-
-------------------------------------------*/
this is in case I want a paragraph style for the panel
---------------------------------------------*/
#panelRight p { font-size: 9px; }

#panelRight ul
{
	margin: 0;
	/*-padding 0 is a reset then further down you can tweek the padding per each different element --but only once for each element or else it will cascade into other elements--*/
	padding: 0;
	list-style: none;
}

#panelRight ul li
{
	margin: 0;
	/*-like here the padding gets changed for this element-*/
	padding: 0 0 5px 20px;
	/*--------------------
	background-image: url(images/bullet.gif);
	Could not get this to work but this is for a special bullet to be there for the UL Unordered list (another day....)
	
	background-repeat: no-repeat;
	background-position: 0 -1px;-----------------------*/
}

#panelRight a, #panelRight a:link, #panelRight a:visited
{
	text-decoration: none;
	color: #6699ff;
	padding: 2px;
	font-weight: 900;
}

#panelRight a:hover, #panelRight a:active
{
	text-decoration: none;
	color: #9999ff;
	background: #ccccff;
	padding: 2px;
	font-weight: 900;
}

#panelRight p.pix { text-align: center; }
#panelRight p.pixTop img { background: white; }
#panelRight p.pixBottom img { background: white; }

#footer
/*-------------------------------------------
This is the footer and separate Unordered list of link styles, it should differently style the footer links brought down by the include of your Top nav
this will re-style your include.
-------------------------------------------*/
{
	font-size: 10px;
	clear: both;
	padding: 2px;
	margin-top: 10px;
	text-align: center;
}

#footer ul
{
	margin: 0;
	padding: 0;
	list-style: none;
}

#footer ul li
{
	margin: 0;
	padding: 0;
	display: inline;
	padding-right: 5px;
}

#footer a, #footer a:link, #footer a:visited
{
	text-decoration: none;
	color: blue;
	border-left: 1px solid #000;
	padding-left: 10px;
}

#footer a:hover
{
	text-decoration: underline;
	border-left: 1px solid #000;
	padding-left: 10px;
}

#footer a:active
{
	text-decoration: none;
	background: #ccccff;
	border-left: 1px solid #000;
	padding-left: 10px;
}

/*------------------------------------------- 
Style sheet newly reworked, if used for another site please donate to GSS, Thank you
-------------------------------------------*/