body {
	font-family: monospace;
	margin: 0;
}

p {
	font-family: arial;
}

#root header {
	position: absolute;
	right: 0;
	padding: 0.5em;
}

@media print {
 .noprint {
  display: none;
 }
}

/* -- */

#content {
	display: flex;
	flex-direction: row;
}

#content nav {
	background-color: black;
	text-align: center;
	min-height: 100vh;
    width: auto;
    overflow: hidden;
    transition: 1s;
    min-width: 16em;
    width: 16em;
}

#content nav.altdisplay {
  min-width: 0;
  width: 0;
}

@media (max-aspect-ratio: 3/4) {
 #content nav {
  min-width: 0;
  width: 0;
 }

 #content nav.altdisplay {
    min-width: 16em;
    width: 16em;
 }
}

#content nav > div {
	width: 14em;
	padding: 1em;
}

#content nav img {
	width: 11em;
}

#content nav a {
	color: yellow;
}

#content nav li a:hover {
	background-color: brown;
}

#content nav ul {
	text-align: left;
	list-style: none;
	font-weight: bold;
	padding-left: 0;
}

#content nav ul ul {
	padding-left: 1.5em;
}

#content nav a {
	text-decoration: none;
}

#main {
	margin: 1em;
	max-width: 60em;
	text-align: justify;
	font-family: arial;
}

/* Display links when printing */
@media print {
	#main a[href^="http"]::after {
		content: " (" attr(href) ")";
	}

	/* A link on the form '/link/' might match both below, but at
	 * worst it comes out as:
	 * 'lysator.liu.se//link/'
	 */

	#main a[href^="/"]::after {
		content: " (lysator.liu.se" attr(href) ")";
	}

	#main a[href]::after {
		content: " (lysator.liu.se/" attr(href) ")";
	}
}

h1, h2, h3, h4, h5, h6 {
	font-family: monospace;
}

#content main {
}

.item h2 {
    background-color: black;
    color: yellow;
    padding: 1ex;
    border-radius: 1ex;
}

.flag img {
	max-height: 1.3em;
}

.lock {
	display: block;
	position: fixed;
	right: 1ex;
	bottom: 1ex;
	background-color: beige;
	padding: 1ex;
	border-radius: 1ex;
}

.lock .hoverdata {
	display: none;
	font-size: 8pt;
}

.lock:hover .hoverdata {
	display: inline;
}