html,body{overflow-x:hidden;max-width:100%;}
img{max-width:100%;height:auto;}
@media (max-width:860px){
  #SSCI,#col1,#col2{width:100%!important;float:none!important;margin:0 auto!important;}
  /* Secondary pages use the same 2-column pattern via inline widths + .menuBar2
     (no ids) -> stack their legacy fixed-width wrappers and nav full-width too */
  div[style*="width:8"],div[style*="width:7"],div[style*="width:6"],
  div[style*="width:5"],div[style*="width:4"]{max-width:100%!important;width:100%!important;float:none!important;}
  div.menuBar2{width:100%!important;max-width:100%!important;float:none!important;margin:1em auto 0!important;clear:both!important;}
  /* Contain floated children so stacked columns keep their height
     (col2's body text is a float:left child; without this col2 collapses
     and col1's dark panel paints over the hidden content -> big empty gap) */
  #SSCI,#col2{display:flow-root!important;}
  #col1{margin-top:1em!important;clear:both!important;}
  table[width]{width:100%!important;max-width:100%!important;}
  table{width:100%!important;max-width:100%!important;table-layout:fixed!important;}
  input,textarea,select{max-width:100%!important;}
  /* long unbreakable URLs in listing cells -> allow wrapping so they fit */
  td,th,a{overflow-wrap:anywhere;}
  .menuButtonFix{width:auto!important;}
  /* Town-page horizontal nav bar has a fixed 621px width -> make it fluid */
  div.menuBar{width:100%!important;left:0!important;top:0!important;}
  a.menuButton,.menuButton{min-height:44px;display:block;line-height:2.4em;}
  /* Legacy imgs carry fixed width= attrs (e.g. 609px banner); table-layout:fixed
     above already stops them widening cells. Keep width/height attrs intact so the
     browser reserves aspect-ratio space (no layout shift); just cap + scale height. */
  img{max-width:100%!important;height:auto!important;}
  body{font-size:12pt;}
}
h1.ph{font-size:13pt;font-weight:bold;display:inline;margin:0;font-family:Arial,Helvetica,sans-serif;color:inherit;}

/* ===== Centering + grid alignment (2026-07 layout tidy) ===== */
/* Desktop / tablet, above the mobile stack breakpoint */
@media (min-width:861px){
  /* Homepage: keep the whole content+nav unit centered with breathing room */
  #SSCI{margin:1.5em auto!important;}

  /* Town-nav column: give it a defined panel so links read as one tidy,
     aligned grid instead of floating loose on the dark page background */
  #col1{
    background:#2b4238;
    border:1px solid #4c655a;
    border-radius:5px;
    padding:10px 8px 12px!important;
  }
  #col1 .menuButtonFix{
    width:auto!important;          /* fill the column -> even, aligned buttons */
    border-color:#4c655a!important;
    margin:0 0 3px!important;
  }
  #col1 a.menuButton{
    display:block;
    text-align:center;
  }
  #col1 img{max-width:100%;height:auto;margin-left:auto;margin-right:auto;}

  /* Town pages: the legacy align=center table stays centered; add balance */
  body>div[align="center"]{margin:1.5em auto!important;}
}

/* Homepage content tidy (all widths) — #col2/#col1 exist only on the home page,
   so these never touch the town pages. Centering the content images on their
   own rows removes legacy float-overhang (text sitting beside/under a floated
   image box) and reads as the requested "centered" layout. */
#col2 .light img[align]{
  float:none!important;
  display:block;
  margin:.6em auto!important;
}
/* Rotating ad banner: was floated right into the H1/intro text -> center it */
#IBanner1{
  float:none!important;
  clear:both;
  display:block;
  text-align:center;
  margin:.5em auto!important;
  width:auto!important;
}
#IBanner1 img{margin:0 auto!important;}
/* Keep short inline links/place-names on one line so their wrapped bounding
   boxes don't visually collide with neighbouring links in the same paragraph */
#col2 .light p a,#col2 .light p span.deadlink{white-space:nowrap;}
/* Blog caption: sit it below the blog image instead of overlaying it */
#sscblog #sscblogtext{margin:.4em auto 0!important;}
/* Social icons lost their width/height attrs in restore -> reserve 24x24 so the
   header row doesn't grow when they load (kills the remaining layout shift) */
#Networks img{width:24px!important;height:24px!important;}
/* ===== end layout tidy ===== */