octomode/static/main.css

@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);
}

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

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