@charset "utf-8";
/* CSS Document */

body {
	/* background: url("../background/graph.png"); */
	background-color: #555;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0;
	margin-right: 0;
	z-index: 0;
}

img {
	border: none;
}

.canvas {
	border: none;
	width: 800px;
	height: 800px;
	background: url("../background/canvas.png") no-repeat;
	z-index: 1;
}

.gis-trax { 
	position: relative;
	top: 34px;
	left: 38px;
	z-index: 2;
}

.location {
	position: relative;
	width: 400px;
	height: 80px;
	top: 40px;
	left: 30px;
	z-index: 2;
}

.historical { 
	position: relative;
	top: 35px;
	left: 103px;
	z-index: 2;
}

.downtown {
	pointer-events: none;
	position: relative;
	top: 17px;
	left: 93px;
	z-index: 2;
}

.geo {
	opacity: 0.55;
	position: relative;
	width: 40px;
	top: -219px;
	left: 555px;
	z-index: 2;
}

.geo:hover {
	opacity: 1.0;
}

.geo2 {
	opacity: 0.55;
	position: relative;
	width: 40px;
	top: -106px;
	left: 555px;
	z-index: 2;
}

.geo2:hover {
	opacity: 1.0;
}

.wisconsin {
	opacity: 0.7;
	width: 30px;
	position: relative;
	top: -192px;
	left: 43px;
}

.wisconsin:hover {
	opacity: 1.0;
}

.wisconsin2 {
	opacity: 0.7;
	width: 30px;
	position: relative;
	top: -79px;
	left: 43px;
}

.wisconsin2:hover {
	opacity: 1.0;
}

.landsat8 {
	position: relative;
	width: 90px;
   	bottom: 840px;
   	left: 510px;
	z-index: 5;
}

.mask {
	position: relative;
	width: 450px;
	height: 50px;
	top: -138px;
	left: 93px;
	z-index: 4;
}

.right-menu {
	position: relative;
	top: -3px;
	left: 155px;
    z-index: 2;
}

.site-clip {
	opacity: .8;
    position: relative;
	top: -117px;
	left: 610px;
}

.site-clip:hover {
	opacity: 1.0;
}

.bottom-menu { 
	position: relative;
	top: -163px;
	left: 197px;
	font-family: Eras ITC, Arial, Helvetica, sans-serif;
 	font-size: 14px;
	font-weight: bold;
	color: #777;
    background-color: transparent;
    text-decoration: none;
	z-index: 5;
}

.menu-effect {
    position: relative;
    top: -179px;
    left: 245px;
    z-index: 4;
}

/* Points */
.point-control {
	position: relative;
	top: -107px;
	left: 1px;
	z-index: 3;
}

.point1 {
	position: relative;
	top: -475px;
	left: 96px;
	z-index: 3;
}

.point2 {
	position: relative;
	top: -495px;
	left: 129px;
	z-index: 3;
}

.point3 {
	position: relative;
	top: -495px;
	left: 170px;
	z-index: 3;
}

.point4 {
	position: relative;
	top: -495px;
	left: 265px;
	z-index: 3;
}

.point5 {
	position: relative;
	top: -440px;
	left: 130px;
	z-index: 3;
}
.point6 {
	position: relative;
	top: -408px;
	left: 148px;
	z-index: 3;
}

.point7 {
	position: relative;
	top: -260px;
	left: 180px;
	z-index: 3;
}

.point8 {
	position: relative;
	top: -220px;
	left: 210px;
	z-index: 3;
}

.point9 {
	position: relative;
	top: -155px;
	left: 215px;
	z-index: 3;
}

.point10 {
	position: relative;
	top: -37px;
	left: 173px;
	z-index: 3;
}

/* Sites */
.logo { 
	position: relative;
	top: 37px;
	left: 45px;
	z-index: 2;
}

.site {
	position: relative;
	width: 400px;
	height: 80px;
	top: 40px;
	left: 35px;
	z-index: 2;
}

.historical2 { 
	position: relative;
	top: 35px;
	left: 125px;
	z-index: 2;
}

.content {
	position: relative;
	top: 47px;
	left: 80px;
	z-index: 2;
}

.smooth-load {
	animation: content ease-out 1.0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
	text-align: justify;
}

@keyframes content {
 	0% {opacity: 0.0;
		}
  100% {opacity: 1.0;
		}
}

.narrative {
	position: relative;
	top: -5px;
	left: -5px;
	height: 374px;
    cursor: text;
}

.narrative2 {
	position: relative;
	top: -10px;
	left: -5px;
	height: 375px;
    cursor: text;
}

.pic1 {
	height: 165px;
}

.pic1:hover {
	box-shadow: 0px 0px 4px #777;
}

.pic2 {
	position: relative;
	top: 20px;
	height: 165px;
}

.pic2:hover {
	box-shadow: 0px 0px 4px #777;
}

.pic3 {
	position: relative;
	top: 40px;
	height: 165px;
}

.pic3:hover {
	box-shadow: 0px 0px 4px #777;
}

.satellite {
	position: relative;
	top: -2px;
	height: 165px;
}

.satellite:hover {
	box-shadow: 0px 0px 4px #777;
}

.map-clip {
    position: relative;
	opacity: 0.75;
	top: -99px;
	left: 610px;
	z-index: 5;
}

.map-clip:hover {
    opacity: 1.0;
}

.subdued {
	opacity: 1.0;
}

.subdued:hover {
	opacity: 1.0;
}

.active {
	opacity: 1.0;
}

.right-menu2 {
	position: relative;
	top: -9px;
	left: 50px;
}

.bottom-menu2 { 
	position: relative;
	top: -50px;
	left: 197px;
	font-family: Eras ITC, Arial, Helvetica, sans-serif;
 	font-size: 14px;
	font-weight: bold;
	color: #777;
    background-color: transparent;
    text-decoration: none;
	z-index: 5;
}

.menu-effect2 {
    position: relative;
    top: -66px;
    left: 220px;
    z-index: 4;
}

.menu {
	font-family: Eras ITC, Arial, Helvetica, sans-serif;
 	font-size: 14px;
	font-weight: bold;
	color: #000;
    background-color: transparent;
    text-decoration: none;
	z-index: 5;
}

.menu:link {
	color: #000;
    background-color: transparent;
    text-decoration: none;
}

.menu:hover {
    background-color: #16A13D;
}


.menu-on:link {
	color: #000;
    background-color: #F57258;
    text-decoration: none;
}

.home:link {
	position: relative;
	top: 1px;
	left: -20px;
	color: #000;
    background-color: transparent;
    text-decoration: none;
}

.on:link {
	color: #000;
    background-color: #EF7C63;
	text-decoration: none;
}

.off:link {
	color: #000;
    background-color: transparent;
	text-decoration: none;
}

/* Window Control */
.box {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background: rgba(8,0,0,0.85);
	opacity: 0.0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
	z-index: 5;
}

.box:target {
	opacity: 1.0;
	pointer-events: auto;
}

.box > div {
	width: 700px;
	position: relative;
	margin: 10% auto;
	padding: 25px 20px 20px 20px;
	border-radius: 10px;
	background: url("../background/sp.png");
	background-color: #000;
}

.history {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: -55px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background: rgba(8,0,0,0.85);
	opacity: 0.0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
	z-index: 5;
}

.history:target {
	opacity: 1.0;
	pointer-events: auto;
}

.history > div {
	width: 1000px;
	position: relative;
	margin: 10% auto;
	padding: 25px 20px 20px 20px;
	border-radius: 10px;
	background: url("../background/sp.png");
	background-color: #000;
}

/* Info Box Parameters Control */
.state {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background: rgba(0,0,0,0.85);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}
.state:target {
	opacity: 1.0;
	pointer-events: auto;
}
.state > div {
	width: 450px;
	position: relative;
	margin: 10% auto;
	padding: 10px 20px 13px 20px;
	border-width: 2px;
	border-radius: 10px;
	border-style: solid;
	background: #669966;
	background: -moz-linear-gradient(#669966, #FFF);
	background: -webkit-linear-gradient(#669966, #FFF);
	background: -o-linear-gradient(#669966, #FFF);
}

/* Info Box Text Control */
.state-head {
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 36px;
	font-weight: bold;
}

.state-subhead {
	font-size: 16px;
	font-weight: bold;
}

.state-subhead2 {
	font-size: 12px;
	font-weight: bold;
}

.state-lead {
	font-size: 13px;
	font-weight: bold;
}

.state-text {
	font-size: 13px;
}

/* Info Box Links Control */
.website:link {
	font-weight: bold;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 14px;
    color: blue;
    background-color: transparent;
    text-decoration: none;
}
.website:hover {
    color: #000;
    background-color: transparent;
    text-decoration: none;
}
.website:active {
    color: #000;
    background-color: transparent;
    text-decoration: none;
}

.usa:link {
	position: relative;
	right: -120px;
	top: 10px;
	font-weight: bold;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 13px;
    color: blue;
    background-color: transparent;
    text-decoration: none;
}
.usa:hover {
    color: #000;
    background-color: transparent;
    text-decoration: none;
}
.usa:active {
    color: #000;
    background-color: transparent;
    text-decoration: none;
}

/* X */
.close {
	background: #444;
	font-size: 17px;
	color: #FFF;
	line-height: 25px;
	position: absolute;
	right: 8px;
	text-align: center;
	top: 8px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover {
	background: #000;
}