/* 14th Hastings Guestwell Scout Group: restored stylesheet.
   Recreates the original FrontPage table layouts (group home 2016, Guestwell
   campsite pages 2012-2015) with the inline <font> styling moved into CSS. */

html { background: #ffffff; }
body { margin: 0; padding: 0 0 24px; background: #ffffff; color: #000000; font-family: geneva, arial, sans-serif; font-size: 10pt; }
a { color: #0000ee; }
img { border: 0; }
table { border-collapse: collapse; }
td { vertical-align: top; }
p { margin: 1em 0; }

/* Restoration notice (added, not part of the original design) */
.notice { margin: 0 0 12px; padding: 9px 16px; background: #fff7d1; border-bottom: 1px solid #c9b25b; color: #333333; font: 13px/1.45 arial, helvetica, sans-serif; text-align: center; }

/* ---------- Guestwell campsite pages (2012-2015 design) ---------- */
.camp-outer { width: 755px; margin: 0 auto; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; }
.camp-hdr-cell { background: #3399ff; border-top: 1px solid #000000; padding: 0; }
.camp-hdr { width: 100%; border: 5px solid #111111; }
.camp-title { width: 67%; height: 71px; background: #008000; vertical-align: middle; padding: 0 0 0 5px; }
.camp-title img { vertical-align: middle; }
.camp-title .t, .camp-title h1 { display: inline; margin: 0; font: bold 24pt "Arial Black", arial, sans-serif; color: #000000; vertical-align: middle; }
.camp-tag { width: 33%; background: #008000; vertical-align: middle; text-align: center; }
.camp-tag p { margin: 0; color: #ffcc00; font: italic bold 10pt verdana, arial, sans-serif; }
.camp-navrow { background: #339966; padding: 0; }
.camp-nav { width: 100%; height: 33px; border: 1px solid #ffcc00; }
.camp-nav td { width: 50%; background: #ffff00; border: 1px solid #000000; text-align: center; vertical-align: middle; font-size: 12pt; font-weight: bold; }
.camp-body { width: 100%; border: 5px solid #000000; border-top-width: 0; }
.camp-body > tbody > tr > td { background: #ffffff; }
.camp-gap { width: 1%; }
.camp-left { width: 21%; }
.camp-main { width: 49%; }
.camp-main.wide { width: 72%; }
.camp-right { width: 26%; }
.box-head { margin: 0; padding: 2px 4px; color: #ffffff; font-weight: bold; }
.box-head.navy { background: #000080; }
.box-head.black { background: #111111; }
.box-head.orange { background: #ff9933; }
.side-list { width: 100%; }
.side-list td { height: 20px; background: #c6c6ff; border-left: 1px solid #ff0000; border-right: 1px solid #ff0000; padding: 2px 3px; font-weight: bold; font-family: arial, sans-serif; }
.side-list td.blank { background: #ffffff; }
.news { height: 7px; background: #fff2bf; border: 1px solid #cccccc; border-top: 0; border-bottom-color: #000000; }
.hq-photo { border: 1px solid #cccccc; border-top: 0; padding: 0; text-align: center; }
.hq-photo img { display: block; width: 100%; height: auto; }
.hq-text { border: 1px solid #000000; border-top: 0; padding: 4px 7px 10px; }
.hq-text p { margin: 1em 0; color: #0000ff; font-size: 12pt; font-weight: bold; }
.visit { margin: 4px 0; padding: 2px 4px; background: #800080; font-family: arial, sans-serif; font-weight: bold; }
.visit a { color: #ffffff; }
.center { text-align: center; }
.camp-foot { background: #000080 !important; padding: 5px; text-align: center; color: #ffffff; font: 10px arial, sans-serif; }
.history h1 { margin: 1em 0; text-align: center; font: bold 12pt tahoma, arial, sans-serif; text-decoration: underline; }
.history p { font: bold 10pt tahoma, arial, sans-serif; }
.about h1 { margin: 1em 0 0; text-align: center; font: normal 13.5pt "Berlin Sans FB", "Trebuchet MS", arial, sans-serif; text-decoration: underline; }
.about p { margin: 0 0 1.2em; font: 14pt/1.15 "Berlin Sans FB", "Trebuchet MS", arial, sans-serif; }
.slides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 8px 4px 14px; }
.slides figure { margin: 0; text-align: center; }
.slides img { display: block; width: 100%; height: auto; border: 1px solid #000000; }
.slides figcaption { padding: 3px 2px 0; font: 9pt arial, sans-serif; }

/* ---------- Group home page (2016 design) ---------- */
.grp-outer { width: 746px; margin: 0 auto; background: #008080; border: 2px solid #000000; }
.grp-outer > tbody > tr > td { background: #b9dcff; border: 3px solid #000000; padding: 1px 4px; text-align: center; }
.grp-hdr { width: 100%; margin: 0 auto; }
.grp-topbar { height: 29px; background: transparent /* bg:background-top-menu */; border-left: 1px solid #000000; border-right: 1px solid #000000; }
.grp-logo { background: #ffffff; padding: 2px 4px; }
.grp-logo img { float: left; }
.grp-logo h1 { margin: 22px 0 8px; font: bold 24pt tahoma, arial, sans-serif; }
.grp-navbar { height: 33px; background: transparent /* bg:background-bottom-menu */; border-left: 1px solid #000000; border-right: 1px solid #000000; text-align: center; vertical-align: middle; }
.grp-navbar p { margin: 8px 0 6px; font: bold 13.5pt arial, sans-serif; color: #ffffff; }
.grp-navbar a { color: #0000ee; margin: 0 18px; }
.grp-band { width: 100%; margin: 12px auto 0; border: 2px solid #000000; }
.grp-welcome { width: 46%; background: #99cc00; border: 1px solid #000000; vertical-align: middle; text-align: center; }
.grp-welcome p { margin: 0; font: 18pt "Arial Black", arial, sans-serif; }
.grp-welcome img { vertical-align: middle; }
.grp-slide { width: 54%; border: 1px solid #000000; padding: 0; vertical-align: middle; }
.grp-slide img { display: block; width: 100%; height: auto; }
.grp-main { width: 100%; margin: 16px auto 0; }
.grp-box { background: #ccff66; border: 2px solid #000000; padding: 1px 12px; text-align: justify; }
.grp-box p { font: bold 10pt arial, sans-serif; }
.grp-box p.c { text-align: center; }
.grp-box h2 { margin: 1em 0 0; font: bold 12pt arial, sans-serif; text-align: center; }
.grp-spacer { height: 16px; }
.grp-foot { width: 100%; margin: 14px auto 2px; }
.grp-foot td { height: 22px; background: transparent /* bg:background-pagebottom */; border: 1px solid #000000; text-align: center; vertical-align: middle; font: 10px arial, sans-serif; color: #000000; }

/* ---------- 404 ---------- */
.lost { padding: 6px 12px 16px; }
.lost h1 { font: bold 14pt tahoma, arial, sans-serif; text-align: center; }
.lost p { font: bold 10pt arial, sans-serif; }

/* ---------- Phones: the original was fixed width; just stop it breaking ---------- */
@media (max-width: 800px) {
  .camp-outer, .grp-outer { width: auto; max-width: 100%; margin: 0 8px; }
  .camp-title .t, .camp-title h1 { font-size: 17pt; }
  .camp-body > tbody > tr > td, .camp-body > tbody > tr { display: block; width: auto; }
  .camp-gap { display: none !important; }
  .camp-left, .camp-right { padding: 6px 8px; }
  .camp-main { padding: 0 8px; }
  .slides { grid-template-columns: repeat(2, 1fr); }
  .about p { font-size: 12.5pt; }
  .grp-logo h1 { margin: 10px 0 6px; font-size: 17pt; }
  .grp-navbar a { margin: 0 10px; }
  .grp-band, .grp-band > tbody, .grp-band > tbody > tr, .grp-band > tbody > tr > td { display: block; width: auto; }
  .grp-welcome { padding: 10px 4px; }
  .grp-welcome p { font-size: 14pt; }
}
@media (max-width: 480px) {
  .camp-hdr > tbody > tr > td { display: block; width: auto; }
  .camp-tag { padding: 4px 0 6px; }
  .camp-nav td { font-size: 11pt; }
  .camp-title .t, .camp-title h1 { font-size: 15pt; }
  .grp-logo img { width: 66px; height: auto; }
}