/* Override the common header location. */
.header h1
  {
  /* Keep the header over the image. */
  width: 500px;
  margin-left: 100px;
  }

/* The navigation links. */
.menu
  {
  /* Stay where I put it. */
  position: absolute;
  top: 60px;
  width: 500px;
  height: 500px;

  /* Override any ul margins and put the item where I really want it. */
  margin-left: 100px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;

  /* Put the tree of life in the background. */
  background-image: url(images/tree_of_life.jpg);
  background-position: top left;
  background-repeat: no-repeat;
  }

/* Remove the bullets from the navigation list. */
.menu li
  {
  list-style-type: none;
  }

/* Properties common to all menu items. */
.menu #about_me,
.menu #courses,
.menu #cv,
.menu #research,
.menu #links,
.menu #journals
  {
  /* Stay where I put it. */
  position: absolute;

  /* Align all content in the middle. */
  text-align: center;

  /* Put it on top of the background image. */
  z-index: 10;
  }

.menu #about_me
  {
  /* Put it in a nice place. */
  left: 160px;
  top: 220px;

  /* Firefox screws up the width on hover. */
  width: 9em; 
  }

.menu #courses
  {
  /* Put it in a nice place. */
  left: 270px;
  top: 70px;

  /* Firefox screws up the width on hover. */
  width: 8em; 
  }

.menu #research
  {
  /* Put it in a nice place. */
  left: 90px;
  top: 135px;

  /* Firefox screws up the width on hover. */
  width: 8em; 
  }

.menu #links
  {
  /* Put it in a nice place. */
  left: 120px;
  top: 310px;

  /* Firefox screws up the width on hover. */
  width: 5em; 
  }

.menu #cv
  {
  /* Put it in a nice place. */
  left: 300px;
  top: 310px;

  /* Firefox screws up the width on hover. */
  width: 4em; 
  }

.menu #journals
  {
  /* Put it in a nice place. */
  left: 170px;
  top: 370px;

  /* Firefox screws up the width on hover. */
  width: 8em; 
  }

.menu a
  {
  /* Use a nice, big font. */
  line-height: 2.5em;
  font-size: 1.5em;
  font-weight: bold;

  /* Use a color that is complementary to the background. */
  color: #eebe8d;

  /* Put some room around the text for borders. */
  padding: 5px;

  /* Fudge the margin so that the outset and inset borders don't move
     the text around. */
  margin-left: 3px;
  margin-right: 0px; 

  /* Underlines are awful! */
  text-decoration: none;
  text-shadow: black 5px 5px 5px;
  }

/* The user is hovering over a navigation button. */
.menu a:hover
  {
  /* Don't underline. */
  text-decoration: none;

  /* Un-fudge the margin. */
  margin-left: 0px;
  margin-right: -3px; 

  /* Pop up the button. */
  border-style: outset;
  border-color: #eebe8d;
  }

/* The user is pressing a navigation button. */
.menu a:active
  {
  /* Un-fudge the margin. */
  margin-left: 0px;

  /* Push in the button. */
  border-style: inset;
  border-color: #eebe8d;
  }

/* Don't change the style after a click-through. */
.menu a:visited
  {
  }

/* The page content. */
.content
  {
  /* Stay where I put it. */
  position: absolute;

  /* Just for this main style, put the content at the bottom as most 
     of the main page is take up by the navigation. */
  bottom: 0;
  height: 4em;
  width: 500px;

  /* Put the tree of life text directly under the tree of life. */
  margin-left: 100px;

  /* Use my cream background. */
  background: #ffce9d;
 
  /* Don't obscure the image. */
  z-index: -10;
  }

img#tree_of_life
  {
  /* Put the tree of life text directly under the tree of life. */
  margin-left: 110px;

  /* Use an exact size. */
  height: 58px;
  width: 288px;
  }