/*  Sensory Output photo styles  */
/*  Copyright (c) 2005           */

/**************************/
/*   Initial Font Sizes   */
/**************************/

body, body div, body p, body th, 
body td, body li, body dd {
  font-size: x-small;     /* false value for WinIE4/5 */
  voice-family: "\"}\"";  /* trick WinIE4/5 into thinking rule is over */
  voice-family: inherit;  /* recover from trick */
  font-size: small;       /* intended value for better browsers */
  }

html>body, html>body div, html>body p, 
html>body th, html>body td, 
html>body li, html>body dd {
  font-size: small;       /* be nice to Opera */
  }

/*******************/
/* Standard Styles */
/*******************/

html, body {
  margin: 0; padding: 0;
  min-width: 760px;
  
  background: #282828 url(images/bg_shoebox.gif) top left repeat;
  font-family: "Gill Sans","Lucida Grande","Lucida Sans Unicode","Trebuchet MS",Arial,sans-serif;
  color: #bbb;
  }

h1, h2, h3, h4, h5, h6 {
  font-family: "Century Gothic","Lucida Grande","Lucida Sans Unicode",Verdana,Helvetica,Arial,sans-serif;
  font-weight: normal;
  }
  
h1 { font-size: 2.00em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.50em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1.00em; }
h6 { font-size: 0.75em; }


blockquote {  }
blockquote > p:last-child {  }
img { border: none; }
p { }
hr { margin: 1em 0; height: 1px; border: none; background: #ccc; }

/*******************/
/*  Inline Styles  */
/*******************/

code,var,kbd,xct {
  font-family: monaco,"Courier New",courier,mono-space;
  background-color: #fffebf;
  padding: 1px;
  }
abbr,acronym { border-bottom: 1px dotted #999; }
cite { padding-left: 25px; font-style: italic; }
kbd  { font-style: italic; }
xct  { font-weight: bold; }
ins  { color: #ddd; text-decoration: none; }
em,strong,del {}

/*******************/
/*   Link Styles   */
/*******************/

a:link, a:visited { color: #ccc; text-decoration: none; }
a:active, a:hover { color: #eee; text-decoration: none; }

/*******************/
/*   List Styles   */
/*******************/

#nav {
  position: absolute;
  bottom: -18px; left: 50%;
  display: block;
  margin: 0 0 0 -120px; padding: 0;
  width: 241px; height: 21px;
  list-style: none;
  background: transparent url(images/nav_photo.png) bottom left no-repeat;
  z-index: 100;
  }

#nav span { display: none; }
#nav li { float: left; display: block; margin: 0; height: 21px;  }
#nav li a {
  display: block;
  margin: 0; padding: 0;
  height: 16px;
  }

#nav #prev      { width: 28px; }
#nav #listing { width: 99px; }
#nav #thumbs    { width: 85px; }
#nav #next      { width: 29px; }
#nav #prev a, #nav #prev div { width: 23px; }
#nav #next a, #nav #next div { width: 24px; }
#nav li a:hover, #nav li a:active { background: transparent url(images/nav_photo.png) top left no-repeat; }
#nav #prev a:hover, #nav #prev a:active           { background-position: -5px -21px; }
#nav #listing a:hover, #nav #listing a:active { background-position: -28px -21px; }
#nav #thumbs a:hover, #nav #thumbs a:active       { background-position: -127px -21px; }
#nav #next a:hover, #nav #next a:active           { background-position: -212px -21px; }

#nav #prev div { margin: 0 0 0 5px; padding: 0; height: 16px; }
#nav #next div { margin: 0 5px 0 0; padding: 0; height: 16px; }
#nav #prev .disabled      { background: transparent url(images/nav_photo.png) -5px 0px no-repeat; }
#nav #listing .disabled { background: transparent url(images/nav_photo.png) -28px 0px no-repeat; }
#nav #thumbs .disabled    { background: transparent url(images/nav_photo.png) -127px 0px no-repeat; }
#nav #next .disabled      { background: transparent url(images/nav_photo.png) -212px 0px no-repeat; }

#slideshow {
  display: block;
  margin: 0; padding: 0;
  width: 735px;
  list-style: none;
  }

#slideshow li {
  display: block; float: left;
  padding: 0 5px;
  line-height: 35px;
  }

#slideshow img { border: 6px solid #ccc; }
#slideshow img:hover { border-color: #fff; }
#slideshow #more-forward img { border: 0; background: transparent url(images/more_forward.png) no-repeat; }
#slideshow #more-forward img:hover { background: transparent url(images/more_forward_h.png) no-repeat; }
#slideshow #more-backward img { border: 0; background: transparent url(images/more_backward.png) no-repeat; }
#slideshow #more-backward img:hover { background: transparent url(images/more_backward_h.png) no-repeat; }
  
#caption-right {
  position: absolute;
  display: block;
  top: 150px;
  left: 50%;
  width: 175px;
  text-align: left;
  }

.horizontal #caption-right { margin: 0 0 0 325px; padding: 0; }
.vertical #caption-right { margin: 0 0 0 225px; padding: 0; }

#caption-right:before {
  display: block; content: "\2002";
  margin: 0; padding: 0;
  width: 175px; height: 10px;
  background: transparent url(images/caption-r_top.png) no-repeat;
  }

#caption-right h4 {
  padding: 0 7px 3px 7px; margin: 0;
  background-color: #191919;
  font-weight: bold;
  font-size: 1.1em;
  line-height: 1.1em;
  }
    
#caption-right p {
  margin: 0; padding: 2px 7px;
  background-color: #191919;
  font-size: 0.9em;
  }

#caption-right a {
  color: #fff;
  }

#caption-right:after {
  display: block; content: "\2002";
  margin: 0; padding: 0;
  width: 175px; height: 10px;
  background: transparent url(images/caption-r_bot.png) no-repeat;
  }

#links {
  display: block;
  margin: 0; padding: 8px 0 4px 0;
  list-style: none;
  text-align: center;
  }

#links li { display: inline; padding: 0; margin: 0; }
#links li:after { padding: 0 4px 0 7px; content: "\2022"; }
#links li.last:after { display: none; }

#meta {
  position: absolute;
  top: 4px; right: 0;
  display: block;
  margin: 0; padding: 0;
  width: 36px;
  list-style: none;
  }
  
#meta li {
  display: block;
  float: right;
  margin: 0 4px 3px 0; padding: 0;
  width: 32px; height: 11px;
  line-height: 11px;
  }

#meta a { display: block; margin: 0; padding: 0; }
#meta span { display: none; }

#meta #rss a   { background: transparent url(images/meta_rss.gif) 0px 0px no-repeat; }
#meta #xhtml a { background: transparent url(images/meta_xhtml.gif) 0px 0px no-repeat; }
#meta #css a   { background: transparent url(images/meta_css.gif) 0px 0px no-repeat; }
#meta #accessible a   { background: transparent url(images/meta_508.gif) 0px 0px no-repeat; }
#meta #rss a:hover, #meta #rss a:active     { background-position: 0px -11px; }
#meta #xhtml a:hover, #meta #xhtml a:active { background-position: 0px -11px; }
#meta #css a:hover, #meta #css a:active     { background-position: 0px -11px; }
#meta #accessible a:hover, #meta #accessible a:active     { background-position: 0px -11px; }

/*******************/
/*  Named  Styles  */
/*******************/

#head {
  position: relative;
  height: 75px;
  background: transparent url(images/bg_head.png) top left repeat-x;
  }

#head h1 { position: absolute; top: 10px; left: 250px; margin: 0; padding: 0; text-shadow: 2px 2px 1px #3d3d3d; z-index: 10; }
#head h2 { position: absolute; top: 40px; left: 250px; margin: 0; padding: 0; text-shadow: 2px 2px 1px #3d3d3d; z-index: 9; }
#head #museum        { font-weight: bold; color: #dd2; }
#head #museum:hover  { color: #ff0; }
#head #exhibit       { color: #aaa; }
#head #exhibit:hover { color: #ccc; }
#head #artist        { font-size: 0.80em; color: #ddd; }
#head #artist:hover  { color: #fff; }

#recent {
  margin: 0 auto 15px auto; padding: 0;
  width: 690px;
  border-bottom: 6px solid #333;
  }

#recent:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
  }

#recent h2 {
  display: block;
  margin: 0 auto 0 auto; padding: 10px 0 10px 0;
  width: 100%;
  background: #222 url(images/recent_bg.png) repeat;
  font-family: "Gill Sans","Trebuchet MS",Verdana,Sans-serif;
  font-size: 1.4em;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.4em;
  color: #999;
  }

#recent div {
  position: relative;
  display: block;
  float: left;
  margin: 0; padding: 6px;
  width: 218px; height: 230px;
  background: #222 url(images/recent_bg.png) repeat;
  }

#recent div:hover {
  background: #2b2b2b url(images/recent_bg_h.png) repeat;
  }

#recent img {
  border: 4px solid #fff;
  }

#recent img.flourish { display: block; border: none; margin: 0; padding: 0; }

#recent h3, #imax h3 {
  display: block;
  margin: 4px 0; padding: 0;
  font-weight: normal;
  font-size: 1.25em;
  }

#imax h3 { margin-top: 16px; margin-bottom: 0; padding: 7px 7px 0 7px; background: transparent url(images/imax_top.png) no-repeat; height: 28px; 
 }

#imax p.desc, #imax p.date, #imax p.count {
  margin: 0; padding: 3px 14px; color: #333;
  background: transparent url(images/imax_mid.png) repeat-y;
}

#imax p.count {
  margin: 0; padding: 4px 14px ;
  color: #d2d2d2;
  text-align: right;
  font-style: italic;
  font-size: 1.25em;    }

#imax p.date {
  font-style: italic;
  }

#imax:hover p.count {
  color: #929292;
  }

#imax:after { display: block; margin: 0; padding: 0; width: 225px; height: 17px; content: "\2002"; background: transparent url(images/imax_bot.png) no-repeat; }
  
#recent div p.desc {
  margin: 0; padding: 0;
}

#recent div .date {
  margin: 4px 0; padding: 0; 
  font-style: italic;
}

#recent div .count {
  position: absolute;
  bottom: -0.95em; right: 6px;
  font-family: "Futura","Gill Sans",sans-serif;
  font-size: 1.35em;
  font-weight: normal;
  font-style: italic;
  color: #3f3f3f;
  visibility: hidden;
  z-index: 0; 
  }
  
#recent div:hover .count {
  visibility: visible;
  }
  
#galleries {
  margin: 0 auto; padding: 0;
  width: 425px;
  background: url(images/list_head.png) top left no-repeat;
  }

#galleries h2 {
  display: block;
  margin: 0 8px 0 8px;
  height: 24px;
  font-family: "Gill Sans","Trebuchet MS",Verdana,Sans-serif;
  font-size: 0.80em;
  font-weight: normal;
  text-transform: uppercase;
  text-align: left;
  line-height: 24px;
  border-bottom: 2px solid #ccc;
  letter-spacing: 0.25em;
  color: #fff;
  }

#galleries #toggle {
  font-family: "Century Gothic","Lucida Grande","Lucida Sans Unicode",Verdana,Helvetica,Arial,sans-serif;
  text-transform: lowercase;
  font-weight: bold;
  color: #999;
  font-size: 0.8em;
  }

#galleries #toggle:hover { color: #ccc; cursor: pointer; }

#galleries table {
  margin: 0; padding: 0 14px 0 14px;
  width: 425px;
  background: transparent url(images/list_mid.png) top left repeat-y;
  border-spacing: 0;
  border-collapse: separate;
  }

#galleries table th {
  margin: 0 0 1px 0; padding: 3px;
  border-bottom: 1px solid #aaa;
  background-color: #eee;
  font-size: 85%; 
  text-shadow: 2px 2px #ddd;
  text-align: left;
  color: #333; 
  }

#galleries th.last { text-align: right; }
#galleries tr { background-color: #fff; }
#galleries .all { display: none; }
#galleries tr span { color: #fff; }
#galleries tr:hover { background-color: #d1d8ee; }
#galleries tr:hover span { color: #aa2222; }
#galleries tr:hover a { color: #a22; }
#galleries table td.last { text-align: right; }

#galleries td {
  padding: 0;
  height: 20px;
  border-bottom: 1px dotted #bbb;
  font-size: 0.90em;
  color: #333;
  }

#galleries table td a {
  display: block;
  margin: 0; padding: 4px;
  color: #900;
  }

#galleries:after {
  margin: 0; padding: 0;
  height: 17px;
  content: "\2002";
  display: block;
  background: url(images/list_bot.png) top left no-repeat;
  }

#imax {
  float: left; clear: left;
  margin: 20px 0 0 15px; padding: 0;
  width: 225px;
  }

#sidelightbox {
  position: relative;
  text-align: left;
margin-left: 240px; padding: 35px 25px;  min-height: 384px;
  }

#lightbox {
  position: relative;
  margin: 0; padding: 25px 10px 25px 10px;
  background: #282828 url(images/bg_shoebox.gif) top left repeat;
  min-height: 384px;
  }

#lightbox #photo {
  display: block;
  margin: 0 auto; padding: 0;
  background: #666 url(images/loading.gif) 50% 50% no-repeat;
  border: 10px solid #fff; 
  }
  
.horizontal #photo { width: 600px; height: 400px; }
.vertical #photo   { width: 400px; height: 600px; }

#more-info { margin: 15px 0; padding: 0; text-align: center; }
#exif-show { display: block; margin: 0 auto; padding: 0 0 6px 0; width: 100px; height: 16px; background: transparent url(images/info_show.png) no-repeat; }
#exif-show:hover { background: transparent url(images/info_show_h.png) no-repeat; }
#exif-hide { display: block; margin: 0 auto; padding: 0 0 6px 0; width: 100px; height: 16px; background: transparent url(images/info_hide.png) no-repeat; }
#exif-hide:hover { background: transparent url(images/info_hide_h.png) no-repeat; }
#more-info table { margin: 0 auto; font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif; border: 0; }
#more-info table td, #more-info table th { margin: 0; padding: 2px 1px; font-size: 0.75em; text-align: left; }
#more-info table tbody tr td { border-top: 1px solid #898989; }

#foot {
  position: relative;
  height: 50px;
  }

#foot p {
  margin: 0; padding: 0;
  text-align: center;
  }

/**************************/
/*  Prev and Next Thumbs  */
/**************************/

#shoebox {
  position: absolute;
  top: 0; left: 0;
  margin: 0; padding: 0;
  width: 100%; height: 132px;
  }

#shoebox ul  { margin: 0 auto; padding: 25px 0 0 0; list-style: none; }
#shoebox li  { display: block; float: left; }
#shoebox img { margin: 0; padding: 0; border: 6px solid #ccc; }
#shoebox img:hover { border-color: #fff; }

/* outer-most left,right containers */
#prev, #next {
  float: left;
  top: 136px;
  width: 50%;
  margin: 0; padding: 0;
  }

/* float inner block, position relative to setup for span absolute positioning*/
#prev a { position: relative; float: right; margin: 0; }
#next a { position: relative; float: left;  margin: 0; }

/* set inner block padding for various size photos */
.horizontal #prev a { padding: 0 325px 0 0; }
.vertical #prev a   { padding: 0 225px 0 0; }
.horizontal #next a { padding: 0 0 0 325px; }
.vertical #next a   { padding: 0 0 0 225px; }

/* IE flush and reset */
#shoebox a span { position: absolute; left: -10000px; text-indent: -10000px; }
#shoebox a > span { top: 0; }
 
/* set double hover over photo dimensions */
.horizontal a > span { width: 310px; height: 420px; }
.vertical a > span   { width: 210px; height: 620px; }

/* set double hover over photo positions and offset (hidden) background  */
#prev a > span { left: auto; right: 0; background: transparent url(images/prev.png) 17px -36px no-repeat; z-index: 2; }
#next a > span { left: 0; right: auto; background: transparent url(images/next.png) 152px -36px no-repeat; z-index: 3;  }

/* reset link and img presentation for .thumbs */
#shoebox a     { display: block; margin: 0; padding: 0; }
#shoebox a img { margin: 0; padding: 0; }

/* set double hover over photo backgrond visible background */
#prev a:hover span, #prev a:active span { background-position: 17px 19px; }
.horizontal #next a:hover span, .horizontal #next a:active span { background-position: 252px 19px; }
.vertical #next a:hover span, .vertical #next a:active span { background-position: 152px 19px; }