/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 05.08.2015, 17:32:11
    Author     : arudnik
*/

/*#locatorBox.loEmbedded {
  background-color: lightyellow;
   overflow: hidden; 
  position: relative;
}

#locatorBox.loEmbedded #loCRTL{
  background-color: lightseagreen;
  position: absolute;
  height: 20px;
  top: 0px;
  left: 0px;
  right: 0px;
}

#locatorBox.loEmbedded #loPIC{
  background-color: lightgreen;
  top: 20px;
  position: absolute;
  bottom: 54px;
  left: 0px;
  right: 280px;
  overflow: hidden;
}

#locatorBox.loEmbedded > #loTHUMB{
  background-color: orange;
  position: absolute;
  top: 20px;
  width: 280px;
  right: 0px;
  bottom: 54px;
}

#locatorBox.loEmbedded > #loTXT{
  background-color: darkseagreen;
  bottom: 0px;
  position: absolute;
  height: 54px;
  left: 0px;
  right: 0px;
}*/

.locatorSelect {
  display: inline;
}

.locatorSearch {
  display: inline;
  float: right;
  padding-right: 5px;
}

.locatorSearch > span {
  vertical-align: middle;
}

#loOffScreen {
  position: fixed;
  top:  -5000px;
  left: -5000px;
}

/*#loCanvas {
    top: 0px;
    bottom: 0px;
    margin: auto;
    position: absolute;
    left: 0px;
    right: 0px;
}*/

#canvasDiv {
    top: 0px;
    bottom: 0px;
    margin: auto;
    position: absolute;
    left: 0px;
    right: 0px;
    height: 531px;
    width: 708px;
}

#loCanvas {
    image-rendering: optimizeSpeed;
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: pixelated;
}

#preview {
  position: relative;
  height: 206px;
  width: 275px;
  margin-top: 5px;
}

#previewControls{
  position: relative;
  height: 25px;
  width: 275px;
  text-align: center;
  margin-top: 4px;
  font-family: Arial;
  font-size: 1.0em;
  padding-top: 2px;
}

#previewLocation{
  margin-top: 5px;
  font-family: Arial, Verdana,Helvetica, sans-serif;
  font-size: 0.8em;
  /* font-weight: bold; */
  margin-left: 2px;
}

#previewValidity {
  margin-top: 10px;
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  /* margin-bottom: 5px; */
  text-align: center;
}


#previewCanvas {
      position: absolute;
      left: 0px;
      top: 0px;
}

.expandIcon {
      position: absolute;
      right: 0px;
      top: 0px;
      cursor: pointer;
}

#previewLeft {
      position: absolute;
      left: 0px;
      top: 0px;
}

#previewRight {
      position: absolute;
      right: 0px;
      top: 0px;
}

#loCRTL {
  text-align: left;
  padding-top: 4px;
  padding-left: 5px;  
}

#loSearch {
  height:14px;
}

#loBT1, #loBT2 {
  height:20px;
}

.thumbCol {
    display: table-cell;
}

.thumbDiv {
  /* padding:3px; */
  background-color: #666;
  width: 210px;
  display: inline-block;
  /* float: left; */
  margin-bottom: 4px;
  margin-left: 4px;
  height: 100%;
  /* top: 0px; */
  position: relative;
  /* bottom: initial; */
  vertical-align: top;
  color: white;
  cursor: pointer;
}

.thumbDiv > img {
/*  background-color: #666;*/
  padding-top: 4px;
}


.tdCurrent {
  /* padding:3px; */
  background-color: #59DDFF;
  color: black;
  cursor: default;
}

.tdCurrent > img {
/*  background-color: #59DDFF;*/
  /* border: 2px solid green; */
  /* padding-top: 3px; */
}

.thumbText {
  font-size: 0.7em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  width: 204px;
  padding-bottom: 3px;
  position: relative;
  left: 3px;
  /* top: 0px; */
  /* word-wrap: break-word; */
  /* white-space: normal; */
}

.tdCurrent > .thumbText {
  /* background-color: green; */
}

#fsCover {
  /* display:none; */
  color: #000000;
  background-color: #000000;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow-y: hidden;
  opacity: 0.8;
}

.imageLoadingMessage {
  position: absolute;
  top: 0px;
  left:0px;
  right:0px;
  bottom:0px;
  width: 260px;
  height: 32px;
  margin: auto;
  color: #444;
  font-weight: bold;
  font-size: 0.8em;
  text-align: center;
  background-color: white;
  padding-top:20px;
  padding-bottom:20px;
  border: 4px black double;
}

#fsBox {
  background-color: #000;
  position: absolute;
  opacity: 1;
  /* left: 0px; */
  /* right: 0px; */
  /* top: 0px; */
  /* bottom: 0px; */
  padding: 5px;
  border: 1px solid gray;
}

#fsCanvas {
    margin: auto;
    /* position: absolute; */
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    /* display: block; */
}

#fsImage {
    margin: auto;
    /* position: absolute; */
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color: #555;
}

#fsText {
  height: 60px;
  background-color: #333;
  font-size: 0.8em;
  color: white;
  position: relative;
}

.fsTXTLeft {
  /* display: table; */
  /* position: relative; */
  /* left: 0px; */
  /* margin: inherit; */
  /* vertical-align: middle; */
  text-align: left;
  padding-top: 4px;
  padding-left: 4px;
  width: 49%;
}

.fsTXTRight{
  position: absolute;
  right: 0px;
  top: 0px;
  text-align: right;
  padding-top: 4px;
  padding-right: 4px;
  width: 49%;
}

#loTXT {
  font-size: 0.78em;
  /* font-weight: bold; */
}

.loTXTLeft {
  /* display: table; */
  /* position: relative; */
  /* left: 0px; */
  /* margin: inherit; */
  /* vertical-align: middle; */
  text-align: left;
  padding-top: 4px;
  padding-left: 4px;
}

.loTXTRight{
  position: absolute;
  right: 0px;
  top: 0px;
  text-align: right;
  padding-top: 4px;
  padding-right: 4px;
  width: 50%;
}

#fsCloseDIV {
  position:absolute;
  top: 5px;
  right: 5px;
  background-color: black;
  border: 3px solid black;
  border-radius: 0px 0px 0px 20px;
  height: 36px;
  cursor: pointer;
}

#fsPrevDIV {
  background-color: white;
  position:absolute;
  left: 15px;
  top: 40%;
  opacity: 0.6;
  border: 3px solid white;
  border-radius: 15px;
  cursor: pointer;
}

#fsNextDIV {
  background-color: white;
  position:absolute;
  right: 15px;
  top: 40%;
  opacity: 0.6;
  border: 3px solid white;
  border-radius: 15px;
  cursor: pointer;
}

.doubleColumnR {
  width: 453px;
  /* display: table; */
  border-collapse: separate;
  border-spacing: 8px;
}

.doubleColumnR > .thumbDivRow {
  display: table-row;
}

.doubleColumnR > .thumbDivRow > .thumbDiv {
  display: table-cell;
}

.singleColumnR #thumbEmpty {
  visibility: hidden;
}


#thumbEmpty {
  cursor: default;
}

.doubleColumnL{
  right: 449px;
}

.singleColumnR {
  width: 239px;
}

.singleColumnL {
  right: 235px;
}



#loSearchResults {
  position: relative;
  z-index: 501;
  float: right;
  overflow-y: scroll;
  height: 100%;
  background-color: white;
  opacity: 0.9;
  display:none;
}

#loSearchTable {
  background-color: white;
  border: 1px solid black;
  border-collapse: collapse;
}

#loSearchTable tr:hover {
  background-color: lightskyblue;
  
}

.losComp{
  border: 1px solid lightgray;
  padding: 10px;
  text-align: left;
  cursor:pointer;
}

.losName{
  border: 1px solid lightgray;
  padding: 10px;
  text-align: left;
  cursor:pointer;
}

.losEmpty {
  font-weight: bold;
  padding: 10px;
  border: 1px solid lightgray;
  background-color: white;
}

#losEmpty:hover {
  background-color: white;
}


@media screen and (min-width: 801px) { 
 
#locatorBox.loEmbedded {
  background-color: black;
  /*  background-color: lightyellow;*/
  /* overflow: hidden; */
  position: relative;
}

#locatorBox.loEmbedded #loCRTL{
  background-color: #333;/*DEBUG*/
  /* background-color: lightseagreen;*/
  position: absolute;
  height: 30px;
  top: 0px;
  left: 0px;
  color: white;
  font-size: 0.9em;
}

#locatorBox.loEmbedded #loPICouter{
  background-color: lightgreen;
  top: 30px;
  position: absolute;
  bottom: 54px !important;
  left: 0px;
  overflow: hidden;
  /* display: table; */
}

#loPICmiddle {
    margin: auto;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color: black;
      /*DEBUG*/
/*    background-color: darkorange;*/
}

#loPICinner {
    /* margin-left: auto; */
    /* margin-right: auto; */ 

    /* height: 700px; */
    background-color: mediumspringgreen;
    /* display: inline-block; */
}

#locatorBox.loEmbedded > #loTHUMB{
  background-color: #333;/*DEBUG*/
  /*  background-color: cornflowerblue;*/
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  overflow-y: scroll;
  height: auto !important;
}

#locatorBox.loEmbedded > #loTXT{
  background-color: #222;/*DEBUG*/
  /*background-color: darkseagreen;*/
  bottom: 0px !important;
  position: absolute;
  height: 54px;
  left: 0px;
  color: white;
  /* margin-top: 4px; */
}  
  
}

@media screen and (max-width: 800px) { 
 
#locatorBox.loEmbedded {
  background-color: #333;
  /*DEBUG*/
  /* background-color: lightyellow;*/
  /* overflow: hidden; */
  position: relative;
}

#locatorBox.loEmbedded #loCRTL{
  background-color: #333;/*DEBUG*/
  /* background-color: lightseagreen;*/
  position: absolute;
  height: 30px;
  top: 0px;
  left: 0px;
  right: 0px;
  color: white;
  font-size:0.9em;
}

#locatorBox.loEmbedded #loPICouter{
  background-color: lightgreen;
  top: 30px;
  position: absolute;
  /* bottom: 252px; */
  left: 0px;
  right: 0px;
  overflow: hidden;
}

#loPICmiddle {
  margin: auto;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background-color: black;
  /*DEBUG*/
  /* background-color: aquamarine;   */
}

#loPICinner {

}

#locatorBox.loEmbedded > #loTHUMB{
  background-color: #333;/*DEBUG*/
  /* background-color: orange;*/
  position: absolute;
  /* height: 194px; */
  right: 0px;
  bottom: 0px;
  left: 0px;
  width: inherit;
  overflow-x: scroll;
  /* float: left; */
  white-space: nowrap;
}

#locatorBox.loEmbedded > #loTHUMB > .thumbDivRow {
  display: inline-table;
  /* float: left; */
  /* height: 150px; */
  /* vertical-align: top; */
  margin-top: 4px;
}

#locatorBox.loEmbedded > #loTXT{
  background-color: #444;/*DEBUG*/
  /* background-color: darkseagreen;*/
  bottom: 213px;
  position: absolute;
  height: 54px;
  left: 0px;
  right: 0px;
  color: white;
}  

.thumbText {
  white-space: normal;
}

}