body {
	position: fixed ;
	width: 100% ;
	margin: 0 ;
	padding: 0 ;
	height: 100% ;
	margin-left: 0 ;
	margin-right: 0 ;
	top: 0px ;
	font-family: Palatino, Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	background-color: #ffffff ;
}

nav {
	position: fixed ;
	top: 0px ;
	left: 0px ;
	height: 100px ;
	font-family: Arial ;
	
	border-bottom: 5px solid black ;
	padding-top: 4px ;
	padding-bottom: 4px ;
	margin: 0 ;
	width: 100% ;
	y-index: 1 ;
}

nav > h1 {
	width: 100% ;
	margin-left: auto ;
	margin-right: auto ;
	font-family: Palatino ;
	/* font-weight: bold ;  */
	font-size: 24pt ;
	text-align: center ;
	padding-top: 0px ;
	padding-bottom: 5px ;
	margin-top: 0px ;
	margin-bottom: 0px ;
	//border-bottom: 3px solid black ;
}

nav > h2 {
	width: 80% ;
	margin-left: auto ;
	margin-right: auto ;
	font-family: Palatino ;
	/* font-weight: bold ;  */
	font-size: 10pt ;
	font-weight: normal;
	text-align: center ;
	padding-top: 0px ;
	padding-bottom: 5px ;
	margin-top: 0px ;
	margin-bottom: 0px ;
	//border-bottom: 3px solid black ;
	
}

nav a.dialogButton {
	color: black ;
	text-decoration: none ;
}

.map {
	position: fixed ;
	top: 113px ;
	bottom: 17px ;
	width: 100% ;
}

.loading {
	position: relative ;
	width: 100% ;
	height: 100% ;
	min-width: 50px ;
	min-height: 50px ;
	z-index: 100000 ;
	background-color: rgba( 200, 200, 200, 0.5 ) ;
	text-align: center ;
	font-size: 12pt ;
}

@-moz-keyframes spin {
	from { -moz-transform: rotate(0deg); }
	to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.loading::after {
	position: absolute ;
	left: 0px ;
	width: 100%;
	height: 100% ;
	content: "";
	text-align: left ;
	vertical-align: middle ;
	background-image: url( "../images/spinner.png" ) ;
	background-repeat: no-repeat;
	background-position: center ;
	background-size: 40px 40px;
	background-color: transparent;
	animation: 1s linear infinite spin ;
	animation-timing-function: steps(12, end );
	z-index: 100 ;
}

footer {
	position: fixed ;
	bottom: 0px ;
	width: 100% ;
	height: 15px ;
	border-top: 2px solid black ;
	font-size: 12px ;
	padding-left: 5px ;
	padding-right: 5px ;
}

.GlobetrotterInset {
	position: fixed ;
	right: 20px ;
	top: 113px ;
	width: 400px ;
	height: 300px ;
	display: block ;
}

.PopulationSelectorInset {
	display: none ;
	position: fixed ;
	right: 20px ;
	bottom: 50px ;
	min-width: 250px ;
	width: 350px ;
	height: 400px ;
	border: 2px solid black ;
	border-radius: 2px ;
	background: rgba( 255, 255, 255, 0.8 ) ;
	z-index: 100000 ;
	padding: 10px ;
	padding-left, padding-right: 10px ;
}

.PopulationSelectorInset > * {
	width: 100% ;
	height: 100% ;
}

.TVDDisplay {
	position: fixed ;
/*	left: 20px ;
	top: 113px ; */
	width: 330px ;
	height: 250px ;
	left: 20px ;
	bottom: 35px ;
}

.TVDDisplay h1,
.GroupLevelTVDDisplay h1,
.TVDDisplay h2,
.GroupLevelTVDDisplay h2 {
	margin-top: 0px ;
	padding-top: 0px ;
	margin-bottom: 0px ;
	padding-bottom: 0px ;
	font-size: 16pt;
	display:block ;
	background: rgba( 255, 255, 255, 0.8 ) ;
}

.TVDDisplay h2, .GroupLevelTVDDisplay h2 {
	display: block ;
	margin-top: 0px ;
	padding-top: 0px ;
	font-size: 12pt;
}

.GroupLevelTVDDisplay {
	position: fixed ;
	/*
	left: 20px ;
	bottom: 35px ;
	*/
	right: 20px ;
	bottom: 35px ;
	min-width: 480px ;
	min-height: 250px ;
}

.GroupLevelTVDDisplay svg {
	clear:both ;
}

.TVDDisplay, .GroupLevelTVDDisplay, .GlobetrotterInset {
	pointer-events: none ;
	background: rgba( 255, 255, 255, 0.5 ) ;
	border-radius: 3px ;
	border: 3px solid rgba( 255, 255, 255, 0.8 ) ;;
	display: none ;
	padding-left: 10px ;
	padding-right: 10px ;
}

.GroupLevelTVDDisplay .options {
	pointer-events: auto ;
}

.options span {
	margin-left: 10px ;
}

svg.background {
	z-index: 1 ;
}

svg.selection1 {
	z-index: 100 ;
}

svg.selection2 {
	z-index: 200 ;
}

rect.bar {
	pointer-events: fill ;
	stroke: black ;
}

svg.blobs {
	pointer-events: none ;
	box-sizing: border-box ;
	/*border: 4px dashed black ; */
}
svg.blobs g {
	pointer-events: none ;
	cursor: auto ;
}
svg.blobs g circle {
	pointer-events: fill ;
	cursor: pointer ;
}
svg.blobs g circle.base {
	//stroke: black ;
	//fill: #808080 ;
}
svg.blobs g circle.overlay {
	pointer-events: none ;
	cursor: pointer ;
}
svg.blobs g circle.pinpoint {
	pointer-events; none ;
	cursor: pointer ;
	stroke: none ;
}
canvas {
	//border: 4px dotted black ;
	cursor: auto ;
}

.hiddenDetectCanvas {
	display: none ;
	cursor: auto ;
	pointer-events: none ;
	image-rendering: optimizeSpeed ;
}