/* General styles */

html {
  height:100%;
}
body {
  margin:0;
  padding:0;
  wxidth:100%;
  background:#eeeeee;
  font-size:90%;
  height:100%;

}
/*--------------------------------------------------------------------------------------
ELEMENT STYLES
--------------------------------------------------------------------------------------*/
a {
  color:#336699;
}
a:hover {
  color:#ffffff;
  background-color:#336699;
  text-decoration:none;
}
h1, h2, h3 {
  margin:.8em 0 .2em 0;
  padding:0;
}
p {
  margin:.4em 0 .8em 0;
  padding:0;
}
img {
  margin:10px 0 5px;
}
/*--------------------------------------------------------------------------------------
WRAPPER STYLES
--------------------------------------------------------------------------------------*/

.fixed #wrapper {
  background:transparent url(img/wrapper-background.jpg) top center repeat-y;

  width:1000px;
  margin:0 auto;

  min-height:100%;
  height:auto !important;
  height:100%;

  position:absolute;
  position:relative;


}
}
/*--------------------------------------------------------------------------------------
HEADER STYLES
--------------------------------------------------------------------------------------*/

#header {
    clear:both;
    float:left;
    width:100%;
}
#header {
  border-bottom:1px solid #000000;
}
#header p,
#header h1,
#header h2 {
    padding:.4em 15px 0 15px;
      margin:0;
}
/* wej, not used in seasoil-phase2
#header ul {
    clear:left;
    float:left;
    width:100%;
    list-style:none;
    margin:10px 0 0 0;
    padding:0;
}
#header ul li {
    display:inline;
    list-style:none;
    margin:0;
    padding:0;
}
#header ul li a {
    display:block;
    float:left;
    margin:0 0 0 1px;
    padding:3px 10px;
    text-align:center;
    background:#eee;
    color:#000;
    text-decoration:none;
    position:relative;
    left:15px;
  line-height:1.3em;
}
*/
/* wej, jan 9, 2009: remove this comment when doing precision alignment of css sprites
#header ul li a:hover {
    background:#369;
  color:#fff;
}
*/
/* wej, not used in seasoil-phase2
#header ul li a.active,
#header ul li a.active:hover {
    color:#fff;
    background:#000;
    font-weight:bold;
}
#header ul li a span {
    display:block;
}
*/
/*--------------------------------------------------------------------------------------
SUB MENU NAVIGATION
--------------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------------------
COLUMN CONTAINER
--------------------------------------------------------------------------------------*/

.colmask {
  position:relative;  /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
  clear:both;
  fxloat:left;
  width:100%;     /* width of whole page */
  overflow:hidden;    /* This chops off any overhanging divs */
  background:#ffd8b7;   /* Left column background colour */
}


/*--------------------------------------------------------------------------------------
HOLY GRAIL 3 COLUMN SETTINGS
--------------------------------------------------------------------------------------*/
.holygrail .colmid {
  float:left;
  width:200%;
  position:relative;
  left:200px;
  background:#ffffff;      /* Centre column background colour */
}
.holygrail .colright {
  float:left;
  width:100%;
  position:relative;
  left:50%;
  margin-left:-400px;
  background:#ff9;      /* Right column background colour */
}
.holygrail .col1wrap {
  float:right;
  width:50%;
  position:relative;
  right:100%;
}
.holygrail .col1pad {
  margin:0 15px 0 415px;
  overflow:hidden;
}
.holygrail .col1 {
  width:100%;
  overflow:hidden;
  _behavior:url(col1.htc);  
}
.holygrail .col2 {
  float:left;
  width:170px;
  position:relative;
  margin-left:-50%;
  left:215px;
  overflow:hidden;
}
.holygrail .col3 {
  float:left;
  width:170px;
  position:relative;
  left:15px;
  overflow:hidden;
}

.col2 ul {
  width:100%;
  list-style:none;
  margin:0;
  padding:0;
  /* wej, jan 9, 2009: commented out for consistency in vertical main nav
  line-height:1.1;
  */
}
.col2 ul li {
  list-style:none;
  margin:10px 0 0 0;
  padding:0;
}

/*--------------------------------------------------------------------------------------
FOOTER STYLES
--------------------------------------------------------------------------------------*/

#footer {
  background-color: transparent;
  bxackground-color: red;

  background-image: url(img/footer-bg.gif);
  background-position: bottom;
  background-repeat: no-repeat;

  /* border-top:1px solid #000; */
  bottom:0;
  clear:both;
  color:#fff;
  height: 115px;
  width:100%;

}

/* For Internet Explorer 6
*html #footer {
  background-image: url(img/footer-bg.gif);
}
*/

div#innerfooter {
  position:relative;
  left:186px;
  top:25px;
  width:814px; /* content width - left */
  padding:0;
  height:72px;
}

#footer p {
  color:#f6f2c5;
  font-weight:bold;
  font-size:110%;
  line-height:1.2em;
  margin:0;
  padding:0;
}

div#footer a.tertlink:link, div#footer a.tertlink:visited, div#footer a.tertlink:hover {
  background: transparent;
  border:0;
  cursor:pointer;
  margin:0;
  padding:0;
}

div#footer a.tertlink:link img, div#footer a.tertlink:visited img, div#footer a.tertlink:hover img {
  background: transparent;
  border:1px solid #2B85BB;
  cursor:pointer;
  margin:0;
  padding:0;
}

div#footer a.tertlink:hover img {
  border:1px solid #ccc;
}

div#footer a {
  color: #fef68b;
  font-weight:bold;
  font-size:110%;
}

div#footer a.tertlink {
  position:absolute;
  left:715px;
  top:65px;
}

div#footer {
  position:absolute;
  bottom:0;
  left:0;

}


/**************************************************************************************/
/**************************************************************************************/
/**************************************************************************************/
/**************************************************************************************/
/*--------------------------------------------------------------------------------------
CUSTOM STYLING
--------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------
ELEMENT STYLES
--------------------------------------------------------------------------------------*/
body {
  background-color: #fff;
  background-image: url(img/body-background.jpg);
  background-position: top center;
  background-repeat: repeat-y;

  font-family: "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, "Microsoft Sans Serif", sans-serif;
  line-height:1.5em;

}

acronym {
  border-bottom:1px dashed #555555;
  cursor:help;
  text-decoration:none;
}

.h2smaller {
  font-size:150%;
}

/* Form Element Styling */

form {
  border:1px solid darkgray;
  margin:0;
  padding:0;
}

fieldset {
  border:0;
}

input, textarea { margin-bottom:10px; }

legend { font-weight:bold; }

label { border-bottom:1px solid #ccc; }

/*--------------------------------------------------------------------------------------
HEADER STYLES
--------------------------------------------------------------------------------------*/

#header {
  background:transparent; /* transparent, so that while body bg image is loading, don't get flashing effect */
  border-bottom:0px solid #000;
}

/*--------------------------------------------------------------------------------------
SUB MENU NAVIGATION
--------------------------------------------------------------------------------------*/
#layoutdims {
  display:none;
}

.grayout {

  font-style:italic;
  font-weight:bold;

}

/*--------------------------------------------------------------------------------------
COLUMN CONTAINER
--------------------------------------------------------------------------------------*/

.colmask {
  background:transparent;   /* Left column background colour */
  padding-bottom:100px;
}

/*--------------------------------------------------------------------------------------
HOLY GRAIL 3 COLUMN SETTINGS
--------------------------------------------------------------------------------------*/

.holygrail .colmid {
  left:170px;
  background:transparent;      /* Centre column background colour */
}
.holygrail .colright {
  margin-left:-370px;
  background:transparent;      /* Right column background colour */
}
.holygrail .col1pad {
  margin:0 -5px 0 385px;
}
.holygrail .col2 {
  width:160px;
  left:215px;
  overflow:visible;
}
.holygrail .col3 {
  width:170px;
}

.holygrail .col1, .holygrail .col2,  .holygrail .col3 {
  /* march 6, 2009 */
  padding-bottom:15px;
  line-height:1.3em;
}

.col3 ul, div.homelinks ul {
  list-style: none;
  line-height:1.7em;
  margin-bottom:5px;
  margin-left:0;
  padding-bottom:0;
  padding-left:0;
  padding-right:3px;
}

/*--------------------------------------------------------------------------------------
MISCELLANEOUS
--------------------------------------------------------------------------------------*/

/* Skip Link Anchor */
.skiplink {
  left:-9999px;
  position:absolute;
  top:-9999px;
}

.brclear {
  clear:both;
  font-size:1px;
  height:0;
  line-height:0;
  margin:0;
  zoom:1;
}

/* Trademark "TM" Symbol */
sup.tm {
  font-size:85%;
  line-height:0;
  margin-left:-4px;
}

/* Page Tools Styles */
div.pagetools {
  font-size:80%;
  margin-top:1em;
}

/*--------------------------------------------------------------------------------------
NAVIGATION
--------------------------------------------------------------------------------------*/
ul.flowernav li {
  display:block;
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

ul.flowernav a {
  color:#c4e4ac;
  font-size: 100%;
  font-weight:bold;
  text-decoration:none;
  outline:none;
  line-height:1.1em;
  height:100%;
  display:block;
}

ul.flowernav a:hover {
  background:transparent;
  background-repeat:no-repeat;
  color:#5E9832;
}

/* Horizontal main Navigation */
ul#flowershorz {
  width: 1000px;
  height: 160px;
  background: url(img/nav-main-horiz.png);
  margin: 0;
  padding: 0;
  position: relative;
  letter-spacing:0.1em;
}

ul#flowershorz li, ul#flowershorz a {
  text-align:center;
}

ul#flowershorz li a:hover {
  background-image: url(img/nav-main-horiz.png);
}

/* Home (SEA SOIL) */
ul#flowershorz li#nav1 {top: 10px; left: 5px; width: 150px; height:148px; overflow:hidden;}
ul#flowershorz li#nav1 a {color: #5e9832; padding-top:58px; line-height:0.9em;}
ul#flowershorz li#nav1 a:hover {background-position: -5px -170px; color: #f88b16;}

/* Products */
ul#flowershorz li#nav2 {top:20px; left: 150px; width: 117px;}
ul#flowershorz li#nav2 a {padding-top:100px;}
ul#flowershorz li#nav2 a:hover {background-position: -150px -180px;}

/* Contact Us */
ul#flowershorz li#nav3 {top: 5px; left: 263px; width: 105px;}
ul#flowershorz li#nav3 a {padding-top:90px;}
ul#flowershorz li#nav3 a:hover {background-position: -263px -165px;}

/* Photo Gallery */
ul#flowershorz li#nav4 {top:38px; left: 390px; width: 70px;}
ul#flowershorz li#nav4 a {padding-top:71px;}
ul#flowershorz li#nav4 a:hover {background-position: -390px -198px;}

/* Store Locator */
ul#flowershorz li#nav5 {top:15px; left: 475px; width: 80px;}
ul#flowershorz li#nav5 a {padding-top:55px;}
ul#flowershorz li#nav5 a:hover {background-position: -475px -175px;}

/* Vertical Main Navigation */
ul#flowersvert {
  width: 170px;
  height: 460px;
  background: url(img/nav-main-vertical.png);
  margin: 0;
  margin-top: 0px;
  position: relative;
  padding:0;
  margin-left: -15px;
}

ul#flowersvert li, ul#flowersvert a {
  text-align:left;
}

ul#flowersvert li a:hover {
  background-image: url(img/nav-main-vertical.png);
}

/* About SEA SOIL */
ul#flowersvert li#nav6 {top: 2px;  left: 5px;  width: 155px; height: 74px;}
ul#flowersvert li#nav6 a {padding-top:45px;}
ul#flowersvert li#nav6  a:hover {background-position: /* -174px */ -234px -2px;}   /* -(170px + left) | -(top)   */

/* Gardening Lifestyle */
ul#flowersvert li#nav7  {top: 119px; left: 5px;   width: 97px; height: 68px;}
ul#flowersvert li#nav7 a {padding-left:90px; padding-top:33px;}
ul#flowersvert li#nav7  a:hover {background-position: -174px -119px;}

/* Contests */
ul#flowersvert li#nav8  {top: 215px; left: 10px;  width: 150px;  height: 62px}
ul#flowersvert li#nav8 a {padding-top:37px;}
ul#flowersvert li#nav8  a:hover {background-position: /* -180px */ -250px -214px;}

/* SEA SOIL FAQ */
ul#flowersvert li#nav9  {top: 300px; left: 2px;  width: 84px;  height: 60px}
ul#flowersvert li#nav9 a {padding-left:85px; padding-top:32px;}
ul#flowersvert li#nav9  a:hover {background-position: -171px -300px;}

/* Dealer Login */
ul#flowersvert li#nav10 {top: 378px; left: 20px;  width: 150px;  height: 67px}
ul#flowersvert li#nav10 a {padding-top:26px;}
ul#flowersvert li#nav10 a:hover {background-position: /* -190px */ -249px -378px;}



/* Right Column Section Navigation */
ul.sectnav {
  margin-top:0px;
  line-height:1.3em;
  list-style-type:none;
}

ul.sectnav li
{
background-image: url(img/flower-bullet.gif);
background-repeat: no-repeat;
background-position: left bottom;
background-position: -1px 3px;

padding-left: 27px;
padding-bottom: 8px;
}

/* Multi-Page Navigation Controls */

div.swcms-pagination {
  background-color:#F88B16;
  font-size:130%;
  font-weight:bold;
  padding:5px;
}
div.swcms-pagination img {
  border:0;
  margin:0;
  padding:0;
  vertical-align: middle;
}

/*--------------------------------------------------------------------------------------
DEALER LOCATOR IMAGE MAP STYLING
--------------------------------------------------------------------------------------*/

#header {
  position:relative;
  /* z-index:1; */
}

div#lmap {
  left:815px;
  margin:0;
  padding:0;
  position:absolute;
  top:0px;
  z-index:2;
}
div#lmaptitle {
  background:#f88b16;
  font-size:85%;
  font-weight:bold;
  letter-spacing:0.10em;
  line-height:1.1em;
  margin-bottom:-3px;
  margin-top:2px;
  text-align:center;
}

#mapimg {
  border:0;
  margin:0;
  margin-top:5px;
}

.mapbase { background: url('img/canada-map.gif') 0px 0px no-repeat; }
.mapbc   { background: url('img/canada-map.gif') -171px 0px no-repeat; }
.mapab   { background: url('img/canada-map.gif') -342px 0px no-repeat; }
.mapsk   { background: url('img/canada-map.gif') -513px 0px no-repeat; }
.mapmb   { background: url('img/canada-map.gif') -684px 0px no-repeat; }
.mapon   { background: url('img/canada-map.gif') -855px 0px no-repeat; }
.mapqc   { background: url('img/canada-map.gif') -1026px 0px no-repeat; }
.mapnb   { background: url('img/canada-map.gif') -1197px 0px no-repeat; }
.mappe   { background: url('img/canada-map.gif') -1368px 0px no-repeat; }
.mapns   { background: url('img/canada-map.gif') -1539px 0px no-repeat; }
.mapnf   { background: url('img/canada-map.gif') -1710px 0px no-repeat; }
.mapyt   { background: url('img/canada-map.gif') -1881px 0px no-repeat; }
.mapnt   { background: url('img/canada-map.gif') -2052px 0px no-repeat; }
.mapnu   { background: url('img/canada-map.gif') -2223px 0px no-repeat; }

/* Dealer Locator Table */
div.yesbulk {
  color:#5e9832;
  font-size:300%;
  margin:-5px 0 0 0;
  overflow:visible;
  padding:0;
  text-align:center;
}


/*--------------------------------------------------------------------------------------
CONTENT STYLING
--------------------------------------------------------------------------------------*/


.pagedeck {
  background:#c4e4ac;
  border:1px dashed silver;
  padding:15px;
}

p.footnote {
  font-size:76%;
}

p.recipeauthor {
  font-size:76%;
}

img.imgrecipe {
  float:right;
}

img.thumbrecipe {
  float:left;
  margin-right:10px;
}

ul.recipespecs {
  list-style-type:none;
  margin-left:0px;
  padding-left:0px;
}

img.staffphoto {
  float:left;
  padding-bottom:10px;
}

p.staffbio {
  margin-left:150px;
}


/* Rounded Corners */

.contbox {
  margin-top:15px;
  border:3px solid #000000;

/* 
WEJ, Nov/25/2011 03:06:01 AM:
  Case 1262
*/

  border-radius:12px;
  -moz-border-radius:12px;
  -webkit-border-radius:12px;
  -khtml-border-radius:12px;

  -moz-box-shadow: -2px 3px 6px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: -2px 3px 6px rgba(0, 0, 0, 0.4);
  box-shadow: -2px 3px 6px rgba(0, 0, 0, 0.4);

}

.contbox h1, .contbox h2, .contbox h3 {
  padding:0;
  margin:0;
  border:0;
  line-height:150%;
}

.col3 .contbox h3, .col1 .formwrap h3, div.homelinks h3 {
  background: #5e9832;
  margin: 0 -2px 10px -5px;
  padding: 3px 0;
  padding:5px;
  padding: 3px 5px 3px 5px;

  text-align:center;
  text-indent:0px;
  

/* 
WEJ, Nov/26/2011 01:48:16 PM:
  Case 1262
*/  
  
  margin:0;
  margin-bottom:5px;

  border-radius:9px;
  -moz-border-radius:9px;
  -webkit-border-radius:9px;
  -khtml-border-radius:9px;
  
}

/* IE6 needs special handling due to box model differences */

*html .col3 div.contbox {
  padding-left:0;
  padding-right:0
}


*html .col3 .contbox h3, *html div.homelinks h3 {
  width:100%;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 12px;
  margin-left: 0px;
  padding:3px 0;
  width:164px;
}

*html div.homelinks h3 {
  width:158px;
}

*html .col3 div.contbox p, *html .col3 div.contbox ul {
  padding-left:5px;
  padding-right:5px;
}

/* End IE6 special handling */

.col1 .contbox  {
  background:#cc9a5f;
  padding:10px;
}

.col2 .contbox, div#upcoming {
  background:#f88b16;
  padding:5px;
}

.col3 .contbox, .col1 .formwrap, div.homelinks {
  background:  #C4E4AC url(img/green-box-top.jpg) no-repeat fixed 0px 0px;
  padding:5px 5px 0px 5px;
  overflow:hidden;
}


.col1 .contbox.swcms-pagination {
  background-color:#F88B16;
}

.col1 .contbox.product-card.seasoil,div#prodinfo.contbox.seasoil {
  background-color:#f3f68b;
  background-color:#ffffff;
}

.col1 .contbox.product-card.ecoalt, div#prodinfo.contbox.ecoalt {
  background-color:#c4e4ac;
}

.col1 .contbox.product-card.esoils, div#prodinfo.contbox.esoils {
  background-color:#cc9a5f;
}

.col1 table.tbl, .col1 table.eyetblgrid {
  background:#f6f2c5;
  background:#c4e4ac;
  width:590px;
  margin:0;
  border:1px;
  margin-bottom:3em;
}

#dlocator {
  background:#5e9832;
  margin-bottom:3em;
}


/* Enquiry Thank You Page Heading */

h1#thanks {
  background-image:url(img/icon-lrg-green-checkmark.gif);
  background-repeat:no-repeat;
  text-indent:65px;
  line-height: 2em;
}


/* Testimonials Thumbnails */

div.testiphoto {
  display:none;
}
div.testiphoto img {
  display:block;
}
div.testiphotothumb {
  float:left;
  margin-right:15px;
  margin-top:10px;
  overflow:hidden;
  width:160px;
}
div.testiphotothumb p.photocap {
  color:#441302;
  font-size:76%;
  line-height:1.1em;
  margin-bottom:0;
  margin-top:0px;
}
p.testisig {
  clear:both;
  padding-top:10px;
}

/* Contest Thumbnails */

div.contestphoto {
  display:none;
}
div.contestphoto img {
  display:block;
}
div.contestphotothumb {
  float:left;
  margin-right:15px;
  margin-top:10px;
  overflow:hidden;
  width:275px;
}
div.contestphotothumb p.photocap {
  color:#441302;
  font-size:76%;
  line-height:1.1em;
  margin-bottom:0;
  margin-top:0px;
}

/* Contest Winner Year Selector */

form#contestyear, form#contestyear label {
  border:0;
  line-height:1.0em;
}

form#contestyear input {
  margin:0;
}

/* Top of Page Widget */
a.topofpage {
  border:0;
  color:transparent;
  margin:0;
  padding:0;
}

a.topofpage:hover {
  background:transparent;
  border:0;
  padding:0;
}

a.topofpage img {
  margin:0;
  border:0;
  padding:0;
}

/* Search Form */

form.ssform {
  border:0;
}

*html form.ssform {
  margin-left:5px;
}

/* Videos on Media Page */

div.videoBox {
  width:590px;
  text-align:center;
  margin-top:15px;
  margin-bottom:15px;
}

div.videoBox h3 {
  color: #c4e4ac;
}


/* Upcoming Events */

div#homeupcoming, div.homeupcoming {
  float:left;
  width:160px;
  width:440px;
}

div#homeupcoming p, div.homeupcoming p {
  margin:0;
  padding:0;
}


/* Content Images */

img.ssImage {
  float:left;
  margin-right:10px;
  margin-bottom:5px;
  margin-top:5px;
}

/* Gardening Lifestyle Articles */
div.anArticle.contbox p {
  margin:0 0 5px 0;
  padding:0;
}


/* Dealer Portal Content Header */
h3.dpcontent {
  color:#ffffff;
  background-color: #5E9832;
  margin:0 0 5px 0;
  text-align:center;
  font-size:90%;
}


/* 
WEJ, Nov/26/2011 01:21:27 PM:
  Case 1262
*/

.holygrail .col2 {
  width:150px;
}

.holygrail .col1pad {
  margin: 0 0 0 370px;
}

.col1 .contbox {
  margin-left: 6px;
  margin-right: 5px;
}

.col3 .contbox {
  margin-left: 6px;
  margin-right: 10px;
}

.holygrail .col3 {
  left:0;
  width:200px;
}