body {
     font: 100.01% Verdana, Arial, Helvetica, sans-serif; /* this sets the overall font size and family overriding an older Opera bug */
     background: #8DA080; /* this creates the overall color. The drop shadowed image is placed in the #holder div */
     margin: 0; /* zeroing the margin and padding allows all browsers to start from the same place since defaults are different. */
     padding: 0;
     text-align: center; /* corrects a bug in early IE browsers allowing the overall design to center. */
}

#holder {
     background:  url(images/background.jpg) repeat-y; /* this creates the two column, drop shadowed background. It will go from top to bottom making both columns appear to be the same length no matter which is longer. */
     margin: 0 auto; /* this centers the overall design */
     padding: 0 10px; /* the left and right padding keeps the content back from the drop shadows (they are 10px each). */
     width: 720px; /* 20px less than actual width due to padding above */
     text-align: left; /* corrects the above text-align: center; for those browsers that need it */
     position: relative; /* this gives the div positioning so that an absolutely positioned div (AP Div) can be placed within it. Otherwise, the AP Div would be placed relative to the body element (or the last positioned parent element). */
}

/* \*/
* html #holder {
width: 740px;
w\idth: 720px;
}
/* feeds IE 5* PC the correct width due to its non-standard box model */


/* Needed to hold link to main content in compliance with Section 508, rule o. */
#skipnav {
	position: absolute; /* Sets the div to be positioned in a precise spot in relation to its nearest postioned ancestor, or barring that, the body. Also removes it from the flow, so it will not push down the header image. */
	top: 0; /* Places the div at the top of body. */
	left: 0; /* Places the div at the left side of body. */
	margin-left: -1000px; /* Moves the div off the left side of the screen, making it invisible to those using visual browsers but accessible to those using screen readers and other user agents. */
	}

#header {
	background: url(images/header2.jpg) repeat-x; /* creates the vertically repeating background for the top section */
	font-family: Tahoma, Arial, Helvetica, sans-serif; /* sets the font-family for both the links and the header within this div */
	height: 105px; /* the actual height desired is 155px. But height and padding (and borders if they were used) must add up to the final desired number */
	padding-top: 50px; /* this padding keeps the home and contact links away from the top of the browser window */
	padding-right: 20px; /* this padding keeps the home and contact links away from the right side of the browser window */
	margin: 0;
}
#header h1 {
	font-size: 1.0em; /* sets the font size of the heading (tagline) */ 
	color: #FFFFFF;
	padding: 65px 2px 5px 75px; /* keeps the tagline placed where desired. --- these padding values, if using sIFR, must be mirrored (exactly the same) in the replacement call in the document */
	margin: 0;
	font-weight: normal; /* a styling choice */
}
/* IE Mac wants to place the subheading slightly differently and is fed the values in the selectors above. The following selectors feed the correct padding and height to compliant browsers (as well as the non-standard IE 5* browsers) and are hidden from IE Mac. */
/*hide from IE Mac -   \*/
#header {
	padding-top: 40px;
	height: 155px; hei\ght: 115px;
}
#header h1 {
	padding-top: 75px;
} 
/* end hide from IE Mac -- do not add a comment before the close of this hack */

#header p {
	text-align: right; /* aligns the home and contact links on the right side */
	font-size: .8em;
	letter-spacing: .06em; /*may need to remove if it causes quirkiness */
	line-height: 145%;
	float: right;
}
#header a:link, #header a:visited { /* sets the styling of the links in the header */
	color: #FFFFFF;
	text-decoration: none;
}
#header a:hover, #header a:active, #header a:focus { /* sets the hover styling */
	text-decoration: underline;
}
#logo {
	background: url(images/logo_bott2.jpg) no-repeat 0px 99px; /*logo placed in as a background image so that sIFR text can be used for the tagline and slightly overlap ... the image, since it is only the bottom half of the logo, is placed 99px from the top of this element. This allows it to match with the top half. */
	width: 265px; /* this is the width of the logo image */
	height: 155px; /* This is the height of the actual logo image from the comp (not sliced in half) */
	position: absolute; /* this keeps the div placed exactly where you want it in the parent element */
	top: 0; /* the top starts at the very top of the parent element */
	left: 10px; /* this starts the logo image 10px from the left of the parent element, creating some visual space */
}

#content {
	margin: 20px 20px 0 250px; /* this carves out the space for the navigation and creates the proper content area */
	padding-bottom: 5px;
}
/* The following selector will be shown only to IE */
* html #content {
	margin-left: 247px; /* this is neccessary to avoid float drop in IE PC */
	height: 1%; /* this is neccessary if you're using sIFR -- IE drops everything down below the left sidebar from the beginning of the sIFR on ... a dimension is required -- this is the Holly Hack */
}

/* The following selectors are styling for the content div's headings, paragraphs and links. If sIFR is used for the headings, make sure any padded added to these selectors is also added to the sIFR replacement calls in the body. */
#content h2, #content h3 {
	font: normal 1.35em Tahoma, Arial, Helvetica, sans-serif;
	color: #000000;
}
#content h4 {
	font: normal 1.05em Tahoma, Arial, Helvetica, sans-serif;
	color: #000000;
}
#content p {
	color: #333;
	font: .75em/135% Verdana, Arial, Helvetica, sans-serif;
}
#content <td> {
	color: #333;
	font: .75em/105% Verdana, Arial, Helvetica, sans-serif;
}
#content .link { /* creates the larger Learn More link at the bottom of the page */
	font: 1.00em Arial, Helvetica, sans-serif;
	font-weight: bold; /* makes the links appear bolded */	
}
P.testimonialsAuthor { 
		font-family : Verdana, Arial, Helvetica, sans-serif;
		font-size : 12px;
		font-weight: bold; /* makes the links appear bolded */	
		margin-left: 12px; 
		margin-right: 12px;
} 
#content a:link, #content a:visited {
	color: #FF0000;
	text-decoration: none;
	font-weight: bold; /* makes the links appear bolded */	
}
#content a:hover, #content a:active, #content a:focus {
	text-decoration: underline;
	color: #FF0000;
}

#faq {
	margin-left: 15px;
	margin-right: 15px;
	margin-top: 5px;
	color: #333;
	font: .75em/135% Verdana, Arial, Helvetica, sans-serif;
}
#faqQues a:link, #faqQues a:visited {
	font: .75em/135% Verdana, Arial, Helvetica, sans-serif;
	color: #FF0000;
	text-decoration: none;
}
#faqQues a:hover, #faqQues a:active, #faqQues a:focus {
	font: .75em/135% Verdana, Arial, Helvetica, sans-serif;
	text-decoration: underline;
	color: #FF0000;
}

A.faq {
	font: .75em/135% Verdana, Arial, Helvetica, sans-serif;
	color: #FF0000;
	text-decoration: none;
}
A.faq:HOVER {
	font: .75em/135% Verdana, Arial, Helvetica, sans-serif;
	text-decoration: underline;
	color: #FF0000;
}

#video a:link, #faqQues a:visited {
	font: .75em/135% Verdana, Arial, Helvetica, sans-serif;
	color: #FF0000;
	text-decoration: none;
}
#video a:hover, #faqQues a:active, #faqQues a:focus {
	font: .75em/135% Verdana, Arial, Helvetica, sans-serif;
	text-decoration: underline;
	color: #FF0000;
}



/* The following selectors control the sidebar/navigational area */
#sidebar {
	float: left; /* the navigation is floated to the left so that it can be any length. If it were an AP Div, it would be "out of the flow" of the document and could flow off the bottom edge of the page */
	width: 210px; /* must have a width value */
	margin-top: 20px; /* this aligns the beginning of the sidebar content with the main content div */
}
#sidebar h2 {
	font: normal 1.2em Tahoma, Arial, Helvetica, sans-serif; /* sets the weight, font-family and size */
	color: #fff; /* text color of the headings */
	background: #FECF80 url(images/sidehead3.jpg) repeat-y; /* This creates the gradient background of the heading */
	padding: 1px 5px 2px; /* this keeps the text away from the inner edges of the box we've created. These values MUST be mirrored in your sIFR replacement calls in the body */
	margin: 0 0 5px 20px; /* this controls the outer edge placement which keeps the heading box away from other elements */
}
/* the following selectors create the button look using an unordered list */
ul#nav {
	padding: 0; /* begins with the usual zeroing of padding and margin to create a level playing field */
	margin: 0;
	list-style: none; /* removes the list marker from the navigation */
}
#nav li {
	padding-left: 20px; /* width of the little icons */
	margin-left: 0px; /* clears the left side evenly all the way down */
	font: .8em/110% Arial, Helvetica, sans-serif;
}
/* each list item has a unique ID to place its own icon into the button */
/* the below styles the button area next to the icon */
#nav li a:link, #nav li a:visited {
	display: block; /* this makes the A element clickable all the way across (not just on the words) */
	background: #fff; /* the overall background color of the button area */
	color: #000; /* this is the text color */
	font-weight: bold; /* makes the links appear bolded */
	text-decoration: none; /* this gets rid of the underlines */
	margin: 3px 0 2px 0; /* this creates the space OUTSIDE each button */
	/*height: 1.2em;  15px; the icons are 23px tall. We want these buttons to match that. So add the height, plus the top and bottom padding, PLUS the top and bottom border. The final amount should total 23px */
	padding: 3px 2px 3px 3px; /* the padding creates the area WITHIN the button and keeps the text away from the borders */
	border-top: 1px solid #647457; /* since the light in the logo appears to be coming from the top left, we've used a light top color and a darker bottom and right color */
	border-left: 1px solid #647457;
	border-right: 1px solid #647457;
	border-bottom: 1px solid #647457;
}
/* hide holly hack from IE Mac \*/
* html #nav li a { 
	height: 1%;
	vertical-align: bottom;
} /* Holly Hack to get around a lovely IE issue with list items and a elements set to block */

#nav li a:hover, #nav li a:active, #nav li a:focus {
	background: #8DA080; /* the button background changes on hover and focus to the page background color */
	 /*color: #fff; for contrast, the text color changes to white */
	border-top: 1px solid #647457; /* Since the light is coming from the top left, when the button is depressed, the light would hit the right and bottom borders. They've been changed to the light color. The top border has been darkened as if shadowed */
	border-left: 1px solid #647457;
	border-right: 1px solid #647457;
	border-bottom: 1px solid #647457;
}

/* the following selectors create the photo/info teaser area below the navigation */
#features {
	background: #fff url(images/sidehead.jpg) no-repeat left bottom; /* this uses the same slice as the h2 headings but is set not to repeat */
	margin: 20px 0 5px 20px; /* this keeps the div away from the UL above (space as you like) and the same distance from the left side as well */
	padding-bottom: 10px; /* this creates a little space before the decorative border */
}

/* Don't show to IE Mac \*/
* html #features {height: 1%;}
/* Close the show only to IE PC Holly Hack (Place no comments inside the hack or it will close) */

#features h2 {
	margin-left: 0; /*this overrides the left margin if an h2 element is within the features div -- features is already over 20px from the left margin and we don't want space within that div. We want the h2 element to go all the way across */
}

#features p {
	font: .75em/135% Verdana, Arial, Helvetica, sans-serif; /* font size/line height and font-family */
	margin: 20px 2px 10px 8px; /* this created extra space between each paragraph element (with floated image) */
}

/* the following selectors create the contest teaser area below the navigation */
#contest {
	background: #fff url(images/sidehead.jpg) no-repeat left bottom; /* this uses the same slice as the h2 headings but is set not to repeat */
	margin: 20px 0 5px 20px; /* this keeps the div away from the UL above (space as you like) and the same distance from the left side as well */
	padding-bottom: 10px; /* this creates a little space before the decorative border */
}

/* Don't show to IE Mac \*/
* html #contest {height: 1%;}
/* Close the show only to IE PC Holly Hack (Place no comments inside the hack or it will close) */

#contest h2 {
	margin-left: 0; /*this overrides the left margin if an h2 element is within the features div -- features is already over 20px from the left margin and we don't want space within that div. We want the h2 element to go all the way across */
}

#contest p {
	font: .65em/125% Verdana, Arial, Helvetica, sans-serif; /* font size/line height and font-family */
	margin: 0px 0px 0px 7px; /* this created extra space between each paragraph element (with floated image) */
}


/* the next two selectors simply create the black bottom of the page */
#bottom {
	background: #000; /* this created the black color that runs all the way across the page background */
}
#pagebott {
	background: url(images/foot.jpg) repeat-y; /* this creates the dropshadow look */
	width: 740px; /* must equal the same width as your overall #holder div to match exactly -- remember to count padding and/or borders for each as well */
	margin: 0 auto; /* this centers it like the main holder above it */
}
#pagebott p {
	margin: 0;
	text-align: center; /* center aligns the text */
	font-size: 0.65em; /* choose a font size slightly smaller than your main page for best results */
	color: #BBA985; /* choose a color without as much contrast as your main page so that this doesn't jump out */
	padding: 5px; /* creates a small amount of space */
	letter-spacing: .06em; /* if this causes problems in any browsers, simply remove it */
}
/* creates the link and hover styling for the pagebott area */
#pagebott a:link, #pagebott a:visited {
	color: #BBA985;
	text-decoration: underline;
}
#pagebott a:hover, #pagebott a:active, #pagebott a:focus {
	color: #FFD080;
	text-decoration: none;
}


/* these float styles can be used to float images with text next to them */
.fltrt {
	float: right;
	margin-left: 8px;
}
.fltlft {
	float: left;
	margin-right: 8px;
}
.brclear { /* Use a break with this class to clear float containers on both sides */ 
clear:both; 
height:0; 
margin:0; 
font-size: 1px; 
line-height: 0; 
} 
.clearrt { /* Use a break with this class to clear float containers only on the right */ 
clear:right; 
height:0; 
margin:0; 
font-size: 1px; 
line-height: 0; 
}