/********************************************
HTML ELEMENTS
********************************************/
/* top elements */
* { margin: 0; padding: 0; outline: 0; } /*sets no padding or margin around the body of our document*/
 
/* background-image: url(images/); /*sets the background image */

body 
{
	background-color: #8c8c8c; /*website background color*/
	background-repeat: repeat; /*repeats our background over and over*/
	color: #333333; /*sets our text color for our website*/
	margin: 15px 0; /*sets no padding and a 15px margin around the body of our document*/
	font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif;
	font-size: 12px; /*sets the font size in %, you can also use 12px or 14px etc... px stands for pixels*/
	line-height: 1.5em; /*sets the height between each line of text.*/
}

li 
{
	padding-bottom: 1em;
	padding-left: 0px;
	}

h2 
{
	margin: 0px 0px 10px 0px;
	font: bold 140%;
	color: #31a4c1;
}

h3
{
	margin: 0px 0px 10px 0px;
	font: bold 120%;
	color: #31a4c1;
}

p
{
	margin-bottom: 1em;
}

img {
  border: 0px;
}

form {

 border: 0px;
}

fieldset {

 border: 0px;
}

/********************************************
WEBSITE NAVIAGTION
********************************************/
#menu 
{

	width: 847px; /*width of our wrap*/
	margin: 0 auto; /*center our margin to auto will center our website*/
	text-align: left; /*aligns our text to the left*/
	background: #CCC url(images/menu_middle.png) repeat-x center top; 
	padding: 0; /*Padding*/
	height: 55px; /*The height of the menu */
	font-size: 12px; /*The font size*/
	background: none ; 
}
#menu ul 
{
	list-style: none;
	margin:0; 
	padding: 0 0 0 0px;
}
#menu ul li 
{
	display: inline; /*The element will be displayed as an inline element, with no line break before or after the element*/
}
#menu ul li a 
{
	display: block;
	float: right;
	padding: 16px 12px;
	color: #000; /*Font color*/
	text-decoration: none;
}
#menu ul li a:hover 
{
	color: #31a4c1; /*Mouseover hover color*/
}

#menuright
{
	float: right;
	height: 55px;
	width: 21px;
	background: url(images/menu_left.png) no-repeat center top; 
	position: relative; /*An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position*/
}

#menucenter
{
	float: right;
	height: 55px;
	width: 190px;
	background: url(images/menu_middle.png); /*Our menu background*/
	position: relative; /*An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position*/
	
}

#menuleft
{
	float: right;
	height: 55px;
	width: 24px;
	background:url(images/menu_right.png) no-repeat center top; 
	position: relative; /*An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position*/
}




/********************************************
HOMEPAGE WEBSITE LAYOUT 
********************************************/
#wrap 
{
	width: 847px; /*width of our wrap*/
	margin: 0 auto; /*center our margin to auto will center our website*/
	text-align: left; /*aligns our text to the left*/
	background: #CCC url(images/content_bg.png) repeat-y center top; 
}

#wrap2
{
	width: 847px; /*width of our wrap*/
	margin: 0px auto; /*sets our top margin at 5 pixels and the rest to auto*/
	text-align: left; /*aligns our text to the left*/
	background: #CCC url(images/sub_bg21.png) repeat-y center top; 
}

#content-wrap 
{
	clear: both; /*The clear property sets the sides of an element where other floating elements are not allowed.*/
	width: 798px; /*width of our wrap*/
	margin: 5px 0px 15px 25px; /*sets our top margin at 5 pixels and the rest to auto*/
	padding: 0; /*sets 0 padding*/

}

#header 
{
	position: relative; /*An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position*/
	width: 847px;
	height: 340px; /*sets our header height, this should be the same as our header image*/
	background: #caced1 url(images/header_home.png) no-repeat center top; /*sets a background behind our header and sets our header image onto the page*/
	padding: 0; /*no padding is needed*/
}

#header-sub 
{
	clear: both;
	position: relative; /*An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position*/
	width: 847px;
	height: 112px; /*sets our header height, this should be the same as our header image*/
	background: #caced1 url(images/header_sub.png) no-repeat center top; /*sets a background behind our header and sets our header image onto the page*/
	padding: 0; /*no padding is needed*/
}
#header-sub2
{
	clear: both;
	position: relative; /*An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position*/
	width: 847px;
	height: 92px; /*sets our header height, this should be the same as our header image*/
	background: #caced1 url(images/sub_bghead2.png) no-repeat center top; /*sets a background behind our header and sets our header image onto the page*/
	padding: 0; /*no padding is needed*/
}


#contactinfo
{
	margin: 0;
	width: 787px;
	height: 188px; /*sets our header height, this should be the same as our header image*/
	clear: both;
	background: #caced1 url(images/contact_block.png) no-repeat center top; /*sets a background behind our header and sets our header image onto the page*/
	padding: 0; /*no padding is needed*/
	padding-left: 60px;
	padding-top: 100px;
}

/********************************************
FOOTER
********************************************/
#footer {
color: #333333;
background: #caced1 url(images/footer_img.png) no-repeat center top;
clear: both;
width: 847px;
height: 49px;
text-align: center;
font-size: 90%;
}

#footer-sub {
clear: both;
color: #333333;
background: #caced1 url(images/footer_sub.png) no-repeat center top;
width: 847px;
height: 47px;
text-align: center;
font-size: 90%;
}

#footer-sub2
{
	clear: both;
	height: 166px; /*sets our header height, this should be the same as our header image*/
	background: #caced1 url(images/sub_paypalblock.png) no-repeat center top; /*sets a background behind our header and sets our header image onto the page*/
	padding: 0; /*no padding is needed*/
}

#footer p {
padding: 10px 0;
margin: 0;
}

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

 
/********************************************
LEFT SIDE HOME PAGE
********************************************/
#leftside {
float: left;
width: 340px;
padding: 0px;
color: #333333;
margin-left: 40px;
text-align: left;
}

/********************************************
RIGHT SIDE HOME PAGE
********************************************/
#rightside {
float: right; 
width: 340px;
padding: 0;
color: #333333;
text-align: left;
margin-right: 40px;
}

/********************************************
LEFT SIDE SUB PAGE
********************************************/
#leftsidesub {
float: left;
width: 340px;
padding: 0px;
color: #333333;
text-align: left;
margin-left: 30px;
}

/********************************************
RIGHT SIDE SUB PAGE
********************************************/
#rightsidesub {
float: right; /*floats our main content area to the right*/
width: 360px;
padding: 0;
color: #333333;
margin-top: 0px;
margin-right: 25px;
text-align: left;
}


/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }
 
/* display and additional classes */
.clear { clear: both; }