/*
   **** Product Photo Gallery Styles ****
   
   The styles are divided into five areas:
   1. Styles for the header area when in thumbnail mode
   2. Styles for the header area when in single photo mode
   3. Styles for the content area
   4. Styles for the full size popup image 
*/


/* 1. Styles for the header area when in thumbnail mode -------------------------------- */

.TopRightPanel /* Used by divs that should appear as the top panel on the right side. */ 
{
  background: #E5E5E5 none repeat scroll 0%;
  font-size: 11px;
  /* Tor's (old) version:
  height: 82px;
  margin-bottom: 10px;
  padding: 5px 6px;

  Jason's new version: */
  height: 92px;
  width: 625px;
  margin-bottom: 5px;
}

#divLinks a 
{
  text-decoration: none;
  color: Black;
}

#History 
{
  padding: 1px 6px 3px 6px;
  border-bottom: 1px solid #ABABAC;  
}

#History a 
{
  font-weight: bold;
  color: #328D36;
}

#History span
{
  color: #328D36;
}

.linksRelatedTags /* Div with related tag links */
{
  margin-left: 5px; 
}



/* 2. Styles for the header area when in single photo mode ----------------------------- */

#slideShowNavigation /* The div outside the div outside the navigator update panel */
{
  vertical-align: middle; 
  display: table-cell;   
}

#pnlNav /* Navigator toolbar (div outside the navigator update panel) */
{
  background-color: #f8f8f8;
  border: 1px #b2b2b2 solid;
  padding-top: 7px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 4px;
  white-space: nowrap;
  vertical-align: middle; 
  display: table-cell; 
  /* Tor's (old) version:
  position: absolute;
  z-index: 3; 
  margin: 43px 0px 0px 0px;

  Jason's new version: */
  max-width: 250px;
  margin: 43px 0px 0px 5px;
  position:relative; 
  bottom: 1px;
}

.ImgBtn /* Applies to the navigator button images */
{
}

#photoPos /* The span that contains the image index/count string */
{
  color: #278F42;
  font-weight: bold; 
  font-size: 120%;
  position: relative;
  top: -5px;
}


/* 3. Styles for the content area -------------------------------------------- */

#GrowPanel
{
  z-index: 99; 
}

#RightColumn #Images img 
{
  padding: 2px 2px 2px 2px;  
}

.ThumbPhoto,
.ThumbPhotoWithBorder
{
  margin: 5px 5px 5px 5px;   
}

.ThumbPhotoWithBorder,
.GrowPhotoWithBorder
{
  padding: 2px;
  border-style: solid;
  border-width: 1px;
  border-color: #999;
  cursor: pointer;
}

.GrowPhotoWithBorder
{
  padding: 1px;
}

/* Single image mode */

#slideShowImages /* The div that js code hooks into */
{
  margin-right: 10px;
  margin-top: 10px;
  min-width: 612;
  height: 320px; /* Keeps the slideShowInfo div from jumping up to the right on FireFox */
}

#slideShowImages img
{ 
  border: 1px solid #ccc;
  padding: 5px;
  margin-bottom: 10;
  position: absolute;
  float: left;
}

#slideShowInfo
{
  margin-top: 10px; 
}

#slideShowDescription 
{
  font-size: 80%;  
  background-color: #e5e5e5; 
  min-width: 612;
  min-height: 100px;
  height: 100px; /* min-height for IE6 */
  
  padding-left: 7px; 
  padding-top: 7px;
}


/* 4. Styles for the full size popup image -------------------------------------------- */

#divModal /* The div right inside the update panel for the full size image */  
{
  /*background: url(../../Images/Aug07/overlay.png);
  padding: 50px 50px 50px 50px;
  min-height:  94px;
  height: auto !important;  
  cursor: pointer;*/
}

#divModal a
{
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 90%;
  color: Blue;
  text-decoration: underline;
  cursor: pointer;
}

.BigImageBackground /* Used by the ModalPopupExtender for the full size image */
{
  FILTER: alpha(opacity=85);  
  BACKGROUND-COLOR: gray;  
  opacity: 0.85
}

#BigImageDiv img
{
  border: 1px solid black;
  background: white;
  padding: 5px;
  cursor: pointer;
}

#PopupSplashDiv
{
  color: #278F42;
  background: white;
  padding: 10px;
  width: 140px; /* For IE6 which otherwise wraps the text */
}

#PopupSplashDiv img
{
  position: relative;
  top: 2px;
}