/* General HTML */
* {
  padding: 0;
  margin: 0;
}
html {
  background-color: #efeff9;
}
body {
  font: 100% Arial, Helvetica, sans-serif;
  text-align: center;
}
a:link,
a:visited {
  color: #0000cc;
}

img {
  max-width: 100%;
}

a:hover,
a:active {
  color: #009900;
}
h1 {
  padding: 0.2em 0.5em;
  background: #fff;
  font-size: 0.9em;
  text-align: right;
}
h1 span.odour {
  color: #ff0000;
}
h1 span.wastewater {
  color: #0033cc;
}
h1 span.soil {
  color: #663300;
}
h2 {
  padding: 0.2em 0.5em;
  color: #003366;
  background: transparent url(/img/h2.jpg) no-repeat left top;
  font-size: 1.2em;
  font-weight: normal;
}
h3 {
  padding-bottom: 0.1em;
  margin: 1em 60px 1.5em 0;
  border-bottom: 1px dashed #ccc;
  font-size: 1em;
}
h4 {
  font-size: 0.9em;
}
#nav h5 {
  padding: 0.2em 20px 0.2em 0;
  color: #fff;
  background: #315d00 url(/img/sub_menu_back.jpg) no-repeat right bottom;
  font-size: 0.8em;
}
#content p {
  margin: 0 0 1.5em;
  font-size: 0.8em;
  box-sizing: border-box;
}

p#address,
p#phone {
  margin: 10px 0 0 20px;
  color: #003366;
  font-size: 0.75em;
}
#header p {
  margin: 5px 0 0 180px;
  color: #003d79;
  font-size: 0.7em;
  font-weight: bold;
}
p.seperate {
  word-spacing: 1.5em;
}
#content ul,
#content ol {
  margin: 1em 0 0.5em 2em;
  font-size: 0.8em;
}
#content li {
  margin: 0 0 0.5em 0;
}
#content ul p {
  margin: 0.5em 0 0 0;
  font-size: 1em;
}
#was p {
  margin: 40px 0 0 0;
}
#content ul#distributors {
  margin: 1em 0 0 1em;
  font-size: 0.8em;
}
ul#distributors img {
  float: right;
}
#content ul#distributors li {
  margin-bottom: 0.5em;
}
#content ul#distributors p {
  margin: 0.5em 0 1.5em;
}
#content ul#distributors span {
  font-weight: bold;
}
#results #content ul li,
#media #content ul li {
  margin-bottom: 1em;
}
#case #content ul li,
#testimonials #content ul li {
  margin-bottom: 1em;
  font-size: 0.9em;
  font-weight: bold;
}
#content ul#trade {
  list-style-type: none;
}
#content ul#trade li {
  margin-bottom: 1.5em;
  font-weight: bold;
  clear: left;
}
#content ul#trade li img {
  margin-right: 5px;
  float: left;
}
#subhead ul {
  padding: 10px 0 7px 10px;
  /* background: #dddddd url(/img/subhead-back.gif) no-repeat left top; */
  background: #dddddd url(/img/subhead__01.png) no-repeat left top;
  text-align: right;
  list-style-type: none;
}
#subhead ul li {
  display: inline;
}
#subhead ul li a {
  padding: 3px 30px 5px 30px;
  font-size: 0.8em;
  text-decoration: none;
}
#subhead ul li.aeration a {
  border-right: 1px dashed #999999;
  border-left: 1px dashed #999999;
}
#subhead ul li.biotics a:link,
#subhead ul li.biotics a:visited {
  color: #943939;
}
#subhead ul li.aeration a:link,
#subhead ul li.aeration a:visited {
  color: #0f38d0;
}
#subhead ul li.dispensing a:link,
#subhead ul li.dispensing a:visited {
  color: #008b00;
}
#subhead ul li a:hover,
#subhead ul li a:active,
#subhead ul li a:focus {
  text-decoration: underline;
}
#footer a:link,
#footer a:visited {
  color: #fff;
  text-decoration: none;
}
#footer a:hover,
#footer a:active,
#footer a:focus {
  text-decoration: underline;
}
#nav ul {
  margin-bottom: 2em;
  text-align: right;
  list-style-type: none;
}
#nav ul li ul {
  margin: 0;
}
#nav ul li ul li a {
  display: block;
  padding: 0.4em 20px 0.5em 0;
  border-bottom: 1px dashed #fff;
  font-size: 0.8em;
  text-decoration: none;
}
#nav ul li ul li.last a {
  border: none;
}
#nav ul li ul li a:link,
#nav ul li ul li a:visited {
  color: #003366;
  background-color: #99cc00;
}
#nav ul li ul li a:hover,
#nav ul li ul li a:active,
#nav ul li ul li a:focus,
#about #nav ul li.about a,
#contact #nav ul li.contact a,
#testimonials #nav ul li.testimonials a,
#media #nav ul li.media a,
#distributors #nav ul li.distributors a,
#wastewater #nav ul li.wastewater a,
#odour #nav ul li.odour a,
#case #nav ul li.case a,
#results #nav ul li.results a,
#products #nav ul li.products a,
#order #nav ul li.order a,
#tradeshow #nav ul li.tradeshow a,
#intdistributors #nav ul li.intdistributors,
#septics #nav ul li.septics a,
#projects #nav ul li.projects a,
#treatment #nav ul li.treatment a {
  background-color: #b8f400;
}
ul.error {
  margin: 0 0 1em 2em;
  color: #990000;
  font-size: 0.8em;
}
#content p.error {
  margin: 1em 0 0 0;
  font-weight: bold;
}
fieldset {
  padding: 1em;
  border: 1px solid #cad8e3;
}
legend {
  color: #0066cc;
}
label {
  width: 25%;
  padding-top: 0.2em;
  margin: 0.2em 0.5em 0.2em 0;
  font-size: 0.8em;
  font-weight: bold;
  text-align: right;
  float: left;
}
input,
textarea,
select {
  margin: 0.2em 0;
}
.projects {
  border-top: 1px dashed #ccc;
  clear: left;
}
.projects img {
  margin: 10px 10px 10px 0;
  float: left;
}
.projects h4 {
  padding-top: 15px;
}
/* Layout */
#wrapper {
  width: 1000px;
  margin: 0 auto;
  background-color: #99cc00;
  text-align: left;
}
#header {
  height: 174px;
  background: #c5d5ee url(/img/header3.jpg) left top no-repeat;
}
#content {
  width: 760px;
  padding: 55px 40px 20px 40px;
  background: #fff;
  float: right;
}
#nav {
  width: 160px;
  padding-top: 55px;
  background: transparent url(/img/water.jpg) no-repeat left top;
  float: left;
}
#footer {
  padding: 0.3em 0;
  color: #fff;
  background-color: #0066cc;
  font-size: 0.7em;
  text-align: center;
  clear: both;
}
#spacer {
  height: 25em;
}
#spacersmall {
  height: 10em;
}
/* General Classes */
.clear {
  font-size: 0em;
  line-height: 0em;
  clear: both;
}
.center {
  margin: 0 auto;
  text-align: center;
}
.floatR {
  float: right;
}
.floatL {
  float: left;
}
.red {
  color: #943939;
  font-weight: bold;
}
.blue {
  color: #0f38d0;
  font-weight: bold;
}
.green {
  color: #008b00;
  font-weight: bold;
}

/* Images */
a img {
  border: 0;
}
.aerate {
  padding: 5px;
  margin: 5px;
  border: 1px solid #ccc;
}
#gts,
#was img {
  margin-right: 10px;
  float: left;
}
#adobe,
#iso {
  margin: -5px 10px 0 0;
  float: left;
}

/* Tables */
#products table {
  font-size: 0.8em;
}

#products table th,
#products table td {
  padding: 0.2em;
}
#products table th {
  text-align: center;
}
#products table th.category {
  padding: 0.5em 1em;
  background-color: #ddd;
  text-align: left;
}
#video {
  width: 300px;
  margin: 0 auto;
  background-color: #000;
}

/* custom 10-25-22 */

.table-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 15px 0 30px;
  font-size: 0.8em;
}

.table-list > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-column-gap: 20px;
}

.table-list > div span {
  font-weight: 700;
}

.content-img {
  max-width: 100%;
  margin: 0 0 30px;
  object-fit: cover;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 50px;
}
