:root {
	--code: Menlo, Consolas,'Bitstream Vera Sans Mono',monospace;
	--helv: sans-serif;
	--times: 'Times New Roman', Times, serif;

	--mg1: #8eb4e3;
	--mg2: #558ed5;
	--mg3: #376092;
	--bGray: #f0f0f0;
}

body {background:white; padding:0; margin:0}

p.hr {width:100%; height:.5rem; margin:0; background:#558ed5}

/*
f = (x) => {
let w = 2
if (x > 80)  w = .05*x - 2
if (x > 120) w = .08*x - 5.6 
if (x > 160) w = .13*x - 13.6
if (x > 200) w = .20*x - 27.8
if (x > 240) w = .30*x - 51.8
return w}
plot(f,0,300)
*/
@media (min-width: 80mm)  {
	body: {margin:2mm 0}
	header, main {margin:2mm  calc(5% - 2mm)}
}
@media (min-width: 120mm) {
	body: {margin:3mm 0}
	header, main {margin:0 calc(8% - 5.6mm)}
}
@media (min-width: 160mm) {
	body: {margin:5mm 0}
	header, main {margin:0 calc(13% - 13.8mm)}
}
@media (min-width: 200mm) {
	body: {margin:5mm 0}
	header, main {margin:0 calc(20% - 27.8mm)}
}
@media (min-width: 240mm) {
	body: {margin:5mm 0}
	header, main {margin:0 calc(30% - 51.8mm)}
}

div.right-box, div.left-box {
	clear:both;
	width:15rem;
	font-size:0.9rem;
	margin:auto;
	padding-top:.5em;
}
div.right-box img, div.left-box img, div.center-box img {
	width:100%
}

div.center-box {
	float: none;
	width:20rem;
	margin:auto;
	padding-top:.5em;
}

div.bilder {display: flex; flex-direction: row; flex-wrap: wrap}
div.bilder div {padding: 0 .4rem}

@media (min-width: 32rem) {
	div.right-box {
		float: right;
		padding: .5rem 0 1rem 1rem
	}
	div.left-box, div.left-img {
		float: left;
		padding: .5rem 2rem .5rem 0
	}
}
@media (max-width: 32rem) {
	div.right-box, div.left-box {
		float: none;
		margin: auto;
		padding-bottom: .5rem;
	}
}

body, p, li {font-family:var(--helv)}

.MathJax {font-size: 4rem}
.CodeMirror {font-family: var(--code)}

span.error {color:red}

h1, h2, h3 {
	font-family:var(--helv);
	line-height:1.2em;
	margin-bottom:0
}
h1 {color:var(--mg2)}
h2 {color:var(--mg3)}
h3 {color:var(--mg2)}
strong {color:#f00040}

div.mathguide > p {padding:0; padding-top:.2rem; margin:0}
div.result p {margin: 0}
div.stretch {display:flex; justify-content:space-between}

div.hlp3 {
	padding-top: .4rem;
	overflow-y:scroll;
	scrollbar-width:thin;
	padding-bottom:.3rem;
}
/*div.hlp3 code {font-size: .9rem}*/
div.hlp3 > p {margin-top:0; margin-bottom: .3rem;}
div.hlp3 p:first-child {
	/*font-size: 1.1em;*/
	font-weight: bold;
	color: var(--mg2);
}

div.mathguide details.test p button {font-size:1rem;width:100%}


div.hlp {display: flex; flex-direction: column; padding-bottom: .3rem; border-bottom: .2rem solid #e0e0e0; margin:0}
div.hlpOpt {display: flex; flex-direction: row; flex-wrap: wrap}

details.sym p {margin: 0}
details.sym summary {
	list-style: none; font-weight:bold;
	color:var(--mg2);
	font-size:1.2rem;
	padding:.2rem .4rem;
	margin: .1rem;
	border-radius:.3rem; border: 1px solid;
	border-color: white gray gray white
}
details.sym summary::-webkit-details-marker {display: none}
details.sym summary::after {content:"?"}
details.sym[open] summary {color:var(--mg2); font-weight:normal; font-size:1rem}
details.sym[open] summary::after {content:"schließen"}

details.frage, details.hint {margin-bottom:.25rem}
details summary:focus {outline: none}

details.frage summary {
	background-color: #f0f0f0;
	border-radius: .25rem; padding:.3rem}
details.frage[open] > summary::before {content:"▲ ";color:var(--mg2)}
details.frage p {margin-top:0}
details.frage {padding-bottom:.3rem}
details.frage details.frage {padding-bottom:0}
details.frage summary::-webkit-details-marker {display: none}
details.frage summary::before {content:"▼ ";color:var(--mg2)}

details.hint summary::-webkit-details-marker {display: none}
details.hint summary::before {content:"▼ ";color:var(--mg2)}
details.hint[open] > summary::before {content:"▲ ";color:var(--mg2)}
details.hint summary {
	border-width: thin;
	border-radius: .5rem;
	border-style:outset;
	background-color: #f0f0f0;
	padding:.5rem
}
details.hint[open] summary {border-style:inset}

select {
	padding:0;
	height: 2rem;
	margin-right: .4rem;
	font-family:var(--helv);
	font-size:1rem
}

option {padding:.5rem}

div.print {
	display: flex; flex-wrap: wrap; align-items:center;
	padding-top:.25rem; padding-bottom:.25rem;
	border-bottom:1px solid #d0d0d0
}
div.print:last-child {border-bottom:none}

canvas.result {
	width:300; height:150;
	border: none;
	padding: 0;
	margin:0
}

code, p.code {font-family:var(--code)}

div.mathguide {
	clear:both;
	border-width:medium;
	border-color: var(--mg1);
	border-style:solid;
	padding:2mm;
	margin-bottom:0mm
}
div.mathguide[data-def] {
	border-color: #00a060;
	margin-bottom:.5rem
}

textarea.mathguide + div.CodeMirror {
	border-color:lightgray;
	border-width:medium;
}
div.CodeMirror {line-height: 1.4rem;}

var {font-family: var(--helv)}

a[href] {text-decoration:none; color:var(--mg3);}
a[href]:hover {background:#e8ecff}
a[href].web:hover {background:#ffe0e0}

a.home {float:right; padding:0 .2rem}

p.buttons {
	color:#808080;
	padding: 2mm;
	margin-top:0mm;
	border-left:medium solid var(--mg1);
	border-right:medium solid var(--mg1);
	border-bottom:medium solid var(--mg1)
}

div.btns {background:var(--bGray); padding:.2rem .1rem; margin:0; padding-top:.3rem}
div.symb {background:var(--bGray); padding:.2rem .1rem;}
div.hlp {background:var(--bGray); padding:.2rem .1rem; border:none}
div.btns button, button.char {
	border-radius:.5rem; background:white; font-size:1.1rem; height:2rem
}
div.hlp select {background: white; border-radius: .5rem;  margin:.05rem}

button.char {
	height:1.6rem; padding:0 .3rem; margin:.05rem
}

button, a.button, p.buttons > a {
	color:black;
	text-decoration: none;
	font-weight:normal;
	border-style:outset; border-width:1px;
	padding-left:4px; padding-right:4px;
}

a.button:hover, p.buttons > a:hover {
	border: 2px solid #7af;
}

p.intro  {font-size:1.2rem; color:#606060}
p.remark {font-size:0.8rem; color:#404040}

div.overview {
	padding: 2mm;
	background-color: #f8f8f8;
	margin-top:1rem;
	border:none
}
div.overview p {margin: .4rem .3rem}

ol li {padding: .3rem 0;}
ul {
	list-style: none;
	margin:.4rem 0
}
ul li::before {
	content: "►";
	font-size:.8rem;
	color: var(--mg1);
	display: inline-block; 
	width: 1rem;
	padding: .3rem 0;
	margin-left: -1rem;
}
li ul {padding-top: 0}
li p:first-child {border:1px solid green; margin-top:0; padding-top:0}
li div.mathguide {margin:.5rem 0}

.mgDark {color:var(--mg3)}
.mgLite {color:var(--mg2)}
.gray {color: #808080}

.key {
	color:black;
	background-color:#f8f4f0;
	border:1px outset #d0d0d0;
	margin-left:0.15rem;
	margin-right:0.15rem;
	border-radius: .2rem;
}
.key::before, .key::after {content:"."; color:#f8f4f0}

.keyword { color:#0000a0; font-weight:bold}
.comment { color:#008050 }
.literal { color:#a00000 }

.bgPink {background:#ffe0e0}
.bgGreen {background:#d0ffd0}
.bgYellow {background:#ffffa0}
.bgBlue {background:#c0e0ff}
.bgOcher {background:#ffe0a0}
.bgGray {background:var(--bGray)}

table {empty-cells:show}

table.matrix {
	border-left:2px solid black;
	border-right:1px solid black;
	border-radius:.6rem
}
table.matrix td {text-align:center}
.center {text-align:center}

table.functions td {padding:0.1rem .5rem}

tr {vertical-align:top}
th {font-weight:bold; color:#000000; text-align:left}
td {border-width:0; padding:0.5mm; vertical-align:top}

table.l {padding:2mm; border-collapse:collapse; empty-cells:show}
table.l td, th {
	vertical-align:top;
	padding:2mm;
	text-align:left;
	border:thin solid #d0d0d0;
}

table.eng {border-collapse:collapse}
table.eng td, table.eng th {
	padding:.3rem;
	border:thin solid #d0d0d0;
}

.def, .theorem {
	padding:0;
	margin: 0 0 .5rem 0;
	border:3px solid #00a060
}

.def {border-color:var(--mg2)}
.theorem {border-color:#00a060}
.def > *, .theorem > * {padding:2mm;}
.def > p, .theorem > p {padding-top:0mm; padding-bottom:0mm}

.theorem > ul {margin-left: 2rem}

.def > p.title, .theorem > p.title {
	margin: 0mm;
	font-weight: bold;
	font-size: 1.2rem;
	color: white;
}

.def > p.title {background-color: var(--mg2)}
.theorem > p.title {background-color: #00a060}

.quote {
	font-family:var(--code);
	padding-left: 4mm;
	padding-right: 4mm;
	margin-left: 8mm;
}
.quote p {font-family:var(--times);}
.question {font-style: italic}
.draggable {cursor: move}