@import "reset.css";
@import "defaults.css";

/****************************************************
  FOUNDATIONS: Base Containers  
****************************************************/
html {
  font-family: Arial, Verdana, Sans-Serif;
}

body {
  color: #333;
  font-size: 12px;
  text-align: center;
}

#comfort-zone {
  width: 970px;
  padding: 0 0 0 0; 
  margin: 0 auto;
  text-align: left;
  overflow: hidden;
  background: url(../images/backgrounds/content-zone.gif) left repeat-y;
}

/****************************************************
  HEADER
****************************************************/
#header {
  height: 287px;
  background: url(../images/headers/default.jpg) no-repeat;
}

#logo span { display: none; }

#logo a {
  display: block;
  height: 110px;
  width: 290px;
  position: absolute;
}

/****************************************************
  HEADER: MAIN NAV
****************************************************/
#main-nav {
  margin: 30px 0 0 0; padding: 0;
  float: right;
  text-align: right;
}
#main-nav li {
  display: inline;
  font-size: 14px;
  line-height: 17px;
  margin: 0 0 0 10px;
  padding: 0 13px 0 0;
  text-transform: lowercase;
  background: url(../images/backgrounds/head-nav-div.gif) right no-repeat;
}
#main-nav li.last {
  background: none;
  padding-right: 30px;
}
#main-nav li a {
  color: #fff;
  text-decoration: none;
}
#main-nav li a:hover {
  text-decoration: underline;
}

/****************************************************
  CONTENT ZONE
****************************************************/
#content-zone {
  clear: both;
  padding-bottom: 10px;
}

/****************************************************
  MAIN CONTENT
****************************************************/
#main-content { 
  float: right;
  width: 660px;
}

#main-content h1 {
  color: #71c043;
  font-size: 25px;
  margin-bottom: 15px;
  text-transform: lowercase;
}
#main-content h2 {
  font-size: 12px;
  font-weight: bold;
  color: #71c043;
  margin: 25px 0 15px 0;
  text-transform: uppercase;
}

#main-content p,
#main-content li {
  font-size: 12px;
  line-height: 14px;
}
#main-content li {
  margin-bottom: 10px;
}
#main-content p.abstract {
  font-size: 15px;
  line-height: 17px;
}

/****************************************************
  MAIN CONTENT: Containers
****************************************************/
#main-content div#content-box-full {
  width: 615px;
}
#main-content div#content-box {
  width: 365px;
  float: left;
}
#main-content div#touts {
  float: right;
  width: 100px;
  width: 260px;
}

/****************************************************
  MAIN CONTENT: Touts
****************************************************/
#main-content div.tout-wrap {
  margin-bottom: 12px;
  background: url(../images/backgrounds/main-content-tout-sliding.gif) bottom no-repeat;
}
#main-content div.tout {
  padding: 0 12px 12px 12px;
  font-family: Verdana, Sans-Serif;
  background: url(../images/backgrounds/main-content-tout-top.gif) top no-repeat;
}

#main-content div.tout h4 {
  display: block;
  margin: 0 0 10px 0;
  padding: 14px 0 3px 0;
  color: #f36423;
  font-size: 16px;
  border-bottom: 1px solid #119f49;
  text-transform: lowercase;
  text-decoration: none;
  background: url(../images/backgrounds/touts/heading-default.gif) bottom right no-repeat;
}
#main-content div.tout h4.products {
  background: url(../images/backgrounds/touts/heading-hortico-products.gif) bottom right no-repeat;
}
#main-content div.tout h4.tips {
  background: url(../images/backgrounds/touts/heading-hortico-tips.gif) bottom right no-repeat;
}
#main-content div.tout h4.stores {
  background: url(../images/backgrounds/touts/heading-bunnings-stores.gif) bottom right no-repeat;
}

#main-content div.tout p {
  font-size: 11px;
  line-height: 13px;
  float: left;
  width: 130px;
  margin: 0 0 0 0;
}
#main-content div.tout p a span { display: none; }
#main-content div.tout p.more {
  float: right;
  margin: 10px 0 0 0;
  height: 26px;
  width: 87px;
  background: url(../images/buttons/main-content-click-here.gif) 0 0 no-repeat;
}
#main-content div.tout p.more a {
  display: block;
  height: 26px;
  width: 87px;
}
#main-content div.tout p.more a:hover {
  background: url(../images/buttons/main-content-click-here.gif) 0 -26px no-repeat;  
}

/****************************************************
  SIDEBAR
****************************************************/
#sidebar {
  float: left;
  width: 282px;
  color: #fff;
  overflow: hidden;
}
#sidebar h4 {
  margin-bottom: 10px;
}
#sidebar h4 a {
  color: #feffff;
}
#sidebar p {
  font-size: 12px;
  line-height: 14px;
}
#sidebar a {
  color: #333;
  text-decoration: none;
}
#sidebar a:hover,
#sidebar h4 a:hover {
  color: #dae1d7;
  text-decoration: none !important;
}

/****************************************************
  SIDEBAR: Touts
****************************************************/
#sidebar div.tout-wrap {
  width: 259px;
  margin-left: 11px;
  margin-bottom: 12px;
  background: url(../images/backgrounds/sidebar-tout-sliding.gif) bottom no-repeat;
}
#sidebar div.tout {
  padding: 0 12px 12px 12px;
  font-family: Verdana, Sans-Serif;
  background: url(../images/backgrounds/sidebar-tout-top.gif) top no-repeat;
}

#sidebar div.tout h4 {
  display: block;
  margin: 0 0 10px 0;
  padding: 14px 0 3px 0;
  color: #f36423;
  font-size: 16px;
  border-bottom: 1px solid #119f49;
  text-transform: lowercase;
  text-decoration: none;
  background: url(../images/backgrounds/touts/heading-default.gif) bottom right no-repeat;
}
#sidebar div.tout h4.products {
  background: url(../images/backgrounds/touts/heading-hortico-products.gif) bottom right no-repeat;
}
#sidebar div.tout h4.tips {
  background: url(../images/backgrounds/touts/heading-hortico-tips.gif) bottom right no-repeat;
}
#sidebar div.tout h4.stores {
  background: url(../images/backgrounds/touts/heading-bunnings-stores.gif) bottom right no-repeat;
}
#sidebar div.tout p {
  font-size: 11px;
  line-height: 13px;
  float: left;
  width: 130px;
  margin: 0 0 0 0;
  color: #231f20;
}
#sidebar div.tout p a span { display: none; }
#sidebar div.tout p.more {
  float: right;
  margin: 10px 0 0 0;
  height: 26px;
  width: 87px;
  background: url(../images/buttons/main-content-click-here.gif) 0 0 no-repeat;
}
#sidebar div.tout p.more a {
  display: block;
  height: 26px;
  width: 87px;
}
#sidebar div.tout p.more a:hover {
  background: url(../images/buttons/main-content-click-here.gif) 0 -26px no-repeat;  
}

/****************************************************
  SIDEBAR: Product of the Month
****************************************************/
#sidebar div.product-of-the-month {
  margin-bottom: 30px;
}
#sidebar div.product-of-the-month h3 {
  height: 36px;
  background: url(../images/headings/sidebar-product-of-the-month.gif) 0 0 no-repeat;
}
#sidebar div.product-of-the-month h3 a {
  display: block;
  height: 36px;
}
#sidebar div.product-of-the-month a span {
  display: none;
}

#sidebar div.product-of-the-month div.content {
  padding: 0 15px 0 135px;
}
#sidebar div.product-of-the-month img {
  float: left;
  margin-left: 10px;
}
#sidebar div.product-of-the-month div.content p.more {
  height: 26px;
  width: 87px;
  background: url(../images/buttons/sidebar-click-here.gif) 0 0 no-repeat;
}
#sidebar div.product-of-the-month div.content p.more a {
  display: block;
  height: 26px;
  width: 87px;
}
#sidebar div.product-of-the-month div.content p.more a:hover {
  background: url(../images/buttons/sidebar-click-here.gif) 0 -26px no-repeat;
}

/****************************************************
  SIDEBAR: Garden Diary
****************************************************/
#sidebar div.garden-diary {
  height: 170px;
  min-height: 175px;
  margin: 25px 0 0 0;
  color: #010302;
  background: #abd299 url(../images/backgrounds/sidebar-garden-diary.gif) 0 37px no-repeat;
}
#sidebar div.garden-diary a span {
  display: none;
}
#sidebar div.garden-diary h3 {
  height: 37px;
  background: url(../images/headings/sidebar-garden-diary.gif) 0 0 no-repeat;
}
#sidebar div.garden-diary h3 a {
  display: block;
  height: 37px;
}
#sidebar div.garden-diary div.content {
  padding-left: 135px;
  padding-right: 15px;
}
#sidebar div.garden-diary div.content p.more {
  height: 26px;
  width: 87px;
  background: url(../images/buttons/sidebar-view-here-bg-lg.gif) 0 0 no-repeat;
}
#sidebar div.garden-diary div.content p.more a {
  display: block;
  height: 26px;
  width: 87px;
}
#sidebar div.garden-diary div.content p.more a:hover {
  background: url(../images/buttons/sidebar-view-here-bg-lg.gif) 0 -26px no-repeat;
}


/****************************************************
  FOOTER
****************************************************/
#footer {
  clear: both;
  background: #efa220;
}

#foot-nav {
  margin: 0 0 0 12px;
  padding: 10px 0 0 0;
  height: 23px;
}
#foot-nav li { 
  display: inline;
  font-size: 12px;
  margin-left: 10px;
  padding-right: 10px;
  background: url(../images/backgrounds/foot-nav-div.gif) right no-repeat;
}
#foot-nav li.last {
  background: none;
}
#foot-nav li a {
  color: #fff;
  text-decoration: none;
}
#foot-nav li a:hover {
  text-decoration: underline;
}


/****************************************************
  MISC CLASSES
****************************************************/
.clear { clear: both; }

#page-tips h1 {
  padding: 15px 0 15px 75px;
  background: url(../images/backgrounds/heading-tips.jpg) left no-repeat;
}
.section-garden-diary h1 {
  padding: 15px 0 15px 95px;
  background: url(../images/backgrounds/heading-garden-diary.jpg) left no-repeat;
}