body
{
  font-family: Verdana, sans-serif;
  line-height: 1.8em;
  font-size: 0.9em;
  margin: 0px;
  padding: 0px;
  width: 100%;
  background-color: #353535;
  color: #AAAAAA;
}

a
{
  text-decoration: none;
  color: #027cbd;
}

a:hover
{
  text-decoration: underline;
}

a:visited
{
  color: #80bdde;
}

a:link
{
  color: #027cbd;
}

a.anchor
{
  text-decoration: none;
  color: #AAAAAA;
}

h1
{
  font-size: 1.5em;
  font-weight: bold;
  border-bottom: 1px solid #404040;
  padding: 5px 0px;
  margin: 20px 0px;
}

h2
{
  font-size: 1.2em;
  font-weight: bold;
  border-bottom: 1px solid #404040;
  padding: 1px 0px;
  margin: 20px 0px 10px 0px;
}

h3
{
  font-size: 1.0em;
  font-weight: bold;
  border-bottom: 1px solid #404040;
  padding: 1px 0px;
  margin: 20px 0px 10px 0px;
  font-style: italic;
}

p
{
  margin: 10px 0px;
  text-align: justify;
}

p.caption
{
  text-align: center;
  font-weight: bold;
  margin: 10px 0px 20px 0px;
}

p.insertheader
{
  font-weight: bold;
  margin-bottom: 0px;
}

img, canvas
{
  display: block;
  margin: auto;
  border: 1px solid #404040;
  border-radius: 10px;
}

img.inline
{
  display: inline;
  border: none;
  border-radius: 0px;
  margin: 0px;
}

ul.nobullet
{
  list-style-type: none;
}

li
{
  margin: 5px 0px;
}

table
{
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 10px auto;
}

th
{
  padding: 5px;
  background-color: #353535;
  color: #AAAAAA;
  text-align: center;
  font-weight: bold;
}

td
{
  padding: 5px;
  min-width: 100px;
  vertical-align: top;
}

form
{
  text-align: center;
}

form .searchbar
{
  width: 588px;
  margin: 25px auto;
  padding: 5px;
  border: 1px solid #CCCCCC;
  background-color: #2C2C2C;
  box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.3);
}

form .searchbar .input
{
  width: 490px;
  margin: 0px;
  padding: 5px;
  border: none;
  color: #AAAAAA;
  background-color: #2C2C2C;
}

form .searchbar .input:focus
{
  outline: none;
}

form .searchbar .button
{
  display: block;
  float: right;
  width: 80px;
  margin: 0px;
  padding: 5px;
  border: none;
  border-left: 1px solid #404040;
  color: #AAAAAA;
  background-color: #2C2C2C;
  font-weight: bold;
  cursor: pointer;
}

.bold
{
  font-weight: bold;
}

.underline
{
  text-decoration: underline;
}

.border
{
  border: 1px solid #404040;
}

.noborder
{
  border: none;
  border-radius: 0px;
}

.hidden
{
  display: none;
}

#header
{
  padding: 10px 0.5%;
  margin-bottom: 2px;
  background-color: #353535;
  border-bottom: 1px solid #404040;
  min-height: 100px;
  box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.3);
}

#header img.logo
{
  margin-left: 0px;
  border: 0px;
}

#breadcrumb
{
  padding: 10px 0.5%;
  margin-bottom: 10px;
  background-color: #353535;
  border-top: 1px solid #404040;
  border-bottom: 1px solid #404040;
  box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.3);
}

#footer
{
  clear: both;
  padding: 10px 0.5%;
  margin: 0px;
  background-color: #353535;
  border-top: 1px solid #404040;
  border-bottom: 1px solid #404040;
  box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.3);
}

#menu
{
  float: left;
  width: 15%;
  min-width: 150px;
}

#related
{
  float: right;
  width: 10%;
  min-width: 150px;
}

#menu .item
{
  border-right: 1px solid #404040;
}

#related .item
{
  border-left: 1px solid #404040;
}

#menu .item, #related .item
{
  padding: 10px;
  margin-bottom: 10px;
  background-color: #353535;
  border-top: 1px solid #404040;
  border-bottom: 1px solid #404040;
  box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.3);
}

#content
{
  width: 81%;
  margin: 0px 0% 10px 16%;
  padding: 10px 1%;
  background-color: #353535;
  border: 1px solid #404040;
  box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.3);
}

#content img, #content canvas
{
  max-width: 100%;
  margin: 10px auto;
}

#content img.inline
{
  margin: 0px;
}

#content td img, #content td canvas
{
  max-width: none;
}

#index #content
{
  padding: 10px 1%;
  margin-bottom: 2px;
  border-left: none;
  border-right: none;
  border-radius: 0px;
}

#searchbar
{
  float: right;
  padding: 5px;
  margin: 0px;
}

#searchbar .searchbar
{
  width: 400px;
}

#searchbar .searchbar .input
{
  width: 300px;
}

/* This is adapted for 16/9 video */
#content .videocontainer
{
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; 
  margin: 10px auto;
}

#content .videoframe
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #CCCCCC;
  border-radius:10px;
}

/* ---------------------- menu ---------------------- */

#menu ul
{
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

#menu li
{
  margin: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 2.2em;
}

#menu ul.submenu
{
  padding-left: 12px;
  background: url( "Files/Menu_Background.png" ) repeat-y 9px 0px;
}

#menu img.collapsed, #menu img.expanded, #menu img.nochild, #menu img.icon
{
  display: inline;
  float: none;
  border: none;
  border-radius: 0px;
  margin: 0px 5px;
}

#menu img.collapsed, #menu img.expanded, #menu img.nochild
{
  width: 10px;
  height: 10px;
}

#menu img.icon
{
  width: 30px;
  height: 30px;
  margin: 0px 5px -10px 0px;
}

#menu li.collapsed ul.submenu, #menu li.collapsed img.expanded, #menu li.expanded img.collapsed
{
  display: none;
}

#menu .opened, #menu .opened a, #menu .opened a:visited, #menu .opened a:hover
{
  color: #f09709;
  font-weight: bold;
}

#menu .reference
{
  font-style: italic;
}

/* ---------------------- related ---------------------- */

#related ul
{
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  text-align: left;
}

#related li
{
  margin: 5px 0px;
}

#related .item
{
  text-align: center;
  word-wrap: break-word;
}

#related .item img
{
  max-width: 90%;
  margin: 10px auto 10px auto;
}

#related .item img.floaticon
{
  float: right;
  width: 10%;
  min-width: 30px;
  border: none;
  margin: 0px 0px 5px 5px;
}

#related .item img.icon
{
  display: inline;
  float: none;
  width: 30px;
  height: 30px;
  border: none;
  margin: 0px 5px -10px 5px;
}

#related .item p
{
  font-size: 1.0em;
  line-height: 1.2em;
}

#related .item a.title
{
  font-weight: bold;
  color: black;
  text-decoration: none;
}

/* ---------------------- Category Pages ---------------------- */

#content .pageitemgrid
{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  align-items: center;
}

#content .pageitem
{
  position: relative;
  transition: 0.6s ease;
}

#content .pageitem:hover
{
  transform: scale( 1.05 );
  z-index: 100;
  box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.3);
}

#content .pageitem img
{
  width: 100%;
  margin: 0px;
}

#content .pageitem h2
{
  border-bottom: 0px;
  text-transform: uppercase;
  font-size: 2em;
  padding: 0px;
  margin: 0px;
}

#content .pageitem .title
{
  position: absolute;
  bottom: 10px;
  left: 10px;
  text-shadow: -1px -1px 5px #353535, 1px -1px 5px #353535, -1px 1px 5px #353535, 1px 1px 5px #353535;
  font-weight: bold;
}

#content .pageitem .title a
{
  display: block;
}

#content .pageitem .title h2 a
{
  display: inline;
}

#content .pageitem .title a:hover
{
  text-decoration: none;
}

/* ---------------------- Product Pages ---------------------- */

#product #content .productgrid
{
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
}

#product #content a.download
{
  display: block;
  padding: 10px 15px;
  background-color: #027CBD;
  color: #FFFFFF;
  border: 1px solid #404040;
  border-radius: 10px;
  text-align: center;
  width: fit-content;
  font-weight: bold;
  font-size: 1.5em;
  transition: 0.6s ease;
}

#product #content a.download:hover
{
  background-color: #353535;
  color: #027CBD;
  border: 1px solid #027CBD;
  text-decoration: none;
}


/* ---------------------- Slideshow ---------------------- */

.slideshow
{
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.slide
{
  display: none
}

.slide img
{
  vertical-align: middle;
  width: 100%;
}

.prev, .next
{
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #80bdde;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.prev
{
  left: 1px; /* img border size */
}

.next
{
  right: -1px; /* img border size */
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover
{
  background-color: rgba(0.14,0.14,0.14,0.8);
  text-decoration: none;
}

.numbertext
{
  color: #AAAAAA;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  text-shadow: -1px -1px 2px #353535, 1px -1px 2px #353535, -1px 1px 2px #353535, 1px 1px 2px #353535;
}

.dotcontainer
{
  text-align: center;
}

.dot
{
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #80bdde;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover
{
  background-color: #027CBD;
}

/* Fading animation */
.fade
{
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade
{
  from {opacity: .4} 
  to {opacity: 1}
}