html, body { background: #ccccff; margin: 0; padding: 0; }

h1 { text-align: center; font-size: xx-large; font-family: sans-serif; font-variant: small-caps; font-weight: bold; }
h2 { text-align: left; font-size: x-large; font-family: serif; font-style: italic; font-weight: bold; }
h3 { text-align: left; font-size: large; font-family: serif; font-style: italic; font-weight: bold; }

.center { text-align: center; }
.intro  { text-align: center; padding: 10% 25%; }

.current { display: none; }

ul.nav { list-style: none; text-align: center; }

a.button         { display: block; width: 230px; padding: 0 2px; border-width: 1px; border-style: solid; color: white; background-color: #cc0077; text-decoration: none; font-variant: small-caps; -moz-border-radius: 5px; }
a.button:hover   { border-width: 1px; border-style: solid; color: #003333; background-color: #00cccc; padding: 0 3px; }

div#left a.button { margin-left: 230px; }

#wrap {
  position: relative;
  top: 0;
  left: 0;
  background: #ccf;
  width: 800px;
  margin: 0 auto;
}

#top   { position: absolute; top: 2px; left: 2 px; padding: 0 0; width: 800px; height: 120px; background-color: #ccf; color: #008; border: 0px solid black; }

#left  { position: absolute; left: 2px; top: 130px; width: 800px; height: 550px; background: #ccf; color: black; border: 0px solid black; }

#right { position: absolute; left: 760px; top: 130px; width: 300px; height: 550px; background: #ccf; color: black; border: 1px solid black; }

#main { position: absolute; left: 0; top: 130px; width: 1200px; background: #ccf; color: black; border: 1px solid black; }

#ltlogo { display: block; position: absolute; top: 0; left: 0; }
#rtlogo { display: inline; position: absolute; top: 0; right: 0; }
#header { display: block; position: absolute; top: 0; left: 150px; }

.fullbox { display: block; width: 100%; }
.topbox { display: block; position: absolute; top: 0; left: 0; width: 100%; }
.ltbox { display: block; width: 50%; float: left; }
.rtbox { display: block; width: 50%; float: right; }
.btmbox { display: block; width: 100%; clear: both; }

#photobox {
  position: absolute;
  left: 0;
  top: 0;
  width: 800px;
  height: 550px;
  background: #ccf;
  border: none;
}

#photochooser {
  position: absolute;
  top: 5px;
  left: 2px;
  width: 320px;
  height: 490px;
}

a.slideshow, a.slideshow:visited {
  display: block;
  color: #000;
  text-decoration: none;
  border: 1px solid #ccf;
  width: 60px;
  height: 60px;
  float: left;
  margin: 2px 0;
}


a.slideshow span {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  top: 5px;
  left: 5px;
  overflow: hidden;
  background: #efedec url(back1.gif);
}

.dummyphoto {
  background-color: #ccf;
  display: block;
  position: absolute;
  width: 480px;
  height: 550px;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  border: none;
}

a.slideshow:hover {
  white-space: normal;
  border: 1px solid #ccf;
}

a.slideshow:hover img, a.slideshow:active img, a.slideshow:focus img {
  padding: 0;
  margin: 0;
  border: 0px solid #000;
}

a.slideshow:hover span, a.slideshow:active span, a.slideshow:focus span {
  display: block;
  position: absolute;
  width: 480px;
  height: 550px;
  top: -5px;
  left: 318px;
  padding: 0;
  margin: 0;
  font-style: italic;
  color: #000;
  border: none;
  text-align: center;
  background-color: #ccf;
}