/****************************\
     STYLES for TEMPLATE general
\****************************/
		
		@import url(//fonts.googleapis.com/css?family=Voltaire); /* fancier semi-geometric font for our headings */
		@import url(//fonts.googleapis.com/css?family=Open+Sans); /* print humanist sans-serif font commissioned by google */

		body {
			font-size:14px;
			font-family:Open Sans, Lucida Grande, Helvetica, sans-serif;
			background-color: white;
		}
		
		.content {
			line-height:150%;
			margin: 54px 0;
			/*border: 1px solid red;*/
		}
		.content-pages {
			line-height:150%;
			margin: -10 0 0 0 ;
			/*border: 1px solid red;*/
		}
		p strong {
			font-weight: bold;
		}
		p {
			/*text-align:left;*/
			padding:4px 0px;
			font-size:14px;
			font-family:Open Sans, Lucida Grande, Helvetica, sans-serif;
		}
		section p {
		}
		p.error-message-results {
			color: red;
			margin: 1em;
		}
		a, a:active, a:visited, a:hover {
			text-decoration:none;
		}
		.right {
			float: right;
		}
		.left {
			float: left;
		}
		.center {
			align: center;
			text-align: center;
		}
		.box-main {
			width:100%;
			margin: -80px auto;
		}
		.box-main-pages {
			width:74%;
			/*margin: -80px auto;*/
			float:left;
		}
		.flexBox {
			display: flex;
			justify-content: flex-start;
		} 
		.flexedItem {
			padding: 4px 6px;
		}
		.clearItems {
			clear: both;
		}
		section {
			width: 100%;
			position: relative;
			border-top: 1px solid #bbb;
			margin: 10px 0px;
			padding: 10px 0px;
		}
		section.noline {
			border:none;
			margin-top: 0;
			padding: 0;
		}
		section:after { /* clearfix */
			content: "."; 
			visibility: hidden; 
			display: block; 
			height: 0; 
			clear: both;
		}
		/****************************\
                  headings
		\****************************/
		h1, h2, h3, h4, h5, h6 {
			font-family:Voltaire, Futura, Trebuchet MS, sans-serif;
		}
		h1 { /* page titles */
			font-size:36px;
			text-transform:uppercase;
			color:#0EC5AB;
			font-family:Voltaire, Futura, Trebuchet MS, sans-serif;
			text-align:left;
			line-height:50px;
			border-bottom:1px solid #ccc;
			padding: 0px 0px 10px 0px;
			font-weight:normal;
		}
		h2 { /* section heading */
			font-size:28px;
			color:#0EC5AB;
			font-family:Voltaire, Futura, Trebuchet MS, sans-serif;
			text-transform:uppercase;
			font-weight:normal;
			padding: 5px 0px 10px 0px;
		}
		h3 { /* minor headings */
			font-size:16px;
			font-family:Voltaire, Futura, Trebuchet MS, sans-serif;
		}
		.tagline {
			font-size:16px;
			font-family:Voltaire, Futura, Trebuchet MS, sans-serif;
			font-style: italic;
			text-align: center;
		}
		@media all and (max-width : 640px){
			h1 {
				font-size:25px;
			}
			h2 {
				font-size:20px;
			}
			h3 {
				font-size:12px;
			}
		}
		/****************************\
							   lists
		\****************************/
		ul, ol {
			list-style:none;
			list-style-position: outside;
		}
		ul.list-ul {
			list-style-image: url(/images/icons/arrow-left.png)  ;
			line-height:25px;
			margin-left: 30px;
			padding:4px 0px 4px 10px;
		}
		ul.list-ul ul {
			list-style-image: url(/images/f1.jpg);
			line-height:25px;
			margin-left:20px;
			padding:0px 0px 0px 10px;
		}
		.list-ul > li {
		}

		ul#price-bands {
			display: flex;
			margin: 0 auto;
			min-width: 20em;
			justify-content: space-around;
			/*max-width: 90%;
			flex-wrap: wrap;*/
			align-items: center;
			border: 1px solid #cccccc;
		}
		ul#price-bands > li.price-band, ul#price-bands > li.price-band-label {
			display: block;
			list-style-type: none;
			text-align: center;
			align-items: stretch;
			min-width: 6em;
			margin: 0 0.1em;
		}
		ul#price-bands > li.price-band-label {
			text-align: right;
			margin-right: 0.8em;
		}

		/****************************\
				   images
		\****************************/
		img.blurb-img {
			margin: 0px 25px 0px 5px;
			float: left;
		}
		.illust {
			padding: 15px;
			width: 200px; /* default, can be changed */
		}
		.illust250 {
			padding: 15px;
			width: 250px; /* default, can be changed */
		}
		.illust320 {
			padding: 15px;
			width: 320px; /* default, can be changed */
			float:right;
		}
		.illust400 {
			/*padding: 15px;*/
			width: 400px; /* default, can be changed */
			float:right;
		}
		.illust600 {
			/*padding: 15px;*/
			width: 600px; /* default, can be changed */
			float:right;
		}
		.illust-fullwidth {
			display: block;
			margin: 5px auto;
			height: 300px;
		}
		.illust-fullwidth660 {
			display: block;
			margin: 5px auto;
			width:660px;
		}
		.illust-fullwidth450 {
			display: block;
			margin: 5px auto;
			width:450px;
		}
		.illust-fullwidth500 {
			display: block;
			margin: 5px auto;
			width:500px;
		}
		.illust-left-of-list {
			float: left;
			padding-right: 35px;
		}
		@media all and (max-width : 600px) {
			.illust-fullwidth {
				display: block;
				margin: 5px auto;
				width:50%;
				height:auto;
			}
			.illust {
				padding: 10px;
				width: 40%; /* default, can be changed */
			}
			.illust250 {
				padding: 10px;
				width: 50%; 
			}
			.illust400, .illust600, .illust320 {
				/*padding: 15px;*/
				width: 80%; /* default, can be changed */
				float:none;
			}
			.illust-fullwidth660, .illust-fullwidth450, .illust-fullwidth500  {
				display: block;
				margin: 5px auto;
				width:80%;
			}
		}
		/****************************\
                path links
		\****************************/
		nav.path {
			order:1;
			line-height:10px;
			font-size:12px;
			color:#333;
			text-align:left;
			text-transform:uppercase;
			margin-left:25px;
			width:100%;
		}
		nav.path a {
			color:#333;
			font-size:12px;
			text-decoration:none;
		}
		nav.path a:hover {
			color:#000;
			text-decoration:none;
		}
		nav.path-pages {
			line-height:10px;
			font-size:12px;
			color:#333;
			text-align:left;
			text-transform:uppercase;
			margin-left:25px;
			width:100%;
		}
		nav.path-pages a {
			color:#333;
			font-size:12px;
			text-decoration:none;
		}
		nav.path-pages a:hover {
			color:#000;
			text-decoration:none;
		}
		/****************************\
                left side
		\****************************/
		.box-left {
			height:auto;
			margin:30px 0px 10px 5px;
			background:#fff;
			/*border:1px solid green;*/
			border-right:0px;
			padding:0px;
			/*box-shadow: 2px 2px 5px rgba(0,0,0,0.5);*/
			width:20%;
			float:left;
		}
		/*.box-left-head {
			padding-left:15px;
			line-height:40px;
			background:#CCC;
			color:#333333;
			text-transform:uppercase;
			font-size:17px;
		}
		.box-left-head a {
			color: #333333;
		}
		.box-left-head a:hover {
			color:#000000;
		}*/
		.box-left ul{
			 margin:0px 0px 0px 0px;
			 padding:0px 0px 0px 0px;
		}
		.box-left li a 	{
			padding-left:20px;
			background:url(/images/icons/arrow-left.png) no-repeat left #fff;
			line-height:35px;
			border-top:1px solid #ccc;
			display:block;
			text-decoration:none;
			color:#333;
		}
		.box-left li a:hover{
			background-color: #f9f9f9;
			color:#FCB712;
		}
		.box-left li a.left-icon {
			background-position: 5px center;
			padding-left: 35px;
		}
		.sidebox-details {
			font-size: 0.8em;
			color: grey;
			margin-left: 10px;
			display: inline-block;
		}
		.box-left-pages {
			height:auto;
			width:20%;
			margin:30px 20px 10px 5px;
			background:#fff;
			border-right:0px;
			padding:0px;
			float:left;
		}
		.box-left-pages ul{
			 margin:0px 0px 0px 0px;
			 padding:0px 0px 0px 0px;
		}
		.box-left-pages li a 	{
			padding-left:20px;
			background:url(/images/icons/arrow-left.png) no-repeat left #fff;
			line-height:35px;
			border-top:1px solid #ccc;
			display:block;
			text-decoration:none;
			color:#333;
		}
		.box-lef-pages li a:hover{
			background-color: #f9f9f9;
			color:#FCB712;
		}
		.box-left-pages li a.left-icon {
			background-position: 5px center;
			padding-left: 35px;
		}
		.box-left-head {
			padding-left:15px;
			line-height:40px;
			background:#ccc;
			color:#333333;
			text-transform:uppercase;
			font-size:17px;
		}
		.box-left-head a {
			color: #333333;
		}
		.box-left-head a:hover {
			color:#000000;
		}
		.box-main-pages-full {
			width:100%;
			/*margin: -80px auto;*/
			float:none;
			clear:both;
		}
	@media all and (max-width : 600px) {
		.box-left {
			display:none;
		}
		.box-left-pages  {
			display:none;
			height:auto;
			width:100%;
			float:none;
		}
		.box-left-head {
			display:none;
			width:20%;
			padding-left:5px;
			background:#ccc;
			color:#333;
			text-transform:uppercase;
			font-size:12px;
			float:left;
		}
		.box-left-head a {
			color: #333;
		}
		.box-left-pages ul{
			 /*margin:0px 0px 0px 0px;
			 padding:0px 0px 0px 0px;*/
		}
		.box-left-pages li a 	{
			margin-left:10px;
			border-bottom:1px solid #ccc;
			border-top: none;
			float:left;
			font-size:12px;
		}
		.box-lef-pages li a:hover{
			background-color: #f9f9f9;
			color:#FCB712;
		}
		.box-left-pages li a.left-icon {
			background-position: 5px center;
			padding-left: 35px;
		}
		.box-main-pages {
			width:100%;
			/*margin: -80px auto;*/
			float:none;
			clear:both;
		}
		.box-main-pages p{
			 text-align: justify;
		}
		.cancelJustify {
			text-align: left;
		}
	}		
		\****************************/
		.box-left {
			height:auto;
			margin:30px 0px 10px 5px;
			background:#fff;
			/*border:1px solid #ccc;*/
			border-right:0px;
			padding:0px;
			/*box-shadow: 2px 2px 5px rgba(0,0,0,0.5);*/
			flex:0.25;
		}
		
		
		.box-left ul{
			 margin:0px 0px 0px 0px;
			 padding:0px 0px 0px 0px;
		}
		.box-left li a 	{
			padding-left:20px;
			background:url(/images/icons/arrow-left.png) no-repeat left #fff;
			line-height:35px;
			border-top:1px solid #ccc;
			display:block;
			text-decoration:none;
			color:#333;
		}
		.box-left li a:hover{
			background-color: #f9f9f9;
			color:#FCB712;
		}
		.box-left li a.left-icon {
			background-position: 5px center;
			padding-left: 35px;
		}
		
		.sidebox-details {
			font-size: 0.8em;
			color: grey;
			margin-left: 10px;
			display: inline-block;
		}
		/****************************\
                   forms
		\****************************/
		.required::before {
			content: "* ";
			color: red;
		} 
		.form_message { }
		.form_unconfirmed { 
			color: red;
			text-align: center;
		}
		.form_error { 
			color: red
		}
		.child-template {
			/*display: none;*/
		}
		input.verybasichoneypot {
			display: none;
			visibility: hidden;
		}
		div.g-recaptcha {
			display: inline-block;
		}
		div.g-recaptcha > div > div {
			/*margin: auto;*/
		}
		input.shortnum {
			width: 5em;
		}
		input.tinynum {
			width: 2em;
		}
		input[type="checkbox"] {
			vertical-align: middle;
		}
		input.input-large, select.input-large, span.select2-container {
			height: auto/*2em*/;
			width: 16em;
			margin: 5px 0px;
		}

		#product_id-charcounter {
			color: orange;
		}  
		/****************************\
        body containers
		\****************************/
		
		#container-bg {
			position:relative;
			top:80px;
			display:flex;
			flex-flow: row wrap-reverse;
			height:auto;
			width:auto;
			padding:0px 1.5% 40px;
			padding:0px calc(25% - 250px) 40px;
			border:0px;
			/*background: white;*/
			color:#333;
		}
		#container-bg-pages {
			/* position:relative;
			top:-60px; */
			margin-top: -60px;
			height:auto;
			width:auto;
			padding:0px 1.5% 40px;
			padding:0px calc(25% - 250px) 40px;
			border:0px;
			/*background: white;*/
			color:#333;
		}
		#top-banner-bg{
			height:200px;
		}
		#top-banner-bg-pages {
			position:relative;
			top:-70px;
			z-index:-1;
			height:300px;
			width:auto;
			
			background-size: cover;
			background-position: center;
			overflow:hidden;
			padding-top:0px; /* set to 100px to prevent overlap from navigation bar */
		}
		#container-bg2 {
			position:relative;
			top:80px;
			height:auto;
			width:auto;
			padding:0px 1.5% 40px;
			padding:0px calc(25% - 250px) 40px;
			border:0px;
			/*background: white;*/
			color:#333;
		}
	@media all and (max-width : 1200px) {
		#container-bg-pages {
			width:90%;
			padding: 0 10px;
		}
	}		
	@media all and (max-width : 600px) {
		#top-banner-bg{
			height:150px;
		}
		#container-bg, #container-bg2 {
			top:50px;
		}
		#container-bg-pages {
			padding: 6px 20px;
		}
		
	}
	/****************************\
						footer
	\****************************/
	#footer-box {
		position:relative;
		top:70px;
		height:auto;
		width:100%;
		background:url(/images/footermod-bg.jpg) repeat-x #1b1b1d;
		overflow:auto;
	}
	.footerNavBox {
		float:left;
		margin: 0 0 0 80px;
	}
	.footerNavBox p {
		color:#FCB712;
		font-size:12px;
		text-align:left;
		text-transform:uppercase;
		font-weight:bold;
	}
	.footerNavBox a {
		font-size:12px;
		color:#CCCCCC;
		vertical-align: top;
	}
	.footerNavBox a:hover {
		color:#FCB712;
	}
	#footer-links {
		height:auto;
		max-width:1000px;
		margin:0px auto;
		padding:30px 0px;
	}
	#footer-copyright {
		height:40px;
		clear: both;
		max-width:1000px;
		margin:0px auto;
		text-align:center;
		line-height:40px;
		border-top:1px dotted #CCC;
		color:#CCC;
	}
	@media all and (max-width : 600px) {
		#footer-box {
			width:100%;
		}
	}
/****************************\
                   tags
\****************************/
	ul.tags-display, div.tags-display {
		width: 100%;
		margin: 0px;
		padding: 0px;
		display: inline;
	}
	ul.tags-display li, div.tags-display span {
		display: inline-block;
		margin: 0.1em 0.2em;
		list-style-type: none;
	}
	ul.tags-display li a, div.tags-display span a {
		display: inline-block;
		padding: 0.0em 0.5em;
		border-radius: 0.3em;
		border: 1px solid grey;
		background-color: #dddddd;
		color: inherit;
	}
	ul.tags-display li a:hover, div.tags-display span a:hover {
		color: inherit;
		background-color: #ddd;
	}
	ul.tags-display.tags-product li a, div.tags-display.tags-product span a,
	select.tags-editable.tags-product ~ span.select2-container li.select2-selection__choice {
		background-color: #cff0eb;
	}
	ul.tags-display.tags-product li a:hover, div.tags-display.tags-product span a:hover ,
	select.tags-editable.tags-product ~ span.select2-container li.select2-selection__choice:hover {
		background-color: #9de7dc;
	}
	ul.tags-display.tags-chemical li a, div.tags-display.tags-chemical span a , 
	select.tags-editable.tags-chemical ~ span.select2-container li.select2-selection__choice {
		background-color: #dcdcff;
	}
	ul.tags-display.tags-chemical li a:hover, div.tags-display.tags-chemical span a:hover , 
	select.tags-editable.tags-chemical ~ span.select2-container li.select2-selection__choice:hover {
		background-color: #cbcbee;
	}	
/**************************\
            icons
\**************************/
	[class^="icon-"], [class*=" icon-"] {
		display: inline-block;
		width: 1em;
		height: 1em;
		vertical-align: -0.0625em; /* aligns the icon to text better */
		fill: currentColor;
	}
	/* Example showing how to change the color/size of the icons:
	.icon-name {
		font-size: 32px; // works because "width" & "height" were set using em units
		color: red; // works for single-colored icons, because "fill" was set to "currentColor"
	} */

	a:hover > [class^="icon-"], a:hover > [class*=" icon-"],
	button.textbutton:hover > [class^="icon-"], a:hover > [class*=" icon-"] {
		vertical-align: 0em;
	}

	/* customizing colors, shadows, etc */
	.icon-home {  }
	.icon-office {  }
	.icon-pencil { color: orange; }
	.icon-play { color: purple; }
	.icon-copy { color: blue; }
	.icon-paste {  }
	.icon-folder { color: tan; }
	.icon-download {  }
	.icon-tag { color: purple; }
	.icon-cart { color: darkblue; }
	.icon-coin { color: gold; }
	.icon-phone { color: olive; }
	.icon-mail { color: darkblue; }
	.icon-location { color: red; }
	.icon-clock {  }
	.icon-print { color: darkred; }
	.icon-floppy { color: green; }
	.icon-database { color: purple; }
	.icon-loading { color: blue; }
	.icon-search { color: brown; }
	.icon-lock { color: darkred; }
	.icon-cog { color: silver }
	.icon-beaker { color: teal; }
	.icon-trash {  }
	.icon-truck {  }
	.icon-menu {  }
	.icon-earth { color: darkblue; }
	.icon-paperclip {  }
	.icon-eye { color: #0EC5AB; }
	.icon-noeye { color: grey; }
	.icon-star { color: gold; }
	.icon-star-blank { color: grey; }
	.icon-star-blank:hover { color: gold; }
	.icon-starred { color: gold; }
	.icon-warning { color: orange; }
	.icon-help { color: blue; }
	.icon-plus { color: green; }
	.icon-minus { color: red; }
	.icon-info { color: olive; }
	.icon-close { color: red; }
	.icon-cross { color: red; }
	.icon-check { color: green; }
	.icon-right {  }
	.icon-left {  }
	.icon-popout {  }
	.icon-code { width: 1.25em; color: purple; }
	.icon-share { color: green; }
/* Colourful Buttons */	
	.button1 {
		border-radius:20px;
		border: solid 1px white;
		box-shadow: 2px 2px 3px #444;
		cursor:pointer;	
	}
	.blueButton {
		background-color:blue;	
		color:white;
	}
	.greenButton {
		background-color:green;	
		color:white;
	}
	.orangeButton {
		background-color:orange;	
		color:black;
	}
	.redButton {
		background-color:red;	
		color:white;
	}
	.grayButton {
		background-color:#888;	
		color:white;
	}
/********  Right side POPUP for Analytical Services *********/
	#analyticalServicesAdBox{
		width:200px;
		height:200px;
		position: fixed;
		top: 50%;
		right: 10px;
		margin-top: -100px;
		z-index:9999;
		border-radius:20px;
		border:6px solid black;
		padding:0;
		background: lightyellow url("/analysis/pTable.png") no-repeat right top;
		box-shadow:5px 5px 5px #444;
		text-align:center;
		display:none;
	}
	#analyticalServicesAdBox h3{
		color:blue;
		margin-top:-20px;
		font-size:1.4em;
	}
	#analyticalServicesAdBox p{
		margin-top:-10px;
	}
	#analyticalxButton {
		color:white;
		font-weight:bold;
		font-size:20px;
		background-color:black;
		padding:1px 10px;
		border-radius:50%;
		border: 4px solid white;
		position:relative;
		left:85px;
		top:-8px;
		box-shadow: -3px 3px 3px #444;
		cursor:pointer;
	}
/********  Right side POPUP for Advertising *********/
	#AdBox{
		width:200px;
		height:200px;
		position: fixed;
		top: 25%;
		right: 10px;
		margin-top: -100px;
		z-index:9999;
		border-radius:20px;
		border:6px solid black;
		padding:0;
		background: lightyellow url("/analysis/pTable.png") no-repeat right top;
		box-shadow:5px 5px 5px #444;
		text-align:center;
		display:block;
	}
	#AdBox h3{
		color:blue;
		margin-top:-20px;
		font-size:1.4em;
	}
	#AdBox p{
		margin-top:-10px;
	}
	#AdBoxxButton {
		color:white;
		font-weight:bold;
		font-size:20px;
		background-color:black;
		padding:1px 10px;
		border-radius:50%;
		border: 4px solid white;
		position:relative;
		left:85px;
		top:-8px;
		box-shadow: -3px 3px 3px #444;
		cursor:pointer;
	}