body {
  background: #fcfcfa;
      font-family: verdana;

}

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

.fill {
  fill: #fff;
  fill-opacity: 0;
}

.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}

.land {
  fill: #222;
  fill-opacity:0.2;
}

.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}  
  
.listellip {
	stroke-width:2px;
	fill-opacity:0.5;
	pointer-events:none;  
}

.geodesic {
  fill: none;
  stroke: #f00;
  stroke-width: 2px;
}

.geodesic_ex {
	fill: none;
	stroke: #ff6c6c;
	opacity: 0.3;
	stroke-width: 2px;
}

.loxodrome {
  fill: none;
  stroke: #00f;
  stroke-width: 2px;
}

.loxodrome_ex {
	fill: none;
	stroke: #6c6cff;
	opacity: 0.3;
	stroke-width: 2px;
}

.map_tag {
	/*float: left;*/
	position: relative;
	margin-right:45%;
    border: 3px solid #73AD21;
    /*max-width: 55%;*/
/* 	width: 960px; */
	height: 600px;
}

.coords_tag {
	position: absolute; 
	bottom: 10px; 
	left: 0px;
	font-size: 12px;
}

.geo_tag {
	position: absolute; 
	bottom: 40px; 
	right:10px;
	color: #f00;
	display: none;
}
.loxo_tag {
	position: absolute; 
	bottom: 10px; 
	right:10px;
	color: #00f;
	display: none;	
}


svg {
	position: absolute;
	left: 0px;
    top: 0px;
}

canvas {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: -1;
}

.text_tag {
	float: right;
	max-width:40%;
	/*max-width: 630px;*/
	margin: 0.5em;
    padding: 2em;
    font-size: 90%;
    padding-top: 0px;
    margin-top:0px;
    /*border: 3px solid #23A3F1;*/
    height: 900px;
    overflow: scroll;
}

.controls_tag {
	/*clear: right;*/
	/*width: 55%;*/
	/*border: 3px solid #F3A361;*/
	margin-right:45%;

}

h1 {
	text-align: center;
}

button {
	padding:0px;
	margin:0px;
}

th {
    text-align: left;
}