:root {
  /* Sitewide colors */
  --pantone-287C: #003087; /* Keep as hex for proper representation of Pantone 287. converting to HSL changes the color slightly. */
  --pantone-287C: oklch(0.35 0.153 261.33); /* OKLCH implementation, which is more accurate than HSL */

  --sampled-blue: oklch(0.29 0.1095 258.24); /* OKLCH makes it very easy to see why there is a difference between this one and the Pantone color.*/
  /* --sampled-blue: hsl(215, 100%, 19%); */

  --caddock-blue: oklch(0.29 0.1095 261.33);
  --caddock-text-blue: oklch(0.45 0.1609 259.42);
  --caddock-text-light-blue: oklch(0.76 0.0898 255.37);
  --caddock-light-blue: oklch(0.76 0.0898 255.37);
  --caddock-tab-light-blue: oklch(0.67 0.0939 249.39);
  --caddock-light-blue-2: oklch(0.58 0.0818 253.97);
  --caddock-brown: oklch(0.35 0.1192 31);
  --caddock-text-red: oklch(0.56 0.19 25.86);
  --caddock-nav-grey: oklch(0.6 0.0058 271.32);
  --caddock-text-white: oklch(1 0 0);
  --caddock-text-grey: oklch(0.64 0.0103 286.1);
  --caddock-bg-white: oklch(0.96 0 0);
  --caddock-yellow: oklch(0.84 0.1459 84.36);
  --caddock-header-yellow: oklch(0.84 0.1459 84.36);

  /*
  --caddock-text-blue: hsl(216, 82%, 37%);
  --caddock-text-light-blue: hsl(214, 69%, 73%);
  --caddock-light-blue: hsl(214, 69%, 73%);
  --caddock-tab-light-blue: hsl(210, 50%, 60%);
  --caddock-light-blue-2: hsl(213, 33%, 51%);
  --caddock-brown: hsl(7, 81%, 23%);
  --caddock-text-red: hsl(0, 60%, 50%);
  --caddock-nav-grey: hsl(225, 2%, 51%);
  --caddock-text-white: hsl(0, 0%, 100%);
  --caddock-text-grey: rgb(138, 138, 145);
  --caddock-bg-white: hsl(0, 0%, 95%);
  --caddock-yellow: rgb(248, 195, 75);
  --caddock-header-yellow: rgb(248, 195, 75);
  */

  @media (prefers-color-scheme: dark) {
    /* Put any color changes that would take place only in dark mode here. */
  }

  /* Shadow stuffs */
  --shadow-color: 0 0 0;
  --shadow-elevation-low: 0.3px 0.5px 0.7px oklch(var(--shadow-color) / 0.16),
    0.5px 0.9px 1.2px -1.2px oklch(var(--shadow-color) / 0.16),
    1.3px 2.5px 3.2px -2.5px oklch(var(--shadow-color) / 0.16);
  --shadow-elevation-medium: 0.3px 0.5px 0.7px oklch(var(--shadow-color) / 0.13),
    0.8px 1.5px 1.9px -0.6px oklch(var(--shadow-color) / 0.13),
    1.6px 3.1px 3.9px -1.2px oklch(var(--shadow-color) / 0.13),
    3.2px 6.4px 8px -1.9px oklch(var(--shadow-color) / 0.13),
    6.3px 12.5px 15.7px -2.5px oklch(var(--shadow-color) / 0.13);
  --shadow-elevation-high: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.12),
    1.7px 3.4px 4.3px -0.3px oklch(var(--shadow-color) / 0.12),
    3.1px 6.1px 7.7px -0.6px oklch(var(--shadow-color) / 0.12),
    4.7px 9.5px 11.9px -0.8px oklch(var(--shadow-color) / 0.12),
    7px 13.9px 17.5px -1.1px oklch(var(--shadow-color) / 0.12),
    10.1px 20.2px 25.4px -1.4px oklch(var(--shadow-color) / 0.12),
    14.4px 28.8px 36.2px -1.7px oklch(var(--shadow-color) / 0.12),
    20.2px 40.4px 50.8px -1.9px oklch(var(--shadow-color) / 0.12),
    27.8px 55.6px 69.9px -2.2px oklch(var(--shadow-color) / 0.12),
    37.5px 75px 94.3px -2.5px oklch(var(--shadow-color) / 0.12);

  /* Sizing Information */
  /* These are magic numbers, and repeated sizes that show up frequently */

  /* This is the magic number that indicates "full-bleed" when considering the site as if it was a publication.
	This encompasses the full width of the "printed" content.
	*/
  --caddock-layout-width: 985px;
}

/* CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  /* 3. Add accessible line-height */
  /* This would be a great change for readability, but more things would need to change first to adapt to the spacing. */
  /* line-height: 1.5; */
  /* 4. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
}

/* 7. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/* Regular Caddock main.css */
* html a:hover {
  visibility: visible;
}

body {
  margin: 0;
  padding: 0px;
  background-color: var(--caddock-bg-white);
  position: absolute;
  font-family: Helvetica, Arial, sans-serif;
  top: 0px;
  box-sizing: content-box;

  /* Added the following lines so that content remains centered, even when there is a scroll bar. */
  width: 100vw;
  /* elements inside won't be affected by scrollbars */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  /* End of content to fix jumping with scrollbar. */
}

body img {
  float: left;
}

body a {
  outline: none;
  /* text-decoration: none; */
}

.container {
  width: var(--caddock-layout-width);
  height: auto;
  /* margin: 0 auto; */
  background-color: white;
  border-left: 1px solid #d0d0d0;
  border-right: 1px solid #dedede;
  z-index: 1;
  /* This line makes it so that the container does not count its own border as part of its width. This lets the border stay outside of the contained elements without needing to calculate offsets for the border in the size of the container. */
  box-sizing: content-box;
  /* display: flex;
  flex-direction: column; */
}

div#whiteBackground {
  width: var(--caddock-layout-width);
  height: auto;
  float: left;
  margin: 0 auto;
  background-color: white;
  border-left: 1px solid #d0d0d0;
  border-right: 1px solid #dedede;
}

.header {
  width: var(--caddock-layout-width);
  height: 66px;
  z-index: 100;
  padding-bottom: 0px;
}

/* Added by Grant Brinkman 2024-10-29 to stop the header image from shifting under HTML5 */
.header img {
  float: unset;
  width: auto;
  height: 32px;
  padding-left: 18px;
  margin-top: 22px;
}

.header .text {
  color: var(--caddock-header-yellow);
  font-size: 17pt;
  font-weight: bold;
  position: relative;
  top: -2px;
}

/* This achieves the effect where the background color of the header overlaps with the menu bar by roughly 25px. */
.header-padding {
  background: var(--caddock-blue);
  height: 26px;
  width: var(--caddock-layout-width);
  margin: 0px;
  padding: 0px;
  border: none;
  position: relative;
  top: 0px;
  left: 0px;
  z-index: -1;
}

/* Custom Class for links on home page. */
.left-text {
  position: relative;
  height: 572px;
  width: var(--caddock-layout-width);
  background-image: url(../images/Resistors.jpg);
  background-repeat: no-repeat;
  margin-top: 10px;
}

.left-text ul {
  margin-top: 5px;
  margin-bottom: 5px;
  /* margin-left: 10px; */
}

.left-text li {
  margin-top: 12px;
  /* margin-bottom: 5px; */
  /* margin-left: 10px; */
}

/* Custom Class for anchor elements on home page */
.left-text-header {
  font-size: 17pt;
  font-weight: bold;
  margin-left: 8px;
  text-decoration: none;
  color: var(--caddock-text-grey);
  display: inline-block;
}

/* Do hover highlighting only for the anchor elements that are also set to be left-text-header. */
/* This prevents the DIV with the same class from also getting the hover effect, since it is not clickable. */
a.left-text-header:hover {
  color: var(--caddock-blue);
}

.left-text-header p {
  display: inline-block;
  margin: 0px;
}

.left-text-header img {
  float: unset;
  vertical-align: middle;
}

div.left-text-sub-header {
  padding-left: 7px;
  width: fit-content;
  position: absolute;
  left: 83px;
}

.left-text-sub-header {
  margin: 0px;
  padding: 0px;
  font-size: 10.5pt;
  font-weight: bold;
}

.left-text-sub-header.brown {
  color: var(--caddock-brown);
}

.left-text-sub-header.grey {
  color: var(--caddock-text-grey);
}

a.left-text-sub-header {
  text-decoration: none;
}

a.left-text-sub-header:hover {
  color: var(--caddock-blue);
}

.left-text-sub-header a {
  text-decoration: none;
  margin: 0px;
  margin-left: 8px;
  padding: 0px;
  font-size: 8pt;
}
/* End Custom CSS for Anchor Elements on home page */

.sub-nav-image {
  background: black;
  height: 34px;
}

/* Classes added by Grant Brinkman to replace script menu */
.menu-container {
  z-index: 50;
  position: relative;
  top: -26px;
  margin-bottom: -15px;
  display: flex;
  justify-content: center;
}

.menu {
  box-shadow: var(--shadow-elevation-medium);
  border-radius: 5px 5px 5px 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.menu ul {
  margin: 0px;
  padding: 0px;
}

.menu-tab {
  background-color: var(--caddock-brown);
  border-left: 1px solid var(--caddock-text-white);
  border-top: 2px solid var(--caddock-text-white);
  border-bottom: 2px solid var(--caddock-text-white);
  border-right: none;
  width: 158px;
  height: 52px;
  display: flex;
  font-weight: bold;
  flex-direction: row;
  flex-wrap: nowrap;
  /* justify-content: space-evenly; */
  align-items: center;
  text-align: center;
}

.menu-tab a,
.menu-tab a:link,
.menu-tab a:visited,
.menu-tab a:active {
  background-color: var(--caddock-brown);
  width: 158px;
  height: 48px;
  font-size: 12pt;
  color: var(--caddock-text-white);
  text-decoration: none;
  /* This allows the anchor item to take up the full space of the tab, and centers the text in that space. */
  display: inline-block;
  align-content: center;
  justify-items: center;
}

.menu-tab a:hover {
  background-color: var(--caddock-light-blue);
}

/* This covers the first tab in the menu bar, and any special margins or sizing that it needs. */
.menu-tab.first {
  border-left: 2px solid var(--caddock-text-white);
  border-radius: 5px 0 0 5px;
  width: 157px;
}

.menu-tab.first a,
.menu-tab.first a:link,
.menu-tab.first a:visited,
.menu-tab.first a:active {
  width: 157px;
}

/* This covers the last tab in the menu bar, and any custom margins or sizing that it needs. */
.menu-tab.last {
  border-right: 2px solid var(--caddock-text-white);
  border-radius: 0px 5px 5px 0px;
  width: 163px;
}

.menu-tab.last a,
.menu-tab.last a:link,
.menu-tab.last a:visited,
.menu-tab.last a:active {
  width: 160px;
}

/* Dropdown button */
.menu-tab.drop-down .drop-btn {
  font-size: 16px;
  border: none;
  outline: none;
  color: var(--caddock-text-white);
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
  margin-left: auto;
  margin-right: auto;
}

/* Make the button always the same color as the enclosing container. */
.drop-btn {
  background-color: inherit;
}

/* Dropdown content (hidden by default) */
.drop-down .drop-down-content {
  display: block;
  /* This makes it invisible until it is hovered over. */
  visibility: hidden;
  position: absolute;
  /* This spacing allows the drop down to not cover the bottom border for the menu bar. */
  top: 52px;
  background: var(--caddock-blue);
  min-width: 204px;
  width: 204px;
  z-index: 1;
  border-left: 1px solid var(--caddock-text-white);
  border-right: 1px solid var(--caddock-text-white);
  border-bottom: 1px solid var(--caddock-text-white);
  margin: 0px;
  margin-left: -1px;
  padding: 0px;
}

/* Links inside the dropdown */
.drop-down .drop-down-content a {
  float: left;
  color: var(--caddock-text-white);
  background: var(--caddock-blue);
  /* padding: 12px 16px; */
  text-decoration: none;
  display: block;
  text-align: left;
  /* Text-indent moves just the text in by a few pixels. */
  text-indent: 5px;
  font-size: 10pt;
  margin: 2px;
  width: 198px;
  height: 25px;
}

/* Add a background color to links and menu button when hovering. */
.drop-down-content a:hover,
.drop-down:hover {
  background-color: var(--caddock-light-blue);
}

.drop-down-content a:hover {
  /* width: 154px; */
  border: solid white 1pt;
  /* height: 32px; */
  box-shadow: var(--shadow-elevation-low);
}

/* Show the dropdown menu on hover */
.drop-down:hover .drop-down-content {
  visibility: visible;
  box-shadow: var(--shadow-elevation-medium);
}

.drop-down svg {
  vertical-align: middle;
  margin-right: 15px;
  margin-left: -40px;
}

.drop-down-arrow-right {
  fill: var(--caddock-text-white);
  stroke: var(--caddock-text-white);
  stroke-width: 1px;
}

/* Styling for the arrow when the drop down is hovered over. */
.drop-down:hover .drop-down-arrow-right,
.drop-down-content a:hover .drop-down-arrow-right {
  fill: var(--caddock-yellow);
  stroke: var(--caddock-yellow);
  transform: rotate(90deg) translate(-2px, -25px);
}
/* End of classes for replacing menu bar. */

/* CSS Classes for styling the Footer */
.footer {
  background-color: var(--caddock-blue);
  width: 100%;
  height: auto;
  text-align: center;
  font-size: 0.75rem;
  color: var(--caddock-text-white);
  padding: 10px 10px 10px 20px;
  clear: both;
}

.footer.footer-links {
  padding-top: 16px;
  padding-bottom: 16px;
}

.footer-padding {
  width: 100%;
  height: 15px;
  background-color: var(--caddock-blue);
  z-index: 1;
  position: relative;
}

.footer a,
.footer a:link {
  font-size: 0.75rem;
  color: var(--caddock-text-white);
  text-align: center;
}

.footer a:visited {
  color: var(--caddock-text-light-blue);
}

.footer a:hover {
  color: var(--caddock-yellow);
}

.footer a:active {
  text-decoration: none;
  color: var(--caddock-text-white);
}

.footer a.active-link {
  text-decoration: none;
  color: var(--caddock-text-white);
  pointer-events: none;
}

/* End of CSS Classes for Styling Footer */

.container a:visited {
  /* color:#8cb4ea; */
  font-size: 0.75rem;
}

.medium-header {
  font-size: 18px;
  font-weight: bold;
  margin-top: 0px;
}

.space-sub-header {
  font-size: 22px;
  font-weight: bold;
}

.const-header {
  font-size: 36px;
}
.large-header {
  font-size: 48px;
  margin: 0px;
  padding: 0px;
  font-weight: normal;
}

.large-red-italic {
  font-size: 48px;
  font-style: italic;
  color: var(--caddock-brown);
}

.bold-text {
  font-weight: bold;
}

/* Class in use only in appnotes.html */
.large-font {
  font-size: 20px;
}

/* =========sub menu===========*/

/* Classes for replacing the buttons in the footer. Also referred to as the sub nav menu. */
.bottom-menu {
  width: 985px;
  justify-items: center;
  justify-content: center;
  display: flex;
  position: relative;
  top: 15px;
  z-index: 2;
}

.bottom-menu ul {
  width: fit-content;
  box-shadow: var(--shadow-elevation-medium);
  list-style: none;
  background-color: var(--caddock-nav-grey);
  margin: 0px;
  padding: 0px;
  border: solid var(--caddock-text-white) 1px;
}

.bottom-menu-tab {
  list-style: none;
  text-align: center;
  justify-items: center;
  vertical-align: middle;
  align-content: center;
  float: left;
  width: 180px;
  height: 34px;
}

.bottom-menu-tab a {
  width: 180px;
  height: 34px;
  color: var(--caddock-text-white);
  /* background-color: var(--caddock-text-white); */
  text-decoration: none;
  display: block;
  align-content: center;
  border-left: solid white 1px;
  border-right: solid white 1px;
}

.bottom-menu-tab.first a {
  border-left: none;
  width: 180px;
}

.bottom-menu-tab.last a {
  border-right: none;
  width: 180px;
}

.bottom-menu a:hover {
  background-color: var(--caddock-light-blue);
}

/* Text links */

.text-links {
  position: absolute;
  background-image: url(../images/bullet_over_03.png);
  background-repeat: no-repeat;
  white-space: nowrap;
  display: block;
  width: 310px;
  height: 17px;
  margin: 0;
  padding: 0;
}

.text-links a {
  display: block;
  /* font-size: 12px; */
  width: 310px;
  height: 17px;
  display: block;
  float: left;
  overflow: hidden; /* for ie to hide extra height*/
  text-decoration: none;
}

.text-links img {
  width: 310px;
  height: 17px;
  border: 0;
}

* html a:hover {
  visibility: visible;
}

.text-links a:hover img {
  visibility: hidden;
}

.text-links span {
  position: absolute;
  left: 21px;
  top: -6px;
  height: 24px;
  text-align: left;
  width: 326px;
  cursor: pointer;
  color: var(--caddock-text-grey);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: bold;
  text-decoration: none;
}

/* CSS for Index of DataSheets page */

.datasheet-index {
  margin-bottom: 45px;
  margin-top: 50px;
}

.datasheet-index p {
  margin-left: 20px;
  margin-top: 0px;
}

.datasheet-index a:link,
.datasheet-index a:visited,
.datasheet-index a:active {
  color: var(--caddock-text-blue);
  font-size: 14px;
}

.datasheet-index a:hover {
  color: var(--caddock-text-red);
}

/* End of CSS For Index of Data Sheets Page */

/* CSS for dist.html/Contact Caddock */
.dist {
  font-size: 11pt;
}

/* unvisited link */
.dist a:link,
.dist a:hover,
.dist a:active {
  /* color: hsl(219, 79%, 36%); */
  color: var(--caddock-text-blue);
}

/* visited link */
.dist a:visited {
  color: var(--caddock-text-light-blue);
}

.twoCol {
  float: left;
  width: 400px;
  padding-left: 23px;
  padding-right: 20px;
}

.divider {
  clear: both;
}

.threeCol {
  float: left;
  width: 285px;
  padding-left: 23px;
}


.divider h2 {
  font-size: 1.5em;
  color: var(--caddock-text-blue);
  border: 2px solid var(--caddock-nav-grey);
  border-left: none;
  border-right: none;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-top: 20px; 
  margin-left: 20px;
  margin-right: 127px;
}

.divider.first-header img {
  float: left;
  display: block;
  padding: none;
  margin: none;
  height: 32px;
}

.divider.first-header {
  float: left;
  display: block;
  /* height: 76px; */
  width: 838px;
  border-bottom: 2px solid var(--caddock-nav-grey);
  margin-left: 20px;
  margin-top: 15px;
  margin-bottom: 20px;
  /* margin-right: 127px; */
}

.divider.first-header .header-text {
  font-size: 17pt;
  color: var(--caddock-text-blue);
  font-style: italic;
  justify-items: center;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 2px;
  display: inline-block;
  font-weight: bold;
}

.distributor-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: space-evenly;
  width: 900px;
  height: fit-content;
}

.distributor-info {
  padding: 20px;
  /* display: block; */
  /* float: left; */
  width: 300px;
}
/* End of CSS for dist.html/Contact Caddock */