/* ---------- general ---------- */
body               { background: url(Images/background-trail-2023.jpg) no-repeat center center fixed;
                     background-size: cover; position: relative; line-height: 1.4; }
h1, h2, h3, h4     { font-weight: bold; }
  section.normal   { padding: 5px 10px; }
/* ---------- header items ---------- */
.container         { margin: 10px auto; }
.container .core   { padding-bottom: 20px; }
.container .core.max738 section  { max-width: 738px; }
header.main {
    background-color: #ffcf00;
}
header.main .left, header.main .mid   { text-align: center; }

header.main .left img  { margin: 5px; }
header.main .mid label { font-size: 30px; font-weight: bold; display: block; padding-top: 10px; }
header.main .mid .info { margin-top: 10px; display: inline-block; }
header.main .mid .info img { margin-top: -5px; }
div.container      { background: rgba(255, 255, 255, 0.90); }
xx.loc > div         { margin: 15px 0 0 20px; display: inline-block; }
xx.loc .address      { width: 158px; }
xx.loc .mob img      { margin-top: 10px; margin-left: 5px; float: right; }
xx.loc .phone img    { margin-top: -5px; }
.menu-user         { float: right; margin-top: 15px; }
.menu-user > li      { display: block; text-align: right; margin-right: 10px; margin-bottom: 10px; }
.menu-user > li > a    { margin-left: 15px; }
xx.menu-user li a    { color: #ddd; }
.menu-user #logged-in { vertical-align: middle; position: relative; }
.menu-user #logged-in img:hover { cursor: pointer; }
.menu-user #logged-in #arrow { margin-top: 10px; }
.menu-user #logged-in ul { display: none; background-color: #fff; right: -20px; position: absolute; z-index: 108; }
.menu-user #logged-in ul.show  { display: block; }
.menu-user #logged-in ul li { text-align: left; border: 1px solid #aaa; margin: -1px 0; padding: 10px; }

/* ---------- nav-bars, top and bottom ---------- */
nav li             { display: inline-block; }
nav a:hover        { transition: all 0.4s ease; }    /* transition on both menus */
nav.main ul        { margin: 0; } /*  background: rgba(255, 255, 255, 0.8); */
nav.main li        { height: 40px; }
nav.main a, nav.main span, nav.bottom a:visited
                   { font-size: 18px; color: #ddd; padding: 11px 20px; display: inline-block; }
nav.main a:hover   { color: #fff; text-decoration: underline; }
nav.main .active-page a { color: #f7931e; } /*  background-color: #222; */
nav.bottom         { padding: 10px 0; } /*  margin: 0 -10px; */
nav.bottom a       { border-bottom: 1px solid #444; }          /* need matching with background for transition */
nav.bottom a, nav.bottom span, nav.bottom a:visited
                   { font-size: 14px; color: #ddd; padding: 7px 10px 1px; }
nav.bottom a:hover { color: #cfa; border-bottom: 1px solid #bf8; }
nav.bottom ul      { margin: 5px 0; }
nav.bottom ul li   { margin: 0 10px; padding: 0 4px 2px 4px; border-bottom: 1px solid #88a; }
footer.container   {  background-color: #555; }

/* ---------- mobile and PC top-nav, radio-select elements off-canvas, scroll-top button ----------*/
.top-nav           { z-index: 9; background-color: #0071bc;
                     border: 2px solid #f7931e; border-left: none; border-right: none; }
.top-nav.lockTS    { position: fixed; top: 0; width: 1200px; margin-left: -10px; } /*  padding-left: 10px; */
.top-nav label     { display: none; }
.mob-icons         { display: none; }
.hide-off-canvas   { left: -999px; top: -999px; width: 1px; height: 1px; position: absolute; visibility: hidden; }
.btn-scroll-to-top { width: 40px; height: 40px; position: absolute; right: 10px; bottom: 20px; display: none;
                     background: rgba(0, 95, 155, 0.8); padding: 3px; border: 1px solid #014; border-radius: 5px;
                     z-index: 5; } /* position changed to fixed after scrollY > 60 */
.btn-scroll-to-top img { cursor: pointer; }

/* ---------- page layout items ---------- */
.content.normal    { min-height: 320px; }
.reqd              { color: #a00; font-size: 13px; }
.units             { color: #444; font-size: 13px; display: inline-block; }
.cpyrt             { padding: 15px; font-size: 14px; background-color: #0071bc; color: #ddd; }
.float-left        { float: left; margin-right: 10px; }
.float-right       { float: right; margin-left: 10px; }
aside.content      { margin: 10px 0; }
aside.content h4   { font-weight: bold; }
aside.content li   { margin: 10px 0; }
aside.content.border { padding: 5px 10px; border: 1px solid #f7931e; }
aside.facebook     { border: 1px solid #0071bc; }
.core hr, aside hr { margin-bottom: 5px; border: 0px solid #f7931e; height: 1px; background-color: #f7931e; }
aside .buttons     { text-align: center; }
a.facebook         { float: right; margin-top: 2px; border-bottom: none; }
a.facebook img     { height: 35px; width: auto; }
a.rounded          { font-weight: bold; padding: 5px 10px; display: inline-block; background-color: #8dd2ff;
                     border-radius: 15px; box-shadow: 0 0 0 3px #0071bc; margin: 5px; }
    a.rounded.donate {
        background-color: 01539d;
        box-shadow: 0 0 0 3px #0049ff;
    }
.yield-sign        { text-align: center; }
.trail-status      { margin: 5px 0; display: inline-block; }
.trail-status label { font-size: 12px; font-weight: bold; display: inline-block; margin: 4px 5px 0 0; }
.pg-top            { display: inline-block; }
xx.pg-top.buttons    { width: 55%; }
xx.pg-top.trail-status { width: 33%; }
.nlsc              { font-weight: bold; } 
.nlsc span         { font-variant: small-caps; } /*  text-transform: uppercase; */
.int-sign          { float: right; margin: 10px; }
.pic.right         { float: right; border: 1px solid #f7931e; margin-left: 10px; }
.pic.left          { float: left; border: 1px solid #f7931e; margin-right: 10px; }
.map-block         { float: left; width: 48%; display: inline-block; margin-right: 2%; }
.roster            { list-style: disc outside none; margin-left: 0; padding-left: 20px; }
.roster li         { padding-left: 5px; }
.trail-map         { border: 1px solid #aaa; }
xx.page-ad           { float: right; display: inline-block; height: auto; width: 650px; margin-top: 10px; }
xx.page-ad p         { width: 350px; }
xx.page-ad p.gmap a  { float: right; display: inline-block; border-bottom: none; margin: 5px 25px 0 0; }
xx.page-ad .we-gots  { float: right; height: 220px; width: auto; }       
.weather > div     { width: 700px; }
.weather iframe    { width: 700px; }
.equip-hours       { column-count: 2; column-gap: 0; }
input[type="submit"].calc-but     { padding: 4px 10px; }
.pay-info          { margin-top: 20px; }
.sbys ul > li      { display: inline-block; border-bottom: 1px solid #aaa; margin-bottom: 10px; }
.sbys li label     { display: block; margin-bottom: 3px; }
.sbys li img       { cursor: pointer; }
.dev-info          { float: right; font-size: 13px; }
.event > div       { margin-bottom: 5px; font-family: 'PT Sans Narrow', sans-serif; }
.event-list h3     { text-transform: capitalize; }
.event-list .last-update { font-size: 13px; }
.event .all-posts  { margin-left: 25px;  } /* text-align: center; */

/* ---------- PC Monitor - full screen ---------- */
@media only screen and (min-width: 1220px) {
  .sbys ul > li    { width: 570px; }
  .trail-status    { max-width: 500px; }
}
@media only screen and (max-width: 1219px) {
  .sbys li img     { width: 100%; }
}
@media only screen and (min-width: 980px) and (max-width: 1219px) {
  .top-nav.lockTS  { width: 960px; }
  .page-ad         { width: 620px; }
  .page-ad p       { width: 320px; }
  .sbys ul > li    { width: 450px; }
  .trail-status    { max-width: 320px; }
}
/* ---------- Tablet Landscape size ---------- */
@media only screen and (min-width: 788px) and (max-width: 979px) {
  .content.normal.pay-info { padding: 5px; }
  .top-nav.lockTS  { width: 768px; }
  .page-ad         { width: 350px; }
  .page-ad .we-gots { display: none; }
  .sbys ul > li    { width: 360px; }
}
/* ---------- Tablet Portrait and Mobile Landscape size, and larger ---------- */
@media only screen and (min-width: 788px) {
  section.normal   { padding: 5px 20px; }
  .top-nav         { margin: 0 -10px; padding: 0 10px; }
  .sbys ul         { margin: 10px -10px; }
  .sbys ul > li    { padding: 5px 10px; }
  .map-block.marg-top { margin-top: 20px; }
  .pg-top.buttons  { width: 270px; }
}
/* ---------- Tablet Portrait and Mobile Landscape size ---------- */
@media only screen and (max-width: 787px) {
  .menu-user       { float: none; }
  .menu-user li    { display: inline-block; }
  .menu-user li:nth-child(1) { text-align: left; width: 50%; }
  .menu-user li:nth-child(2) { width: 40%; padding-top: 4px; }
  .menu-user li a.facebook   { margin-left: 5px; }
  xx.pg-top            { width: 49%; }
  .weather > div     { width: 100%; }
  .weather iframe    { width: 100%; }
  .map-block         { width: 100%; display: block; margin-top: 5px; }
  .pic.right, .pic.left { float: none; text-align: center; border-width: 1px 0; padding: 5px 0 0; margin-bottom: 10px; }
  .equip-hours       { column-count: 1; }
}
/* ---------- Tablet Portrait and Mobile Landscape size ---------- */
@media only screen and (min-width: 610px) {
  xx.pg-top.buttons  { width: 55%; }
}
/* ---------- Tablet Portrait and Mobile Landscape size ---------- */
@media only screen and (min-width: 610px) and (max-width: 787px) {
  .top-nav.lockTS  { width: 590px; margin-left: 0; }
  xx.loc div         { margin: 8px 0 8px 50px; vertical-align: middle; }
  xx.loc div.logo    { margin-left: 10px; }  /* logo image */
  .page-ad          { width: 350px; }
  .page-ad .we-gots { display: none; }
  section.gallery   { margin-left: 20px; }
  section.gallery ul  { margin-left: 20px; }
}
/* ---------- Mobile Portrait - general ---------- */
@media only screen and (max-width: 609px) {
  .content.normal  { min-height: 500px; }
  xx.loc .logo       { margin: 15px 10px; }
  xx.loc .mob        { display: none; }
  header.main .mid .info a { display: none; }
  .top-nav         { height: 40px; background-color: #fff; border: 1px solid #aaa; position: relative; }
  .top-nav.lockTS  { width: 340px; margin-left: 0; padding-left: 0; }
  .top-nav > *     { margin-top: 10px; }
  .top-nav label   { width: auto; display: inline-block; margin-left: 10px; cursor: pointer;  }
  .top-nav > label      { width: 90px; }     /* keep the menu/close button consistent */
  .top-nav img          { margin: -7px 4px 0; }
  .top-nav .btn-close   { display: none; }
  .top-nav .mob-icons   { display: inline-block; }
  .top-nav .mob-icons a { margin-left: 40px; }
  nav.main         { width: 250px; margin-top: 0; }
  nav.main ul      { border: 0px solid #ccc; background-color: #eee; transition: all 0.2s ease; }
  nav.main ul ul   { margin: 0; }
  nav.main li      { display: block; height: 0; padding-top: 0; overflow-y: hidden; transition: all 0.4s ease;
                     text-align: left; margin: 0; }
  nav.main li:hover     { background-color: #fff; }
  nav.main .active-page { background-color: #eee; }
  nav.main a       { color: #444; font-size: 22px; padding: 4px 10px; display: block; border: none;
                     border-bottom: 1px solid #ccc; min-height: 36px; }
  nav.main a:hover { color: #000; background-color: #fff; border: none; border-bottom: 1px solid #888; }
  nav.main li li a  { padding: 4px 25px; font-size: 18px; min-height: 33px; }

  #navExpand:checked ~ .btn-close  { display: inline-block; }
  #navExpand:checked ~ .btn-menu   { display: none; }
  #navExpand:checked ~ nav.main > ul { border: 2px solid #ccc; }
  #navExpand:checked ~ nav.main li { height: auto; }

  nav.bottom       { padding: 2px 20px; text-align: center; }
  nav.bottom ul li { margin: 3px 15px; }

  .page-ad          { width: 100%; float: none; }
  .page-ad p        { width: 100%; }
  .page-ad .we-gots { display: none; }

}
/* ---------- Mobile Portrait - large ---------- */
@media only screen and (min-width: 360px) and (max-width: 609px) {
}
/* ---------- Mobile Portrait - small ---------- */
@media only screen and (max-width: 359px) {
  .top-nav label  { margin-left: 5px; }
  .top-nav.lockTS { width: 300px; margin-left: 0; padding-left: 0; }
  .top-nav .mob-icons a { margin-left: 30px; }
}