body {
    background-image: 
		linear-gradient(to bottom, 
			rgba(255,255,255,0) 0%,
			rgba(255,255,255,0) 80%, /* upper 80% are untouched */
			rgba(255,255,255,1) 100%
		), 
		url("/_/img/zaehler.jpg");
	background-attachment: fixed; /* does not move when scrolling */
    background-color: white; /* color under and below image */
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

header {
	padding-top: 0.7em;
	padding-right: 0.7em;
	padding-left: 0.7em;
	background-color: rgba(255, 255, 255, 0.7);
}

.content, 
.navi {
	background-color: white;
}

footer {
	margin-top: 0.7em;
	background-color: rgba(255, 255, 255, 0.8);
	box-shadow: 0 -2px 8px grey;
}

#navi0 {
   background-color: rgba(255, 255, 255, 0.7);
}

#navi1 {
	background-color: rgba(255, 255, 255, 0.9);
}

#navi0 + .content,
#navi0 .active {
	background-color: rgba(255, 255, 255, 0.9);
}

#logo {
	font-size: 1.3rem;
}

.mgmt {
	background: rgb(159,155,238);
	background: linear-gradient(90deg, rgba(159,155,238,1) 0%, rgba(204,155,55,1) 53%, rgba(121,189,17,1) 100%);
}

@media only screen and (min-width: 800px) {
	#outer {
		margin-left: 15%;
		margin-right: 15%;
  	}
}

@media only screen and (min-width: 900px) {
	#logo {
		font-size: 2.5rem;
	}
}

/* --------- EventFlags --------- */
/* No flag is set */
.book0 {
	/* Kein Publikumsverkehr: grün */
	background: hsla(85, 100%, 60%, 0.6);
	background: linear-gradient(150deg, 
		hsla(85, 100%, 60%, 0.4) 0%, 
		hsla(60, 95%, 80%, 0.8) 100%);
	color: hsla(120, 100%, 20%, 1);
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
	border-radius: 5px;
}

/* Flag 1 is set */
.book1 {
	/* Publikumsverkehr: rot */
	background: hsla(25, 100%, 60%, 0.6);
	background: linear-gradient(150deg, 
		hsla(25, 100%, 60%, 0.4) 0%, 
		hsla(60, 95%, 80%, 0.8) 100%);
	color: hsla(0, 100%, 40%, 1);
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
	border-radius: 5px;
}
/* Flag 4 is set */
.book4 {
	/* Reingung, Keine Heizung: Blau */
	background: hsla(230, 100%, 60%, 0.6);
	background: linear-gradient(150deg, 
		hsla(230, 100%, 60%, 0.4) 0%, 
		hsla(60, 95%, 80%, 0.8) 100%);
	color: blue;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
	border-radius: 5px;
}
/* Flag 2 is set */
.book2 {
	/* Vormerkung: gelb */
	background: hsla(60, 95%, 80%, 0.8);
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
	border-radius: 5px;
	color: grey;
}
/* Flag 8 is set */
.book8 {
	/* Schattenbuchung: rot gestrichelter Rand */
	outline: 3px red dashed;
	color: grey;
	width: 98%;
	box-shadow: none;
}
/* Flag 16 is set */
.book16 {
	/* Schaltuhrbuchung: orange */
	background: hsla(290, 100%, 60%, 0.6);
	background: linear-gradient(150deg, 
		hsla(290, 100%, 60%, 0.4) 0%, 
		hsla(60, 95%, 80%, 0.8) 100%);
	color: brown;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
	border-radius: 5px;
}

/* Flag 32 is set */
.book32 {
	/* blue */
	background-color: #7fc7fa;
}
/* Flag 64 is set */
.book64 {
	/* blue stripes */
	background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, 
   	blue 8px, blue 16px);
}
/* Flag 128 is used for collisions! */
.collision {
	/* Intersection of bookings */
	border: 4px red dashed;
	box-shadow: none;
	color: #663300;
}
/* Does it work? Make every second event move to the right so it stands out below a different event */
.collision::nth-of-type(odd) { left: 10px; }