:root {
	--main-padding: 8px;
	--main-font-size: 12pt;
	--main-title-font-size: 16pt;
	--page-title-font-size: 14pt;
	--source-font-size: 12pt;

	--icon-size: 24px;
	
	--theme-text:  #1d1e22;
	--theme-body-bg: #eef2f5; 
	--theme-page-bg: white;
	--theme-pageInfos-bg: white ; 

	--theme-menu-bg: #454451;
	--theme-menu-icons: white;
	--theme-menu-hover: rgb(151, 202, 248);

	--theme-title: #404752;
	--theme-headings: #477aa8;
	--theme-hyperlink: #477aa8;
	--theme-hyperlink-visited: #474747;
	--theme-pre-bg: #dedede;
	--theme-pre: #1d1e22;
	--theme-inline-code: #515966;
	--theme-resizer: #1d1e22;
	
	--resizer-width: 0.3rem;
}

@media screen {
	* { margin: 0; padding: 0; color: var(--theme-text); font-family: Roboto, sans-serif; }
	
	@font-face { font-family: microns; src: url("microns.woff2") format("woff2"); }
	.mu { font-family: microns; font-size: var(--icon-size); speak: none; user-select: none; }
	
	div.pageTitle { position: relative; background: var(--theme-menu-bg); border-bottom: 1px solid var(--theme-menu-border); letter-spacing: 0.3px;  font-weight: bold;
		height: calc(var(--icon-size) + var(--main-padding)); }
	div.pageTitle * { color: var(--theme-menu-icons); }
	div.pageTitle > h1 { font-size: var(--page-title-font-size); line-height: calc(var(--icon-size) + var(--main-padding)); }
	div.pageTitle > ul { list-style-type: none; }
	div.pageTitle a, div.pageTitle label { padding: calc(var(--main-padding) / 2); }
	div.pageTitle a { text-decoration: none; }
	div.pageTitle a:hover, div.pageTitle > ul > li > label:hover { color: var(--theme-menu-hover); }
	div.pageTitle, div.pageTitle >:nth-child(1), div.pageTitle >:nth-child(3) { flex: 1; display: flex; }
	div.pageTitle >:nth-child(1) { justify-content: flex-start; }
	div.pageTitle >:nth-child(3) { justify-content: flex-end; }
	div.pageTitle input.hidden { display: none; }
	div.pageTitle input.hidden:hover ~ label { cursor: pointer; }
	div.pageTitle a { cursor: pointer; }
	div.pageTitle .mu { position: relative; top: calc(var(--main-padding) / 4); }
	div.pageTitle a ~ ul { display: none; position: absolute; top: calc(var(--icon-size) + var(--main-padding)); 
		background: var(--theme-menu-bg); list-style-type: none; }
	div.pageTitle a:hover ~ ul, div.pageTitle a ~ ul:hover { display: block; }
	div.pageTitle ul { padding: 0; }
	div.pageTitle a ~ ul > li { color: var(--theme-menu-icons); padding: 0.125em 0.25em; }
	div.pageTitle a.nonav { visibility: hidden; }
	
	#src { resize: none; }

	.check:after {
		content: "\e718"; position: absolute; right: -4px; top: -8px; font-size: 32px;
		color: #62e738; text-shadow: 0 -1px 0 white, 0 1px 0 white, 1px 0 0 white, -1px 0 0 white;
	}
}
	
@media screen and (orientation: landscape) {
	html, body, #body, #pan1, #pan2, div.pageContent, #srcdoc, #src, #doc { height: 100%; }
	#pan1, #pan2 { overflow: hidden; }
	#src, #doc, div.pageContent { overflow: scroll; }
	
	#body { display: flex; }
	#srcdoc { display: flex; flex-direction: column; }
	
	#pan1, #src { flex-shrink: 0; flex-basis: 50%; }
	#pan2 { width: 100%; }
	
	#pan1_pan2, #src_doc { flex-grow: 0; flex-shrink: 0; background: var(--theme-resizer); }
	#pan1_pan2 { width: var(--resizer-width); cursor: col-resize; }
	#src_doc { height: var(--resizer-width); cursor: row-resize; }
}
