html {
	overflow-Y: scroll;
	overflow: -moz-scrollbars-vertical;
	overflow-X: hidden;
	scroll-behavior: smooth;
}
html,body {
	margin: auto;
	width: 100%; height: 100%;
	/*
	font-family: "Open Sans", sans-serif, Arial;
	font-size: 16px; font-style: normal; font-weight: normal;
	*/
	font-family: "Helvetica Neue", Helvetica, Arial, "Open Sans", sans-serif;
	font-size: 16px; font-style: normal; font-weight: 400;
	color: rgb(36,36,36);
	/*background-color: rgb(144,144,144);*/		/* NOTE: must change background-color for #wrap_all as well */
	/*background-color: rgb(4,51,97);*/
	-webkit-font-smoothing: antialiased;
}
h1 {
	font-size: 1.5em;
	font-weight: normal;
	text-decoration: none;
	color: rgb(72,72,72);
}
h2 {
	font-size: 1.25em;
	font-weight: normal;
	font-style: italic;
	text-decoration: none;
	color: rgb(72,72,72);
}
p {
	font-size: 1em;
}
#page_title {
	margin: auto;
	padding: 25px 0px 20px 0px;
	width: 100%;
	min-width: 800px;
	background-color: white;
}
#page_title h1 {
	margin: 0px auto 0px auto;
	font-family: "Open Sans", sans-serif, Arial;
	font-size: 2em;
	font-weight: 200;
	text-align: center;
	text-decoration: none;
	color: rgb(48,48,48);
}
/*--- Fieldset, legend, select ---------------------------------------------------------------------------------------*/
fieldset {
	align: center;
	text-align: center;
	border: 0px;
	padding: auto;
	/*border: 1px solid rgb(240,240,240);*/
	height: auto;
	width: auto;
	float: none;
	display: inline-block;
	vertical-align: top;
}
legend {
	margin-bottom: 5px;
	font-size: 18px;
	color: rgb(80,80,80);
}
select {
	margin: 0px 0px 0px 0px;
	width: auto;
	padding: 6px 10px 6px 10px;
	height: auto;
	/*background: transparent;*/
	background: rgb(244,244,244);
	/*border: none;*/
	border: 1px solid rgb(180,180,180);
	border-radius: 4px;
	cursor: pointer;
	outline: 0;	/*prevents blue outline from appearing after click*/
	
	/*font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;*/
	font-family: "Helvetica Neue", Helvetica, "Open Sans", Arial, sans-serif;
	font-size: 19px;
	color: rgb(24,24,24);

	/* The following removes the dropdown arrow in Firefox*/
	/* https://gist.github.com/joaocunha/6273016/ */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-indent: 0.01px;
	text-overflow: '';
}
/*--------------------------------------------------------------------------------------------------------------------*/
#button-wrap-top {
    display: flex;
    justify-content: center;
    margin: 10px auto 38px;
    width: 100%;
    max-width: 1150px;
    min-width: 800px;
    height: 60px;
    text-align:center
}

#button-wrap {
    margin: 5px auto 10px;
    width: 100%;
    max-width: 1150px;
    min-width: 800px;
    height:50px
}

.button {
    display: inline-block;
    margin: 4px 2px;
    padding: 7px 10px;
    text-align: center;
    text-decoration: none;
    font-size: 1em;
    cursor: pointer;
    color: rgb(32, 32, 32);
    background-color: rgb(248, 248, 248);
    border: 1px solid rgb(204, 204, 204);
    border-radius: 4px;
    transition-duration: 0.4s;
    -webkit-transition-duration:0.4s
}

.button:hover {
    background-color: rgb(96, 96, 96);
    color:white
}

#varToggle {
    float: left;
    margin-left: 1em;
    margin-right: 0.5em;
    z-index:2
}

#maskToggle {
    float: left;
    z-index:2
}

#legendToggle, #linesToggle {
    float: right;
    margin-left: 0.5em;
    z-index:2
}

@media screen and (max-width: 1090px) {
    #map_container {
        height:750px
    }
}

@media screen and (max-width: 1030px) {
    #map_container {
        height:710px
    }
}

@media screen and (max-width: 990px) {
    #map_container {
        height:680px
    }
}

@media screen and (max-width: 940px) {
    #map_container {
        height:645px
    }
}

@media screen and (max-width: 900px) {
    #map_container {
        height:610px
    }
}

@media screen and (max-width: 860px) {
    #map_container {
        height: 580px
    }
}