/* main page background */
.page
{
  position: relative;
  background-color: #111111;
  top: 0px;
  }

/* drag div is dragable by drag.js */
.drag
{
  position: absolute;
  cursor: move;
  z-index: 100;
  }

.drag img
{
 border: none;
}

/* title bar */
.title
{
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 2px;
  position: relative;
  background-color: #222222;
  color: #cccc88;
  text-align: center;
  font-size: 16px;
  text-spacing: 1px;
  width: 960px;
  margin-left: -480px;
  left: 50%;
  padding: 8px;
  }

/* title is a link, so hide its decoration */
.title a
{ 
  text-decoration: none;
  color: #cccc88;
 }

/* highlight title on hover */
.title a:hover
{ 
  color: #eeeeaa;
 }

/* 'home' icon */
.title .home
{
  position: absolute;
  left: 8px;
  margin: 0px;
  padding: 0px;
  width: 75px;
  height: 20px;
  background-image: url(../support/home0.gif);
  }

/* 'home' icon hover */
.title .home:hover
{
  background-image: url(../support/home1.gif);
  }

/* nav bar - used for selecting galleries and images */
.nav
{
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  background-color: #222222;
  color: #cccc88;
  width: 960px;
  margin-left: -480px;
  left: 50%;
  padding: 8px;
}

/* make the table fill the nav bar */
.nav table
{ 
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  }

/* center the text within each cell */
.nav td
{
  text-align: center;
  padding: 0px;
 }

/* for 'back' and 'next' if no navigation possible */
.nav .noref
{
  color: #333333;
  }

/* link on the nav bar */
.nav a
{
  color: #cccc88;
  text-decoration: none;
  display: block;
  }

.nav a:hover
{
  color: #FFFFFF;
  background-color: #888844;
  }

/* a nav link which is always shown: the currently selected page number */
.nav .show
{ 
  display: block;
  background-color: #444444;
  font-size: 11px;
  }

/* hovering hides this element, so normally show it (the dots/diamonds) */
.nav .hoverhide
{ 
  display: block;
  font-size: 10px;
  color: #666633;
  }

/* hovering shows this element, so normally hide it (the numbers) */
.nav .hovershow
{ 
  display: none;
  font-size: 11px;
  font-weight: bold;
  }

/* hide (dots/diamonds) on hover */
.nav a:hover .hoverhide
{ 
  display: none;
  font-size: 10px;
  }

/* show (numbers) on hover */
.nav a:hover .hovershow
{ 
  display: block;
  background-color: #888844;
  font-size: 11px;
  }

/* pagetext page summary is not normally shown */
.nav .pagetext
{
  display: none;
}

/* pagetext page summary is shown on hover */
.nav a:hover .pagetext
{
  display: block;
  position: absolute;
  margin-left: -80px;
  width: 160px;
  border: solid black 1px;
  color: #000044;
  background-color: #ffff88;
  font-size: 11px;
  top: 100%;
  }

/* 960 x 342 (normally) 'work area' used to show images */
.images
{
  position: relative;
  top: 0px;
  background-color: #000000;
  border: solid 8px black;
  width: 960px;
  height: 342.86px;
  margin-left: -480px;
  left: 50%;
  z-index: 1;
  }

/* an image on the page, it is positioned with left/top in 'style' */
.image
{
  position: absolute;
  }

/* text beneath the image, hidden unless hovered over */
.imagetext
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #000044;
  padding: 0px;
  position: relative;
  top: 0px;
  left: 50%;
  width: 160px;
  margin-left: -80px;
  text-align: center;
  z-index: 1;
  }

/* image link (no underline) */
.image a
{ 
  text-decoration: none;
  }

/* image bitmap (borderless) */
.image img
{
  border: none;
  }

/* css trick to hide the image text unless hovered */
.imagelink .imagetext
{
  background-color: #ffff88;
  border: solid 1px black;
  display: none;
  }

.imagelink:hover
{ 
  display: block;
  }

.imagelink:hover .imagetext
{
  display: block;
  }

.chapter
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  background-color: black;
  color: #222222;
  position: absolute;
  letter-spacing: 3px;
 }

/* the main image window - background-image is replaced by javascript */
#mainimage
{
  background-image: url('replaceme.jpg');
  background-repeat: no-repeat;
  display: none;
  padding: 0px;
  border: 8px solid black;
  z-index: 3;
  text-decoration: none;
  }

a#mainimage
{ 
  text-decoration: none;
  }

/* box for credits and picture details, normally hidden unless button clicked on */
.creditbox
{
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #cccc88;
  width: 960px;
  margin-left: -480px;
  left: 50%;
  padding: 8px;
  }

/* close up the paragraphs */
.creditbox p
{
  margin-top:4px;
  margin-bottom:4px;
  }

/* a links have no decoration */
.creditbox a
{ 
  text-decoration: none;
  color: #cccc88;
 }

/* change colour on hover over title */
.creditbox a:hover
{ 
  color: white;
 }

/* hide the main body of text, is toggled by .js */
.creditbox #credits
{ 
  visibility: hidden;
  height: 0;
  }

/* links within text */
.creditbox #credits a
{
  color: #ffffaa;
  }

/* end */