#map,
body,
html{
    height: 100%;
    width: 100%;
    min-width: 800px;
	min-height: 460px;
    margin: 0;
}

#WelcomeBox1,
#WelcomeBox2,
#WelcomeBox3,
#WelcomeBox4{
	display: none;
	position: fixed;
	width: 450px;
	height: 200px;
	background: #262721;
	z-index: 1001;
	padding: 0 5px 0 10px;
	word-wrap: break-word;
	font-family: Calibri, serif;
	font-size: 16px;
	text-align: left;
	text-shadow: 2px 2px #000000;
	color: #ffffff;
    border-radius: 4px;
}

#WelcomeBox2:before,
#WelcomeBox3:before,
#WelcomeBox4:before{
	content: "";
    position: absolute;
    height: 0;
    width: 0;
	border-width: 25px;
	border-style: solid;
}

#WelcomeBox1{
	top: 50%;
	left: 50%;
	margin-left: -225px;
	margin-top: -100px;
}

#WelcomeBox2{
	top: 170px;
	left: 85px;
}

#WelcomeBox2:before{
    top: 10px;
    left: -49px;
    border-color: transparent #262721 transparent transparent;
}

#WelcomeBox3{
	top: 145px;
	right: 360px;
}

#WelcomeBox3:before{
    top: 10px;
    right: -49px;
    border-color: transparent transparent transparent #262721;
}

#WelcomeBox4{
	bottom: 85px;
	right: 5px;
}

#WelcomeBox4:before{
    bottom: -49px;
    right: 10px;
    border-color: #262721 transparent transparent transparent;
}

.WelcomeHeader{
	margin: 5px 0 -17px 0;
	font-weight: bold;
	font-size: 20px;
}

.BoxClose{
	position: relative;
	float: right;
	top: 5px;
	right: 10px;
	height: 20px;
	width: auto;
	z-index: 1002;
	line-height: 20px;
	color: #ffffff;
}

#CloseFont{
	line-height: 20px; 
	color: #928e8d;
}

#FontX{
	font-size: 20px;
	vertical-align: bottom;
}

.ButtonHolder{
	display: block;
	position: absolute;
	bottom: 5px;
	right: 10px;
	height: 30px;
	width: 160px;
}

.PreviousButton,
.NextButton{
	display: block;
	position: relative;
	float: right;
	height: 30px;
	width: 80px;
	z-index: 1002;
	background: #141414;
	text-align: center;
	color: #D1D0CE;
	border: 2px solid #000;
}

.PreviousButton{
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.NextButton{
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.PreviousButton:hover,
.NextButton:hover{
	color: #fff;
}

.Link{
	color: #79BAEC;
	text-decoration: none;
}

#Banner{
	position: fixed;
	background: rgba(0,0,0,0.75);
	border-bottom: 4px solid #000;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.75);
	top: 0;
	line-height: 75px;
	width: 100%;
	height: 75px;
	z-index: 100;
	font-family: Calibri, serif;
	font-size: 32px;
	text-align: center;
	color: #ffffff;
	text-shadow: 4px 4px #000000;
}

#Logo{
	position: fixed;
	top: 5px;
	left: 20px;
	height: 125px;
	width: 125px;
	border-radius: 63px;
	background: url("../images/GTAC_Logox.png") no-repeat;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.75);
	z-index: 101;
}

#Logo2{
	position: fixed;
	top: 0;
	left: 150px;
	height: 70px;
	width: 235px;
	background: url("../images/Terrestrial.png") no-repeat;
	z-index: 101;
}

#BannerClassification{
	position: fixed;
	top: 5px;
	right: 20px;
	font-family: Calibri, serif;
	font-size: 20px;
	font-weight: bold;
	color: green;
	text-align: right;
	z-index: 101;
	text-shadow: 2px 2px #000000;
}

#BottomClassification{
	position: fixed;
	width: 100%;
	bottom: 5px;
	font-family: Calibri, serif;
	font-size: 20px;
	font-weight: bold;
	color: green;
	text-align: center;
	z-index: 101;
	text-shadow: 2px 2px #000000;
}

#NorthArrow{
	position: fixed;
	text-align: center;
	top: 127px;
	right: 265px;
	height: 100px;
	width: 60px;
	color: #fff;
	z-index: 101;
}

#NorthArrow:before{
	-webkit-transform: skew(0deg, -45deg);
	-moz-transform: skew(0deg, -45deg);
	-ms-transform: skew(0deg, -45deg);
	transform: skew(0deg, -45deg);
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 26px;
	background: rgba(0,0,0,0.75);
	z-index: 101;
	border: 4px solid #000;
	border-right: 0;
}
   
#NorthArrow:after{
	-webkit-transform: skew(0deg, 45deg);
	-moz-transform: skew(0deg, 45deg);
	-ms-transform: skew(0deg, 45deg);
	transform: skew(0deg, 45deg);
   	content: '';
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 26px;
	background: rgba(0,0,0,0.75);
	z-index: 101;
	border: 4px solid #000;
	border-left: 0;
}

#ArrowLetter{
	position: fixed;
 	text-align: center;
   	top: 127px;
	right: 265px;
 	height: 100px;
 	width: 60px;
 	line-height: 100px;
 	font-family: Calibri, serif;
	font-size: 48px;
	color: #fff;
	z-index: 101;
}

#DataNotes{
	position: fixed;
	height: 70px; 
	width: 250px;
	top: 5px;
	right: 256px;
	font-family: Calibri, serif;
	font-size: 16px;
	color: red;
	text-align: left;
	z-index: 101;
	text-shadow: 2px 2px #000000;
	word-wrap: break-word;

}

#AnalyticalNotes{
	height: auto; 
	width: 305px;
	position: fixed;
	top: 280px;
	right: 20px;
	font-family: Calibri, serif;
	font-size: 20px;
	color: #fff;
	text-align: left;
	z-index: 101;
	text-shadow: 2px 2px #000000;
	word-wrap: break-word;
	background: rgba(0,0,0,0.75);
	border: 4px solid #000;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.75);
	padding: 5px;
}

/*Leaflet Styling*/

.leaflet-control-attribution{
	display: none;
}

.leaflet-right .leaflet-control{
	margin-right: 20px;
}

.leaflet-bar a:last-child{
	border-bottom: 2px solid #000;
}

.leaflet-bar a,
.leaflet-bar a:hover{
	background-color: rgba(0,0,0,0.75);
	border: 2px solid #000;
}

.leaflet-bar{
	box-shadow: 5px 5px 5px rgba(0,0,0,0.75);
}

.leaflet-bar a{
	color: #B0B0B0;
}

.leaflet-bar a:hover{
	color: #fff;
}

.leaflet-bar a.leaflet-disabled{
	background-color: rgba(0,0,0,0.75);
	color: #404040;
}

.leaflet-container a{
	color: #B0B0B0;
	background-color: rgba(0,0,0,0.75);
}

.leaflet-container a:hover{
	color: #fff;
}
.leaflet-top .leaflet-control{
	margin-top: 0;
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out{
	box-shadow: none;
}

.leaflet-control-layers{
	box-shadow: 5px 5px 5px rgba(0,0,0,0.75);
	background: rgba(0,0,0,0.75);
}

.leaflet-control-defaultextent-toggle{
	background: rgba(0,0,0,0.75) url('images/leaflet.defaultextent.png') -2px -3px !important;
}

.leaflet-control-layers label{
	color: #fff;
}

.leaflet-control-zoom{
	top: 171px;
}

@media screen and (max-width: 1375px){
	#Banner{
		text-align: left;
		padding-left: 155px;
	}
	
	#Logo2{
		display: none;
	}
}

@media screen and (max-width: 1015px){
	#DataNotes{
		width: 150px;
		font-size: 12px;
	}
	
	#Logo2{
		display: none;
	}
}

@media screen and (max-width: 915px){
	#DataNotes{
		display: none;
	}
	.leaflet-bar-timecontrol{
		bottom: -15px;
		left: 0;
	}
}

@media screen and (max-width: 800px){
	#BannerClassification{
		display: none;
	}
	#NorthArrow{
		display: none;
	}
	#ArrowLetter{
		display: none;
	}
	#AnalyticalNotes{
		width: 231px;
		font-size: 12px;
	}
}