body {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  /* Step down from the default font size (typically 16px) to 13px */
  font-size: 81.25%;
  
  line-height: 1em;
  
  /* Set the colour of the 'page margins'. */
  background-color: #BDE484;  /* lighter version of the logo colour */
  margin: 0;
}

html>body {
  /* For non-IE browsers, hard-code a (resizable) pixel size instead of a %. */
  font-size: 13px;
}

/* #content centers the main page content in a fixed-width box. */

body {
  /* correct for an IE bug that stops the margin centering #content */
  text-align: center;
}
#content {
  width: 800px;
  margin: 0 auto;

  padding: 1em;  /* The white 'gutter' around the content. */
  background-color: white;
  color: black;

  /* override above IE bug fix. */
  text-align: left;
}

/* H1 is the logo title. */

h1 {
  margin: 0;
  padding: 0;
  position: relative;
  width: 798px;
  height: 62px;
  overflow: hidden;
  border: 1px solid #444;
}

h1 a {
  color: black;
  background-color: transparent;
  text-decoration: none;
}

/* The SPAN is within the A, and is absolutely positioned over the text,
   with a background image, replacing it. */
h1 span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 800px;
  height: 64px;
  background: url('../images/logo.png') no-repeat top left;

  cursor: hand;  /* needed for IE7, which gives no feedback about the link. */
}

/* #nav is the primary navigation. */

#nav {
  /* Font at 14px to match with the home graphic.
     Not resizable in IE, but it doesn't resize very well anyway. */
  font-size: 14px;
  line-height: 1em;

  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #666;
  width: 100%;
  float: left;

  margin-bottom: 1em;
}

#nav li {
  display: inline;
}

#nav a {
  padding: 0.2em 1em 0.3em;
  text-decoration: none;
  color: white;
  background-color: #666;
  border-right: 1px solid white;
  float: left;
}

#nav a:hover {
  background-color: #444;
}

#nav a.current {
  color: #8bcf28;  /* the logo colour. */
  background-color: #444;
}

#navhome a {
  display: block;
  height: 22px;
  width: 20px;
  padding: 0 1em;

  background-image: url('../images/home.png');
  background-repeat: no-repeat;
  background-position: 14px top;
}

#navhome a:hover {
  background-position: 14px -24px;
}

#navhome a.current {
  background-position: 14px -48px;
}

/* H2 is for main titles. */

h2 {
  font-size: 1.286em /* 18px */;
  font-weight: bold;
  margin: 1em 0 0.6em;
  line-height: 1.5em;
  color: #578119;  /* darker version of the logo colour. */
  background-color: transparent;
}

h3 {
  font-size: 1em /* 14px */;
  font-weight: bold;
  margin: 0.3em 0 0.7em;
  line-height: 1.5em;
  color: #578119;  /* darker version of the logo colour. */
  background-color: transparent;
}

p.intro {
  font-weight: bold;
  color: #666;  /* matches navbar */
  background-color: transparent;
}


/* Misc */

p {
  margin: 0 0 1.125em;
  line-height: 1.5em;
}

img {
  border: none;
}

:link, :visited {
  text-decoration: none;
  font-weight: bold;
  color: black;
  background-color: transparent;
}

:link:hover, :visited:hover {
  color: #8bcf28;  /* the logo colour. */
  background-color: transparent;
}

/* A general style to highlight a bit of text using the logo colour. */
span.highlight {
  font-weight: bold;
  color: #8bcf28;  /* the logo colour. */
  background-color: transparent;
}