/* Photo Gallery technique adaapted from CSSplay.
   See www.cssplay.co.uk for more information. */

#leftTray { z-index:0; }

#rightTray { z-index:1; }

.photo a, .photo a:hover, .photo a:visited { border:0; }

.photo {
  padding:0px;
  width:480px;
  text-align:left;
}

.photo ul li a h3 {
  border-bottom:none;
  margin-top:0;
  padding-top:0;
  font-style:normal;
}

.photo ul {
  list-style:none;
  padding:0;
  margin:0;
  width:480px;
  background:url("/images/tan_alpha.png");
  border:1px solid #947554;
  position:relative;
  height:68px;
}

.photo ul li {
  display:inline;
  width:52px;
  height:52px;
  float:left;
  margin:6px 8px;
}

.photo ul li a {
  display:block;
  position:static;
  width:52px;
  height:52px;
  cursor:default;
  text-decoration:none;
}

.photo ul li a b { display:none; }

.photo ul li a.wide img { width:50px; }

.photo ul li a.tall img {
  height:50px;
  width:auto;
}

.photo ul li a img {
  background:url("/images/dblack_alpha.png");
  display:block;
  margin:0 auto;
  border:1px solid #947554;
}


/* HOVER STATE */


.photo ul li a:hover {
  white-space:normal;
  position:relative;
  font-size:100%;
}

.photo ul li a:hover img {
  position:absolute;
  border-color:#222;
  padding:5px;
}

.photo ul li a.tall:hover img {
  left:-18px;
  top:-36px;
  width:auto;
  height:115px;
}

.photo ul li a.wide:hover img {
  left:-37px;
  top:-20px;
  width:115px;
  height:auto;
}


/* ACTIVE STATE */


.photo ul li a:active, .photo ul li a:focus {
  position:static;
  outline:0;
}

.photo ul li a:focus img, .photo ul li a:active img { border:1px solid #222; }

.photo ul li a:focus.tall img, .photo ul li a:active.tall img {
  position:absolute !important;
  width:300px;
  height:auto;
  left:-140px;
  top:-150px;
  border:1px solid #222;
  padding:25px 200px 25px 25px;
}

.photo ul li a:focus.wide img, .photo ul li a:active.wide img {
  position:absolute !important;
  width:450px;
  height:auto;
  left:-140px;
  top:-150px;
  border:1px solid #222;
  padding:9em 25px 25px; /* top padding matches height of caption */
}

.photo ul li a:focus.tall b, .photo ul li a:active.tall b {
  display:block;
  position:absolute;
  width:150px;
  height:auto;
  top:-150px;
  left:185px;
  color:#fff;
  font-weight:normal;
  padding:0 25px;
  text-align:left;
}

.photo ul li a:focus.wide b, .photo ul li a:active.wide b {
  display:block;
  position:absolute;
  width:438px;
  height:9em;
  top:-150px;
  left:-140px;
  color:#fff;
  font-weight:normal;
  padding:0 31px;
  text-align:left;
}

.photo ul li a:focus b h3, .photo ul li a:active b h3 { padding-top:15px; }
.photo ul li a.tall:focus b h3, .photo ul li a.tall:active b h3 { padding-top:25px; }

/* sans captions */


.photo ul li a:focus.tall img.noCap, .photo ul li a:active.tall img.noCap {
  padding-right:25px;
  left:-70px;
}

.photo ul li a:focus.wide img.noCap, .photo ul li a:active.wide img.noCap { padding-top:25px; }



/* Drawing-specific gallery styles */



.photo p.description {
  font-size:0.95em;
  margin:10px 10px 0;
}

.photo ul li.wBg a h3 {
  color:#000;
}

.photo ul li.wBg a img {
  background:none;
  border:0;
}

.photo ul li.wBg a:focus.tall img, .photo ul li.wBg a:active.tall img,
.photo ul li.wBg a:focus.tall img.noCap, .photo ul li.wBg a:active.tall img.noCap {
  position:absolute !important;
  width:450px;
  height:auto;
  left:-140px;
  padding:7em 20px 25px; /* top padding matches height of caption */
}

.photo ul li.wBg a:focus.wide img, .photo ul li.wBg a:active.wide img {
  position:absolute !important;
  width:450px;
  height:auto;
  clear:both;
  padding:11em 20px 25px; /* top padding matches height of caption */
}

.photo ul li.wBg a:focus.tall b, .photo ul li.wBg a:active.tall b {
  display:inline;
  width:450px;
  height:11em;
  left:-135px;
  padding:6pxm 10px 0;
  text-indent:-10px;
}

.photo ul li.wBg a:focus.wide b, .photo ul li.wBg a:active.wide b {
  display:block;
  left:-120px;
  width:450px;
  height:11em;
  margin-top:60px;
  padding:6px 10px 0;
}

.photo ul li.wBg a:focus b h3, .photo ul li.wBg a:active b h3 { padding:15px 0 0.5em !important; }

.photoBox ul li.wBg a img {
  background:none;
  border:0;
}

.photo ul li.wBg a:hover img, .photo ul li.wBg a:active img, .photo ul li.wBg a:focus img {
  background:white;
  border:3px solid #222;
}

.photo ul li.wBg a:active img, .photo ul li.wBg a:focus img { border-width:10px; }

.photo ul li.wBg a b { color:#000 !important; }

.photo ul li.wBg a:focus.wide img, .photo ul li.wBg a:active.wide img { padding-top:6em; }

.photo ul li.wBg a:focus.wide b, .photo ul li.wBg a:active.wide b { height:6em; }