@font-face { font-family:ensics; src:url(/font.ttf?1); }

body {
  font-family: Arial, sans-serif;
  background: linear-gradient(to right, #235, rgb(82,98,124));
  text-align: center;
  font-size: 12pt;
  color: #fff;
  }

h1, h2, h3 {
  margin: 0.25em 0;
  }

h2 {
  padding-top: 0.25em;
  border-top: 1px solid #ccc;
  }
h3 {
  padding-top: 0.25em;
  }

.code, code { color: #040; }
.code b, code b { color: #404; }

blockquote.code {
  padding: 0.5em;
  font-family:monospace;
  border: 1px solid #000;
  border-radius: 5px;
  background: #eee;
  color: #040;
  }
blockquote.code select, blockquote.code input {
  background: #fff;
  }

button, input[type=submit], input[type=reset] {
  padding: 0.5em;
  background-color: #cce;
  border: 2px solid #000;
  border-radius: 10px;
  font-size: 12pt;
  }
button:hover, input[type=submit]:hover, input[type=reset]:hover {
  background: #eec;
  }

a { color: #ccf; }
a:hover { color: #ff0; }
a:visited { color: #ccf; }

.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.top { vertical-align: top; }
.middle { vertical-align: middle; }

.biglogo {
  display:inline-block;
  font-family: "ensics", Arial, sans-serif;
  text-align: center;
  font-size: 20pt;
  font-variant: small-caps;
  }
.biglogo span > span
  {
  margin:0;
  padding:0;
  display:inline-block;
  text-align:center;
  width:0.9em;
  }

.pagebody
  {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  }

.page {
  flex: 1 0 auto;
  width: 95%;
  margin: 0 auto;
  border-radius: 10px;
  }

.content {
  color: #000;
  background: #fff;
  padding: 0.5em;
  text-align: left;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 0.5em 2.5% 0 2.5%;
  }
.content a { color:#00f; }
.content a:hover { color:#f00; }

.pagemid {
  flex: 1 0 auto;
  width: 95%;
  margin: 1em auto;
  padding: 0.5em;
  border: 2px solid #ffffff;
  border-radius: 10px;
  background: #ddd;
  color: #000;
  }
.pagemid a { color: #00f; }
.pagemid a:visited { color: #00f; }
.pagemid a:hover { color: #80f; }

.pagelower {
  flex-shrink: 0;
  width: 90%;
  margin: 0 auto;
  border-radius: 10px;
  }

.header
  {
  flex-shrink: 0;
  padding-top: 0.5em;
  padding-bottom: 1em;
  }
.header img
  {
  border: 3px solid #222;
  border-radius: 10px;
  }
.header img:hover { border: 3px solid #cc2; }

.footer
  {
  flex-shrink: 0;
  align-self: flex-end;
  font-size: 80%;
  width: 90%;
  margin: 0.5em 5% 0 5%;
  padding-top: 0.5em;
  padding-bottom: 1em;
  border-top: 1px solid #fff;
  }

.pad li
  {
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  }

.black { color:#000; }
.darkred { color:#a00; }
.red { color:#f00; }
.pink { color:#f88; }
.green { color:#0f0; }
.blue { color:#00f; }
.lightgreen { color:#8f8; }
.darkgreen { color:#040; }
.darkblue { color:#008; }
.lightblue { color:#88f; }
.purple { color:#f0f; }
.darkpurple { color:#808; }
.yellow { color:#ff0; }
.white { color:#fff; }
.gray { color:#888; }

.bgblack { background-color:#000 !important; background:#000 !important; }
.bgdarkred { background-color:#a00 !important; background:#a00 !important; }
.bgred { background-color:#f00 !important; background:#f00 !important; }
.bgpink { background-color:#f88 !important; background:#f88 !important; }
.bglightpink { background-color:#fcc !important; background:#fcc !important; }
.bggreen { background-color:#0f0 !important; background:#0f0 !important; }
.bglightgreen { background-color:#8f8 !important; background:#8f8 !important; }
.bgdarkgreen { background-color:#040 !important; background:#040 !important; }
.bgblue { background-color:#00f !important; background:#00f !important; }
.bgdarkblue { background-color:#008 !important; background:#008 !important; }
.bgpaleblue { background-color:#bbf !important; background:#bbf !important; }
.bglightblue { background-color:#88f !important; background:#88f !important; }
.bgpurple { background-color:#f0f !important; background:#f0f !important; }
.bgdarkpurple { background-color:#808 !important; background:#808 !important; }
.bglightpurple { background-color:#f8f !important; background:#f8f !important; }
.bgyellow { background-color:#ff0 !important; background:#ff0 !important; }
.bglightyellow { background-color:#ffc !important; background:#ffc !important; }
.bgwhite { background-color:#fff !important; background:#fff !important; }
.bggray { background-color:#888 !important; background:#888 !important; }
.bglightgray { background-color:#ddd !important; background:#ddd !important; }
.bggraya { background-color:#aaa !important; background:#aaa !important; }
.bggrayb { background-color:#bbb !important; background:#bbb !important; }
.bggrayc { background-color:#ccc !important; background:#ccc !important; }
.bggrayd { background-color:#ddd !important; background:#ddd !important; }
.bggraye { background-color:#eee !important; background:#eee !important; }
.bggrayaf { background: linear-gradient(to right, #aaa, #fff); }

.debug { border: 1px solid red; padding:0.2em; }
.block { display: inline-block; }
.border { border: 1px solid #000; padding:0.2em; }
.point { cursor:pointer; }
.biggap { padding-top: 10%; }
.center { text-align: center !important; }
.top { vertical-align: top !important; }
.middle { vertical-align: middle !important; }
.bottom { vertical-align: bottom !important; }
.left { text-align: left; }
.right { text-align: right; }
.pre
  {
  unicode-bidi: embed;
  font-family: monospace;
  white-space: pre;
  }
.wrap
  {
  word-wrap:break-word;
  overflow-wrap:break-word;
  -webkit-hyphens:auto;
  -ms-hyphens:auto;
  -moz-hyphens:auto;
  hyphens:auto;
  }
.nowrap { white-space: nowrap; }
.round { border-radius: 5px; }
.mbox {
  background-color: #124;
  padding: 12px;
  border: 2px solid #fff;
  border-radius: 10px;
  }
.loginwarn {
  background-color:#fff !important; background:#fff !important;
  color:#f00;
  font-weight:bold;
  padding: 0.2em;
  border:1px solid #888; padding:0.2em;
  border-radius: 5px;
  }
.hide { display:none; }

table.prop { border-collapse: collapse; }
table.prop th { padding:0.5em; padding-right: 1em; vertical-align:middle; }
table.prop td { padding:0.5em; vertical-align:middle; }
table.prop tr { border-bottom: 1px solid #888; border-top: 1px solid #888; }