/* Overall */
* {
  box-sizing:border-box;
}
body, html {
  margin:auto;
  border:0;
  height:100%;
  width:100%;
  font-family:Arial, Helvetica, sans-serif;
}
/* Common colours */
:root {
  --tv-dk:#659D98;
  --tv-lt:#dfdfff;
  --tv-fixed-link:#4646ac;
  --tv-ok:#00e000;
  --tv-probbg:#ff9f9f;
  --tv-possbg:#ffcf9f;
  --tv-warnbg:#ffff9f;
  --tv-infobg:#9fff9f;
  --tv-highlight:#659D98;
  --tv-disabled:#808080;
  --tv-wrap:#c5c5c5;
  --tv-border:#7f7f7f;
  --tv-dot:#bbbbbb;
  --tv-doth:##717171;
  --tv-fixed-error:#c70000;
}

/* Fix Chrome 83+ blue checkboxes/radios */
input[type='checkbox']:checked {-webkit-filter: grayscale(100%);}
input[type='radio']:checked {-webkit-filter: grayscale(100%);}

/* Skip navigation */
#skip a, #skip a:hover, #skip a:visited {
  position:absolute;
  left:0;
  top:-40px;
  color:var(--tv-bg);
  background-color:var(--tv-dk);
  padding:6px;
  transition:top 1s ease-out;
  z-index:100;
}
#skip a:active, #skip a:focus {
  position:absolute;
  left:0;
  top:0;
  transition:top .2s ease-in;
}

/* Main web page */
.main {
  margin:0 auto;
  display:flex;
  flex-flow:column;
  height:100%;
  width:100%;
}
main {
  /* Styles werden jetzt über .tv-page-main verwaltet */
  width: 100%;
}

/* Page header */
.pagehead {
  background-color:#2D2F38;
  text-align:left;
  padding:14px 26px;
}
.pagehead img {
  border:none;
  vertical-align:middle;
  height:45px;
  margin-right:23px;
}
.pagehead a:link { text-decoration:none; color:var(--tv-bg) }
.pagehead a:visited { text-decoration:none; color:var(--tv-bg) }
.pagehead a:hover { color:var(--tv-dk) }
.pagehead h1 {
  color:#ffffff;
  font-weight:normal;
  font-size:130%;
  display:flex;
  align-items:center;
  margin:0;
}

/* Nav bar */
.topnavbar {
  text-align:center;
  color:var(--tv-dk);
  background-color:var(--tv-lt);
  font-weight:bold;
}
.topnavbar ul {
  margin:0;
  padding:2px;
}
.topnavbar li {
  list-style-type:none;
  margin:0;
  padding:5px 0;
}
.dropdown, .navitem {
  display:inline-block;
  color:var(--tv-fixed-link);
}
.dropdown:hover, .dropdown:focus,
.navitem:hover, .navitem:focus, .navitem a:hover, .navitem a:focus,
.search:hover, .search:focus, .search a:hover, .search a:focus
{
  color:var(--tv-bg);
  background-color:var(--tv-dk);
  text-decoration:none;
}
.navitem:hover .navlink, .navitem:focus .navlink,
.navitem:hover .dh, .navitem:focus .dh, .navitem:hover .dt, .navitem:focus .dt
{
  color:var(--tv-bg);
}
.navlink {
  margin:0 6px;
}

/* Ref/Help Nav */
h2 a:link, h2 a:visited {
  color:var(--tv-bg);
  font-weight:normal;
}
h2 a:hover, h2 a:focus {
  text-decoration:underline !important;
}

/* Headings */
h2 {
  color:var(--tv-bg);
  background-color:var(--tv-dk);
  padding-left:5px;
  font-weight:bold;
  font-size:115%;
  margin-top:6px;
}
h3 {
  background-color:var(--tv-backg);
  padding-left:5px;
  font-weight:bold;
  font-size:100%;
}

/* Footer */
div.footer {
  clear:both;
  color:var(--color-zinc-200);
  background-color:#2D2F38;
  font-weight:normal;
  font-size:70%;
  text-align:center;
  margin:2em 0 0;
  padding:10px;
}
div.footer a:link,
div.footer a:visited {
  text-decoration:none;
  color:var(--color-zinc-200);
  font-weight:normal;
}
div.footer a:hover,
div.footer a:focus {
  text-decoration:underline;
  color:var(--color-zinc-50);
  background-color:transparent;
}
div.footer a {
  padding:2px;
}
div.footer p {
  padding:4px;
  margin:0;
}

/* Issues */
span.error {
  color:var(--tv-error);
  font-weight:bold;
}
span.prob {
  color:var(--tv-error);
}
span.perror {
  color:var(--tv-poss);
}
span.warn {
  color:var(--tv-warn);
}
span.problem {
  background-color:var(--tv-probbg);
  color:var(--tv-fg);
  font-weight:bold;
}
span.possible {
  background-color:var(--tv-possbg);
  color:var(--tv-fg);
  font-weight:bold;
}
span.warning {
  background-color:var(--tv-warnbg);
  color:var(--tv-fg);
  font-weight:bold;
}
span.info {
  background-color:var(--tv-infobg);
  color:var(--tv-fg);
  font-weight:bold;
}

/* Div Tables */
.dtable {
  display:table;
  width:100%;
  text-align:left;
  border-spacing:2px;
  margin-bottom:3%;
}
.dthead {
  display:table-header-group;
  background-color:var(--tv-backg);
  font-weight:bold;
}
.dtbody {
  display:table-row-group;
}
.dtr {
  display:table-row;
}
.dtd, .dth {
  display:table-cell;
  border-spacing:2px;
  padding:4px;
  vertical-align:top;
  text-align:left;
}
.dtr .right {
  text-align:right;
}
.dtr .nowrap {
  white-space:nowrap;
}
.dtr .nowrapm {
  white-space:nowrap;
  vertical-align:middle;
}
.dtr .pad {
  width:10%;
}
.dtr .rhs {
  width:80%;
}
.dtr .rhsm {
  width:80%;
  vertical-align:middle;
}
.dtr .bottom {
  vertical-align:bottom;
  width:80%;
}
.dtr .bottoml {
  vertical-align:bottom;
  white-space:nowrap;
}
div.border {
 border:1px solid;
 border-collapse:collapse;
}
div.border .dtd, div.border .dth {
 border:1px solid;
}
div.border .dtr:hover, div.border .dtr:focus {background-color:var(--tv-backg)}

/* General */
.hidden {
  position:absolute;
  left:0;
  top:-500px;
  width:1px;
  height:1px;
  overflow:hidden;
}
a img {
  border:none;
}
img.updown {
  border:none;
  padding-right:5px;
}
.strong {
  font-weight:bold;
}
span.success {
  color:var(--tv-ok);
}
span.em {
  font-style:italic;
  color:var(--tv-fixed-error);
}
div.smalltext {
  padding-top:10px;
  font-size:80%;
}
div.options {
  margin:auto 7%;
}
code, kbd, samp {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
a:link { text-decoration:none; color:var(--tv-link); font-weight:bold}
a:visited { text-decoration:none; color:var(--tv-link); font-weight:bold}
a:hover, a:focus { text-decoration:underline; color:var(--tv-link)}
/* This must be declared after "a:link" to work */
.navitem a {
  color:var(--tv-fixed-link);
  padding-top:5px;
  padding-bottom:7px;
}
