/* Layout: the original Herkonu_BabyBlue PHP-Nuke theme: 800px frame, 130px side blocks, 524px center. */
:root {
  color-scheme: light;
  --page: #c0cee0;
  --block: #e1e9f4;
  --line: #9db5cd;
  --frame: #333333;
  --ink: #000000;
  --title: #333333;
  --soft: #4a5868;
  --link: #0000ff;
  --hover: #ff0000;
  --hunt: #fff6d8;
  --win-grey: #c0c0c0;
  --win-blue: #000080;
  --amp-bg: #23233a;
  --amp-green: #00e000;
  --font-ui: Verdana, Helvetica, "DejaVu Sans", Arial, sans-serif;
  --font-mono: "Fixedsys", "Lucida Console", "DejaVu Sans Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
.topbar {
  padding-block: 9px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  text-align: center;
  color: #ffffff;
  background: var(--frame);
  border-bottom: 3px solid var(--line);
}
.topbar h1 { margin: 0; font-size: 15px; line-height: 1.35; }
.topbar p { margin: 3px 0 0; font-size: 12px; }
.wrap {
  padding-block: 10px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
body {
  margin: 0;
  font: 12px/1.5 var(--font-ui);
  color: var(--ink);
  background: var(--page) url("../img/arka.gif");
}
a { color: var(--link); font-weight: 700; }
a:hover { color: var(--hover); }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.frame { max-width: 802px; margin-inline: auto; border: 1px solid var(--frame); background: var(--page); }
.logo { display: block; width: 100%; height: auto; }
.nav { display: flex; }
.nav img { display: block; width: 100%; height: auto; }
.nav span { min-width: 0; }
.nav .w62 { flex: 62 1 0; }
.nav .w103 { flex: 103 1 0; }
.nav .w114 { flex: 114 1 0; }
.nav .w120 { flex: 120 1 0; }
.nav .i2:hover img { content: url("../img/2_on.gif"); }
.nav .i3:hover img { content: url("../img/3_on.gif"); }
.nav .i4:hover img { content: url("../img/4_on.gif"); }
.nav .i5:hover img { content: url("../img/5_on.gif"); }
.nav .i6:hover img { content: url("../img/6_on.gif"); }
.nav .i7:hover img { content: url("../img/7_on.gif"); }
.slogan { padding: 3px 8px; font-size: 11px; font-weight: 700; text-align: center; color: var(--title); border-block: 1px solid var(--line); }
.cols { display: grid; grid-template-columns: 130px minmax(0, 1fr) 130px; gap: 4px; padding: 4px; align-items: start; }
.col { display: grid; gap: 8px; min-width: 0; }
.side h2 { margin: 0; height: 16px; font-size: 10px; line-height: 16px; font-weight: 700; text-align: center; color: var(--title); background: url("../img/header.gif") center / 100% 100% no-repeat; }
.side .in { margin-top: 1px; padding: 5px; border: 1px solid var(--frame); background: var(--block) url("../img/back1.gif"); font-size: 11px; overflow-wrap: anywhere; }
.side .end { height: 16px; background: url("../img/header_down.gif") center / 100% 100% no-repeat; }
.news h2 { margin: 0; min-height: 15px; font-size: 11px; line-height: 15px; font-weight: 700; text-align: center; color: var(--title); background: url("../img/header_news.gif") center / 100% 100% no-repeat; }
.news .in { padding: 8px 10px; background: var(--block); }
.news .in > :first-child { margin-top: 0; }
.news .in > :last-child { margin-bottom: 0; }
.news .end { height: 20px; background: url("../img/header_news_down.gif") center / 100% 100% no-repeat; }
.news.call .in { background: var(--hunt); }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: 1px 0; }
.plain li.baba { font-weight: 700; }
.lead { font-size: 13px; }
.when { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 8px; margin: 0; }
.when dt { font-weight: 700; color: var(--title); font-variant-numeric: tabular-nums; }
.when dd { margin: 0 0 6px; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
td, th { padding: 1px 4px; text-align: left; border-bottom: 1px solid var(--line); }
td.n, th.n { text-align: right; }
th { color: var(--title); }
.names p { margin: 0 0 5px; }
.names b { color: var(--title); }
.tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.amp { background: var(--amp-bg); color: var(--amp-green); border: 2px outset #8a8aa8; padding: 5px; font-family: var(--font-mono); font-size: 10px; overflow-wrap: anywhere; }
.amp .bar { display: flex; align-items: flex-end; gap: 2px; height: 20px; margin-top: 5px; }
.amp .bar i { flex: 1; background: var(--amp-green); height: 40%; animation: eq 1.4s ease-in-out infinite alternate; }
.amp .bar i:nth-child(2n) { animation-duration: .9s; height: 70%; }
.amp .bar i:nth-child(3n) { animation-duration: 1.9s; height: 25%; }
.amp .off { margin-top: 5px; color: #ffe08a; }
@keyframes eq { to { height: 95%; } }
@media (prefers-reduced-motion: reduce) { .amp .bar i { animation: none; } }
.mirc { border: 2px outset var(--win-grey); background: var(--win-grey); }
.mirc .cap { padding: 2px 6px; background: var(--win-blue); color: #ffffff; font-weight: 700; font-size: 11px; }
.mirc pre { margin: 3px; padding: 7px; background: #ffffff; color: var(--ink); font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.mirc .s { color: #00007f; }
.mirc .j { color: #009300; }
.mirc .h { color: #7f0000; }
.story { margin: 0 0 12px; border: 1px solid var(--frame); background: #ffffff; }
.story h3 { margin: 0; padding: 3px 8px; font-size: 12px; color: #ffffff; background: #000000; }
.story p { margin: 6px 8px; }
.story .topic { display: inline-block; padding: 0 5px; margin-right: 4px; font-size: 10px; color: var(--title); background: var(--block); border: 1px solid var(--line); }
.story b { color: #0000aa; }
.story .meta { font-size: 11px; text-align: center; color: var(--soft); }
.sidenote { color: var(--soft); font-size: 11px; }
.foot { padding: 6px 8px 8px; font-size: 11px; text-align: center; color: var(--title); background: var(--page); }
.footbar { display: block; width: 100%; height: 16px; }
@media (max-width: 720px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .col.center { order: -1; }
  .side h2, .side .end { background-size: auto 100%; background-repeat: repeat-x; }
  .side .in { font-size: 12px; }
  .nav .edge, .nav .i5, .nav .i6, .nav .i7 { display: none; }
  .nav .w103, .nav .w114, .nav .w120 { flex: 1 1 0; }
}