@charset "utf-8";
/* 
  First version 2007-11 DJL

 Heavily modified from "andreas02" by Andreas Viklund, http://andreasviklund.com 
 Thanks to Mr. Viklund for his generosity.
 
 This is the main CSS file.
*/


/* Default tag styles */ 

/* This plus hack in #container makes page fill the whole
   browser window. Use only if footer postitioned at bottom 
   html, body { height:100% }
*/

body {
 padding:0;
 margin:0;
 font:76% tahoma, helvetica, arial, sans-serif;  /* 76% gives (nearly) same size in all major browsers; Tahoma is not on iOS devices (2019) */
 background:#e0e0e0;
 color:#303030;
 widows:3;
 orphans:3;
 -webkit-print-color-adjust:exact;
}

@media print {
  body { font:100% helvetica, arial, sans-serif; }
  i, em { 
    font:100% helvetica, arial, sans-serif;  /* because italic tahoma doesn't print on most browsers (IE excepted) */
    font-style:italic;
  }
}

img {
 border:1px solid transparent;
 margin:0;
 padding:0;
}

a {
 color:#005799;
 text-decoration:none;
 border:none;
}

a:hover {
 text-decoration:underline;
}

a img {
    box-sizing: border-box;
    border: 1px solid transparent;
}

a img:hover {
    border-color:#005799;
}

a.noborder img,
a.noborder img:hover {
    border: none;
    padding: 1px;
}

a:visited {
 color:#581C90;
}

a:visited.nolinkcolor {
 color:#303030;
}

h1 {
 margin:0 0 12px 0;
 font-size:1.9em;
 font-weight:normal;
 color:#000000;
 page-break-after:avoid;
}

 /* This allows formmating bullets (or whatever) identically to h2 */

h2 { 
 font-size:1.45em;
 font-weight:normal;
 margin:0.83em 0;
 color:#303030 !important;
 page-break-after:avoid; }

h3 {
 font-size:1em;
 font-weight:bold;
 page-break-after:avoid;
}

h4 {
 font-size:1em;
 font-style:italic;
 page-break-after:avoid;
}

hr {
 page-break-before:avoid;
}

p {
 margin:0 0 15px 0;
 line-height:1.5em;
 text-align:left;
 font-weight:normal;
}

ul {
 list-style-type:square;
 page-break-before:avoid;
 page-break-inside:avoid;
}

li {
 line-height:1.35em; /* accounts for subscripts */
 page-break-before:avoid;
 page-break-inside:avoid;
}

ol li { padding-left:0.4em }

sub {
 line-height:0;
 vertical-align:sub;
 font-size:smaller;
}

sup {
 line-height:0;
 vertical-align:super;
 font-size:smaller;
}

/* Tables (general) */

table {
 margin:0 0 1.5em 0;
 border-collapse:collapse;
 padding:0;
 page-break-before:avoid;
 page-break-inside:avoid;
}

table.center {
 margin-left:auto;
 margin-right:auto;
}

table.centerdata td, table.centerdata th {
 text-align:center; 
 vertical-align:middle;
}

.htable {
 border-top:1px solid #d8d8d8;
}

th {
 text-align:left;
 padding:0.2em 0.8em;
 margin:0;
 font-weight:bold;
 vertical-align:middle;
 color:#ffffff;
 background:#003c69;
}

th a {
 color:#b8ffff;
}

th a:visited {
 color:#b8ffff;
}

td {
 text-align:left;
 padding:0.3em 0.8em;
 margin:0;
 border-bottom:1px solid #d8d8d8;
 background:#f0f0f0; 
}

td.image {
 padding:0;
 border-bottom:none;
 background:none;
}

td ul { 
/* Looks strange, but needed to make IE and Firefox both work */
 padding-left:3.5em;
 margin-left:-2em;
}

td.dark {
/* gives "darker" bottom borders - use to group rows */
 border-bottom:1px solid #909090;
}

td.leftborder {
/* use to group columns */
 border-left:1px solid #d8d8d8;
}

td.rightborder {
/* use to group columns */
 border-right:1px solid #d8d8d8;
}

@media print {
  td, th { 
  border:1px solid #d8d8d8;
  }
}

/* Tab-stop type tables */

table.tabstop {
 margin:0;
 padding:0;
 border-collapse:collapse;
}

td.tabstop {
 background-color:#ffffff;
 border-bottom:none;
 margin:0;
 padding:0 1ex;
}

/* Misc. content markup */

.new {
 color:#ff0000;
 text-align:center;
 font-style:italic;
 font-size:85%;
}

.important {
 color:#ff0000;
 text-align:center;
}

.important_prose {
 color:#ff0000;
}

.important_prose_bold {
 color:#ff0000 !important;
 font-weight:bold;
}

.preliminary {
 color:#ff0000;
 text-align:center;
}

.product_status {
 color:#ff0000;
 text-align:center;
 font-size:smaller;
}

.lowpvalue {
 background-color:yellow;
}

/* Forced-style classes */

.nolinkcolor {
 color:#303030;
}

.hide {
 display:none;
}

.left {
 float:left;
}

.right {
 float:right;
 margin-left:0.5ex;
}

.center {
 text-align:center;
}

.clear {
 clear:both;
}

.indent {
 margin-left:2.3em;
}

.doubleIndent {
 margin-left:4.6em;
}

.bordered {
 padding:8px;
 border:1px solid #909090;
}

/* Floating images */

img.right {
 margin:0.3em 0 0.5em 10px;
}

img.left {
 margin:0.3em 10px 0.5em 0;
}

img.center {
 display:block;
 margin-left:auto;
 margin-right:auto;
 margin-top:0px;
 margin-bottom:25px;
}

/* Misc. classes for particular content */

.h2class { 
 font-size:1.45em;
 font-weight:normal;
 margin:0.83em 0;
 color:#303030 !important;
 page-break-after:avoid; } /* used for bullets */

p.equation {
  text-align:center;
  font-weight:bold;
}

.modelcol1width {
  width:38ex;
}

.modelcol2width {
  width:14ex;
}

.modelLongColWidth {
  width:54.8ex;
}

h2.motto {
 font-style:italic;
}

.block {
 background:#f0f0f0;
 padding:10px;
}

.hcenter {
 margin:auto;
 width:90%;
}

.tombstone {
 width:45%;
 height:63.5em;
 margin:2em -10px 20px -15px;
}

li.gap {
 margin-top:5px;
}

ul.tight {
 margin-left:-1.6em; 
 padding-left:3.8em;
}

.post_tombstone {
 clear:both;
}

.logo {
 border:none;
}

.logo:hover {
 border:none;
}

.tagline {
 float:right; 
 margin-top:17px; /* was 15px till 2017-05 */
}

.searchbox {
 float:right !important;
 margin-top:2px;
}

/* Attempt to lower the z-index of the Google CSE results wrapper */
.gsc-results-wrapper-visible {
  z-index: 0 !important; /* Lower than your drop-down menu */
  position: relative; /* Necessary for z-index to take effect */
}

@media print { 
  .searchbox { 
    display:none;
    float:inherit;
   } 
}
  
.withFootnote {
 margin-bottom:0.5em;
 padding-bottom:0;
}

.footnote {
 color:#808080;
 font-size:0.9em;
 line-height:1.3em;
 margin:0.2em 0 0.4em 0;
 padding:0;
}

.right_footnote {
	font-size:0.67em; 
	font-weight:normal; 
	margin : 0; 
	padding-top:0; 
	margin-left:20px;
}

/* Figures and figure captions */

caption, .caption { /* REMOVE THESE EVENTUALLY, WHEN REPLACED WITH BELOW */
 color:#505050;
 text-align:center; 
 font-weight:bold;
 font-size:1.25em;
 margin:5px;
}

.figure-table-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.image-container {
  display: flex;
  justify-content: space-evenly; /* Changed from center */
  align-items: center;
  padding-top: 1em;
  width: 100%;
}

.image-container::before,
.image-container::after {
  content: '';
  flex-grow: 0.5; /* Reduced from 1 to allow more space between images */
  max-width: 5%; /* Reduced to allow more space between images */
}

.image-container img {
  flex-shrink: 0; /* Prevent images from shrinking */
}

.image-container img + img {
  margin-left: 40px;
}


.figure, .figleft, .figright { /* Note these are designed for 352px wide figures (nom. 352x264; smaller is probably OK), side-by-side */
 color:#505050;
 text-align:center; 
 font-size:1.25em; 
 font-weight:bold;
 margin-top:0;
 margin-bottom:1ex;
 margin-right:0;
 margin-left:0;
 flex:1;
}

.figleft {
 float:left;
 width:352px; 
 margin-left:15px; 
}

.figright {
 float:right; 
 width:352px; 
 margin-right:20px;
}

.figure img, .figleft img, .figright img {
 padding-top:0.5ex;
 padding-bottom:0.5ex;
}

.figright table {
	font-size:0.67em; 
	font-weight:normal; 
	margin-left:20px;
}

.threefigcolumn { /* Note these are designed for 234px wide figures (nom. 234x264; smaller is probably OK), side-by-side */
  color:#505050;
  text-align:center; 
  font-size:1.25em; 
  font-weight:bold;
  margin-top:0;
  margin-bottom:1ex;
  margin-right:0;
  margin-left:0;
 }
 
 .threefigcolumn {
  float:left;
  width:234px; 
  margin-left:15px; 
 }
 
 .threefigcolumn img {
  padding-top:0.5ex;
  padding-bottom:0.5ex;
 }

 /* Clearfix (clear floats) */
 .threefigrow::after {
  content:"";
  clear:both;
  display:table;
 }

.subcaption {
 font-size:smaller;
}

.subheading {
 font-size:smaller;
}

.before_bordered {
 margin-bottom:10px;
}

/* Table columns for modern standard-conformant browsers (Chrome, Firefox, Safari, Opera, IE8+) */

th.catno {
  width:8ex;
}

th.name {
 width:28ex;
}

th.product {
 width:28ex;
}

th.strain {
  width:7ex;
}

th.antigen {
  width:8ex;
}

th.potency {
  width:6ex;
}

th.age {
  width:6ex;
}

th.description {
 width:auto
}

th.size {
 width:11ex;
}

th.size_sm {
 width:7ex;
}

th.msds {
 width:10ex;
}

th.price {
 width:4ex;
}

th.order {
 width:2px;
 text-align:center;
}

/* Product-type tables - see also IE6 and IE7 table syles (in separate files)*/

table.product {
 width:100%;
}

/* Product menu */

.tombstone_product_menu {
 width:355px; /* chosen to give exactly 12px between blocks */
 height:20em; /* adjust as needed for tallest column (was 21 em with "Custom prep") */
 margin-bottom:12px;
 padding-left:14px; /* a little extra on left to visually compensate for right-justification */
}

img.product_menu {
 height:140px;
 margin:-1px 0 0.5em 10px;
}

ul.product_menu {
 margin-left:-25px
}
 
li.product_menu {
 margin-top:2px;
}

/* Feature & benefit bullets */

li.benefit {
 font-weight:bold;
}

p.feature {
 margin:-0.8em auto 1.5em 60px;
 line-height:1.3em;
}

/* Product "for" subheadings */

p.for {
 margin:-0.8em auto 1.5em 2.3em;
 line-height:1.3em;
 font-style:italic;
}

/* Blog stuff */

p.poster {
 color:#808080;
}

p.poster a {
 color:#808080;
}

/* Page menu */

p.pagemenu {
 /*
 font-weight:bold;
 */
}

/* DIVs */

#container {
 margin:auto;
 width:950px;
 padding:20px;
 background:#ffffff;
 position:relative;
 
 /* the following is an IE6 hack for min-height */
/* min-height:100%;
 height:auto !important;
 height:100%;
*/
}

#breadcrumb {
 color:#808080;
 font-size:0.9em;
 line-height:1.3em;
 margin:0.2em 0 0 0;
 padding:0;
}

#breadcrumb a {
 color:#808080;
}

#breadcrumb a:hover {
 color:#303030;
}

#main {
 width:770px;
 float:left;
 padding-bottom:1.5em;
 padding-right:15px;
 border-right:1px solid #d8d8d8;
}

#main_no_sidebar { /* untested as of 2019-02 */
 width:770px;
 float:left;
 padding-bottom:1.5em;
}

@media print {
  #main { 
    width:100%;
  float:none;
  padding:0;
  border:none;
  }
}

/* Top menu tabs & drop-downs*/

#toplogo
{
  height:55px;
  margin-top:-5px;    /* was absent till 2017-05-09 */
  margin-bottom:46px; /* was 45px till 2017-05-09 */
}

#tabs {
  margin:-35px 0 0 0; /* needed for IE6&7; doesn't seem to affect Firefox or Safari */
  text-decoration:none;
  padding-bottom: 4px;
  clear:both;
  height:28px;
  border-bottom:1px solid #d8d8d8; 
}

#dropdown, #dropdown ul 
{
  height:25px;
  width:100%;
  margin:0; 
  padding:0;
  list-style-type:none; 
  list-style-position:outside; 
  position:relative;
  background-color:#f0f0f0;
}

#dropdown a /* inactive top tabs */
{ 
  display:block; 
  padding:4px 8px 5px 8px;
  text-decoration:none;
}

#dropdown a:link, #dropdown a:visited /* inactive top tabs */
{
  color:#303030; 
  background-color: #f0f0f0; 
}

#dropdown a:link.activetab, #dropdown a:visited.activetab /* active top tab */
{
  color:#ffffff;
  background:#505050; 
}

#dropdown a:hover /* hovering */
{ 
  background:#d0d0d0;
  color:#ffffff; 
  border-bottom:0;
}

#dropdown li
{ 
  float:left; 
  position:relative; 
}

#dropdown ul 
{ 
  position:absolute; 
  display:none; 
}
 
#dropdown li ul a:link, #dropdown li ul a:visited
{
  width:23em;
  float:left; 
  background-color:#e0e2e2;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.45);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.45);
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.45);
}

#dropdown li:hover ul, #dropdown li li:hover ul, #dropdown li.ie6hover ul, #dropdown li li.ie6hover ul /* REQUIRED for IE6 */
{ 
  width:23em;
  float:left;
  display:block;
}

/*

input {
 border:none;
 margin:0;
 font-size:1.1em;
 color:#303030;
 background:#e0e0e0;
 padding:0;
}

input[type="text"] {
 border:none;
 margin:0;
 font-size:1.1em;
 color:#303030;
 background:#e0e0e0;
 padding:0; 
 height:19px;
 position:absolute;
 top:2px;
 right:69px;
}

input:hover {
 background:#d0d0d0;
}

*/

/* Sidebar */

@media print {
  #sidebar { display:none }
}

#sidebar {
 width:150px;
 float:right;
 /* below works perfectly (instead of border in main) but line height only matches sidebar text
 padding-left:14px;
 border-left:1px solid #d8d8d8;
 */
}

#sidebar p {
 font-size:0.9em;
 line-height:1.3em;
 margin:0 0 15px 0;
}

/* Footer */

#footer {
 clear:both;
 padding:2px 0 3px 0;
 margin:0;
 border-top:1px solid #d8d8d8;
 color:#808080;
 background:#fafafa;
 height:0.01%; /* "Holly Hack" for IE6 */
}

#footer td {
 border-bottom:none;
 padding:0;
 margin:0;
 background:#fafafa;
 font-size:0.87em;
 line-height:1.3em;
}

#footer table {
 margin:0;
 padding:0;
}

@media print {
  #footer { margin-top:1em }
}