body {
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 12px;
  background-color: #074f8e;
  background-image: url(images/bg.gif);
  background-repeat: repeat-x;
  background-position: top;
}
#frame {
  width: 900px;
  margin: 0 auto;
}
.header {
  color: #eeee99;
  font-weight: bold;
  font-style: italic;
}
.header a:link, .header a:visited {
  color: #eeee99;
}
#topics {
  position: relative;
  top:0px;
  left:0px;
  height: 640px;
  margin-top: 24px;
  overflow: hidden;
}

#topic1, #topic2, #topic3, #subtopic, #supertopic {
  position: absolute;
  border: 4px solid #ffffcc;
  border-radius: 12px;
  background-color: #000000;
  cursor: pointer;
}
#topic1 {
  left: 0px;
  top: 0px;
  width: 240px;
  height: 180px;
  background-image: url(images/portrait.jpg);
}
.topicframe, .topicimg {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 900px;
  height: 640px;
  background-color: #000000;
  z-index: 5;
}
.topicframe img {
  position: absolute;
  top: 0px;
  left: 0px;
}
#topic2 {
  left: 300px;
  top: 80px;
  width: 240px;
  height: 180px;
  background-image: url(images/reefscapes.jpg);
}
#topic3 {
  left: 600px;
  top: 160px;
  width: 240px;
  height: 180px;
  background-image: url(images/creatures.jpg);
}
#subtopic {
  left:0px;
  top: 250px;
  width: 240px;
  height: 90px;
  background-image: url(images/birds.jpg);
}
#supertopic {
  left:600px;
  top: 0px;
  width: 240px;
  height: 90px;
  background-image: url(images/about.jpg);
}
.topiccaption {
  padding: 4px 8px;
  font-weight: bold;
}
.footer {
  font-size: 9px;
  color: #999999;
}
#about {
  margin: 36px;
  font-size: 12px;
  color: #eeee99;
}
#about a:link, #about a:visited {
  color: #eeee99;
}
.close {
  position: absolute;
  top: 4px;
  right: 4px;
  background-color: #cccccc;
  border: 1px solid #333333;
  color: #000000;
  padding: 1px;
  z-index: 10;
  cursor: pointer;
}
.caption {
  position: relative;
  top: 600px;
  color: #ffffff;
  text-align: center;
}