/*
#08090A - smoky black
#F4F7F5 - cultured [white]
#0D3B66 - dark midnight blue


#C5050C - Red (UW-Madison)
#0479A8- Blue(UW-Madison)
#282728 - Dark Grey (UW-Madison)

From AP Catalog:
$fontFamily-body: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;


*/

/* No search */

body {
        padding: 0;
        margin: 0;
}

#twnrngdir{
	display: flex;
	width: calc(100% - 30px);
}

/* Dropdown menu styling */

#header {
	position: absolute;
	top: 0;
	width: 100%;
	background-color: #282728;
	color: #F4F7F5;
	text-align: right;
	padding-bottom: 1px;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #c5050c;
}

#headerContent {
	float: left;
	z-index: 999;

}

#ui-id-1-menu{
	z-index: 5;
	position: relative;
}

#title {
	position: absolute;
	top: 10%;
	font-family: "Red Hat Display",sans-serif;
	font-weight: 900;
	font-size: 2em;
	line-height: 1em;
	text-transform: uppercase;

	left: 0px;
	padding: 10px 20px;
}

.scologo {
	margin: 10px 10px 0 0;
}

#menuToggle {

	display: none;
	position: absolute;
	left: 15px;
	bottom: 5vh;
	font-weight: 700;
	color: #F4F7F5;
	padding: 4px 7px;
	background-color: #C5050C;
	border: 2px solid #F4F7F5;

	z-index: 101;
}
#menuToggle:hover {
	cursor: pointer;
}
#menuToggle .left-arrow-icon {
	display: none;
	margin-bottom:2px;
}

#menuToggle .bars-icon {
	margin-bottom:2px;
}

#header ul {
	cursor: default;
	position: absolute;
	right: 81px;
	margin: 0;
	padding: 0;
	list-style-type: none;
	margin: 5px 10px 0 0;
	font-family: "Open Sans",sans-serif;
	font-weight: 400;
	font-size: 1em;
}
#header ul li {
	display: inline-block;
	margin-top: 4px;
    margin-right: 10px;
    margin-bottom: 4px;
	margin-left: 10px;
	top: 50%;
	transform: translateY(-50%);
}
#header ul li:hover {
	cursor: pointer;
	border-bottom: 3px solid #F4F7F5;
}
#header .leaflet-control {
	margin: 10px 0px 0px 10px;
	font: 12px/1.5 "Helvetica Neue",Arial,Helvetica,sans-serif;
}
#infoModal {
	display: none;
	position: absolute;
	/* top: calc(85px + (100% - 85px) / 10); */
	top: 15vh;
	left: 15%;
	color: #08090A;
	background-color: #F4F7F5;
	width: 70%;
	/* height: calc(8 * (100% - 85px) / 10); */
	height: 75vh;
	z-index: 1000003; /* CARTO logo z-index is 999,999 */
	padding:0.5%;
}
#infoModal h3 {
	position: absolute;
	top: 15px;
	left: 15px;
	margin: 0;
	font-family: "Open Sans",sans-serif;
	font-weight: 700;
	font-size: 1.75em;
	line-height: 1em;
}
#infoModal .times-icon {
	position: absolute;
	right: 15px;
	top: 15px;
}
#infoModal .times-icon:hover {
	cursor: pointer;
}
#modalBkgd {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(8,9,10,0.7);
	z-index: 1000002; /* CARTO logo z-index is 999,999 */
}
#modalContent {
	margin-left: 15px;
	margin-top: 60px;
	max-width: calc(100% - 30px);
	max-height: calc(100% - 75px);
	overflow: auto;
}
#modalContent img {
	width: calc(100% - 4px);
	height: auto;
	max-width: 288px;
	margin: 10px 0;
	/* float: left; */
	border: 2px solid #08090A;
}
#modalContent div {
	position: relative;
	width: 100%;
	float: left;
	clear: both;

}
#modalContent p {
	margin: 0;
	padding: 10px 0;
	font-family: "Open Sans",sans-serif;
	font-weight: 400;
	font-size: 1em;
}
#modalContent strong {
	margin: 0;
	padding: 10px 0;
	font-family: "Open Sans",sans-serif;
	font-weight: 800;
	font-size: 1em;
}

#modalContent p.help {
	position: absolute;
    top: 50%;
    left: 302px;
    transform: translateY(-50%);
}
#modalContent .inlineSelect {
	margin-left: 25px;
	font-family: "Open Sans",sans-serif;
    font-weight: 700;
    font-size: 1em;
    line-height: 1em;
}
#modalContent .inlineSelect select {
	border: none;
    background-color: #F4F7F5;
    font-size: 1.25em;
    text-decoration: underline;
    font-weight: 700;

}

#modalContent form {
	font-family: "Open Sans",sans-serif;
    font-weight: 400;
    font-size: 1em;
    line-height: 1em;
}
#modalContent a {
	color: #0D3B66;
	text-decoration: underline;
}
#modalContent a:hover {
	cursor: pointer;
}
#modalContent form textarea {
	width: calc(100% - 6px);
	max-width: 500px;
	font-family: "Open Sans",sans-serif;
    font-weight: 400;
    font-size: 1em;
    line-height: 1em;
}
#modalContent form input[type="submit"] {
	font-family: "Open Sans",sans-serif;
	font-weight: 800;
	padding: 0 10px 3px 10px;
	background-color: #0D3B66;
	color: #F4F7F5;
	border: 2px solid #08090A;
	border-radius: 15px;
}
#modalContent form input[type="submit"]:hover {
	cursor: pointer;
}



#sco-logo{
	left:18%;
	margin-top:-14%;
	float:left;
}

@media screen and (max-width: 1200px) {
    #infoModal {
		/* top: calc(10% + 87px / 2); */
		top: 15vh;
		left: 10%;
		width: 80%;
		/* height: 80%; */
		height: 75vh;
	}
}

@media screen and (max-width: 875px) {
	#title {

		margin-top: 5px;
		font-size: 1.5em;
		bottom: 80%;
		top: 0;
    }
    #header ul {
    	margin-top: 5px;
    	margin-left: calc((100% - 180px - 175px - 81px) / 2 );
    }
    #header ul li {
    	margin: 4px 3.5px;
    }
    #modalContent div.centeredimage {
    	text-align: center;
    }
    #modalContent img {
    	float: none;
    	margin-bottom: 0px;
		padding-top: 0px;
    }
    #modalContent p.help {
    	position: static;
    	transform: initial;
    	clear: both;
    	padding-top: 0px;
    }
}

   /* Sniffing for IE10+, some specific CSS to improve display w/n help contact/about modals */
@media screen and (max-width: 875px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   #modalContent img {
	   	float: none;
	   	margin-bottom: 30px;
	}
    #modalContent p.help {
    	padding-top: 10px;
	}
}

@media screen and (max-width: 600px) {
	
    /* Adjust the map height to cover the old space for the header */
    #map{
        height: 100% !important;
        top:0;
        margin-top: 0;
    }
    
    #header {
		display: none;
		position: fixed;
		height: 100vh;
		padding-bottom: 0px;
		z-index: 1000000; /* CARTO logo z-index is 999,999 */
	}
	#headerContent {
		position: absolute;
		width: 100%;
		bottom: 0;
		top: 35%;
		z-index: 999;
	}
	#title {
		right: 0;
		display: inline-flex;
    	align-items: center;
    	justify-content: center;
		/* padding: 15px calc((100% - 190px - 20px) / 2); */
		border-bottom: 3px double #C5050C;
		font-size: 2em;
        text-align: center;
    }
    #header .scologo {
    	display: none;
    }
	#ui-id-1-button {
		width: 92vw !important;
	}
	#ui-id-2-button {
		width: 37vw !important;
	}
	#ui-id-3-button {
		width: 30vw !important;
	}
	#ui-id-4-button {
		width: 20vw !important;
	}

    #menuToggle {
		display: block;
		position: fixed;
    }
    #header ul {
    	position: static;
    	margin: 0px 10px;
    }
    #header ul li {
    	display: block;
    	margin: 10px 5px;
    	padding: 5px 0;
    	font-size: 1.25em;
    	border-bottom: 1px solid #F4F7F5;
    }
    #header ul li:hover {
    	border-bottom: 1px solid #F4F7F5;
    }
    #infoModal {
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	position: fixed;
	}
	#modalContent {
		height: calc(100% - 50px - 32px - 25px);
	}
	#infoModal .times-icon {
		width: 26px;
		right: 15px;
		top: 15px;
	}
	#modalContent form input[type="submit"] {
		bottom: 15px;
		right: 15px;
	}
}
   /* Sniffing for IE10+, some specific CSS to improve display w/n help contact/about modals */
@media screen and (max-width:600px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	#infoModal .times-icon {
	    width: 26px;
	    left: auto;
	    bottom: auto;
	}
}