/* ==========================================================================
   SK Petroleum Limited — sk-osterley.css
   The look of a fuel retailer's site of about 2012: 980px fixed shell, glossy
   gradient buttons and bevelled panels, a green and charcoal palette, Segoe UI
   with rounded corners everywhere, and a showcase band under the navigation.
   Vocabulary: .page-shell / .ribbon / .idbar / .navbelt / .showcase /
   .content-row / .lead-col / .side-col / .noticebox / .threecol /
   table.datatable / .btn. This site only.
   ========================================================================== */

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

body {
  background: #eef0ed url("../images/bg-fade.svg") repeat-x top;
  font: 13px/1.68 "Segoe UI", Tahoma, "Trebuchet MS", Arial, sans-serif;
  color: #37403a;
}

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

.page-shell {
  width: 980px; margin: 0 auto 30px; background: #fff;
  border: 1px solid #c3ccc5; border-top: 0;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 10px rgba(40, 60, 45, .16);
}

/* ---- bars -------------------------------------------------------------- */
.ribbon { background: #26302a; color: #9aa89f; font-size: 11px; padding: 6px 24px; }
.ribbon strong { color: #e8eee9; }

.idbar { padding: 17px 24px 15px; border-bottom: 1px solid #dde3de; }
.idbar:after { content: ""; display: block; clear: both; }
.idbar .sk { float: left; margin-right: 14px; }
.idbar .skname {
  font: 600 24px/1.15 "Segoe UI", Tahoma, sans-serif; color: #1f6b3a; letter-spacing: -0.3px;
  padding-top: 3px;
}
.idbar .skname a { color: #1f6b3a; text-decoration: none; }
.idbar .un {
  display: block; font: 400 12px/1.5 "Segoe UI", Tahoma, sans-serif; color: #6b7770; margin-top: 3px;
}

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

.navbelt {
  background: #1f6b3a; background-image: linear-gradient(#2b7d45, #16502b);
  border-bottom: 3px solid #0f3d21;
}
.navbelt ul { list-style: none; padding: 0 10px; }
.navbelt li { display: inline-block; }
.navbelt a {
  display: inline-block; padding: 11px 18px; color: #eaf8ef; text-decoration: none;
  font: 600 12px/1 "Segoe UI", Tahoma, sans-serif;
}
.navbelt a:hover, .navbelt a:focus { background: rgba(0, 0, 0, .16); color: #fff; }
.navbelt a[aria-current="page"] { background: #fff; color: #1f6b3a; border-radius: 4px 4px 0 0; }

/* ---- showcase ---------------------------------------------------------- */
.showcase { border-bottom: 1px solid #dde3de; background: #26302a; }
.showcase img { display: block; width: 100%; height: 230px; object-fit: cover; }
.showcase figcaption { padding: 6px 24px; font-size: 11px; color: #9aa89f; }
.showcase figcaption a { color: #8fd8a8; }

/* ---- layout ------------------------------------------------------------ */
.content-row { padding: 20px 24px 26px; }
.content-row:after { content: ""; display: block; clear: both; }
/* One column. The details block drops underneath rather than sitting beside. */
.lead-col { float: none; width: auto; max-width: 660px; }
.side-col { float: none; width: auto; max-width: 660px; margin-top: 24px;
  border-top: 2px solid #cfe3d7; padding-top: 16px; }

/* ---- content ----------------------------------------------------------- */
.lead-col h1 {
  font: 600 25px/1.2 "Segoe UI", Tahoma, sans-serif; color: #1f6b3a;
  border-bottom: 1px solid #dde3de; padding-bottom: 10px; margin-bottom: 14px;
}
.lead-col h2 { font: 600 17px/1.3 "Segoe UI", Tahoma, sans-serif; color: #26302a; margin: 21px 0 7px; }
.lead-col h3 { font: 600 13px "Segoe UI", Tahoma, sans-serif; color: #1f6b3a; margin: 14px 0 4px; }
.lead-col p { margin-bottom: 12px; }
.lead-col ul, .lead-col ol { margin: 0 0 13px 22px; }
.lead-col li { margin-bottom: 5px; }

.inline-shot { float: right; width: 250px; margin: 4px 0 14px 20px; }
.inline-shot img { display: block; width: 100%; height: auto; border: 1px solid #d7ded9; }
.inline-shot figcaption { font-size: 11px; color: #6b7770; padding-top: 5px; }

.opening { font-size: 15px; line-height: 1.7; color: #46524a; margin-bottom: 18px; }

.noticebox {
  background: #f6f8f6; border: 1px solid #d7ded9; border-radius: 6px;
  padding: 12px 14px; margin-bottom: 15px;
}
.noticebox h3 {
  margin: 0 0 7px; font: 600 11px "Segoe UI", Tahoma, sans-serif; color: #1f6b3a;
  text-transform: uppercase; letter-spacing: 1px;
}
.noticebox p, .noticebox address { font-size: 12px; color: #5c675f; font-style: normal; margin-bottom: 7px; }
.noticebox p:last-child { margin-bottom: 0; }

.threecol { margin-bottom: 16px; }
.threecol:after { content: ""; display: block; clear: both; }
.threecol .cel {
  float: left; width: 202px; margin-right: 17px;
  border: 1px solid #d7ded9; border-radius: 6px; overflow: hidden; background: #fbfcfb;
}
.threecol .cel.fin { margin-right: 0; }
.threecol img { display: block; width: 100%; height: 100px; object-fit: cover;
  border-bottom: 1px solid #d7ded9; }
.threecol .bd { padding: 9px 11px; }
.threecol h3 { margin: 0 0 3px; font: 600 12px "Segoe UI", Tahoma, sans-serif; color: #1f6b3a; }
.threecol p { margin: 0; font-size: 11px; color: #5c675f; }

table.datatable { border-collapse: collapse; width: 100%; margin-bottom: 16px; font-size: 12px; }
table.datatable caption { text-align: left; color: #6b7770; padding-bottom: 5px; font-size: 11px; }
table.datatable th, table.datatable td {
  border: 1px solid #d7ded9; padding: 7px 9px; text-align: left; vertical-align: top;
}
table.datatable thead th { background: #1f6b3a; color: #fff; }
table.datatable tbody th { background: #f2f8f4; color: #1f6b3a; width: 36%; }

.wide-table { overflow-x: auto; margin-bottom: 16px; }
table.photo-credits { border-collapse: collapse; width: 100%; font-size: 12px; }
table.photo-credits caption { text-align: left; color: #6b7770; padding-bottom: 5px; }
table.photo-credits th, table.photo-credits td {
  border: 1px solid #d7ded9; padding: 7px 9px; text-align: left; vertical-align: top;
}
table.photo-credits th { background: #f2f8f4; color: #1f6b3a; }

hr.rule2 { border: 0; border-top: 1px solid #e2e8e3; margin: 19px 0; }

/* ---- footer ------------------------------------------------------------ */
.footrow {
  clear: both; background: #26302a; color: #9aa89f; padding: 19px 24px 15px; font-size: 12px;
  border-radius: 0 0 7px 7px;
}
.footrow a { color: #8fd8a8; }
.footrow p { margin-bottom: 5px; }
.footrow address { font-style: normal; }
.footrow .reginfo { color: #e8eee9; }
.footrow .sklast { border-top: 1px solid #3a463e; margin-top: 12px; padding-top: 12px; font-size: 11px; }

a { color: #1f6b3a; }
a:hover { color: #b3600d; }
a:focus { outline: 2px solid #2f8a4c; outline-offset: 1px; }

/* ---- cookie notice ----------------------------------------------------- */
.ck-osterley {
  position: fixed; left: 0; right: 0; bottom: 0; background: #fff; color: #37403a;
  border-top: 4px solid #2f8a4c; padding: 13px 24px; font-size: 12px;
  box-shadow: 0 -3px 14px rgba(40, 60, 45, .22);
}
.ck-osterley p { margin-bottom: 9px; }
.ck-osterley button {
  font: 600 12px "Segoe UI", Tahoma, sans-serif; padding: 7px 16px; margin-right: 8px;
  cursor: pointer; color: #fff; border: 1px solid #16502b; border-radius: 5px;
  background: #1f6b3a; background-image: linear-gradient(#2b7d45, #16502b);
}
.ck-osterley button + button {
  background: #eef0ed; background-image: linear-gradient(#fff, #e2e7e3);
  border-color: #c3ccc5; color: #37403a;
}
.ck-osterley button:hover { filter: brightness(1.08); }

/* ---- small screens ----------------------------------------------------- */
@media (max-width: 1010px) {
  .page-shell { width: auto; border-radius: 0; border-left: 0; border-right: 0; }
  .lead-col, .side-col { float: none; width: auto; }
  .side-col { margin-top: 20px; }
  .threecol .cel { float: none; width: auto; margin: 0 0 15px; }
  .threecol img { height: 155px; }
  .showcase img { height: 155px; }
  .navbelt a { display: block; }
  .navbelt li { display: block; }
  table.datatable tbody th { width: auto; }
}

/* Details as a definition list rather than a stack of bordered boxes. */
dl.detail { margin-bottom: 15px; border-bottom: 1px solid #e2e8e3; padding-bottom: 12px; }
dl.detail dt {
  font: 600 11px "Segoe UI", Tahoma, sans-serif; color: #1f6b3a;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px;
}
dl.detail dd { margin: 0; font-size: 12px; color: #5c675f; line-height: 1.6; }