/* First some settings for the whole page */

body {
  background-color: #000000;
  color: #ffffff;
  font-family: Verdana, sans-serif;
}

a {  /* Links are red... */
  color: #ff0000;
}

a:visited {  /* Even after they have been visited. */
  color: #ff0000;
}

/* And here is style information for the different parts. */

#maintable {  /* The main layout table. Just turn off all border, margins and space. */
  padding: 0;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
  border-style: none;
}

#maintable tr td {
  padding: 0;
  margin: 0;
}

/* These two are for the images at the top. */

#logo {
  width: 215px;
  height: 222px;
  border: 0;
}

#about {
  border: 0;
  width: 924px;
  height: 222px;
}

/* Now the menu is defined. This is the most complicated style on the page. */

#menu {
  vertical-align: top;  /* The menu is at the top of the table cell. */
}

#menu ul {  /* The whole menu is 215 pixels wide and centered. */
  margin-left: auto;
  margin-right: auto;
  width: 215px;
  padding: 0;
  margin: 0;
}

#menu ul li {  /* Construct the buttons. */
  /* First set the background to the empty button image. */
  background-image: url(button.png);
  background-repeat: no-repeat;
  /* Set the size to match the image. */
  height: 40px;
  width: 215px;
  /* Set the text to match the image size. */
  font-size: 16px;
  line-height: 40px;
  text-align: center;
  font-weight: bold;
  /* And remove the usual list decorations. */
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* Since the links are red, and the text is white, just not making
 * a link to the current page will make the menu look right.
 */

#menu a {  /* Links in the menu are not underlined... */
  text-decoration: none;
}

#menu a:hover {  /* Except when the mouse is over them. */
  text-decoration: underline;
}

/* And here are the styles for the content cell */

#content {
  width: 580px;
  text-align: center;  /* Explorer needs this and still does not get it right. */
  vertical-align: top;
}

#column {
  width: 500px;
  margin-left: auto;  /* The auto-margins make the column centered. */
  margin-right: auto;
}

/* Items are the sections of text in the content cell. */

.item {
  font-size: 8pt;
  padding-bottom: 2em;
  text-align: left;
}

.itemtitle {
  font-weight: bold;
  display: block;  /* Hack to ensure a line-break. */
}

.item img {
  float: left;  /* "float: left" makes the images appear to the left of the text. */
  border: 0;
}

.title {
	color: red;
	font-size: 10pt;
	text-align: left;
	font-weight: bold;
	margin-bottom: 0.5em;
}

.text {
	font-size: 8pt;
	text-align: left;
}

/* The endnote style places the endnote a little bit lower and with centered text. */

.endnote {
  padding-top: 6em;
  font-size: 8pt;
  text-align: center;
}