/* Template */
#x-content {background-color:lavender;}
#x-title {background-color:sandybrown;}
#x-series {background-color:darkseagreen;}
#x-comment {background-color:gold;}
#x-exclude {background-color:mistyrose;}
#x-include {background-color:thistle;}
#x-hilite {background-color:gold;}
#x-focus {background-color:darkseagreen;}

/* Trident */
body {overflow:auto; margin:0;}
hr {border:0; height:1px; background-color:grey;}
input, select, label {vertical-align:middle; line-height:12pt;}

/* Gecko */
img {vertical-align:bottom;}
object {display:block;}

/* Webkit */
input,button,select {height:18pt;}
div {width:100%;}

/* Blink */
p, ul {line-height:18pt;}

/* Bootstrap */
html {font-size:12pt;}
button, input, optgroup, select, 
textarea {font-family:inherit; font-size:inherit; color:inherit;}

/* Trace */
-html * {border:1px solid blue;}

@font-face {
	font-family: "Simplistic Sans";
	src:url('_fonts/Simplistic-Sans-Normal.ttf') format('truetype');
	src:url('_fonts/Simplistic-Sans-Normal.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "Simplistic Sans";
	src:url('_fonts/Simplistic-Sans-Bold.ttf') format('truetype');
	src:url('_fonts/Simplistic-Sans-Bold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
}

/* Font */
html {font-family:"Simplistic Sans"; font-weight:normal;}
h1,h2,h3 {font-family:sans-serif; font-weight:normal;}

/* Width */
header,main,footer {width:720pt;}
nav {width:100%;}
aside {width:240pt;}
textarea {width:100%;}
article {width:234pt;}

/* Margin */
header,main,footer {margin:auto;}
h1,h2,h3,ul,menu {margin:0;}
textarea,input {margin:3pt 0;}
article {margin-bottom:9pt;}

/* Padding */
menu {padding:0;}
input, textarea {padding:0 3pt;}

/* Text */
a {text-decoration:none;}
a:hover {text-decoration:underline;}

/* Border */
input,textarea {border-width:1px; border-style:solid;}

/* Float */
aside {float:right;}
article {float:left;}

/* Display */
div.main {display:inline-block;}

/* Outline */
input,textarea {outline:none;}

/* 
 * Header
 */

div.header {
	display: inline-block;
	margin: 12pt 0;
	-position: -webkit-sticky;
	-top: 0;
}

/*
 * Menu
 */

img.menu {
	display:none; 
	float:right; 
	margin-top:9pt;
}
img.logo {
	margin-bottom:6pt;
}
menu.main {
	float:right;
	margin-top:3pt;
}
menu.aside {
	border-width:1px 0 0 0; 
	border-style:solid; 
	margin-bottom:9pt;
}
menu.main *,
menu.aside * {
	display:block; 
	height: 33pt; 
	line-height: 33pt; 
	padding: 0 12pt;
	outline: none;
}
menu.main * {
	float: left; 
}
menu.aside * {
	border-width: 0 0 1px 0; 
	border-style: solid; 
}
menu.aside strong,
menu.aside a:hover {
	text-decoration: none;
}

/*
 * Touch Bar
 */

menu.touchbar {
	height: 477pt;
	overflow: auto;
	margin-bottom: 9pt;
	scroll-behavior: smooth;
}
menu.touchbar img {
	height: 54pt;
	margin-bottom:3pt;
	vertical-align: auto;
}
menu.touchbar #focus img,
menu.touchbar img:hover {
	-webkit-filter: sepia(100%);
}
main.schetsen menu.touchbar {
	height:auto;
}

/*
 * Home
 */

main.home {
	position:absolute;
	overflow:hidden;
	z-index: -1;
	margin: 0;
}
main.home img {
	position: absolute;
}

/* 
 * Button
 */

input.button {
	height:24pt;
	padding:3pt 6pt;
}

/*
 * Media
 */

@media screen and (max-width:432pt) {
	header,main,footer {width:90%;}
	menu.main {float:none; display:none; border-width:1px 0 0 0; border-style:solid; margin:9pt 0;}
	menu.main * {float:none; border-width:0 0 1px 0; border-style:solid;}
	img.menu {display:inline;}
	span.popup:hover menu {display:block;}
	aside, article {width:auto; float:none;}
	menu.touchbar {height:auto; white-space:nowrap;}
	article img {width:100%;}
	menu.aside {width:auto;}
	iframe {width:100%;}
}