@charset "UTF-8";

body {
	display: flex;
	flex-direction: column;
	max-width: 75em;
	margin: 0 auto;
	font-family: Verdana, Tahoma, Sans-Serif;
}

h1 {
	font-size: 1.5em;
}

h2 {
	font-size: 1.4em;
}

header, footer {
	background-color: #eee;
	padding: .5em;
}

section, article, aside, address {
	border-radius: 8px;
	border: 1px dotted #666;
	margin: 0.3em;
	padding: 1em;
}

section {
	background-color: snow;
}

table {
	width: 100%;
	border-collapse: collapse;
}

td, th {
	border: 1px solid #666;
	font-size: 0.7em;
	padding: .1em;
}

tr {
	background-color: #eee;
}

td.T {
	background-color: LightGreen;
}

td.F {
	background-color: LightPink;
}

td.I {
	background-color: LightBlue;
}

td.W {
	background-color: Yellow;
}

.c {
	text-align: center;
}

.r {
	text-align: right;
}

.button {
	border: 2px solid LightGrey;
	color: white;
	padding: 1px;
	text-align: center;
	text-decoration: none;
	vertical-align: text-top;
	display: inline-block;
	font-size: 9px;
	margin: 1px;
	cursor: pointer;
	width: 96px;
	height: 48px;
	display: inline-block;
}

.commandbutton {
	border: 2px solid LightGrey;
	width: 96px;
	height: 48px;
}

.avblamp_on {
	background-color: #00ff00;
	color: Black;
}

.avblamp_off {
	background-color: DarkGreen;
	color: White;
}

.mimicrahmen{
	position: fixed; 
	top: 0px;
	left: 0px;
	width: 820px;
	height: 420px;
	border: 3px solid Grey;
	background-color: Beige;

}
.mimic{
	position: absolute; 
	top: 7px;
	left: 7px;
}

.lkw{
	width: 55px;
	height: 20px;
	opacity: 0.3;
	border: 2px solid Blue;
	position: absolute;
	left: 57px;
	top: 72px;
	background-color: Red;
}

@keyframes lkw-on  {
  0% { rotate: 0deg; top: 72px; left: 57px;}
  50% { rotate: 60deg; top: 53px; left: 80px;}
  60% { rotate: 60deg; top: 53px; left: 80px;}
  61% { rotate: 50deg; top: 55px; left: 77px;}
  62% { rotate: 60deg; top: 53px; left: 80px;}
  63% { rotate: 50deg; top: 55px; left: 77px;}
  64% { rotate: 60deg; top: 53px; left: 80px;}
  65% { rotate: 50deg; top: 55px; left: 77px;}
  66% { rotate: 60deg; top: 53px; left: 80px;}
  75% { rotate: 60deg; top: 53px; left: 80px;}
  100% { rotate: 0deg; top: 72px; left: 57px;}
}

.lkw-on{
	animation: lkw-on 20s ease-in-out infinite;
	background-color: Green;
	animation-delay: 1s;
}

.rotor{
	width: 80px;
	height: 80px;
	background-image: url("img/rotor.png");
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 50%;
	opacity: 0.3;
	position: absolute;
	left: 145px;
	top: 170px;
}

@keyframes rotor-on  {
  0% { rotate: 0deg;}
  50% { rotate: 45deg;}
  100% { rotate: 90deg;}
}
.rotor-on{
	animation: rotor-on 0.3s linear infinite;
	background-color: Green;
}

.rotor-off{
	/* no animation */
	background-color: Red;
}

@keyframes belt-on  {
  0% {background-color: LightGreen;}
  25% {background-color: DarkGreen;}
  50% { background-color: LightGreen;}
  75% { background-color: DarkGreen;}
  100% { background-color: LightGreen;}
}

.belt1{
	width: 148px;
	height: 29px;
	opacity: 0.3;
	border-radius: 16px;
	position: absolute;
	left: 116px;
	top: 296px;
	background-color: Red;
}

.belt1-on{
	animation: belt-on 3s linear infinite;
	animation-fill-mode: forwards;
}

.belt2{
	width: 397px;
	height: 28px;
	opacity: 0.3;
	rotate: -45deg;
	border-radius: 14px;
	position: absolute;
	left: 192px;
	top: 217px;
	background-color: Red;
}

.belt2-on{
	animation: belt-on 3s linear infinite;
	animation-fill-mode: forwards;
}

@keyframes bildlaufx {
  0% { background-image:  linear-gradient(to right, beige, grey, lightsalmon, brown, coral, beige, grey, lightsalmon, brown, coral, beige, grey); }
  20% { background-image:  linear-gradient(to right, coral, beige, grey, lightsalmon, brown, coral, beige, grey, lightsalmon, brown, coral, beige); }
  40% { background-image:  linear-gradient(to right, brown, coral, beige, grey, lightsalmon, brown, coral, beige, grey, lightsalmon, brown, coral); }
  60% { background-image:  linear-gradient(to right, lightsalmon,  brown, coral, beige, grey, lightsalmon, brown, coral, beige, grey, lightsalmon, brown); }
  80% { background-image:  linear-gradient(to right, grey, lightsalmon, brown, coral, beige, grey, lightsalmon, brown, coral, beige, grey, lightsalmon); }
  100% { background-image:  linear-gradient(to right, beige, grey, lightsalmon, brown, coral, beige, grey, lightsalmon, brown, coral, beige, grey); }
}

.bandlauf1{
	width: 148px;
	height: 28px;
	opacity: 0.3;
	border-radius: 16px;
	position: absolute;
	left: 116px;
	top: 296px;
	background-color: Red;
}

.bandlauf1-on{
	animation: bildlaufx 1s linear infinite;
}

.bandlauf2{
	width: 397px;
	height: 28px;
	opacity: 0.3;
	rotate: -45deg;
	border-radius: 14px;
	position: absolute;
	left: 192px;
	top: 217px;
	background-color: Red;
}

.bandlauf2-on{
	animation: bildlaufx 2s linear infinite;
}

@keyframes blinkgn {
  0% { background-color: LightGreen; }
  50% { background-color: DarkGreen; }
  100% { background-color: LightGreen; }
}

.blink-gn {
	animation: blinkgn 1s linear infinite;
}

@keyframes blinkrd {
  0% { background-color: Red; }
  50% { background-color: DarkRed; }
  100% { background-color: Red; }
}

.blink-rd {
	animation: blinkrd 1s linear infinite;
}

@keyframes blinkgb {
	0% { background-color: Yellow; }
	50% { background-color: DarkGoldenRod; }
	100%{ background-color: Yellow; }
}

.blink-gb {
	animation: blinkgb 1s linear infinite;
}

@keyframes blinkws {
	0% { background-color: White; }
	50% { background-color: Grey; }
	100%{ background-color: White; }
}

.blink-ws {
	animation: blinkws 1s linear infinite;
}

.runlamp_allinop {
	background-color: #00ff00;
	color: Black;
}

.runlamp_somedif {
	background-color: #000066;
	color: White;
}

.runlamp_alldown {
	background-color: #006600;
	color: White;
}

.startbutton_on {
	background-color: #ffffff;
	color: Black;
}

.startbutton_off {
	background-color: #666666;
	color: White;
}
.trichterbutton_on {
	background-color: DarkGoldenRod;
	color: White;
}

.trichterbutton_off {
	background-color: Yellow;
	color: Black;
}

.stopbutton_on {
	background-color: #ff0000;
	color: White;
}

.stopbutton_off {
	background-color: #660000;
	color: White;
}

.button1 {
	background-color: #ff0000;
} /* Red on */
.button2 {
	background-color: #660000;
} /* Red off */
.button3 {
	background-color: #ffffff;
	color: Black;
} /* White on */
.button4 {
	background-color: #666666;
} /* White off */
.button5 {
	background-color: #00cc00;
	color: White;
} /* White on */
.button6 {
	background-color: #006600;
	color: White;
} /* White off */
img {
	border: 3px solid Grey;
}