/* seo.css - added during SEO update (Sept 2026).
   Keeps the original ImageCafe look while supporting semantic markup,
   readable long-form content and small screens. */

/* Header title/slogan were changed from <h1>/<h2> to <div> so each page can
   have its own unique H1. These rules replicate the original website.css styles. */
div#website-title {font-family: arial, verdana, sans-serif; font-size: 30px; font-weight: bold; color: rgb(255, 255, 255); font-style: normal; text-decoration: none; line-height: normal;}
div#website-slogan {font-family: arial, verdana, sans-serif; font-size: 18px; font-weight: bold; color: rgb(255, 255, 255); font-style: normal; text-decoration: none; line-height: normal;}

/* Navigation labels were <h3> elements; now <span class="navlabel"> with identical styling */
#nav-top #navcontainer div a span.navlabel {float: left; display: block; cursor: pointer;}
#navcontainer div a span.navlabel {font-family: arial, verdana, sans-serif; font-size: 12px; font-weight: normal; color: rgb(0, 0, 0); font-style: normal; text-decoration: none;}
#navcontainer div a:hover span.navlabel {font-weight: normal; color: rgb(255, 255, 255); font-style: normal; text-decoration: none; background-color: rgb(105, 101, 66);}

/* Long-form content */
.seo-content {font-size: 13px; line-height: 1.6; color: #000;}
#nav-top #inner #content-table-main .seo-content p, .seo-content p {margin: 0 0 12px 0;}
#content .seo-content a:link, #content .seo-content a:visited, #content .seo-content a:active {font-size: inherit;}
#content-table .seo-content h1.seo-h1 {font-family: arial, verdana, sans-serif; font-size: 22px; line-height: 1.3; font-weight: bold; color: rgb(164, 9, 25); margin: 4px 0 12px 0;}
#content-table .seo-content h2 {font-family: arial, verdana, sans-serif; font-size: 17px; line-height: 1.3; font-weight: bold; color: rgb(48, 51, 32); margin: 18px 0 8px 0; padding-bottom: 3px; border-bottom: 1px solid rgb(161, 151, 100);}
#content-table .seo-content h3 {font-family: arial, verdana, sans-serif; font-size: 14px; line-height: 1.3; font-weight: bold; color: rgb(48, 51, 32); margin: 14px 0 6px 0;}
.seo-content ul, .seo-content ol {margin: 0 0 12px 0; padding: 0 0 0 25px;}
.seo-content li {margin: 0 0 5px 0;}
.seo-content .seo-crumbs {font-size: 11px; margin-bottom: 4px;}
#content .seo-content .seo-crumbs a:link, #content .seo-content .seo-crumbs a:visited {font-size: 11px;}
.seo-content .seo-meta {font-size: 11px; color: #555; margin-top: -6px;}
.seo-content .seo-cta {background: rgb(239, 233, 214); border-left: 4px solid rgb(223, 43, 52); padding: 8px 10px; margin-top: 16px;}
.seo-content .seo-sources {font-size: 11px; color: #444;}
#content .seo-content .seo-sources a:link, #content .seo-content .seo-sources a:visited {font-size: 11px;}
.seo-content .seo-address {margin: 0 0 12px 0;}
.pp-legacy {font-family: 'Times New Roman', Times, serif; font-size: 11pt;}
.seo-block {padding: 5px;}
.seo-footer-links {font-size: 11px; margin: 6px 0;}
#content .seo-footer-links a:link, #content .seo-footer-links a:visited {font-size: 11px;}

/* Small screens: the original template is a fixed 1000px layout. These rules only
   apply below 1020px so the desktop design is unchanged. */
@media screen and (max-width: 1020px) {
  #nav-top, .top-circle, .bottom-circle, #headertop, #slogan_wrapper,
  #nav-top #navcontainer, #nav-top #content, #nav-top #footer,
  #pagecols, #column1, .blockbody, #content-table, #inner {width: 100% !important; max-width: 100%; box-sizing: border-box;}
  .blockbody, [id^="body_pgbldblk"] {width: auto !important;}
  #colbody1 {height: auto !important; overflow: hidden;}
  #content-table {table-layout: fixed;}
  #nav-top #inner #content-table {margin-left: 0 !important; float: none;}
  #inner {float: none;}
  #map {width: auto !important;}
  #content input.textForm, #content select.textForm {width: 170px !important;}
  .userMap {border-width: 8px !important; max-width: 100%; height: auto; box-sizing: border-box;}
  #accent-wrapper {display: none;}
  #headertop #website-title {width: auto !important; float: none; font-size: 24px; margin-top: 20px;}
  #slogan_wrapper #website-slogan {font-size: 15px;}
  #nav-top #navcontainer div a:link, #nav-top #navcontainer div a:visited, #nav-top #navcontainer div a:active {padding: 10px 8px 10px 20px;}
  table.home-layout td {display: block; width: auto !important;}
  #content img, .seo-content img {max-width: 100%; height: auto;}
  #content input[type="text"], #content textarea, #content select {max-width: 100%; box-sizing: border-box;}
  .seo-content {font-size: 14px;}
}