/*    */

body {
	margin: 11px 0 0 0;
	padding: 0;
	background: url(images/b10053b.gif) repeat;
	font: normal small Arial, Tahoma, sans-serif;
	color: #dddd00;
}


/* 
   margin 11px 0 0 0 
makes img2 have some space above it
   padding 0 
seems to be a saftey for various browsers
   background #xxxxxx gives color below img1
   color - #999999 
sets gray text color for whole doc, but is overridden below
*/


h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	letter-spacing: .2em;
	color: #696800;
}
/* 
   above sets some styles for ALL header sizes, whether they were used or not
*/

p, ul, ol, blockquote {
	margin-top: 0;
	line-height: 150%;
}
/* 
   above sets some styles for ALL paragraphs, uls, ols and blockquotes
*/

a {
	text-decoration: none;
	color: blue;
}

a:hover {
	text-decoration: underline;
}

/* Header 
(specific styles for the Header) */

#header {
	width: 950px;
	height: 180px;
	margin: 0 auto;
	xbackground:  url(images/b10053.gif) repeat-x;
	xbackground: url(images/sun_600x571px.gif) no-repeat;
}


#header * {
	text-decoration: none;
	text-align: center;
	color: #000000;
}
/* 
   the selector "*" is a universal selector, 
   here it means that every element of the ID "header"
   has the following rules...
*/


#header h1 {
	padding-top: 55px;
	font-size: 3em;
}
/* 
   the padding here moves the text in the h1 3element 
   down from the top of the div a specific amount
*/

#header h2 {
	font-size: 1.2em;
}

/* Menu */

#menu {
	width: 920px;
	height: 55px;
	margin: 0 auto;
	float: center;
}
/* 
   'menu' is the navigation just under the banner and over the columns
   this sets the size and centers it
*/

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
}
/* 
   the menu uses list items for the content
   they appear side-by-side, left to right
*/

#menu li {
	display: inline;
}
/* 
   http://www.w3schools.com/css/pr_class_display.asp
   for explaination of the display property
   
   inline is the default value - 
   The element will be displayed as an inline element, 
   with no line break before or after the element
   
   I guess adding this default protects the style by making
   sure it happens the way the designer meant for it to.
   
   must have something to do with the display rule below
   since "a" here is part of the 'menu' ID
*/

#menu a {
	display: block;
	float: left;
	width: 100px;
	height: 30px;
	padding: 3px 1px 0px 1px;
	background: url(images/img3a-s.gif) no-repeat center center;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: x-small;
	font-weight: bold;
	color: #DAAF03;
}

#menu a:hover, #menu .active a {
	background-image: url(images/img4a-s.gif);
	color: #FFFFFF;
}

#navbarSide {
	width: 150px;
	height: 240px;
	margin: 0 auto;
}

#navbarSide ul{
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
}
/* 
   the menu uses list items for the content
   they appear side-by-side, left to right
*/

#navbarSide li{
	display: inline;
	
}
#navbarSide a{
	display: block;
	float: left;
	width: 160px;
	height: 48px;
	padding: 3px 1px 0px 0px;
	background: url(images/img9blue2.gif) no-repeat center center;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 12px;
	font-weight: bold;
	color: #dddd00;
}

#navbarSide a:hover, #navbarSide .active a {
	background-image: url(images/img11aqua.gif);
	color: #FFFFFF;
}

/* Content */

#content {
	width: 950px;
	height: 2100px;
	margin: 0 auto;
	xbackground:  url(images/b10053a.gif) repeat-x;
}

#colTitle {
	float: left;
	width: 950px;
}

#colOne {
	float: left;
	width: 160px;
}

#colTwo {
	float: left;
	width: 200px;
	padding: 0 20px;
}

#colThree {
	float: left;
	width: 490px;
}

#colFour {
	float: left;
	width: 750px;
	padding: 0 20px;
}

#colFive {
	float: left;
	width: 350px;
	padding: 0 20px;
}

#colSix {
	float: left;
	width: 350px;
}

#colPic {
	float: left;
	width: 1024px;
	background: url(images/b10053a.gif) repeat-x;
}


#descriptions {
	float: left;
	width: 360px;
	padding: 0 20px;
}

/* Content Elements */

#content h2 {
	height: 25px;
	margin-bottom: 20px;
	padding: 9px 0 0 10px;
	background: url(images_b/img6.gif);
	letter-spacing: normal;
	font-size: 25px;
	color: #000000
}

#content h3 {
	text-transform: uppercase;
	letter-spacing: normal;
	xfont-size: x-small;
	xcolor: red;
	text-align: center;
	font-size: 12px;
}

#content h4 {
	height: 21px;
	margin-bottom: 5px;
	padding: 9px 0 0 10px;
	background: url(images_b/img6.gif);
	letter-spacing: normal;
	font-size: 15px;
	color: #000000
}

#content h5 {
	text-transform: uppercase;
	letter-spacing: normal;
	text-align: center;
	font-size: 24px;
	color: #DAAF03
}

#content ul {
	margin-left: 0;
	padding-left: 0;
	list-style: square inside;
}

/* Secondary Content */

#secondaryContent
{
	float: left;
	width: 13em;
	padding: 2.5em 2.5em 1.5em 2.5em;
}

/* Footer */

#footer {
	height: 70px;
	padding: 7px 0 0 0;
	background:  url(images/b10053.gif) repeat-x;
	xbackground: url(images_b/img5.gif) repeat-x;
}

#footer * {
	color: #000000;
}

#footer p {
	text-align: center;
	font-size: smaller;
}

#footer a {
	text-decoration: none;
	color: blue;
}

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