/*
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;
    }
}