/*************************************************************************

   Pure CSS photo gallery
   
   This gallery displays image thumbnails in a central swatch. 
   The entire display area is designed for an 800x600 display. 

   Once a thumbnail is hovered over, it's attributes change as feedback,
   and its thumbnail caption is displayed.

   Once a thumbnail is clicked, the full-size image is displayed, 
   overlaying the initial thumbnail swatch. At the same time, the full
   caption is displayed in the caption area. The user must click out of
   the image display area to remove the full-sized image.

   Both the thumbnails and full-size images maintain a 4:3 size ratio,
   output by most digital cameras. The resolutions are:

   Thumbnail:           60px x 80px (portrait) 80px x 60px (ls)
   Background colour:	#000000

   Full-size image:     330px x 440px (portrait) 440px x 330px (ls)
   Background colour:	#dddddd
   
   This gallery may be suitable as a slide show, as on browsers that
   maintain the focus of an object (IE), the images may be cycled using
   the TAB button on the keyboard.

   The gallery will work, with most functions operating as intended,
   on all modern browsers, including IE6.

   It will not function as necessary on:
   - Netscape Navigator 7.x
   - Internet Explorer:Mac 5.2
   - Opera 7.5x

*************************************************************************/

/* Optional setting for body - this should be removed for existing 
   templates */
body { 
  margin: 0;
  padding: 0;
  background: #000000;
 }

a,
a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
  border-bottom: none;
  margin: 0;
  padding: 0;
}

/* Style the container for the entire gallery */
#gallery_container { 
  width: 710px;
  height: 550px;
  margin: 20px auto;
  border: 3px solid #ffce00;
  outline: 1px solid #ffe245;
/*  background: #666666;*/
  background: transparent url(../../../images/themes/classic/layout/elements/content/foreground_wallpaper.png) 50% 0 repeat;

  position: relative;
  z-index: 500;
 }

/* Style the caption container as a section of the 
   gallery container */
#gallery_container #caption_container { 
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: black url(../../../images/themes/classic/layout/elements/content/vertical_gradient-100x80.png) 0 0 repeat-x;
  border-top: 1px solid #a40000;
  z-index: 510;
 }

/* Style the thumbnail container within the gallery */
#gallery_container #thumbnail_container { 
  width: 410px;
  height: 410px;
  margin: 30px auto auto;
  z-index: 510;
 }

/* Prepare the initial link styles */
#gallery_container #thumbnail_container a,
#gallery_container #thumbnail_container a:visited { 
  border: 1px solid #ffffff;
  border-top: 1px solid silver; 
  border-left: 1px solid silver; 
  border-right: 1px solid #262626;
  border-bottom: 1px solid #262626;
  margin: 0;
  padding: 0;
  display: block;
  float: left;
  width: 100px;
  height: 100px;
  background: #333333;
  cursor: default;
  text-decoration: none;
  z-index: 520;
 }

/* Prepare the initial caption styles */
#gallery_container #thumbnail_container a span.thumbnail_caption,
#gallery_container #thumbnail_container a span.display_caption { 
  display: none;
  font-family:"Century Gothic", Helvetica, "Trebuchet MS", Verdana, Arial, Sans-Serif !important;
 }

#gallery_container #thumbnail_container a span.display_caption strong { 
  display: block;
  margin: 2px 0 -8px 0;
 }

/* Style the initial thumbnail display - both for portrait and 
   landscape thumbnails */
#gallery_container #thumbnail_container a.portrait span.thumbnail_img img { 
  display: block;
  margin: 10px auto auto;
  width: 60px;
  height: 80px;
  border: 2px solid #000000;
  z-index: 530;
 }

#gallery_container #thumbnail_container a.landscape span.thumbnail_img img { 
  display: block;
  margin: 20px auto auto;
  width: 80px;
  height: 60px;
  border: 2px solid #000000;
  z-index: 530;
 }

/* Initially, hide the display images */
#gallery_container #thumbnail_container a span.display_img { 
  display: none;
 }

/* Prepare the initial hover states, and graphical feedback of 
   the hover */
#gallery_container #thumbnail_container a:hover { 
  width: 98px;
  height: 98px;
  border: 2px solid #ffce00;
  background: #000000;
  cursor: default;
 }

#gallery_container #thumbnail_container a.portrait:hover span.thumbnail_img img { 
  width: 60px;
  height: 80px;
  margin: 9px auto auto;
 }

#gallery_container #thumbnail_container a.landscape:hover span.thumbnail_img img { 
  width: 80px;
  height: 60px;
  margin: 19px auto auto;
 }

/* Display the thumbnail caption on hover */
#gallery_container #thumbnail_container a:hover span.thumbnail_caption { 
  display: block;
  position: absolute;
  bottom: 34px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 18px;
  color: #ffffff;
  z-index: 520;
 }

/* Style the links on click */
/* Hide the thumbnail caption */
#gallery_container #thumbnail_container a:active span.thumbnail_caption,
#gallery_container #thumbnail_container a:focus span.thumbnail_caption { 
  display: none;
 }

/* Display the full-size image display caption */
#gallery_container #thumbnail_container a:active span.display_caption,
#gallery_container #thumbnail_container a:focus span.display_caption { 
  display: block;
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  width: 100%;
  height: 70px;
  overflow: auto;
  text-align: center;
  font-size: 14px;
  color: #ffffff;
  z-index: 520;
 }


/* Hide the active border of the active link element, to prevent it 
   from showing through the resized image, further affecting element 
   flow */
#gallery_container #thumbnail_container a:active,
#gallery_container #thumbnail_container a:focus {
  background: #aaa;
  height: 0;
  width: 0;
  border: 0;
 }

#gallery_container #thumbnail_container a:active span.thumbnail_img,
#gallery_container #thumbnail_container a:focus span.thumbnail_img{
  height: 0;
  width: 0;
  border: 0;
 }

/* Move the thumbnail-enclosing block element to the far background, 
   to prevent it from showing */
#gallery_container #thumbnail_container a:active span.thumbnail_img img,
#gallery_container #thumbnail_container a:focus span.thumbnail_img img{
  background: #aaa;
  position: absolute;
  left: 50%;
  top: 30px;
  height: 0;
  width: 0;
  border: 0;
  z-index: -1;
 }

#gallery_container #thumbnail_container a:active span.display_img,
#gallery_container #thumbnail_container a:focus span.display_img { 
  background: #bbb;
  height: 0;
  width: 0;
  padding: 0;
  margin: 0;
  border: 0;
 }

/* Re-size the image on click */
#gallery_container #thumbnail_container a:active span.display_img,
#gallery_container #thumbnail_container a:focus span.display_img { 
  display: block;
  background: #dddddd;
  position: absolute;
  left: 132px;
  top: 10px;
  width: 446px;
  height: 446px;
  z-index: 580;
  cursor: default;
  border: 1px solid #fff;
 }

/* Style the display of the full-sized image, whether it is portrait
   or landscape */
#gallery_container #thumbnail_container a.portrait:active span.display_img img,
#gallery_container #thumbnail_container a.portrait:focus span.display_img img { 
  border: 0;
  width: 330px;
  height: 440px;
  padding: 3px 58px;
  z-index: 590;
 }

#gallery_container #thumbnail_container a.landscape:active span.display_img img,
#gallery_container #thumbnail_container a.landscape:focus span.display_img img {
  border: 0;
  width: 440px;
  height: 330px;
  padding: 58px 3px;
  z-index: 590;
 }



/* Style the page navigation container */
#gallery_page_navigation { 
  position: relative;
  color: #ffffff;
  width: 718px;
  height: 28px;
  margin: 5px auto;
/*  border: 1px solid purple;*/
  font-family:"Century Gothic", Helvetica, "Trebuchet MS", Verdana, Arial, Sans-Serif !important;
  font-size: 16px;
 }

/* The gallery page location summary */

/* If there is only one gallery display page, hide the entire navigation bar */
#gallery_page_navigation.hidden { 
  display: none;
 }

#gallery_page_navigation p.gallery_navigation_info { 
  width: 110px;
  height: 22px;
  margin: 0;
  padding: 2px 5px;
  position: absolute;
  left: 150px;
  text-align: left;
 }

#gallery_page_navigation div.gallery_page_navigators { 
  position: absolute;
  top: 0;
  left: 300px;
 }

#gallery_page_navigation div.gallery_page_navigators ul { 
  margin: 0 auto;
  padding: 0;
  list-style: none;
 }

#gallery_page_navigation div.gallery_page_navigators ul li { 
  float: left;
  border: 1px solid #666666;
  width: 20px;
  height: 22px;
  padding: 2px;
  text-align: center;
 }

#gallery_page_navigation a, 
#gallery_page_navigation a:link { 
  text-decoration: none;
  color: #ffffff;
  font-size: 16px;
 }

#gallery_page_navigation div.gallery_page_navigators ul li.gallery_current_page { 
  text-decoration: none;
  color: #000000;
  background: #880033;
 }

#gallery_page_navigation div.gallery_page_navigators ul li.gallery_current_page a, 
#gallery_page_navigation div.gallery_page_navigators ul li.gallery_current_page a:link {
  color: #000000;
  font-weight: bold;
 }

#gallery_page_navigation div.gallery_page_navigators ul li:hover { 
  color: #000000;
  background: #ff0088;
  border: 1px solid #ffce00;
 }

#gallery_page_navigation div.gallery_page_navigators ul li.gallery_current_page:hover { 
  color: #000000;
  background: #880033;
  border: 1px solid #666666;
 }

#gallery_page_navigation a.gallery_previous_page,
#gallery_page_navigation a.gallery_next_page { 
  border: 1px solid #666666;
  width: 86px;
  height: 22px;
  padding: 2px;
 }

#gallery_page_navigation a.gallery_previous_page { 
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
 }

#gallery_page_navigation a.gallery_next_page { 
  position: absolute;
  right: 0;
  top: 0;
  text-align: center;
 }

#gallery_page_navigation a.gallery_previous_page:hover,
#gallery_page_navigation a.gallery_next_page:hover { 
  background: #ff0088;
  border: 1px solid #ffce00;
 }