/* @override 
	http://www.soilmoist.com/css/jrm-960.css
	http://www.soilmoist.com/css/jrm-960-v2b.css */

/* -------------------------------------------------------------- 
  
   reset.css
   * Resets default browser CSS.
   
   Based on work by Eric Meyer:
   * meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
   
   	vertical-align: top; removed from block by us
   
-------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
}

/* @group Structure */

body, html {
	background: #d4f1b7 url(../images-jrm/jrm-bg.jpg) no-repeat center top;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 12px;
	line-height: 1.5;
	font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;
}

.bg-green-light {background: #d4f1b7;}

#nav {
	float: left;
	clear: both;
	z-index: 1500;
	height: 36px;
	margin-bottom: 20px;
}

#flowers {
	float: left;
	clear: both;
	margin: 0px;
	width: 960px;
	height: 200px;
	background: url(../images-jrm/jrm-flowers.jpg) no-repeat center top;
}

#no-flowers {
	float: left;
	clear: both;
	margin: 0px;
	width: 960px;
	height: 30px;
	background: url(../images-jrm/jrm-no-flowers.gif) no-repeat center top;
}

#masthead {
	float: left;
	clear: both;
	height: 282px;
	width: 940px;
}

#masthead-home {
	float: left;
	clear: both;
	height: 282px;
	width: 940px;
	position: relative;
}

.slide-1 {
	position: absolute; z-index: 3;
}

.slide-2 {
	position: absolute; z-index: 2;
}

.slide-3 {
	position: absolute; z-index: 1;
}

/* Logo link thru CSS -- make sure heigh and width match the dimensions of your logo file. Use <a> in masthead div in the HTML file to call up the logo. 

#masthead a {
	background: url(../generic-images/logo.jpg) no-repeat;
	text-indent: -9000px;
	width: 323px;
	height: 75px;
	position: absolute;
	margin: 0px;
	padding: 0px;
}*/

#page-nav {
	float: left;
	clear: both;
	margin-bottom: 20px;
	background-color: #aa1166;
	border-radius: .375em;
}

#srch {
	background: url(../images-jrm/search-bg.gif) no-repeat center top;
	height: 36px;
}

#content {
	float: left;
	clear: both;
	margin-bottom: 10px;
}


#feature {
	float: left;
	clear: both;
}

#feature ul, #feature li, #feature ol {
	color: #333333;
	font: normal 14px/22px Verdana, Arial, Helvetica, Swiss, sans-serif;
	padding: 5px;
}

.home-note {
	border-top: 1px dashed #557700;
	margin-top: 10px;
	padding-top: 10px;
}

#footer {
	background: #ffffff url(../images-jrm/footer-bg.gif) no-repeat center top;
	float: left;
	clear: both;
	height: 150px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.clearl {
	clear: left;
}

/* @end */

/* @group Backgrounds */

.bg-home {
	background-image: url(../images-jrm/mastheads/home.jpg);
	height: 282px;
	width: 940px;
}

.commercial {
	background-image: url(../images-jrm/mastheads/commercial.jpg);
	height: 282px;
	width: 940px;
}

.consumer {
	background-image: url(../images-jrm/mastheads/consumer-products.jpg);
	height: 282px;
	width: 940px;
}

.contact {
	background-image: url(../images-jrm/mastheads/contact.jpg);
	height: 282px;
	width: 940px;
}

.crystal-accents {
	background-image: url(../images-jrm/mastheads/crystal-accents.jpg);
	height: 282px;
	width: 940px;
}

.decobeads {
	background-image: url(../images-jrm/mastheads/decobeads.jpg);
	height: 282px;
	width: 940px;
}

.deco-balls {
	background-image: url(../images-jrm/mastheads/deco-balls.jpg);
	height: 282px;
	width: 940px;
}

.deco-contest {
	background-image: url(../images-jrm/mastheads/deco-contest.jpg);
	height: 282px;
	width: 940px;
}

.deco-cubes {
	background-image: url(../images-jrm/mastheads/deco-cubes.jpg);
	height: 282px;
	width: 940px;
}

.deco-scented {
	background-image: url(../images-jrm/mastheads/deco-scented.jpg);
	height: 282px;
	width: 940px;
}

.deco-shapes {
	background-image: url(../images-jrm/mastheads/deco-shapes.jpg);
	height: 282px;
	width: 940px;
}

.downloads {
	background-image: url(../images-jrm/mastheads/downloads.jpg);
	height: 282px;
	width: 940px;
}

.environmental {
	background-image: url(../images-jrm/mastheads/environmental.jpg);
	height: 282px;
	width: 940px;
}

.equestrian {
	background-image: url(../images-jrm/mastheads/equestrian.jpg);
	height: 282px;
	width: 940px;
}

.erosion {
	background-image: url(../images-jrm/mastheads/erosion.jpg);
	height: 282px;
	width: 940px;
}

.golf {
	background-image: url(../images-jrm/mastheads/golf.jpg);
	height: 282px;
	width: 940px;
}

.halloween {
	background-image: url(../images-jrm/mastheads/halloween.jpg);
	height: 282px;
	width: 940px;
}

.industrial {
	background-image: url(../images-jrm/mastheads/industrial.jpg);
	height: 282px;
	width: 940px;
}

.landscapers {
	background-image: url(../images-jrm/mastheads/landscapers.jpg);
	height: 282px;
	width: 940px;
}

.links {
	background-image: url(../images-jrm/mastheads/links.jpg);
	height: 282px;
	width: 940px;
}

.mycorrhizal {
	background-image: url(../images-jrm/mastheads/mycorrhizal.jpg);
	height: 282px;
	width: 940px;
}

.news {
	background-image: url(../images-jrm/mastheads/news.jpg);
	height: 282px;
	width: 940px;
}

.professional {
	background-image: url(../images-jrm/mastheads/professional-products.jpg);
	height: 282px;
	width: 940px;
}

.search-bg {
	background-image: url(../images-jrm/mastheads/search.jpg);
	height: 282px;
	width: 940px;
}

.social-media {
	background-image: url(../images-jrm/mastheads/social-media.jpg);
	height: 282px;
	width: 940px;
}

.soil-moist {
	background-image: url(../images-jrm/mastheads/soil-moist.jpg);
	height: 282px;
	width: 940px;
}

.snowreal {
	background-image: url(../images-jrm/mastheads/snowreal.jpg);
	height: 282px;
	width: 940px;
}

.snowreal-pumpkin {
	background-image: url(../images-jrm/mastheads/snowreal-pumpkin.jpg);
	height: 282px;
	width: 940px;
}

.sm-mats {
	background-image: url(../images-jrm/mastheads/sm-mats.jpg);
	height: 282px;
	width: 940px;
}

.sm-natural {
	background-image: url(../images-jrm/mastheads/sm-natural.jpg);
	height: 282px;
	width: 940px;
}

.sm-paks {
	background-image: url(../images-jrm/mastheads/sm-paks.jpg);
	height: 282px;
	width: 940px;
}

.sm-plus {
	background-image: url(../images-jrm/mastheads/sm-plus.jpg);
	height: 282px;
	width: 940px;
}

.specs {
	background-image: url(../images-jrm/mastheads/specs.jpg);
	height: 282px;
	width: 940px;
}

.tree-moist {
	background-image: url(../images-jrm/mastheads/tree-moist.jpg);
	height: 282px;
	width: 940px;
}

.water-mgmt {
	background-image: url(../images-jrm/mastheads/water-management.jpg);
	height: 282px;
	width: 940px;
}

.greenbg {
	background-color: #f2f7e5;
}

.purplebg {
	background-color: #eeddff;
}

/* @end */

/* @group Typography */

#masthead-home h1, #masthead-home h2 {
	font: 24px Georgia, "Times New Roman", Times, serif;
	color: #ffffff;
	padding: 200px 10px 0px 180px;
	text-shadow: 0px 0px 4px #222222;
}

#masthead h1, #masthead h2 {
	font: 24px Georgia, "Times New Roman", Times, serif;
	color: #ffffff;
	padding: 200px 10px 0px 180px;
	text-shadow: 0px 0px 4px #000000;
}

#masthead-home .slide-1 a, #masthead-home .slide-2 a, #masthead-home .slide-3 a {
	color: #ffffff;
}

#page-nav p {
	color: #ffffff;
	font: normal 13px/20px Verdana, Arial, Helvetica, Swiss, sans-serif;
	padding: 5px 0px 10px 10px;
}

#content h1, #content h2, #content h3 {
	color: #557700;
	font-family: Georgia, "Times New Roman", Times, serif;
	padding: 10px;
}

#content h1 {
	font-size: 21px;
}

#content h2 {
	font-size: 18px;
}

#content h3 {
	font-size: 16px;
}

#content p {
	color: #333333;
	font: normal 13px/20px Verdana, Arial, Helvetica, Swiss, sans-serif;
	padding: 10px;
}

#content.content-home .grid_6 p:first-of-type {
	font-size: 15px;
	line-height: 2;
}

/* Do NOT use float: left; in the HR. It can cause a headline or text that is below the HR in the code to appear above it in the browser. */

#content hr {
	border: none 0;
	border-top: 1px dashed #557700;
	clear: both;
	width: 98%;
	height: 1px;
	margin: 10px 0px 15px 0px;
	padding: 0px;
	/* left align in IE, Opera */
	text-align: left;
}

#content .chart {
	color: #333333;
	font-size: 12px;
	line-height: 24px;
}

#footer p {
	color: #ffffff;
	font: normal 11px/18px Verdana, Arial, Helvetica, Swiss, sans-serif;
	padding: 10px 20px 10px 20px;
}

#content ul, #content ol {
	color: #333333;
	font: normal 13px/20px Verdana, Arial, Helvetica, Swiss, sans-serif;
	margin-left: 30px;
}

#content li {
	padding: 1px;
}

#feature h1, #feature h2, #feature h3 {
	color: #aa1166;
	font-family: Georgia, "Times New Roman", Times, serif;
	padding: 10px;
	font-style: italic;
}

#feature h1 {
	font-size: 18px;
}

#feature h2 {
	font-size: 16px;
}

#feature h3 {
	font-size: 14px;
}

#feature p {
	color: #333333;
	font: normal 12px/18px Verdana, Arial, Helvetica, Swiss, sans-serif;
	padding: 10px;
}

ul {
	margin: 0px 0px 0px 20px;
	padding: 0px 10px 5px 5px;
}

ol {
	margin: 0px 0px 0px 20px;
	padding: 0px 10px 5px 5px;
}

.sml {
	color: #000000;
	font: normal 10px/12px Verdana, Arial, Helvetica, Swiss, sans-serif;
	padding: 10px 20px 10px 20px;
}

.ovrstrk {text-decoration:line-through;
}

/* @end */


/* @group Links */

a:link {
	color: #557700;
}

a:visited {
	color: #445511;
}

a:hover {
	color: #3355ee;
}

a:active {
	color: #aa1166;
}

#footer a:link {
	color: #ffffff;
}

#footer a:visited {
	color: #dddddd;
}

#footer a:hover {
	color: #ffffbb;
}

#footer a:active {
	color: #ffffbb;
}

#page-nav a:link {
	color: #ffffff;
}

#page-nav a:visited {
	color: #dddddd;
}

#page-nav a:hover {
	color: #ffffbb;
	font-style: italic;
}

#page-nav a:active {
	color: #ffffbb;
}

/* BUTTONS */

.btn {
	display: block;
	border-radius: .375em;
	padding: .5em 1em;
	text-decoration: none;
}/* display can also be set to inline-block */

a.btn.bg-green,
a.btn.bg-magenta {color: #ffffff;}

a.btn.bg-green:hover {
	background-color: #88bb33;
	color: #ffffff;
}
a.btn.bg-magenta:hover {
	background-color: #ee2299;
	color: #ffffff;
}

.bg-green {background-color:	#557700;}
.cp-green {color:				#557700;}

.bg-magenta {background-color:	#aa1166;}
.cp-magenta {color:				#aa1166;}

/* @end */


/* @group Elements */

.whtspc-10  {margin: 10px;}
.whtspc-10t {margin-top: 10px;}
.whtspc-10r {margin-right: 10px;}
.whtspc-10b {margin-bottom: 10px;}
.whtspc-10l {margin-left: 10px;}

.whtspc-20 	{margin: 20px;}
.whtspc-20t {margin-top: 20px;}
.whtspc-20b {margin-bottom: 20px;}
.whtspc-20b {margin-bottom: 20px;}
.whtspc-20l {margin-left: 20px;}

.icon {
	float: left;
	padding: 0px 15px 0px 0px;
}

img.mat {
	border: 1px solid #cccccc;
	background-color: #ffffff;
	padding: 4px;
}

.pad-10{
	padding-left: 10px;
}

.pad-20{
	padding-left: 20px;
}

.bak2top {
	font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;
	font-size: 10px;
	color: #000000;
	background-color: #ffffff;
	border: 2px solid #cccccc;
	padding: 4px;
	z-index: 1200
}

.wr_fieldset {
margin: 8px;
padding: 0; }

.wr_fieldset fieldset {
border: 1px solid #557700; }

.wr_fieldset legend {
margin: 0 10px 0 10px;
padding: 0 5px 0 5px;
color: #557700;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif; }

.wr_fieldset_pad {
margin: 0;
padding: 5px; }

.quotebox {
	border: 1px solid #cccccc;
	padding: 10px 10px 10px 10px;
}

/* Floating boxes, good for photos with captions or similar */


div.floatl {
  float: left;
  }
  
div.floatl p {
   text-align: left;
   width: 265px;
   }

div.floatr {
  float: right;
  }
  
div.floatr p {
   text-align: center;
   width: 265px;
   }
   
#scrollbox {
width:400px;
height:300px;
overflow: auto
}

/* @end */


/* @group E-comm */

/* Styles for Mal's e-commerce tables currently in most of my Excel TDF masters; probably should revisit these on site-by-site basis */

.ptcol {border-bottom: 1px solid #000000; text-align: center; font-size: 11px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

.ptfrm {border-bottom: 1px solid #cccccc; text-align: left; font-size: 11px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}

.pthdr1 .pthdr {font-size: 14px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}


/* @end */

/* @group Tables */

tr:nth-of-type(odd) {background: #dff1b7;}

table.zebra-blue tr:nth-of-type(odd) {background: #ddeeff;}

table.no-zebra-stripe tr {background: #ffffff;}

/* Applies global padding and paragraph styles to entire table. Normally used for forms or tabular data within the main layout table so you do not need to add paragraph or other styles to each td */

table.frm td {
	padding: 1px; 
	font-size: 11px;
	line-height: 15px;
	font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}
	
.tblborder {
	border: 1px solid #000000;
	border-collapse: collapse;
}

#content table p {
	font-size: 12px;
	line-height: 18px;
	padding: 5px;
}

table {
	color: #333333;
	font-size: 12px;
	line-height: 18px;
}

table td {
	padding: 5px;
}

	
/* Add following as a table class="cellbkgrnd" for applying table cell backgrounds using tablestyle name="Alt Background By Style w/o formatting */

.cellbkgrnd {background-color: #cccccc;}

/* Adding bkground images to table cells or divs for announcement boxes or similar; commented out below until needed */

/* .bg1 {background: white url(images/divheader.gif) no-repeat top left; width: 236px; padding: 48px 10 10 10; border: 1px solid #548dab; border-collapse: collapse; text-align: left;} */

/* @end */

/* @group 960 */

/*
	960 Grid System ~ Core CSS.
	Learn more ~ http://960.gs/

	Licensed under GPL and MIT.
*/

/* =Containers
--------------------------------------------------------------------------------*/

.container_12
{
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	text-align: left;
	background-color: #ffffff;
	overflow: auto;
}

/* =Grid >> Global
--------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12
{
	display: inline;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
}


/* =Grid >> Children (Alpha ~ First, Omega ~ Last)
--------------------------------------------------------------------------------*/

.alpha {margin-left: 0;}
.omega {margin-right: 0;}


/* =Grid >> 12 Columns
--------------------------------------------------------------------------------*/

.container_12 .grid_1 {width: 60px;}
.container_12 .grid_2 {width: 140px;}
.container_12 .grid_3 {width: 220px;}
.container_12 .grid_4 {width: 300px;}
.container_12 .grid_5 {width: 380px;}
.container_12 .grid_6 {width: 460px;}
.container_12 .grid_7 {width: 540px;}
.container_12 .grid_8 {width: 620px;}
.container_12 .grid_9 {width: 700px;}
.container_12 .grid_10 {width: 780px;}
.container_12 .grid_11 {width: 860px;}
.container_12 .grid_12 {width: 940px;}

/* =Prefix Extra Space >> 12 Columns
--------------------------------------------------------------------------------*/

.container_12 .prefix_1 {padding-left: 80px;}
.container_12 .prefix_2 {padding-left: 160px;}
.container_12 .prefix_3 {padding-left: 240px;}
.container_12 .prefix_4 {padding-left: 320px;}
.container_12 .prefix_5 {padding-left: 400px;}
.container_12 .prefix_6 {padding-left: 480px;}
.container_12 .prefix_7 {padding-left: 560px;}
.container_12 .prefix_8 {padding-left: 640px;}
.container_12 .prefix_9 {padding-left: 720px;}
.container_12 .prefix_10 {padding-left: 800px;}
.container_12 .prefix_11 {padding-left: 880px;}

/* =Suffix Extra Space >> 12 Columns
--------------------------------------------------------------------------------*/

.container_12 .suffix_1 {padding-right: 80px;}
.container_12 .suffix_2 {padding-right: 160px;}
.container_12 .suffix_3 {padding-right: 240px;}
.container_12 .suffix_4 {padding-right: 320px;}
.container_12 .suffix_5 {padding-right: 400px;}
.container_12 .suffix_6 {padding-right: 480px;}
.container_12 .suffix_7 {padding-right: 560px;}
.container_12 .suffix_8 {padding-right: 640px;}
.container_12 .suffix_9 {padding-right: 720px;}
.container_12 .suffix_10 {padding-right: 800px;}
.container_12 .suffix_11 {padding-right: 880px;}

/* =Clear Floated Elements
--------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

html body * span.clear,
html body * div.clear,
html body * li.clear,
html body * dd.clear
{
	background: none;
	border: 0;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://www.positioniseverything.net/easyclearing.html */

.clearfix:after
{
	clear: both;
	content: '.';
	display: block;
	visibility: hidden;
	height: 0;
}

.clearfix
{
	display: inline-block;
}

* html .clearfix
{
	height: 1%;
}

.clearfix
{
	display: block;
}



/* @end */

/* this section is for mega menus, NOTE: use our nav div to set width and positioning; normally, we'll do the menus as an include */

/* @group mega menu */

ul#topnav {
	margin: 0; padding: 0;
	float:left;
	width: 100%;
	list-style: none;
	font-size: 1.1em;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	position: relative;
}
ul#topnav li a {
	float: left; 
	text-indent: -9999px;
	height: 36px;
}
ul#topnav li:hover a, ul#topnav li a:hover { background-position: left bottom; }

ul#topnav a.products {
	background: url(../images-jrm/nav/products.gif) no-repeat;
	width: 96px; 
}
ul#topnav a.deco-beads {
	background: url(../images-jrm/nav/deco-beads.gif) no-repeat;
	width: 115px; 
}
ul#topnav a.news-menu {
	background: url(../images-jrm/nav/news.gif) no-repeat;
	width: 65px; 
}
ul#topnav a.links-menu {
	background: url(../images-jrm/nav/links.gif) no-repeat;
	width: 69px; 
}
ul#topnav a.contact-menu {
	background: url(../images-jrm/nav/contact.gif) no-repeat;
	width: 87px; 
}
ul#topnav a.downloads-menu {
	background: url(../images-jrm/nav/downloads.gif) no-repeat;
	width: 112px; 
}
ul#topnav a.home {
	background: url(../images-jrm/nav/home.gif) no-repeat;
	width: 76px; 
}


ul#topnav li .sub {
	position: absolute;	
	top: 36px; left: 0;
	border: 1px solid #88aa00;
	background-color: #f1ffcc;
	padding: 20px 20px 20px;
	float: left;
	display: none;
	border-radius: .5em;
	-moz-box-shadow: 0px 4px 8px #333;
	-webkit-box-shadow: 0px 4px 8px #333;
	box-shadow: 0px 4px 8px #333;
}

ul#topnav li .row {clear: both; float: left; width: 100%; margin-bottom: 10px;}

ul#topnav li .sub ul{
	list-style: none;
	margin: 0; padding: 0;
	width: 180px;
	float: left;
}

/* width 100% overrides parent list item */
ul#topnav .sub ul li {
	width: 100%; 
	color: #333333;
}

ul#topnav .sub ul li h2 {
	padding: 0; margin: 0;
	font-size: 14px;
	font-weight: normal;
}
ul#topnav .sub ul li h2 a {
	padding: 7px 5px 7px 5px;
	background-image: none;
	color: #669900;
}

/* removed from tutorial code - background: url(navlist_arrow.png) no-repeat 5px 12px; */

ul#topnav .sub ul li a {
	float: none; 
	text-indent: 0; /*--Reset text indent--*/
	height: auto;
	padding: 7px 5px 7px 5px;
	display: block;
	text-decoration: none;
	color: #333333;
}
ul#topnav .sub ul li a:hover {
	background-color: #669900;
	color: #ffffff;
	display: block;
	background-position: 5px 12px ;
	padding: 7px 5px 7px 5px;
	border-radius: .5em;
}

/* @end */


/* end of mega menus styles */