/* ==========================================================================
   Electrical Switchgear Services Limited — ess-parkgate.css
   The look of a Yorkshire electrical manufacturer's site of about 2010:
   1000px container, Tahoma, a steel blue and slate palette with a safety-
   yellow accent, a thin utility strip, a full-width navigation bar of square
   tabs, and data presented in bordered specification tables.
   Vocabulary: .container / .util / .brandrow / .navstrip / .banner / .layout /
   .primary / .secondary / .infopanel / .prodtable / .specgrid. This site only.
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: #d7dce1;
  font: 12px/1.65 Tahoma, Verdana, Geneva, sans-serif;
  color: #33383e;
}

.skipnav { position: absolute; left: -9999px; }
.skipnav:focus { left: 0; top: 0; background: #1b4f72; color: #fff; padding: 9px 15px; z-index: 40; }

.container { width: 1000px; margin: 0 auto; background: #fff; border-left: 1px solid #aab2ba; border-right: 1px solid #aab2ba; }

/* ---- bars -------------------------------------------------------------- */
.util {
  background: #2c3439; color: #97a2ac; font-size: 11px; padding: 6px 24px;
  border-bottom: 2px solid #f2c200;
}
.util strong { color: #e8edf1; }

.brandrow { padding: 16px 24px 14px; background: #fff; border-bottom: 1px solid #d3d9df; }
.brandrow:after { content: ""; display: block; clear: both; }
.brandrow .emblem { float: left; margin-right: 14px; }
.brandrow .worksname {
  font: bold 22px/1.15 Tahoma, sans-serif; color: #1b4f72; letter-spacing: -0.3px; padding-top: 2px;
}
.brandrow .worksname a { color: #1b4f72; text-decoration: none; }
.brandrow .role {
  display: block; font: normal 12px/1.45 Tahoma, sans-serif; color: #5d6871; margin-top: 4px;
}

/* ---- navigation -------------------------------------------------------- */
.menuctl { display: none; }

.navstrip { background: #1b4f72; background-image: linear-gradient(#24628c, #143e5b); }
.navstrip ul { list-style: none; }
.navstrip li { display: inline-block; }
.navstrip a {
  display: inline-block; padding: 11px 20px; color: #d0e2f0; text-decoration: none;
  font: bold 12px Tahoma, sans-serif; border-right: 1px solid #10344d;
}
.navstrip a:hover, .navstrip a:focus { background: #143e5b; color: #fff; }
.navstrip a[aria-current="page"] { background: #f2c200; color: #2c3439; }

/* ---- inline photograph -------------------------------------------------
   Floated into the copy rather than banded across the top. A 2010 industrial
   page put one picture beside the text, not a hero across the masthead. */
.banner { float: right; width: 268px; margin: 4px 0 12px 18px; }
.banner img { display: block; width: 100%; height: auto; border: 1px solid #cfd6dc; }
.banner figcaption { padding: 5px 0 0; font-size: 11px; color: #5d6871; }

/* ---- layout ------------------------------------------------------------ */
.layout { padding: 20px 24px 26px; }
.layout:after { content: ""; display: block; clear: both; }
.primary { float: left; width: 664px; }
.secondary { float: right; width: 258px; }

/* ---- content ----------------------------------------------------------- */
.primary h1 {
  font: bold 22px/1.2 Tahoma, sans-serif; color: #1b4f72;
  border-bottom: 3px solid #e2e7eb; padding-bottom: 9px; margin-bottom: 13px;
}
.primary h2 {
  font: bold 14px/1.3 Tahoma, sans-serif; color: #2c3439; margin: 19px 0 6px;
  background: #eef1f4; border-left: 5px solid #1b4f72; padding: 6px 10px;
}
.primary h3 { font: bold 12px Tahoma, sans-serif; color: #1b4f72; margin: 13px 0 4px; }
.primary p { margin-bottom: 11px; }
.primary ul, .primary ol { margin: 0 0 12px 22px; }
.primary li { margin-bottom: 5px; }

.abstract {
  border: 1px solid #cfd6dc; border-top: 4px solid #f2c200; background: #fafbfc;
  padding: 12px 14px; margin-bottom: 16px;
}

.infopanel { border: 1px solid #cfd6dc; margin-bottom: 15px; }
.infopanel h3 {
  background: #eef1f4; border-bottom: 1px solid #cfd6dc; margin: 0; padding: 8px 11px;
  font: bold 11px Tahoma, sans-serif; color: #1b4f72; text-transform: uppercase; letter-spacing: 0.8px;
}
.infopanel .pad { padding: 10px 11px; }
.infopanel p, .infopanel address { font-size: 11px; color: #566068; font-style: normal; margin-bottom: 7px; }
.infopanel p:last-child { margin-bottom: 0; }

.specgrid { margin-bottom: 16px; }
.specgrid:after { content: ""; display: block; clear: both; }
.specgrid .box { float: left; width: 212px; margin-right: 14px; border: 1px solid #cfd6dc; }
.specgrid .box.tail { margin-right: 0; }
.specgrid img { display: block; width: 100%; height: 100px; object-fit: cover;
  border-bottom: 1px solid #cfd6dc; }
.specgrid .lab { padding: 9px 10px; }
.specgrid h3 { margin: 0 0 3px; font: bold 11px Tahoma, sans-serif; color: #1b4f72;
  text-transform: uppercase; letter-spacing: 0.6px; }
.specgrid p { margin: 0; font-size: 11px; color: #566068; }

table.prodtable { border-collapse: collapse; width: 100%; margin-bottom: 16px; font-size: 11px; }
table.prodtable caption { text-align: left; color: #5d6871; padding-bottom: 5px; font-size: 11px; }
table.prodtable th, table.prodtable td {
  border: 1px solid #cfd6dc; padding: 6px 9px; text-align: left; vertical-align: top;
}
table.prodtable thead th { background: #1b4f72; color: #fff; }
table.prodtable tbody th { background: #eef1f4; color: #1b4f72; width: 34%; }

.tablewrap { overflow-x: auto; margin-bottom: 16px; }
table.imagetable { border-collapse: collapse; width: 100%; font-size: 11px; }
table.imagetable caption { text-align: left; color: #5d6871; padding-bottom: 5px; }
table.imagetable th, table.imagetable td {
  border: 1px solid #cfd6dc; padding: 6px 9px; text-align: left; vertical-align: top;
}
table.imagetable th { background: #1b4f72; color: #fff; }

hr.esscols { border: 0; border-top: 1px solid #dde2e7; margin: 18px 0; }

/* ---- footer ------------------------------------------------------------ */
.colophon {
  clear: both; background: #2c3439; color: #97a2ac; padding: 18px 24px 15px; font-size: 11px;
  border-top: 3px solid #f2c200;
}
.colophon a { color: #ffdf5e; }
.colophon p { margin-bottom: 5px; }
.colophon address { font-style: normal; }
.colophon .registration { color: #e8edf1; }
.colophon .tail { border-top: 1px solid #3f484f; margin-top: 11px; padding-top: 11px; }

a { color: #1b4f72; }
a:hover { color: #96700a; }
a:focus { outline: 2px solid #f2c200; outline-offset: 1px; }

/* ---- cookie notice ----------------------------------------------------- */
.ck-parkgate {
  position: fixed; left: 0; right: 0; bottom: 0; background: #1b4f72; color: #dce8f2;
  border-top: 4px solid #f2c200; padding: 12px 24px; font-size: 11px;
}
.ck-parkgate p { margin-bottom: 8px; }
.ck-parkgate a { color: #ffdf5e; }
.ck-parkgate button {
  font: bold 11px Tahoma, sans-serif; padding: 6px 14px; margin-right: 8px; cursor: pointer;
  background: #f2c200; border: 0; color: #2c3439;
}
.ck-parkgate button + button { background: #3d6f95; color: #e8f1f8; }
.ck-parkgate button:hover { filter: brightness(1.12); }

/* ---- small screens ----------------------------------------------------- */
@media (max-width: 1030px) {
  .container { width: auto; border: 0; }
  .primary, .secondary { float: none; width: auto; }
  .secondary { margin-top: 20px; }
  .specgrid .box { float: none; width: auto; margin: 0 0 14px; }
  .specgrid img { height: 150px; }
  .banner img { height: 150px; }
  .navstrip a { border-bottom: 1px solid #10344d; }
  table.prodtable tbody th { width: auto; }
}

/* The side column uses the same specification-table idiom as the rest of the
   site rather than a separate box component. */
table.sidespec { border-collapse: collapse; width: 100%; margin-bottom: 13px; }
table.sidespec th {
  background: #1b4f72; color: #fff; text-align: left; padding: 6px 9px;
  font: bold 11px Tahoma, sans-serif; text-transform: uppercase; letter-spacing: 0.8px;
}
table.sidespec td {
  border: 1px solid #cfd6dc; border-top: 0; padding: 8px 9px;
  font-size: 11px; color: #566068; line-height: 1.6;
}