body
{
  margin: 0;
}
address
{
  font-size: 80%;
}
ul
{
  line-height: 1.5em;
}
/* Since the border property is applied to the a element and not the img
 * element, use the .im class to override this behaviour for image links
 * instead.
 */
img, .im, .im:hover
{
  border: 0;
}
a
{
  color: #000099;
  text-decoration: none;
  border-bottom: 1px dotted #666666;
}
a:hover
{
  border-bottom: 1px solid #000000;
}
table
{
  border-collapse: collapse;
  background-color: #D2D7EE;
}
th
{
  border: 1px solid #000000;
  background-color: #BAC0EE;
  padding: 0.5em;
  font-weight: bold;
}
td
{
  border: 1px solid #000000;
  padding: 0.2em;
}
#header
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 114px;
  background-color: #108CB0;
  background-image: url('images/maths.gif');
  background-position: top left;
  background-repeat: no-repeat;
}
#navigation
{
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 114px;
  width: 120px;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid #000000;
  background-color: #990033;
  padding-left: 10px;
  line-height: 0;
}
#wrapper
{
  margin-top: 114px;
  margin-left: 130px;
  border-top: 1px solid #000000;
  padding: 1em;
}
.mini-nav
{
  text-align: right;
  font-size: small;
  float: right;
  width: 30%;
  padding-bottom: 1em;
}
.feature
{
  font-size: 110%;
  font-style: italic;
}
.equation
{
  font-style: italic;
}
/* What's this all about? It's for anchor tags, and is used to make the
 * browser scroll to the correct location. Without this, it will scroll
 * too far down.
 */
.anchor
{
  position: relative;
  top: -114px;
}
.vector
{
  text-decoration: underline;
}