ÿþ

/********************************************

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: 895px; /*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: justify; /*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: 127px; /*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: 895px; /*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: right; /*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: #fff; /*Font color*/

text-decoration: none;

}

#menu ul li a:hover {

color: #d7d7d7; /*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: 180%;

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: 0px solid #A9D4EF;

}

#sidebar ul.sidemenu li {

list-style: none;

padding: 4px 0 4px 5px;

margin: 0 2px;

font-size: 13px; /*The font size*/

font-weight: bold;

color: #000000;

border-bottom: 0px solid #D2E8F7;

}

* html body #sidebar ul.sidemenu li {

height: 1%;

}

#sidebar ul.sidemenu li a {

text-decoration: none;

color: #2b2b2b;

}

#sidebar ul.sidemenu li a:hover {

color: #787878; /*Mouseover hover color*/

}

#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: 895px;

height: 57px;

text-align: center;

font-size: 90%;

}

#footer p {

padding: 10px 0;

margin: 0;

}

#footer a {

color: #2d2d2d;

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: #FB9233;

}

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: #555;

}

h2 {

font-size: 160%;

color: #88ac0b;

font-weight: normal;

}

h3 {

font-size: 135%;

color: #666666;

}



/********************************************

WEBSITE IMAGES

********************************************/

img {

background: #fff;

border: 0px 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 15px;

padding: 0 25px;

}