*

body
{
margin: 10px 0 0 0;/*zeroes the margins on the body*/
padding: 0;/*zeroes the padding on the body ** Opera carries a default padding and requires this zeroing*/
border: 0;/*zeroes off any existing border*/
background-color: #007600;/*sets the body background colour*/
font-size: 100.01%;
font-family: verdana,arial,helvetica,sans-serif;
color: #666; /*set the default text color */
text-align: center; /* Hack to centre the wrapper in IE5.x pc */
background-image: url(images/grass2.gif);
background-repeat: repeat;
line-height: 18px;
min-width: 770px;
}

#wrapper {
margin: 5px auto;/* centers the wrapper first value - 5px is applied to the top and bottom margins, auto sets the excess space on the view port evenly to the left and right*/
width: 770px; /* sets the width of the wrapper */
position: relative; /* important to position it relatively */
background-color: #FFF;/* sets the wrappers background color*/
/*border: 1px solid #000; sets a border to all 4 sides */
text-align: left;/* Realigns the text to the left after the IE hack in the body rule */
/* min-height: 750px; */
}

#banner {
width: 770px;/*Set the banners width - not strictly necessary just belt and braces from my point of view*/
height: 144px;/*set a height*/
border-bottom: 4px solid #CDE2EB;/*Add a thick border to the bottom of the div*/
background-image:   url(../images/banner2.gif);/*set the background image for the banner*/
background-repeat: no-repeat;/*prevent the background image from repeating*/
background-position:right;
}

a:link {color: Black}     /* unvisited link */
a:visited {color: black}  /* visited link */
a:hover {color: black; background-color:PowderBlue}   /* mouse over link */
a:active {color: Black}   /* selected link */

#content {
margin: 10px 10px 10px 195px;/*margins set for IE mac which ignored the right hand floated column*/
width: 553px;/*sets the width of the div*/
}

h1
{
position:  relative;
padding: 10px 0 5px 0;/*sets the padding on the h1 element*/
font-size: 125%;/*scales the text size against the body selector default*/
margin: 5px 5px 0px 10px;/*sets the margins on the h1*/
color: Black;/*sets the text colour for the h1 text*/
font-weight: bold;/*sets the font weight a little less than bold, if not supported in a given browser defaults to a normal weight. If you want bold for your h1 delete this property and value pair - or simply comment them out*/
background-color:PowderBlue;
text-align:center;
}

h2
{
position:  relative;
padding: 10px 0 5px 0;/*sets the padding on the h2 element*/
font-size: 115%;/*scales the text size against the body selector default*/
margin: 5px 5px 0px 10px;/*sets the margins on the h2*/
color: #006699;/*sets the text colour for the h2 text*/
font-weight: bold;/*sets the font weight a little less than bold, if not supported in a given browser defaults to a normal weight. If you want bold for your h1 delete this property and value pair - or simply comment them out*/
}

h3
{
position:  relative;
padding: 10px 0 5px 0;/*sets the padding on the h3 element*/
font-size: 100%;/*scales the text size against the body selector default*/
margin: 5px 5px 0px 10px;/*sets the margins on the h3*/
color: black;/*sets the text colour for the h3 text*/
font-weight: bold;/*sets the font weight a little less than bold, if not supported in a given browser defaults to a normal weight. If you want bold for your h1 delete this property and value pair - or simply comment them out*/
}

p
{
position:  relative;
padding-left: 15px;
font-size: 85%;/*scales the font to 80% of the default set int he body selector*/
margin: 10px 0 0 10px;/*sets the required margins on the p element*/
color: #333;/*sets the colour for the text*/
line-height: 140%;/*set a line height for easier reading*/
}

li
{
position:  relative;
padding-left: 18px;
font-size: 85%;/*scales the font to 80% of the default set int he body selector*/
margin: 10px 0 0 10px;/*sets the required margins on the p element*/
color: #333;/*sets the colour for the text*/
line-height: 140%;/*set a line height for easier reading*/
}
#menu
{
position: relative;
height: 45px;
padding: 0px 20px 0px 5px;
margin: 10px 0px 20px 0px;
}

#menu ul
{
}

#menu ul li
{
display: inline;
line-height: 52px;
padding-left: 3px;
font-size: medium;
}

#menu ul li.first
{
border-left: 0px;
}

.figure {
float: left;
width: 133px;
margin: 0 10px 10px 10px;
}

.photo {
background: url(drop_shadow.gif) no-repeat right bottom;
}

.photo img {
border: 1px solid #666;
background-color: #FFF;
padding: 4px;
position: relative;
top: -5px;
left:-5px;
}

.figure p {
font: 1.1em/normal Arial, Helvetica, sans-serif;
width: 133px;
text-align: center;
margin: 10px 0 0 0;
height: 5em;
}

/*begin laying out the footer div*/
#footer {
width: 770px;/*provide a width - not strictly necessary just belt and braces from my point of view*/
clear: left;
background-color: #4F4F4F;/*set a background colour*/
font-size: 70%;/*scale the font size off the body element*/
text-align: left;/*align the footer text to the left*/
margin-top: 20px;/*set a margin on the top of the footer*/
}

#footer ul {
padding: 2px 0 4px 0;/*sets the padding on the ul gives a little space around the li elements*/
margin: 0;/*zero off the margins*/
}

#footer p {
padding: 3px;/*sets the padding around the company text in the footer*/
margin: 0;/*zeroes off the margins*/
color: #333;/*changes the default colour*/
background-color: #9F9F9F;/*sets the background colour for p elements in the footer div*/
border-top: 1px solid #000000;/*sets a defining edge on the top of the footer*/
border-bottom: 1px solid #000000;/*sets a border between the company info text and the links below it */
}

#footer ul li {
padding: 4px;/*2px 4px 2px 2px; sets the padding values*/
margin: 0;/*zeroes off the margins */
display: inline;/*sets the list to display inline*/
}


#footer a {/* Styles the links within the footer */
color: #333;
text-decoration: underline; /*keeps the underline*/
}

#footer a:hover, #footer a:focus {
text-decoration: none;/*removes the underline*/
clear: left;
}