/* ==== style.css ==== */
/* reset*/
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
	border:0;
}
.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.video embed,
.video object,
.video iframe {
	width: 100%;
	height: auto;
}

.video-responsive {
	width: 100%;
	height: auto;
}

* {
  box-sizing: border-box;
}
body {
	background-image: linear-gradient(#022157, #3f73b9, #03257c);
	background-color: #022157;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #666666;
}
a:link {
    color: #e60000;
    text-decoration: none;
}
a:visited {
    color: #e60000;
}
a:hover {
    color: #06297B;
    text-decoration: underline;
}
header {
    width: 52%;
    margin: 0 auto;
}
.container {
    width: 52%;
    margin: 0 auto;
    background-color: #fff;
    overflow: auto;
}
footer {
    width: 52%;
    margin: 0 auto 2% auto;
    background-color: #DDDEDD;
    border-top: 1px solid #808080;
    text-align: center;
}
.header-icons {
    text-align: right;
}
.header-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
    margin-top: 2%
}
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
 margin-top: 4%;
}
.no-margin-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.tech-note-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
 margin-top: 4%;
}
.header-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}
.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  padding: 1%;
}
.column-bottom {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  padding: 1%;
    align-self: end;
}
.double-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 2;
  padding: 1%;
}
/** keep the image from stretching in flex column**/
.nostretch {
	align-self: center;
}
.header-contact {
    color: #fff;
    text-align: center;
    line-height: 1.5;
}
.header-contact a {
    color: #fff;
    text-decoration: none;
}
.header-contact a:visited {
    color: #fff;
}
.header-contact a:hover {
    color: #e60000;
}
.page-title-block {
    width: 55%;
    background-color: #06297B;
    /*margin-top: 2%;*/
    margin: 2% 0 1% 0;
}
.page-title {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 125%;
    color: #fff;
    padding: 2%;
}
.product-title {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 112%;
    color: #e60000;
    margin: 0 0 2% 2%;
}
ul.product-links {
	padding: 0;
	margin: 0;
	margin-right: 0;
	list-style-type: none;
}
.product-links li {
	margin-bottom: 1%;
	padding: 0 2%;
}
p {
	padding: 2%;
	line-height: 1.5;
}
.button {
  background-color: #E6E6E6; /* light gray */
  border: none;
  color: #fff;
  padding: 1%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0;
  cursor: pointer;
  width: 50%;
}
.gray {
    background-color: #666666;
} 
.blue {
    background-color: #06297B;
} 
.red {
    background-color: #e60000;
}  
.yellow {
    background-color: #E9BB37;
}
.button:hover {
      background-color:#e60000;
      transition: 0.7s;
  }

hr.dotted {
	border-top: 1px dashed #8c8b8b;
	border-bottom: 1px dashed #fff;
}
.footer-nav {
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
}
.footer-nav li {
  display: inline-block;
  padding: 2% 1%;
}
.footer-nav li a {
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #666666;
}
.footer-nav li a:visited {
    text-decoration: none;
    color: #666666;
}
.footer-nav li a:hover {
    text-decoration: underline;
    color: #e60000;
}
.footer-text {
    text-align: center;
    font-size: 80%;
}
#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #CCCCCC;
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    border-radius: 35px;
    display: none;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    top: 13px;
    font-size: 120%;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #e60000;
}
.centerit {
    text-align: center;
}
.gray-title-block {
    width: 100%;
    background-color: #CECFCD;
    margin-top: 2%;
}
.gray-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 112.50%;
    color: #000;
    padding: 2%;
}
.red-text {
    color: #e60000;
}
ul.standard-list {
	padding: 0;
	margin: 0;
	margin-right: 0;
    font-size: 87.50%;
    color: #666666;
}
.standard-list li {
	line-height: 1.5;
	margin: 0 0 1% 6%;
}
.standard-list a:link {
	color: #666666;
	text-decoration: none;
}
.standard-list a:visited {
	color: #666666;
}
.standard-list a:hover {
	color: #e60000;
}
ul.plain-list {
	padding: 0;
	margin: 0;
	margin-right: 0;
    color: #666666;
    list-style-type: none;
}
.plain-list li {
	line-height: 1.5;
	margin: 0 0 1% 6%;
}
.plain-list a:link {
	color: #666666;
	text-decoration: none;
}
.plain-list a:visited {
	color: #666666;
}
.plain-list a:hover {
	color: #e60000;
}
ul.page-link-list {
	padding: 0;
	margin: 2% 0;
	margin-right: 0;
    font-size: 112.50%;
    color: #e60000;
}
.page-link-list li {
	line-height: 1.5;
	margin: 2% 0 1% 6%;
}
.page-link-list a:link {
	color: #e60000;
	text-decoration: none;
}
.page-link-list a:visited {
	color: #e60000;
}
.page-link-list a:hover {
	color: #666666;
    text-decoration: underline;
}
ul.map-link-list {
	padding: 0;
	margin: 2% 0;
	margin-right: 0;
    font-size: 112.50%;
    color: #e60000;
}
.map-link-list li {
    font-weight: 600;
	line-height: 1.5;
	margin: 2% 0 1% 6%;
    list-style-type: none;
}
.map-link-list ul li {
	line-height: 1.5;
	margin: 2% 0 1% 6%;
    list-style-type: disc;
    font-size: 100%;
    font-weight: normal;
    text-decoration: underline;
}
.map-link-list a:link {
	color: #e60000;
	text-decoration: none;
}
.map-link-list a:visited {
	color: #e60000;
}
.map-link-list a:hover {
	color: #666666;
    text-decoration: underline;
}
.photo-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
    margin-top: 4%;
}
.photo-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  padding: 1%;
}
.sub-title {
    font-size: 112.50%;
    color: #000;
    margin-bottom: 1%;
}
.link-title {
     padding: 2% 2% 1% 2%;
}
.small-description {
    font-size: 95%;
    padding: 0 2%;
}
.pdf-downbutton {
  background-color: #e60000; 
  border: none;
  color: #fff;
    font-weight: 900;
  padding: 4%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0;
  cursor: pointer;
}
.sub-page-title {
    font-size: 112.50%;
    color: #666666;
    margin: 1%;
    padding: 1%;
}
.tech-note-title {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 112.50%;
    color: #666666;
    margin: 1%;
    padding: 1%;
}
.tech-note-title-2 {
    font-family: 'Courier Prime', monospace;
    font-size: 112.50%;
    color: #000;
    margin: 1%;
    padding: 1%;
    text-decoration: underline;
    text-align: center;
    text-underline-position: under;
}
figure {
  padding: 2%;
  margin: auto;
  text-align: center;
}

figcaption {
  font-size: 87.50%;
  color: #666666;
  font-style: italic;
  text-align: center;
}
.faq {
    color: #000;
    font-size: 112.50%;
    font-weight: 600;
}
ol.tech-num-list {
	padding: 0;
	margin: 0;
	margin-right: 0;
    font-size: 87.50%;
    color: #666666;
    list-style-type: decimal;
}
.tech-num-list li {
	line-height: 1.5;
	margin: 0 1% 1% 6%;
}
ul.tech-letter-list {
	padding: 0;
	margin: 0;
	margin-right: 0;
    font-size: 87.50%;
    color: #666666;
    list-style-type: lower-alpha;
}
.tech-letter-list li {
	line-height: 1.5;
	margin: 0 1% 1% 6%;
}
.italic {
    font-style: italic;
}
.italic-bold {
    font-style: italic;
    font-weight: 600;
}
.left-side {
  float: left;
  padding: 1%;
}
.right-side {
  float: right;
  padding: 1%;
}
.inline-photo {
    display: inline-block;
}
.under-italic {
    font-style: italic;
    text-decoration: underline;
}
.wire-list {
	font-size: 95%;
	margin-left: 8%;
	padding: 0 0 1% 2%;
}
.download-title {
    font-size: 112.50%;
    margin: 1% 0 0 2%;
}
.download-title a:link {
    color: #e60000;
    text-decoration: underline;
    text-decoration-skip-ink: none;
}
.download-title a:visited {
    color: #e60000;
}
.download-title a:hover {
    color: #06297B;
    text-decoration: underline;
}
.indent-it {
    text-indent: 10%;
}
.table-margin {
    margin: 0 0 1% 2%;
}
.tech-note-subtitle {
    font-family: 'Courier Prime', monospace;
    font-size: 100%;
    color: #000;
    font-style: italic;
    font-weight: 700;
    text-decoration: underline;
    text-underline-position: under;
    padding: 2%;
}
.courier {
    font-family: 'Courier Prime', monospace;
    color: #000;
}
.courier-justify {
    font-family: 'Courier Prime', monospace;
    color: #000;
    text-align: justify;
}

/* A photo row sitting directly under a page title already has the title
   block's bottom margin above it; the row's own 4% top margin doubles the
   gap. Percentage margins resolve against container width, so on a wide
   screen that became a large band of dead space. */
.page-title-block + .photo-row {
    margin-top: 1%;
}

/* ==== navigation.css ==== */
.sticky {
  position: fixed;
  top: 0;
  width: 80%;
  z-index: 10;
}
.sticky + .content {
  padding-top: 60px;
}
#nav {
  /*position: relative;*/
	/*overflow: hidden;*/
}
#nav ul {
  display: none;
  width: 100%;
  list-style: none;
  margin: 0px;
  padding: 0px;
  background: #e60000;
}
#nav ul li a {
  display: block;
  padding: 4% 0.4%;
  color: #fff;
  text-decoration: none;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 87.50%;
  font-weight: bold;
}
#nav ul li a:hover {
	background: #06297B;
	color: #fff;
}
#nav ul li:last-of-type a {
  border-right: 0px;
}
#nav ul li ul li a {
  padding-left: 8%;
}
#nav ul li ul li ul li a {
  padding-left: 8%;
}
#nav input.trigger {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
#nav input.trigger:checked ~ ul, #nav input.trigger:checked ~ ul li ul {
  display: block !important;
}
@media screen and (max-width:1024px) {
	#nav ul li a {
	padding: 8% 0;
  }
    
}
@media screen and (max-width:980px) {
	#nav ul li ul {
    top: 35px!important;
   }
    #nav ul li a {
	font-size: 80%;
  }
}
@media screen and (max-width:900px) {
	#nav ul li ul {
    top: 30px!important;
   }
    #nav ul li a {
	font-weight: normal;
  }
}
@media (min-width: 812px) {
  #nav input.trigger:checked ~ ul, #nav input.trigger:checked ~ ul li ul {
    display: flex;
    flex-direction: row;
  }
}
#nav label {
  position: relative;
  display: block;
  min-height: 2em;
  padding: 0.45em;
  font-size: 1.1em;
  margin: 0;
  cursor: pointer;
  line-height: 2em;
  color: #fff;
  background-color: #e60000;
}
#nav label:after {
  position: absolute;
  right: 1em;
  top: 0.2em;
  content: "≡";
  font-size: 1.8em;
  color: white;
  }

@media (min-width: 812px) {
  #nav ul {
    display: flex;
    flex-direction: row;
  }
  #nav ul li {
    position: relative;
    text-align: center;
    flex: 1;
  }
  #nav ul li ul {
    display: none !important;
    position: absolute;
    /*top: 3.0625em;*/
    left: 0;
    display: block;
    width: 100%;
    z-index: 200;
  }
  #nav ul li ul li {
    text-align: left;
	background: #e60000;
	box-shadow: 0 -1px 0 rgba(255,255,255,.3);
	border-radius: 3px;
	transition: all .2s ease-in-out;
      padding: 2%;
  }
  #nav ul li ul li ul {
    z-index: 300;
    top: 0px!important;
   left: 100%;
  }
    /*
  #nav ul li ul li ul li a {
    padding-left: 30px !important;
  }
    */
  #nav ul li:hover > ul {
    display: block !important;
  }
  #nav label {
    display: none;
  }
}
@media screen and (max-width:810px) {
    #nav ul li a {
	font-size: 100%;
        font-weight: bold;
  }
    #nav ul li a {
	padding: 4% 2%;
  }
}
@media screen and (max-width:767px) {
	#nav ul li a {
    font-size: 100%;
	padding: 2% 1%;
  }
}

/* ==== media-queries.css ==== */
@media screen and (max-width:1600px) {
    header {
	width: 62%;
  }
    .container {
	width: 62%;
  }
    footer {
	width: 62%;
  }
}
@media screen and (max-width:1440px) {
    header {
	width: 80%;
  }
    .container {
	width: 80%;
  }
    footer {
	width: 80%;
  }
}
@media screen and (max-width:1024px) {
    header {
	width: 98%;
  }
    .container {
	width: 98%;
  }
    footer {
	width: 98%;
  }
}
@media screen and (max-width:810px) {
    .product-links li {
	padding: 1% 2%;
  }
    .button {
	padding: 2%;
    width: 60%;
  }
    .page-title-block {
	width: 75%;
  }
}
@media screen and (max-width:768px) {
    .header-row {
	display: block;
  }
    .header-column {
	text-align: center;
  }
    .row {
        display: block;
    }
    .no-margin-row {
	display: block;
  }
    .gray-title-block {
	margin-bottom: 2%;
  }
    .tech-note-row {
	display: block;
  }
}
@media screen and (max-width:720px) {
    .button {
	padding: 4%;
	width: 80%;
	font-weight: bold;
  }
    .product-links li {
	margin-bottom: 4%;
  }
    .photo-row {
	display: block;
  }
    .table-margin {
	margin: 1% auto;
  }
    .plain-list li {
	margin: 0 0 4% 6%;
  }
    .map-link-list li {
	margin: 2% 0 4% 6%;
  }
    .map-link-list ul li {
	margin-bottom: 4%;
  }
}
@media screen and (max-width:640px) {
    .sub-page-title {
	font-size: 105%;
  }
}
@media screen and (max-width:480px) {
    .header-icons {
	text-align: center;
	font-size: 140%;
	padding: 2%;
  }
    .row {
	display: block;
  }
    .page-title-block {
	width: 95%;
  }
    .small-table {
        font-size: 87.5%;
    }
}
@media screen and (max-width:428px) {
    .page-title {
	font-size: 112.50%;
  }
    .small-table {
        font-size: 80%;
        width: 90%;
    }
    .standard-list li {
	margin: 0 0 4% 6%;
  }
    .tech-num-list li {
	margin: 0 1% 1% 8%;
  }
}
@media screen and (max-width:414px) {
    .page-title-block {
	width: 90%;
  }
}
@media screen and (max-width:390px) {
    .page-title {
	font-size: 105%;
  }
    .product-title {
	font-size: 105%;
  }
}

/* ---- Phase 2 additions (Oct 2026): icons, scroll button, focus, link underline ---- */
picture { display: contents; }
.icon { display: inline-block; vertical-align: -0.15em; }
.header-icons a { color: #fff; }
.header-icons svg { width: 1.15em; height: 1.15em; }
.pdf-downbutton svg { width: 1em; height: 1em; vertical-align: -0.125em; margin-right: 0.3em; }
#nav .caret { font-size: 80%; }
#return-to-top svg { width: 24px; height: 24px; color: #fff; position: relative; top: 13px; transition: all 0.3s ease; }
#return-to-top:hover svg { color: #e60000; }
#return-to-top.show { display: block; }
.container :is(p, li, td) a:not(.product-links a, .page-link-list a, .map-link-list a, .plain-list a) { text-decoration: underline; }
.page-title .red-text { color: #ff6b6b; }
.footer-text { color: #595959; }
.button.yellow { color: #000; }
.tech-note-meta { font-size: 85%; color: #666666; margin: 0 1%; padding: 0 1% 1% 1%; }
a:focus-visible, button:focus-visible, label:focus-visible { outline: 3px solid #06297B; outline-offset: 2px; }
#nav a:focus-visible, .header-contact a:focus-visible, .header-icons a:focus-visible { outline-color: #fff; }
.gray-title .red-text { color: #b30000; }
.footer-nav li a, .footer-nav li a:visited { color: #595959; }