/*******************************************************************************
 viewer
*******************************************************************************/

.viewer {
  position: relative;
  top: 0;
  left: 0;
  background-color: #434343;
  overflow: hidden;     
 
  /* NOTE: the size and width should be set dynamically when initialized */
  width: 0;
  height: 0;
}

.viewer img {
  margin: 0px;
  float: none;  
}

.viewer .well, .viewer .surface {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  /* FIXME: let's apply this in GSV.js */
  cursor: grab;
  cursor: -moz-grab;
  _cursor: url('../img/iv-grab.cur');
}

.viewer .surface {
  z-index: 20;
  /*background: url(../gfx/center.gif) no-repeat center center;*/
  _background: url('../img/iv-blank.gif') no-repeat center center; /* NOTE: required for IE to"see" the surface */
}

.viewer .well {
  overflow: hidden;
  z-index: 10;
}

.viewer .well .tile {
  border: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  display: block;
}

/*******************************************************************************
 thumbnail
*******************************************************************************/

.viewer .thumbnail {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 130px;
  height: 130px;
  margin: 0;
  font-size: 12px;
  line-height: 20px;
  vertical-align: middle;
  font-weight: bold;

  overflow: hidden; 
  z-index: 30;

  border: 4px solid #000000;
  border-radius: 5px;   
  -moz-border-radius: 5px;    
  
  opacity:0.8;
  filter:alpha(opacity=80);   
}

.viewer .thumbnail img {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 30;
  overflow: hidden;
}

.viewer .thumbnail_scale {
  position: absolute;
  bottom: -2px;
  left: 5px;  
  margin: 0;
  padding: 0px;
  z-index: 45;
  color: #FFFFFF;
}

.viewer .thumbnail_roi {
  position: absolute;
  top: 0px;
  left: 0px;  
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0px;
  border: 2px solid #FF0000;
  z-index: 40;
}

.viewer .thumbnail_roi_preview {
  position: absolute;
  top: 0px;
  left: 0px;  
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0px;
  border: 2px solid #FFFF00;
  z-index: 39;
}

.viewer .thumbnail_surface {
  position: absolute;
  top: 0px;
  left: 0px;  
  z-index: 50;
  width: 100%;
  height: 100%;  
}

/*******************************************************************************
 info
*******************************************************************************/

.viewer .info {
  position: absolute; 
  z-index: 25; 
  width: 100%;
  text-align: center; 
  left: 0px; 
  padding: 5px; 
  bottom: 0px; 
  color: #FFFFFF; 
  text-shadow: 1px 1px 1px #000000; 
  font-size: 12px;
  text-overflow: ellipsis;  
}

.viewer .osd {
  position: absolute; 
  z-index: 15; 
  width: 100%;
  height: 100%;  
  text-align: center;
  top: 0px;   
  left: 0px; 
  padding-top: 25px;
  color: #FFFFFF; 
  text-shadow: 1px 1px 1px #000000; 
  font-size: 12px;
  text-overflow: ellipsis;  
}

.flipImage {
    transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -khtml-transform: rotate(180deg);
    -ms-transform: rotate(180deg);

    /* IE8+ - must be on one line, unfortunately */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246467991473532e-16, M21=-1.2246467991473532e-16, M22=-1, SizingMethod='auto expand')";

    /* IE6 and 7 */
    filter: progid:DXImageTransform.Microsoft.Matrix(
        M11=-1,
        M12=1.2246467991473532e-16,
        M21=-1.2246467991473532e-16,
        M22=-1,
        SizingMethod='auto expand');

}