body {
  margin: 0px;
  padding:0px;
  min-height:460px;
  min-width:460px;
  background-color:#fcfcfc;
  font-family:Verdana, Arial, Helvetica, sans-serif;
}

svg {
  position:absolute;
  overflow: hidden;
  top: 1px; left: 1px; bottom: 1px; right: 1px;
  width: 100%;
  height: 100%;
  fill:#fcfcfc;
  fill-opacity: 0.9;
}

#inner {
 width:100%;
 height: 100%;
 min-height:500px;
}

#inner2 {
 height:300px;
 border:1px solid #ccc;
 width:457px;
 float:right;
}

.compass .back {
  fill: #eee;
  fill-opacity: .8;
}

.compass .fore {
  stroke: #999;
  stroke-width: 1.5px;
}

.compass rect.back.fore {
  fill: #999;
  fill-opacity: .3;
  stroke: #eee;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

.compass .direction {
  fill: none;
}

.compass .chevron {
  fill: none;
  stroke: #999;
  stroke-width: 5px;
}

.compass .zoom .chevron {
  stroke-width: 4px;
}

.compass .active .chevron, .compass .chevron.active {
  stroke: #fff;
}

.compass.active .active .direction {
  fill: #999;
}

#tooltip {
  border: #006688 3px double;
  padding: 5px;
  visibility:hidden;
  font-size:12px; font-weight:bold;
  color: #000000;
  position: absolute;
  background-color: #ffff00;
  text-align: left;
  opacity:0.9;
  border-radius:6px;
  max-width: 300px;
  box-shadow: 0px 2px 3px rgba(0,0,0,0.7);
}

#tooltip_icon {
  float: left;
  min-height: 32px;
  padding-right: 3px;
}

.lst {
	border:1px solid #ccc;
	padding:1px;
	text-align:center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
}

.legsl {
	width:25px;
	height:10px;
	font-size:10px;
	border:1px solid #ccc;
}

.legsr {
	font-size:10px;
	height:10px;
	padding-left:5px;
}

a {
	color:#1368b3;
	text-decoration:none;
}

a:hover {
	color:maroon;
	text-decoration:none;
}

.legbox {
  border:1px solid #eee;
  border-radius: 3px;
  padding: 2px;
  margin: 1px;
  text-align: left;
}

.legtoloc {
  width: 12px;
  height: 12px;
  background-image: url(toloc.png);
  background-repeat: no-repeat;
  margin-left: 3px;
}

.hidelabel {
  cursor: pointer;
  font-weight: bold;
  padding: 2px;
  margin: 0;
  font-size: 1.1em;
}

.hidebox {
  display: block;
}

hr {
  height:1px;
  background: #9f9f9f;
  margin: 7px 0;
  border: none;
  clear: both;
  float: none;
  width: 100%;
}

#chart {
  left:3px;
  bottom:3px;
  position:absolute;
  width:400px;
  height:250px;
  font-size:12px;
  background-color:#fff;
  opacity:0.8;
  display:none;
}

#location {
  text-align:right;
  right:3px;
  bottom:1px;
  position:absolute;
  font-size:9px;
}

#info {
  right:3px;
  top:3px;
  position:absolute;
  width:160px;
  border:#ccc 1px solid;
  font-size:10px;
  opacity:0.8;
  text-align:center;
  color:#454545;
  background:white;
  padding:1px;
  border-radius:5px;
}

#info2 {
  position:absolute;
  width:160px;
  border:#ccc 1px solid;
  font-size:10px;
  opacity:0.8;
  text-align:center;
  color:#454545;
  background:white;
  padding:1px 1px 3px 1px;
  border-radius:5px;
  overflow-x: hidden;
  max-height:450px;
}

#legtitle {
  font-size:11px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-weight:bold;
}

#legsubtitle {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:10px;
}

.legrow {
  padding-bottom:1px;
  text-align:left;
  margin-left:3px;
}

.legcol {
  width:25px;
  height:10px;
  border:1px solid #ccc;
  float:left;
}

.legscale {
	width:35px;
	height:14px;
	border:1px solid #ccc;
	float:left;
	margin-top:2px;
}

.legscalelbl {
  width:37px;
  border:none;
  float:left;
  text-align:right;
}

.leglabel {
  font-size:10px;
  padding-left:35px;
  text-align:left;
}

#layerctrl {
  margin-top:3px;
  font-size:9px;
}

.layerctrlrow {
  border:1px solid #ccc;
  text-align:left;
  margin:1px 3px 1px 3px;
}

#newwlink {
  background:url(fullscreen.png) no-repeat;
  left: 3px;
  bottom: 3px;
  padding-left: 18px;
  position: absolute;
  font-size: 11px;
}