html, body {
	height: 100%;
}

body {
	font-family: sans-serif;
	margin: 0;
}

#wrapper {
	max-width: 10cm;
	margin: auto;
}

section {
	padding: 8px;
}

select, input, button {
	font-size: inherit;
}

.day,
.month,
.year,
.dow {
	text-align: center;
}

.month-view {
	margin: auto;
}

.month-view td,
.month-view th {
	text-align: right;
}

td.match {
	background-color: yellow;
}

.day {
	font-size: 1000%;
	font-weight: bold;
	margin: -0.15em 0;
}

.month,
.dow,
.month-view {
	font-size: 150%;
}

.dow {
	font-weight: bold;
}

.day-sunday .dow,
.day-sunday .day,
table .day-sunday,
.day-holiday .dow,
.day-holiday .day,
table .day-holiday {
	color: red;
}
.day-saturday .dow,
.day-saturday .day,
table .day-saturday {
	color: #a22;
}

.dedication {
	min-height: 3.6em; /* gleichmäßiges Aussehen beim Blättern */
}

img.moon {
	width: 80px;
	height: 80px;
	float: left;
	margin-right: 1em;
}

.clear {
	clear: left;
	display: block;
}

.dayview li {
	list-style: none;
}

nav.top img {
	width: 24px;
	float: right;
}

nav.top img:first-child {
	float: left;
}

nav.bottom {
	display: table;
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	background-color: #111;
}

nav.bottom button {
	display: table-cell;
	flex-grow: 1;
	height: 2em;
	background: #222;
	color: #FFF;
	border: 2px solid #000;
}

#container {
	padding-bottom: 2.2em;
}

#search-input {
	float: right;
	width: 75%;
	margin: 8px;
	display: none;
}

.search-visible #search-input {
	display: inline;
}

.search-visible .year {
	clear: both;
}

#search-input.no-match {
	background-color: #f88;
}

#date-input {
	position: absolute;
	left: -9999em;
	top: 0;
}

@media (min-device-width: 800px), (min-width: 600px) {
/* on mobile devices the calendar widget is usable even if <input> is outside the view */
	#date-input:focus {
		position: fixed;
		top: 2em;
		left: 10%;
		width: 80%;
		display: block;
	}
}