/* ---------- general ---------- */
body               { background: url(Images/dark-wood-background.jpg); background-size: auto; }
/* ---------- header items ---------- */
.loc > div         { margin: 15px 0 0 20px; display: inline-block; }
.loc .address      { width: 158px; }
.loc .mob img      { margin-top: 10px; margin-left: 5px; float: right; }
.loc .phone img    { margin-top: -5px; }

/* ---------- 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: 15px; color: #ccc; padding: 11px 20px; display: inline-block; }
nav.main a:hover   { color: #fff; text-decoration: underline; }
nav.main .active-page { background-color: #222; }
nav.bottom         { padding: 10px 0; background-color: #555; }
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; }

/* ---------- mobile and PC top-nav, radio-select elements off-canvas, scroll-top button ----------*/
.top-nav           { z-index: 9; }
.top-nav.lockTS    { position: fixed; top: 0; width: 950px; 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; }
.cpyrt             { padding: 0 20px 20px; }

/* ---------- Tablet Landscape size ---------- */
@media only screen and (min-width: 788px) and (max-width: 979px) {
  .top-nav.lockTS  { width: 758px; }
  .loc div         { margin: 5px 0 0 10px; }
  .loc div.logo    { margin-top: 10px; }
}
/* ---------- Tablet Portrait and Mobile Landscape size ---------- */
@media only screen and (min-width: 610px) and (max-width: 787px) {
  .top-nav.lockTS  { width: 600px; }
  .loc div         { margin: 8px 0 8px 50px; vertical-align: middle; }
  .loc div.logo    { margin-left: 10px; }  /* logo image */
}
/* ---------- Mobile Portrait - general ---------- */
@media only screen and (max-width: 609px) {
  .content.normal  { min-height: 500px; }
  .loc .logo       { margin: 15px 10px; }
  .loc .mob        { 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: 82px; }     /* 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; }
}
/* ---------- 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; }
}