/********************************************
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: #66686a; /*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: 956px; /*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(menubg.png) repeat-x center top; 
	padding: 0; /*Padding*/
	height: 34px; /*The height of the menu */
	font-size: 14px; /*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: #A4BCD1; /*Font color*/
	text-decoration: none;
}
#menu ul li a:hover 
{
	color: #31a4c1; /*Mouseover hover color*/
}

#menuright
{
	float: right;
	height: 55px;
	width: 21px;
	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;
	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;
	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: 956px; /*width of our wrap*/
	height: 820px; /*sets our header height, this should be the same as our header image*/
	margin: 0 auto; /*center our margin to auto will center our website*/
	text-align: left; /*aligns our text to the left*/
background: #CCC url(boxbg.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*/

	background: #CCC url(boxbg.png) repeat-y center top; 

}

#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: 956px;
	height: 124px; /*sets our header height, this should be the same as our header image*/
	background: #caced1 url(head.png) no-repeat center top; /*sets a background behind our header and sets our header image onto the page*/
	text-align: right;
	
}

#boxtop
{
	position: left:20; /*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: 956px;
	height: 33px; /*sets our header height, this should be the same as our header image*/
	background: #caced1 url(boxtop.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-account
{
padding: 10px;

}



/********************************************
FOOTER
********************************************/
#footer {
color: #66686a;
background: #caced1 url(boxbottom.png) no-repeat center top;
clear: both;
width: 956px;
height: 57px;
margin: 0 auto; /*center our margin to auto will center our website*/
text-align: center;
font-size: 90%;
}

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

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

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

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

/* 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; }