html, body {
  margin: 0.25em;
  border: 0;
  padding: 0;
}

body {
  border: 0.5em solid;
  border-color: white gray gray white;
  color: black;
  background-color: #DDD;
  font-family: "Georgia", "Times", serif;
}

:link, :link:hover { color: blue; text-decoration: underline; }
:visited, :visited:hover { color: purple; text-decoration: underline; }
:link:active { color: red; text-decoration: underline; }


h1, h2, h3, #footer {
  text-align: center;
}
h1, h2, h3 {
  margin: 0;
  border: 0.2em solid;
  border-color: white gray gray white;
}

/* it would be nice if there was a class for these */
#pageHeader, #quickSummary, #preamble, #explanation, #participation, #benefits, #requirements, #footer, #lselect, #lfavorites, #larchives, #lresources {
  margin: 0.5em;
  border: 0.5em solid;
  border-color: gray white white gray;
  padding: 0;
}

p {
  margin: 1em;
}

ul {
  margin: 0;
  border: 0.25em solid;
  border-color: white gray gray white;
  padding: 0 0 0 1.5em;
}
li {
  margin: 0;
  border: 0.25em solid;
  border-color: #DDD;
  padding: 0;
}
li:hover {
  border-color: gray white white gray;
}
#linkList ul { border-top-width: 1px; padding-top: 1px; }
#linkList h2, #linkList h3 { border-bottom-width: 1px; }

#linkList {
  position: absolute;
  left: .75em;
  top: .75em;
  width: 30%;
}
#intro, #supportingText {
  margin-left: 30%;
}

img { display: none; } /* that web bug causes an ugly gap */