/* =========================================================
   0) RESET / BASE
   ========================================================= */

html, body, address, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
  margin: 0;
  padding: 0;
}

* { box-sizing: border-box; }

img, fieldset { border: 0; }

img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

/* html5 elements */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, bottommenu {
  display: block;
}

/* =========================================================
   1) GLOBAL TYPOGRAPHY / COLORS
   ========================================================= */

body {
  font-size: 100%;
  color: #666;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 135%;

  background: #0d1424 url(_imagery/washington-dc.jpg) no-repeat center top;
  background-attachment: fixed;
  background-repeat: repeat-x;
}

a {
  color: #026acb;
  text-decoration: underline;
  outline: none;
}
a:hover { text-decoration: none; }

p { margin: 0 0 1.2em; }

/* lists */
ul, ol {
  margin: 1em 0 1.4em 24px;
  padding: 0;
  line-height: 140%;
}
li { margin: 0 0 .5em 0; }

/* headings */
h1 {
  font-family: 'Teko', sans-serif;
  font-size: 200%;
  font-weight: bold;
  color: #4f5266;
  line-height: 33px;
}
h2 {
  font-size: 160%;
  font-weight: bold;
  color: #666;
  line-height: 165%;
  margin: 10px 0 15px;
  font-family: 'Oswald', sans-serif;
}
h2.monthlist {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 135%;
  font-weight: bold;
  color: #fff;
  background-color: #223d73;
  padding: 12px 0 15px 10px;
  border-bottom: 1px solid #999;
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}
h3 { font-family: 'Oswald', sans-serif; }
h4 {
  font-size: 120%;
  font-weight: bold;
  color: #666;
  line-height: 165%;
  margin: 10px 0 15px;
  font-family: 'Oswald', sans-serif;
}

/* =========================================================
   2) UTILITIES
   ========================================================= */

.floatright { float: right; margin-left: 5px; }
.floatover  { float: right; }
img.imagepad { margin: 5px; }

.whitetext  { color: #e4dddd; }
.whitedtext { color: #fff; }

.titlewhite130,
.whitetitle { color: #fff; font-size: 130%; }

a.whitelink { color: #fff; text-decoration: underline; }
a:hover.whitelink { color: #0CF; }

.webcamred { background: #c00; padding: 0 2px; border-radius: 3px; }
.highlight { background: yellow; padding: 0 2px; border-radius: 3px; }

/* =========================================================
   3) HR
   ========================================================= */

hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  margin: 35px 0;
}

/* =========================================================
   4) LAYOUT
   ========================================================= */

#fatwrap { width: 1400px; margin: 0 auto; }
#pagewrap { width: 1080px; margin: 0 auto; }

#content {
  background: #fff;
  margin: 30px 0;
  padding: 20px 35px;
  width: 600px;
  float: left;

  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

#sidebar {
  width: 380px;
  float: right;
  margin: 30px 0;
}

/* =========================================================
   5) TOP NAV (.topnav)
   ========================================================= */

.topnav {
  overflow: hidden;
  background-color: #0d1424;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

.topnav #myLinks { display: none; }

.topnav a {
  color: #fff;
  padding: 14px 16px;
  text-decoration: none;
  font-family: 'Teko', sans-serif;
  font-size: 165%;
  display: block;
}

.topnav a.icon {
  background: #000;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover { background-color: #f4d75c; color: #fff; }

.active { background-color: #000; color: #fff; }

/* Search inside dropdown */
#searchnav { margin-left: 10px; margin-bottom: 50px; }
#searchnav input[type="text"] {
  width: 75%;
  max-width: 260px;
  padding: 7px 8px;
}
#searchnav input[type="submit"] { padding: 7px 10px; }

/* =========================================================
   6) PILL BUTTONS (shared)
   ========================================================= */

.bottommenucenter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 10px 10px;
  background: transparent;
  text-align: center;
}

/* pill link */
.navbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;

  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  color: #e9edf2;

  font-size: 14px;
  font-weight: 800;
  line-height: 1;

  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.navbtn:hover {
  background: rgba(255,255,255,0.92);
  color: #111;
  transform: translateY(-1px);
}

.navbtn.active {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}

.navbtn:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* LIVE badge logic (ONLY for .live) */
.navbtn::after { content: ""; }

.navbtn.live::after {
  content: "LIVE";
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #ff4d4d;
}

.navbtn.no-live::after { content: ""; }
.navbtn.active::after { content: ""; } /* optional */

/* =========================================================
   7) UTILITY BAR (two dropdown triggers)
   ========================================================= */

.utilitybar {
  max-width: 1080px;
  margin: 10px auto 14px;
  border-radius: 10px;
  overflow: hidden;

  background: rgba(13, 20, 36, 0.92);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}

.utilitybar-inner {
  display: flex;
  align-items: center;
  padding: 10px 12px;
}

.utilitybar-left { flex: 1; }

.utilitybar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Trigger buttons smaller + softer */
.utbtn {
  appearance: none;
  border: 0;
  background: transparent;

  color: #a9b7c9;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;

  padding: 6px 6px;
  transition: color 0.15s ease;
}

.utbtn:hover,
.utbtn[aria-expanded="true"] { color: #fff; }

.utcaret { font-size: 12px; opacity: 0.7; }

.uticon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 14px;
  border-radius: 4px;
  background: #f4d75c;
  color: #0d1424;
  font-size: 10px;
  font-weight: 900;
}

.utilitypanels { padding: 0 0 10px; }
.utpanel { padding: 10px 10px 0; }
.utpills { padding: 6px 0; }
.utweatherwrap { padding: 6px 0 12px; }

/* Make pills slightly smaller inside utility dropdown */
.utilitybar .navbtn {
  font-size: 13px;
  padding: 7px 12px;
}

/* =========================================================
   8) ACCUWEATHER SAFETY (prevents collapse/hiding)
   ========================================================= */

/* If any global CSS causes widgets to collapse, this helps */
.aw-widget-current {
  display: block !important;
  max-width: 100%;
}

.aw-widget-legal {
  display: block;
  height: 1px; /* keeps it present but not visually annoying */
  overflow: hidden;
}

/* =========================================================
   9) SIDEBAR / WIDGETS
   ========================================================= */

#anothersidebartop { width: 100%; margin: 0 0 25px; }

#adpeepstext { width: 300px; height: 50px; float: right; }
#pushoverthebanner { float: right; margin-top: -80px; }

.widget {
  background: #fff;
  margin: 0 0 50px;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.widgettitle { margin: 0 0 5px; }
.widget ul { margin: 0; padding: 0; }
.widget li {
  padding: 6px 0;
  list-style: none;
  clear: both;
  border-top: solid 1px #eee;
}

.widget2 {
  background: #fff;
  margin: 20px 0 50px;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* =========================================================
   10) FOOTER / CLEARFIX
   ========================================================= */

#footer {
  clear: both;
  color: #ccc;
  font-size: 85%;
  margin-left: 0;
}
#footer a { color: #fff; }

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: block; zoom: 1; }

/* =========================================================
   11) RESPONSIVE
   ========================================================= */

@media screen and (max-width: 980px) {
  #pagewrap { width: 95%; }
  #content { width: 60%; padding: 3% 4%; }
  #sidebar { width: 30%; }
  #sidebar .widget { padding: 8% 7%; margin-bottom: 10px; }

  .video embed, .video object, .video iframe {
    width: 100%;
    height: auto;
    min-height: 300px;
  }
}

@media screen and (max-width: 650px) {
  #content { width: auto; float: none; margin: 20px 0; }
  #sidebar { width: 100%; margin: 0; float: none; }
  #sidebar .widget { padding: 3% 4%; margin: 0 0 10px; }

  .video embed, .video object, .video iframe { min-height: 250px; }
}

@media (max-width: 520px) {
  .utilitybar-right { gap: 10px; }
  .utbtn { font-size: 14px; }
}


/* Helps prevent “renders but invisible” */
#wxPanel .utweatherwrap{
  min-height: 180px;
}

/* Safety */
.aw-widget-current{
  display:block !important;
  max-width:100%;
}

/* =========================================================
   LC FOOTER V2 (modern footer, unique names, no conflicts)
   ========================================================= */

#lcFooterV2 {
  margin: 30px auto 0;
  max-width: 1080px; /* matches your layout width */
  border-radius: 14px;
  overflow: hidden;

  background: rgba(13, 20, 36, 0.92);
  border: 1px solid rgba(255,255,255,0.12);

  box-shadow: 0 2px 10px rgba(0,0,0,.45);
}

#lcFooterV2-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  padding: 16px 16px;
}

/* Links */
#lcFooterV2-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}

.lcFooterV2-link {
  display: inline-flex;
  align-items: center;

  padding: 8px 12px;
  border-radius: 999px;

  text-decoration: none;
  color: #e9edf2;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);

  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.lcFooterV2-link:hover {
  background: rgba(255,255,255,0.92);
  color: #111;
  transform: translateY(-1px);
}

/* Search */
#lcFooterV2-searchWrap {
  flex: 0 0 auto;
}

#lcFooterV2-searchForm {
  display: flex;
  align-items: center;
  gap: 8px;
}

#lcFooterV2-searchInput {
  width: 240px;
  max-width: 45vw;

  padding: 9px 10px;
  border-radius: 10px;

  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.10);
  color: #ffffff;

  outline: none;
}

#lcFooterV2-searchInput::placeholder {
  color: rgba(233,237,242,0.75);
}

#lcFooterV2-searchInput:focus {
  border-color: rgba(244,215,92,0.85);
  box-shadow: 0 0 0 3px rgba(244,215,92,0.20);
}

/* Button */
#lcFooterV2-searchBtn {
  padding: 9px 12px;
  border-radius: 10px;

  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(244,215,92,0.95);
  color: #0d1424;

  font-weight: 800;
  cursor: pointer;

  transition: transform 0.15s ease, filter 0.15s ease;
}

#lcFooterV2-searchBtn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* Meta line */
#lcFooterV2-meta {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding: 12px 16px;
  text-align: center;
}

#lcFooterV2-credit {
  margin: 0;
  color: rgba(233,237,242,0.85);
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
}

.lcFooterV2-metaLink {
  color: #f4d75c;
  text-decoration: none;
  font-weight: 800;
}

.lcFooterV2-metaLink:hover {
  text-decoration: underline;
}

/* Screen-reader-only label */
.lcFooterV2-srOnly {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Responsive */
@media (max-width: 720px) {
  #lcFooterV2-inner {
    flex-direction: column;
    align-items: stretch;
  }

  #lcFooterV2-searchForm {
    justify-content: center;
  }

  #lcFooterV2-searchInput {
    width: 100%;
    max-width: none;
  }

  #lcFooterV2-nav {
    justify-content: center;
  }
}

/* =========================================================
   LC SIDEBAR RESTORE (adds styling for your custom sidebar IDs)
   Add this to the END of css-17-livcity-2026.css
   ========================================================= */

/* Make sidebar media behave nicely */
#sidebar img { border-radius: 10px; }
#sidebar iframe{
  width: 100%;
  height: 240px;
  border: 0;
  border-radius: 10px;
  display: block;
  margin: 12px 0 18px;
  background: #000;
}

/* Sidebar typography + spacing */
#sidebar p{
  margin: 0 0 14px;
  line-height: 1.45;
}

/* Sidebar HR not so huge */
#sidebar hr{
  margin: 18px 0;
}

/* IMPORTANT: Your global CSS sets ul margins.
   In the sidebar we want tighter, modern lists. */
#sidebar ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
#sidebar li{
  margin: 0;
  padding: 9px 0;
  border-top: 1px solid #ececec;
}
#sidebar li:first-child{ border-top: 0; }

/* Sidebar links */
#sidebar a{
  text-decoration: none;
}
#sidebar a:hover{
  text-decoration: underline;
}

/* “Card” look for your custom sidebar sections */
#sidebar #archeology,
#sidebar #seqallsitegrey,
#sidebar #seqallsitegreyblue,
#sidebar #seqmuseums{
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  overflow: hidden;
  margin: 16px 0;
  border: 1px solid rgba(0,0,0,0.06);
}

/* Inner padding for those blocks (you wrap ULs inside them) */
#sidebar #archeology ul,
#sidebar #seqallsitegrey ul,
#sidebar #seqallsitegreyblue ul,
#sidebar #seqmuseums ul{
  padding: 10px 14px 12px;
}

/* Your section titles are H3s inside those ULs */
#sidebar #archeology h3,
#sidebar #seqallsitegrey h3,
#sidebar #seqallsitegreyblue h3,
#sidebar #seqmuseums h3{
  margin: 0 0 10px;
  padding: 10px 12px;

  font-family: 'Oswald', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.1;

  text-transform: uppercase;
  letter-spacing: 0.08em;

  color: #ffffff;
  background: #223d73;
  border-radius: 10px;
}

/* Links inside those blocks */
#sidebar #archeology a,
#sidebar #seqallsitegrey a,
#sidebar #seqallsitegreyblue a,
#sidebar #seqmuseums a{
  color: #0b3a86;
  font-weight: 700;
}
#sidebar #archeology a:hover,
#sidebar #seqallsitegrey a:hover,
#sidebar #seqallsitegreyblue a:hover,
#sidebar #seqmuseums a:hover{
  color: #06224f;
}

/* Your “whitetitle” paragraph (population note) — make it a readable callout */
#sidebar .whitetitle,
#sidebar .titlewhite130{
  display: block;
  margin: 16px 0;
  padding: 12px 14px;
  border-radius: 12px;

  background: rgba(13, 20, 36, 0.92);
  border: 1px solid rgba(255,255,255,0.12);
  color: #e9edf2;

  font-size: 14px;
  line-height: 1.45;
}

/* If any of your older “grey wrappers” are present, keep them harmless */
#sidebar #seqallsitegreyff,
#sidebar #seqallsitegreyblueff,
#sidebar #seqmuseumsff{
  padding: 0; /* avoid double padding */
}

/* Footer must sit BELOW the floated content + sidebar */
#lcFooterV2 {
  clear: both;
}

/* Contain floats so following elements behave consistently */
#pagewrap::after {
  content: "";
  display: table;
  clear: both;
}

/* =========================================
   FIX: tighten gap between #content and #sidebar
   (modern browsers use flex; old browsers keep floats)
   ========================================= */

@supports (display: flex) {
  #pagewrap{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;              /* <-- adjust this number (12–24px) */
  }

  #content{
    float: none;
    width: auto;            /* let flex control it */
    flex: 1 1 0;            /* fill remaining space */
    margin: 30px 0;
  }

  #sidebar{
    float: none;
    width: 380px;
    flex: 0 0 380px;        /* keep your sidebar width */
    margin: 30px 0;
  }
}

/* ===== Layout hard-reset: prevent #pagewrap flex scrambling ===== */
#pagewrap{
  display:block !important;     /* prevents flex/grid layout from taking over */
}

#pagewrap::after{
  content:"";
  display:block;
  clear:both;                   /* contains floated #content and #sidebar */
}


/* ===== Tighten the #content + #sidebar gap under border-box ===== */
#content{
  width: 670px;   /* 1080 - 380 sidebar - ~30 gap */
}

#sidebar{
  width: 380px;   /* keep as-is, but reaffirm */
}

/* ===== Force 2-column layout: content left, sidebar right ===== */
#content{
  float: left !important;
  clear: none !important;
  width: 660px !important;          /* safe with 1080 pagewrap + 380 sidebar */
}

#sidebar{
  float: right !important;
  clear: none !important;
  width: 380px !important;
}

/* Contain the floats so the footer stays below both columns */
#pagewrap{
  display: block !important;
}

#pagewrap::after{
  content:"";
  display: table;
  clear: both;
}

/* If anything accidentally clears the sidebar, this prevents it */
#sidebar, #content{
  margin-top: 30px;
  margin-bottom: 30px;
}


/* =========================================================
   MOBILE FIX: webcams-washington-dc.php (and other pages)
   Put this at the VERY END of your CSS
   ========================================================= */

@media (max-width: 700px) {

  /* Make the overall wrapper fluid */
  #fatwrap,
  #pagewrap {
    width: 94% !important;
    max-width: 94% !important;
    margin: 0 auto !important;
  }

  /* Stack columns */
  #content,
  #sidebar {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 !important;
  }

  /* Make the white content card fit nicely */
  #content {
    padding: 16px 16px !important;
    border-radius: 12px;
  }

  /* Better default reading size */
  body {
    font-size: 18px;            /* increases overall readability */
    line-height: 1.55;
  }

  /* Make headings scale more naturally on phones */
  h1 { font-size: 1.7rem !important; line-height: 1.15 !important; }
  h2 { font-size: 1.25rem !important; line-height: 1.25 !important; }
  h3 { font-size: 1.15rem !important; }

  /* Don’t let images/iframes overflow the content card */
  img, iframe, video {
    max-width: 100% !important;
    height: auto !important;
  }

  /* If you have any embedded iframes for cams, give them a sane height on phones */
  iframe {
    width: 100% !important;
    min-height: 220px;
  }
}

/* Slightly tighter for very small phones */
@media (max-width: 420px) {
  body { font-size: 17px; }
  #content { padding: 14px 14px !important; }
}