/*!
 * Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2024 Fonticons, Inc.
 */
@font-face {
 font-family: 'Font Awesome 6 Free';
 font-style: normal;
 font-weight: 900;
 font-display: block;
 src: 
  url("/theme/fonts/fa-solid-900.woff2") format("woff2"), 
  url("/theme/fonts/fa-solid-900.ttf") format("truetype");
}

.fas {
 font-family: 'Font Awesome 6 Free';
 -moz-osx-font-smoothing: grayscale;
 -webkit-font-smoothing: antialiased;
 display: var(--fa-display, inline-block);
 font-style: normal;
 font-variant: normal;
 line-height: 1;
 text-rendering: auto;
}

.fa-home::before {
 content: "\f015";
}

.fa-circle-info::before {
 content: "\f05a";
}

.fa-angle-up::before {
 content: "\f106"; 
}

.fa-envelope::before {
 content: "\f0e0";
}

.fa-cloud-download::before {
 content: "\f0ed"; 
}

/* null margins and padding to give good cross-browser baseline */
html,body,div,p,
h1,h2,h3,h4,h5,h6,
ul,ol,li,
dl,dt,dd,
form,fieldset,caption,
table,tr,td,th,
address,blockquote,img,
picture,figure,figcaption {
 margin:0;
 padding:0;
}

img, fieldset {
 border:none;
}

*, *:after, *:before {
 box-sizing:border-box;
 flex:1 0 auto;
}

@media (max-width:480px) {
 /* Fix for pre "viewport <meta>" mobile browsers */
 * {
  -webkit-text-size-adjust:none;
  -ms-text-size-adjust:none;
 }
}

hr {
 /*
  HR in my code are for semantic breaks in topic/section, NOT
  style/presenation, so hide them from screen.css users
 */
 display:none;
}

html, 
body {
 height:100%;
}

body {
 display:flex;
 flex-direction:column;
 padding:0 min(2em, 3vw);
 font:normal 1em/1.5 tahoma,arial,helvetica,sans-serif;
}

body > * {
 flex-grow:0;
 width:100%;
 max-width:52.5em;
 margin:1em auto;
 padding:1em 0;
}

#top {
 flex-grow:1;
}

h1 {
 float:left;
 font:bold 275%/115% arial,helvetica,sans-serif;
}

h1 span {
 color:#FFF;
 background:#000;
 padding:0 0.175em;
 border-radius:0.175em;
}

h1 a,
h1 a:visited {
 text-decoration:none;
 color:#000;
}

h2 {
 font:bold 145%/125% tahoma,arial,helvetica,sans-serif;
}

h3 {
 font:bold 125%/125% tahoma,arial,helvetica,sans-serif;
}

h4 {
 font:bold 105%/125% tahoma,arial,helvetica,sans-serif;
}

h2,
h3,
h4 {
 padding-bottom:0.5em;
}

p {
 padding-bottom:1em;
}

a {
 color:#9B2C21;
}

main a:visited,
aside a:visited {
 color:#73261E; 
}

.index-categories a:visited,
.categories a:visited {
 color:#000;
}

dt {
 font-weight:bold;
}

dl {
 margin-top:0;
}

dd {
 padding-bottom:0.5em;
}

a:focus,
a:hover {
 transition:0.2s;
}

h1 a:hover,
h1 a:focus {
 color:#000;
 background:#FFF;
}

li {
 padding-bottom:0.25em;
}

.fa-language {
 font-size:1.5em;
 line-height:1.1em;
}

.backToTop {
 float:right;
 font:bold 175%/150% arial,helvetica,sans-serif;
 text-decoration:none;
 padding-top:0.5em;
}

.backToTop a:visited {
 color:#2C5781;
}

.backToTop span {
 position:absolute;
 top:-999em;
 left:-999em;  
}

figcaption {
 padding-bottom:1em;
}

picture.plate {
 margin:0 auto;
}

picture.plate img {
 display:block;
 max-width:100%;
 height:auto;
 padding-bottom:1em;
}

picture.leadingPlate,
picture.trailingPlate {
 float:right;
 display:block;
 max-width:35%;
 padding:0 0 1em 1em;
}

picture.leadingPlate {
 float:left;
 padding:0 1em 1em 0;
}

picture.leadingPlate img,
picture.trailingPlate img {
 display:block;
 max-width:100%;
 height:auto;
}

picture p {
 padding-top:1em;
}

.index-categories,
.categories,
.items {
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 max-width:52.5em;
 padding-left:0.5em;
 margin:0 auto 1em;
}

.index-categories article,
.categories article,
.items article {
 display:flex;
 flex-direction:column;
 width:16em;
 max-width:90%;
 padding:1em;
 margin:0 0.5em 0.5em 0;
 background:#FCF9F7;
 text-decoration:none;
 color:#000;
 transition:background 0.2s;
 border-radius:0.5em;
}

.index-categories article {
 width:20em;
}	

.index-categories a,
.categories a {
 text-decoration:none;
 color:#000;
}

.index-categories article:focus,
.index-categories article:hover,
.categories article:focus,
.categories article:hover {
 background:#FAF2EF;
}

.index-categories p,
.categories p,
.items p {
 flex:1 0 auto;
}

.index-categories h2,
.index-categories picture,
.categories h2,
.categories picture,
.items h2,
.items picture {
 flex:0 0 auto;
}

.index-categories img,
.categories img,
.items img {
 display:block;
 width:100%;
 height:auto;
} 

#mainMenu ul {
 list-style:none;
 text-align:right;
 padding-left:0;
}

#mainMenu li {
 display:inline;
}

#mainMenu a {
 font-size:0.9em;
 display:inline-block;
 width:11em;
 text-align:center;
 text-decoration:none;
 margin:0.25em 0 0.5em 0.2em;
 padding:0.5em 0;
 color:#FFF;
 background:#73261E;
 text-transform:uppercase;
 border-radius:15px;
 box-shadow:
 	2px 2px 5px rgb(200,200,200,255);
 text-shadow:
	0 0 3px rgb(0,0,0,255);
}

.inductors a {
 text-transform:none;
 width:12em;
 padding-bottom:1em;
}

.inductors p {
 padding-bottom:0.5em;
}

#mainMenu a:hover,
#mainMenu a:focus {
 background:#591E17;
 transition:background 0.2s;
}

header,
#top,
footer {
 background:#FFF;
 padding:1em;
 margin:0 auto;
}

#top {
 padding-top:0;
}

header {
 padding:1.5em 0 1em 0;
}

footer {
 padding:1em;
 border-top:2px solid #E7EDF3; 
}

footer p {
 padding-bottom:0;
}

dt {
 font-weight:bold;
}

dl {
 padding-bottom:1em;
}

main ul {
 padding:0 0 1em 2em;
}

.inductors a span, 
.email span {
 position:absolute;
 top:-999em;
 left:-999em;
}

.email b {
 font-weight:normal;
}

table {
 margin-bottom:1em;
}

table caption {
 font-weight:bold;
}

table caption,
table th,
table td,
table {
 border:1px solid #000;
}

table caption {
 border-bottom:0;
 background:#000;
 color:#FFF;
}

table th,
table td {
 padding:0.5em;
}

.audio {
 padding-bottom:1em;
}

.email {
 display:block;
}

@media (max-width:37.5em) {
 h1,
 #mainMenu ul {
  float:none;
  text-align:center;
 }
 #mainMenu ul {
  padding:1em 0;
  max-width:90em;
 }
 picture.leadingPlate,
 picture.trailingPlate {
  float:none;
  max-width:100%;
  padding:0 0 1em 0;
 }
 #top {
  padding:0;
 }
 header {
  padding:1em 0 0 0;
 }
 footer {
  padding:1em 0;
}

@media (max-width:22em) {
 .backToTop {
  float:none;
  display:block;
  padding:0 0 1em 0;
 }
}