@charset "utf-8"; 

body{
	min-width: 900px;
}

/* GENERAL RULES */

/* main title element that says "in octomode" */
h1 em.octomode{
	color: darkorchid;
}

/* navigation */
div#nav{
	position: fixed;
	width: calc(100% - 1em);
	top: 0;
	left: 0;
	margin: 0;
	padding: 0 0.5em;
}
	div#nav h1{
		position: absolute;
		width: auto;
		line-height: 0;
		margin: 0.75em 15px;
		float: left;
	}
	div#nav div#buttons{
		margin: 0.5em 15px;
		float: right;
	}
	div#nav span.info{
		font-size: 16px;
		line-height: 0;
		vertical-align: middle;
		cursor: pointer;
	}
	div#nav span.info:hover{
		opacity: 0.75;
	}
	div#nav div.hidden{
		position: absolute;
		right: 1.5em;
		margin-top: 8px;
	}
	div#nav input{
		min-width: 300px;
	}
	/* click logic (CSS only) */ 
	span#click_md {
		cursor: pointer;
	}
	div#show_md{
		display: none;
	}
	span#click_md:focus + div#show_md{
		display: block;
	}
	span#click_css {
		cursor: pointer;
	}
	div#show_css{
		display: none;
	}
	span#click_css:focus + div#show_css{
		display: block;
	}

/* iframe rules */
iframe{
	width: 100%;
	height: 100%;
	border: none;
}
/* main content area */
div#wrapper{
	position: fixed;
	top: 50px;
	left: 25px;
	width: calc(100vw - 25px - 25px);
	height: calc(100vh - 50px - 25px);
}


/* Z-INDEX */
div#wrapper,
div.pagedjs_pages{
	z-index: 1;
}
div#nav{
	z-index: 11;
}

/* start page */
body.start-page {
	font-family: serif;
	font-size: 115%;
}

.start-page ul {
	max-height: 66vh;
	overflow-y: auto;
}

.start-page .cols {
	display: grid;
	grid-template-columns: 1fr 3fr;
	margin-top: 3rem;	
}

.start-page  .home_pad_iframe {
	height: 75vh;
	/* margin: 5rem; */
	/* width: calc(100vw - 13rem); */
	border: 1px solid black;
	border-radius: 5px;
}

@media only screen and (max-width: 600px) {
	.start-page .home_pad_iframe {
		margin: 1rem;
		width: 90vw;
	}
}