<style>
/* General stuff */
body
{
  overflow-y: hidden; /* Hide vertical scrollbar */
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

a:link, a:visited
{
  text-decoration: none;
}

/* Header  */
.header
{
  padding: 10px 0 10px 0;
}
.title
{
  margin: 0;
  font-family: Georgia;
  font-size: 36pt;
  font-weight: bold;
  background-color: rgb(127,0,0);
  color: rgb(255,204,0);
  text-align: center;
  white-space: nowrap;
  padding: 10px;
}
.history
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  margin: 10px 0 0 0;
  text-align: left;
}

/* Section */
.section
{
  padding: 10px 0 10px 0;
}
.subtitle
{
  margin: 0;
  font-family: Georgia;
  font-size: 18pt;
  font-weight: bold;
  background-color: rgb(127,0,0);
  color: rgb(255,204,0);
  text-align: left;
  white-space: nowrap;
  padding: 10px;
}

/* Image grids (Catalogs / Other Lit / Schematics) */
.grid
{
  display: grid;
  justify-content: space-evenly;
  gap: 10px;
  padding: 10px 0;
}
.grid-company
{
  grid-template-columns: repeat(5, 200px);
}
.grid-catalog
{
  grid-template-columns: repeat(5, 200px);
}
.grid-lit
{
  grid-template-columns: repeat(7, 150px);
}
.grid-schematic
{
  grid-template-columns: repeat(5, 200px);
}

/* Labels below the images */
.label-company
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: rgb(0,0,0);
  margin-top: 5px;
  height: 50px;
  text-align: center;
  vertical-align: middle;
}
.label-company a:link
{
  color: rgb(127,0,0);
  background-color: none;
  text-decoration: none;
}
.label-company a:visited
{
  color: rgb(127,0,0);
  background-color: none;
  text-decoration: none;
}
.label-company a:hover
{
  color: rgb(127,0,0);
  background-color: rgb(255,204,0);
  text-decoration: none;
}
.label-company a:active
{
  color: rgb(127,0,0);
  background-color: none;
  text-decoration: none;
}

/* Image+Caption combo */
.item
{
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* bottom-align image+label within the row so labels line up */
  align-items: center;
  text-align: center;
}
.item img
{
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.item-label
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12pt;
  font-weight: bold;
  color: rgb(0,0,0);
  margin-top: 5px;
}
/*
.grid-schematic .item img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.25s ease-in-out;
}
.grid-schematic .item:hover img
{
  transform: scale(2.5);
}
*/
.zoom-schematic .item img
{
  width: 200px;
  height: 150px;
  object-fit: cover;
  transition: 0.25s ease-in-out;
  transform-origin: center center;
  position: relative;
}

.zoom-schematic .item:hover img
{
  transform: scale(2.5);
  clip-path: inset(0);
}

/* User Manuals */
.file-list
{
  display: grid;
  grid-template-columns: repeat(5, minmax(max-content,1fr));
  grid-auto-flow: column;
  column-gap: 20px;
  padding: 10px 0;
}
.file-list-4
{
  display: grid;
  grid-template-columns: repeat(4, minmax(max-content,1fr));
  grid-auto-flow: column;
  column-gap: 20px;
  padding: 10px 0;
}
.file-list-5
{
  display: grid;
  grid-template-columns: repeat(5, minmax(max-content,1fr));
  grid-auto-flow: column;
  column-gap: 20px;
  padding: 10px 0;
}
.file
{
  font-family: Arial, Helvetica, sans-serif;
  break-inside: avoid;
  padding: 1px 0;
}
.file img
{
  width: 16px;
  height: auto;
  vertical-align: middle;
  margin-right: 4px;
}

.file a:link
{
  color: rgb(0,0,0);
}
.file a:visited
{
  color: rgb(127,0,0);
}
.file a:hover
{
  color: rgb(0,0,127);
  background-color: rgb(255,204,0);
}
.file a:active
{
  color: rgb(0,0,255);
}

/* Horizontal bar */
.bar-10
{
  background-color: rgb(127,0,0);
  height: 10px;
  width: 100%;
  margin: 0 auto;
}
</style>
