/* marslinks.biz - Mars Market procedure reference
   Built to the supplied reference: conservative institutional layout, white
   page, one dark teal brand colour, dense 14px type, square corners, almost no
   shadow, two columns with a left sidebar of teal header plates, pale
   highlight strip on the welcome block, dark teal footer with pipe separated
   links. No top navigation bar and no search form, by request: the section
   links live in the sidebar instead, where they stay visible on every page. */

:root{
  --teal:#115871;
  --teal2:#307287;
  --teal-dk:#0d4459;
  --ink:#212529;
  --ink2:#333333;
  --grey:#f2f2f3;
  --grey2:#e6e6e8;
  --line:#d6d8da;
  --pale:#f4f7e3;
  --paper:#ffffff;
  --dim:#5a6169;
  --warn:#8a4b12;
  --sans:Verdana,"DejaVu Sans","Bitstream Vera Sans",Geneva,sans-serif;
  --head:Georgia,"Times New Roman",Times,serif;
  --mono:Consolas,"DejaVu Sans Mono","Liberation Mono",monospace;
  --w:1200px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink2);
  font:14px/1.62 var(--sans);overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--teal);text-decoration:underline}
a:hover{color:var(--teal2)}
.shell{max-width:var(--w);margin:0 auto;padding:0 16px;min-width:0}

/* thin brand rule, deliberately not a navigation bar */
.band{border-bottom:3px solid var(--teal);background:var(--paper)}
.band .shell{padding-top:14px;padding-bottom:12px}
.band .nm{font:700 21px/1.2 var(--head);color:var(--teal);letter-spacing:.01em}
.band .tl{display:block;margin-top:3px;font-size:12.5px;color:var(--dim)}

/* two column grid */
.grid{display:flex;gap:26px;align-items:flex-start;padding:18px 0 6px}
.side{flex:0 0 218px;min-width:0}
.main{flex:1 1 auto;min-width:0}

/* sidebar plates */
.sblock{margin:0 0 18px;border:1px solid var(--line)}
.sblock h2{margin:0;background:var(--teal);color:#fff;padding:8px 11px;
  font:700 12.5px/1.35 var(--sans);letter-spacing:.03em;text-transform:uppercase;border:0}
.sblock ul{list-style:none;margin:0;padding:0}
.sblock li{border-bottom:1px solid var(--grey2)}
.sblock li:last-child{border-bottom:0}
.sblock li a{display:block;padding:8px 11px;color:var(--teal);font-weight:700;
  font-size:13px;text-decoration:none;line-height:1.45}
.sblock li a:hover{background:var(--grey);text-decoration:underline}
.sblock li a.on{background:var(--pale)}
.sblock p{margin:0;padding:10px 11px;font-size:12.5px;color:var(--dim);line-height:1.55}

/* tagline strip in place of the reference hero photo */
.hero{background:var(--teal);color:#fff;padding:22px 24px;margin:0 0 20px}
.hero b{display:block;font:700 22px/1.3 var(--head);margin-bottom:6px}
.hero span{display:block;font-size:13.5px;color:#cfe0e7;max-width:74ch}

/* welcome block on the pale strip */
.greet{background:var(--pale);border:1px solid #e4e9cd;padding:13px 16px;margin:0 0 16px}
.greet h1{margin:0;font:700 26px/1.28 var(--head);color:#000}
.greet p{margin:6px 0 0;font-size:13.5px;color:var(--ink2);max-width:80ch}

/* addresses, first thing in the main column */
.addr{border:1px solid var(--line);margin:0 0 20px}
.addr h2{margin:0;background:var(--teal);color:#fff;padding:8px 12px;
  font:700 12.5px/1.35 var(--sans);letter-spacing:.03em;text-transform:uppercase;border:0}
.addr .in{padding:12px}
.addr .in > p{margin:0 0 11px;font-size:13px;color:var(--dim);max-width:none}
.arow{display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  background:var(--grey);border:1px solid var(--grey2);padding:9px 11px;margin-bottom:7px}
.arow:last-of-type{margin-bottom:0}
.arow .lb{flex:none;background:var(--teal);color:#fff;padding:4px 8px;
  font:700 11px/1.35 var(--sans);letter-spacing:.03em;text-transform:uppercase}
.arow code{flex:1 1 250px;min-width:0;font:12.5px/1.5 var(--mono);color:#000;word-break:break-all}
.arow button{flex:none;background:var(--teal2);color:#fff;border:0;padding:7px 13px;
  font:700 11.5px/1.35 var(--sans);letter-spacing:.03em;text-transform:uppercase;cursor:pointer}
.arow button:hover{background:var(--teal)}
.addr .cav{margin:11px 0 0;font-size:12.5px;color:var(--dim)}

/* type */
h1{font:700 26px/1.28 var(--head);color:#000;margin:0 0 10px}
.lede{font-size:14.5px;color:var(--ink2);margin:0 0 18px;max-width:82ch}
h2{font:700 19px/1.32 var(--head);color:#000;margin:24px 0 9px;
  border-bottom:2px solid var(--teal);padding-bottom:5px}
h3{font:700 15px/1.35 var(--sans);color:var(--teal);margin:18px 0 6px}
p{margin:0 0 12px;max-width:82ch}
ul,ol{margin:0 0 14px;padding-left:22px;max-width:82ch}
li{margin-bottom:6px}
code{font:.92em var(--mono);background:var(--grey);padding:1px 4px;color:#000}
strong,b{color:#000;font-weight:700}

/* the leaflet schema panel */
.leaf{border:1px solid var(--line);margin:0 0 20px}
.leaf > div{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--grey2)}
.leaf > div:last-child{border-bottom:0}
.leaf dt{flex:0 0 208px;margin:0;padding:9px 12px;background:var(--grey);
  font:700 12.5px/1.5 var(--sans);color:#000}
.leaf dd{flex:1 1 320px;min-width:0;margin:0;padding:9px 12px;font-size:13.5px}

/* index cards, kept square and plain */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px;margin:0 0 20px}
.cards a{display:block;border:1px solid var(--line);padding:11px 13px;
  text-decoration:none;color:var(--ink2);background:var(--paper)}
.cards a:hover{border-color:var(--teal);background:var(--grey)}
.cards a b{display:block;color:var(--teal);font-size:14px;margin-bottom:4px;text-decoration:underline}
.cards a span{display:block;font-size:12.5px;color:var(--dim);line-height:1.55}

/* notes */
.note{border:1px solid var(--line);border-left:4px solid var(--teal);
  background:var(--grey);padding:11px 14px;margin:16px 0;font-size:13.5px}
.note.care{border-left-color:var(--warn);background:#fdf6ef}
.note.ok{border-left-color:#4d7a2a;background:var(--pale)}
.note b{display:block;margin-bottom:4px;color:#000;
  font:700 12px/1.4 var(--sans);letter-spacing:.03em;text-transform:uppercase}

/* tables scroll rather than widening the page */
.tw{overflow-x:auto;margin:0 0 18px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:13.5px}
th,td{border:1px solid var(--line);padding:8px 11px;text-align:left;vertical-align:top}
th{background:var(--teal);color:#fff;font-weight:700;white-space:nowrap;font-size:12.5px}
td{background:var(--paper)}
tr:nth-child(even) td{background:#fafafb}

/* numbered steps */
.steps{list-style:none;padding:0;counter-reset:s;max-width:82ch}
.steps li{position:relative;padding-left:34px;margin-bottom:11px;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:22px;height:22px;
  background:var(--teal);color:#fff;font:700 12px/22px var(--sans);text-align:center}

/* prev / next */
.pn{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;border-top:1px solid var(--line);padding-top:14px}
.pn a{flex:1 1 230px;border:1px solid var(--line);padding:9px 12px;
  text-decoration:none;color:var(--ink2);font-size:13px}
.pn a:hover{border-color:var(--teal);background:var(--grey)}
.pn a em{display:block;font-style:normal;font-size:11px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.pn a b{color:var(--teal);text-decoration:underline}

.crumb{font-size:12px;color:var(--dim);margin:0 0 10px}
.crumb a{color:var(--teal)}

/* footer */
.foot{background:var(--teal);color:#fff;margin-top:26px;padding:18px 0 22px}
.foot .shell{font-size:12.5px}
.foot .links{margin:0 0 10px;line-height:2}
.foot .links a{color:#fff;text-decoration:none}
.foot .links a:hover{text-decoration:underline}
.foot .links span{color:#7fa8b8;padding:0 7px}
.foot .fine{margin:0;color:#bcd4dd;line-height:1.6;max-width:none}

@media (max-width:860px){
  .grid{flex-direction:column;gap:0}
  .side{flex:1 1 auto;width:100%;order:2}
  .main{order:1;width:100%}
  .leaf dt{flex-basis:100%}
}
@media (max-width:600px){
  .arow code{flex-basis:100%;font-size:11.5px}
  .hero{padding:16px}
}