/* ---------- Reset & base ---------- */
* { margin: 0; padding: 0; }
body {
  background: #fff url(/static/images/bodybg.png) repeat-x;
  font: 74% Arial, Sans-Serif;
  color: #454545;
  line-height: 1.6em;
}

a { text-decoration: none; color: #C40000; background: inherit; }
a:hover { color: #808080; background: inherit; }
a:focus { outline: 0; }

h1 { font-size: 2.8em; line-height: 35px; }
h2 { color: #000; font: bold 170% Arial, Sans-Serif; letter-spacing: -1px; padding: 0; margin: 0 0 10px; }
img { border: 0; }

.grey { color: #484848; }

/* ---------- Layout ---------- */
#wrap { width: 900px; margin: 10px auto 0; }

#left { float: left; width: 630px; padding: 5px 15px 0 5px; margin: 0 0 25px 0; }
#left p { margin: 0 0 15px; }

#right { width: 220px; float: right; }
#info { border: 1px solid #ccc; padding: 7px; font-size: .9em; background: #f4f4f4; }

/* Search box */
#searchform {
  background: url(/static/images/searchform.gif) no-repeat;
  padding: 8px 4px 10px 4px;
  height: 27px;
  font: bold 0.9em Arial, Sans-Serif;
  margin: 0 0 20px;
}
#searchform p { padding: 0; margin: 0; }
input.search {
  width: 127px;
  border: none;
  background: url(/static/images/input.gif) no-repeat;
  padding: 7px;
  margin: 0 4px 0 5px;
}
input.submit {
  width: 53px;
  height: 29px;
  border: none;
  background: #FFF url(/static/images/submit.gif) no-repeat;
  font: bold 1.2em Arial, Sans-Serif;
  padding: 0px;
  color: #FFF;
}

/* ---------- Header ---------- */
#logo { float: left; width: 400px; margin: 0 0 7px; }

#header_top {
  background: url(/static/images/top.gif) no-repeat top right;
  border-right: 2px solid #fff;
  color: #454545;
  padding: 10px 0 12px 7px;  /* bottom padding so slogan has room */
  clear: both;
  margin: 0;
  height: auto;              /* was 90px – let header grow with content */
  position: relative;        /* needed for absolute logo positioning */
}
#header_top p { padding: 0; margin: 0; }

/* Crest logo in the top-right of header */
#header-crest {
  position: absolute;
  top: 6px;
  right: 10px;
  height: 80px;          /* adjust to taste */
  max-width: 35vw;       /* stops it getting huge on small screens */
}

/* Original float-based menu (desktop) */
#header_top ul {
  float: right;
  padding: 12px 220px 0 0;   /* extra right padding to leave space for crest */
  margin: 0 0 5px 0;
}
#header_top ul li {
  list-style-type: none;
  display: inline;
  font-weight: bold;
}
#header_top ul li:not(:first-child) a {
  padding-left: 7px;
  background: #FFF url(/static/images/bullet.gif) no-repeat center left;
  margin-right: 5px;
  color: #C40000;
}
#header_top ul li:not(:first-child) a:hover { color: #808080; }

/* ---------- Header banner ---------- */
#header_bottom {
  background: #454545 url(/static/images/bottom.png) repeat-x;
  color: #EBEBEB;
  padding: 20px 240px 20px 10px;
  clear: both;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  /* space below the banner so the first page heading won't feel cramped */
  margin: 8px 0 72px 0;  /* small gap ABOVE the grey strip */
  height: 90px;
}
#header_bottom h2 {
  color: #F3F2BF;
  width: 250px;
  margin: 0 0 10px;
}

#slogan {
  clear: left;
  width: 730px;
  margin: 6px 0 0 0;    /* was -4px – now pushes text DOWN slightly */
  padding: 0;
  border-top: 0 !important;
}

/* ---------- Main content ---------- */
#maincontent {
  padding: 20px 0;
  clear: both;
  background: url(/static/images/bg.gif) repeat-x;
  /* moves the faint stripe so it doesn't sit on top of the first H2 */
  background-position: left -14px; /* try -10, -14, -18 to taste */
}

/* ---------- Right column action buttons ---------- */
#account_actions {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top: 14px;
}
#account_actions .button {
  display:block;
  text-align:center;
  font-weight:bold;
  text-transform:capitalize;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #c40000;
  color:#fff;
  background:#c40000;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
#account_actions .button:hover {
  background:#a80000;
  border-color:#a80000;
  color:#fff;
}
#account_actions .button.secondary {
  background:#666;
  border-color:#666;
}
#account_actions .button.secondary:hover {
  background:#555;
  border-color:#555;
}

/* ---------- Bottom grey band fed by /footermessages/x ---------- */
#footer_band {
  background: #454545 url(/static/images/bottom.png) repeat-x;  /* grey band */
  color: #EBEBEB;
  padding: 20px 10px;            /* even, compact padding */
  clear: both;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  margin: 24px 0 1px 0;
  min-height: 120px;             /* was 72px – taller, more consistent band */
  box-sizing: border-box;
}
#footer_band a { color: #F3F2BF; text-decoration: underline; }
#footer_band h2,
#footer_band h3,
#footer_band h4 {
  color: #F3F2BF;
  margin: 0 0 8px;
}

/* Optional: make the footer band run full-bleed across the viewport */
#footer_band.full-bleed {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  padding-left: 10px;
  padding-right: 10px;
  border-left: 0;
  border-right: 0;
}

/* ---------- Footer copyright strip ---------- */
#footer {
  clear: both;
  padding: 10px;
  margin: 10px 0 0 0;
  border-top: 1px solid #ccc;
  line-height: 2em;
}

/* ---------- Small helper classes for the rotating content ---------- */
#headercontent,
#footercontent {
  transition: transform .3s ease, opacity .3s ease;
  will-change: transform, opacity;
}
#headercontent.out,
#footercontent.out {
  transform: translateX(-20px);
  opacity: .0;
}
#headercontent.in,
#footercontent.in {
  transform: translateX(0);
  opacity: 1;
}

/* ---------- Mobile friendliness (override some header nav rules) ---------- */
@media (max-width: 860px){
  /* Let the UL become a flex row that can scroll horizontally */
  #header_top ul {
    float:none;
    padding: 10px 90px 0 0;  /* right padding so last item doesn’t sit under crest */
    margin: 0;
    display:flex;
    gap:12px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  #header_top ul li:not(:first-child) a {
    background: none;
    padding-left: 0;
    margin-right: 0;
  }

  /* Make the action buttons a bit larger for thumbs */
  #account_actions .button {
    padding:12px 14px;
    font-size: 1rem;
  }

  /* Slightly smaller crest on narrow screens */
  #header-crest {
    height: 60px;
    top: 4px;
    right: 6px;
  }
}