/*
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 : 29 Jan 2021, 11:24:21 am
    Author     : Edwin Kor
*/

.gmapcontainer {
    width: 494px;
    height: 100%;
    white-space: nowrap;
    /*background-color: black;*/
    border: 1px solid black;
    overflow-x: auto;
    overflow-y: hidden;
}
table.gmap {
    table-layout: fixed;
    word-wrap: break-word;
    width:497px;  /*31x11+13x12*/
    height:497px;
    text-align: center;
    font-size:13pt;
    border-collapse:collapse;
    border-right: 3px solid #66CC66;
    border-bottom: 3px solid #66CC66;
    border-left: 1px solid #66CC66;
    border-top: 1px solid #66CC66;
}
th, td {
      /*border: 1px solid black;*/
}
table.gmap td.horizontal {
    background-image: url('../../images/grid-horizontal.gif');
    background-repeat: repeat-x; 
    background-position: center;
    height:13px;
    width:13px;
    line-height:13px;
 }
table.gmap td.vertical {
    background-image: url('../../images/grid-vertical.gif');
    background-repeat: repeat-y; 
    background-position: center;
    height:13px;
    line-height:13px;
    z-index:0;
}
table.gmap td.crossed {
    background-image: url('../../images/grid-crossed.gif');
    background-repeat: no-repeat; 
    background-position: center;
    height:31px;/*31*/
    line-height:31px;/*31*/
    z-index:0;
}
table.gmap td.xarrow {
    height:31px;/*31*/
    width:31px;/*31*/
    line-height:31px;/*31*/
    /*border: 1px solid red;*/
}
table.gmap td.harrow {
    height:13px;
    line-height:13px;
    width:31px;/*31*/
    /*border: 1px solid green;*/
}
table.gmap td.varrow {
    height:31px;/*31*/
    line-height:31px;/*31*/
    width:13px;
    /*border: 1px solid blue;*/
}
td.wealthcode { 
    /*border-top:1px solid green;
    border-left:1px solid green;
    border-bottom:1px solid green;*/
    height:13px;
    line-height:13px;
    overflow: visible;

    background-color:white;
    color:darkgreen;
    font-size:13pt;
    font-weight:bold;
    text-align: left;
}
td.maskwealthcode { 
    /*border: 1px solid lightgreen;*/
    height:13px;
    line-height:13px;
    overflow: visible;
}
td.aabb { 
    border-top:1px solid green;
    border-left:1px solid green;
    border-bottom:1px solid green;
    height:13px;
    line-height:13px;
    background-image:url(images/aabb.gif);
    background-size:13px 11px;
    background-repeat:no-repeat;
    background-position:center;
}
.sqarearrowdiv-offset {
    /*border: 1px solid white;#73AD21;*/ 
    width: 100%;
    height: 100%;
    top: -1px;
    left: -15px;
    position: relative;
}
.horzarrowdiv-offset {
    /*border: 1px solid white;#73AD21;*/ 
    width: 100%;
    height: 100%;
    top: -1px;
    left: -13px;
    position: relative;
}
.vertarrowdiv-offset {
    /*border: 1px solid white;#73AD21;*/ 
    width: 100%;
    height: 100%;
    top: -3px;
    left: -5px;
    position: relative;
}
.sqarearrowdiv {
    /*border: 1px solid white;#73AD21;*/ 
    width: 100%;
    height: 100%;
    top: -1px;
    left: -15px;
    top: 0px;
    left: 0px;
    position: relative;
}
.horzarrowdiv {
    /*border: 1px solid white;#73AD21;*/ 
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: relative;
}
.vertarrowdiv {
    /*border: 1px solid white;#73AD21;*/ 
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: relative;
}
table.sprite {
    table-layout: fixed;
    word-wrap: break-word;
    width:131px; 
    height:274px;
    text-align: center;
    font-size:13pt;
    border-collapse:collapse;
    border-right: 3px solid #66CC66;
    border-bottom: 3px solid #66CC66;
    border-left: 1px solid #66CC66;
    border-top: 1px solid #66CC66;
    border-spacing: 1px;
    border-width: 3px;
}
table.sprite td.xarrow {
    height:31px;/*31*/
    /*line-height:31px;*31*/
    /*border: 1px solid red;*/
}
table.sprite td.harrow {
    height:13px;
    /*line-height:13px;
    border: 1px solid red;*/
}
table.sprite td.varrow {
    height:31px;
    /*line-height:13px;*/
    /*border: 1px solid red;*/
}
table.sprite td.horizontal {
    background-image: url('../../images/grid-horizontal.gif');
    background-repeat: repeat-x; 
    background-position: center;
    /*height:13px;
    width:13px;
    line-height:13px;*/
 }
table.sprite td.vertical {
    background-image: url('../../images/grid-vertical.gif');
    background-repeat: repeat-y; 
    background-position: center;
    /*height:13px;
    line-height:13px;
    z-index:0;*/
}
table.sprite td.crossed {
    background-image: url('../../images/grid-crossed67.gif');
    background-repeat: no-repeat; 
    background-position: center;
    height:31px;/*31*/
    line-height:31px;/*31*/
    z-index:0;
}
#E {
  left: 0px;
  width: 31px;
  height: 13px; 
  background: url('../../images/arrowsprites.gif') 0 -186px;
  display:block;
  margin: auto auto;
  text-align: center;
}
#W {
  left: 0px;
  width: 31px;
  height: 13px; 
  background: url('../../images/arrowsprites.gif') 0 -199px;
  display:block;
  margin: auto auto;
  text-align: center;
}
#N {
  left: 0px;
  width: 13px;
  height: 31px; 
  background: url('../../images/arrowsprites.gif') 0 -124px;
  display:block;
  margin: auto auto;
  text-align: center;
}
#S {
  left: 0px;
  width: 13px;
  height: 31px; 
  background: url('../../images/arrowsprites.gif') 0 -155px;
  display:block;
  margin: auto auto;
  text-align: center;
}
#NE {
  left: 0px;
  width: 31px;
  height: 31px; 
  background: url('../../images/arrowsprites.gif') 0 0;
  display:block;
  margin: auto auto;
  text-align: center;
}
#SE {
  left: 0px;
  width: 31px;
  height: 31px; 
  background: url('../../images/arrowsprites.gif') 0 -31px;
  display:block;
  margin: auto auto;
  text-align: center;
}
#NW {
  left: 0px;
  width: 31px;
  height: 31px; 
  background: url('../../images/arrowsprites.gif') 0 -93px;
  display:block;
  margin: auto auto;
  text-align: center;
}
#SW {
  left: 0px;
  width: 31px;
  height: 31px; 
  background: url('../../images/arrowsprites.gif') 0 -62px;
  display:block;
  margin: auto auto;
  text-align: center;
}
#Eb31 {
  left: 0px;
  width: 31px;
  height: 13px; 
  background: url('../../images/arrowsprites-black31.gif') 0 -201px;
  display:block;
  margin: auto auto;
  text-align: center;
}
#Wb31 {
  left: 0px;
  width: 31px;
  height: 13px; 
  background: url('../../images/arrowsprites-black31.gif') 0 -233px;
  display:block;
  margin: auto auto;
  text-align: center;
}
#Nb31 {
  left: 0px;
  width: 13px;
  height: 31px; 
  background: url('../../images/arrowsprites-black31.gif') -9px -128px;
  display:block;
  margin: auto auto;
  text-align: center;
}
#Sb31 {
  left: 0px;
  width: 13px;
  height: 31px; 
  background: url('../../images/arrowsprites-black31.gif') -9px -160px;
  display:block;
  margin: auto auto;
  text-align: center;
}
#NEb31 {
  left: 0px;
  width: 31px;
  height: 31px; 
  background: url('../../images/arrowsprites-black31.gif') 0 0;
  display:block;
  margin: auto auto;
  text-align: center;
}
#SEb31 {
  left: 0px;
  width: 31px;
  height: 31px; 
  background: url('../../images/arrowsprites-black31.gif') 0 -32px;
  display:block;
  margin: auto auto;
  text-align: center;
}
#SWb31 {
  left: 0px;
  width: 31px;
  height: 31px; 
  background: url('../../images/arrowsprites-black31.gif') 0 -64px;
  display:block;
  margin: auto auto;
  text-align: center;
}
#NWb31 {
  left: 0px;
  width: 31px;
  height: 31px; 
  background: url('../../images/arrowsprites-black31.gif') 0 -96px;
  display:block;
  margin: auto auto;
  text-align: center;
}
#Ea {
  left: 0px;
  width: 31px;
  height: 13px; 
  background: url('../../images/arrowsprites-ani.gif') 0 -186px;
  display:block;
  margin: auto auto;
  text-align: center;
}
#Wa {
  left: 0px;
  width: 31px;
  height: 13px; 
  background: url('../../images/arrowsprites-ani.gif') 0 -199px;
  display:block;
  margin: auto auto;
  text-align: center;
}
#Na {
  left: 0px;
  width: 13px;
  height: 31px; 
  background: url('../../images/arrowsprites-ani.gif') 0 -124px;
  display:block;
  margin: auto auto;
  text-align: center;
}
#Sa {
  left: 0px;
  width: 13px;
  height: 31px; 
  background: url('../../images/arrowsprites-ani.gif') 0 -155px;
  display:block;
  margin: auto auto;
  text-align: center;
}
#NEa {
  left: 0px;
  width: 31px;
  height: 31px; 
  background: url('../../images/arrowsprites-ani.gif') 0 0;
  display:block;
  margin: auto auto;
  text-align: center;
}
#SEa {
  left: 0px;
  width: 31px;
  height: 31px; 
  background: url('../../images/arrowsprites-ani.gif') 0 -31px;
  display:block;
  margin: auto auto;
  text-align: center;
}
#NWa {
  left: 0px;
  width: 31px;
  height: 31px; 
  background: url('../../images/arrowsprites-ani.gif') 0 -93px;
  display:block;
  margin: auto auto;
  text-align: center;
}
#SWa {
  left: 0px;
  width: 31px;
  height: 31px; 
  background: url('../../images/arrowsprites-ani.gif') 0 -62px;
  display:block;
  margin: auto auto;
  text-align: center;
}
.longCol {
    width:31px;/*31*/
}
.longRow {
    height:31px;/*31*/
    line-height:31px;/*31*/
}
.shortCol {
    width:13px;
}
.shortRow {
    height:13px;
    line-height:13px;
}
.flex {
    /*display: flex;*/
    display: inline-block;
    margin: auto;
    background-color:white;
    color:green;
    font-size:11pt;
    font-weight:bold;
    text-align: left;
}
.unhit {
    display: flex;
    display: inline-block;
    margin: auto;
    background-color:white;
    color:gray;
    font-size:11pt;
    font-weight:normal;
    text-align: left;
}
.aabbflex {
    /*display: flex;*/
    display: inline-block;
    margin: auto;
    color:green;
    font-size:11pt;
    font-weight:bold;
    text-align: left;
    background-image:url(images/aabb.gif);
    background-size:13px 13px;
    background-repeat:no-repeat;
    background-position:center;
}
table.result {
    border: 1px solid black;
    padding: 1px;
    width:272px;
}
table.result td, th {
    padding: 0 2px;
    text-align:center;
}
table.result th {
    color:darkgreen;
    font-size:13pt;
    font-weight:lighter;
}
span.result-geonum {
    font-style: italic; 
    font-weight: bold; 
    color: darkred;        
}
table.map td.rulermark {
  background-color:#33BB33;
  color: lightblue;
  font-weight: bold;
  text-align: center;
}
table.map td {
  width: 20px;
  height: 20px;
}
table.map td.horizontal {/*not working, can't load image'*/
  background: #99EE99 url(images/grid-horizontal.gif) no-repeat;
}
table.map td.vertical {
  background-image: url('images/grid-vertical.gif');
  background-repeat: no-repeat; 
  background-position: center;
}
table.map td.crossed {
  background-image: url('images/grid-crossed.gif');
  background-repeat: no-repeat; 
  background-position: center;
}