/********************************************  
HTML ELEMENTS  
********************************************/  
/* top elements */  
* { margin: 0; padding: 0; outline: 0; } /*sets no padding or margin around the body of our document*/  
  
body {   
background-color: #fff; /*website background color (white)*/  
background-image: url(images/bg.gif); /*sets the background image, in our case the stripey background*/  
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: Verdana, Tahoma, arial, sans-serif; /*sets the font family for our website*/  
font-size: 70%; /*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.*/  
}  

  
/********************************************  
WEBSITE LAYOUT  
********************************************/  
#wrap {   
width: 790px; /*width of our wrap*/  
background: #CCC url(images/content.jpg) repeat-y center top; /*sets our background color to white and uses our content.jpg as a background, the background is also repeated along the Y axis*/  
margin: 0 auto; /*center our margin to auto will center our website*/  
text-align: left; /*aligns our text to the left*/  
}   
#content-wrap {   
clear: both; /*The clear property sets the sides of an element where other floating elements are not allowed.*/  
width: 760px; /*width of our wrap*/  
margin: 5px auto; /*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*/  
height: 180px; /*sets our header height, this should be the same as our header image*/  
background: #caced1 url(images/header.jpg) no-repeat center top; /*sets a background behind our header and sets our header image onto the page*/  
padding: 0; /*no padding is needed*/  
}  

  
/********************************************  
WEBSITE NAVIAGTION  
********************************************/  
#menu {   
clear: both; /*No floating elements allowed on either the left or the right side*/  
margin: 0 auto; /*Margins*/  
padding: 0; /*Padding*/  
background: #81C524 url(images/menu.jpg) no-repeat; /*Our menu background*/  
height: 40px; /*The height of the menu */  
width: 780px; /*The width of the menu */  
font-family: Verdana, Arial, Helvetica, sans-serif; /*The font family*/  
font-size: 14px; /*The font size*/  
line-height: 40px; /*The line-height property sets the distance between lines.*/  
}   
#menu ul {   
float: left; /*Floats our menu to the left*/  
list-style: none;   
margin:0; padding: 0 0 0 20px;   
}   
#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: left;
	padding: 0 12px;
	color: #479696; /*Font color*/
	text-decoration: none;
}   
#menu ul li a:hover {
	color: #11d6ec; /*Mouseover hover color*/
}  

  
/********************************************  
MAIN COLUMN  
********************************************/  
#main {   
float: right; /*floats our main content area to the right*/  
width: 555px; /*gives our content area a width of 555pixels*/  
margin: 0; padding: 20px 0 0 0;   
display: inline;   
}   
  
#main h2 {   
padding: 0;   
margin-bottom: 0;   
color: #333333;   
font-family: Verdana, Arial, Helvetica, sans-serif;   
font-size: 130%;   
font-style: normal;   
font-weight: bold;   
}   
#main h2 a {   
color: #2666c3;   
text-decoration: none;   
}   
  
#main p, #main h1, #main h2, #main h3, #main ol, #main ul,   
#main blockquote, #main table, #main form {   
margin-left: 25px;   
margin-right: 20px;   
}   
 
/********************************************  
SIDEBAR  
********************************************/  
#sidebar {   
float: left;   
width: 195px;   
padding: 0;   
color: #333333;   
margin-top: 5px;   
margin-right: 0;   
margin-bottom: 0;   
margin-left: 0;   
}   
#sidebar h2 {   
margin: 15px 5px 10px 5px;   
font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;   
color: #333333;   
}   
#sidebar p {   
margin-left: 5px;   
}   
  
#sidebar ul.sidemenu {   
list-style: none;   
text-align: left;   
margin: 7px 10px 8px 0; padding: 0;   
text-decoration: none;   
border-top: 1px solid #A9D4EF;   
}   
#sidebar ul.sidemenu li {   
list-style: none;   
padding: 4px 0 4px 5px;   
margin: 0 2px;   
color: #333333;   
border-bottom: 1px solid #D2E8F7;   
}   
* html body #sidebar ul.sidemenu li {   
height: 1%;   
}   
#sidebar ul.sidemenu li a {   
text-decoration: none;   
color: #F60; 
}   
#sidebar ul.sidemenu li a:hover {   
color: #333;   
}   
#sidebar ul.sidemenu ul { margin: 0 0 0 5px; padding: 0; }   
#sidebar ul.sidemenu ul li { border: none; }   
  
/********************************************  
FOOTER  
********************************************/  
#footer {   
color: #333333;   
background: #caced1 url(images/footer.jpg) no-repeat center top;   
clear: both;   
width: 790px;   
height: 76px;   
text-align: center;   
font-size: 90%;   
}   
#footer p {   
padding: 10px 0;   
margin: 0;   
}   
#footer a {   
color: #FF0000;   
text-decoration: none;   
}   
  
/* 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; 
}  
  
/********************************************  
WEBSITE LINKS  
********************************************/  
a, a:visited {   
text-decoration: none;   
background: inherit;   
color: #479696;   
}   
a:hover {   
text-decoration: underline;   
background: inherit;   
color: #93C600;   
}   
  
/********************************************  
WEBSITE TEXT HEADERS  
********************************************/  
h1, h2, h3 { font-family: 'Trebuchet MS', Tahoma, Sans-serif; }   
h1 {
	font-size: 180%;
	font-weight: normal;
	color: #000000;
}   
h2 {   
font-size: 160%;   
color: #88ac0b;   
font-weight: normal;   
}   
h3 {   
font-size: 135%;   
color: #666666;   
}   
  
/********************************************  
WEBSITE IMAGES  
********************************************/  
img {   
background: #fff;   
border: 1px solid #E5E5E5;   
padding: 5px;   
}   
  
img.float-right { margin: 5px 0px 10px 10px; }   
img.float-left { margin: 5px 10px 10px 0px; }   
  
h1, h2, h3, p {   
margin: 10px 15px;   
padding: 0;   
}   
ul, ol {   
margin: 5px 10px;   
padding: 0 25px; 
color:#F60;
}  

ul, ol{
	margin: 5px 10px;
	padding: 0 25px;
	color:#479696;
}