html {
    font-family:DejaVu Sans Mono,Lucida Console,Monaco,monospace;
    font-size: 13px
}

body {
    background-color: #FFF;
    margin-bottom: 10px;
}

html, body { height: 100%; }

h1 { font-size: 15px }
h2 { font-size: 13px }
h3 { font-size: 12px }

p { font-size: 12px }

a { color: #000; }
a:hover { text-decoration: underline; color: orange; }
a.button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;

  text-decoration: none;
  color: initial;
  padding: 2px 8px;
}
.error {
  color: #F00;
  font-weight: bold;
}

input { font-family: "Lucida Console", Monaco, monospace; font-size: 13px }
select { font-family: "Lucida Console", Monaco, monospace; font-size: 13px }
input[type=submit] { margin-top: 4px; }

#outer { height: 100%; display: flex; justify-content: center; border: 1px solid #DDD; }
#login { width: 320px; align-self: center; background-color: #E0E0E0; border: 1px solid #333333; padding: 8px }
#login-msg { width: 100%; height: 32px; text-align: center; color: red }
#login .label { display: block; white-space: nowrap; float: left; width: 128px }

/* menu */
ul#menu { /* top right bottom left */
  padding: 10px 0px 24px 6px;
}
ul#menu li {
  display: block;
  float: left;
}
ul#menu li a {
  color: #000000;
  background-color: #EBEBE0;
  text-decoration: none;
  padding: 10px 20px;
  border-bottom: 1px solid #999;
  border-right: 2px solid #FFF;
/*    border-radius: 4px 4px 0 0; */
}
ul#menu li a:hover {
  background-color: orange;
}
ul#menu li.active a {
  font-weight: bold;
  color: #FFF;
  background-color: #996;
}

.label { display: block; white-space: nowrap; float: left; clear: left; width: 160px; font-size:13px }
.extlbl { display: block; white-space: nowrap; float: left; width: 160px }
.bar { height: 11px }

/* tables */

table {
    border-collapse: collapse;
    border: 1px solid black;
    font-size: 100%;
    border-spacing: 10px 0;
}
table td {
    padding: 0px 8px;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #999;
}
table tr:last-child td {
    border-bottom: 0;
}

table.hidden { border-spacing: 0px; }
/* table.default { border: 1px solid #999999; } */

table.tabs { border-spacing: 0px }

table.hidden tr { font-size: 13px; }
tr.hline td { border-bottom: 1px solid #999; }

table.hidden td { padding:1px 6px; white-space: nowrap; font-size: 13px }

td.delimiter { border-left: 1px solid #000000; }
td.lrange { border-left: 1px solid #000000; background-color: #EED; }
td.range { background-color: #EED; }
td.grp { background-color: #DDD; }
td.grp1 { background-color: #FFC; }
td.grp2 { background-color: #FCC; }

.tabs a:link, .tabs a:visited { color: #000000;text-decoration: none }
td.first { border-left: 1px solid #999999; border-top: 1px solid #999999; border-right: 1px solid #999999; border-bottom: 1px solid #333333; padding: 3px 8px }
td.inactive { border-top: 1px solid #999999; border-right: 1px solid #999999; border-bottom: 1px solid #333333; padding: 3px 8px }
td.last { border-top: 1px solid #999999; border-right: 1px solid #999999; border-bottom: 1px solid #999999; padding: 3px 8px }
td.active { border-left: 1px solid #333333; border-top: 1px solid #333333; border-right: 1px solid #333333; padding: 3px 8px }
td.content { border-left: 1px solid #333333; border-bottom: 1px solid #333333; border-right: 1px solid #333333; padding: 10px 8px }
td.invalid { background-color: #F00; color: #FFF; font-weight: bold; }

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.lower {
    width: 100%;
    height: 100%;
    margin: auto;
}
.content {
    padding: 0px 6px;
}
iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.full-height { height: 100%; border: 1px solid #F00; }
.container #player { height: 100%; }