@media screen and (max-device-width: 800px) { 
div.header {
	position:absolute;
}
div.footer {
	position:absolute;
	bottom:auto;
}
div.menu {
	position:absolute;
}
}



body, html {
	width:100%;
	min-width:900px;
	padding:0;
	margin:0;
	font-family: sans-serif;
	font-size: 13pt;
	line-height:18pt;
	background-color:#fff;
}

@media (prefers-color-scheme: dark) {
	html, body {
		background-color: #222 !important;
        color: #eee !important;
	}

	.header {
		color:white !important;
		text-shadow:0px 1px 0px #555 !important;
		background-color:#444 !important;
		border-bottom:1px solid #666 !important;
	}

	.footer {
		text-shadow:0px -1px 0px #555 !important;
		background-color:#444 !important;
		box-shadow:none !important; /*inset 0 4em 2.5em -2.5em #111 !important;*/
		border-top:1px solid #222 !important;
		color:white !important;
	}

	.footer a {
		color:white !important;
	} 

	.pagedcontent {
		border:1px solid #666 !important;
		background-color:#333 !important;
	}
	
	.pagemenu input {
		-moz-box-shadow:none !important; /*inset 0 2em 1em -1em #111 !important;*/
		-webkit-box-shadow:none !important; /*inset 0 2em 1em -1em #111 !important;*/
		box-shadow:none !important; /*inset 0 2em 1em -1em #111 !important;*/
		background-color:#555 !important;
		border:1px solid #333 !important;
		color:#fff !important;
		text-shadow:0px 1px 0px #222 !important;
	}

	.pagemenu input:hover {
		background-color:#666 !important;
	}

	.pagemenu input:active {
		border: thin solid #333 !important;
		background-color:#777 !important;
		color: #ddd !important;
	}

	.menu span {
		background-color:#444 !important;
		border-bottom:1px solid #000 !important;
	}

	.menu a {
		-moz-box-shadow:none !important;/*inset 0 2em 1em -1em #91d953;*/
		-webkit-box-shadow:none !important;/*inset 0 2em 1em -1em #91d953;*/
		box-shadow:none !important;/*inset 0 2em 1em -1em #91d953;*/
		background-color:#444 !important;
		border:1px solid #aaa !important;
		color:#eee !important;
		text-shadow:0px 1px 0px #111 !important;
	}

	.menu a:hover {
		background-color:#555 !important;
	}	

	.menu a.current {
		background-color:#666 !important;
		color:white;
		text-shadow:0px -1px 0px #111;
	}

	a {
		color: #bdb !important;
	}

	.page img {
		filter: invert(95%);
	}

}



.header {
	width:100%;
	min-width:900px;
	position:fixed;
	top:0;
	color:#343;
	text-shadow:0px 1px 0px white;

	background-color:#D8EFE8;
	text-align:left;
	font-weight:bold;
	padding:0.5em 0 0.5em 1em;
	font-size:2em;
	z-index:80;
	overflow:hidden;
}

.header small {
	font-weight: normal;
	font-size:0.7em;
}

.header span.facebook {
	position:absolute;
	font-weight:normal;
	font-size: 10pt;
	right:8em;
	bottom:0.6em;
}

.header span.facebook a {
	font-weight: bold; 
	color: white;
	text-shadow:none;
	background-color: rgb(59,89,152); 
	padding: 0 0 0 4px;
}

.footer span.copy {
	position:absolute;
	font-weight:normal;
	font-size: 0.7em;
	right:2em;
	bottom:0.8em;
}

.footer {
	width:100%;
	min-width:900px;
	height:3.5em;

	text-shadow:0px 1px 0px white;
	background-color:#D8EFE8;
	border-top:1px solid #8898a8;
	
	position:fixed;
	bottom:0;
	color:#343;
	z-index:100;
}

.footer a {
	color:#343;
	text-decoration:none;
} 

.content {
	margin:8em 1em 4em 1em;
}

.pagedcontent {
	margin: 0 2em 0 2em;
	padding:0;
	float:right;
	width: 21em;
	height:25em;
	border: thin solid #fff;
	background-color:#fdfefd;
	border-radius: 0.3em;
	border:1px solid #8898a8;
	background-color:#f8f8f8;
	
	font-size:11pt;
	line-height:13pt;
	overflow:hidden;
}

.pagedcontainer {
	position:relative;
	width:200em
}

.pagedcontent .page {
	width: 18em;
	height:19em;
	margin:0;
	padding:1.5em;
	overflow-y:auto;
	float:left;
	position:relative;
}

.page img {
	float:left;
	width:65px;
	padding:0.5em 1em 0.5em 0em;
}

.page h1 {
	margin:0 0 0.8em 0;
	padding: 0;
	text-align:center;
	font-size:1.4em;
}

.pagemenu {
	padding:0.5em 0 0 0;
	text-align:center;
}

.pagemenu input {
	background-color:#C5E3F1;
	border:1px solid #8898a8;
	display:inline-block;
	cursor:pointer;
	color:#343;
	font-weight:bold;
	text-decoration:none;
	text-shadow:0px 1px 0px white;

	font-size: 0.7em;
	padding:0.5em 0.7em;
}

.pagemenu input:hover {
	background-color:#b5d3e1;
	text-decoration:underline;
	
}

.pagemenu input:active {
	border: thin solid #373;
	background-color:#85a3d1;
	color: white;
}

.screenshot {
	float:left;
	margin:1em 1.2em;
	width:311px;
}

.screenshot img {
	border:1px solid #8898a8;
	width:100%;
}

.screenshot span {
	display:block;
	text-align: center;
	padding:0.5em;
	font-size:smaller;
	line-height:1.2em;
	height:4em;
	margin-top:0.6em;
	/*
	background-color:#87e43a;
	border:1px solid #167a06;
	*/
}

.screenshotipad {
	float:left;
	margin:1em 1.2em;
	width:902px;
}

.screenshotipad img {
	border:1px solid #8898a8;
}

.screenshotipad span {
	display:block;
	text-align: center;
	padding:0.5em;
	font-size:smaller;
	line-height:1.2em;
	height:1.3em;
	margin-top:0.6em;
	/*
	background-color:#87e43a;
	border:1px solid #167a06;
	*/
}


.screenshotwatch {
	float:left;
	margin:1em 1.2em;
	width:187px;
}

.screenshotwatch img {
	border:1px solid #8898a8;
	width:100%;
}

.screenshotwatch span {
	display:block;
	text-align: center;
	padding:0.5em;
	font-size:smaller;
	line-height:1.2em;
	height:4em;
	margin-top:0.6em;
	/*
	background-color:#87e43a;
	border:1px solid #167a06;
	*/
}

dl {
	margin:2em 0;
	padding:0;
}

dt {
	font-weight:bold;
	margin-top:0.7em;
}

dd {
	margin-top:0.2em;
	margin-left:1.5em;
	margin-right:3em;
}

p {
	margin:0.5em 0;
}

.menu {
	top:3em;
	width:100%;
	min-width:900px;
	height:1em;
	z-index:90;
	position:fixed;
	text-align:center;	
}

.menu span {
	display:block;
	width:100%;
	height:2.5em;
	margin:0.6em 0;
	background-color:#D3ECEA;
	border-bottom:1px solid #8898a8;
	border-top:1px solid #D0E0E0;
}

.menu a {
	float:left;
	margin:0.4em -1px 0 0;
	top:0em;

	background-color:#C5E3F1;
	border:1px solid #8898a8;
	display:inline-block;
	cursor:pointer;
	color:#343;
	font-weight:bold;
	padding:0.2em 1em;
	text-decoration:none;
	text-shadow:0px 1px 0px white;

}

.menu a:hover {
	
	background-color:#b5d3e1;
}


.menu a.current {
	background-color:#85a3d1;
	color:#fff;
	text-shadow:0px 1px 0px #343;

}

.menu a:active {
	position:relative;
	/*
	top:1px;
	*/
	color:white;
}


.menu b {
	float:left;
	width:2em;
}

.menu b.lang {
	width:2em;
	float:right;
}

.menu a.lang {
	float:right;
	position:relative;
	top:0.5em;
	padding:0.05em 1em;
	
	font-size:0.7em;
}

.appstore {
	padding:0.3em 0.5em;
	text-align:center;
	vertical-align:middle;
}

.appstore span {
	display:inline-block;
	width: 13em;
	font-size:0.8em;
	line-height:1.2em;
	text-align:left;
	vertical-align:middle;
}

.update {
	position:absolute;
	font-weight:normal;
	font-size: 0.7em;
	left:2em;
	bottom:0.8em;
	line-height:1.1em;
}


span.mobile {
	float : none;
	display:inline;
}

div.menu span.mobile a {
	float:right;
	margin:0.4em 0 0 0.5em;
	position:relative;
	top:0.5em;
	padding:0.05em 1em;

	-moz-box-shadow:inset 0 2em 1em -1em #91d953;
	-webkit-box-shadow:inset 0 2em 1em -1em #91d953;
	box-shadow:inset 0 2em 1em -1em #91d953;
	background-color:#77d42a;
	border:1px solid #268a16;
	display:inline-block;
	cursor:pointer;
	color:#306108;
	font-weight:bold;
	font-size:0.7em;

	text-decoration:none;
	text-shadow:0px 1px 0px #aade7c;
}

span.mobile {
	display:none;
}

@media screen and (max-device-width: 480px) { 
span.mobile {
	display:inline;
}
}

img.icon {
	float:left;
	padding: 1.1em 1em 1.1em 0;
}

td, th {
	font-size:10pt;
	line-height:12pt;
	font-weight:bold;
}

td~td {
	text-align:center;
	font-weight:normal;
}

h3 {
	margin: 1.2em 0 0.3em 0;
}

a {
	color: #363;
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

.german {
	display:none;
}