@charset "utf-8";
/* ---   This is the main style-sheet for the LebanonTurf Website.   --- */

/* ---   Style-sheet load order for screen devices:

      1. reset.css  - Reset styles.
      2. main.css   - This files.
      3. hf.css     - The HEADER and FOOTER area styles.             --- */

/* ---   STYLE ORDER   --- */
/* ---   CSS styles should be specified in order of increasing specificity:
  
      1. Elements
 	       a. Element style resets
           b. Basic HTML5 block element definitions (if js DOM manipulation is used) 
	       c. Site styles for elements
      2. Classes 
      3. IDs
      4. @media rules
                                                                     --- */

/* ---   COLORS   --- *//* 

      #007247    LebanonTurf Green (logo, block elements, borders)
      #ACC268    Hi-Light Green (active form elements, highlights)
      #006740    Text Green (headers). This green is a bit darker than the LebanonTurf green.
      #222222    Text Black. This is not totally black to reduce sharp contrast against white backgrounds.
      #003A12    Text (Input elements)
      #999999    Text (Disabled Input elements)
      #E9E9E9    Disabled backgrounds
                 Text Link-Blue?
      #EC0014    Text Warning-Red.
      #426D8E    Module Blue
      #909090    Shadow Grey
                                                                     --- */
                                                                     
                                                                     

/* ---   FONTS   --- */
/* ---   The following font-stacks are used on LebanonTurf:
         1.  Arial, Helvetica, sans-serif
         2. 
*/
   @import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,bi);    /* --> Use as 'Droid Serif' */
/* @import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);*/      /* --> Use as 'Droid Sans' */



/* ---   HTML5 BLOCK ELEMENT DEFINITIONS   --- */  

header, footer, aside, nav, article {display:block;}


/* ---   HTML4/5 BASIC ELEMENT STYLES   --- */

html {
	overflow:scroll;background:#FFF url(/images/hd-grn.png) repeat-x center -10px;
	/* Used for testing grid layout 
	background:url(/images/18grid.gif) repeat center 14px, url(/images/hd-grn.png) repeat center -10px; */
	/* Used for testing grid layout 
	background:url(/images/layout-grid.gif) repeat center 0, url(/images/hd-grn.png) repeat-x center -10px; */
}

body {
	margin:0 auto;
	padding:0;
	max-width:996px;/* was 1028px */
	-moz-box-sizing:content-box;
	-webkit-box-sizing:content-box;
	box-sizing:content-box;
	font-family:Helvetica, Arial, sans-serif;
	font-size:87.5%; /* 14px */
	/*background-color:#FFF;*/
}


/* ---   General header style   --- */
header, .header {width:100%;display:block;}

img {display:inline-block;}

p{line-height:1.28571em;margin:0 0 1.28571em 0;}

sup, sub {
	height: 0;
	line-height: 1em;
	vertical-align:baseline;
	_vertical-align:bottom;
	position:relative;
	font-size:0.78571em; /* 11px/14px */
	font-size:0.71429em; /* 10px/14px */
}
sup { bottom: 1ex;bottom:0.5em;}
sub { top: 0.5ex;}

h1 sup {font-size:0.57895em;bottom:1.16667ex;margin-left:0em;/*line-height:1em;vertical-align:text-top;*/}
h2 sup {font-size:0.7em;bottom:0.8ex;margin-left:0em;/*line-height:1em;vertical-align:text-top;*/}

/* ---   Basic Link Styles   --- */
a:link {color:#0000CC;}
a:visited {color:#7300A3;}
a:focus {background-color:#EFE9AB;color:#0000CC;text-decoration:none;}
a:active {background-color:#FFFFFF;color:#EC0014;text-decoration:none;}

/* ---   Miscellaneous Class Selectors   ---*/
.left {float:left;}
.right {float:right;}
img.right {margin-left:1.5em;margin-bottom:1em;}
img.left {margin-right:1.5em;margin-bottom:1em;}


/* ---   MAIN STRUCTURAL ELEMENTS   --- */
/* ---   Notes:
            Overall page layout (see http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-22-fluid-fixed/)   
            The 'content' is defined as an ID - skip nav link needs this to jump to content area.
*/

#wrap {
	max-width:996px;/* was 1028px */
    position:relative;
}
#content-wrap{float:left;width:100%;}

/* ---   'content' area with space to the right for a module column   --- */
#content{margin:40px 260px 45px 16px;/* --> right-margin same as .right.module-column width. left-margin was 20px */}

/* ---   'content' area spanning width of entire page   --- */
#content.full{margin-right:16px;}

/* ---   'content' area for home page   --- */
#content.home{margin:40px 16px 10px 16px;}


.right.module-column{
	float:left;
	margin:0 0 0 -260px; /* --> Set left margin to (negative) width of this same element */
	padding:50px 0 35px 0;
	width:260px;
	text-align:center;
}

/* ---   Breadcrumbs follow the content in source code order, so need to be repositioned to top of page   --- */
#crumbs {
	display:block;
	font:0.8571429em Arial, Helvetica, sans-serif;
	height:1em;width:95%;
	position:absolute;top:10px;left:10px;z-index:10;
	white-space:nowrap;/*overflow:visible hidden;*/
}
#crumbs a{text-decoration:none; color:inherit;}
#crumbs a:visited{text-decoration:none;}
#crumbs a:hover{text-decoration:underline;}
#crumbs a:focus{text-decoration:underline;color:#FFF;}
#crumbs a:focus span{background-color:#265882;color:#FFF;}

#crumbs ul {
	display:inline;
	margin:10px;padding:0;
}
#crumbs ul ul {margin:2px;padding:0;}
#crumbs li {
	display:inline;
	margin:5px 0 2px 0px;padding:0;
}
#crumbs li * li {
	display:inline;
	margin:5px 0 2px 0px;padding:0 0 0 14px;
	background:url(/images/crmb-dot-separator.png) no-repeat 0 2px;
}


/* ---   MODULE COLUMN CONTENT STYLES   --- */

/* ---   Basic module definition   --- */
.module {
	border:#e4e0d3 2px solid;margin:12px auto;
	background-color:#FFF;
	/* border radii */
	  -webkit-border-radius:.25em;
	  -webkit-border-top-right-radius:.375em;
	  -webkit-border-top-left-radius:.375em;
	  -moz-border-radius:.375em .375em .25em .25em;
	border-radius:.25em;
}

.boxshadow .module {
	filter:none;
	/* shadow */
	  -moz-box-shadow: 3px 3px 4px #d7d1bd;
	  -webkit-box-shadow: 3px 3px 4px #d7d1bd;
	box-shadow: 2px 2px 4px #ddd;
}

.no-boxshadow .module,
.no-js .module {
	filter: progid:DXImageTransform.Microsoft.dropShadow(color=#d7d1bd, offX=3, offY=3, positive=true);	/* --> IE */
	-ms-filter:"progid:DXImageTransform.Microsoft.dropShadow(color=#d7d1bd, offX=3, offY=3, positive=true)";/* --> IE8 */
}


/* ---   Variations that can be applied modules   --- */
/* 
	1. Interactive modules   - require some form of user entry, such as the email signup module.
	2. Navigation modules    - typically provides text content, such as a list of related links.
	3. Ad modules            - so much a module, but can be placed in context with other modules, but with a lot of the basic attributes stripped.
	4. Home modules          - the brands and technologies modules with colored header bars.
    5. Multiproduct modules  - used in the main content area, just like the basic module, but with a larger border-radius (see product detail pages).
    6. Popout modules        - used on the retail websites page, margins changed and with hover effects.
*/


/* ---   1.  Interactive modules   --- */
.interactive.module {border-color:#426D8E;}
.interactive.module h1 {
	color:#FFFFFF;background-color:#426D8E;
	background:-moz-linear-gradient(90deg,#426D8E,#3676a6);
	margin:0 0 10px 0;padding:3px 10px 4px 10px;
	font-size:1.33333em;
	border-bottom:#CCCCCC 1px solid;
}
.interactive.module h1 div.loading {
	display:inline-block;
	float:right;
	height:20px;width:36px;
	background:url(/images/ajax-loader-fb.gif) no-repeat center center;
}

/* ---   2.  Navigation modules   --- */
.navigation.module {border-color:#007247;}
.navigation.module h1{
	color:#006740;
	font:400 1.5em/1em 'Droid Serif', Georgia, "Times New Roman", Times, serif;
	text-align:center;
	margin:0 0 12px 0;padding:16px 10px 3px 14px;
}
.navigation.module p{margin-top:1em;}

/* ---   3.  Ad modules   --- */
.boxshadow .ad.module {
	border:none;
	filter: none;
	-ms-filter: none;
	text-align:center;
	/* shadows */
	 -moz-box-shadow:none;
	 -webkit-box-shadow:none;
	box-shadow:none;
}
.no-boxshadow .ad.module,
.no-js .ad.module {filter:none;-ms-filter:none;border:none;}

/* ---   4.  Home Page Modules (Brands and Technologies/ Ads)   --- */
.home .module {
	margin:-7px 11px 16px 11px;
	padding:5px 0 0 0;
	width:198px;/* was 196px */
	float:left;
	line-height:1.5em;
	/* box sizing: The width and height properties are measured including only the content, but not the border, margin, or padding. */
	  -moz-box-sizing:content-box;
	  -webkit-box-sizing:content-box;
	box-sizing:content-box;
}
.home .ad {
	margin:20px 22px 0px 22px;
	padding-top:5px;
	float:left;
}

/* ---   5.  Multiproduct Modules   --- */
.multiproduct.module{
	  -moz-border-radius:1em;
	  -webkit-border-radius:1em;
	border-radius:1em;
}

/* ---   6.  Popout modules (used on the retail websites page)   --- */
.pop.module, 
module.pop {
	margin:10px 10px 10px 14px;/* was 10px */
}

.pop.module table {
	line-height:1em;
	margin:10px 15px;
}

.pop.module:hover, 
module.pop:hover {
	-moz-box-shadow: 2px 2px 4px #ACC268;
	box-shadow: 2px 2px 4px #ACC268;
	border-color:#007247;
}


/* ---   Adjustments to modules contained in main #content area   --- */
#content .interactive.module h1 {
	margin:0 0 10px 0;padding:5px 10px 8px 10px;
	font-size:1.28571em;
}
#content .multiproduct.module p,
#content .multiproduct.module h1{margin:1em;}
#content .module .legal{font-size:0.78571em;}

/* ---   Adjustments to content within Home (Brands and Technologies) Modules   --- */
#content.home .module p{margin-top:1em;}

/* ---   Adjustments to modules contained in the .module-column   --- */
.module-column .module {
	width:225px;
	font-size:0.8571429em;
	margin:12px auto 18px auto;
	text-align:left;
	  -moz-border-radius:.2em;
	  -webkit-border-radius:.2em;
	border-radius:.2em;
}
.module-column .module .legal{font-size:0.91667em;}
.module-column .module div{margin:10px;}


/* Product filters within modules */
.prod-filters { /* --> used to group a number of filters */ 
	font-size:0.85714em;
	margin:0 2px 3px 2px;
}
.prod-filter { 
	display:inline-block;
	margin:0 3px 6px 4px;
	zoom:1;
	*display:inline;/* --> the * is for IE7 */
}
.prod-filter-label, .prod-filter label { /* the text that describes the filter */
	display:inline-block;
	margin-bottom:6px;margin-left:4px;
}
.prod-filters select {
	font:11px Arial, Helvetica, sans-serif;
}
.prod-filter-button{float:right;margin:5px 9px 1em 6px;}


/* Adjustments to content within multi-product modules */
.stylish-select .multiproduct.module label {float:left;margin:0 .5em 1em 0;}


/* ---   MAIN CONTENT STYLES   --- */
input[type='text'] {
	font-size:13px;
	border:1px solid #999999;
	  -moz-border-radius:0.9em 0.9em 0.9em 0.9em;
	  -o-border-radius:0.9em;
	  -webkit-border-radius:0.9em;
	border-radius:0.9em;
	height:18px;
	padding:2px 0 2px 6px;
}
input[type='text']:hover,
input[type='text']:focus {
	border:1px solid #ACC268;
	color:#003A12;
}
/* ---   Selected / highlighted text (Safari and Firefox only)   --- */
::selection {background: #EFE9AB;}
::-moz-selection {background: #EFE9AB;}
a::selection {background: #FFFFFF;}
a::-moz-selection {background: #FFFFFF;}

input.disabled {
	color:#999999;
	background-color:#E9E9E9;
}
div input{vertical-align:middle;}

blockquote.hilite {
	border-left:#ACC268 5px solid;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	margin:0 0 1.28571em 2em;padding-left:1em;
	line-height:1.28571em;
}

.header h1, h1 {
	color:#006740;
	font:400 38px Georgia, "Times New Roman", Times, serif;
	margin-top:0px;padding:0px 10px 0 0;
}

.fontface .header h1, .fontface h1 {
	font:400 38px/0.94737em 'Droid Serif';
	text-shadow:1px 1px 1px #95A170; /*999;*/
	margin-bottom:0.47368em;
}


h2 {
	color:#006740;
	font:700 1.42857em/1.35em 'Droid Serif',Georgia, "Times New Roman", Times, serif;
	margin-top:0.9em;margin-bottom:0.45em;
}
h3 {
	color:#222222;
	font:700 1.21429em/1.5em 'Droid Serif',Georgia, "Times New Roman", Times, serif;
	margin-top: 1em; margin-bottom: 0.5em; 
}

/* navigtable styles - used for tables with lists of links, e.g. product listings */
table.navigtable{width:100%;margin:1em 0 0 -10px;}
.navigtable tr:hover{color:#FFFFFF;background-color:#426D8E;}
.navigtable tr:hover a{color:#FFFFFF;background-color:#426D8E;}
.navigtable tr,
.navigtable tr a{
	-webkit-transition:all 0.1s linear;
	transition:all 0.1 linear;
}

/* cancel hover effect for header row */
.navigtable thead tr:hover{color:#000000;background-color:#FFFFFF;}
.navigtable th{padding:0 0 0 10px;line-height:1.5em;text-align:left;}
.navigtable thead th{
	color:#006740;
	font:400 1.28571em Georgia, "Times New Roman", Times, serif;
}
.navigtable td{padding:1px 0 1px 10px;line-height:1.5em;}

/* ---   AJAX loading indicators   --- */
table .loading {
	min-height:120px;
	background: url(/images/ajax-loader-bar.gif) no-repeat center center; /* --> centered animated progress indicator */
}
div.loader {
	text-align:center;
	position:absolute;height:60px;width:300px;margin-left:150px;
	background: url(/images/ajax-loader-bar.gif) no-repeat center center; /* --> centered animated progress indicator */
}
h1.loading {
	background: url(/images/ajax-loader-bar.gif) no-repeat center center; /* --> centered animated progress indicator */
}


.spanlink.header h1 span {
	color:#000000;
	font:12px Arial, Helvetica, "sans-serif";
	margin-left:1em;
	text-shadow:none;
}

.section ul, section ul {
	margin:18px;
	list-style:outside;
	list-style-type:square;	
}
.section li {
	font-size:1em;
	line-height:1.28571em;
	margin:0 1.07692em;	
}

/* ---   "Browse Category Page" classes   --- */
.category-table{width:100%;display:table;}
.category-table span{
    display:block;
	float:left;
	width:240px !important;/* was 245px */
	vertical-align:baseline;
}

/* Cannot combine these next two because IE will fail on nth-of-type */
.category-table span:nth-of-type(3n+1) {clear:left;}
.category-table .child-3n1 {clear:left;}
/*.category-table .nth-child-mod3 {clear:left;}  -  can't see that this style is used?? */
.category-table img{display:inline-block;margin:14px 0 7px 0;}
.section .category-table ul{margin:0 0 7px 7px;list-style-type:none;}
.section .category-table li{line-height:1.28571em;}


/* ---   PAGER STYLES   --- */
/* ---   (Product categories, search results, and  distributor locator)   --- */
.pager{margin-top:1em;}
.pager-label {
	font-family:Georgia, "Times New Roman", Times, serif;
	margin:0 0.5em 0 0;
}
.pager-elements {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:700;
}
.pager-group {
	font-family:Georgia, "Times New Roman", Times, serif;
	margin:0 1em 0 0;
	display:inline-block;
	zoom:1;*display:inline;/* for IE7 */
}
.pager-group label{
	font-family:Arial, Helvetica, sans-serif;
	font-weight:400;
	margin:0 0.5em 0 0;
}
.pager-elements a{
	text-decoration:underline;
	margin:0 -1px;padding:3px 5px;
}
.pager-elements a:hover{
	text-decoration:underline;
	background-color:#E4E0D3;
		-moz-border-radius:.2em;
		-webkit-border-radius:.25em;
	border-radius:.25em;
}
.pager-elements a.active:hover, .pager-elements .active{
	color:#FFFFFF;background-color:#426D8E;
	font-size:1.14286em;
	padding:2px 3px;
	text-decoration:none;
		-moz-border-radius:.3em;
		-webkit-border-radius:.25em;
	border-radius:.25em;
}
.pager-elements .hidden{display:none;}

/* Adobe reader and pdf links */
#content #pi-links {
	line-height:1.92857em;
	margin:0 1em 1em 1.28571em;
}
a.pdf {
	background: url(/images/pdf-icon.png) no-repeat 0 center;
	display:inline-block;
	padding-left:2.57142em;
}
#ProductsTable a.pdf{padding-left:1.78571em;background:none;font-size:0.85714em;}
/*#ProductsTable tr a.pdf{background: url(/images/pdf-icon-sm.gif) no-repeat 0 center;}*/
#ProductsTable tr:hover a.pdf{background: url(/images/pdf-icon-sm.gif) no-repeat 0 center; background-color:#426D8E;color:#FFFFFF;}
.pdftooltip{
	color:#426D82;background-color:#FFFFFF;
	border:1px solid #426d82;
	display:none;
	font-size:11px;
	line-height:14px;
	padding:4px 8px;
	text-align:left;
}

.grass-seed-variety {color:#006740;}

#ProductsTable sup {font-size:0.71429em;margin-left:0em;/*line-height:1em;vertical-align:text-top;*/}
#ProductsTable a {text-decoration:none;}

/* ---   HOME PAGE CONTENT STYLES   --- */

.homeCat{
	width:499px;/* was 505px */
	float:left; 
	margin: 0 0px 15px 0;/* margin-right was 12px;*/
}
.homeRight{
	width:458px;
    float:left;
    margin-left:7px;/* was 12px */
}

.homecatL{margin:8px 16px 8px 28px;float:left;}
.homecatR{margin:8px 28px 8px 16px;float:left;}

/* old 
.homeCat .odd{display:block;margin:6px 15px 0px 22px;float:left;clear:left;}
.homeCat .even{display:block;margin:6px 22px 0px 15px;float:left;}*/
.homeCat .odd{display:block;margin:6px 12px 0px 22px;float:left;clear:left;}
.homeCat .even{display:block;margin:6px 22px 0px 12px;float:left;}

.homeCat .odd:hover,
.homeCat .even:hover {
	  -webkit-transform: translate(1px,1px);
	  -moz-transform: translate(1px,1px);
	transform: translate(1px,1px);
}

.homeCat .odd:focus img,
.homeCat .even:focus img{
	  -webkit-transform: translate(1px,1px);
	  -moz-transform: translate(1px,1px); /*--> does not behave so well on FireFox */
	transform: translate(1px,1px);
}

.homeRight .module ul{padding:0;margin:0px 5px 10px 14px;text-align:left;}
.homeRight .module li,
#homelist li{padding:4px 0 0 14px;}
.homeRight .module li sup{font-size:0.71429em;/*vertical-align:text-top;*/margin-left:0em;}

.homeRight li a:focus {
	color:#FFFFFF;background-color:#265882;
	text-decoration:none;
}

/* ---   OVERLAY PANELS   --- */
/* ---   The overlayed element   --- */
.overlay {
	display:none;   /* must be initially hidden */
	z-index:10000;  /* place overlay on top of other elements */
	background-color:#FFFFFF;
	background-image:url(/images/2px.png);
	width:640px;	
	min-height:200px;
	border:4px solid #007247;
		-moz-box-shadow:0 0 90px 5px #000;
		-webkit-box-shadow: 0 0 90px #000;	
	box-shadow:0 0 90px 5px #000;
	position:absolute;
}

/* ---   Close overlay button positioned on upper right corner   --- */
.overlay .close{
	background-image:url(/images/overlay-close.png);
	position:absolute;right:-12px;top:-12px;
	cursor:pointer;
	height:33px;width:33px;
}
.overlay .close:hover{background-image:url(/images/overlay-close-hover.png);}
.overlay .contentWrap{
	margin:18px;
    background:#FFFFFF /*url(/images/18grid.gif) repeat*/;
}


.overlayvid {
	display:none;   /* must be initially hidden */
	z-index:10000;  /* place overlay on top of other elements */
	background-color:#FFFFFF;
	background-image:url(/images/2px.png);
	width:675px;	
	min-height:200px;
	border:4px solid #007247;
		-moz-box-shadow:0 0 90px 5px #000;
		-webkit-box-shadow: 0 0 90px #000;	
	box-shadow:0 0 90px 5px #000;
	position:absolute;
}

/* ---   Close overlay button positioned on upper right corner   --- */
.overlayvid .close{
	background-image:url(/images/overlay-close.png);
	position:absolute;right:-12px;top:-12px;
	cursor:pointer;
	height:33px;width:33px;
}
.overlayvid .close:hover{background-image:url(/images/overlay-close-hover.png);}
.overlayvid .contentWrap{
	margin:18px;
    background:#FFFFFF /*url(/images/18grid.gif) repeat*/;
}


/*TODO:  place in correct location in css file*/

.dot-leader {
	color:Teal;
	border-collapse:collapse;
	border-spacing:0;
	margin-top:12px;padding:0;
	max-width:720px;min-width:420px;*width:600px;
}

table.guaranteed-analysis {
	color:#000000;
	border-collapse:collapse;
	border:none;
	border-spacing:0px;
	margin-top:0;padding:15px;
	max-width:600px;
}

.guaranteed-analysis td {padding-top:3px;vertical-align:bottom;line-height:1.28571em;} /*outline:#665544 dotted 1px;border:solid 2px #afe;}*/
.guaranteed-analysis td.right {float:none;text-align:right;}
.guaranteed-analysis span{background-color:#FFF;}

/* ---   Dots are implemented separately for 'screen' and 'print', see respective stylesheets   --- */
.dot-leader .bold-leader td, 
.dot-leader td.bold-leader {
	font-weight:700;
}
.dot-leader .no-leader td, 
.dot-leader td.no-leader {background:none;border-bottom:none;}
.dot-leader td.indent {padding-left:20px;}

.guaranteed-analysis .spec .value{display:inline-block;padding:0 0.25em;text-align:right;}

table.guaranteed-analysis .major-spec .value{display:inline-block;padding:0 0.25em;text-align:right;}
table.guaranteed-analysis .sub-spec .value{display:inline-block;min-width:5em;padding-right:0.5em;text-align:right;}

/*
.guaranteed-analysis span{border-bottom:3px solid white;top:0px;position:relative;border-top:none;}
.dot-leader .bold-leader td, .dot-leader td.bold-leader {border-bottom:2px dotted black;}
.dot-leader tr td{border-bottom:1px dotted black;}
*/

.tools{position:relative;margin-bottom:1.5em;}
.location{}
.print{position:absolute;right:0px;top:-10px;vertical-align:middle;}
.print img{
	text-decoration:none;
	vertical-align:middle;
	border:none;
	margin:0 0.5em;
	display:inline-block;
}
.print a{text-decoration:none;}
.print a span{text-decoration:underline;}

div.printable{
	border-bottom:24px solid #FFFFFF;
	position:relative;
}

.printable:hover{
	/*border-bottom-color:#E9E9E9;*/
}
.section-tools{
	/*border:1px solid #909090;*/
	padding:3px 9px 4px 9px;
	padding:1px 1px 1px 2px;
	font-size:11px;
	/*width:80px;*/
}
.printable .section-tools{
	position:absolute;
	left:0px;bottom:-22px;
	border:1px solid #E4E0D3;
	border:1px solid #426D8E;
	border:2px solid #E4E0D3;
	  -moz-border-radius:0.25em;
	border-radius:0.25em;
	background-color:#FFFFFF;
	display:none;
}
.printable .section-tools a {
	padding:2px 5px 5px 5px;
	display:inline-block;
}
.printable .section-tools a:link,
.printable .section-tools a:visited {
	color:#265882;
	text-decoration:none;
}
.printable .section-tools a:hover{
	text-decoration:none;
	background-color:#265882;
	color:#FFFFFF;
}
.printable .section-tools.active{
	display:block !important;
}


.warning {
	color:#E00027;	
}

#reset {margin-top:1em;} /* --> filter reset link */

.module-column .module input[type='text'] {
	width:140px;
}
.module-column .module input[type='text'].loading {
	color:#ACC268;
	border-color:#ACC268;
	background: url(/images/ajax-loader-circ.gif) no-repeat 125px center; /* --> centered animated progress indicator */
}
.multiplebgs .module-column .module input[type='text'].loading {
	/* centered animated progress indicator */
	background: url(/images/ajax-loader-circ.gif) no-repeat 125px center, -webkit-gradient(linear, 0 0, 0 100%, from(#E3EACB), to(#FFF));
	background: url(/images/ajax-loader-circ.gif) no-repeat 125px center, -moz-linear-gradient(#E3EACB, #FFF) repeat scroll; 
}


/* ---   Brand and Technology Scrollable tabs   --- */
/* ---   Root element for scrollable items */
.scrollable .items {
	position:absolute;
	height:20000em;/* this time we have very large space for the height */
	width:315px;
}
.scrollable .item {
	font-size:12px;
	height:65px;
}


#brand-nav, 
.scroll-nav {width:315px;margin-bottom:20px;float:left;}

#brand-nav .scrollable,
.scroll-nav .scrollable { /* root element for scrollable */
	/* required settings */
	position:relative;
	overflow:hidden;
	/* vertical scrollables have typically larger height than width but not now */
	height: 325px;
	width:315px;
}
#brand-nav .vertical,
.scroll-nav .vertical {
	margin:0 0 0 0px;/* left was 20px */
	position:relative;
	top:0px;
	float: left;
}
.scroll-nav .vertical a,
#brand-nav .vertical a {
	display:block;
	width:288px;
	margin:0;
	border:2px #ACC268 solid;
	text-decoration:none;
	padding:7px 10px 4px 10px;
	font-size:22px;
	font-family:'Droid Serif', Georgia, "Times New Roman", Times, serif;
	background-color:#f7fae7;
		-webkit-border-radius:9px;
		-moz-border-radius:9px;
		-o-border-radius:9px;
	border-radius:9px;
}

.scroll-nav .vertical a:link,
#brand-nav .vertical a:link {
	color:#2020B3;
}
.scroll-nav .vertical a:visited,
#brand-nav .vertical a:visited {
	color:#2020B3;
}
.scroll-nav .vertical a.active,
#brand-nav .vertical a.active {
	color:#000000;background-color:#ACC268;
	border-color:#ACC268;
}
.scroll-nav .vertical a:hover, 
.scroll-nav .vertical a:focus,
#brand-nav .vertical a:hover, 
#brand-nav .vertical a:focus {
	color:#FFFFFF;background-color:#429154;
	border-color: #007247;
		-moz-box-shadow: 2px 2px 4px #ACC268;
		-webit-box-shadow: 2px 2px 4px #ACC268;
		-o-box-shadow: 2px 2px 4px #ACC268;
		-ms-box-shadow: 2px 2px 4px #ACC268;
	box-shadow: 2px 2px 4px #ACC268;
	background: -moz-linear-gradient(100% 100% 90deg, #ACC268, #429154);/* for firefox 3.6+ */
	/* Chrome, Safari:*/
    background: -webkit-gradient(linear, left top, left bottom, from(#429154), to(#ACC268));

}
.scroll-nav .item a span,
#brand-nav .item a span{
	color:#000000;
	font:400 12px Arial, Helvetica, sans-serif;
	text-decoration:none;
}

.scroll-nav sup{font-size:0.63636em;margin-left:0.1em;}
.scroll-content {
	margin-left:340px;
}
.scrollable-pager{width:315px;float:left;margin:0;/*padding:0 0 0 20px;*/text-align:center;font-size:0.85714em;color:#222222;}
.scrollable-pager div{margin:2px 0 3px 0;}
.scrollable-pager a {
	display:inline-block;
	width:30px; height: 30px;
	background-image:url(/images/skin/vert-scroller-alt.jpg);
}

/* --- Up/ Down scroll arrows implemented using single sprite image   --- */
a.jquerytools.next, 
a.jquerytools.prev {cursor:pointer;}
a.jquerytools.next.disabled, 
a.jquerytools.prev.disabled {cursor:default;}
a.jquerytools.next {background-position:0px 0px;}
a.jquerytools.next:hover {background-position:0px 30px;}
a.jquerytools.next.disabled, 
a.jquerytools.next.disabled:hover {background-position:0px 60px;}
a.jquerytools.prev {background-position:30px 0px;}
a.jquerytools.prev:hover {background-position:30px 30px;}
a.jquerytools.prev.disabled {background-position:30px 60px;}

/* ---   Add a simple css-based tooltip to the up/down arrows   --- */
.prev-tooltip,
.next-tooltip {
	padding:6px 25px 0 15px;
	width:89px;height:35px;
	display:none;
	color:#000000;
	text-align:left;
	font-size:11px;
	line-height:13px;
	background: #FFF url(/images/skin/uptipbg.png) no-repeat left 0px;
}
.next-tooltip {
	padding:6px 17px 0 18px;
	background: #FFF url(/images/skin/dwntipbg.png) no-repeat right 0px;
}
.navtabs a:link span,
.navtabs a:visited span,
.navtabs a:hover span,
.navtabs a:active span{
	text-decoration:none;
}

.msds-brands {display:inline-block;position:relative;}
.msds-brands .newListSelected {margin:3px 2px 0 5px;}



/* ---   Site Map Styles   --- */
.tree * {margin:0; padding:0;}
.tree li {list-style:none; padding-left:21px;}
.tree li {list-style:none; padding:2px 0 1px 21px;line-height:1.28571em;}
.tree li.root {padding-left:0;}
    .tree li li {background:url(/images/quickTree/rootNode.gif) no-repeat 17px center; margin-left:10px; padding-left:31px;}
	.tree li li.root {padding-left:10px; background:url(/images/quickTree/justOne.gif) repeat-y 17px 0;}
	.tree li li.root.last {background:none;}
    .tree li li.last {background:url(/images/quickTree/lastRoot.gif) no-repeat 17px 0;}
.expand {background:url(/images/quickTree/plusMinus.gif) no-repeat; width:16px; _width:13px; height:16px; display:block; float:left; margin-top:2px; padding:0 5px 0 0; text-indent:-9999px; line-height:0; font-size:0;}
.contract {background-position:0 -16px;}
.expand:hover {cursor:pointer;}


td {vertical-align:middle;}
table.standard-table {margin-bottom:1.28571em;}
.standard-table td{vertical-align:top;}

/* ---   AdxStudio control styles   --- */
.adxAttachmentTitle {line-height:1.28571em;}
.adxTOCTitle {line-height:1.28571em;}


/* ---   STYLISH-SELECT CONTROL STYLES   --- */
/* ---   The select-lists.css file is the reference point for these styles.   --- */  
/* ---   Hide lists on page load   --- */
.stylish-select ul.newList{left:-9999px;}
ul.newList *{margin:0;padding:0;}
ul.newList a{color:#003a12;text-decoration:none;display:block;}
ul.newList {
	color:#003A12;background:#FFFFFF;
	list-style:none;
	margin:0 0px 0 6px;padding:0;
	width:125px;
	border:1px solid #999999;
	position:absolute; 
	top:22px !important;left:0;
	overflow:auto;
	z-index:9999;
}
            
/* ---   .newListSelected is the class of the div that contains the selected value   --- */
.newListSelected {
	color:#000000;
	background:url(/images/forms/select-bg.png) no-repeat right 0;
	height:18px;width:135px;
	padding:4px 0px 0px 6px;
	float:left; 
	border:1px solid #999999;
		-moz-border-radius:0.9em;
		-webkit-border-radius:0.9em;
		-khtml-border-radius:0.9em;
	border-radius:0.9em;
}
.newListSelected:hover {
	color:#003A12;
	border:1px solid #ACC268;
	  -moz-box-shadow:inset 1px 1px 4px #ddd;
	  -webkit-box-shadow:inset 1px 1px 4px #ddd;
	box-shadow:inset 1px 1px 4px #ddd;
}
.newListSelected:focus{
	  -moz-box-shadow:none;
	  -webkit-box-shadow:none;
	box-shadow:none;
}
.newListSelected span {
	width:134px;
	display:block;
	}

ul.newList li a{padding:3px 6px 4px;display:block;line-height:1.3em;}

.selectedTxt{width:108px;overflow:hidden;height:14px;padding:0 23px 0 0;}

.hiLite,
.hiLite a {
	color:#FFFFFF !important;
	background:#007247 !important;
}
.newListHover {
	color:#000000 !important;
	background:#ACC268 !important;
	cursor:default;
}

/* ---   defaults   --- */
.newListSelHover,.newListSelFocus{background-position:right -22px;cursor:default;}
.newListOptionTitle{font-weight:bold;}
.newListOptionTitle ul{margin:3px 0 0; }
.newListOptionTitle li{font-weight:normal;border-left:1px solid #CCCCCC;}

/* ---   Custom drop-down widths             --- */
/* ---   Product filters without go button   --- */
.prod-filter.disabled .newListSelected{background:#E9E9E9;color:#999999;}
.prod-filter.disabled .newListSelected:hover{border-color:#909090;}

.prod-filter ul.newList				{width:150px;}
.prod-filter .newListSelected		{width:160px;}
.prod-filter .newListSelected span	{width:159px;}
.prod-filter .selectedTxt			{width:133px;}

/* ---   Product variant selections on Product detail page   --- */
.prod-detail ul.newList				{width:350px;}
.prod-detail .newListSelected		{width:360px;}
.prod-detail .newListSelected span	{width:359px;}
.prod-detail .selectedTxt			{width:333px;}

/* ---   Brand selections on MSDS search page   --- */
.msdssearch ul.newList				{width:210px;}
.msdssearch .newListSelected		{width:220px;}
.msdssearch .newListSelected span	{width:219px;}
.msdssearch .selectedTxt			{width:193px;}

/* ---   Paging drop-down controls (e.g. sort by, items per page)   --- */
.pager-group .newListSelected{font-family:Arial, Helvetica, sans-serif;font-size:13px;}

.pager-group ul.newList				{width:135px;}	.narrow.pager-group ul.newList			  {width:42px;}
.pager-group .newListSelected		{width:145px;}	.narrow.pager-group .newListSelected	  {width:52px;}
.pager-group .newListSelected span	{width:144px;}	.narrow.pager-group .newListSelected span {width:51px;}
.pager-group .selectedTxt			{width:118px;}	.narrow.pager-group .selectedTxt		  {width:25px;}


/* ---   Labels for stylish-select lists   --- */
.stylish-select .pager-group label{float:left;margin-top:4px;}


/* Captioned Images */
.image{text-align:left;}
.image img{margin-bottom:3px;box-shadow:0px 2px 6px #444;-moz-box-shadow:0px 2px 6px #444;-webkit-box-shadow:0px 2px 6px #444;}
.image img.noshadow{-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;}
.image-caption{font-size:.75em;line-height:1.375em;}
.image-credit{font-size:.6875em;line-height:1.2em;color:#908470;margin-top:0;}
.image.wrap-left{float:left;margin:.75em 1em 1em 0;}
.image.wrap-right{float:right;margin:1em 0 1em 1em;}

span.pulledquote{font-size:1.571em;font-style:italic;font-weight:bold;font-family:Garamond Premr Pro Smbd, Garamond Premr Pro, Times New Roman, Times, Serif;
	display:block;float:right;margin:0 14px 0 0;padding:.5em 14px .5em 22px;width:180px;text-indent:0em;text-align:left;border-top:3px solid #007142;border-bottom:3px solid #007142;}



/* ---   MEDIA QUERIES   --- */
/* ---
   NOTE: Media queries are not supported in IE6 thru 8.
   None of these rules should be intended to affect display in Internet Explorer.
   The purpose of these is primarily for small screen devices.
   --- */

/* ---   Less than full-width   --- */
@media all and (max-width: 995px) {
	/* IE will fail on nth-of-type */
	/* nullify three column layout */
	.category-table span:nth-of-type(3n+1) {clear:none;}
	.category-table .child-3n1 {clear:none;}
	/* Use 2-column layout */
	.category-table span:nth-of-type(2n+1) {clear:left;}
	.category-table .child-2n1 {clear:left;}
}

/* ---   Not sure about these media queries yet...   --- */
@media all and (min-width: 481px) and (max-width: 800px) {
  #content{margin-right:20px;}
  .module-column {display: none;}
}

@media all and (max-width: 480px) {
  #content{margin-top:10px;margin-right:0px;}
  .module-column {display: none;}
  #crumbs {display:none;}
  #content header h1 {margin-top:10px;}  
}

@media only screen and (orientation:portrait){
   /* portrait styles here */
   #wrap {
      /* width:768px;*/
   }
}



ul.form{list-style-type:none;}

#content .form li{margin-bottom:.5em;position:relative;}
#content .form li fieldset{margin-bottom:-1em;margin-left:0;border-style:none;}
#content .form li label{float:left;
left:0;
line-height:18px;
margin:0;
position:relative;
width:10em;}
#content .form li fieldset span{position:relative;top:-1.5em;display:block;margin:0 0 0 10em;}

#content .form li input{height:1.2em;padding:.1em .2em;vertical-align:middle; -moz-border-radius:0.0em 0.0em 0.0em 0.0em;}
#content .form li .radio input{margin-right:.5em;}
#content .form li .radio label{margin-right:2px; width:auto;}
#content .form li .forms_hint{font-size:.895em;font-weight:400;display:block;position:absolute;left:19em;top:1em;color:#FFF;background-color:#009A49;visibility:hidden;width:220px;padding:0 .5em;}



.navheader
{
	width:300px;
	background-color:#007947;
	display:block;
	padding:5px 10px;
	color:White;
	font-weight:bold;
	font-size:16px;
}

.navbutton{
	width:15px;
	background-color:#007947;
	float:left;
	padding:5px 10px;
	margin-right:10px;
	margin-bottom:10px;
	color:White;
	font-weight:bold;
	font-size:14px;
	text-decoration:none;
	text-align:center;
}

.navbuttonnone{
	width:15px;
	background-color:Gray;
	float:left;
	padding:5px 10px;
	margin-right:10px;
	margin-bottom:10px;
	color:White;
	font-weight:bold;
	font-size:14px;
	text-decoration:none;
	text-align:center;
	cursor:default;
}