@font-face {
	font-family: 'IBM Plex Sans';
	src: url("/fonts/IBMPlexSans-Regular.otf") format("opentype");
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-weight: bold;
    src: url("/fonts/IBMPlexSans-Bold.otf") format("opentype");
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: italic;
    src: url("/fonts/IBMPlexSans-Italic.otf") format("opentype");
}

body {
	background-color: #F6F6EE;
	font-family: "IBM Plex Sans", sans-serif;
	text-size-adjust: none;
}

.flag-icon {
	background-size: contain;
	background-position: 50%;
	background-repeat: no-repeat;
	position: relative;
	display: inline-block;
	width: 1.33333333em;
	line-height: 1em;
}

.flag-icon:before {
	content: "\00a0";
}

.flag-icon-de {
	background-image: url(/flags/de.svg);
	float: right;
	clear: right;
}

.flag-icon-gb {
	background-image: url(/flags/gb.svg);
	float: right;
	clear: right;
}

section {
	margin-top: 100pt;
	margin-bottom: 20pt;
	clear: both;
}

h1 {
	clear: both;
}

h1, h2, h3, h4, p {
	margin-left: 10%;
	width: 70%;
}

h1 {
	padding-top: 3%;
}

p {
	font-size: 1em;
}

a {
	text-decoration: none;
}

a#home {
	color: #333;
	font-size: 14pt;
	float: left;
}

a#home img,
img#home {
	width: 65pt;
}

@media screen and (max-width: 500px) {

	a#home {
		font-size: 9pt;
	}

	a#home img,
	img#home {
		width: 12%;
	}
}

li {
	clear: left;
}

li a span {
	padding-left: 18pt;
}

li a img {
	width: 120pt;
	border: solid 1pt #999;
	padding: 2pt;
	vertical-align: middle;
	display: inline-block;
}

div.subpage_title {
	padding-top: 20pt;
	display: inline-block;
}

span.short_title {
	color: #111;
	display: block;
}

span.byline {
	color: #555;
	font-size: 70%;
	margin-top: 3pt;
	display: block;
}

span.new {
	color: #2757C1;
	padding-left: 10pt;
}

@media screen and (max-width: 800px) {
	div.subpage_title {
		width: 300px;
		padding-top: 6pt;
	}
}

@media screen and (max-width: 600px) {
	li a img {
		display: block;
	}

	div.subpage_title {
		padding-top: 6pt;
		padding-bottom: 10pt;
		display: block;
	}
}

span#date {
	float: right;
}

ul {
	list-style: none;
	margin-left: 8%;
	margin-bottom: 25pt;
}

li {
	margin-bottom: 15pt;
}

div.drawing {
	overflow: auto;
	text-align: center;
	width: 100%;
	margin: 0;
}

div.imagetext {
	width: 100%;
	text-align: center;
}

span.imagetext {
	font-size: 10pt;
}

.default-pointer {
	cursor: default;
}

.click-pointer {
	cursor: pointer;
}

div.definitions {
	clear: both;
}

div.about {
	padding-top: 60pt;
	clear: both;
}

div.about p, div.definitions p {
	width: 350pt;
	padding-bottom: 20pt;
}

@media screen and (max-width: 600px) {
	div.about p, div.definitions p {
		width: 75%;
	}
}

div.icons {
	text-align: center;
}

div.icons img {
	width: 3%;
	margin-left: 1%;
	margin-right: 1%;
	cursor: pointer;
}

div.icons img:active {
	transform: scale(1.5);
}

div.sharethis-inline-share-buttons {
	margin-top: 60pt;
}

div.map {
	overflow: auto;
	width: 90%;
	height: 38vw;
	margin: auto;
	border: solid #777 1px;
	padding: 6px;
}

div#map_intro_text {
	margin-bottom: 1.5vw;
}

span#map_intro_name {
	font-size: 14pt;
}

a.osm-attribution {
	color: #aaa;
	font-size: 9pt;
    display: block;
    width: 90%;
    margin: 0 auto 2vw;
    text-align: right;
}

footer {
	clear: both;
	padding-top: 50pt;
}

footer, footer a {
	color: #aaa;
	font-size: 10pt;
}