/* The main div containing the image viewer */
/* The initial background image is displayed and when a thumb (a link) is selected
   the selected image is placed over the background image. */

#holder
{
  position:relative;
  width:528px;
  text-align:center;
  background:transparent url(image/pic1.jpg) 0px 0px no-repeat;
  margin:10px 0 0 0;
  z-index:1;
  border:1px solid #000;
}

/* use <div id="holder" class="left" to float gallery to the LHS */

.left
{
  float:left;
}

/* use <div id="holder" class="right" to float gallery to the LHS */

.right
{
  float:right;
}

/* pad is an empty div with a height used to force the position of the scrollbox below the main image */

#pad1
{
  height:330px; /* used to force scrollbox down */
  width:5px;
}

/* Scrollbox contains the thumb's */

#scrollbox
{
  width:528px; /* width of scroll box - main image is 528px */
  height:100px;
  float:left;
  background:#fff; /* the space between thumbs */
  overflow:auto;
  border:0px solid #aaa;
}

#thumbs
{
  width:814px; /* each thumb is 75px wide - 75 x 10 + 6 x 10 */
  height:80px; /* ??? */
}

/* thumbs are background images for a row of links */

a.gallery, a.gallery:visited
{
  display:block;
  color:#000;
  text-decoration:none;
  border:1px solid #000; /* default frame around thumb */
  width:75px;            /* width of a thumb */
  height:47px;           /* height of a thumb */
  margin:2px;            /* the margin between each thumb */
  float:left;
}

/* These set the background for the links i.e. link with class="slidea" gets thumb1.jpg background */

a.slidea
{
  background:url(image/thumb1.jpg);
}

a.slideb
{
  background:url(image/thumb2.jpg);
}

a.slidec
{
  background:url(image/thumb3.jpg);
}

a.slided
{
  background:url(image/thumb4.jpg);
}

a.slidee
{
  background:url(image/thumb5.jpg);
}

a.slidef
{
  background:url(image/thumb6.jpg);
}

a.slideg
{
  background:url(image/thumb7.jpg);
}

a.slideh
{
  background:url(image/thumb8.jpg);
}

a.slidei
{
  background:url(image/thumb9.jpg);
}

a.slidej
{
  background:url(image/thumb10.jpg);
}


a.gallery span
{
  display:block;
  position:absolute;
  left:150px;
  top:-1px;
  width:1px;
  height:1px;
  overflow:hidden;
  z-index:100;
  color:#fff; /* to prevent display of link text */
  font-size:1px;
}

/* Frame for thumb on hover */

a.gallery:hover
{
  white-space:normal;
  border:1px solid #0000ff;
}

/* Frame of selected thumb after click */ 

a.gallery:active
{
  border:1px solid #0000ff;
}

/* Frame around main image on thumb hover */

a.gallery:hover img
{
  border:0px solid #ff0000;
  z-index:100;
}

/* Frame around main image after selection via click on thumb */

a.gallery:active img, a.gallery:focus img
{
  border:0px solid #00ff00;
  z-index:50;
}

/* Main image displayed on thumb hover */

a.gallery:hover span
{
  display:block;
  position:absolute;
  width:528px;
  height:330px;
  top:0px;           /* position of main frame */
  left:0px;
  padding:0px;
  font-style:italic; /* caption text */
  color:#000;        /* caption text */
  background:#fff;
  z-index:100;
  font-size:18px;    /* caption text */
}

/* adds special style to an activated or in focus element - causes display of main image on thumb click */

a.gallery:active span, a.gallery:focus span
{
  display:block;
  position:absolute;
  width:528px;          /* the main image is 528px + 2 for the LH/RH borders */
  height:330px;         /* the main image is 300px + space for caption below */
  top:0px;              /* position of image down from top */
  left:0px;           /* position of image in from left */
  padding:0px;          /* ASSUME SET TO 5 TO ALLOW USE INLINE WITH TEXT? */
  font-style:italic;    /* caption text */
  color:#000;           /* caption text */
  background:#fff;
  z-index:50;
  font-size:18px;    /* caption text */
}

/* what is html in this contest? This sets the possition from the left of the photo in I.E. 6.0 - default image =175px -border of 1px -padding of 5px = 169px.*/

* html a.gallery:hover span
{
  left:0px;
}

/* ??? */

* html a.gallery:active span
{
  left:0px;
}


/* this will only work in xhtml file not css. Can use to pull in an IE 7 css file!
<!--[if IE 7]>

a.gallery span
{
  display:block;
  position:absolute;
  width:512px;
  height:330px;
  top:49px;
  left:-99999px;
  padding:5px;
  font-style:italic;
  color:#000;
  background:#fff;
  z-index:100;
  font-size:11px;
}

a.gallery span img
{
  border:1px solid #000;
}

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

a.gallery:hover img
{
  border:1px solid #000;
  z-index:100;
}

a.gallery:active img, a.gallery:focus img
{
  border:1px solid #000;
  z-index:50;
}

a.gallery:hover span
{
  left:170px;
  z-index:100;
}

a.gallery:hover span img
{
  border:1px solid #000;
}

a.gallery:active span, a.gallery:focus span
{
  left:170px;
  z-index:50;
}

-->
*/