* {	margin:0;	padding: 0;}

body {
	background: #ffffff url(../images/bg-edge-for-content.gif);
	text-align: center;
	font: 12px Verdana'Sans Serif';
	color: #121;
}

#header {
	background: #ffffff url(../images/bg-edge-for-buttons.gif) bottom repeat-x;
	width: 100%;
	height: 150px;
}

	
/*
	----------------------------------------------------------
	Start coding for the button bar underneathe the main logo.
	The buttons are created as a list using <ul> <li> tags.
	----------------------------------------------------------
*/

#buttonBar {
	background: #ffffff url(../images/bg-button-bar-holder.gif) no-repeat;
	margin-left: auto;
	margin-right: auto;	
	text-align: left;
	width: 750px;
	height:50px;
}

#buttonBar ul {
	background: url(../images/bg-button-bar.gif) repeat-x bottom left;
	margin-left: 10px;
	height: 25px;
	width: 730px;
	border-top: 5px solid #B6E500;
	border-bottom: 5px solid #B6E500;
	list-style-type: none;
	font: bold 11px Helvetica,'Sans Serif';
	color: #ffffff;
}

#buttonBar ul li.firstButton {
	margin-left: 35px;
}

#buttonBar ul li {
	display: block;
	float: left;
	margin: 0;
}

#buttonBar ul li a {
	text-decoration: none;
	display: block;
	float: left;
	padding: 0 0 0 20px;
	height: 25px;
	color: #ffffff;
}

#buttonBar ul li a span {
	float: left;
	padding: 10px 18px 0px 0px;            /* First value changes the position of the words in the buttons */
	height: 25px;
}

#buttonBar ul li a.regButton:hover {
	background: url(../images/bg-button-active.gif) repeat-x bottom left;
	color: #ffffff;
}


#buttonBar ul li a.highLighted, #mainNav ul li a.highLighted:hover {
	background: url(../images/bg-highlight-button-left.gif) no-repeat top left;
	color: #131313;
	line-height: 200%;					/* First Value changes the position of the word in the highlighted button. A high percentage can cause alignment problems in Internet Explorer!*/
}

#buttonBar ul li a.highLighted span {
	background: url(../images/bg-highlight-button-right.gif) no-repeat top right;
	display: block;
	padding: 0px 20px 0px 0px;            /* First Value changes the position of the word in the highlighted button */
	width: auto;
	height: 25px;
}

/*
	----------------------------------------------------------
	End coding for the button bar underneathe the main logo.
	----------------------------------------------------------
*/




/*
	----------------------------------------------------------
	Start coding for the main content
	----------------------------------------------------------
*/

#contentPane {
	background: #ffffff url(../images/bg-content-holder.gif) repeat-y top center;
	width: 750px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

/**
#contentArea {
	padding: 15px 20px;
}
**/

#contentPane h2 {
	margin-top: 10px;
	margin-left: 10px;
	font-size: 150%;
}

#contentMain {
	float: left;
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 8px;
	width: 712px;
	padding-bottom: 5px;
	display: inline;
}

#contentMain p {
	text-align: justify;
	margin-top: 20px;
	margin-right: 20px;
	line-height: 1.5;
	margin-left: 20px;
}

#testimonials {
	float: left;
	background: url(../images/testimonialGradient.gif);
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 0px;
	width: 642px;
	padding-bottom: 5px;
	padding-left: 35px;
	padding-right: 30px;
	font: italic 13px Helvetica,'Sans Serif';
	color: white;
	display: inline;
}

#testimonials p {
	text-align: justify;
	margin-top: 20px;
	margin-right: 20px;
	line-height: 1.5;
	margin-left: 20px;
}


/** 
	contentPageBottom is a div that contains the image for the bottom of the
	content page. The image smoothy transitions the content into the outter
	background of the entire website. It also seems to be nessasary to for the
	other content divs to be displayed properly. (I'm not sure why this is, but
	without this image the other background images in the content section don't
	show up)
**/

#contentPageBottom .img {
	float: left;
	width: 198px;
	margin-right: 50px;
	margin-left: 29px;
	margin-bottom: 85px;
	display: inline;
}

#testimonialCommentBottom .img {
	float: left;
	width: 198px;
	margin-right: 50px;
	margin-left: 29px;
	margin-bottom: 85px;
	display: inline;
}

#testimonialCommentBottom {
	float: left;
	width: 198px;
	margin-right: 15px;
	margin-left: 15px;
        margin-top:0px;
	margin-bottom: 10px;
	display: inline;
}