/*--------------------------------------------------------------------------Universal-----------------------------------------------------------------------------*/
/*{ outline: 1px solid red;}*/
* { font-family: Arial; }
.p0 { padding: 0; }
.fl { float: left; }
.fr { float: right; }
.bdn { border: none; }
.bdln { border-left: none; }
.bdrn { border-right: none; }
.bdb1 { border-bottom: solid 1px #000; }
.s06 { font-size: 0.6em; }
.s07 { font-size: 0.7em; }
.s08 { font-size: 0.8em; }
.s09 { font-size: 0.9em; }
.s10 { font-size: 1.0em; }
.s12 { font-size: 1.2em; }
.s15 { font-size: 1.5em; }
.s16 { font-size: 1.6em; }
.s20 { font-size: 2.0em; }
.s30 { font-size: 3.0em; }
.txl { text-align: left; }
.txr { text-align: right; }
.txm { text-align: center; }
.txl2 { text-align: left; padding-left: 0.5em; }
.txr2 { text-align: right; padding-right: 0.5em; }
.ov-x { overflow-y: auto; }
.w001 { width: 1%; }
.w002 { width: 2%; }
.w003 { width: 3%; }
.w004 { width: 4%; }
.w005 { width: 5%; }
.w006 { width: 6%; }
.w007 { width: 7%; }
.w008 { width: 8%; }
.w009 { width: 9%; }
.w010 { width: 10%; }
.w013 { width: 13%; }
.w015 { width: 15%; }
.w020 { width: 20%; }
.w025 { width: 25%; }
.w030 { width: 30%; }
.w035 { width: 35%; }
.w040 { width: 40%; }
.w045 { width: 45%; }
.w050 { width: 50%; }
.w060 { width: 60%; }
.w070 { width: 70%; }
.w080 { width: 80%; }
.w090 { width: 90%; }
.w098 { width: 98%; }
.w100 { width: 100%; }
.w10e { width: 1.0em; }
.w12e { width: 1.2em; }
.w14e { width: 1.4em; }
.w15e { width: 1.5em; }
.w16e { width: 1.6em; }
.w18e { width: 1.8em; }
.w20e { width: 2.0em; }
.w22e { width: 2.2em; }
.w24e { width: 2.4em; }
.w26e { width: 2.6em; }
.w28e { width: 2.8em; }
.w30e { width: 3.0em; }
.w40e { width: 4.0em; }
.w50e { width: 5.0em; }
.w60e { width: 6.0em; }
.w70e { width: 7.0em; }
.w100e { width: 10.0em; }
.w150e { width: 15.0em; }
.w180e { width: 18.0em; }
.w200e { width: 20.0em; }
.h020 { height: 20%; }
.h030 { height: 30%; }
.h040 { height: 40%; }
.h050 { height: 50%; }
.h060 { height: 60%; }
.h070 { height: 70%; }
.h080 { height: 80%; }
.h100 { height: 100%; }
.h01e { height: 0.1em; }
.h02e { height: 0.2em; }
.h05e { height: 0.5em; }
.h10e { height: 1.0em; }
.h12e { height: 1.2em; }
.h13e { height: 1.3em; }
.h14e { height: 1.4em; }
.h15e { height: 1.5em; }
.h16e { height: 1.6em; }
.h18e { height: 1.8em; }
.h20e { height: 2.0em; }
.h22e { height: 2.2em; }
.h24e { height: 2.4em; }
.h26e { height: 2.6em; }
.h28e { height: 2.8em; }
.h30e { height: 3.0em; }
.h40e { height: 4.0em; }
.h50e { height: 5.0em; }
.h120e { height: 12.0em; }
.h200e { height: 20.0em; }
.bccc { background-color: #CCC; }
.bfff { background-color: #FFF; }
.b999 { background-color: #999; }
.b666 { background-color: #666; }
.b0f0 { background-color: #0F0; }
.bf00 { background-color: #F00; }
.b0ff { background-color: #0FF; }
.b333 { background-color: #333; }
.cccc { color: #CCC; }
.c666 { color: #666; }
.c999 { color: #999; }
.cfff { color: #FFF; }
.cf00 { color: #F00; }
.c00f { color: #00f; } /* Blue */
.c0f0 { color: #0F0; } /* Green*/
.dpl0 { display: none; }
.dpl1 { display: inline; }
.bold { font-weight: bold; }
.pos0 { position: absolute; }
.top0 { top: 0%; }
.csr1 { cursor: pointer; }
.bdr0 { border: solid 1px #000; border-radius: 1px; }
.bdr1 { border: solid 1px #000; border-radius: 3px; }
.bdr5 { border: solid 2px #999; border-radius: 50%; }
.ovfy { overflow-y: auto; }
.hl:hover{ background-color: #CCC;}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------*/

html {
	/*background: #6FF;*/}
body {
	margin: auto;
	height: 100%;}
	/*background: #09C;*/
/*--------------------------------------------------------------------------Header--------------------------------------------------------------------------------*/
header {
	/*background: #FF0;*/
	width: 100%;
	height: 3em;}
#home {
	display: inline-block;
	line-height: 1em;
	vertical-align: middle;
	text-decoration: none;
	font-size: 3em;		
	color: #00F;
	letter-spacing: -0.1em;}	
/*-----------------------------Search Bar--------------------------------*/
#sbr {
	display: table-cell;
	vertical-align: middle;
	width: 28em;
	height: 3em;
	/*background: #0F0;*/}
#sbr2 {
	display: table-cell;
	vertical-align: middle;
	width: 28em;
	height: 3em;
	/*background: #0F0;*/}
/*#seg {
	width: 90%;
	height: 1.6em;
	font-size: 1.2em;
	text-align: center;}*/
#seg2 {
	width: 99%;
	height: 1.6em;
	font-size: 1.2em;
	text-align: center;}
#dsr {
	position: absolute;
	width: 28em;
	max-height: 50%;
	overflow-x: auto;
	overflow-y: auto;
	z-index: 1000;
	background-color:#FFF;}
#dsr2 {
	position: absolute;
	width: 28em;
	max-height: 50%;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 1000;
	background-color:#FFF;}
.scr, .nor {
	padding: 0.3em 0 0.3em 0;
	position: relative;
	/*background: #999;*/
	background-color: rgba(102,102,102,0.95);
	color: #FFF;
	width: 28em;
	text-indent: 0.8em;
	text-align: left;
	font-size: 1em;
	z-index: 1000;}	
.scr {	cursor: pointer;}
.nor {	cursor: default;}
.scr:hover {
	background-color: #CCC;
	color: #000;}
/*-------------------------------Cart------------------------------------*/
#cart_sign {
	vertical-align: middle;
	background: #FFF;
	float: right;}
#cart_sign:hover {cursor: pointer;}
#cart_bttn{
	display: table-cell;
	color: #00F;
	margin: 0; 
	padding: 0;
	height: 1.2em;
	width: 1.2em;
	font-size: 1.6em;
	font-weight: bolder;
	text-align: center;
	outline: 1px solid #000;}
#hover_cart {
	padding: 0.5em 0.5em 0.5em 0.5em;
	left: 1%;
	width: 96%;
	outline: 1px solid #000;
	background-color: #666;
	z-index: 2000;
	position: absolute;
	visibility: hidden;
	/*  background-clip: content-box; /* <---- *
  box-shadow: inset 0 0 0 0.5em #666; /* <-- 10px spread radius */}
#hover_cart:hover {cursor: default;}
/*--------------------------------------------------------Cart------------------------------------------------------------*/


/*-------------------------------------------------------------------------Container------------------------------------------------------------------------------*/
#container {
	/*background: #060;*/
	width: 100%;}	
#navi {
	/*background: #999;*/
	width: 100%;
	height: 2.2em;}
/*--------------------------Horizontal Menu------------------------------*/
ul {
	width: 100%;
	margin: 0;
	padding : 0;
	list-style: none;}
ul li {
	padding : 0.3em 0 0.3em 0;
	float: left;
	width: 12.5%;
	font-size: 1.06em;
	text-align: center;
	outline: 1px solid #999;
	color: #FFF;
	background: #333;}
ul li:hover{
	/*outline: 1px solid #999;*/
	background: #CCC;
	color: #000;}
/*---------------------------Dropdown Menu-------------------------------*/
ul li ul {
	width: 12.25%; /* 1/8 x 0.98 x screen.width) */
	margin: 0.3em 0 0 0;
	/*padding: 0 1em 1em 0;*/
	list-style: none;
	visibility: hidden;
	position: absolute;
	z-index: 3;}
ul li ul li {
	background-color: rgba(102,102,102,0.95);
	padding : 0.3em 0 0.3em 0;
	text-align: left;
	text-indent: 0.6em;
	position: relative;
	outline: none;
	font-size: 1em;
	width: 100%;
	transition: 0.3s;
	z-index: 3; }
ul li:hover > ul {
	visibility: visible;
	transition-delay: 0s;} 
ul li ul li:hover{

	background: #CCC;
	color: #000;}
/*-----------------------Horizontal Extent Menu--------------------------*/
.r1, .r2 { /*--ul--*/
	margin: 0;
	padding: 0 1em 1em 0;
	left: 100%;
	list-style: none;
	width: 100%;}
.r1 { top: 0;}
.r2 { bottom: -1em;}
.l1, .l2 {
	margin: 0;
	padding: 0 0 1em 1em;
	right: 100%;
	list-style: none;
	width: 100%;}
.l1 { top: 0;}
.l2 { bottom: -1em;}	
.ms {
	background-color: rgba(102,102,102,0.95);
	padding : 0.3em 0 0.3em 0;
	text-align: left;
	text-indent: 0.6em;
	position: relative;
	font-size: 1em;
	width: 100%;
	transition: 0.3s;
	cursor: default; }/* delay of 0.3 seconds on hover off */
/*--------------------------Clickable Menu-------------------------------*/
.bu {  
	margin: 0;
	padding : 0.3em 0 0.3em 0;
	background: #666;
	color: #FFF;
	width: 100%;
	cursor: pointer;
	text-align: left;
	text-indent: 0.6em;
	font-size: 1em;}

#ajax {
	margin: auto;
	/*background: rgba(102,102,102,0.6);*/
	width: 100%;
	height: 32em;}


/*--------------------------------------Browse Left Column-----------------------------------------------------------------*/
/*#l_col {
	float: left;
	width: 20%;
	margin-top: 0em;
	margin-left: 0%;}*/
/*#image {
	width: 12em;
	height: 18em;
	float:none;}*/


/*#image_chemical {
	width: 12em;
	height: 2.82em;
	float:none;}*/
h3 {
	margin: 0;
	padding: 0;}

/*--------------------------------------Browse Middle Column-----------------------------------------------------------------*/
/*#r_col {
	margin: 2em 0 0 0;
	float: right; 
	width: 77%;
	border-top: 1px solid #000;
	margin-right: 0%;}
#r_col2 {
	margin: 2em 0 0 0;
	float: right; 
	width: 73%;
	margin-right: 2%;} */
/*#m_col{
	float: right;
	width: 100%;
	border-bottom: 1px solid #000;

	margin-bottom: 0.5em;
	overflow-y: auto;} */
/*	float: right;
	width: 100%;
	border-bottom: 1px solid #000;

	margin-bottom: 0.5em;
	overflow-y: auto;}*/
/* #browse_tbl{
	margin: 0 0 0 0;
	width: 100%;

	background: #CCC;
	position: -webkit-sticky;
  	position: sticky;
  	top: 0;
 	z-index: 1;} */
/* #browse_tbl2{
	margin: 0 0 0 0;
	width: 100%;

	background: #CCC;
	position: -webkit-sticky;
  	position: sticky;
  	top: 0;
 	z-index: 1;} */




/*#scr_tbl {
	width: 100%;
	z-index: -1;}*/
	
	
table, th, td {
	border-collapse: collapse;
	border: 1px solid #000; }	

/*-------------------------------Table For  Register Form Content---------------------------------*/
#dif {				/*<div*/
	float: left;
	width: 60%;
	margin: 0;
	padding: 0;
	background: #FFF;}
.fom {					/*<table>*/
	table-layout: fixed;
	background-color: #CCC;
	width: 100%;
	height: 1.6em;}
.xbo {					/*<tr>*/
	width: 100%;
	height: 1.6em;
	border: hidden;}
.ftd {					/*<td>*/
	width: 6em;
	font-weight: bold;
	border: hidden;
	padding-left: 1em;}
.ser, .spn {			/*<Span>*/
	margin-left: 0.5em;
	vertical-align: middle;}	
.ser { font-size: 0.8em}
.spn { font-size: 1.3em; color:#0F0; }
.inp {					/*<input>*/
	float: left;
	height: 1.5em;
	width: 18em;
	font-size: 1em;}
.inp_address {			/*<input>*/
	float: left;
	height: 1.5em;
	width: 24em;
	font-size: 1em;}
.inp_state {			/*<input>*/
	float: left;
	height: 1.5em;
	width: 10em;
	font-size: 1em;}
.inp_postcode {			/*<input>*/
	float: left;
	height: 1.5em;
	width: 6em;
	font-size: 1em;
	text-align: center;}
.inp2 {					/*<input>*/
	float: left;
	height: 1.5em;
	width: 6em;
	font-size: 1em;}
.bur, .bul { 			/*<button>*/
	width: 5em;
	height: 1.5em;
	font-size: 1em;
	background-color: #999;
	vertical-align: middle;}
.bur { float: right; margin-right: 0.9em;}
.bul { float: left;}