@font-face {
  font-family: "Lithograph";
  font-weight: bold;
  src: url(Lithograph-Bold.ttf) format("truetype");
}

html,body {
height: 98%;
width: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
color: rgb(255,255,255);
background-color: rgb(66,66,66);
}

a {color:white;text-decoration: none;}
a:hover {color: #ffcc00;text-decoration: underline;}
a.anchorPopup {color: #000 !important;text-decoration: none;}
a.anchorPopup:hover {color: blue !important;text-decoration: underline;}
div#header {
	height: auto;
	padding: 0;
	margin: 0;
}
h1#title {
	position: relative;
	top: 0.5%;
	left: 0.5%;
	width: 23%;;
	font-family: "Lithograph";
	font-size: 200%;
	color: rgb(88,88,88);
	text-shadow: .1em .1em .1em #121212;
	float: left;
}


#map {
  -o-transition-property: width, height;
  -o-transition-duration: 1s;
  -moz-transition-property: width, height;
  -moz-transition-duration: 1s;
  -webkit-transition-property: width, height;
  -webkit-transition-duration: 1s;
  transition-property: width, height;
  transition-duration: 1s;
  position: absolute;
  top: .5%;
  right: 1%;
  width: 73%;
  height: 95%;
  border: 0;
/*  margin-top: .8em !important;
  margin-right: 20em !important;
*/  padding: 0;
  z-index: 0 !important;
  border: .4em solid #aaa;
  background-color: #00506a;
  -moz-box-shadow: 1em 1em 1em #121212;
  -webkit-box-shadow: 1em 1em 1em  #121212;
  box-shadow: 1em 1em 1em #121212;
}


/*#info {float: right;}
#markers {float: left;}*/
/*#info {position: absolute;top:-4em;right:0;}*/
/*#markers {position: relative;top:-4em;right:0;}*/
#info,#markers {
padding: .3em 1em .3em 1em;
min-width: 20%;
max-width: 23%;
}
#info p,#marker p {white-space: nowrap; margin: .1em;}
#markers p,#markers h4 {line-height: .7em}

p#layers>div>span {background-color: transparent !important;}
.baseLbl,.dataLbl {font-weight: bold; text-decoration: underline; color: #ffffff !important;}

/* SVG code export window */
textarea#vectors {
	display:none;
	position:relative;
	bottom:-2em;
	left:0;
	width:100%;
	height: 20ex;
}

/* SVG styles for features. Initial styles are set up in javascript. */
circle:hover {
	fill: blue !important;
	fill-opacity: 0.6 !important;
	stroke: white !important;
	stroke-width: .5em !important;
	cursor: help !important;
}

polygon:hover {
	fill: blue !important;
	fill-opacity: 0.6 !important;
	stroke: white !important;
	stroke-width: .5em !important;
	cursor: help !important;	
}

polyline:hover{
	stroke: white !important;
	stroke-width: .5em !important;
	cursor: help !important;	
}

/* Popups */
.olPopup {
	color: #000;
}

.olPopup h2 {
	margin: .3em 0 -.5em .7em;
}

.popupFeatureList {
	margin: 0 0 1em 0;
}

.olPopupCloseBox {
	background-image: url("img/close.png");
	width: 14px !important;
	height: 14px !important;
	margin: .2em .2em 0 0 !important;
}

/* debug stuff 
div[id$="_popup_GroupDiv"] {background-color: red;}
div[id$="_popup_contentDiv"] {background-color: blue;}
.popupFeatureList {background-color: green;}
.results p {background-color: pink;}

div.ajaxResults {background-color: orange;}
div.ajaxResults p {background-color: gray;}
*/