body { font-family: Arial,sans-serif; font-size:14px; }

html {overflow-x:hidden} 

/* html,body { font-family:Verdana,sans-serif; font-size:15px; line-height:1; } */

/* Dropdown button */
.menumain .menumainbutton {
  font-size: 14px; 
  font-weight: bold;
  color: #ffffff;
  border: none;
  padding: 2px;
  outline: none;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0;            /* Important for vertical align on mobile phones */
}

.menumain a {
  font-weight: bold;
  color: #ffffff;
  padding: 2px;
  text-decoration: none;
}


/* Dropdown content (hidden by default) */
.menusub {
  display: none;
  position: absolute;
  background-color: #ccffcc;
  z-index: 1;
}

/* Links inside the dropdown */
.menusub a {
  color: black;
  border: 1px solid #000000;
  text-decoration: none;
  display: block;
  text-align: left;
  padding: 2px;
}

/* Add background color to dropdown links on hover */
.menusub a:hover {
  background-color: #ffffcc; /* light yellow */
}

/* Show the dropdown menu on hover */
.menumain:hover .menusub {
  display: block;
}

/* Style the caret/arrow */
.caret {
  user-select: none; /* Prevent text selection */
}

/* Build the caret/arrow with unicode and style it */
.caret::before {
  font-size: smaller;
  content: "\25BC";
  color: #ffffff;
  display: inline-block;
}

.tableclass {
  font-size: 14px; 
  line-height: 1;
  background-color: #330099;
  padding: 1px; 
  border-spacing: 0;
}

.tdclass {
  background-color: #4caf50;
  border: 1px solid #330099;

}

.tdclass:hover {
  background-color: #330099; 
}

.table      { display: table;      }
.table-row  { display: table-row;  }
.table-cell { display: table-cell; padding-left: 5px;}

.flexrow
{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 9px;
  /* align-items: center; */
}

.flexrow > div 
{
/* width: 580px; */
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding-top: 9px;
align-content: space-between;
}

.flexcol
{
  display: flex;
  flex-flow: column wrap;
  /* justify-content: center; */
  align-items: center;
}

.flexcol > div 
{
  width: 532px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.1;
  /* padding-top: 9px; */
}

.flexcol > div > ol
{
  line-height: 1;
}

.logo {
  font: 8px Arial, sans-serif;
  text-align: center;
  text-decoration: none;
  color: black;
  /* background-color: #4caf50; */
  background-color: #ccffcc;
  /* font-weight: bold; */
}

.tophead {
  font: 32px Georgia, serif;
  color: #333300;
  font-weight: bold;
}

.pghd1 {
  font: 16px Arial, sans-serif;
  color: purple;
  font-weight: bold;
  text-align: 'center';
}

.pghd2 {
  font: 16px Arial, sans-serif;
  color: purple;
  font-weight: bold;
}

#pgfooter {
  font: 11px Arial, sans-serif;
}  

#pgfooter hr {
  border: 1px solid #4caf50;
  width: 588px;
}

.caption1 {
  font: 14px Arial, sans-serif;
  text-decoration: none;
}

.salelink1 {
  font: 16px Arial, sans-serif;
  text-decoration: none;
  color: red;
}

.col {
  column-gap: 16px; 
  column-rule: 1px solid #cccccc;
  text-align: left;
}

.col2 {
  column-count: 2;
}

.col3 {
  column-count: 3;
}

.col4 {
  column-count: 4;
}

.colall {
  column-span: all;
}

.slideshow 
{
  position: relative;
  margin: auto;
}

.list1, .list2
{
  line-height:1; 
}

.list1 li { background-color: #ccffcc; padding: 3px; }

.list2 li { background-color: #ffffff; }

.displayno { display: none; }

.displayon { display: block; }

.slidebutton 
{
  padding: 2px;
  color: black;
  background-color: orange;
  opacity: 0.7;
  font-size: 16px;
  border-radius: 10% 10% 0 0;
}

.counter 
{
  font-size: 14px;
  color: black;
  text-align: center;
}