body, p, h1, h2, h3, h4, h5, h6, table, td, th, li, ul, ol, a, div, span {
  font-family: 'Segoe UI', Tahoma, helvetica;
}
html {
  margin: 0;
  overflow-y: scroll;
}
body {
  font-size: normal;
  color: #000;
  background: #fff;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  margin: 0;
}
div.main {
  margin: 2.6em 1em 1em;
}
div, span, p {
  margin: 0 0 0.5em;
  padding: 0;
}
h1 {
  margin: 0 0 0.5em 0;
  padding: 0;
}
h2 {
  margin: 0 0 0.25em 0;
}
h3 {
  margin: 1em 0 0.2em 0;
  padding: 0;
}
h4 {
  margin: 0.2em 0 0.2em 0;
  padding: 0;
}
table {
  font-size: normal;
  border-style: hidden;
  border-collapse: collapse;
  /*max-width: 1600px;*/
  text-align: left;
  empty-cells: show;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}
td {
  border: solid 1px #ddd;
  width: auto;
  vertical-align: top;
  padding: 0.3em 0.25em;
}
.c table, .c td {
  border-style: hidden;
  margin: 0;
  padding: 0 0.5em 0 0;
}
.p {
  white-space: pre;
}
li, ul, ol {
  /*padding: 0;*/
  /*margin: 0;*/
}
ul {
  list-style-type: square;
}
ol {
  list-style-type: decimal;
  padding-left: 2em;
}
.changes {
  font-size: smaller;
}
ul.changes {
  margin-top: 0.7em;
  list-style-type: square;
  padding-left: 1.4em;
}
img {
  border: none;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
  background: transparent;
}
a:link {
  color: #555;
  background: transparent;
  text-decoration: underline;
}
a:visited {
  color: #000;
  background: transparent;
  text-decoration: underline;
}
a:active {
  color: #333;
  background: transparent;
  text-decoration: underline;
}
a:hover {
  color: #333;
  background: #f0f0f0;
  text-decoration: underline;
}
.b a {
  text-decoration: none;
}

ul.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000;
  position: fixed;
  top: 0;
  width: 100%;
}
li.menu {
  float: left;
  border-right: 1px solid #999;
}
li.menu a {
  display: block;
  color: #fff;
  text-align: center;
  padding: 0.15em 1em;
  text-decoration: none;
}
li.menu a:hover:not(.active) {
  background-color: #345;
}
.menu.active {
  background-color: #456;
}
a.new {
  background: #ff0;
}
.date {}

@media (prefers-color-scheme: light) {
  .dark { display: none; }
  a.light { display: contents; }
  img.screenshot {
    margin: 0 1.5em 2em 0;
    vertical-align: bottom;
    background: transparent;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.10), 0px 10px 20px rgba(0, 0, 0, 0.15);
    background-color: rgba(0, 0, 0, 0.15);
  }
}

@media (prefers-color-scheme: dark) {
  .light { display: none; }
  a.dark { display: contents; }
  img.screenshot {
    margin: 0 1.5em 2em 0;
    vertical-align: bottom;
    background: transparent;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.10), 0px 10px 20px rgba(0, 0, 0, 0.95);
    background-color: rgba(0, 0, 0, 0.15);
  }
  body {
    color: #c0c0c0;
    background: #202020;
  }
  a:link {
    color: #aaa;
  }
  a:visited {
    color: #ccc;
  }
  a:active {
    color: #ccc;
  }
  a:hover {
    color: #fff;
    background: #0f0f0f;
  }
  ul.menu {
    background-color: #666;
  }
  li.menu {
    border-right: 1px solid #666;
  }
  li.menu a {
    color: #000;
  }
  li.menu a:hover:not(.active) {
    background-color: #789;
  }
  .menu.active {
    color: #ccc;
    background-color: #678;
  }
  a.new {
    background: #ff0;
  }
  input, textarea {
    color: #ccc;
    background: #2f2f2f;
    border: 1px solid #505050;
  }
}