/*
 * Flow Control site styles.
 *
 * Recreates the original Microsoft FrontPage "fc-css1" theme. Spacing values that look
 * odd (34px spacers, 1% columns) reproduce how the old table layout rendered, so the
 * pages look the same as they did. The button, banner and bullet frames are text-free
 * sprites rebuilt from the theme's images; all labels are real text.
 */

:root {
  --bg: #808080;
  --text: #ffffcc;
  --link: #ffcc00;
  --link-visited: #003300;
  --link-active: #66ffff;
  --rule: #cccccc;
  /* An empty paragraph FrontPage used as a spacer: a 16px margin + one 18px line. */
  --spacer: 34px;
}

/* About Us and Contact use a lighter background. */
.silver {
  --bg: #c0c0c0;
}

body {
  margin: 0;
  /* Padding, not margin, so the footer's bottom margin doesn't collapse into it. */
  padding: 8px;
  background: var(--bg);
  color: var(--text);
  font:
    16px Arial,
    Helvetica,
    sans-serif;
}

a:link {
  color: var(--link);
}
a:visited {
  color: var(--link-visited);
}
a:active {
  color: var(--link-active);
}

img {
  border: 0;
}

/* Responsive images are wrapped in <picture>; lay the <img> out as if it weren't. */
picture {
  display: contents;
}

h2 {
  color: #003300;
}
h3 {
  color: #003366;
}
h4 {
  color: #333366;
}

/* A 2px black bar with a 1px grey outline and square-cut corners, centred in 10px. */
hr {
  width: 600px;
  height: 10px;
  margin: 16px auto;
  border: 0;
  background:
    linear-gradient(#000, #000) center / 598px 2px no-repeat,
    linear-gradient(var(--rule), var(--rule)) center / 600px 2px no-repeat,
    linear-gradient(var(--rule), var(--rule)) center / 598px 4px no-repeat;
}

/* ---- Header -------------------------------------------------------------------- */

/* Like the table it replaces, the header widens to fit the logo on narrow screens. */
.masthead {
  min-width: min-content;
  text-align: center;
}

.logo {
  display: block;
  margin: 0 auto;
}

.pills {
  margin: 20px 0 16px;
  /* FrontPage started this row with an &nbsp;, which nudges it right by one space. */
  padding-left: 0.278em;
  line-height: 20px;
}

.pill {
  display: inline-block;
  box-sizing: border-box;
  width: 90px;
  height: 20px;
  /* The old 95px images had the pill inset within them. */
  margin: 0 2px 0 3px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: #000;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-decoration: none;
  vertical-align: top;
}

.banner {
  box-sizing: border-box;
  width: 600px;
  height: 60px;
  margin: 0 auto;
  padding-top: 13px;
  background: url('data:image/gif;base64,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');
  color: #ffff99;
  font-size: 32px;
  line-height: normal;
}

.tabs {
  line-height: 40px;
}

/* Bottom of the header to the top of the content: a FrontPage spacer paragraph. */
.masthead > :last-child {
  margin-bottom: var(--spacer);
}

/* ---- Navigation buttons ------------------------------------------------------------ */

.btn {
  display: inline-block;
  width: 140px;
  height: 40px;
  background: url('data:image/gif;base64,R0lGODlhjAAoAIIAAAAAADMzM2ZmZpmZmczMzAAAAMDAwAAAACH5BAEAAAAALAAAAACMACgAAAP/CLrc/jDKSau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94bgfCMBDAoHBILBqPyKRyyRz6BAEOz0f1Fa7YrHbL7Xq/4LB4jB30oJlzbyogu9/wuDyrNl8EAgOe1577/4BzfHoCFXiEhIGKi4xeh3gTAQMBkpSTjZiZgZWVEo95eJqio3CHkhGSBqmSpK2uYJMGkxCfia+3uAWfELG9AbnArasDvAGyxpfBypnDEAQGBs/Ry9SY0gTO0NfV3IrXxcfH3eNyzQ++4uTqZOYOtaHr8WC7D8OqA/L5Xb4R7336AOlB4DSJFUCABWd5AgUK30F5Aj0N0DNxz0NyfPhckATFMsyai9zqFMIwpYoVkMvMmImyoWSTlzBjypzpZKWOmzhz6tzJs6fPn0CDCh1KtKjRBgkAADs=');
  color: var(--text);
  font:
    bold 13px/40px Tahoma,
    Verdana,
    Arial,
    sans-serif;
  letter-spacing: -0.25px;
  text-align: center;
  text-decoration: none;
  vertical-align: top;
}

.side .btn {
  display: block;
  background-image: url('data:image/gif;base64,R0lGODlhjAAoAIIAAAAAADMzM2ZmZpmZmczMzAAAAAAAAAAAACH5BAEAAAAALAAAAACMACgAAAP/CLrc/jDKSau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94LgfCMBDAoHBILBqPyKRyyVz6BAEKz0f1Fa7YrHbL7Xq/4LB4DB70oJFzbyogu9/wuDysNj8EAgCe1577/4CBWXx6eQx4hYWCi4yNYoiICgEDAZOVlI6Zmo6WlgqQeXibo6R/iJMAqKoDpa2ubpQAlKCKr7a3W6CxuwG4vrirvLK9v8WtqwQKyQAExs6ly0DKys/VmtHCmNbbgcFRvNzhfqu0ouLnb6Crqazo7mLC5X3v9Lmhhp2Uk/X8Wfqxn+7padePHq1DAwYWIlZQHB9CDiZBMbOmYbg6hh5MqWLFJqI1M2aiTNjYpKTJkyhTOgmpo6XLlzBjypxJs6bNmzhz6tzJE0ACADs=');
}

.side .btn[aria-current] {
  background-image: url('data:image/gif;base64,R0lGODlhjAAoAIMAAAAAAAAzMzMzZjNmmWaZmWaZzDNmZmZmmQAAADMzMwAzAAAAMwAAAAAAAAAAAAAAACH5BAEAAAAALAAAAACMACgAAAT/EMhJq7046827/2AojmRpnmiqrmzrvnAsz3Rt33iu73zv/8CgLiAYEArIpHLJbDqf0Kh0Sp0SBoIAJ2A4GAaHARhBLpvP6LR6zW673/D1N+zVYgQHAV7QFcT/gIGCg24JWHsXfAgGBkQGhJCRkpNnXAIKBgIVipyPlJ+goW6Zi5oSAQQLAQeqrKKvsKILBwGzdgMJpYu5sb2+kJ0AqwjDw7/HyHG0CLSdCIrJ0dJopJm4CNfX09vShgiGqQjh4dzlxwsECOgFZOwI7ubxve5I7fby+K/04wvi/fkAJ6FTdyVXNl4BEw7yZsgZNIUQ/1TLcoBYRWMRM7pZRgvARF0aYEOmCSbsIq2BIlOWOdlRgkNPKkNiKbXJwAI+N23GjLggkwIsiQjoESpA6M6ECYgeSJCBixcjYtIdlVdUzIBGW4ocqcK1q9evYKdgYSqkrNmzaNOqXcu2rdu3cOPKnUs3AgA7');
}

/* Buttons keep their label colour in every link state. */
.btn:link,
.btn:visited {
  color: var(--text);
}
.pill:link,
.pill:visited {
  color: #fff;
}

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

.page {
  display: grid;
  /* The sidebar column never collapses below 1%, even on pages without a sidebar. */
  grid-template-columns: minmax(1%, max-content) 1fr;
  column-gap: 24px;
  align-items: start;
}

main {
  grid-column: 2;
}

/* The old layout table cell ignored its first child's top margin, and the bottom
   margin of a trailing paragraph (separators were paragraphs too). */
main > :first-child {
  margin-top: 0;
}
main > p:last-child,
main > hr:last-child {
  margin-bottom: 0;
}

.center {
  text-align: center;
}

/* Extra room where the original had an empty spacer paragraph. */
.gap-before {
  padding-top: var(--spacer);
}
.gap-after {
  padding-bottom: var(--spacer);
}

/* Lines page: introduction (its old h4 margin plus a trailing blank line) and
   centred section titles. */
.intro {
  margin-bottom: calc(1.33em + 18px);
  color: #333366;
  font-weight: bold;
}

.section {
  margin: 16px 0;
  color: inherit;
  font-size: 18px;
  line-height: 21px;
  text-align: center;
}

/* Photos below a service page's text: side by side, centred, wrapping on narrow screens. */
.photos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 16px 0;
}

/* Link lists on the section pages: bold name, indented description. */
.directory dt {
  font-weight: bold;
}
.directory dd {
  margin: 16px 0 16px 40px;
}

/* Home page greeting; margins match the h3 it used to be. */
.welcome {
  margin: 18.72px 0;
  color: #ffff00;
  font-size: 32px;
  font-style: italic;
  font-weight: bold;
  text-align: center;
}

/* Product photo grid: three columns, at least 768px tall, rows share the height. */
.products {
  display: grid;
  grid-template-columns: 33fr 33fr 34fr;
  grid-auto-rows: minmax(185px, auto);
  align-content: stretch;
  width: 99%;
  min-height: 768px;
  margin: 0 auto;
}

.products figure,
.rentals figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0;
  padding: 1px;
  text-align: center;
}

figcaption {
  font-size: 13px;
  font-style: italic;
  font-weight: bold;
}

/* A couple of captions were pasted in left-aligned; kept as they were. */
.products .left {
  align-self: stretch;
  text-align: left;
}

/* Equipment rental: photo and prices beside a description, vertically centred, then
   links to the rental documents. */
.rentals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 99%;
  margin: 0 auto;
}

.rentals figure {
  padding: 0;
}
.rentals figcaption p {
  margin: 0;
}
.rentals figcaption p + p {
  margin-top: 16px;
}
.rentals div > p:first-child {
  margin-top: 0;
}
.rentals div > p:last-child {
  margin-bottom: 0;
}

.rentals > hr {
  grid-column: 1 / -1;
  margin: var(--spacer) auto 0;
}

.rentals > p {
  margin: var(--spacer) 0;
  text-align: center;
}

/* Bulleted lists: the theme's ring bullet in a 41px gutter. Like the full-width
   tables they replace, they start below any floated photo. */
.bullets {
  clear: both;
  margin: 0;
  padding: 0 0 0 41px;
  list-style: none;
}

.bullets li {
  position: relative;
}

.bullets li::before {
  content: '';
  position: absolute;
  left: -28px;
  width: 15px;
  height: 15px;
  background: url('data:image/gif;base64,R0lGODlhDwAPAKL/AMzMzJmZmWZmZjMzM8DAwAAAAAAAAAAAACH5BAEAAAQALAAAAAAPAA8AAAM9SLrc/jA6EQII4g0Leg9Dw2HbxwheRqCdSlikMlDX0k7dYoXNUCswAW8GW7AAqqPr9RF6Aj2O58Jr0C6uBAA77TISADs=');
}

/* Contact page: opening hours and addresses, two columns, vertically centred. */
.hours {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 99%;
  margin: 0 auto;
}

.hours p {
  margin: 0;
}
.hours .phones {
  margin-bottom: 16px;
}

iframe {
  border: 0;
  vertical-align: top;
}

/* ---- Footer ------------------------------------------------------------------------ */

footer {
  margin-top: var(--spacer);
}

.crumbs {
  margin: 0;
}
.crumbs span {
  white-space: nowrap;
}

.colophon {
  margin: 1.67em 0;
  color: #663300;
  font-size: 0.83em;
  font-weight: bold;
}

/* ---- Accessibility ------------------------------------------------------------------ */

:focus-visible {
  outline: 2px solid var(--link-active);
  outline-offset: 1px;
}