#header {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 780px;
}

#header a, #header a:visited, #header a:link {
  text-decoration: none;
  color: rgb(48%, 48%, 48%);
}

#header a:hover {
  color: rgb(95%, 65%, 0%);
}

#logo {
  background-color: rgb(95%, 65%, 0%);
  border-bottom: 1px solid rgb(48%, 48%, 48%);
}

#nav {
  background-color: rgb(221, 221, 221);
}

ul.nav-main {
  font-size: 10px;
  color: rgb(48%, 48%, 48%);

  border-bottom: 1px solid rgb(48%, 48%, 48%);

  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 293px;
  margin-right: 0px;

  padding-top: 2px;
  padding-bottom: 0px;
  padding-left: 2px;
  padding-right: 0px;

}

ul.nav-main li {
  display: inline;
  list-style-type: none;
  padding-right: 30px;
  margin: 0px;
  text-transform: uppercase;
}

#header ul li.current a {
  color: rgb(95%, 65%, 0%);
}

ul.nav-sub {
  font-size: 10px;
  color: rgb(95%, 65%, 0%);
  background-color: rgb(221, 221, 221);

  display: none; /* Initial state, changed dynamically by JavaScript */

  padding-top: 1px;
  padding-bottom: 2px;
  padding-left: 145px;
  padding-right: 0px;

  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 160px;
  margin-right: 135px;
}


ul.nav-sub li {
  text-transform: uppercase;
  display: inline;
  list-style-type: none;
  margin: 0px;
  padding-right: 10px;
}


#pixelman {
  position: fixed;
  top: 65px;
  left: 0px;
}


#picture {
  position: fixed;
  top: 100px;
  left: 530px;
}


#footer {
  position: fixed;
 
  /* -1px because of possible rounding errors. */
  bottom: -1px;
  left: 0px;

  width: 780px;

  text-align: center;

  padding-top: 2px;
  padding-bottom: 2px;

  font-size: 8pt;

  background-color: rgb(95%, 65%, 0%);
  color: rgb(48%, 48%, 48%);
  border-top: 1px solid rgb(48%, 48%, 48%);
}

#footer a, #footer a:link, #footer a:visited {
  text-decoration: none;
  color: rgb(48%, 48%, 48%);
}

#footer a:hover {
  text-decoration: underline;
  color: rgb(24%, 24%, 24%);
}


body {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  /* For a total width of 780px = 360px + 160px + 260px. */
  width: 360px;

  font-size: 10pt;

  margin: 0px;

  padding-left: 160px;
  padding-right: 260px;

  background-image: url("images/bg.png");
  background-attachment: fixed;
  background-position: top left;
  background-repeat: repeat-y;
}


#content {
  padding-top: 100px;
  padding-bottom: 20px;
}


img {
  border: 0px;
}

h1 {
  font-size: 14pt;
  margin-bottom: 0px;
  margin-top: 0px;
}

h2 {
  font-size: 12pt;
}

p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}


blockquote {
  margin-left: 15px;
  margin-right: 15px;
}

blockquote cite {
  display: block;
  font-size: 8pt;
  text-align: right;
}

td {
  vertical-align: top;
  padding: 4px;
}

table.wide {
  font-size: 8pt;
  width: 480px;
  border: 1px solid black;
  border-spacing: 0px;
}

table.wide th {
  text-align: left;
  border: 1px solid black;
  padding: 4px;
}

table.wide td {
  border: 1px solid black;
  text-align: center;
  padding: 4px;
}

table.wide td.question {
  text-align: left;
}

dt {
  font-weight: bold;
}

/* This will lift upper edge of the element 100px upwards while still
 * drawing it in the same place.  The net effect is that the browser
 * thinks that the element starts 100px higher up in the page: anchors
 * are correctly being scrolled to. */
.anchor {
  padding-top: 100px;
  margin-top: -100px;
}

div.left-column, div.right-column {
  width: 49.5%;
}

div.left-column {
  float: left;
}

div.right-column {
    float: right;
}