/* 
#################################################
Default layout and styling for this page.
This is for mobile devices. 
####################################################
*/   	
.site-main {
	overflow: hidden;
}

.site-page {
	display: grid;
	grid-template-columns: 1fr;		/* One column */
	grid-template-rows: auto auto;	/* Two rows */
	grid-template-areas:   
		"nav-page"
		"map";
}


/*
#colophon {
	display: none;
}
*/

#map {
	grid-area: map;
	height: 85vh; /* This is reset by javascript */
	width: 100%;
	width: auto;
} 

/* Additional navigation is unique for this page only. */	
#nav-page {
		grid-area: nav-page; 
		margin: 0;
		padding: 0;
		background-color: #2b6777;  /* dark greenish blue */
		z-index: 1000;
		position: sticky; 
	}
	
#nav-page ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 1.1rem;
	display: flex;
	justify-content: center;
	color: white; /* DOES NOT WORK */
}
	
#nav-page a {
		margin: 0;
		padding: 0.5rem 1rem;
		text-decorationxx: none;
		colorxx: white;
}

#nav-page a:hover {
		color: #2b6777; */ /* dark greenish blue */
}

#nav-pagexxx a:focus {
		color: yellow; 
		text-decoration: underline;
}

.highlight_menu {
	color: yellow; 
	text-decoration: underline;
}

.unhighlight_menu {
	color: white; 
	text-decoration: none;
}
	
/*#nav-page ul li:focus,*/
#nav-page ul li:hover {
		text-decoration: underline;
		background-color: #ddd; /* Grayish */
		colorxx: #2b6777; /* dark greenish blue*/
}

#nav-page ul li:active {
	background-color:pink;
	color: #2b6777; /* dark greenish blue	*/
}

	
.dropdown {
	margin: 0;
	padding: 0;
}
	
.dropdown-menu {
	background-color: black;
	overflow: visible;
	display: flex;
	flex-direction: column;
	visibility: hidden;
	z-index: 900;
}
	
.dropdown:hover .dropdown-menu {
	visibility: visible;
	display: block;
}
	
#active {
	colorxx: blue;
	/*color: red;*/ /* TESTING */
}
	

#loadingScreen{
	position:absolute;
    display: table;
    left:0;
    top:100px;
    width:100%;
    height:100%;
    text-align:center;
    z-index:1000;    
	vertical-align: middle;
    background-color: #fff;        
}

.debug {
	font-weight: bold;
	font-size: 20px;
}

div.splashLoading {
    height: 170px;
    background: transparent url('../../DT_assets/images/loading.gif') no-repeat center center;
}


div.splashStatus {
    padding-top: 4px;
    font-size: 20px;
    font-weight: bold;
    line-height: 100%;
}


div.splashTop {
    font-size: 36px;
    font-weight: bold;    
    padding-top: 18px;
    padding-bottom: 4px;
    line-height: 100%;
}


.info_help_icon {
	background: url('../../DT_assets/images/help_icon.jpg') no-repeat center center;
}

/* Class def for clip-path DOES NOT WORK*/
.spyglass {
	/*clip-path: circle(200px at ${m.x}px ${m.y}px);*/
	/*clip-path: circle(200px at ${m.x}px ${m.y}px);*/
	border: 10px solid black;
}

#map_year{
	visibility: visible;
	position: absolute;
	right: 15px;
	bottom: 50px;
	z-index:1000;
	margin: 4px;
	padding: 4px;
	background-color: white;
	border: 1px solid black;
	border-radius: 4px;
}
	
#myslide_control {
	visibility: visible;
	cursor: pointer;
	z-index: 1000;
	/*value: .5; */
	width: 40%;
	position: absolute;
	left: 10px;
	bottom: 50px; 
}

/* 
##########################################################
Navigation:
Five posible link states, in order;
	:link -- before you've vivited the site
	:visited -- you're viewed the site before
	:focus -- when the element is selected
	:hover -- when you hover over it
	:active -- after the link is clicked, before the next page loads (THIS OLD AND NOT NEEDED).
############################################################*/





/* 
###########################################################
## For larger screens - Desktops
## 60rem = 960px
## This overrides any above settings.
###########################################################
*/
@media screen and (min-width: 960px) {
		
	#map {
	    height: 81vh; /* How to make auto work? */
	}
}