/*
|----------------------------------------------------------------------------------------|
| SUPERAWESOME CSS FRAMEWORK - EMBEDDABLE STYLE SHEET                             | v1.1 |
|----------------------------------------------------------------------------------------|
| AUTHOR: Dragan Babic | http://sprawsm.com/                                             |
|----------------------------------------------------------------------------------------|
| DATE MODIFIED: Sat, 24 Oct 09                                                          |
|----------------------------------------------------------------------------------------|
| ABOUT:                                                                                 |
|----------------------------------------------------------------------------------------|
| Use this style sheet for all your site's styles and to override existing ones set by   |
| the framework if you wish to upgrade to a newer version at some point. This is the     |
| style sheet you should embed in your HTML page.                                        |
|----------------------------------------------------------------------------------------|
*/

@import "scf.typography.css";
@import "scf.layout.css";
@import "scf.extras.css";

/* !Generals */

html{ background: #d0d2c2 url(../images/layout/main-bg.jpg); }
  body{ font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; }
    #content{ width: 982px; position: relative; background: #fff; border: 1px solid #ccc; }
      #mainContent{ margin: 9px; border: 1px solid #ddd; background: #fff url(../images/layout/menu-bg.png) 0 0 repeat-y; }

p{ margin: 1em 0; }

/* !Global Float Clearing */

#header:after,
#content:after,
#mainContent:after,
.article:after,
.article .body:after,
.pagination:after{ content: "."; display: block; height: 0; line-height: 0; font-size: 0; clear: both; min-height: 0; visibility: hidden; }

/* !Link Colors */

a:link   { color: #2b5274; text-decoration: none; }
a:visited{ color: #1d506e; text-decoration: none; }
a:hover  { text-decoration: underline; }
a:focus  {}
a:active {}

/* !Headings */

h1{ font-size: 28px; font-weight: normal; color: #47811e; margin: 36px 0 0 0; line-height: 1; letter-spacing: -1px; }
.centered h1{ font-size: 18px; margin-bottom: 28px; }

h2{ margin: 1.5em 0 .5em 0; font: bold 16px "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; }

h3{}

#secondary h3{}

h4{}

/* !Header */

#header{ width: 982px; margin: 14px auto; position: relative; }
  
  #branding{ float: left; margin: 0 28px 0 0; }
    #branding a,
      #branding img{ display: block; }
  
  .tagline{ float: left; margin: 0 28px 0 0; padding: 8px 0 8px 28px; border-left: 1px solid #8aa670; color: #3b7214; font-family: Georgia, Times New Roman, Times, serif; }
    .tagline p{ margin: 0; line-height: 1.4; }
  
  .toggleLang{ position: absolute; bottom: 22px; right: 0; padding: 6px 14px; color: #fff !important; background: #2b5274; font-size: 9px;
               border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -khtml-border-radius: 6px; -o-border-radius: 6px;
             }
  .toggleLang:hover { background: #3e698e; text-decoration: none; }           
      
/* !Footer */

#footer{ width: 982px; margin: 28px auto; font-size: 11px; color: #728789; text-align: center; }

/* !Main Content */

#mainContent{}
#unsubscribe #mainContent,
#odjava #mainContent{ background: #fff; }  

  /* The Layout of the Menu is contained within ../js/SimplejQueryDropdowns/css/style.css */
  
  #menu{ background: url(../images/layout/top-menu-bg.png) 0 0 no-repeat; height: 41px; line-height: 41px; }
    #menu ul{ margin: 0; text-transform: uppercase; font-size: 11px; margin: 0 0 0 7px; color: #fff; }
      #menu li{ margin: 0; float: left; cursor: default; text-shadow: -1px -1px 1px rgba(0,0,0,.25); }
      #menu li.hover{ background: #c6711b; text-shadow: none; }
        #menu li.hover a:link,
        #menu li.hover a:visited,
        #menu li.hover a:active{ color: #343434; text-shadow: none; }
        #menu li a{ color: #fff !important; }
        #menu li a:hover{ text-decoration: none !important; }
      
      #menu ul ul{ background: #fff; border: 1px solid #ccc; border-width: 1px 1px 0 1px; text-transform: none; font-size: 11px; }
        #menu ul ul li{ color: #343434; border-bottom: 1px solid #dfdfdf; text-shadow: none; }
        #menu ul ul li.hover{ background: #eee; }
          #menu ul ul li a{ color: #343434 !important; }
        
        #menu ul ul ul{ background: #eee; border-top-width: 1px; }
          #menu ul ul li.hover{ background: #dfdfdf; }
            #menu ul ul li{ border-color: #ccc; }
  
  #nav{ margin-left: 0; width: 155px; }
    #nav ul,
    #nav li{ margin: 0; }
    #nav li{ border-bottom: 1px solid #ddd; line-height: 1; }
      #nav li a{ display: block; padding: 20px 10px 20px 20px; font-size: 11px; }
      #nav li a:link,
      #nav li a:visited{ color: #aaa; font-weight: bold; text-decoration: none;
                         text-shadow: 1px 1px 0 rgba(255,255,255,1);
                       }
        #nav li small{ display: block; margin: 4px 0 0 0; font-size: 10px; color: #aaa; font-weight: normal; }
      /* Hover */
      #nav li a:hover{ color: #343434; }
        #nav li a:hover small{ color: #343434; }
    /* Active item */
    #nav li.active{ background: #fff; }
      #nav li.active a{ color: #343434 !important; }
        #nav li.active a small{ color: #343434 !important; }
  
    p.CTA{ margin: 1.5em 0; }
      .CTA a{ display: block; padding: 10px 14px; background: #47811e; font-size: 11px; line-height: 1; letter-spacing: 2px; text-transform: uppercase; text-align: center; 
              border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px;
            }
        .CTA a span{ text-transform: none; font-style: italic; }
      .CTA a:link,
      .CTA a:visited{ color: #fff; text-shadow: -1px -1px 1px rgba(0,0,0,.25); }
      .CTA a:hover{ text-decoration: none; background: #3b7015; }
  
  #primary  { font-family: Georgia, Times New Roman, Times, serif; margin-bottom: 28px; }
  
  #default #primary{ border-bottom: 10px solid #efefef; }
  
  .inner #primary{ font-size: 15px; }
  
  .inner #primary ol,
  .inner #primary ul { margin: 1em 0 1.5em 0; border-top: 1px solid #ddd; }
  
  .inner #primary ol li{ border-bottom: 1px solid #ddd; list-style-type: decimal; padding: 9px 0; } 
  .inner #primary ul li{ border-bottom: 1px solid #ddd; background: transparent url(../images/layout/bullet.png) no-repeat 0 13px; padding: 9px 0 9px 20px; }
  .inner #primary h3{ font: bold 16px "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; margin-bottom: 0; }
    
    #info{ font-size: 11px; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; background: #bfdfa0 url(../images/layout/info-bg.png) 0 100% no-repeat; padding-bottom: 391px; }
      #info p{ margin: 2em 21px; line-height: 1.75; }
      #info .CTA a{ font-weight: bold; font-size: 16px; letter-spacing: 0; text-transform: none; }
      #info .CTA a:hover { background: #3b7015; }
          
    .articles{}
    
    .article{ margin: 21px 0; font-size: 13px; line-height: 1.6; }
      .article .header{}
        .articleImage img{ float: left; margin: 0 1em 0 0; }
        #default .article .articleImage img{ float: none; display: block; margin: 0 0 1em 0; width: auto !important; }
        .article .header h3{ margin: 0; font-size: 16px; line-height: 1.4; margin-bottom: 3px; }
          .article .header h3 a{ color: #000 !important; }
      .article .body{}
        .article .date{ float: left; margin: 3px 4px 0 0; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; font-size: 10px; text-transform: uppercase; color: #467900; letter-spacing: 1px; }
      .article .footer{ }
      .inner .article .footer{ font-size: 12px; font-style: italic; color: #777; padding: 4px 0; border: 1px solid #dfdfdf; border-width: 1px 0; }
      
      .inner .article{ font-size: 15px; border-bottom:1px solid #ddd; padding-bottom: .75em; }
      .inner .article .header h2{ margin: 1.5em 0 0 0; font: bold 16px "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; }
        .inner .article .header h2 a { color: #343434; }
      .inner .article .date{ margin: 2px 4px 0 0; font-size: 12px; }
      
    #default .article p{ margin: 0; }
    
    #default .pinned{ width: 284px; padding: 12px; border: 1px solid #ddd; margin-left: -13px; }
        #default .pinned .header h3{ font-size: 20px; line-height: 1.25; }
    
    .latest{ position: relative; }
    .latest .desc{ position: absolute; z-index: 10; top: 34px; left: 0; margin: 0; padding: 8px 12px; line-height: 1; background: #2b5274; color: #fff; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; text-shadow: -1px -1px 1px rgba(0,0,0,.25); }
    
    #startWithOrganic{ background: #eee url(../images/icons/carrot.png) 196px 21px no-repeat; border: 1px solid #ddd; width: 282px; margin-bottom: 28px; padding: 14px 0; }
      #startWithOrganic h3,
      #startWithOrganic p{ margin: .25em 82px .25em 21px; }
      #startWithOrganic h3{ font-size: 16px; }
      #startWithOrganic p{ font-family: Georgia, Times New Roman, Times, serif; line-height: 1.75; margin-bottom: 1em; }
      #startWithOrganic p.CTA{ margin-right: 130px; }
        #startWithOrganic p.CTA a{ background: #fff; border: 1px solid #ccc; color: #343434 !important; text-shadow: none; text-transform: none; font: normal normal 1em/1 "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; letter-spacing: 0; }
        #startWithOrganic p.CTA a:hover{ background: #ddd; }
        
    .infoBox{ margin-bottom: 28px !important; border-bottom: 10px solid #efefef; font-family: Georgia, Times New Roman, Times, serif; }
    .infoBox.areYouAnOrganicConsumer{ background: url(../images/icons/groceries.png) 100% 100% no-repeat; }
    .infoBox.training{ background: url(../images/icons/book.png) 100% 0 no-repeat; }
      .infoBox h3{ margin: 0; font-size: 16px; }
      .infoBox p{ margin: 0 120px 1em 0; }
        
        .more{ }
    
    .pagination{ margin: 28px 0; font-size: 24px; line-height: 1; }
      .newer{ float: left;  }
      .older{ float: right; }
  
  #secondary{ margin-bottom: 28px; }
    
  .inner #secondary{ background: #eee; margin-top: 36px; font-size: 12px; }
  
    #secondary h2.section{ margin: 0; padding: 11px 21px; background: #655647; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: #fff; font-weight: normal; }
    
    #secondary dl{ margin: 0; font-size: 11px; padding-bottom: 21px; border-bottom: 1px solid #ddd; }
      #secondary dt{ text-transform: uppercase; color: #555; margin: 21px 0 7px 0; padding: 0 0 0 21px; letter-spacing: 1px; }
      #secondary dt.first{ margin-top: 0; }
      #secondary dd{ margin: 0; }
        #secondary dd a{ display: block; padding: 6px 21px; }
        #secondary dd a:hover{ background: #dfdfdf; text-decoration: none; }
        /* Active State */
        #secondary dd.active a{ background: #c4e2b5 url(../images/layout/subnav-active.png) 0 50% no-repeat !important; padding-left: 28px; margin-left: -7px; position: relative; z-index: 1; color: #343434; }
        
    
    .inner #secondary ul{ margin: 21px 0; font-size:11px; }
      #secondary ul li{ margin: 0; }
        #secondary ul li a{ display: block; padding: 7px 21px; }
        #secondary ul li a:hover{ background: #dfdfdf; text-decoration: none; }
        /* Active State */
        #secondary ul li.active > a{ background: #c4e2b5 url(../images/layout/subnav-active.png) 0 50% no-repeat; padding-left: 28px; margin-left: -7px; position: relative; z-index: 1; color: #343434; }
      
      .inner #secondary ul#categoryMenu ul{ margin: 7px 0; }
        .inner #secondary ul#categoryMenu li{ text-indent: 21px; border-bottom: 1px solid #ddd; text-transform: uppercase; }
          .inner #secondary ul#categoryMenu li span{ display:block; margin: 12px 0 -3px 0; }
          .inner #secondary ul#categoryMenu li a{ padding: 7px 0; }
            .inner #secondary ul#categoryMenu li li{ border: none; text-transform: none; letter-spacing: 0; }
            .inner #secondary ul#categoryMenu li li a{ padding-left: 7px; }
          .inner #secondary ul#categoryMenu li.active > a{ padding-left: 28px; text-indent: 0; }
/*
        .inner #secondary ul#categoryMenu li.active a{ background: transparent; padding-left: 21px; margin-left: 0; }
          #secondary ul#categoryMenu li.active li.active a{ background: #c4e2b5 url(../images/layout/subnav-active.png) 0 50% no-repeat !important; padding-left: 28px; margin-left: -7px; position: relative; z-index: 1; color: #343434; }
*/
    .inner #secondary p{ margin: 0 0 21px 0; padding: 21px 21px 0 21px; border-top: 1px solid #ddd; font-size: 11px; }
      .inner #secondary p.CTA{ border: none; padding: 0 21px 28px 21px; }
    .inner #secondary h2.feed{ background: #655647 url(../images/icons/feed.png) no-repeat 95% 50%; }
    .inner #secondary .feedLink{ border: none; }
    .inner #secondary h2.archive{ background: #eee url(../images/icons/archive.png) no-repeat 95% 50%; color: #343434; border-top:1px solid #ddd; }
    
    
/**/

div.uniForm{ margin: 28px 0; padding: 21px; background: #eee;
             border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px;
           }
  .uniForm label{ margin-bottom: 0 !important; }
  .uniForm input.zemText,
  .uniForm textarea.zemTextarea{ width: 370px; padding: 4px; border: 1px solid #ccc; }
  .zemThanks{}
  .zemCheckbox{ float: left; margin: 3px 4px 0 0; }
  
  
.gallery{}
  .inner .article.gallery{ border: none; }
  .inner #primary .gallery h2{ font: 13px Georgia; margin: 0 0 1.5em 0; line-height: 1.25; font-weight: normal; }
  .galleryDesc{ font-size: 13px; }
    .galleryDesc h1{ margin: 1em 0; font-size: 16px; font-weight: bold; color: #343434; }
    .galleryDesc p.more{ padding-top: 12px; border-top: 1px solid #dfdfdf; }
  .gallery .body{ width: 468px; }
  .gallery ul{}
    .inner #primary .gallery ul{ border: none; }
    .inner #primary .gallery li{ float: left; margin: 0 0 28px 28px; background: none; padding: 0; border-bottom: none; }
    
    
table {	font-size: 13px; border-collapse: collapse; width: 100%; margin: 1em 0; }

thead { text-align: left; background: transparent url(../images/layout/top-menu-bg.png); font: bold 12px "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; padding: 8px 6px; color: #fff; }

tr td { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 6px; }

td { border-bottom: 1px solid #ddd; padding: 0 0.5em; }

blockquote{ margin: 40px 20px; border: 3px solid #447f1d; }
blockquote p{ text-align: center; padding: 15px 20px; background: #447f1d url(../images/layout/top-menu-bg.png); font: bold 18px/1.6 "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;; margin: 3px; color: #fff; }

#error404{ margin: 0 auto; width: 600px; text-align: center; }
  #error404 p{ margin-top: 30px; }
  .errorMessage{ background: transparent url(../images/layout/404.png) no-repeat 50% 100%; height: 340px; }
    .errorMessage h1{ font: bold italic 130px/67% Georgia, sans-serif; color: #343434; text-align: center;  }
      .errorMessage h1 span{ display: block; font-size: 48px; font-weight: normal; }