html {
background: #171c20;
color: #d2ccb8;
}

body {
margin: 0;
padding: 18px 8px 30px;
font: 12px/1.45 Verdana, Tahoma, Arial, sans-serif;
background-color: #171c20;
background-image:
  repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.018) 0,
    rgba(255,255,255,.018) 1px,
    transparent 1px,
    transparent 3px
  );
}

::selection {
background: #7d744e;
color: #fffce8;
}

a {
color: #9bb8ad;
text-decoration: underline;
}

a:visited {
color: #9a859c;
}

a:hover {
color: #e1c787;
background: #332f27;
}

code,
pre,
.fileline,
.directory,
.crumb,
.stamp,
.digits,
.lastline {
font-family: "Courier New", Courier, monospace;
}

#page {
width: 890px;
margin: 0 auto;
background: #20262a;
border: 1px solid #77776b;
border-top-color: #a29b82;
box-shadow: 4px 4px 0 #0f1214;
position: relative;
}

.top-rule {
height: 19px;
padding: 3px 7px 0;
box-sizing: border-box;
background: #343b3d;
border-bottom: 1px solid #111;
color: #aaa999;
font: 10px "Courier New", monospace;
letter-spacing: .5px;
}

.top-rule .right {
float: right;
}

header {
min-height: 140px;
padding: 12px 15px 10px;
border-bottom: 1px solid #818074;
background:
  linear-gradient(90deg, transparent 49%, rgba(194,181,137,.035) 50%, transparent 51%),
  #252b2e;
overflow: hidden;
}

.mark {
float: left;
width: 180px;
color: #aaa281;
margin: 0 14px 0 -4px;
}

.mark pre {
margin: 0;
font-size: 10px;
line-height: 1.02;
}

.headtext {
padding-top: 7px;
}

h1 {
margin: 0;
color: #c7c09f;
font: bold 25px Georgia, "Times New Roman", serif;
letter-spacing: 4px;
text-shadow: 1px 1px #080a0b;
}

.subtitle {
margin: -1px 0 8px;
color: #8f927e;
font: italic 13px Georgia, serif;
}

.tiny {
font-size: 10px;
color: #96988d;
}

.warning {
width: 600px;
max-width: 95%;
padding: 5px 7px;
margin: 8px 0 0;
background: #302c27;
border: 1px solid #605c4e;
color: #b9af92;
font-size: 10px;
}

.warning strong {
color: #b97667;
}

.directory {
padding: 7px 10px 6px;
background: #121719;
border-bottom: 1px solid #686960;
font-size: 11px;
}

.directory a {
margin-right: 13px;
white-space: nowrap;
}

.prompt {
color: #8b886f;
margin-right: 9px;
}

.crumb {
background: #77715d;
color: #17191a;
border-bottom: 1px solid #111;
padding: 3px 9px;
font-size: 10px;
font-weight: bold;
}

.crumb span {
float: right;
}

.columns {
display: table;
width: 100%;
table-layout: fixed;
}

main {
display: table-cell;
vertical-align: top;
width: 665px;
padding: 11px 10px 20px 12px;
}

aside {
display: table-cell;
vertical-align: top;
width: 185px;
padding: 11px 10px 15px 0;
}

.section {
margin: 0 0 16px;
border: 1px solid #5c605d;
background: #252b2d;
position: relative;
}

.section:nth-child(even) {
margin-left: 3px;
margin-right: -1px;
}

.section h2 {
margin: 0;
padding: 4px 7px;
background: #3d4444;
border-bottom: 1px solid #121516;
color: #d1cab2;
font: bold 13px "Courier New", Courier, monospace;
}

.section h2 span {
color: #8f8767;
margin-right: 4px;
}

.section > p,
.section > .entry,
.section > table,
.section > pre,
.section > div:not(.stamp) {
margin-left: 9px;
margin-right: 9px;
}

.intro {
font-family: Georgia, serif;
font-size: 13px;
}

.stamp {
padding: 2px 7px;
background: #191e20;
color: #7f897f;
font-size: 9px;
border-bottom: 1px dotted #555;
}

.entry {
padding: 6px 1px 8px;
border-bottom: 1px dotted #555c59;
}

.entry:last-child {
border-bottom: 0;
}

.entry h3 {
margin: 0 0 4px;
font-size: 12px;
}

.entry p {
margin: 5px 0;
}

.fileline {
color: #898c83;
font-size: 10px;
}

.sidecomment {
color: #828980;
font: 10px "Courier New", monospace;
}

.damaged {
background:
  repeating-linear-gradient(
    90deg,
    rgba(108,80,75,.08) 0,
    rgba(108,80,75,.08) 1px,
    transparent 1px,
    transparent 13px
  );
}

.hex {
overflow: auto;
padding: 6px;
margin: 5px 0 !important;
border: 1px solid #4b514f;
background: #171c1e;
color: #a5ac9d;
font-size: 10px;
line-height: 1.35;
}

.rust {
border-color: #645449;
}

.rust h2 {
background: #4a3a32;
color: #d1bda2;
}

.blue {
border-color: #465a61;
}

.blue h2 {
background: #34474d;
color: #bbc8c2;
}

.wine {
border-color: #655057;
}

.wine h2 {
background: #49363e;
color: #ccb8b8;
}

.olive {
border-color: #5f6049;
}

.olive h2 {
background: #464735;
color: #c6c3a4;
}

.misc h2 {
background: #3e3d43;
}

.index-table,
.manuscripts,
.projects-table,
.compat table {
border-collapse: collapse;
width: calc(100% - 18px);
font-size: 10px;
}

.index-table th,
.index-table td,
.manuscripts th,
.manuscripts td {
padding: 3px 5px;
border: 1px solid #565a55;
text-align: left;
}

.index-table th,
.manuscripts th {
background: #1d2223;
color: #b0aa91;
font-family: "Courier New", monospace;
}

.index-table tr:nth-child(even),
.manuscripts tr:nth-child(even) {
background: #222729;
}

.ok {
color: #9daa88;
}

.warntext {
color: #c09d68;
}

.dead {
color: #b26f6d;
font-weight: bold;
}

.under {
margin: 10px 9px 5px;
padding-bottom: 2px;
border-bottom: 1px solid #565b57;
font: bold 11px "Courier New", monospace;
color: #b4ad95;
}

.two-notes {
display: table;
width: calc(100% - 20px);
border-spacing: 4px;
}

.two-notes > div {
display: table-cell;
width: 50%;
padding: 5px;
background: #1e2324;
border-left: 3px solid #765746;
}

.dim {
color: #858a82;
}

blockquote {
margin: 10px 15px;
padding: 5px 8px 5px 11px;
border-left: 2px solid #827358;
background: #212627;
color: #aaa99c;
font-family: Georgia, "Times New Roman", serif;
font-size: 12px;
}

blockquote cite {
display: block;
margin-top: 4px;
color: #797d76;
font-size: 10px;
}

.compat {
border: 1px dashed #5b5c50;
padding: 5px;
background: #202425;
font: 10px "Courier New", monospace;
}

.compat > b {
color: #b6a372;
}

.compat table {
margin-top: 3px;
width: 100%;
}

.compat td {
padding: 1px 5px 1px 0;
}

.code-note {
border: 1px solid #526368;
background: #1b2123;
padding: 0 7px 6px;
}

.code-title {
margin: 0 -7px 6px;
padding: 3px 6px;
background: #303e42;
border-bottom: 1px solid #526368;
font: bold 10px "Courier New", monospace;
color: #b5c4bb;
}

.code-note pre {
overflow: auto;
margin: 5px 0;
padding: 6px;
background: #14191a;
color: #b7b6a7;
font-size: 10px;
}

.build {
border-top: 1px dotted #4a5556;
padding-top: 4px;
font: 10px "Courier New", monospace;
color: #87938c;
}

.tree {
margin: 4px 9px 9px !important;
padding: 7px;
border: 1px solid #4d595b;
background: #1a2021;
color: #9da69e;
font-size: 10px;
line-height: 1.3;
overflow: auto;
}

.terminal-ish {
margin-top: 7px;
margin-bottom: 8px;
padding: 6px;
background: #15191a;
border: 1px solid #3f4b4d;
color: #919c93;
font: 10px/1.4 "Courier New", monospace;
}

.terminal-ish span {
color: #b8aa7b;
}

.cursor {
display: inline-block;
width: 6px;
height: 11px;
background: #9a9477;
vertical-align: -2px;
animation: blink 1.15s steps(1,end) infinite;
}

@keyframes blink {
0%, 48% { opacity: 1; }
49%, 100% { opacity: 0; }
}

.odd-list {
list-style: none;
padding: 0 0 3px 18px;
}

.odd-list li:before {
content: "» ";
color: #8b8260;
}

.odd-list li {
margin-bottom: 2px;
}

.catalogue-head {
display: table;
width: calc(100% - 18px);
padding: 4px 0;
border-bottom: 1px double #67585c;
font: 9px/1.45 "Courier New", monospace;
color: #a69994;
}

.catalogue-head > div {
display: table-cell;
width: 50%;
}

.catalogue-head > div:last-child {
text-align: right;
}

.diagram {
margin-top: 8px;
margin-bottom: 8px;
padding: 7px;
background: #ded2ad;
color: #332b29;
border: 3px double #574447;
transform: rotate(-0.15deg);
}

.diagram pre {
margin: 0;
font: 11px/1.15 "Courier New", monospace;
text-align: center;
}

.caption {
margin: 5px 3px 0;
padding-top: 4px;
border-top: 1px solid #786f5b;
font: italic 9px Georgia, serif;
}

.manuscripts {
margin-top: 9px;
}

.struck td:nth-child(2) {
text-decoration: line-through;
color: #807779;
}

.fragment {
margin-top: 10px;
padding: 7px 9px;
background: #242021;
border-left: 3px double #85666b;
font-family: Georgia, "Times New Roman", serif;
}

.fragment b {
font: bold 9px "Courier New", monospace;
color: #9f898b;
}

.fragment p {
margin: 5px 0;
}

.note-red {
padding: 5px;
background: #362628;
border: 1px solid #664448;
color: #b99994;
font: bold 9px "Courier New", monospace;
}

.projects-table {
margin-top: 9px;
margin-bottom: 8px;
width: calc(100% - 18px);
}

.projects-table td {
padding: 6px;
vertical-align: top;
border-bottom: 1px dotted #5a5d50;
}

.projects-table tr:last-child td {
border-bottom: 0;
}

.project-name {
width: 105px;
background: #20241e;
font-family: "Courier New", monospace;
}

.project-name a {
font-weight: bold;
color: #b6b788;
}

.project-name small {
color: #767a69;
}

.meter {
margin-top: 4px;
color: #8f927d;
font: 9px "Courier New", monospace;
}

.redacted {
background: #171717;
color: #171717;
padding: 0 4px;
user-select: text;
}

.redacted::selection {
color: #ccc4ae;
background: #3a3230;
}

.scrap-grid {
display: table;
width: calc(100% - 18px);
border-spacing: 3px;
}

.scrap-grid > div {
display: table-cell;
width: 33.33%;
padding: 5px;
border: 1px solid #57585d;
background: #212528;
font-size: 10px;
}

.scrap-grid b {
color: #aaa593;
font: bold 9px "Courier New", monospace;
}

.scrap-grid p {
margin: 4px 0;
}

.scrap-grid small {
color: #82847f;
font-size: 9px;
}

.sidebox {
margin-bottom: 9px;
border: 1px solid #555c59;
background: #1c2224;
font-size: 10px;
}

.sidebox h3 {
margin: 0;
padding: 3px 5px;
background: #383f3f;
border-bottom: 1px solid #0e1112;
color: #bcb59f;
font: bold 10px "Courier New", monospace;
}

.sidebox p {
margin: 4px 6px;
}

.status p {
margin: 2px 6px;
}

.activity {
display: inline-block;
color: #9f9c6e;
animation: activity 2.4s steps(1,end) infinite;
}

@keyframes activity {
0%, 60%, 100% { opacity: 1; }
61%, 74% { opacity: .2; }
}

.found {
margin: 4px 4px 5px 23px;
padding: 0;
}

.found li {
margin-bottom: 5px;
padding-bottom: 4px;
border-bottom: 1px dotted #454b48;
}

.found small {
color: #858a83;
font-size: 9px;
}

.plainlinks {
margin: 5px 0 6px;
padding: 0 7px;
list-style: none;
font-family: "Courier New", monospace;
}

.plainlinks li {
margin: 3px 0;
word-break: break-word;
}

.plainlinks li:before {
content: "./";
color: #74796f;
}

.counter {
text-align: center;
}

.counter h3 {
text-align: left;
}

.digits {
display: inline-block;
margin: 7px auto 2px;
padding: 3px 5px;
letter-spacing: 3px;
color: #c8bd93;
background: #090c0d;
border: 2px inset #4f5350;
font-size: 14px;
}

.counter p {
color: #777f79;
font-size: 9px;
}

.moons pre {
padding: 5px 7px 0;
margin: 0;
color: #aaa28f;
font-size: 11px;
line-height: 1.5;
}

.narrow-note {
margin-left: 3px;
width: calc(100% - 6px);
transform: rotate(.35deg);
background: #302929;
border-color: #654d4d;
}

.narrow-note p {
color: #ad9690;
}

.sticker {
margin: 12px 6px 8px 2px;
padding: 5px 3px;
text-align: center;
border: 2px outset #8a8268;
background: #716a55;
color: #1d2020;
font: 8px/1.25 Tahoma, Arial, sans-serif;
transform: rotate(-1deg);
}

.sticker b {
font-size: 10px;
}

.hidden-note {
margin: 3px 15px 12px 21px;
text-align: right;
font: 9px "Courier New", monospace;
color: #4b5250;
}

.hidden-note a {
color: #58635f;
}

.hidden-note:hover,
.hidden-note:hover a {
color: #8e988e;
}

footer {
display: table;
width: 100%;
box-sizing: border-box;
border-top: 3px double #66695e;
background: #171c1e;
color: #7d837c;
font: 9px/1.5 "Courier New", monospace;
}

.footer-left,
.footer-mid,
.footer-right {
display: table-cell;
padding: 7px 9px;
vertical-align: top;
}

.footer-left {
width: 38%;
}

.footer-mid {
width: 32%;
border-left: 1px dotted #404744;
border-right: 1px dotted #404744;
}

.footer-right {
text-align: right;
}

.footer-mark {
color: #8d8263;
}

.lastline {
padding: 3px 6px;
background: #0f1314;
color: #505754;
font-size: 8px;
text-align: center;
}


/* 800x600 era uma sugestão, não uma ameaça */
@media (max-width: 920px) {
body {
  padding: 6px;
}

#page {
  width: auto;
  max-width: 890px;
}
}


@media (max-width: 700px) {
header {
  min-height: 0;
}

.mark {
  float: none;
  width: auto;
  margin: 0 0 5px;
}

.mark pre {
  font-size: 8px;
  text-align: left;
}

h1 {
  font-size: 20px;
}

.warning {
  width: auto;
}

.directory {
  line-height: 1.8;
}

.directory a {
  display: inline-block;
}

.columns,
main,
aside {
  display: block;
  width: auto;
}

main {
  padding: 8px;
}

aside {
  padding: 0 8px 10px;
}

.section:nth-child(even) {
  margin-left: 0;
  margin-right: 0;
}

.sidebox {
  max-width: none;
}

.two-notes,
.scrap-grid,
.catalogue-head {
  display: block;
}

.two-notes > div,
.scrap-grid > div,
.catalogue-head > div {
  display: block;
  width: auto;
  margin-bottom: 4px;
}

.catalogue-head > div:last-child {
  text-align: left;
}

footer,
.footer-left,
.footer-mid,
.footer-right {
  display: block;
  width: auto;
  text-align: left;
}

.footer-mid {
  border: 0;
  border-top: 1px dotted #404744;
  border-bottom: 1px dotted #404744;
}

.diagram {
  overflow-x: auto;
}
}


@media (max-width: 460px) {
body {
  padding: 0;
  font-size: 11px;
}

#page {
  border-left: 0;
  border-right: 0;
  box-shadow: none;
}

.top-rule .right {
  display: none;
}

.mark {
  display: none;
}

header {
  padding: 10px;
}

h1 {
  font-size: 17px;
  letter-spacing: 2px;
}

.directory a {
  display: block;
  margin-left: 6px;
}

.prompt {
  display: block;
}

.crumb span {
  display: none;
}

.index-table,
.manuscripts,
.projects-table {
  font-size: 9px;
}

.index-table th:nth-child(2),
.index-table td:nth-child(2),
.index-table th:nth-child(4),
.index-table td:nth-child(4) {
  display: none;
}

.manuscripts td,
.manuscripts th {
  padding: 3px;
}

.project-name {
  width: 70px;
}

.hex,
.tree,
.code-note pre,
.diagram pre {
  font-size: 8px;
}
}