/*
Table Of Contents:
	0. CSS Reference
	1. Reset
	2. Headings
	3. Anchors
	4. Form Elements
	5. General Classes
	6. Template & Layout
	7. Print
	8. Handheld
	9. Aural
	10. CSS Diagnostics

Sizing in EMs:
	Parent = #container = .75em -- Font Size In Pixels/12px = 0.0EMs
		11px      .9em
		12px     1.0em
		13px     1.1em
		14px     1.2em
		15px     1.25em
		16px     1.3em
		19px     1.6em

CSS References:
	http://www.w3.org/TR/css3-selectors/#selectors
	http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS)
	http://www.dustindiaz.com/css-shorthand/
	http://developer.mozilla.org/en/docs/Writing_Efficient_CSS
	http://www.satzansatz.de/cssd/onhavinglayout.html
*/



/****************************************************************
 1. Reset  -  http://tantek.com/log/2004/undohtml.css  -  http://meyerweb.com/eric/tools/css/reset/
****************************************************************/

html, body, h1, h2, h3, h4, h5, h6, img, blockquote, q, table, thead, tbody, tfoot, caption, th, tr, td, a, form, input, textarea, fieldset, pre
{ margin: 0px; padding: 0px; }

a img, img { border-width: 0px; }
a { text-decoration: none; }

img { display: block; } /* http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps */

address { font-style: normal; }
acronym, abbr { border-bottom: 1px #000000 dashed; cursor: help; }
ul, ol, p, #content h3, #content h4 { margin-top: 1em; margin-bottom: 1em; }

table { border: 1px solid #dddddd; border-collapse: collapse; border-spacing: 0px; width: 100%; }
caption { background: #777777; color: #ffffff; padding: 5px; font-weight: bold; font-size: 1.1em; }
th { text-align: center; }
td, th { border: 1px solid #dddddd; margin: 0px; padding: 5px; empty-cells: show; }
thead th { background: #ececec; font-weight: bold; border: 1px solid #dddddd; }
table.borderless, table.borderless td, table.borderless th { border-width: 0px; }

table .odd { background: #ffffff; } /* CSS3: table tr:nth-child(even) */
table .even, table .alt { background: #fafafa; } /* CSS3: table tr:nth-child(odd) */



/****************************************************************
 2. Headings
****************************************************************/

#nav h2, #subnav h2 { display: none; }

#content h1, #content h2
{
color: #444444;
font-size: 1.3em;
margin-top: 0em;
margin-bottom: 1em;
}

#content h3
{
color: #444444;
font-size: 1.2em;
}

#content h4 { font-size: 1.1em; }



/****************************************************************
 3. Anchors - Link - Visited - Hover - Focus - Active
****************************************************************/

#content a:link, #locator a:link { border-bottom: 1px solid #dddddd; color: #68942F; } /* IF IE 6 */
#content a:visited, #locator a:visited { border-bottom: 1px solid #dddddd; color: #68942F; }
#content a:hover, #locator a:hover { border-bottom: 1px solid #444444; }
#content a:active, #locator a:active { border-bottom: 1px solid #222222; color: #666666; } /* IF IE 6 */
#content a:focus, #locator a:focus { outline: 1px dotted #aaaaaa; }
#content a.unstyled { border-bottom-width: 0px !important; color: #555555 !important; background-image: none !important; }
*[accesskey]:focus { outline: 1px solid #aaaaaa; }

/* http://www.famfamfam.com/lab/icons/silk/ */
#content a[href^="http"] { background: url(/files/images/icons/external.png) no-repeat right top; padding-right: 16px; }
#content a[target="_blank"] { background: url(/files/images/icons/window.png) no-repeat right top; padding-right: 19px; }
#content a[href^="mailto:"] { background: url(/files/images/icons/email.png) no-repeat right top; padding-right: 19px; }
#content a[href$=".pdf"] { background: url(/files/images/icons/pdf.png) no-repeat right top; padding-right: 19px; }



/****************************************************************
 4. Form Elements
****************************************************************/

#content fieldset
{
border: 1px solid #dddddd;
padding: 0px 20px 20px 20px;
}

#content legend
{
color: #68942F;
font-size: 1.1em;
font-weight: bold;
padding: 0px 10px;
}

optgroup { font-style: normal; }

button,
input[type="button"],
input[type="reset"],
input[type="submit"]
{
padding: 1px 3px;
/* http://www.viget.com/inspire/comments/styling-the-button-element-in-internet-explorer/ */
overflow: visible;
width: auto;
}

input[type="password"], #content input[type="text"], textarea, select
{
border: 1px solid #cccccc;
color: #555555;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
outline-width: 0px;
}

input[type="password"], #content input[type="text"], textarea { padding: 4px; }
input[type="password"]:focus, #content input[type="text"]:focus, textarea:focus { border: 1px solid #aaaaaa; }

textarea { overflow-y: auto; resize: both; }



/****************************************************************
 5. General Classes
****************************************************************/
.top { vertical-align: top; }
.bottom { vertical-align: bottom; }
.middle { vertical-align: middle; }
.sub { vertical-align: sub; }
.sup { vertical-align: super; }

.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.justify { text-align: justify; }
.distribute { text-justify: distribute; }

.smallcaps { font-variant: small-caps; }
.b { font-weight: bold; }
.i { font-style: italic; }
.u { text-decoration: underline; }
.o { text-decoration: overline; }
.s { text-decoration: line-through; }
.su { text-decoration: line-through underline; }

.ucase { text-transform: capitalize; }
.lowercase { text-transform: lowercase; }
.uppercase { text-transform: uppercase; }

.slant { font-style: oblique; }
.indent { text-indent: 10px; }
.wrap { word-wrap: break-word; white-space: normal; }
.pre { white-space: pre; }
.clear { clear: both; }

.block { display: block; }
.inline { display: inline; }
.none { display: none; }
.visible { visibility: visible; }
.hidden { visibility: hidden; }
.collapse { visibility: collapse; }

.circle { list-style-type: circle; }
.disc { list-style-type: disc;}

.dropcap:first-letter { font-size: 1.3em; font-weight: bold; }

.semitransparent { opacity: 0.75; } /* IF IE 7 */

.error
{
background: #f9f0f0;
border: 1px solid #daa2a2;
padding: 3px 5px;
}

.notice
{
background: #ffffcc;
border: 1px solid #a2a282;
padding: 3px 5px;
}

.req
{
color: #990000;
font-size: 1.3em;
font-weight: bold;
padding-right: 3px;
}

ul.collapse
{
display: inline;
list-style-type: none;
list-style-position: inside;
margin: 0px;
padding: 0px;
}
ul.collapse li { display: inline; }

.hr
{
border-bottom: 1px solid #dddddd;
margin: 1.75em 0em;
text-align: center;
height: 1px;
width: 100%;
}
hr { display: none; }

::-moz-selection 
{
background: #999999;
color: #fff;
}

::selection
{
background: #999999;
color: #fff;
}

q, blockquote { }

.q /* IF IE 7 */
{
margin: 2em 0em 1em 0em;
position: relative;
}

/* Could use <q> tag or generated content but browser support isn't there yet */
.r, .l 
{
color: #888888;
font-size: 50px;
font-weight: bold;
line-height: 45px !important;
position: absolute;
}

.l { top: -7px; left: 0px; }
.r { bottom: -12px; right: 0px; }

.q blockquote { margin: 5px 30px; }

div.shadow { background: url(/files/images/template/shadow.png) no-repeat bottom right; padding: 0px 6px 6px 0px; }
div.shadow a, div.shadow a:hover, div.shadow div { border: 1px solid #cccccc !important; padding: 10px; display: block; }

.shadow-wrapper
{
/* display: inline-block; No soup for IE, see JQuery */
background: url(http://www.huebsch.com/files/images/template/shadow.png) no-repeat bottom right;
padding: 0px 6px 6px 0px; /* 6px = width of drop shadow */
}

.shadow-padding
{
border: 1px solid #ddd;
padding: 10px;
}

.frame
{
border: 1px solid #ececec;
border-bottom: 2px solid #e4e4e4;
border-right: 2px solid #e4e4e4;
margin: 0px 0px 15px 15px;
padding: 11px;
box-shadow: 2px 2px 2px #ececec;
-khtml-box-shadow: 2px 2px 2px #ececec;
-moz-box-shadow: 2px 2px 2px #ececec;
-o-box-shadow: 2px 2px 2px #ececec;
-webkit-box-shadow: 2px 2px 2px #ececec;
}

.frame:hover
{
border: 1px solid #dcdcdc;
border-bottom: 2px solid #d4d4d4;
border-right: 2px solid #d4d4d4;
}

.download_icon
{
background: url(/files/images/icons/download.png) no-repeat right 1px;
padding-right: 15px;
}

/****************************************************************
 Promotions Box
****************************************************************/
#promotions
{
background: url(/files/images/template/promo_bg_green.png) no-repeat left top;
height: 238px;
width: 302px;
margin: 0px 0px 2em -5px;
}

	#promotions_heading
	{
	color: #555555;
	font-size: 1.1em;
	font-weight: bold;
	padding-top: 17px;
	text-indent: 15px;
	}

	#promotions_padding { padding: 15px; }

		#promotions input, #promotions select
		{
		border: 1px solid #cccccc; /* For IE6 */
		color: #555555; /* For IE6 */
		font-size: 1em; /* For IE6 */
		margin: 0px 5px 10px 0px;
		padding: 5px;
		}

		#promotions #fn, #promotions #ln { width: 85px; }
		#promotions #ea { width: 185px; }
		#promotions select { width: 197px; }

		#promotions a { font-size: .9em; }




/****************************************************************
 Product Page Locator
****************************************************************/
#product_locator { margin-top: 1.5em; width: 310px; }
#product_locator fieldset { background: url(/files/images/locator/locator_bg.png) repeat-x left bottom; }
#product_locator div { padding-top: 13px; }
#product_locator label { font-weight: bold; }
#product_zip { width: 50px; }


/****************************************************************
 6. Template & Layout - http://www.tutorialtastic.co.uk/page/create_a_tableless_layout
****************************************************************/
html
{
background-color: #f1f1f1;
overflow-y: scroll; /* http://webdevel.blogspot.com/2007/05/controlling-browser-scrollbars.html */
}

body 
{
background: #ffffff url(/files/images/template/stripe_bg_green.png) repeat-x left 74px;
color: #555555;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;  /* http://clagnut.com/blog/348/#c790 */
text-align: center; /* center things in <= IE6 */
vertical-align: baseline;
}

#shadow { background: url(/files/images/template/content_shadow_wht2.png) repeat-y center top; }

#footer_gradient { background: url(/files/images/template/footer_gradient.png) repeat-x left bottom;}

#wrapper /* IF IE 6, 7 */
{
background: url(/files/images/template/faux_bg_green.png) no-repeat center 74px;
margin: 0px auto;
width: 765px;
/* Fixes browser viewport resize and misaligned background images due to odd numbered width != IE6  IF IE7*/
border-left: 0px solid transparent; /* http://csscreator.com/node/472 */
}

#container
{
font-size: .75em;
margin: 0px auto;
text-align: left;
width: 745px;
}

#accessibility
{
left: -9999px;
position: absolute;
}

#header
{
border-bottom: 2px solid #7fb539;
height: 74px;
position: relative;
}

	#logo
	{
	height: 53px;
	position: absolute;
	top: 8px;
	left: 15px;
	}
	
	#locator
	{
	background: url(/files/images/template/separator.png) repeat-y 265px center;
	color: #888888;
	position: absolute;
	top: 15px;
	right: 30px;
	height: 44px;
	width: 360px;
	}
	
		#locator fieldset
		{
		border-width: 0px;
		position: relative;
		}
		
		#locator legend span /* http://www.tjkdesign.com/articles/how_to_position_the_legend_element.asp */
		{				
		color: #444444;
		cursor: pointer;
		font-weight: bold;
		position: absolute;
		top: 15px;
		left: 10px;
		}
		
		#locator form
		{
		position: absolute;
		top: 10px;
		left: 135px;
		width: 110px;
		}
		
			#locator label 
			{
			float: left;
			padding-top: 5px;
			}
						
			#locate_input_bg
			{
			border: 1px solid #999999;
			float: right;
			position: relative;
			height: 22px;
			width: 76px;
			}

			#locate_zip
			{
			border: 1px solid #ffffff;
			color: #a2c96f;
			position: absolute;
			top: 2px;
			left: 3px;
			width: 50px;	
			}
			
			#locate_button
			{			
			position: absolute;
			top: 0px;
			right: 0px;
			height: 22px;
			width: 21px;
			}
		
		#locate_worldwide
		{
		background: url(/files/images/icons/globe.png) no-repeat left center;
		padding: 0px 0px 1px 17px;
		position: absolute;
		top: 15px;
		right: 0px;
		}

#splash
{
background: #ececec;
height: 122px;
overflow: hidden;
}

	#splash object
	{
	height: 122px;
	width: 745px;
	}

#nav
{
background: #59595b url(/files/images/template/nav_bg.png) repeat-x top left;
height: 28px;
}

	#nav ul
	{
	list-style-type: none;
	float: left;
	margin: 0px;
	padding: 0px;
	height: 28px;
	width: 640px;
	}
	
	#nav li { float: left; }
	
	#nav a
	{
	background: url(/files/images/template/menu_bg.jpg) repeat-x left -9999px; /* Removes preload time */
	color: #ececec;
	display: block;
	font-weight: bold;
	line-height: 28px;
	height: 28px;
	width: 80px;
	text-align: center;
	}
	
	#nav a.selected, #nav a:hover
	{
	background-position: top left;
	color: #333333;
	}
	
	#search
	{
	float: right;
	padding: 2px 5px 0px 0px;
	display: none;
	}
	
	#search label { display: none; }
	
	#txtsearch
	{
	border: 1px solid #666666;
	color: #888888;
	font-size: .9em;
	padding: 4px 0px 4px 5px;
	width: 125px;
	}
	
	#search button
	{
	background: transparent;
	border-width: 0px;
	color: #ececec;
	font-size: .9em;
	padding: auto auto 3px 4px;
	}

#content
{
border-left: 1px solid #dddddd;
float: right;
line-height: 1.75em;
padding: 20px;
text-align: justify;
width: 554px;
min-height: 500px; /* http://www.dustindiaz.com/min-height-fast-hack/ */
height: auto !important;
height: 500px;
}

#subnav
{
float: left;
width: 150px;
}

.no_subnav #content { border-left-width: 0px; float: none; width: 704px; }
.no_subnav #subnav { display: none; float: none; width: 0px; }

	/* CSS Menu Source: http://www.tanfa.co.uk/css/examples/menu/vs7.asp */
	#subnav ul
	{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	}	
	
	/* Default state */
	#subnav a
	{
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	color: #5F872B;
	display: block;
	padding: 8px 10px;
	}
	
	/* Hover state */
	#subnav a:hover,
	#subnav:hover ul ul li:hover a.x /* Hover persistence */
	{
	border-top-color: #dddddd;
	border-bottom-color: #dddddd;
	color: #000000;
	}
	
	/* Menu arrow & persistence */
	
		/* Default arrow state */
		#subnav a.x, #subnav a.y { background: #ffffff url(/files/images/template/menu_arrow_green.png) no-repeat 140px -18px; }
		#subnav a.y { background-position: 185px -18px; } /* overide */
		
		/* Hover arrow state */
		#subnav:hover ul ul li:hover a.x
		{ background-position: 140px 13px; color: #000000; }
		
		#subnav a.y:hover,
		#subnav:hover ul ul li:hover ul li:hover a.y
		{ background-position: 185px 13px; color: #000000; }
		
	/* End Menu arrow & persistence */
	
	#subnav .first-child a, #subnav .first-child a:hover { border-width: 0px; }
	
	#subnav ul ul ul a,
	#subnav ul ul ul a:hover,
	#subnav ul ul ul ul a,
	#subnav ul ul ul ul a:hover
	{
	border-top-width: 0px;
	border-bottom-width: 0px;
	border-left: 1px solid #dddddd;
	}
	
	#subnav li { position: relative; z-index: 1000; /* Fixes problems with menu falling behind content */ }
	
	/* TBC = Transparent Border Change */	
	#subnav ul ul ul /* IF IE 6 */
	{
	border: 50px solid transparent; /* TBC: border: 1px solid #ececec; border-width: 1px 1px 1px 0px; */
	border-width: 50px 50px 50px 0px;
	position: absolute;
	top: -50px; /* TBC: 0px */
	left: 100%;
	width: 200px; /* TBC: 100% */
	}
	
	/* TBC */
	#subnav ul ul ul li
	{
	background: #ffffff;
	border-right: 1px solid #dddddd;
	box-shadow: 6px 6px 10px #dddddd;
		-webkit-box-shadow: 6px 6px 10px #dddddd;
		-moz-box-shadow: 6px 6px 10px #dddddd;
	}
	
	/* TBC */
	#subnav ul ul ul li.first-child	{ border-top: 1px solid #dddddd; }
	#subnav ul ul ul li.last-child { border-bottom: 1px solid #dddddd; }
	
	#subnav ul ul ul,
	#subnav ul ul li:hover ul ul
	{ display: none; }
	
	#subnav ul ul li:hover ul,
	#subnav ul ul ul li:hover ul
	{ display: block; }
	
#footer 
{
clear: both;
font-size: .7em;
text-align: center;
}

	#logos
	{
	height: 55px;
	padding: 0px 25px;
	background: url(/files/images/template/content_shadow_wht2.png) repeat-y center top;
	}

	#logos a { float: right; }	
	#logos a.first-child { float: left; }

	#subfoot
	{
	background: url(/files/images/template/footer_bg_green.png) no-repeat center top; /* -4px 7px*/
	height: 85px;
	padding-top: 21px;
	}

	#footer ul 
	{	
	list-style-type: none;
	margin: 0px;
	padding: 0px;	
	}

	#footer .ls { margin-top: 1em; }

	#footer li
	{	
	border-left: 1px solid #bbbbbb;
	display: inline;
	padding: 0px 7px;
	}

	#footer li.first-child { border-left-width: 0px; }

	#footer li a { color: #888888; border-bottom: 1px solid #cccccc; }
	
	#footer li a:hover { color: #666666; border-bottom-color: #aaaaaa; }

	#legal { color: #aaaaaa; }



/****************************************************************
 7. Print - http://www.alistapart.com/stories/goingtoprint/
****************************************************************/
@media print { 

#header, #splash, #nav, #subnav, #footer { display: none; }

#content { border-width: 0px; color: #000000; float: none; padding: 0px; width: 100%; }

#content a { text-decoration: underline; border-bottom-width: 0px; }

/* Additions to this affect IE6, See ie6.css */
#content a:after { content: "......[ " attr(href) " ] "; }

/*Save: #content a[href^="/"]:after { content: " [ http://www.huebsch.com" attr(href) " ] "; } */

}



/****************************************************************
 8. Handheld
****************************************************************/
@media handheld {

html, body, #wrapper, #nav, #subfoot, #locator { background: none; }

#header { height: auto; }

#wrapper, #container, #header, #locator, #splash, #nav, #search, #content, #subnav, #footer #logos a, #footer { display: block; float: none; width: auto; }

#container { font-size: 1.1em; padding: 10px; }

#content, #subnav { padding: 10px 0px; }

#content { border-width: 0px; }

#logo, #locator, #locator fieldset, #locator legend span, #locator form, #locate_worldwide { position: static; }
#locator label, #locator div, #locator #input_bg { float: none; }
#locator legend span, #locator form, #locator .worldwide { display: block; }
#locator, #locator form, #locator label, #locator .worldwide { margin: 1em auto; }

#locator { height: 85px; }
#locator form { width: 100%; }

#nav { height: auto; }
#nav ul { float: none; width: 100%; }
#nav li { display: block; width: 100%; }
#nav a { background: url(/files/images/template/nav_bg.png) repeat-x top left; width: 100%; color: #ececec; }
#nav a:hover, #nav a.selected { background: url(/files/images/template/menu_bg.jpg) repeat-x top left; color: #333333; }

#search button { color: #000000; }

#subnav *
{
border-color: #ffffff;
border-width: 0px !important;
}

#subnav ul 
{
margin: 0px 10px;
padding: 0px 10px;
list-style-type: disc !important;
}

#subnav a, #subnav a:hover 
{
background: none !important;
color: #68942F !important;
display: inline;
text-decoration: underline;
}

#subnav ul ul ul { position: static; }

#subnav ul ul ul,
#subnav ul ul li:hover ul ul
{ display: block; }

#footer, #logos, #subfoot { height: auto; padding: 0px; }

}



/****************************************************************
 9. Aural (Screen Reader)
****************************************************************/
@media aural {

#accessibility { position: static; top: 0px; left: 0px; }

}
a:active {
  outline: none;
}