html, body {
  border: none;  /* needed for IE */
  background: #000080;
}
body {
  font-family: Arial, sans-serif;  /* Arial for IE's benefit */
  background: #000080;
  color: white;
}
h1,h2,h3 {
  background: url("/bluescanlines.png") blue;
  color: #87CEFA;
  border: thick outset #000080;
  font-family: Verdana, sans-serif;
}
h1 {
  text-align: right;
  padding: 0.2em;
}
h2 {
  padding: 0.1em;
  width: 50%;
}
a {
  color: yellow;
}
a:hover,a:active {
  color: red;
}

div.footnote {
  font-style: italic;
  font-size: smaller;
}
div.quote {
  font-size: smaller;
  font-family: Book Antiqua, serif;
  color: #0000FF;
}
div.quote p {
  text-align: center;
}
div.floatbox {
  clear: left;
}
div.floatbox iframe {
  border: none;
  width: 100%;
  height: 100%;
}

p.news {
  border: thin outset #000080;
  padding: 1em;
  width: 50%;
  background: #0000A0;
  clear: none;  /* IE fucks up intro.html without this */
}

/* currently unused */
/* table.imagetable {
  width: 100%;
  font-style: italic;
  font-size: smaller;
  text-align: center;
}
table.imagetable img {
  border: outset #000080;
}
table.imagetable a img {
  border: outset yellow;
}
table.imagetable a:hover img, table.imagetable a:active img {
  border: outset red;
} */

/* is there a better way of doing this? */
div.picleft, div.picright, div.piccenter {
  font-style: italic;
  font-size: smaller;
  text-align: center;
}
div.picleft {
  float: left;
  clear: left;
  padding-right: 1em;
}
div.picright {
  float: right;
  clear: right;
  padding-left: 1em;
}
div.piccenter {
  clear: both;
}
div.picleft img, div.picright img, div.piccenter img {
  border: outset #000080;
}
div.picleft a img, div.picright a img, div.piccenter a img {
  border: outset yellow;
}
div.picleft a:hover img, div.picleft a:active img, div.picright a:hover img, div.picright a:active img, div.piccenter a:hover img, div.piccenter a:active img {
  border: outset red;
}