/* ------------------------------------------------------------------------
  This you can edit.
------------------------------------------------------------------------- */

  div.pictureHolder .top .left { background: url(../img/prettyphoto/tl.gif) top left no-repeat; } /* Top left corner */
  div.pictureHolder .top .middle { background: #fff; } /* Top pattern/color */
  div.pictureHolder .top .right { background: url(../img/prettyphoto/tr.gif) top left no-repeat; } /* Top right corner */
  
  div.pictureHolder .content { background-color: #fff; } /* Content background */
  div.pictureHolder .content a.next:hover { background: url(../img/prettyphoto/btnNext.gif) center right no-repeat; cursor: pointer; } /* Next button */
  div.pictureHolder .content a.previous:hover { background: url(../img/prettyphoto/btnPrevious.gif) center left no-repeat; cursor: pointer; } /* Previous button */
  div.pictureHolder .content a.expand { background: url(../img/prettyphoto/btnExpand.gif) top left no-repeat; cursor: pointer; } /* Expand button */
  div.pictureHolder .content a.expand:hover { background: url(../img/prettyphoto/btnExpand.gif) bottom left no-repeat; cursor: pointer; } /* Expand button hover */
  div.pictureHolder .content a.contract { background: url(../img/prettyphoto/btnContract.gif) top left no-repeat; cursor: pointer; } /* Contract button */
  div.pictureHolder .content a.contract:hover { background: url(../img/prettyphoto/btnContract.gif) bottom left no-repeat; cursor: pointer; } /* Contract button hover */
  div.pictureHolder .content a.close { width: 61px; height: 22px; background: url(../img/prettyphoto/btnClose.gif) center left no-repeat; cursor: pointer; } /* Close button */

  div.pictureHolder .content .details .nav a.arrow_previous { background: url(../img/prettyphoto/arrow_previous.gif) top left no-repeat; } /* The previous arrow in the bottom nav */
  div.pictureHolder .content .details .nav a.arrow_next { background: url(../img/prettyphoto/arrow_next.gif) top left no-repeat; } /* The next arrow in the bottom nav */

  div.pictureHolder .bottom .left { background: url(../img/prettyphoto/bl.gif) top left no-repeat; } /* Bottom left corner */
  div.pictureHolder .bottom .middle { background: #fff; } /* Bottom pattern/color */
  div.pictureHolder .bottom .right { background: url(../img/prettyphoto/br.gif) top left no-repeat; } /* Bottom right corner */

  div.pictureHolder .loaderIcon { background: url(../img/prettyphoto/loader.gif) center center no-repeat; } /* Loader icon */

  div.prettyPhotoTitle div.prettyPhotoTitleLeft { background: url(../img/prettyphoto/ttl.gif) top left no-repeat; }
  div.prettyPhotoTitle div.prettyPhotoTitleRight { background: url(../img/prettyphoto/ttr.gif) top left no-repeat; }
  div.prettyPhotoTitle div.prettyPhotoTitleContent { background: url(../img/prettyphoto/ttp.gif) top left repeat-x; }

/* ------------------------------------------------------------------------
  DO NOT CHANGE
------------------------------------------------------------------------- */

  div.prettyPhotoOverlay {
    background: #000;
    position: absolute; top: 0; left: 0;
    z-index: 9500;
    width: 100%;
  }
  
  div.pictureHolder {
    position: absolute; z-index: 10000;
    width: 100px;
  }
    
    div.pictureHolder .top {
      position: relative;
      height: 20px;
    }
      * html div.pictureHolder .top { padding: 0 20px; }
    
      div.pictureHolder .top .left {
        position: absolute;
        left: 0;
        width: 20px; height: 20px;
      }
      div.pictureHolder .top .middle {
        position: absolute;
        left: 20px; right: 20px;
        height: 20px;
      }
        * html div.pictureHolder .top .middle { position: static; }
      
      div.pictureHolder .top .right {
        position: absolute;
        top: 0; left: auto; right: 0;
        width: 20px; height: 20px;
      }
    
    div.pictureHolder .content {
      position: relative;
      text-align: left;
      width: 100%; height: 40px;
    }
    
      div.pictureHolder .content .details {
        display: none;
        margin: 10px 15px 0 20px;
      }
        div.pictureHolder .content .details p.description { display: none; float: left; margin: 0; }
        
        div.pictureHolder .content .details .nav {
          float: left;
          margin: 4px 0 0 0;
        }
        
          div.pictureHolder .content .details .nav p { float: left; margin: 0 4px; }
        
          div.pictureHolder .content .details .nav a.arrow_previous,
          div.pictureHolder .content .details .nav a.arrow_next {
            float: left;
            display: block;
            width: 8px; height: 9px;
            text-indent: -10000px;
            margin-top: 4px;
          }
          
          div.pictureHolder .content .details .nav a.disabled { background-position: 0 -10px; cursor: default; }
    
    div.pictureHolder .content div.hoverContainer {
      position: absolute; z-index: 10000;
      top: 0; left: 0;
      width: 100%;
    }
    
    div.pictureHolder .content a.next {
      position: relative; z-index: 2000;
      display: block; float: right;
      text-indent: -10000px;
      width: 49%; height: 100%;
      background: url(../img/prettyphoto/btnNext.gif) 10000px 50% no-repeat; /* Need to be defined that way to fix an IE bug */
    }
      
    div.pictureHolder .content a.previous {
      cursor: pointer;
      display: block;
      text-indent: -10000px;
      width: 49%; height: 100%;
      background: url(../img/prettyphoto/btnNext.gif) 10000px 50% no-repeat; /* Need to be defined that way to fix an IE bug */
      
    }
    
    div.pictureHolder .content a.expand,
    div.pictureHolder .content a.contract {
      position: absolute; z-index: 20000;
      top: 10px; right: 30px;
      cursor: pointer;
      display: none;
      text-indent: -10000px;
      width: 20px; height: 20px;  
    }
      
    div.pictureHolder .content a.close {
      float: right;
      display: block;
      text-indent: -10000px;
    }
    
    div.pictureHolder .bottom {
      position: relative;
      height: 20px;
    }
      * html div.pictureHolder .bottom { padding: 0 20px; }
      
      div.pictureHolder .bottom .left {
        position: absolute;
        left: 0;
        width: 20px; height: 20px;
      }
      div.pictureHolder .bottom .middle {
        position: absolute;
        left: 20px; right: 20px;
        height: 20px;
      }
        * html div.pictureHolder .bottom .middle { position: static; }
        
      div.pictureHolder .bottom .right {
        position: absolute;
        top: 0; left: auto; right: 0;
        width: 20px; height: 20px;
      }
    
    div.pictureHolder .loaderIcon {
      display: none;
      position: absolute;
      top: 50%; left: 50%;
      margin: -12px 0 0 -12px;
      width: 24px; height: 24px;
    }
    
    div.pictureHolder #fullResImageContainer { width: 100%; text-align: center; }
  
    div.prettyPhotoTitle {
      display: none;
      position: absolute;
      top: 0; left: 0;
      z-index: 9999;
      color: #fff; font-size: 13px;
    }
    
      div.prettyPhotoTitle div.prettyPhotoTitleLeft,
      div.prettyPhotoTitle div.prettyPhotoTitleRight { float: left; width: 19px; height: 23px; overflow: hidden; }
      
      div.prettyPhotoTitle div.prettyPhotoTitleContent { float: left; line-height: 23px; }