@font-face {
font-family: 'oswaldbold';
src: url('oswald-bold-webfont.woff2') format('woff2'),
url('oswald-bold-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
}

body {
background-image: linear-gradient(to right, #c0c0c0 50%, white 50%);
font-family: ibm_plex_sansregular, sans-serif;
}

a, .nb a:hover, .tip a:hover, a.switch:hover, a.nov:hover {
background-color: transparent;
color: black;
border-bottom: 2px solid #535c70;
}

nav a, .fwd a, a.link, .panelcollapsed p, .panel p, a.close {
background-color: #535c70;
color: white;
border-bottom: 0;
}

a:hover, .panelcollapsed p:hover, .panel p:hover {
background-color: #dd3300;
color: white;
border-color: transparent;
}

article {
background-color: white;
color: #333333;
max-width: 700px;
padding-right: 100px;
font-size: 17px;
line-height: 27px;
}

h1, h2, h3 {
font-family: oswaldbold, sans-serif;
background-color: white;
color: #535c70;
}

h1 {
font-size: 40px;
line-height: 48px;
margin: 0 20px 0 20px;
padding-top: 15px;
}

h1.tuck {padding-top: 5px;}

h2, h3 {
font-size: 22px;
line-height: 27px;
margin: 0 20px 0 20px;
}

h3 {padding-top: 10px;}

nav, .fwd {
padding-top: 10px;
margin-left: 20px;
}

nav a {
float: left;
width: 50%;
}

.fwd a {float: right;}

p, aside {margin: 10px 20px 0 20px;}

footer, figcaption, aside, .capt, .trans, .notesml, .notenorm, .notemed, .notebig, .panelcontent, #map_w, #map_n {
font-size: 15px;
line-height: 24px;
}

footer p {margin: 30px 20px 0 20px;}

blockquote {margin: 5px 50px 0 50px;}

blockquote.topm {margin-top: 10px;}

.spacer {margin-top: 7px;}

figure.right {
float: right;
clear: both;
margin: 8px 0 5px 20px;
}

figure.left {
float: left;
clear: both;
margin: 8px 20px 5px 0;
}

.panelcontent figure.right {margin: 8px -50px 5px 20px;}

.panelcontent figure.left {margin: 8px 20px 5px -50px;}

figure img {margin: 0 auto 0 auto;}

figcaption, .capt {
background-color: #c0c0c0;
color: #333333;
padding: 6px;	
}

figure.right figcaption {text-align: right;}

aside {
padding: 6px 30px 6px 30px;
background-color: #c0c0c0;
color: #333333;
}

.pos {
width: 1px;
float:right;
clear: both;
}

.pic {
font-size: 0.8em;
line-height: normal;
position: relative;
top: -4px;
}

.notesml, .notenorm, .notemed, .notebig {
border: 3px solid #c0c0c0;
background-color: white;
color: #333333;
}

.panelcontent {
padding: 10px 50px 10px 50px;
border-bottom: 3px solid #535c70;
}

img.mid {margin: 0 auto 5px auto;}

.panelcollapsed p, .panel p {
width: 250px;
margin: 5px 0 0 0;
}

.panelcontent blockquote, aside blockquote, .notenorm blockquote, .notemed blockquote, .notebig blockquote {margin: 3px 25px 0 25px;}

@media screen and (max-width: 800px) {
article {padding-right: 0;}
}

@media screen and (max-width: 600px) {
.pos {display: none;}
figure.right figcaption, figure.left figcaption {text-align: center;}
figure.right, figure.left, .panelcontent figure.right, .panelcontent figure.left {
float: none;
margin: 10px auto 5px auto;
}
}

@media screen and (max-width: 500px) {
nav, .fwd {margin-left: 0;}
nav a, .fwd a {
width: 100%;
margin-bottom: 10px;
}
h1, h2, h3, p, aside, footer p {
margin-right: 10px;
margin-left: 10px;
}
blockquote {margin: 5px 40px 0 40px;}
.panelcontent {padding: 10px;}
}

@media screen and (max-width: 400px) {
h1 {font-size: 10vw;}
h2 {font-size: 5.5vw;}
}