/* 
* BASIC ELEMENT STYLING
*/

/* define defaults that all elements use unless told otherwise */
body {	
	background-color:#FFFFFF;
	color:#0000CC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	background-image:  url("../images/cloud.jpg");
}

/* apply shading to major sections of site */
#banner,
#footer,
#left,
#center
{
	background-repeat:repeat-x;
	background-color: white;
	border: 4px outset #36F;
}
#banner{ background-image:url(../images/grayshade_100.jpg); }
#footer{ background-image:url(../images/grayshade_50.jpg); }
#left,#center{ background-image:url(../images/grayshade_400.jpg); }

/* make links interact with user */
a:link {
	color: #CC3333;
}
a:visited {
	color: #663333;
}
a:hover {
	color: #CC9900;
}
a:active {
	color: #000000;
}

/* make sample code more visible */
pre{
	font-size: 10pt;
}
em{
	color: #CC3333;
	font-style: normal;
}

/* frame pictures */
img{
	margin: 5px;
	border: medium ridge #3366FF;
}

img.banner
{
	border: none;
}

/* by default, table headers don't align with data. This is silly, so let's change it */
th{
	text-align:left;
}
/* table with visible cells */
table.data{
	border: medium ridge #3366FF;
	border-spacing: 0;
}
table.data tr{
}
table.data td, table.data th{
	border: thin #3366FF solid;
	padding: 0 5px;
}

/*
* NAVIGATION BAR
*/

#mainnav a
{
	font-size: 14pt;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	margin: 0 10px;
	background-color:#666;
	color: white;
	width: 125px;
	margin: 8px auto;
	padding: 6px 5px;
	border: 3px outset #36F;	
	text-align: center;
	display: block;
}


#mainnav a:active{
	color:#FC6
}

#footernav a
{
	color: #C33;
	font-size: 12pt;
	font-weight: bold;
	margin: 5px 8px;
	font-family: Arial, Helvetica, sans-serif;
}


#footernav a:visited{color: #C33;}

.navbar ul{
	list-style-type:none;
	padding: 0;
	margin: 0;
}

#mainnav ul{	
	display: block;
	text-align: center;
	margin: 0 auto;
}

#mainnav ul li{
	margin: 0 auto;
}