#navbar {
  overflow: hidden;
  font-family: Arial;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px; 
  border: none;
  outline: none;
  padding: 14px 16px;
//  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
  padding: 14px 16px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.imperial,
.metric,
.nautical {
	display: none;
}
#Imperial .imperial,
#Metric .metric,
#Nautical .nautical {
	display: inline;
}

#sentence {
	border: inset;
	width: 99%;
}

.arrow_box {
	visibility: hidden;
	padding: 5px;
	display: table-cell;
	position: fixed;
	background: #88b7d5;
	border: 4px solid #c2e1f5;
	white-space: pre-line;
}

.arrow_box:after,
.arrow_box:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(136, 183, 213, 0);
	border-left-color: #88b7d5;
	border-width: 30px;
	margin-top: -30px;
}

.arrow_box:before {
	border-color: rgba(194, 225, 245, 0);
	border-left-color: #c2e1f5;
	border-width: 36px;
	margin-top: -36px;
}

[name=ecefpAcc]:not(:empty)::before,
[name=ecefvAcc]:not(:empty)::before,
[name=epd]:not(:empty)::before,
[name=epx]:not(:empty)::before,
[name=epy]:not(:empty)::before,
[name=epv]:not(:empty)::before,
[name=epc]:not(:empty)::before,
[name=eps]:not(:empty)::before,
[name=ept]:not(:empty)::before {
	content: " \00b1 ";
}

#dopPlot,
#map-canvas {
	float: right;
	height: 500px;
	width: 500px;
}

#prn td,
#prn2 td {
	text-align: right;
}

#prn td:nth-child(3) {
	text-align: center
}

#tabtpv td:nth-child(1) {
	font-weight: bold;
}

#tabtpv td:nth-child(3) {
	text-align: left;
}

#tabtpv td:nth-child(5) {
	text-align: left;
}

#tabtpv td {
	text-align: right;
}

#tabtpv tbody tr:nth-child(2) {
	visibility: none;
}

#scop {
	float: left;
}

#scop path {
	stroke: rgba(255, 255, 255, 0.5);
	fill: none;
}

table {
	clear: right;
}

#arrow {
	stroke: #cb4b16;
	fill: rgba(211,54,130,0.3);
	stroke-width: 2;
}

polyline,
circle,
rect {
	stroke-width: 1
}

path.e {
	fill: none;
	stroke: #717171;
}

path.r {
	fill: none;
	stroke: #dc322f;
}

path.y {
	fill: none;
	stroke: #b58900;
}

path.g {
	fill: none;
	stroke: #859900;
}

path.b {
	fill: none;
	stroke: #2aa198;
}

g.e {
	fill: #717171;
	stroke: #717171;
}

g.r {
	fill: #dc322f;
	stroke: #dc322f;
}

g.y {
	fill: #b58900;
	stroke: #b58900;
}

g.g {
	fill: #859900;
	stroke: #859900;
}

g.b {
	fill: #2aa198;
	stroke: #2aa198;
}

g polyline,
g circle,
g rect,
g.i {
	visibility: hidden
}

g.qz polyline.qz,
g.ga polyline, 
g.bd polyline, 
g.ob polyline,
g.xx polyline,
g.gp circle,
g.sb rect,
g.gl rect {
	visibility: visible
}

#ring {
	fill-rule: evenodd;
	fill: url(#Fr);
}

stop {
	stop-opacity: 1;
	stop-color: black;
}

#dopPlot rect {
	visibility: visible
}

#spots {
	fill: none;
	stroke-width: 1px;
}

table {
	margin: 0px 15px;
}
form table {
	margin: 15px;
}

@keyframes k-vanish {
	  0% {color:rgba(220,50,47,1.0);}
	 20% {color:rgba(220,50,47,0.8);}
	 40% {color:rgba(220,50,47,0.6);}
	 60% {color:rgba(220,50,47,0.4);}
	 80% {color:rgba(220,50,47,0.2);}
	100% {color:rgba(220,50,47,0.0); display: none;}
}
@keyframes k-appear {
	  0% {color:rgba(133,153,0,0.0); display: none;}
	 20% {color:rgba(133,153,0,0.2);}
	 40% {color:rgba(133,153,0,0.4);}
	 60% {color:rgba(133,153,0,0.6);}
	 80% {color:rgba(133,153,0,0.8);}
	100% {color:rgba(133,153,0,1.0);}
}
@keyframes k-update {
	  0% {color:inherit;}
	 10% {color:rgba(38,139,210,1.0);}
	 90% {color:rgba(38,139,210,1.0);}
	100% {color:inherit;}
}
#prn .a {
	animation:k-appear 0.5s linear 0.2s 1;
}
#prn .d {
	animation:k-vanish 0.5s linear 0.2s 1;
}
#prn .u {
	animation:k-update 0.5s linear 0.2s 1;
}
#prn .n {
	display: none;
}

.Woody table {
	background-image: url("imgs/texture_orange_3556.gif");
	padding: 5px;
	clear: right;
}
body.Woody {
	background-image: url("imgs/wood-tiled.jpg");
	color: #000;
	fill: #000;
}
.Woody svg {
	color: #839496;
	fill: #fff;
}
.Woody path#scope {
	fill: #003000;
	stroke: #fff;
}
.Woody g.f polyline,
.Woody g.f circle,
.Woody g.f rect,
.Woody g.t text {
	fill: #003000
}

.Woody g.t text {
	stroke: #003000;
}

.Dark input {
	background: #073642;
	color: #fff;
}
.Dark table {
	background: #073642;
	color: #fff;
	padding: 5px;
	clear: right;
}
body.Dark {
	background: #002b36;
	color: #839496;
	fill: #839496;
	stroke: #fff;
}
.Dark path#scope {
	fill: #073642;
	stroke: #fff;
}
.Dark #ecef   th:nth-child(even),
.Dark #ecef   td:nth-child(even),
.Dark #tabep  th:nth-child(even),
.Dark #tabep  td:nth-child(even),
.Dark #tabdop th:nth-child(even),
.Dark #tabdop td:nth-child(even) {
	background: #002b36;
}
.Dark g.f polyline,
.Dark g.f circle,
.Dark g.f rect,
.Dark g.t text {
	fill: #073642;
}

.Dark g.t text {
	stroke: #073642;
}

.Gem input {
	background: #eee8d5;
	color: #000;
}
.Gem table {
	background: #eee8d5;
	color: #000;
	padding: 5px;
	clear: right;
}
body.Gem {
	background: #fdf6e3;
	color: #000;
	fill: #000;
}
.Gem path#scope {
	fill: #eee8d5;
	stroke: #000;
}
.Gem #ecef   th:nth-child(even),
.Gem #ecef   td:nth-child(even),
.Gem #tabep  th:nth-child(even),
.Gem #tabep  td:nth-child(even),
.Gem #tabdop th:nth-child(even),
.Gem #tabdop td:nth-child(even) {
	background: #fdf6e3;
}
.Gem g.f polyline,
.Gem g.f circle,
.Gem g.f rect,
.Gem g.t text {
	fill: #eee8d5;
}

.Gem g.t text {
	stroke: #eee8d5;
}

.Gem .dropdown:hover .dropdown-content {
	background: #eee8d5;
}

body {
	display: grid;
}
#navbar {
	grid-area: header;
}
#form {
	grid-area: form;
}
#skyview {
	grid-area: skyview;
}
#divtab {
	grid-area: div_tab; margin: 15px 0px;
}
#sentence {
	grid-area: json;
}
footer {
	grid-area: foot;
}
@media only screen and (min-width: 1150px) {
	body {
		grid-template-areas:
			'header header header'
			'form skyview div_tab'
			'json json json'
			'foot foot foot';
	} 
}
@media only screen and (min-width: 850px) and (max-width: 1149px) {
	body {
		grid-template-areas:
			'header header'
			'skyview div_tab'
			'form form'
			'json json'
			'foot foot';
	}
}
@media only screen and (min-width: 560px) and (max-width: 849px) {
	body {
		grid-template-areas:
			'header'
			'skyview'
			'div_tab'
			'form'
			'json'
			'foot';
	}
}
@media only screen and (min-width: 520px) and (max-width: 559px) {
	#skyview { display: none }
	body {
		grid-template-areas:
			'header'
			'div_tab'
			'form'
			'json'
			'foot';
	}
}