/* hyvluence.batu.one — the landing page wears the theme it ships.
 *
 * Same rules the extension applies to Confluence, applied here directly:
 * measured Hyves palette, Verdana, no border-radius, no CSS gradients (the
 * strips are the original images), and boxes closed with the three-slice
 * bottom instead of rounded corners.
 *
 * No JavaScript on this page at all, which is what lets the CSP set
 * script-src 'none'. */

:root {
  --pale: #cfdfef;
  --palest: #ebf2fa;
  --blue: #6699cc;
  --blue-dark: #003399;
  --blue-deep: #2367b0;
  --blue-mid: #557ac4;
  --blue-grey: #5f7faa;
  --blue-night: #173d63;
  --amber: #ffcc66;
  --cream: #fff7e5;
  --grey: #ccc;
  --ink: #1a1a1a;
  --green: #339933;
  color-scheme: light;
}

* {
  box-sizing: border-box;
  border-radius: 0;
}

html {
  background: var(--palest);
}

body {
  margin: 0;
  padding: 0 0 40px;
  font-family: verdana, geneva, 'DejaVu Sans', 'Bitstream Vera Sans', arial, helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}

a {
  color: var(--blue-dark);
}
a:visited {
  color: var(--blue-mid);
}
a:hover {
  color: var(--blue-deep);
}

/* --- header ------------------------------------------------------------- */

.masthead {
  background: #fff;
  border-bottom: 1px solid var(--pale);
}

.masthead-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo {
  width: 79px;
  height: 47px;
  flex: 0 0 auto;
  background: url('img/logotrans1.png') no-repeat center / contain;
}

.wordmark {
  width: 261px;
  height: 45px;
  max-width: 60vw;
  background: url('img/hyves_baseline_net.png') no-repeat left center / contain;
}

.masthead .tagline {
  margin-left: auto;
  color: var(--blue-grey);
  font-size: 11px;
  text-align: right;
}

/* The main nav is the original 144x26 strip, repeated. Its lightest stop is
   #b8d1e7, so labels take the darkest blue in the ramp rather than white. */
.mainmenu {
  background: #85afd7 url('img/menu_mainmenu3.jpg') repeat-x 0 bottom;
  border-bottom: 1px solid var(--blue);
}

.mainmenu ul {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 12px;
  list-style: none;
  display: flex;
  gap: 2px;
}

.mainmenu a {
  display: block;
  padding: 5px 14px;
  color: var(--blue-night);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-transform: uppercase;
}

.mainmenu a:hover,
.mainmenu .current a {
  background: rgba(255, 255, 255, 0.5);
}

/* --- layout ------------------------------------------------------------- */

.page {
  max-width: 1000px;
  margin: 14px auto 0;
  padding: 0 12px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.col-main {
  flex: 1 1 auto;
  min-width: 0;
}

.col-side {
  flex: 0 0 258px;
  max-width: 258px;
}

/* --- the Hyves box ------------------------------------------------------ */

/* Bottom edge = SW corner slice, SE corner slice, and a 1px middle strip
   repeated between them. That is how 2009 faked a rounded corner. */
.box {
  background-color: #fff;
  border: 1px solid var(--pale);
  margin: 0 0 14px;
  padding-bottom: 6px;
  background-image: url('img/boxbottomsw_lichtblauw.gif'),
    url('img/boxbottomse_lichtblauw.gif'), url('img/boxbottommiddle_lichtblauw.gif');
  background-position: left bottom, right bottom, left bottom;
  background-repeat: no-repeat, no-repeat, repeat-x;
}

.box > h2 {
  margin: 0;
  padding: 4px 9px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.02em;
}

.box > .body {
  padding: 11px 12px 8px;
}

.box p {
  margin: 0 0 10px;
}
.box p:last-child {
  margin-bottom: 0;
}

h1 {
  margin: 0 0 4px;
  font-size: 21px;
  color: var(--blue-night);
}

.lede {
  color: var(--blue-grey);
}

/* --- download ----------------------------------------------------------- */

.download {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* The original 9x31 button strip. It runs #ecf5fd -> #deedfc, so the label is
   Hyves link blue; white on it would be unreadable. */
.btn {
  display: inline-block;
  padding: 9px 20px;
  background: #deedfc url('img/btnBg.gif') repeat-x 0 0;
  border: 1px solid var(--pale);
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
}

.btn:hover {
  background-image: none;
  background-color: var(--cream);
  border-color: var(--amber);
  color: var(--blue-dark);
}

.btn:active {
  background-color: var(--amber);
}

.filemeta {
  font-size: 11px;
  color: var(--blue-grey);
}

.filemeta code {
  font-family: ui-monospace, 'DejaVu Sans Mono', monospace;
  font-size: 10px;
  word-break: break-all;
}

.notice {
  margin-top: 12px;
  padding: 8px 10px;
  background: var(--cream);
  border: 1px solid var(--amber);
  font-size: 12px;
}

/* --- steps -------------------------------------------------------------- */

ol.steps {
  margin: 0;
  padding-left: 22px;
}

ol.steps li {
  margin-bottom: 7px;
}

kbd,
code {
  font-family: ui-monospace, 'DejaVu Sans Mono', monospace;
  font-size: 11px;
  background: var(--palest);
  border: 1px solid var(--pale);
  padding: 0 4px;
}

/* --- screenshot --------------------------------------------------------- */

.shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--pale);
}

.caption {
  margin-top: 6px;
  font-size: 11px;
  color: var(--blue-grey);
}

/* --- sidebar lists ------------------------------------------------------ */

.linklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.linklist li {
  padding: 3px 0 3px 20px;
  background: url('img/arrow_right_blue.gif') no-repeat 0 4px;
}

.facts {
  margin: 0;
  font-size: 12px;
}

.facts dt {
  font-weight: bold;
  color: var(--blue-night);
}

.facts dd {
  margin: 0 0 8px;
  color: var(--ink);
}

/* --- krabbels ----------------------------------------------------------- */

.krabbel {
  padding: 7px 0;
  border-bottom: 1px solid var(--palest);
  font-size: 12px;
}

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

.krabbel .who {
  font-weight: bold;
  color: var(--blue-dark);
}

.krabbel .when {
  color: var(--blue-grey);
  font-size: 10px;
}

.krabbel .respect {
  color: var(--green);
  font-weight: bold;
  font-size: 10px;
}

/* --- footer ------------------------------------------------------------- */

.foot {
  max-width: 1000px;
  margin: 6px auto 0;
  padding: 10px 12px;
  border-top: 1px solid var(--pale);
  color: var(--blue-grey);
  font-size: 11px;
}

/* --- narrow ------------------------------------------------------------- */

@media (max-width: 780px) {
  .page {
    display: block;
  }
  .col-side {
    max-width: none;
    flex-basis: auto;
  }
  .mainmenu ul {
    flex-wrap: wrap;
  }
  .masthead .tagline {
    display: none;
  }
}