body, table, td {
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
}

.container {
	max-width:1170px;
	width:80%;
	
	margin:auto;
	
	padding-bottom:5em;
}

strong {
	font-weight:600;
}

em {
	font-weight:300;
	font-style:italic;
}

hr {
	border:none;
	height:1px;
	background-color:#000000;
}

sem {
	display:inline;
	color:#FF0000;
}

.image {
	display:inline-block;
}

.image:after {
	display:block;
	
	content: attr(title);
	font-size:0.8em;
}

article {
	width:95%;
	margin:auto;
}

header {
	font-family: 'Open Sans', sans-serif;
	margin-bottom:0.5em;
}

header.big {
	font-size:3em;
	margin-bottom:1em;
}

section > header {
	font-size:2em;
	color:#005e98;
	font-weight:600;
}

article > header {
	font-size:1.5em;
	color:#0077c0;
	font-weight:600;
}

#toc, #toc ul {
	list-style:none;
}

#toc a {
	text-decoration:none;
	color:#000000;
}

section {
	margin-bottom:5em;
}

article {
	margin-bottom:3em;
}

grammar, vocabulary, talk, word, speaker, text, note {
	display: block;
}

grammar, vocabulary, note {
	-webkit-border-radius: 5px;
	border-radius: 5px;
	
	padding:1em 1.5em 0.75em 1.5em;
}

article > * {
	margin-top:1em;
	margin-bottom:1em;
}

article table {
	margin:auto;
}

article table.first-right tr td:first-of-type {
	text-align:right;
}

note {
	background-color:#d7cca1;
}

note > header:before {
	content: 'Hinweis: ';
	font-weight:600;
}

grammar {
	background-color:#b5d7a2;
}

grammar > header:before {
	content: 'Grammatik: ';
	font-weight:600;
}

vocabulary {
	background-color:#a1c5d7;
}

vocabulary > header:before {
	content: 'Wortschatz: ';
	font-weight:600;
}

vocabulary > word {
	display: flex;
	flex-wrap: wrap;

	margin-bottom: 1em;
}

vocabulary > word > german {
	width: 49%;

	font-weight:400;
	flex-grow: 1;
}

vocabulary > word > english {
	width: 49%;

	font-weight:400;
	flex-grow: 1;
}

vocabulary > word > notice {
	font-style:italic;
	font-size:0.9em;
}

vocabulary > word > notice > em {
	font-weight:400;
	font-style:normal;
}

talk {
	display: flex;

	flex-wrap: wrap;

	margin: 4em auto 4em auto;

	max-width: 600px;
}

talk > narrator {
	display: block;

	margin: 1em 0 1em 0;

	padding-left: 30%;
	width: 100%;
}

talk > speaker {
	display: block;

	width: 30%;
	text-align: right;
	
	font-weight: 400;
	
	margin-right: 2%;
}

talk > speaker:not(:empty)::after {
	content: ':';
}

talk > text {
	display: block;
	width: 68%;
}

ul.alphabet {
	font-size: 1.5em;
	list-style: none;
}

ul.alphabet > li {
	display:inline;
	margin-right:1em;
}

.alphabet em {
	color:#AAAAAA;
	font-style:normal;
}

@media (max-width:1170px) {
	.container {
		width:100%;
	}
}

table {
	border-collapse: collapse;
}

table th {
	font-weight:bold;
	text-align:left;
	color:#333333;
}

table tr:first-of-type th {
	text-align:center;
}

table.row-split td {
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

table.border {
	border-collapse:collapse;
}

table.border, table.border th, table.border td {
	border:1px solid black;
}

table.borderless td {
	padding:0.25em 1em 0.25em 1em;
}

table.sent-struct {
	width:100%;
}

table.sent-struct td:first-of-type {
	width:25%;
}

table.sent-struct th {
	font-weight:normal;
}

table.sent-struct tr {
	height:5em;
}

table.sent-struct th.blue {
	background-color:#84d0ff;
}

table.sent-struct th.red {
	background-color:#ff8b8b;
}

table.sent-struct th.yellow {
	background-color:#fffb80;
}

table.sent-struct th.grey {
	background-color:#cccccc;
}

exercise {
	display: block;
}

exercise::before {
	content: 'Exercise';
	font-weight: bold;
	font-size: 1.2em;
}

exercise .flex-question {
	display: flex;
	align-items: stretch;
}

exercise input.line {
	width: 100%;
}

exercise solution {
	display: inline-block;

	font-weight: bold;
	color: #006600;
	background-color: #fff9a7;

	margin-left: 1em;

	visibility: hidden;
}

exercise .flex-question solution {
	flex-grow: 1;
}

exercise.solved solution {
	visibility: visible;
}

button {
	cursor: pointer;
}

exercise .show-solution::before {
	content: 'Show solution';
}

exercise.solved .show-solution::before {
	content: 'Hide solution';
}

exercise .save::before {
	content: 'Save';
}

sep-hyph::before {
	display: inline;
	content: '-';
	opacity: 0.5;
}