body { 
	max-width: 100%; width: 94%;
}
h1 {
	margin-bottom: 12px;
}
small {
	font-size: 80%;
	color: #555;
}
noscript {
	position: fixed; z-index: 101; background: rgba(0,0,0,0.7); text-align: center; padding: 40px; top: 0; left: 0; right: 0; bottom: 0; 
	font: 24px Consolas,monospace; line-height:150%; color: #e02129; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
.warning {
	color: red; font-style: italic;
}
button, input[type=checkbox] + label  {
	display:inline-block;
	border:1px solid #bbb; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;
	background: none; color: #444; font-family:inherit; font-size: 80%; text-decoration:none;
	-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
button  {
	line-height: 24px;	padding:0 7px;
}
button:disabled {
	color: #888;
}
button:hover:enabled {
	border-color: #888;
}
button:active:enabled, input[type=checkbox]:checked + label, input[type=checkbox]:active + label, input[type=checkbox] + label:active {
	-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.2); box-shadow:inset 0 3px 5px rgba(0,0,0,0.2);	
}
#bookmarkMenu button {
	float: right; clear: right;
	padding: 0 0 4px 4px; margin: 0; border: none;
	font-size: 100%; background-color: transparent; color: #BCBDC0;
}
#bookmarkMenu  button:hover {
	color: #888;
}
#bookmarkMenu button:active {
	color: #444;
	-webkit-box-shadow:none; box-shadow:none;
}

input[type=checkbox]:checked:active + label, input[type=checkbox]:checked + label:active {
	-webkit-box-shadow:inset 0 3px 6px rgba(0,0,0,0.25); box-shadow:inset 0 3px 6px rgba(0,0,0,0.25);
}
input[type=checkbox] {
	position: absolute;
	left: -999px; top: -999px;
}
input[type=checkbox] + label {
	padding: 1px 8px;	
}
input[type=checkbox] + label:hover {
	border-color: #888;
}
select {
	border: 1px solid #dcdcdc; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius: 4px;
	margin: 0px; padding: 3px 6px;
}
select:focus {
	outline: 0px none;
	border-color: #c0c0c0;
	-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(192, 192, 192, 0.6);
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(192, 192, 192, 0.6);
}
.primary {
	background-color: #e02129; color: white; border-color: #d01119;
}
#requestSelector {
	float: right; width: 24em; margin-left: 6px; 
}
.CodeMirror { 
	font-family: Consolas,monospace; border: 1px solid #E8E9EA; border-top: 0;
}
.CodeMirror-foldmarker {
	font-family: Arial; color: #00ACCD; line-height: .3; cursor: pointer;
	text-shadow: #BCBDC0 1px 1px 1px, #BCBDC0 -1px -1px 1px, #BCBDC0 1px -1px 1px, #BCBDC0 -1px 1px 1px;
}
.CodeMirror-foldgutter {
	width: .7em;
}
.CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded {
	color: #555; cursor: pointer;
}
.CodeMirror-foldgutter-open:after {
	content: "\25BE";
}
.CodeMirror-foldgutter-folded:after {
	content: "\25B8";
}
	  
#requestHeaderEditorPanel .CodeMirror {
	height: 5em;
}
#requestEditorPanel .CodeMirror, #requestSelector {
	height: 22em;
}
#responseHeaderEditorPanel .CodeMirror {
	height: 10em; background-color: #fbfbfb;
}
#responseEditorPanel .CodeMirror {
	height: 22em; background-color: #fbfbfb;
}
#responseSpinner {
	display:inline; vertical-align: text-top;
}
#responseSpinner.hidden {
	display:none;
}
.panel {
	margin-bottom: 1em; 
}
.bar {
	padding: 4px 8px 4px 8px; overflow: hidden; 
	-moz-border-radius:6px 6px 0 0; -webkit-border-radius:6px 6px 0 0; border-radius: 6px 6px 0 0; 
	color: black;  background-color: #E8E9EA;
}
.bar > span {
	vertical-align: middle;
}
.bar > span i.fa {
	color: #444;
}
.right { 
	float: right;
}
.gap {
	margin-left: 0.75em;
}
.hidden {
	display: none!important;
}
.customHeader + label > i.fa {
	color: #e02129;
}
#mapThumbnail {
	height: 1.25em; width: 1.25em; display: inline; vertical-align: text-bottom; border:solid 1px #ffffff; 
	-moz-border-radius:3px; -webkit-border-radius:3px; border-radius: 3px; 
}
div.malformed .CodeMirror-gutters  {
	-moz-box-shadow: 0 0 16px 4px red; -webkit-box-shadow: 0 0 16px 4px red; box-shadow: 0 0 16px 4px red;
}
#mapImage {
	width: 0; height: 0; position: fixed; overflow: hidden; left: 0; top: 0; z-index: 9999; text-align: center; background: rgba(0,0,0,0.0);
	-moz-transition: background .25s ease-in-out; -webkit-transition: background .25s ease-in-out; -ms-transition: background .25s ease-in-out; transition: background .25s ease-in-out;
}
#mapImage img {
	opacity: 0; background: #ffffff; margin-top: 60px; border: solid 10px #ffffff; max-width: 95%;
	-moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; 
	-ms-box-shadow: 0px 0px 10px #000000; -moz-box-shadow: 0px 0px 10px #000000; -webkit-box-shadow: 0px 0px 10px #000000; box-shadow: 0px 0px 10px #000000;	
	-moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; -ms-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out;
}
#mapImage:target {
	width: auto; height: auto; bottom: 0; right: 0; background: rgba(0,0,0,0.2);
}
#mapImage:target img {
	opacity: 1;
}

.tabbedPane  > input[type=radio] {
    position: absolute; left:-100px; top:-100px;
}
.tabbedPane  > input[type=radio] + label {
	display: inline-block; padding: 5px 8px 5px 8px; 
	font-size: 80%;
	border: 1px solid #E8E9EA; border-bottom: 0;
	-moz-border-radius:6px 6px 0 0; -webkit-border-radius:6px 6px 0 0; border-radius: 6px 6px 0 0; 
	background-color: #E8E9EA; color: #444;
}
.tabbedPane > input[type=radio]:checked + label {
	background-color: white; color: black;
	border-bottom: 1px solid white;
	margin-bottom: -1px;
}
.tabbedPane > input[type=radio]:not(:checked):hover + label {
	background-color: #F8F9FA;
}
.tabbedPane > input[type=radio]:focus + label {
	-webkit-box-shadow: 0 -3px 3px rgba(0,0,0,0.1); box-shadow: 0 -3px 3px rgba(0,0,0,0.1);		
}
.tabbedPane > div {
	border: 1px solid #E8E9EA;
	padding: 0;
	height: 100%;
	overflow-y: auto;
	display: none;
}
#sampleRequestTab:checked ~ #sampleRequests, #historicRequestTab:checked ~ #historicRequests, #bookmarkRequestTab:checked ~ #bookmarkRequests  {
	display: block;
}
#requestSelector ul {
	padding: 6px;
}
#requestSelector ul > li {
	list-style: none;
	-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
	border-bottom: 1px dotted #E8E9EA;
	padding: 2px;
	cursor: pointer;
}
#requestSelector ul > li:first-child {
	border-top: 1px dotted #E8E9EA;
}
#requestSelector ul > li:hover {
	color: #E02129;
	background: #E8E9EA; 
}
#requestSelector ul > li:active {
	-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.2); box-shadow:inset 0 0 3px rgba(0,0,0,0.2);	
}
#requestSelector ul > li > img {
	width: 1em; display: inline; vertical-align: middle;
}

#mapFrame {
	z-index: 9998; position: fixed; left:50%; top: 50%; padding: 0; margin: 0; box-shadow: 0 0 5px black; font-size: 0;
}
#mapFrame.wait * {
	cursor: wait;
}
#mapFrame canvas {
	background-color: #eee;
}
#mapAnchor {
	position: relative; overflow: hidden; line-height: 0;
}
#rendering {
	position: absolute; left: 5px; top: 5px; bottom: 5px; background-color: rgba(255, 255, 255, 0.8);  border: 1px solid #BBB;
	line-height: 120%;
	border-radius: 5px; padding: .5em;  font-size: 15px; width: 22em; vertical-align: bottom; 
}
#rendering fieldset {
	position: absolute; left: 5px; top: 5px; bottom: 40px; right: 5px; 
}
#rendering > label {
	display: inline-block; margin-right: .5em; position: absolute; bottom: 5px;
}
#geoSelect {
	height: 100%; overflow: auto; font-size: 15px; font-weight:300; font-family: "Arial Narrow", "Arial", sans-serif; font-stretch: condensed
}
#geoSelect .innerNode > .innerNode {
	padding-left: 1em;
}
#geoSelect .innerNode > label + label {
	padding-left: 1em;
}

#geoSelect .innerNode > label:first-child:before {
	display:inline-block;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	content: "\f0d7";
	width: 1em;
}

#geoSelect .innerNode > label.collapsed:before {
	content: "\f0da";
}

#geoSelect .innerNode > label.collapsed ~ * { /* I like CSS */
	display: none;
}
#geoSelect .innerNode a {
	margin-left: .5em;
	font-size: 100%;
}
#geoSelect .innerNode.deactivated i.fa-check-square-o {
	display: none;
}
#geoSelect .innerNode.deactivated i.fa-square-o {
	display: inline-block;
}
#geoSelect .innerNode i.fa-square-o {
	display: none;
}
#geoSelect .innerNode.deactivated label {
	color: #888;
}

#geoSelect label  {
	display: block; white-space: nowrap; color: black; cursor: pointer; vertical-align: middle; padding: 3px 0;
}
#geoSelect  i {
	padding-right: .25em;
}
#geoSelect label:hover 	{
	background-color: #eee;
}
#geoSelect label:active 	{
	text-shadow: 0 0 2px #aaa;
}
#geoSelect label > input  {
	display: none;
}
#mapFrame a {
	display: inline-block; cursor: pointer; color: #fff; text-shadow: 0 0 2px black; 
	font-size: 25px; user-select: none; text-align: center;
}
#mapFrame a:hover {
	color: #ddd;
}
#mapFrame a:active {
	color: #ccc; 
}
#openoptions {
	position: absolute; left: 5px; top: 5px;
}
#mapclose {
	position: absolute; right: 5px; top: 5px;
}