/* Base positional styling */
body {
	background:var(--background-color);
	color:var(--text-color);
	font-family: Arial; 
	margin: 8px auto;
	min-height: calc(100vh - 16px);
	width: calc(100vw - 16px);
	font-size: calc(15px + 0.390625vw); /* dynamic sizing at all sizes */
    overflow-x: hidden;/* prevent sideways scrolling */
	max-width: calc(550px + 15vw);
}

body > div { 
	width: calc(100vw - 16px);
	background:var(--background-color);
	max-width: calc(550px + 15vw);
	padding:4px 0; 
	z-index: 9;
}

#nav-head { 
	top: 0;
	display:none;
	grid-template-columns: repeat(3, 64px); 
	grid-template-rows: auto;
	gap: 4px;
	justify-items: start; 
	align-items: end;
	justify-content: space-between;
}

body > div.content { 
	display:none;
	position:relative;
	min-height:calc(100vh - 16px - 75px);
	margin-top: 56px;
	padding-bottom:64px !important;
	font-size:1.2em;
}

#nav-head,
#footer {
	position: fixed;
	background-color:var(--background-nav);
	z-index: 10;
}

#footer {
	bottom:0;
	display:grid;
	grid-template-columns: auto auto 1fr;
	column-gap: 1%;
	font-size:var(--font-size-070);
	color: var(--text-color);
	border-top: 1px solid var(--site-border-color);
	visibility:hidden;
}

/* BEGIN - Footer */
.connection-status { justify-self: begin; }
/* .location-status a { color: var(--link-color); text-decoration: none;} */
.location-status i { padding: 0 0.25em; }
#locationState span { pointer-events: auto; cursor:pointer; color:var(--link-color); }
/* END - Footer */

@media only screen and (max-width: 560px) {
	/* 320px is the smallest viewport that needs supporting
	/*@560: 15 + 2.1875 = 17.1875 across 560 gives factor */
	body { 
/* 		font-size:calc(3px + 2.5334821429vw); */
		font-size:calc(4px + 2.3549107143vw);  /* holds 320px width */
/* 		font-size:calc(5px + 2.1763392857vw); */
	}
}

@media only screen and (min-width: 660px) {
	body::before {
		content: ' ';
		display: block;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0.25;

		background-image: url("background-001.jpg");
		background-attachment: fixed;
		background-size: cover;
		background-repeat: no-repeat;
		background-color: var(--background-color); 
	}
	body > div { 
		max-width: calc(550px + 10vw);
		padding: 4px 2.5vw; 
		border-left: 1px solid var(--site-border-color);
		border-right: 1px solid var(--site-border-color);
	}
	body > div#footer { 
		border-left: 1px solid var(--background-color);
		border-right: 1px solid var(--background-color);
	}
}

/* BEGIN - Notification overlay */
#app-notification {
	z-index: 100000;
	position: fixed;
	top: 0;
	margin-top: 64px;
	background: var(--notification-box-background);
	border: 0.125em solid var(--notification-box-font);
	max-width: calc(550px + 10vw - 0.25em);
	border-radius: 0.25em;
	color: var(--notification-box-font);
	text-align:center;
}

#app-notification.notice { border-color: var(--notification-box-border-notification); }
#app-notification.warning { border-color: var(--notification-box-border-warning); }
#app-notification.error { border-color: var(--notification-box-border-error); }
/* END - Notification overlay */

/* BEGIN - Messages */
.messages {	width: 100%; }
.messages div { padding:5px; margin: 5px auto; text-align: center;}
/* .messages .notification { color: #000000; background-color: var(--text-color); border: 1px solid var(--text-color);} */
.messages .error 		{ color: #ee0000; background-color: #FFeeee; border: 1px solid #ee0000; font-size: 1.1em; font-weight: bold;}
.messages .success 		{ color: #33a611; background-color: #f8f8f8; border: 1px solid #88d088; font-size: 1.1em; font-weight: bold;}
/* END - Messages */



@media only screen and (min-width: 1300px) {
	/* widen the layout and align left for browsers */
	body.browser-app {
		display: grid;
		grid-gap: 1em;
		grid-template-columns: 324px 1fr;/* 325 / 975 */
		grid-template-rows: auto auto;
		margin:0.5em;
		width: calc(100vw - 1em);
		max-width:unset;
	}
	
	body.browser-app #nav-head {
		justify-content: left;
		width:unset;
		max-width:unset;
	}
	
	body.browser-app #nav-container {
		grid-area: 1 / 1 / 2 / 2; 
	}

	body.browser-app > div {
		border:none;
	}
	
	body.browser-app div.content {
		grid-area: 1 / 2 / 2 / 3; 
		max-width:unset;
		width: calc(100vw - 324px - 5vw - 1em - 1em);
		margin-top:0;
	}

	body.browser-app #app-notification {
		grid-area: 1 / 2 / 2 / 3; 
/* 		max-width:calc(100vw - 324px - 10vw - 1em - 1em); */
		margin-left:calc(324px + 1em + 0.5em + 2.5vw);
		margin-right:calc(0.5em + 2.5vw);
		width: calc(100vw - 324px - 5vw - 1em - 1em)
	}
	
	body.browser-app #nav-content {
		display:block; 
	}

	body.browser-app #footer {
		grid-area: 1 / 2 / 3 / 3; 
	}
	
	body.browser-app #hamburger,
	body.browser-app #nav-container .bg {
		display:none;
	}
	
  	body.browser-app .collection {
    	max-width: unset;
    	width: calc(100vw - 324px - 5vw - 1em - 1em - 0.8em);
    	margin-bottom: 0;
  	}
  	
  	body.browser-app #collection-sky .collection-row .image img, #collection-sky .collection-row-info.expanded .image img {
	  max-width: 25vw;
	}
	
	body.browser-app #location-info {
		justify-content: left;
	}
	
	body.browser-app > div#footer { 
		border: none;
		background: var(--background-color);
		max-width:unset;
		width: 95vw;
		left:0;
	}
}