/*
 *  There seems to be no way to assign names to color
 *  values, and so I need to just use the values as is.
 *
 *  bright: rgb(226,224,210) #e2e0d2
 *  normal: rgb(177,170,158) #b1aa9e
 *  darker: rgb(125,126,127) #7d7e7f
 *
 *  All these colors were picked from the original
 *  background image.
 */

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  color: rgb(177,170,158);
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-size: 12px;
 /*
  font-family: monospace;
  font-size: 12px;
 */
  text-transform: lowercase;
  background-attachment: fixed;
  background-color: rgb(125,126,127);
  background-image: url("../img/background-tonga.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
}

@media only all and (max-width: 600px) and (max-height: 431px) {
  body {
    background-size: 600px 431px;
    -moz-background-size: 600px 431px;
    -webkit-background-size: 600px 431px;
  }
}

/* All of the following styles only get used when background-size isn't supported */

img#expando {
  display: none;
  position: absolute;
  z-index: 1;
  -ms-interpolation-mode: bicubic;
}

.wide img#expando, .tall img#expando {
  display: block;
}

.wide img#expando {
  height: auto;
  width: 100%;
}

.tall img#expando {
  height: 100%;
  width: auto;
}

/* End of background-size hack */

em {
  font-style: normal;
  font-weight: bold;
}

a:link {
  color: rgb(226,224,210);
  text-decoration: none;
}
a:visited {
  color: rgb(226,224,210);
  text-decoration: none;
}
a:hover {
  color: rgb(226,224,210);
  text-decoration: underline;
}

table {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  border: 0px;
}

#menu {
  position: fixed;
  right: 20px;
  margin: 0px;
  padding: 0px;
  list-style: none;
  float: right;
}

#menu li {
  color: yellow;
  cursor: pointer;
}

#menu li:hover ul {
  display: block;
}

#menu li ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: none;
}

#menu li a, #menu li ul li a {
  color: white;
}

div.full-screen {
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

div#background-vignette {
  position: fixed;
  background-image: url("../img/background-vignette.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: cover;
  display: none;

  /* IE hack to enable .png transparency for jQuery fading. */
  background: none\9;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true",sizingMethod="scale",src="../img/background-vignette.png");
}

div#background-vignette-overlay {
  position: absolute;
}

div#photo-canvas {
  position: fixed;
  display: none;
  z-index: 999;
  background-color: rgb(0,0,0); /* Fallback if rgba() is not supported. */
  background-color: rgba(0,0,0,0.5);
}

div.content {
  position: relative;
  left: 0px;
  top: 0px;
  width: 95%;
  min-width: 95%;
  height: 95%;
  min-height: 95%;
  padding-left: 10px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 10px;
  display: none;
}

div.photo-thumbs {
  margin-bottom: 1em;
}

div.photo-thumbnail {
  display: inline-block;
  position: relative;
  left: 0px;
  top: 0px;
  width: 30px;
  height: 30px;
  overflow: hidden;
  margin: 3px;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  background-color: grey;
  box-shadow: 1px 1px 5px black;
  -moz-box-shadow: 1px 1px 5px black;
  -webkit-box-shadow: 1px 1px 5px black;
}

img.photo-thumbnail {
  position: absolute;
  left: 0px;
  top: 0px;
  border-style: none;
}

img.photo-full {
  border-style: solid;
  border-width: 1px;
  border-color: black;
  background-color: grey;
  box-shadow: 0px 0px 20px black;
  -moz-box-shadow: 0px 0px 20px black;
  -webkit-box-shadow: 0px 0px 20px black;
}

img.photo-nav {
  position: absolute;
  cursor: pointer;
}

img.slide-show {
  cursor: default;
}

.wait-ptr {
  cursor: wait;
}