/* ==========================================================================
   Arrowdown Limited — arrowdown-rugby.css
   Refreshed circa 2012-2013: the fixed 800px page became a fluid, wider one
   on a soft-shadowed white card; the boxed left navigation and tables picked
   up rounded corners; body copy moved off 12px Arial onto a cleaner sans
   stack. The blue banner survives (softened, not flattened out entirely —
   this refresh is a repaint, not a rebuild) and the roof-mark badge is
   untouched. Vocabulary: .page / #banner / #navcol / #content / .boxout /
   .crumb / dl.spec / .tiles. This site only.
   ========================================================================== */

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

body {
  background: #dfe3e8;
  font: 14px/1.65 "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
}

.tocontent { position: absolute; left: -9999px; }
.tocontent:focus { left: 0; top: 0; background: #14508c; color: #fff; padding: 8px 14px; z-index: 30; }

.page {
  max-width: 1020px;
  margin: 18px auto 30px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(15, 25, 40, 0.22);
  overflow: hidden;
}

/* ---- banner ------------------------------------------------------------ */
#banner {
  background: #14508c;
  background-image: linear-gradient(#2f74ba, #124a80);
  border-bottom: 3px solid #e8a317;
  padding: 22px 26px 20px;
  position: relative;
}
#banner .mark {
  float: left; width: 46px; height: 46px; margin-right: 14px; border-radius: 6px;
}
#banner h1, #banner .adbrand {
  font: bold 24px/1.15 "Segoe UI", Arial, Helvetica, sans-serif;
  color: #fff; letter-spacing: -0.4px; padding-top: 2px;
}
#banner .adbrand a { color: #fff; text-decoration: none; }
#banner .strap {
  display: block; font: normal 12.5px/1.4 "Segoe UI", Arial, sans-serif; color: #bcdaf4;
  margin-top: 4px; letter-spacing: 0.3px;
}
#banner:after { content: ""; display: block; clear: both; }

.crumb {
  background: #eef1f5;
  padding: 8px 26px;
  font-size: 12px;
  color: #5a6673;
}
.crumb a { color: #14508c; }

/* ---- columns ----------------------------------------------------------- */
.body { padding: 22px 26px 28px; }
.body:after { content: ""; display: block; clear: both; }

#navcol { float: left; width: 206px; }
#content { margin-left: 232px; }

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

#navcol .navbox {
  border-radius: 6px;
  box-shadow: 0 0 0 1px #d3dae2, 0 1px 4px rgba(15, 25, 40, 0.08);
  margin-bottom: 16px;
  overflow: hidden;
}
#navcol .navbox h2 {
  background: #eef1f5;
  font: bold 12px/1 "Segoe UI", sans-serif;
  text-transform: uppercase; letter-spacing: 1px; color: #14508c;
  padding: 9px 11px;
}
#navcol ul { list-style: none; }
#navcol li { border-top: 1px solid #e4e9ef; }
#navcol li:first-child { border-top: 0; }
#navcol li a {
  display: block; padding: 9px 11px; color: #2c3e50; text-decoration: none; font-size: 13px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#navcol li a:hover, #navcol li a:focus { background: #f5f8fb; color: #14508c; }
#navcol li a[aria-current="page"] {
  background: #14508c; color: #fff; font-weight: bold;
}

.sidenote { font-size: 12.5px; color: #55606c; margin-bottom: 15px; line-height: 1.6; }
.sidenote b { color: #14508c; text-transform: uppercase; letter-spacing: 0.5px; font-size: 12px; }

/* ---- content ----------------------------------------------------------- */
#content h1 {
  font: bold 23px/1.25 "Segoe UI", Arial, Helvetica, sans-serif; color: #14508c;
  padding-bottom: 9px; margin-bottom: 15px; border-bottom: 2px solid #eef1f5;
}
#content h2 {
  font: bold 16px/1.3 "Segoe UI", sans-serif; color: #1f3a56; margin: 20px 0 7px;
  padding-left: 11px; border-left: 4px solid #e8a317;
}
#content h3 { font: bold 13px "Segoe UI", sans-serif; color: #2c3e50; margin: 14px 0 5px; }
#content p { margin-bottom: 12px; }
#content ul, #content ol { margin: 0 0 14px 24px; }
#content li { margin-bottom: 5px; }

.opening-plain { margin-bottom: 14px; }
.opening-plain strong { color: #14508c; }

.shot { margin: 0 0 16px; }
.shot img { display: block; width: 100%; height: auto; border-radius: 5px; box-shadow: 0 1px 5px rgba(15, 25, 40, 0.22); }
.shot figcaption { font-size: 12px; color: #6b7682; padding-top: 5px; }

.tiles { margin: 0 0 16px; }
.tiles:after { content: ""; display: block; clear: both; }
.tiles .tile {
  float: left; width: 194px; margin-right: 14px;
  border-radius: 6px; box-shadow: 0 0 0 1px #d3dae2, 0 1px 4px rgba(15, 25, 40, 0.08);
  background: #fcfcfd; overflow: hidden;
}
.tiles .tile.end { margin-right: 0; }
.tiles img { display: block; width: 100%; height: 96px; object-fit: cover; }
.tiles .cap { padding: 9px 11px; }
.tiles h3 { margin: 0 0 3px; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.5px; color: #14508c; }
.tiles p { font-size: 12px; margin: 0; color: #55606c; }

dl.spec { margin-bottom: 16px; border-radius: 6px; box-shadow: 0 0 0 1px #d3dae2; overflow: hidden; }
dl.spec div { border-top: 1px solid #e4e9ef; padding: 8px 11px; }
dl.spec div:first-child { border-top: 0; }
dl.spec div:after { content: ""; display: block; clear: both; }
dl.spec dt { float: left; width: 190px; font-weight: bold; color: #1f3a56; font-size: 12px; }
dl.spec dd { margin-left: 202px; font-size: 13px; }

.scrollx { overflow-x: auto; margin-bottom: 16px; }
table.attrib { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px;
  border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px #d3dae2; }
table.attrib caption { text-align: left; color: #6b7682; padding-bottom: 6px; }
table.attrib th, table.attrib td {
  border-top: 1px solid #e4e9ef; padding: 8px 10px; text-align: left; vertical-align: top;
}
table.attrib tr:first-child th, table.attrib tr:first-child td { border-top: 0; }
table.attrib th { background: #eef1f5; color: #1f3a56; }

hr.sep { border: 0; border-top: 1px solid #e0e5ea; margin: 20px 0; }

/* ---- footer ------------------------------------------------------------ */
.pagefoot {
  clear: both; background: #eef1f5;
  padding: 16px 26px; font-size: 12px; color: #55606c;
}
.pagefoot a { color: #14508c; }
.pagefoot p { margin-bottom: 5px; }
.pagefoot address { font-style: normal; }
.pagefoot .legal { color: #1f3a56; }
.pagefoot .bar { border-top: 1px solid #d8dee5; margin-top: 9px; padding-top: 9px; }

a { color: #14508c; }
a:hover { color: #b35c00; }
a:focus { outline: 2px solid #e8a317; outline-offset: 1px; }

/* ---- cookie notice ----------------------------------------------------- */
.ck-rugby {
  position: fixed; left: 0; right: 0; bottom: 0; background: #1f3a56; color: #e6eef6;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25); padding: 14px 26px; font-size: 12.5px;
}
.ck-rugby p { margin-bottom: 8px; }
.ck-rugby a { color: #ffcf70; }
.ck-rugby button {
  font: 12.5px "Segoe UI", sans-serif; padding: 7px 14px; margin-right: 8px; cursor: pointer;
  border-radius: 4px; background: #e8a317; border: 0; color: #26210f;
  transition: filter 0.15s ease;
}
.ck-rugby button + button { background: #dde5ee; color: #1f3a56; }
.ck-rugby button:hover { filter: brightness(1.08); }

/* ---- small screens ----------------------------------------------------- */
@media (max-width: 860px) {
  .page { max-width: none; margin: 0; border-radius: 0; }
  #navcol { float: none; width: auto; }
  #content { margin-left: 0; margin-top: 18px; }
  .tiles .tile { float: none; width: auto; margin: 0 0 14px; }
  .tiles img { height: 150px; }
  dl.spec dt { float: none; width: auto; }
  dl.spec dd { margin-left: 0; }
}