/* Layout copied from linux.org as it stood in 2005: a coloured masthead bar, a
   left column of boxed navigation sections, and a white content well. Aperture
   supplies the two colours and nothing else.

   Fluid rather than the original's fixed 850px. That width existed because
   screens were 1024x768; reproducing it on a modern display is not period
   accuracy, it is a narrow strip of text between two fields of grey. Type is
   scaled up for the same reason: 11px was legible on a 15 inch CRT. */

body {
  background: #e8e8e8;
  color: #000;
  margin: 0;
  padding: 0;
  font-family: Verdana, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

a { color: #964b00; }
a:visited { color: #6b3600; }
a:hover { color: #f28c1e; }

#page {
  width: 100%;
  background: #fff;
}

#masthead {
  background: #b35900;
  padding: 12px 18px;
  overflow: hidden;
}
#masthead img { float: left; margin-right: 12px; }
#masthead .name {
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  text-decoration: none;
}
#masthead .sub { color: #f4e2c8; font-size: 14px; display: block; }

#bar {
  background: #f4e6d0;
  border-top: 1px solid #b35900;
  border-bottom: 1px solid #b35900;
  padding: 5px 18px;
  font-size: 13px;
}
#bar a { text-decoration: none; }
#bar a:hover { text-decoration: underline; }

#body { overflow: hidden; padding: 14px 18px 24px; }
#sidebar { float: left; width: 210px; }
#content { margin-left: 228px; }

.box { margin-bottom: 10px; }
.box .t {
  background: #b35900;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 3px 7px;
}
.box ul {
  margin: 0;
  padding: 6px 6px 7px 24px;
  background: #f4e6d0;
  border: 1px solid #d8bc94;
  border-top: 0;
  font-size: 13px;
  list-style: square;
}
.box li { margin: 2px 0; }
.box a { text-decoration: none; }
.box a:hover { text-decoration: underline; }

h1 {
  font-size: 26px;
  font-weight: bold;
  margin: 0 0 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid #b35900;
}
h2 {
  font-size: 19px;
  font-weight: bold;
  margin: 18px 0 5px;
  padding-bottom: 2px;
  border-bottom: 1px solid #ccc;
}
h3 { font-size: 16px; font-weight: bold; margin: 16px 0 5px; }

p { margin: 8px 0; }
ul, ol { margin: 8px 0; padding-left: 22px; }
li { margin: 3px 0; }

/* The page fills the screen; the prose does not. At 1600px an uncapped
   paragraph runs to about 157 characters a line, and the eye loses its place
   on the way back to the left margin. Capped here rather than by narrowing the
   whole column, so tables, code and screenshots still get the full width. */
#main > p,
#main > ul,
#main > ol,
#main > dl,
#main > .note { max-width: 48em; }

code {
  font-family: "Courier New", monospace;
  background: #f4f4f4;
  border: 1px solid #ddd;
  padding: 0 3px;
  font-size: 13px;
}
pre {
  font-family: "Courier New", monospace;
  background: #f8f8f8;
  border: 1px solid #ccc;
  padding: 7px 9px;
  overflow-x: auto;
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.45;
}
pre code { background: none; border: 0; padding: 0; }

.toc {
  display: table;
  background: #f9f9f9;
  border: 1px solid #ccc;
  padding: 7px 18px 7px 7px;
  margin: 12px 0;
  font-size: 13px;
}
.toc .h { font-weight: bold; text-align: center; margin-bottom: 3px; }
.toc ol { margin: 0; padding-left: 22px; }

.note {
  background: #f4e6d0;
  border: 1px solid #d8bc94;
  padding: 6px 9px;
  margin: 10px 0;
}

table.data { border-collapse: collapse; margin: 12px 0; font-size: 13px; }
table.data th, table.data td {
  border: 1px solid #ccc;
  padding: 3px 7px;
  text-align: left;
  vertical-align: top;
}
table.data th { background: #f4e6d0; }

.infobox {
  float: right;
  width: 280px;
  border: 1px solid #ccc;
  background: #f9f9f9;
  margin: 0 0 12px 16px;
  font-size: 13px;
}
.infobox .ib-t {
  background: #b35900;
  color: #fff;
  font-weight: bold;
  padding: 3px 6px;
  text-align: center;
}
.infobox table { border-collapse: collapse; width: 100%; }
.infobox td { padding: 2px 6px; border-bottom: 1px solid #e2e2e2; }
.infobox tr:last-child td { border-bottom: 0; }
.infobox td:first-child { color: #555; width: 42%; }

table.dl { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 13px; }
table.dl th, table.dl td {
  border: 1px solid #ccc;
  padding: 4px 7px;
  text-align: left;
  vertical-align: top;
}
table.dl th { background: #f4e6d0; }
table.dl td.size { white-space: nowrap; }

.shot { margin: 12px 0; }
.shot img {
  display: block;
  border: 1px solid #999;
  width: 100%;
  max-width: 1280px;
  height: auto;
}
.shot .cap { font-size: 13px; color: #444; margin-top: 4px; }

/* Borrowed diagrams, floated right the way a 2005 wiki floated a thumbnail.
   Width is fixed rather than a percentage because these sit beside prose that
   is itself capped at 48em: a figure that grows with the viewport would swallow
   the column it is supposed to annotate. Diagrams get a white plate behind them
   -- most were drawn for a white page and several have transparent
   backgrounds, so on any other colour the linework disappears. */
figure.fig {
  float: right;
  width: 320px;
  margin: 4px 0 12px 18px;
  border: 1px solid #ccc;
  background: #f9f9f9;
  padding: 6px;
  font-size: 12px;
  line-height: 1.5;
}
figure.fig img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}
figure.fig figcaption { color: #444; margin-top: 5px; }
figure.fig .credit { display: block; color: #777; margin-top: 3px; font-size: 11px; }
figure.fig .credit a { color: #777; }

/* A figure wider than the text it interrupts, for the two diagrams that are
   unreadable at 320px. */
figure.fig.wide { float: none; width: auto; max-width: 48em; margin: 14px 0; }

.wikilist { list-style: square; }
.wikilist span { color: #555; }

.seealso { margin-top: 18px; padding-top: 6px; border-top: 1px solid #ccc; }
dl.faq dt { font-weight: bold; margin-top: 10px; }
dl.faq dd { margin: 3px 0 0 20px; }

#footer {
  clear: both;
  background: #f4e6d0;
  border-top: 1px solid #b35900;
  padding: 8px 18px;
  font-size: 12px;
  color: #555;
}
#footer p { margin: 3px 0; }

.crumbs { font-size: 13px; color: #555; margin-bottom: 8px; }
.crumbs a { color: #555; }

.listing { border-collapse: collapse; width: 100%; font-size: 13px; }
.listing th {
  border-bottom: 1px solid #999;
  text-align: left;
  padding: 2px 8px 2px 0;
}
.listing td { padding: 2px 8px 2px 0; border-bottom: 1px solid #eee; }
.icon { color: #777; display: inline-block; width: 2.6em; }

.skip { position: absolute; left: -9999px; }

@media (max-width: 45rem) {
  #sidebar { float: none; width: auto; }
  #content { margin-left: 0; }
  .infobox { float: none; width: 100%; margin-left: 0; }
  figure.fig { float: none; width: auto; margin-left: 0; margin-right: 0; }
  #body { padding: 10px; }
  #masthead, #bar, #footer { padding-left: 10px; padding-right: 10px; }
}

/* --- forge components -------------------------------------------------
   Added when the front page stopped being an encyclopedia article and became
   a project summary. The reference is a mid-2000s software forge: facts in
   dense tables, releases in a list, news as dated entries. Nothing here
   introduces a colour; it is the same two ambers the rest of the site uses.  */

/* A section heading that carries a bar, the way a forge boxed each block of
   its summary page. Distinct from h2, which the wiki articles use and which
   must keep its quieter rule. */
h2.sect {
  background: #b35900;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 3px 8px;
  margin: 20px 0 0;
  border: 0;
}
h2.sect:first-child { margin-top: 0; }
h2.sect a { color: #f4e2c8; font-weight: normal; font-size: 12px; float: right; }

/* The block under a barred heading, so the bar and its contents read as one
   panel rather than a heading floating above loose text. */
.sect + table.forge, .sect + .panel { margin-top: 0; }
.panel {
  border: 1px solid #d8bc94;
  border-top: 0;
  padding: 8px 10px;
}
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

table.forge {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 4px;
  font-size: 13px;
}
table.forge th, table.forge td {
  border: 1px solid #d8bc94;
  padding: 4px 8px;
  text-align: left;
  vertical-align: top;
}
table.forge th { background: #f4e6d0; font-weight: bold; }
table.forge td.size { white-space: nowrap; }
table.forge tr:hover td { background: #fdf7ee; }

/* Wide tables scroll inside themselves rather than widening the page. The
   download table has five columns and one of them is prose. */
.scroll { overflow-x: auto; }

/* A news entry. Date first, because on a project page the question is always
   how recently anything happened. */
.news { margin: 0 0 14px; }
.news .nh { font-weight: bold; font-size: 15px; }
.news .nd {
  display: inline-block;
  background: #f4e6d0;
  border: 1px solid #d8bc94;
  color: #6b3600;
  font-size: 12px;
  font-weight: normal;
  padding: 0 5px;
  margin-right: 7px;
}
.news p { margin: 4px 0; max-width: 48em; }
.news .nl { font-size: 12px; color: #555; }

/* The sidebar's panel, replacing the bordered ul. One frame per box: the
   release box holds a table and a list, and two frames inside one heading
   reads as two boxes that lost their headings. */
.box .bd {
  background: #f4e6d0;
  border: 1px solid #d8bc94;
  border-top: 0;
  padding: 6px 7px;
  font-size: 13px;
}
.box .bd ul {
  margin: 0;
  padding: 0 0 0 18px;
  background: none;
  border: 0;
  list-style: square;
}
.box .bd table.facts + ul {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #d8bc94;
}

table.facts { border-collapse: collapse; width: 100%; font-size: 12px; }
table.facts td { padding: 1px 0; vertical-align: top; }
table.facts td:first-child { color: #6b3600; padding-right: 8px; width: 42%; }

/* A line of qualifying text under a table -- the checksum note, mostly. Small
   enough to read as an aside and not so small it reads as a disclaimer. */
p.small { font-size: 12px; color: #555; margin: 4px 0 0; max-width: 48em; }

/* The 48em cap again, for prose that now sits inside a panel. The original
   rule targets #main > p, and wrapping the front page's paragraphs in panels
   took them out of its reach -- which put back exactly the 157-character line
   the cap was added to prevent. Tables are left alone deliberately: they are
   the one thing that wants the full column. */
.panel > p, .panel > ul, .panel > ol, .panel > dl { max-width: 48em; }

/* --- the tab strip ----------------------------------------------------
   Replaces the pipe-separated bar. A forge put tabs here, and the active one
   is the part that earns the change: it says which of eight areas the reader
   is standing in, which a line of links cannot. The active tab is pushed down
   a pixel so it covers the strip's own bottom border and reads as continuous
   with the page below it, rather than as a control floating above it. */
#tabs {
  background: #f4e6d0;
  border-top: 1px solid #b35900;
  border-bottom: 1px solid #b35900;
  padding: 5px 18px 0;
}
#tabs ul { margin: 0; padding: 0; list-style: none; }
#tabs li { display: inline-block; }
#tabs a {
  display: inline-block;
  padding: 4px 11px;
  margin-right: 2px;
  border: 1px solid #d8bc94;
  border-bottom: 0;
  background: #ecdcc0;
  color: #6b3600;
  text-decoration: none;
  font-size: 12px;
}
#tabs a:hover { background: #f9f1e3; color: #964b00; }
#tabs li.on a {
  position: relative;
  top: 1px;
  background: #fff;
  border-color: #b35900;
  color: #000;
  font-weight: bold;
}

/* Sidebar boxes are denser now that there are five of them: this column
   carries categorisation and counts rather than prose, and the forge it is
   modelled on fitted the whole of a project's facts above the fold. */
.box { margin-bottom: 8px; }
.box .t { font-size: 12px; }
.box .bd { font-size: 12px; padding: 5px 7px; }

@media (max-width: 45rem) {
  /* Content before the column. The sidebar is five boxes of categorisation
     now, and in source order it sits above the page, so a phone reader
     scrolled the whole of it before reaching what they came for. Flex is used
     only to reorder: the floats inside are inert in a flex container, which
     is exactly what the narrow layout already wanted. */
  #body { display: flex; flex-direction: column; }
  #content { order: 1; }
  #sidebar { order: 2; }
  #tabs { padding: 5px 10px 0; }
  #tabs a { padding: 4px 8px; }
}

/* --- the masthead, once it carried a wordmark --------------------------
   White, because the artwork is black on transparent and was drawn for a
   light ground. Recolouring a mark to suit a band we chose is the wrong way
   round, so the band went instead -- the amber is still the tab strip's
   borders, every section bar, every link and the footer, which is more of it
   than a solid slab was.

   These override the earlier #masthead rules rather than replacing them in
   place: the old ones floated a 34px icon beside a text logotype, and there
   is no text logotype now.

   The mark is taken out of the flow and laid over the band. In flow it was a
   block the layout had to make room for, so its height set the masthead's
   height and swapping the artwork for a taller or shorter file moved
   everything under it. Positioned, it sits on top and the band's height is a
   number stated here instead -- the reserved top padding. The artwork can
   change size, or be replaced entirely, and nothing below it moves.

   The padding is what reserves the space, rather than the image doing it, and
   that is the whole point: it is stated once and it does not depend on what
   the file happens to be. The tagline stays in normal flow so it can still
   wrap to two lines on a narrow screen and push the band taller, which is the
   one thing that should still be allowed to. */
#masthead {
  position: relative;
  background: #fff;
  padding: 68px 18px 12px;
}
#masthead .mark {
  position: absolute;
  left: 18px;
  top: 14px;
  line-height: 0;
  text-decoration: none;
}
#masthead img {
  float: none;
  margin: 0;
  display: block;
  height: 46px;
  width: auto;
  max-width: 100%;
}
#masthead .sub {
  display: block;
  color: #555;
  font-size: 13px;
}

@media (max-width: 45rem) {
  #masthead { padding: 52px 10px 10px; }
  #masthead .mark { left: 10px; top: 10px; }
  #masthead img { height: 34px; }
}

/* The wiki list ran the article name straight into its description with
   nothing between them -- "GLaDOS OSWhat the system is". A colour change
   alone is not a separator when both halves are the same size and sit on one
   line. */
.wikilist span::before { content: " \2014 "; color: #999; }