/*
 * Deliberately old-fashioned CSS: no flexbox, grid, custom properties, calc or
 * rem, so it lays out the same on a 2012-era embedded browser as on a new one.
 * Big touch targets because you'll be tapping it while running.
 */
html, body { margin: 0; padding: 0; }
body {
  background: #111;
  color: #eee;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.35;
  -webkit-text-size-adjust: 100%;
}
a { color: #7cc4ff; }
h1 { font-size: 30px; margin: 8px 0 14px; }
h2 { font-size: 24px; margin: 26px 0 10px; }
p { margin: 10px 0; }
img { border: 0; }

.top { background: #1d1d1d; border-bottom: 2px solid #333; padding: 8px 16px; overflow: hidden; zoom: 1; }
.top .brand { float: left; font-size: 28px; font-weight: bold; color: #fff; text-decoration: none; line-height: 64px; }
.top .nav { float: right; }
.wrap { padding: 12px 16px 40px; }

.btn {
  display: inline-block;
  vertical-align: middle;
  min-width: 60px;
  height: 64px;
  line-height: 64px;
  padding: 0 22px;
  margin: 4px 8px 4px 0;
  background: #2a2a2a;
  color: #fff;
  border: 2px solid #444;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 22px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  cursor: pointer;
  overflow: visible;
  -webkit-appearance: none;
}
.btn:hover, .btn:focus { border-color: #888; }
.btn.primary { background: #e4572e; border-color: #e4572e; }
.btn.small { height: 48px; line-height: 48px; font-size: 18px; padding: 0 14px; }
.btn.on { background: #2f5d85; border-color: #7cc4ff; }

.crumbs { font-size: 24px; margin: 4px 0 16px; }
.crumbs .sep { color: #666; }

/* tiles: inline-block grid (works without flexbox) */
.grid { font-size: 0; }
.tile {
  display: inline-block;
  vertical-align: top;
  width: 300px;
  margin: 0 16px 20px 0;
  font-size: 20px;
  text-decoration: none;
  color: #eee;
  background: #1c1c1c;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  overflow: hidden;
}
.tile:hover, .tile:focus { background: #2a2a2a; }
.tile .thumb { display: block; position: relative; width: 300px; height: 169px; background: #000; overflow: hidden; }
.tile .thumb img { display: block; width: 300px; height: 169px; }
.tile .ph { display: block; height: 169px; line-height: 169px; text-align: center; color: #555; font-size: 26px; letter-spacing: 3px; }
.tile .dur { position: absolute; right: 6px; bottom: 10px; background: #000; padding: 1px 8px; font-size: 18px; }
.tile .warn { position: absolute; left: 6px; top: 6px; background: #b8860b; color: #000; font-weight: bold; padding: 0 9px; font-size: 18px; -webkit-border-radius: 12px; border-radius: 12px; }
.tile .bar { position: absolute; left: 0; bottom: 0; height: 6px; background: #e4572e; }
.tile .name { display: block; padding: 10px 12px; height: 52px; line-height: 26px; overflow: hidden; }

/* player */
.pwrap { width: 100%; max-width: 960px; }
.vbox { position: relative; width: 100%; height: 0; padding-top: 56.25%; background: #000; }
.vbox video, .vbox object, .vbox embed, .vbox .linkmode { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; }
.linkmode { text-align: center; padding-top: 15%; }
.ctrls { margin: 10px 0 0; }
.clock { display: inline-block; vertical-align: middle; font-size: 26px; margin-left: 10px; font-family: "Courier New", monospace; }
.modes { margin: 22px 0 6px; color: #aaa; font-size: 18px; }
.navrow { margin: 6px 0 16px; }

/* "big screen": our own full-window mode, so there is always a visible exit button
   even on kiosk browsers without a keyboard or Fullscreen API */
body.pfs { overflow: hidden; }
body.pfs .top, body.pfs .crumbs, body.pfs .modes, body.pfs .navrow, body.pfs .info, body.pfs .dbg, body.pfs .dim { display: none; }
body.pfs .pwrap { position: fixed; left: 0; top: 0; width: 100% !important; height: 100%; max-width: none; z-index: 100; background: #000; }
body.pfs .vbox { height: 100%; padding-top: 0; }
body.pfs #notice, body.pfs #errbox { position: fixed; left: 0; right: 0; top: 0; margin: 0; z-index: 102; }
body.pfs .ctrls { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding: 6px 10px; z-index: 101; background: #000; background: rgba(0, 0, 0, 0.6); }

.msg { background: #1f2a33; border-left: 6px solid #7cc4ff; padding: 12px 16px; margin: 12px 0; }
.msg.err { background: #3a1f1f; border-left-color: #e4572e; }
.msg.ok { background: #1f3322; border-left-color: #4caf50; }
.bad { color: #ff7b6b; font-weight: bold; }
.good { color: #6fdc7a; font-weight: bold; }
.dim { color: #999; font-size: 16px; }
.status { font-size: 20px; }
.row { margin: 10px 0; }

.dbg { margin: 10px 0; padding: 10px; background: #000; color: #9f9; border: 1px solid #333; font-family: "Courier New", monospace; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; max-height: 360px; overflow: auto; }
.jserr { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: #7a1c1c; color: #fff; font-size: 14px; padding: 6px 10px; font-family: "Courier New", monospace; }

.tbl { border-collapse: collapse; margin: 10px 0; }
.tbl th, .tbl td { border: 1px solid #333; padding: 6px 10px; text-align: left; vertical-align: top; }
.tbl th { background: #222; }
.tbl.small { font-size: 14px; }
.tbl.small td, .tbl.small th { padding: 3px 6px; }
.tbl .ua { word-wrap: break-word; word-break: break-all; max-width: 520px; }
.info { font-size: 16px; }

.tvideo { width: 426px; height: 240px; background: #000; margin: 10px 0; }
.tvideo video { width: 426px; height: 240px; background: #000; }
.res-pass { color: #6fdc7a; font-weight: bold; }
.res-fail { color: #ff7b6b; font-weight: bold; }
.res-part { color: #f0c040; font-weight: bold; }

.cssb { width: 1px; height: 1px; overflow: hidden; }