.CSS20190108b {display: none}


@font-face {
  font-family: "BentonSans-Regular";
  src: url('fonts_BentonSans-Regular/175c3cc2-34ce-4a57-a6e8-ff10d7c12ec2-2.eot');
  src: url('fonts_BentonSans-Regular/175c3cc2-34ce-4a57-a6e8-ff10d7c12ec2-2.eot?#iefix') format('embedded-opentype'), 
       url('fonts_BentonSans-Regular/175c3cc2-34ce-4a57-a6e8-ff10d7c12ec2-3.woff') format('woff'),
       url('fonts_BentonSans-Regular/175c3cc2-34ce-4a57-a6e8-ff10d7c12ec2-1.ttf') format('truetype'),
       url('fonts_BentonSans-Regular/175c3cc2-34ce-4a57-a6e8-ff10d7c12ec2-4.svg#WebSymbolsRegular') format('svg');
  font-style: normal;
  font-weight: normal;
}


html, body, div, p, textarea {
  border: 0;
  margin: 0;
  padding: 0;
  font-family: "BentonSans-Regular", Helvetica, Arial, "Lucida Grande", sans-serif; 
}


h1, h2, h3, h4, h5 {
  border: 0;
  margin: 0;
  padding: 0;
}


body {
  height: calc(100% - 1rem);
  margin-bottom: 1rem;
}


header {
  border-bottom: 1px solid #444;
  width: 100%;
  height: 2rem;
  background: #222;
  color: #888;
}

header h1 {
  margin: 0;
  padding: 1px 0 0 4px;
  line-height: 2rem;
}


main {
  display: block;
  padding: 1ex;
}


footer {
  border-top: 1px solid #444;
  width: 100%;
  height: calc(1rem + 1px);
  position: fixed;
  bottom: 0;
  z-index: 7;
  background: #222;
  color: #fff;
}

footer p {
  padding: 0 4px;
  font-size: 0.85rem;
  line-height: 1rem;
  text-align: right;
}


a {text-decoration: none; color: #00c}
a:hover {color: #0c0}
a[target=_blank]::before {content: " \1F4C4  "}


td {vertical-align: top}


span.box {
  display: inline-block;
  width: 2em;
  border: 1px solid #ccc;
}
input[type=text] {
  border: 1px solid #ccc;
  margin: 0;
  padding: 0 0 0 2px;
}

.achtung {border: 1px solid #f00; border-radius: 0.5ex; padding: 1ex; margin: 1ex 0 1em 0}
.achtung H4 {color: #f00}

H4 em {border: 1px solid #a00; background: #fc8; border-radius: 4px; padding: 0 2px; font-style: normal}

#divCommandBar {margin: 1ex 0; background: #eee; padding: 0 2px}
#divCommands {display: table}
#divCommands div {display: table-cell; vertical-align: middle; padding-right: 1ex;  white-space: nowrap}
#divCommands input[type=text] {width: 50vw}

#message {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-size: 90%;
  color: red;
  animation: color2transparent 5s 1 ease-in forwards;
}

@keyframes color2transparent {
  to {color: transparent}
}


#divHilfe {margin: 2ex 0; border: 1px solid #ccc; border-radius: 0.5ex; padding: 1ex; font-size: 90%}
#divHilfe p {margin-top: 0.5em}
#divHilfe H3 {margin-top: 1em}
#divHilfe H3:first-child {margin-top: 0}
#divHilfetext {margin-top: 1ex; border-top: 1px solid #888; padding-top: 1ex; display: none}
#divHilfe big, #divHilfetext big {display: inline-block; padding: 0 0.7ex; border:1px solid #888}
#lblHilfe {cursor: pointer; user-select: none; font-size: 150%; font-weight: bold; color: #00f; animation: flash 1.5s 3}
#chkHilfe {position: absolute; top: -9999px; left: -9999px}
#chkHilfe:checked ~ #divHilfetext {display: block}

@keyframes flash {
  0% {opacity: 1}
  50% {opacity: .2} 
  100% {opacity: 1}
}

.notmobile {display:none}


/*** Desktop ***/
@media (min-width: 50em) {

.notmobile {display:inline-block}
#divCommands input[type=text] {width: 30vw}

}


/*** NRW-Farben: ***/
.col0 {color: #888; background: #222}
.col1 {color: #0b0}
.col2 {color: #fff; text-shadow: 0 0 2px #000}
.col3 {color: #f00}