/*-----MAIN BODY STYLES-----*/

body { /* This defines certain elements of the entire page, eg default fonts and colours etc. */
background:url('../Images/bg.jpg') #333 fixed; /* Dark grey - used for background before image loads*/
color:black; /* Black - used for default font color */
font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif; /* This defines the font used - I wouldn't recommend keeping Calisto MT as it is an awkward font to read */
font-size:10px; /* Default font size set to 10px as this makes it easier to dynamically change sizes using % or em values */
padding:0; /* Removes large default gap round the edge in IE browsers */
margin:0; /* Removes large default gap round the edge in IE browsers */
}

/*-----DIV ID STYLES-----*/

#wrapper { /* This section wraps the whole page to the correct width and contains all the others section within */
width:698px; /* Set to display correctly in 800x600 resolution but still neat enough for higher resolution screens */
margin:20px auto; /* Sets gaps at top of page and ensures center placement of info */
}
#header { /* This is the top header section with the main logo and logo-links to other sites */
height:100px;
background: url('../Images/logo.jpg') no-repeat;
border:1px solid #333;
}
#navbar { /* This section controls the navigational container */
height:30px;
background:url('../Images/navbar.jpg') black;
color:white;
border:1px solid #333;
border-bottom-color:#f1d7a0; /* This is a light brown color */
border-top:none;
}
  #navbar a.link, #navbar a.first { /* This defines the properties for links in the navigation section */
  display:block;
  float:left;
  padding:7px;
  margin:0;
  width:124px;
  height:15px;
  border-right:1px solid #f1d7a0;
  border-top:1px solid #f1d7a0;
  background:transparent;
  color:white;
  font-family:verdana, helvetica, sans-serif;
  font-size:12px;
  text-align:center;
  text-decoration:none;
  }
  body>#navbar a.link, #navbar a.first {
  height:16px;
  }
  #navbar a.link:hover, #navbar a.first:hover { /* Defines properties when mouse is placed over a link */
  background:#f1d7a0;
  color:black;
  }
  #navbar a.first { /* Needed to display the yellowish border to the left of the first link */
  border-left:1px solid #f1d7a0;
  }
  #navbar a.icon {
  float:right;
  padding:2px;
  width:25px;
  height:25px;
  border:none;
  }
  #navbar a img.icon {
  float:right;
  border:none;
  }
#maincontent { /* This is the section where the main page content is displayed */
position:absolute;
top:153px;
width:676px;
padding:10px;
font-size:1.4em;
background:#fffdee; /*very pale yellow background */
border:1px solid #333;
}
#footer {
margin:0 0 -5px 0;
padding:0;
}
#footer a img {
border:none;
text-decoration:none;
}
img.gallery {
float:left;
margin:0 5px 10px 0;
border:1px solid #333;
}
h3 {
display:block;
width:300px;
font-family:tahoma, helvetica, sans-serif;
color:#fffdee;
background:url('../Images/navbar.jpg');
padding:3px;
border:1px solid black;
}

/*-----FIXES & HACKS-----*/

p { /* Gets rid of the top margin of paragraphs */
margin-top:0;
}