/**
  Structure of floating viewer:
  
  div.floating-viewer is outer frame containing all of the viewer in DOM. It is
  divided to div.floating-viewer-header and div.floating-viewer-body.

  div.floating-viewer-header contains buttons for controlling the viewer and
  status information. All of them are 'div' elements with class 'controls'.

  div.floating-viewer-body contains the actual area where the preview images
  are displayed.

  div.floating-viewer-arrow is an empty 'div' element which is used for
  displaying arrow shape in left of outer frame.
*/

/* Main outer frame of floating viewer */
div.floating-viewer {
  width: 255px;
  min-height: 160px;
  position: absolute;
  z-index: 5;
  background-color: #f5f5f5;
  padding: 8px;
  border: 4px solid #d8d8d8;
  
  -moz-box-shadow: 0 0 5px rgba(0,0,0,0.25);
  -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.25);
  box-shadow: 0 0 5px rgba(0,0,0,0.25);
}

/* Area where preview images are shown */
div.floating-viewer-body {
  margin-top: 8px;
}

div.floating-viewer-body .dps-viewer {
  margin: 0;
  -moz-box-shadow: 0 0 3px rgba(0,0,0,0.25);
  -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.25);
  box-shadow: 0 0 3px rgba(0,0,0,0.25);
}

div.floating-viewer-body .dps-pageFrame {
  border: none;
}

/* Arrow outside the frame */
div.floating-viewer-arrow {
  width: 25px;
  height: 35px;
  position: absolute;
}

div.floating-viewer-arrow:before {
  content:'';
  position:absolute;
  right:0;
  border-style:solid;
  border-width:17px;
  border-color:transparent #d8d8d8 transparent transparent;
}

/* Controls and buttons */
div.floating-viewer-header .controls {
  float: left;
  position:relative;
  cursor: pointer;
  height: 15px;
/*  border-bottom: 1px solid transparent; */
  background-image:none !important;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

div.previous-page {
  width:11px;
  margin-right:8px;
}

div.previous-page:before {
  content:'';
  position:absolute;
  border-style:solid;
  border-width:7px 10px 7px 0;
  border-color:transparent #595959 transparent transparent;
}

div.previous-page-hover:before {
  border-color:transparent #000 transparent transparent;
}

div.previous-page-disabled:before {
  border-color:transparent ;
  cursor: default !important;
}

div.next-page {
  width:11px;
}

div.next-page:before {
  content:'';
  position:absolute;
  border-style:solid;
  border-width:7px 0 7px 10px;
  border-color:transparent transparent transparent #595959;
}

div.next-page-hover:before {
  border-color:transparent transparent transparent #000;
}

div.next-page-disabled:before {
  border-color:transparent;
  cursor: default !important;
}

div.filter-pages {
  width: 38px;
  margin-left: 8px;
  background-position: -82px 0;
}

div.filter-pages-hover {
  background-position: -82px -36px;
}

div.filter-pages-on {
  background-position: -82px 36px !important;
}

div.filter-pages-disabled {
  background-position: -82px -18px !important;
  cursor: default !important;
}

div.page-indicator {
  margin-left: 14px;
  font-size: 11px;
  cursor: default !important;
  background-image: none !important;
}

div.footer-page-indicator {
  margin-left: 0;
  height: 15px;
}

div.zoom-floating-viewer {
   display:none;
}

div.disable-floating-viewer {
  float: right !important;
  margin-right: 0 !important;
  background-position: -40px 0 !important;
  width: 21px;
}

div.disable-floating-viewer:before,
div.disable-floating-viewer:after {
  position:absolute;
  right:5px;
  content:'';
  border:0px solid #595959;
  border-left-width:3px;
  height:14px;
}

div.disable-floating-viewer:before {
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  transform:rotate(45deg);
}

div.disable-floating-viewer:after {
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  transform:rotate(-45deg);
}

div.disable-floating-viewer-hover:before,
div.disable-floating-viewer-hover:after {
  border-color:#000;
}

/* Workaround for divs containing floats, so that container div width and
   height would be correct */
.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

/* And same for IE6 */
* html .clearfix {
  height: 1%;
  overflow: visible;
}

/* And same for IE7 */
*+html .clearfix {
  min-height: 1%;  
}

/** Duplicated from dps-main.css so that users of Floating viewer do not need
    to include it. */

.hlight0 { opacity: 0.5; filter:alpha(opacity=50); background-color: #FFFF00; }
.hlight1 { opacity: 0.5; filter:alpha(opacity=50); background-color: #00BFFF; }
.hlight2 { opacity: 0.5; filter:alpha(opacity=50); background-color: #9ACD32; }
.hlight3 { opacity: 0.5; filter:alpha(opacity=50); background-color: red; }
.hlight4 { opacity: 0.5; filter:alpha(opacity=50); background-color: orange; }
.hlight5 { opacity: 0.5; filter:alpha(opacity=50); background-color: navy; }

.dps-viewer
{
  align: left;
  text-align: left;
  margin-bottom: 5px;
}

.dps-pageFrame
{
  cursor: pointer;
  border: 1px solid silver;
  margin: 6px 1px 6px 1px;
  overflow: hidden;
}

.dps-progressBarArea
{
  width: 200px;  
  border: 1px solid gray; 
  display: none;
  position: relative;  
}

.dps-bar
{
  position: absolute; 
  top: 0;
  left: 0;
  width: 0;
  height: 20px;
  opacity: 0.8;
  filter:alpha(opacity=80);
  z-index: -1;
}

.dps-barText
{
  text-align:center;
}

.dps-progressSpinner
{
  width: 100%;
  min-height: 120px;
}

.dps-errorText
{
  top: 0;
  left: 0;
  text-align: center;
}

.dps-hliteDiv
{
  /* Work around for overflow bug in IE quirks mode */
  width: 100%;
  overflow: hidden;
}