html {
	height: 100%;
}

body {
	/* flex */
  height: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  margin: 0px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  
  /* style */
  background-color: #FFFFDD;
	color: #880033;
}

/** header with navigation */

header {
	padding-top: 1rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

@supports (display: flex) {
	header {
		/* inner flex */
	  display: flex;
	  flex-direction: rows;
		justify-content: center;
		align-items: center;
	}
}

header > h1 {
	flex-grow: 1;
}

@supports (display: flex) {
	nav ul {
		float: right;
	}
}

nav ul li {
	list-style: none;
	display: inline;
	padding-left: 2em;
}

nav ul li.active {
	font-size: 1.5em;
	font-weight: bold;
}

ul.subnav + hr {
	margin-top: 1rem;	
}

ul.subnav {
	align-self: center;
}

ul.subnav li {
	list-style-type: none;
	display: inline;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

/** special handling for different media */

@media only screen and (max-width: 800px) {
	
	nav ul {
		display:block; 
	}
	
	nav ul li {
		display:block;
	}

	nav ul li.active {
		font-size: 1em;
	}
	
	main {
		height: 80%;
	}
}

@media only print {
	
	nav ul {
		display:block; 
	}
	
	nav ul li {
		display: block;
		padding-left: 0;
	}

	body {
		display: block;
	}
	
	main {
		display: block;
	}
	
}

/** main */

main {
	padding: 1rem;
  flex-grow: 1;
  overflow-y: auto;
}

/** formatting */

a {
	color: #000066;
}

a:visited {
	color: #006699;
}

a:active {
	color: #666699;
}

a:hover {
	color: #666699;
}

a[href^="http"]:after {
	padding-left: 3px;
	content: url(../bilder/external_link_font_awesome.png);
}

.emph {
	font-style: italic;
}

.bold {
	font-weight: bold;
}

.pseudo-link {
	color: #000066;
}

h4 {
	margin-top: 2em;
}

hr {
	margin-top: 3rem;
	margin-left: 0;
	margin-right: 0;
	style: border-width:0;color:#880033;background-color:#880033;
}

body > hr {
	margin-top: 1rem;
	flex-shrink: 0;
	height: 3px;
}

container + hr {
	margin-top: 2rem;
}

container.vita {
	display: flex;
	flex-direction: rows;
	margin: 1.5em
}

.vita-left {
	margin-right: 3em;
	flex-basis: 25%;
}

.vita-right {
	flex-basis: 75%;
}

ul.outer > li {
	margin-bottom: 1rem;
}

ul li {
	list-style-type: square;
}

ul li.none {
	list-style-type: none;
}	

img + img {
	margin-left: 2rem;
}