/* ---------- general ---------- */
body     { font: 15px Roboto, Arial, Tahoma, Verdana;
           background: #000 url(Images/striped-background-dk-477.png) repeat-x fixed; }
.wht-bg  { margin-top: 7px; margin-bottom: 7px; background: #eee; }
.drk-bg  { margin-top: 7px; margin-bottom: 7px; padding-top: 10px; background: #163f4c; }
.columns.left-side { min-height: 320px; margin: 0; margin-right: 10px;
                background: #163f4c linear-gradient(to bottom, rgba(22,63,76,1.0) 83%, rgba(238,238,238,1.0) 97%); }
.box     { border: 1px solid #888; }

/* ---------- header items ---------- */
.logo         { text-align: center; padding: 5px; }
.sitename     { font-size: 20px; font-weight: bold; margin-bottom: 5px; }
.loc > div    { margin: 10px 15px 5px; display: inline-block; position: relative; line-height: 1.2; }
.loc img      { position: absolute; left: -25px; top: 0; }
.loc .mob     { margin-left: 30px; }
.loc .phone img    { top: -5px; }

/* ---------- nav-bars, top and bottom ---------- */
nav.main ul        { background-color: #000; }
nav.main li        { height: 38px; }
nav.main a, nav.main span, nav.bottom a:visited  { font-size: 15px; color: #ccc; width: 100%;
                     padding: 11px 20px; display: inline-block; transition: all 0.4s ease; }
nav.main a:hover   { color: #fff; text-decoration: underline; transition: all 0.4s ease; }

/* ---------- 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: 170px; 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; }

/* ---------- footer items ---------- */
.affil            { color: #abc; background-color: #444; padding: 10px; }
.affil ul         { margin-bottom: 15px; display: inline-block; width: 400px; margin-right: 50px;
                              border: 1px solid #ddd; padding: 10px; }
.affil li.title a   { font-size: 18px; font-weight: bold; color: #dda; }
.affil li.logo    { width: 220px; float: right; }

/* ---------- page layout items ---------- */
.content-normal    { min-height: 400px; padding-top: 10px; padding-bottom: 25px; }
.content-normal a        { color: #00a; text-decoration: none; border-bottom: 1px solid #bbb; }
.content-normal a:hover  { color: #004; border-bottom: 1px solid #888; }
.content-normal a.fb   { margin-top: -15px; float: left; margin-right: 10px; border: none; margin-top: 0; }
.content-normal a.fb img { width: 38px; height: 38px; }

.content-normal a.clean-link, .content-normal a.clean-link:hover  { border: none; }

.reqd         { color: #a00; font-size: 14px; }
.cpyrt        { color: #ccc; padding: 10px 20px 20px; font-size: 13px; }
.follow       { float: right; width: 350px; text-align: center; margin-top: 10px; border-bottom: 1px solid #aaa; }
.follow *     { vertical-align: bottom; }
.follow label { font-style: italic; display: inline-block; float: left; }
.follow a     { display: inline-block; float: right; border-bottom: 1px solid #eee; }
.follow img   { width: 38px; height: 38px; margin-top: -15px; }
.paddr        { padding-left: 20px; text-indent: -20px; } /* paddr = postal address */
.paddr:first-line { font-weight: bold; }

/* ---------- nav-bar fully visible ---------- */
@media only screen and (min-width: 610px) {
  nav.main li      { background: linear-gradient(to bottom, #000 0%, #222 40%, #555 60%, #222 75%, #000 100%);
                     border-bottom : 1px solid #888; transition: all 0.4s ease; }
  nav.main li:first-child { border-top : 1px solid #888; }
  nav.main li:hover { background: linear-gradient(to bottom, #023 0%, #134 40%, #267 60%, #134 75%, #023 100%);
                      transition: all 0.4s ease; }
  nav.main .active-page { background: linear-gradient(to bottom, #031 0%, #142 40%, #275 60%, #142 75%, #031 100%); }
  .cpyrt           { text-align: right; }
}
/* ---------- Tablet Landscape size ---------- */
@media only screen and (min-width: 788px) and (max-width: 979px) {
  .loc > div    { margin: 10px 0 5px; }
  .loc .mob     { margin-left: 20px; }
  .top-nav.lockTS { width: 134px; }
  .follow       { width: 280px; }
}
/* ---------- Tablet Portrait and Mobile Landscape size ---------- */
@media only screen and (min-width: 610px) and (max-width: 787px) {
  .loc > div    { margin: 10px 15px 5px; vertical-align: middle; }
  .sitename     { width: 170px; }
  .columns.left-side { min-height: 0; margin: 0; }
  .top-nav.lockTS { width: 600px; }
  nav.main ul        { padding-left: 15px; }
  nav.main li        { width: 90px; display: inline-block; text-align: center; border: none; }
  nav.main li a      { padding: 11px 0; }
  nav.main li:first-child { border-top : none; }
  .content-normal    { padding: 5px 10px; }
  .follow       { width: 280px; }
}
/* ---------- Mobile Portrait - general ---------- */
@media only screen and (max-width: 609px) {
  .loc > div    { margin: 0px 0 5px; }
  .sitename   { width: 100%; text-align: center; }
  .columns.left-side { min-height: 0; margin: 0; }
  .content-normal  { min-height: 500px; padding: 5px 10px; }
  .affil           { width: 340px; padding: 5px 10px 20px }
  .affil ul        { width: auto; margin: 0; padding: 0; }
  .affil li        { margin: 5px; }
  .affil li.logo   { float: none; width: auto; padding: 0; }
  .affil img       { width: 100%; height: auto; }
  .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: 20px; cursor: pointer;  }
  .top-nav > label      { width: 85px; }     /* 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: 20px; }
  nav.main         { width: 200px; margin-top: 0; }
  nav.main ul      { border: 0px solid #ccc; background-color: #eee; transition: all 0.2s ease; }
  nav.main li      { display: block; height: 0; padding-top: 0; overflow-y: hidden; transition: all 0.4s ease; }
  nav.main li:hover     { background-color: #fff; }
  nav.main .active-page { background-color: #eee; }
  nav.main a       { color: #444; font-size: 22px; padding: 4px 20px; display: block; border: none;
                     border-bottom: 1px solid #ccc; }
  nav.main a:hover { color: #000; background-color: #fff; border: none; border-bottom: 1px solid #888; }

  #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: 39px; padding-top: 7px;  }

  .follow          { width: 100%; }
}
/* ---------- Mobile Portrait - large ---------- */
@media only screen and (min-width: 360px) and (max-width: 609px) {
}
/* ---------- Mobile Portrait - small ---------- */
@media only screen and (max-width: 359px) {
  .sitename    { font-size: 18px; }
  .top-nav label  { margin-left: 15px; }
  .top-nav.lockTS { width: 300px; margin-left: 0; padding-left: 0; }
  .top-nav .mob-icons a { margin-left: 10px; }
  .affil           { width: 300px; }
}