/* Reset */

h1, h2, h3, h4, h5, h6 {
	margin:auto;
}

h5, h6 {font-size:small;}

pre, p {
	margin-top:auto;
}
ul, ol {
	margin:0 0 0 20px;
	padding:0;
}
ul ul {
	list-style-type:disc;
}
ol li {
	/*margin:0 0 0 20px;*/
}
/*li:not(ul li) {	margin:0 0 0 20px;	padding:0;}*/

/*ul {
	list-style-type:circle;
}*/

p + table, p + ul {
	/*margin-top:-1em;*/
}

/* ----- */






/* ---------------------------------------------------------------------- */





.spectr { 
background: #95b5c5;
color: #000000;
padding: 1px;
font-weight:bold; 
text-align: center;
}

.spectrb { 
background: #d3d7e5;
color: #000000;
font-weight:normal;
padding: 1px; 
text-align: center;
}

.spectrc { 
background: #d3d7e5;
color: #000000;
padding: 1px; 
}

.spectrd { 
background: #95b5c5;
color: #000000;
padding: 1px;
font-weight: normal; 
text-align: center;
}

.spectd { 
background: #95b5c5;
color: #000000;
padding-left: 10px;
padding-right:10px;
font-weight:normal;
text-align: left;
}

.spectdb { 
background: #95b5c5;
color: #000000;
padding-left: 10px;
padding-right:10px;
font-weight:bold;
text-align: left;
}

table tr td.spectr:first-child, table tr.spectr td:first-child {
	text-align:left;
}

/* I used this website to generate slightly different colour variants - http://www.colordic.org/colorsample/89b0c4.html */
/* represents every even row of the light coloured table  
tr.spectrb:nth-child(2n+1) {
	background:#e5e9ff;
}*/
/* represents every even row of the dark coloured table 
tr td.spectd:nth-child(2n+1) {
	background:#89b0c4;
}*/


/* ---------------------------------------------------------------------- */



a[name]:not([href]), a:not([href]) {
	font-weight:bold;
	color:#003388;
	/*uppercase*/
}

#filaments td img {	max-width:150px;	max-height:120px;}
caption { font-weight: bold; margin:0 2px;}
#filaments caption { background-color: #ccc;}
#filaments tr td { text-align:center;}

.MSDS {
	font-size:small;
	font-weight:bold;
}



.inlinehover div.icon {text-align: center; width: 200px; border: 1px solid #ccc; display: inline-block; border-radius: 10px; margin: 0.5em; cursor: pointer;}
.inlinehover div.icon div.link img {width:175px;}
.inlinehover div.icon div.link {color: #038;text-decoration: underline;}
.inlinehover div.icon div.inline {display: none;}
.inlinehover div.icon:hover div.inline {display: block;}
.inlinehover div.icon div.inline {position: absolute; z-index: 10; left: 50px; width: 1000px;}
.inlinehover div div.inline div {background: black; color: white; text-align: left; padding: 1em; border-radius: 10px; box-shadow: 0px 0px 15px grey; color: white;}





hr.dotted {
	height:1px;
	border:0 none #ccc;
	border-bottom: 1px dashed #ccc;
}


pre {
	font-size: 14px;
}

body {
	background: #FFFFFF;
	margin: 0px;
	font-size:14px;
	font-family: Arial, Helvetica, Sans-Serif, Verdana, Geneva;
}






div.sd { 
background: #FFFFFF;
position: relative;
visibility: visible;
left:0px;
top:0px;
z-index:1;
} 

#loading {
font-family: Arial, Helvetica, sans-serif, Verdana, Geneva;;
font-size: 12pt;
position: absolute;
top: 40px;
left: 40px;

}

.thetable A:hover { color: #00cc00; }
.thetable A:visited { color: #0000FF; }
.thetable A:active { color: #000000; }
.thetable A:visited:hover {color: #00cc00; } 
.thetable A:hover:active {color: #00cc00; }
.thetable A { color: #003388; }


.thetable A.cart:hover { background: #FFFFFF; color: #00cc00; }
.thetable A.cart:visited { color: #00cc00; }
.thetable A.cart:active { color: #00cc00; }
.thetable A.cart:visited:hover { background: #FFFFFF; color: #00cc00; } 
.thetable A.cart:hover:active { color: #00cc00; }

.thetable A.cart 
{ 
 color: #c00; 
 background: #fff;
 postion: relative;
}

.addCart
{
 visibility: hidden; 
 background: #FFFFCC;
 color: #000;
 border: 1px solid #000000;
 font-family:Arial, Helvetica, sans-serif, Verdana, Geneva;
 font-size: 12px;
 position: absolute;
 top: 0;
 left: 0;
}



TABLE
{
 border: 0 none black;
 width: 100%;
 padding : 0px;
}

TABLE#maintable
{
 border: none;
 width: 100%;
 padding : 0px;
}

TABLE#chemTable
{
 background: #CCCCDD;
 color: #000000;
 border-width: 0;
 width: 100%;
 padding : 0px;
}

TD.chem
{
  background: #FFFFFF;
  color: #000000;
  border-style: solid;
  border-color: #112255;
  border-width: thin;
  width: 50%;
}

.con
{
 background: #FFFFFF;
 color: #000000;

}

.des
{
 /*width: 65%;*/
 width:90%;
 background: #FFFFFF;
 color: #000000;
 padding-left:20px;
}



div.caption {
font-weight: bold;
font-size: 14px;
}

.content .caption {
	font-size: x-small;
	/*font-weight: normal;*/
}

div.enlarge {
	font-size:x-small;
	font-family:helvetica;
}

img {
	border: none;
}

.content {
	margin-right:10px;
}

.side {
	background-color:#000;
	width:25%;
	text-align:center;
	vertical-align:middle;
	color:white;
}

.pic {
 /*width: 35%;*/
 width: 320px;
 min-width:320px;
 background: #000000;
 color: #FFFFFF;
 vertical-align: middle;
}

.content div.pic {
	text-align:center;
	margin-bottom:1em;
	
	width:100%;
	background:none;
	color:black;
	
	margin:0 auto;
	
}
.content div.pic div {
	display:inline-block;
	width:150px;
}
.content div.pic img {/*.content div.pic div img {*/
	max-width:150px;
	max-height:150px;
}
.content div.pic div div {
}


.blackleft
{
 /*width: 30%;*/
 background: #000000;
 color: #FFFFFF;
 vertical-align: middle;
}

.mid
{
 width: 5%;
 /*width: 50px;*/
 background: #000000;
}

.standard {
background: #000000;
border: none;
}

.standard th { 
background: #CCCCCC;
color: #000000;
padding: 0px; 
margin: 0px; 
}

.standard tr { 
background: #000000;
color: #FFFFFF;
padding: 0px; 
margin: 0px; 
}

.standard  td { 
background: #FFFFFF;
color: #000000;
padding: 2px; 
margin: 0px;
}

.spectable { 
background: #ffffff;
color: #000000;
text-align: center;
}

.specborderb {
	font-weight: normal;
	clear: right;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
}

td.specborderb {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ccc;
}

.specborderb td {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ccc;
}

.specborderb ol li {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ccc;
}

.specborderb ul li {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ccc;
}

/* background-color: #8BC;*/


table#glovechemres tr {
background: #d3d7e5;
color: #000000;
font-weight:normal;
padding: 1px; 
text-align: center;
}
table#glovechemres tr td:first-child, table#glovechemres tr:first-child {
background: #95b5c5;
color: #000000;
padding: 1px;
text-align: left;
}
table#glovechemres tr:first-child td {
	text-align:center;
	font-weight:bold; 
}
table#glovechemres td {
	width:15%;
}
table#glovechemres tr td:first-child {
	width:25%;
}



.image_gallery {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	width:auto;
	max-width:90%;
	min-width:40%;
	background-color:#eee;
	border:1px dashed #fff;
	padding: 10px;
}
.image_gallery img {
	border:1px dashed #eee;
	max-width:75px;
	max-height:75px;
}

.image_gallery img:hover {
	border:1px dashed grey;
	max-width:75px;
	max-height:75px;
}


.spect1 { 
background: #d3d7e5;
padding-top: 10px;
padding-left: 10px;
padding-right:10px;
padding-bottom:10px;
}

.spect2 { 
background: #95b5c5;
padding-top: 10px;
padding-left: 10px;
padding-right:10px;
padding-bottom:10px;
}

.price { 
color: #cc0000;
padding: 0px; 
margin: 0px; 
}



/* Google Translate */
iframe.skiptranslate {
	top:3.3em;
	z-index:50;
}




/* ----------------------------------------------------- */
/* Search CSS */
/* ---------- */
/* Menu colours
#1d4d6a
7              #276c88
8              #286f8a
8              #4ca7c6
7              #4eaac9
#64c0e6
*/

/*Background colours - #89b0c4;#e5e9ff;#d3d7e5;#95b5c5; */


#didyoumean {
	text-align:left;
}
#didyoumean span {
	color:#cc0000;
}
#didyoumean a {
	color: #00C;
	cursor: auto;
	text-decoration: underline;
	font-style:italic;
	font-weight:bold;
}


#sql-search div, #cse-search-box div {
	margin-top:2px;
	margin-right:5px;
	margin-left:-4px;
}

input.searchbutton {
	margin:0;
	padding:0;
	width:auto;
	height:20px;

	color:#fff; 
	font: bold 84% 'trebuchet ms',helvetica,sans-serif; 

	border: 1px solid; 
	border-color: #999 #ccc #ccc #999; /* makes it look intented */

	background-color:#89b0c4; /* For older browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#64c0e6), to(#1d4d6a));	/*For Webkit Browsers*/
	background: -moz-linear-gradient(top, #64c0e6, #1d4d6a);	/*For Firefox 3.6+*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#64c0e6', endColorstr='#1d4d6a');	/*For Internet Explorer*/
	
	/*round corners*/
	-moz-border-radius-topright:4px;
	-webkit-border-top-right-radius:4px;
	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-right-radius:4px;
	
	cursor:pointer;
}

#cse-search-box input.searchbutton {
	width:auto;
	height:18px;
}

input.searchbutton:hover {
	/*border-color: #c33 #c33 #c33 #c33;*/
	/* border-color: #666 #999 #999 #666; /* makes it look intented */
	border-color: #00cc00;
}

input.searchbutton:active {
	color:#fff;
	
	/*border-color: #999 #ccc #ccc #999;  makes it look intented */
	border-color: #7e9db9;
		
	background-color:#d3d7e5; /* For older browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#286f8a), to(#4ca7c6));	/*For Webkit Browsers*/
	background: -moz-linear-gradient(top,  #286f8a,  #4ca7c6);	/*For Firefox 3.6+*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#286f8a', endColorstr='#4ca7c6');	/*For Internet Explorer*/
}

input.searchbox, input#q {
	margin:0;
	padding:0;
	margin-right:-4px;
	width: auto;
	height:18px;
	
	color:gray;
	border: 1px solid; 
	border-color: #999 #ccc #ccc #999; /* makes it look intented */

	/*round corners*/
	-moz-border-radius-topleft:4px;
	-webkit-border-top-left-radius:4px;
	-moz-border-radius-bottomleft:4px;
	-webkit-border-bottom-left-radius:4px;
}

input#q {
	width:auto;
	height:18px;
}

input.searchbox:hover, input#q:hover {
	border-color: #00cc00;
}

input.searchbox:focus, input#q:focus {
	/* border-color: #68a; */
	border-color: #7e9db9;
}

/* ----------------------------------------------------- */








.menu_left, .menu_left li  {
	max-height:28px;
}


.menu_left {
 background-color: transparent;
 }

.menu {
 font-size:14px;
}


.menu A:hover { text-decoration: underline; color: #ddeeff; }
.menu A:visited { color: #00cc00; }
.menu A:active { color: #BBDDFF; }
.menu A:visited:hover { color: #ddeeff; } 
.menu A:hover:active { color: #ddeeff; }
.menu A { color:  #BBDDFF; text-decoration: none; font-size: 14px; }

.menu a.selected {
	color:#eeffff;
	text-decoration: underline;
}




/*MENU*/
/*----*/

#submenu {width:100%;}

#menudiv {
width:100%;
min-width:1000px;
position: fixed;
top:0;
left:0;
z-index:100;
}

#menudiv .menu-left {
	width:100%;
}

#menudiv img {
	margin-top:-1px;
}


/* All <ul> tags in the menu including the first level */
.menulist, .menulist  ul {
 background-color: transparent;
 margin: 0;
 padding: 0;
 list-style: none;

text-align:left;
}



#menudiv li.menulist:hover #linklist {
	visibility:visible;
}
#linklist li:hover ul {
	visibility:visible;
}


#linklist {	margin-top:0px;}
#linklist li a {	padding:3px 3px; cursor:pointer;}


#linklist li ul {
	margin-left:-2px;
	margin-top:-1px;
}

span.bold {
	font-weight:bold;
}


/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */
.menulist ul {
 background-color: transparent;
 visibility: hidden;
 position: absolute;
 /* top: 2.5em; /* I'm using ems rather than px to allow people to zoom their font */
 top : 28px; /* height of the menu pics */
 left: 0px;
 width: 250px;
 font: 14px/16px sans-serif;
}

/* Second and third etc. level submenus - position across from parent instead */
.menulist ul ul {
 top: 0px;
 left: 252px;
 width: 585px; /*width: 550px;*/
font: 12px/14px sans-serif;
}

/*
 All menu items (<li> tags). 'float: left' lines them up horizontally, and they are
 positioned relatively to correctly offset submenus. Also, they have overlapping borders.
*/
.menulist li {
 float: left;
 position: relative;
 background-color: transparent;
 border:none;
margin:0 0 0 -1px;
padding:0;
}

/* Items in submenus - override float/border/margin from above, restoring default vertical style */
.menulist ul li {
 background: #22748F;
 float: none;
 margin-right: 0;
 margin-bottom: -1px;
 border-width: 1px;
 border-style: solid;
 border-color: #8899bb;
}
.menulist ul>li:last-child {
 background: #22748F;
 margin-bottom: 1px;
}

/* Links inside the menu */

.menulist a {
 display: block;
 padding: 1px;
 color: #FFFFFF;
 background-color: transparent;
 text-decoration:  none;
 font-weight: normal;
}

/* Lit  items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */
.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus {
 color: #FFFFFF;
 background-color: #00cc00;
}

.menulist  a.highlighted {
 color: #ffffff;
 background-color: #00cc00;
}

/*
 If you want per-item background images in your menu items, here's how to do it.
 1) Assign a unique ID tag to each link in your menu, like so: <a id="xyz" href="#">
 2) Copy and paste these next lines for each link you want to have an image:
    .menulist a#xyz {
      background-image: url(out.gif);
    }
    .menulist a#xyz:hover, .menulist a.highlighted#xyz, .menulist a:focus {
     background-image: url(over.gif);
    }
*/

/* Only style submenu indicators within submenus. */
.menulist a .subind {
 display:  none;
}
.menulist ul a .subind {
 display:  block;
 float: right;
}

/* 'Escaped Comment' hack for horizontal menubar width in IE5/Mac */
.menulist a {
 float: left;
}
.menulist ul a {
 float: none;
}
/* \*/
.menulist a {
 float: none;
}
/* */


/* This semi-commented section exists to fix bugs in IE/Windows (the 'Holly Hack'). \*/
* html .menulist  ul li {
 float: left;
 height: 1%;
}
* html .menulist  ul a {
 height: 1%;
}
/* End Hack */





/* Cat. no. - Description - Price - pk size - discount - stock? - cart img - dg img - ask */
/* -------------------------------------------------------------------------------------- */
.CartItem, .Price, .Stock, .discountString, .discount, .Ask, .dg_link, .Shopping-Cart {
	margin:0;
	margin-left:0.5em;
	line-height:18px;
}
.Shopping-Cart img, .dg_link img, .Stock img {
	height:18px;
}

.Ask {
	font-weight:bold;
}

.Price, .Price a, .Price a:visited, .Price a:active {
	color:#c00;
	font-weight:bold;
	text-decoration:none;
}

.discountString {
	font-weight:bold;
	font-style:italic;
	font-size:small;
}

.discount {
	font-weight:normal;
	font-style:italic;
	/*text-transform:lowercase;*/
	font-size:small;
}

.CatNo, .CartItem {
	color:#003388;
	font-weight:bold;
	line-height:1.8em;
}

.Stock a {
	/*font-weight:bold;*/
	text-decoration:none;
}
.instock a {	color:#038 !important;}.instock a:hover {	color:#0c0 !important;}
.outofstock a {	color:#c00 !important;}.outofstock a:hover {	color:#0c0 !important;}
/* ------------------------------- */




#fancybox-outer {
	border-radius:10px !important;
	box-shadow: 0 0 15px black !important;
}
#fancybox-frame {
	border-radius:10px !important;
}
.fancy-bg {
	background:none !important;
}

#fancybox-overlay, #fancybox-outer {
	background: #000 !important;
}

 
 
 
 
.fancybox-title-inside {
	background: black !important;
	color:white !important;
	
}
#fancybox-title-over {
	font-weight:bold !important;
}

#fancybox-content {
	border: 10px solid #000 !important;
}
/*#fancybox-close:active {
	background: transparent url(../jquery/fancybox/fancy_close2.png) !important;
}*/

#fancybox-overlay {
	/*margin-top:-3.3em;*/
	margin-top:-5%;
	/*height:105% !important;*/
	height:110% !important;
}


#fancybox-wrap {
	margin-top:-40px !important;
}



/* -------  Alert/Message/Popup -------- */

#popup #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_close.png', sizingMethod='scale');}
#popup #fancybox-close {
background: transparent url(http://proscitech.com/cataloguex/jquery/fancybox/fancybox.png) -40px 0px;
cursor: pointer;
display: inline;
height: 30px;
position: absolute;
right: -15px;
top: -15px;
width: 30px;
z-index: 1103;
}

#popup #message {
	position:fixed;
	width:33%;
	min-height:100px;
	
	left:33%;
	right:33%;
	top:35%;
	
	
	
	z-index:999;
	text-align:center;
	background-color:#fff;
	/*background-color:#333;
	border:1px dashed grey;*/
	padding:20px;
	
	
		
-ms-border-radius: 10px;  
-moz-border-radius: 10px;  
-webkit-border-radius: 10px;  
-khtml-border-radius: 10px; 
border-radius: 10px;

-moz-box-shadow:0px 0px 25px 0px #111;	
-webkit-box-shadow:0px 0px 25px 0px #111;	
box-shadow:0px 0px 25px 0px #111;
}
#popup #message p {
margin-top:1em;
	display:block;
	
	color: #BE2222; font-weight:bold; font-size:small;
}
#popup #message p:last-child {
	font-size:x-small;
	text-align:right;
	color:#333;
}
#popup #messageshadow {
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:998;
	background-color:grey;
	background-color:#111;
	filter:alpha(opacity=40);
	-moz-opacity:0.4;
	-khtml-opacity: 0.4;
	opacity: 0.4;
}



/* --------------------------------------------
------------------ FAQ ------------------------
---------------------------------------------*/
#faqHolder .breadcrumbs {
	margin-bottom:13px;
	font-size:.95em;
	line-height:1.25em;
	padding: 4px 9px;
	background: #f7f6f0;
}
#faqHolder .breadcrumbs li {
	display:inline;
}

#faqHolder ol {
	margin: 0 0 5px 0;
	list-style: none;
}
#faqHolder div[id] ol {
	list-style-type: decimal;
	margin-left: 20px;
}

#faqHolder li {
	padding: 5px 0 5px 0;
	border-bottom: 1px solid #e7e7e7;
	cursor: pointer;
	background: none;
}
#faqHolder ol li a {
	color: #2f6cc7;
	font-weight:bold;
	text-decoration: underline;
}
#faqHolder ol li a:hover {
	color: #00f;
	font-weight:bold;
	text-decoration: underline;
}

#faqHolder ol li p a {
	color: #2f6cc7;
}

/*
#faqHolder ol li div[id]:first-child {
	padding: 0 15px 0 15px;
	background: url(../icon/faqup.gif) right bottom no-repeat;
	
}*/
/*#faqHolder ol li table {*/
#faqHolder div[id] {
	padding: 0 15px 0 15px;
	background: url(../icon/faqup.gif) right bottom no-repeat;
	display: none;
}
#faqHolder ol li a:first-child {
	display:inline-block;
}

#faqHolder table, #faqHolder table * {
/*	border:1px solid #ccc;*/
	border-collapse:collapse;
	padding:2px;
	
}
