/*
  application.css
  classicsalads

  Created by [creator] on Mar 08, 2012.
  Copyright 2012 Full Steam Marketing & Design. All rights reserved.

  First we import the tripoli style sheets for better defaults for all browers. IE is added
  with a conditional stylesheet on the layout page.

  Next we add the structure stylesheet for grid based layout. It can accomodate 12 and
  16 column layouts. It has the base rules for groups, columns, and left and right floats.

  The dev.css is development rules for us during development. It should be removed along with
  the dev directory after the site is finished.

  Next we set the rules we would like to override for this website. They should fall in the
  .content space to ensure proper scoping.

  Now we set the main structure for this site. Anything specific should go in this document,
  working from top to bottom, generic to specific including text, color and modifications to
  structure as necessary.
*/

/*  Import Default Rules
----------------------------------------------- */
@import url(tripoli.simple.css);
/*@import url(h5bp-normalize.css);*/
@import url(structure.css);
@import url(http://fonts.googleapis.com/css?family=Bitter:700);

/*  Set Content Defaults
----------------------------------------------- */
html {background-color:transparent}
body,
.content { font:16px/26px Arial, Helvetica, sans-serif; }

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { /* set header defaults */
/*  letter-spacing: -0.02em;
  font-weight: normal;
  color: #000;*/
}
.content ul, .content ol { /* I like the list indents to be tighter */
  margin-left: 1.6em;
}
.content img.left {
  float: left;
  margin: .4em 1.6em .4em 0;
}
.content img.right {
  float: right;
  margin: .4em 0 .4em 1.6em;
}


/*  Start site specific structure
----------------------------------------------- */
#wrapper {
  width: 960px;
  margin: 0 auto;
}


/* ===== Primary Styles ========================================================
   Author: Nathan Hyde <nathan@fullsteam.com> - Full Steam Marketing & Design
================================================================================ */
nav a{
  display:block;
  margin-bottom:10px;
  padding:15px 0;
  color:#fff;
  text-align:center;
  text-decoration:none;
}

nav a:link, a:hover, nav a:visited {
  color:#fff;
}

nav a:hover{
  color:#f0b310;
}

#main{
  padding:30px 0;
}

#main article h1{
  font-size:2.5em;
}

/*#main aside{
  color:white;
  padding:0px 5% 10px;
}*/

#footer-container footer{
  padding:14px 0;
}

/*.ie7 #title{ padding-top:20px; }*/

body {
  background-color:transparent;
  color:#fff;
}
a {
  color:#89786d;
  text-decoration:none;
}

/*#footer-container{ border-top:    11px solid #501000; }*/

::-moz-selection { background: #A88880; color: #fff; text-shadow: none; }
::selection      { background: #A88880; color: #fff; text-shadow: none; }

#title a, #title a:link, #title a:hover,
#main h1,
.home-page .pane h4 {
  font-family:Bitter,Georgia,serif;
  font-weight:bold;
}
#main h1 {
  margin-bottom:0;
}
#title a, #title a:link, #title a:hover, #main h1 { color:#f0b310; }
#title a:hover { text-decoration:underline; }

#title a,
.home-page a.control { outline:0 }

nav,
.home-page #panes-container,
#footer-container footer,
#footer-contact-details {
  font-family:Bitter,Georgia,serif;
  font-weight:normal;
}

nav,
.home-page #panes-wrapper {
  background-color:#501000;
}

#footer-container footer,
#copyright {
  color:#89786d;
}
footer {
  font-size: 0.75em;
}
footer ul {
  float:left;
  margin:0;
  padding:0;
}
#footer-container footer a,
#footer-container footer a:link,
#footer-container footer a:visited {
  text-decoration:none;
  color:#89786d;
}

#footer-container footer div a.heading {
  color:#f0b310;
  font-size:1.18em;
  text-transform:uppercase;
  margin-bottom:3px;
}

#footer-contact-details {
  color:#fff;
/*  width:150px;*/
}
#footer-contact-details p { margin-top:0 }
#footer-contact-details span.larger {
  font-size:1.36em;
}

#copyright {
  font-family:Arial,Helvetica,sans-serif;
  width:97%;
  font-size:0.9em;
  float:left;
}
#copyright p {
  float:left;
  margin-bottom:0;
  margin-top:0;
  /*margin-left: 0.5em;*/
}

/* Home Page
----------------------------------------------- */
.home-page #panes-wrapper,
.home-page #panes-container {
  -moz-border-radius:15px;
  -webkit-border-radius:15px;
  border-radius:15px;
}

.home-page #panes-wrapper {
  padding:3px;
  font-family:Bitter,Georgia,serif;
}
.home-page #panes-container {
  margin: 0 auto;
  border: 1px solid #683b2d;
}

.home-page #panes h2,
.home-page #panes h3,
.home-page #panes h4 {
  margin:0;
}

.home-page #panes-container .control { display:none; }

.home-page #panes .pane h3 {
  text-transform:uppercase;
  font-size:0.93em; /* 12px/16.0 - 0.025 */
  font-weight:normal;
}
.home-page .pane h4 {
  font-size:1em;
  line-height:1em;
}
.home-page .pane h4 a {
  color:#fff;
  font-family:inherit;
  text-transform:none;
}
.home-page .pane p,
.home-page .pane ul {
  font-size:0.6625em; /* 11px/16.0 - 0.025 */
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.4em;
}
.home-page .pane p {
  margin-top:0.5em;
  width:90%;
}
.home-page .pane h3,
.home-page .pane a {
  color:#89786d;
}
.home-page .pane a {
  text-transform:uppercase;
}
.home-page .pane a.more {
  font-family:Arial,Helvetica,sans-serif;
}
.home-page .no-margin {
  padding:0;margin:0;
}

.home-page #below-panes p {
  width:25%; /* .one-fourth */
  float:right;
}

/*@media only screen and (min-width:280px) {*/
  #title { text-align:center }

  footer a {
    font-size: 1em;
    text-align:center;
  }
  footer a.footer-item-menu {
    display:block;
    padding: 0;
  }
  #footer-container .heading {

  }
  footer ul {
    float:none;
    border-bottom: 1px solid #3C0C00;
    margin-bottom: 20px;
  }
  footer ul li {
    display: inline;
  }
  footer ul li a {
    padding:15px 2%;
  }
  #footer-contact-details {
    margin: 0 auto;
  }

/*}*/


/*@media only screen and (min-width: 480px) {*/
  nav a {
    float:left;
/*    width:27%;*/
    height:1em;
    margin:0 1.7%;
    padding:7px 2% 11px;
    margin-bottom:0;
  }

  nav li:first-child a { margin-left:0;  }
  nav li:last-child  a { margin-right:0; }

  #footer-contact-details {
    border:none;
  }
/*}*/

/*@media only screen and (min-width: 768px) {*/
  #title {
    float:left;
    display:block;
    text-indent:-9999px;
    width:210px;
    height:121px;
    margin-top:32px;
    margin-left:12px;
    z-index:10000;
    position:relative;
    top:0;
  }
  #title a {
    float:left;
    display:block;
    width:210px;
    height:121px;
    overflow:hidden;
    /*position: absolute;*/
    z-index: 2000;
  }

  nav {
    float:left;
    width:735px;
    clear:none;
  }
  nav ul {
    width: 100%;
  }
  nav li {
    float:left;
    width:100px;
  }
  nav li a {
    width: 100%;
    padding:5px 1.25%;
    margin:0 auto;
    font-size:1.12em;
  }




  nav li.navigation li a {
    display:block;
  }
  nav ul.navigation li {
    display:block;
    float:left;
  }

  nav ul.navigation li ul {
    position:absolute;
    margin:0;
    padding:0;
    display:none;
    line-height:2.133333333333333em; /* 32px / 15px */
  }
  nav ul.navigation li.sub:hover ul {
    display:block;
    margin-top:29px;
    margin-left:-35px;
    z-index:10000;
    position:absolute;
  }
  nav ul.navigation li ul li {
    float:none;
    border-bottom:none;
    min-width:160px;
    *max-width:160px;
    *margin-bottom:-3px;
  }
  nav ul.navigation li ul li a {
    font-size:0.933333333333333em; /* 14px / 15px */
    line-height:2.133333333333333em; /* 32px / 15px */
    text-transform:none;
    padding:3px 20px;
    background-color:#501000;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    /* IE 5-7 */
    filter: alpha(opacity=80);
    /* Netscape */
    -moz-opacity: 0.8;
    /* Safari 1.x */
    -khtml-opacity: 0.8;
    /* Good browsers */
    opacity: 0.8;
    border-bottom: 1px dashed #7b5d4f;
    display:block;
    height:30px;
  }
  nav ul.navigation li ul li a:hover {
    color:#f2b400;

    background-color:#501000;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=9)";
    /* IE 5-7 */
    filter: alpha(opacity=90);
    /* Netscape */
    -moz-opacity: 0.9;
    /* Safari 1.x */
    -khtml-opacity: 0.9;
    /* Good browsers */
    opacity: 0.9;
  }
  nav ul.navigation li.sub ul li + li a:hover {
    margin-top:0;
  }
  nav ul.navigation li.sub ul li.sub ul {
    position: relative;
    left: -100%;
    top: -33px;
    display: none;
  }
  nav ul.navigation li.sub li.sub:hover ul { /* tertiary flyout nav */
    display: block;
    border-top:0;
  }




  #calendar-banner {
    display:none;
  }
  .home-page #calendar-banner {
    display:block;
    width:220px;
    height:52px;
    overflow:hidden;
    float:right;
    margin-top:20px;
    z-index:5;
    position:relative;
  }
  .home-page #calendar-banner a {
    display:block;
    width:220px;
    height:52px;
    text-indent:-9999px;
  }
  footer div a {
    text-align: left;
  }

  #main article{
    float:left;
    width:57%;
  }
  .article a,
  ul.recipe-listing li a {
    color:#357521;
    border-bottom:1px dotted #357521;
  }
  #main aside{
    float:right;
    width:28%;
  }
  .aside {
    position:relative;
    z-index:1; /* was 1000 */
    margin-right:15px;
    display:inline;
  }
  #footer-container footer ul {
    float:left;
    width: 13.5%;
    height: 180px;
  }
  #footer-container .entire {
    width:100%;
  }

  /* Page specific styles */
  .home-page #main article {
    width: 100%;
  }
  .home-page #main article header {
    width:42%;
    display:block;
  }

  .home-page #panes-wrapper,
  .home-page #panes-container,
  .home-page #panes {
    float:left
  }
  .home-page #panes .pane {
    width:32%;
    float:left;
  }
  .home-page #panes div {
    float:left;
  }
  .home-page #panes-wrapper .control {
    float:left;
    display:block;
    width:12px;
    overflow: hidden;
    text-indent:-9999px;
    background:transparent url('design/carousel-arrows.gif') no-repeat 0 65px;
    height: 185px;
    margin-top:14px;
    margin-right:12px;
  }
  .home-page #panes-wrapper .control.right-control {
    background-position: -14px 65px;
    margin-right:0;
    margin-left:5px;
  }
  .home-page .pane div {
    padding-left:110px; /* 101 + 9px padding */
    background:transparent url('design/pane-qr-code.jpg') no-repeat 0 0;
    float:right;
    height:157px;
  }
  .home-page #pane-whats-new div {
    background-image: url('design/pane-qr-code.jpg');
  }
  .home-page #pane-featured-recipe div {
    background-image: url('design/pane-lemon-caesar-salad.jpg');
  }
  .home-page #pane-new-products div {
    background-image: url('design/pane-hearts-of-romaine.jpg');
  }
  .home-page #pane-upcoming div {
    background-image: url('design/pane-fresh-summit.jpg');
  }

/* } */

/* @media only screen and (min-width: 940px) { */
  body {
    color: #4c3312;
    font-size: 18px;
    font-family:Arial, Helvetica, sans-serif;
    background:#211c13 url('design/background.jpg') no-repeat 50% 0;
    margin:0;
    padding:0;
  }
  #wrapper-container {
    margin:0 auto;
  }
  .home-page #wrapper {
    /* background:transparent url('design/home-content-background-middle.jpg') no-repeat 0 78px; */
    background:transparent url('design/home-content-background-middle-pma-fresh-summit.jpg') no-repeat 0 78px;
  }
  #wrapper {
    /*background:transparent url('design/medallion.png') no-repeat 0 78px;*/
  }
  #wrapper #header {
    height:165px;
  }
  #title {
    background:transparent url('design/logo-top.png') no-repeat -2px 1px;
  }
  #body_content {
    position: relative;
  }
  #medallion {
    position: absolute;
    left: 765px;
    top: -55px;
    width: 197px;
    height: 203px;
    background: transparent url('design/medallion.png') no-repeat 0px 0;
  }
  .home-page #medallion {
    display: none;
  }
  nav {
    background-color:transparent;
    font-size:14px;
    margin-top:33px;
    padding-top:44px;
    background:transparent url('design/home-content-background-top-flourish.gif') no-repeat 625px 0;
    position: relative;
    /*left: 370px;*/
    z-index: 1000;
  }
  nav ul li {
    display:inline;
    padding-bottom:5px;
  }
  .page-title h1 {
    font-family:'Bitter',Helvetica,sans-serif;
    font-size: 40px;
    font-weight: bold;
    margin-top: 0;
    padding-left: 20px;
  }
  .one-half {
    padding-left: 10px;
  }
  div#body_content div.aside div.col p img {
    box-shadow: 4px 4px 7px #888888;
  }

  #main-container {
/*    background: transparent url('design/medallion.png') top right no-repeat;*/
    background: #fdf6e6 url('design/secondary-background.jpg') top right no-repeat;
    width: 960px;
    margin-top: -88px;
    padding-top: 88px;
    min-height: 372px;
    float:left;
    display:block;
    clear:both;
  }
  .home-page #main-container {
    background: transparent;
  }
  .home-page #main-container p,
  .home-page #panes p,
  .home-page #panes a {
    font-size:.875em;
    color: #fff;
  }
  .home-page #panes h4 a {
    font-size:1em;
  }
  #main {
    padding:0;
    width:960px;
  }
  #main article {
    margin-top:0;
    padding-top:0;
  }
  #main article header {
    height:215px; /* Used to be 210 before drop menu installed */
  }
  #main article header h1 {
    margin-top:0;
    padding-top:0
  }
  .home-page #main article header.col {
    padding-left:38px
  }
  .home-page #carousel {
    height:202px;
  }
  .home-page #panes-wrapper {
    margin:11px 10px 0;
    font-size:12px;
    width:935px;
    height:185px;
  }
  .home-page #panes-container {
    /* DO NOT insert a width here. */
    width:933px;
    height:183px;
    overflow:hidden;
    padding:0;
/*    padding: 14px 5px 14px 15px;*/
  }
  .home-page #panes-constraint {
    width:882px;
    float:left;
    padding-right:10px;
  }
  .home-page #panes-container #panes {
    height:157px;
    font-size:14px;
    margin-top:14px;
    margin-right:10px;
    width:882px; /* this width MUST match that found in the home carousel script */
    overflow:hidden;
  }
  .home-page #panes .pane {
    width:292px;
    display:block;
  }
  .home-page #panes .pane h4 {
    margin-top:7px;
    margin-bottom:12px;
    color: #fff;
  }
  .home-page #below-panes {
    float:left;
    margin-top:32px;
    height:240px;
    display:block;
  }
  .home-page #below-panes #lettuce-rooster {
    background:transparent url('design/home-content-background-bottom-flourish.jpg') no-repeat 0 0;
    float:left;
    width:25px;
    height:129px;
    margin-top:101px;
    margin-left:-25px;
  }
  .home-page #below-panes p {
    float:left;
    width:200px;
    margin-left:730px;
  }
  .contact-page .contact-wrapper {
    width:870px;
  }
  .contact-page .contact-general {
    width: 420px;
    float:left;
    margin-right:30px;
  }
  .contact-page .contact-recipe {
    width:420px;
    float:left;
  }
  .contact-page fieldset {
    /*width: 420px;*/
    width:870px;
    padding:1em;
  }
  .contact-page #inquiry_state {
    width: 30px;
    margin-right: 260px;
  }
  .contact-page .content input[type="text"] {
    float: right;
    margin-left: 10px;
  }
  .contact-page .content #inquiry_recipe_title {
    margin-right: 10px;
  }

  #footer-container {
    width: 960px;
    border-top: 10px solid #501000;
    float:left;
    padding-top: 20px;
  }
  .home-page #footer-container {
    border-top: none;
  }
  #footer-nav-and-contact {
    float:left;
    height:170px;
  }
  #footer-container footer {
    padding:0;
  }
  #footer-nav {
    float:left;
    width:804px;
  }
  #footer-container footer ul {
    float:left;
    border-bottom:none;
    margin-bottom:0;
    margin-left:1em;
    line-height:1.4em;
  }
  #footer-contact-details {
    line-height:1.7em;
  }
  #footer-container footer ul a:hover,
  #footer-contact-details p a:hover {
    color: #fff;
  }

  #footer-container footer #footer-nv-section-about {
    width:12%;
  }
  #footer-container footer #footer-nv-section-products {
    width:18%;
  }
  #footer-container footer #footer-nv-section-recipes {
    width:11.8%;
  }
  #footer-container footer #footer-nv-section-in {
    width:12%;
  }
  #footer-container footer #footer-nv-section-trade {
    width:14.25%;
  }
  #footer-container footer #footer-nv-section-press {
    width:11.5%;
  }
  #footer-container footer #footer-nv-section-contact {
    width:70px;
  }
  #footer-contact-details {
    float: left;
    border-left: 1px solid #89786d;
    margin:0;
    padding: 0 10px 10px;
  }

  /* Products Page listing display
  ----------------------------- */
  .retail-page #body_content .group + .group {display:none;}
  .retail-page #body_content .group + .group + .group {display:none;}

  .foodservice-page #body_content .group {display:none;}
  .foodservice-page #body_content .group + .group {display:block;}
  .foodservice-page #body_content .group + .group + .group {display:none;}

  .bulksalads-page #body_content .group,
  .bulksalads-page #body_content .group + .group {display:none;}
  .bulksalads-page #body_content .group + .group + .group {display:block;}

  /* Products Page
  -------------------------------------- */
  #product-hero {
    position: absolute;
    left: 426px;
    top: -56px;
    width: 534px;
    height: 392px;
    background: transparent url('design/products/hero-products.png') no-repeat 0px 0;
  }
  #product-category-wrapper {
    clear:both;
    padding-left:20px;
    padding-bottom:35px;
    height:325px;
  }
  .products-page .three-eighths {
    padding-left:10px;
    clear:both;
    float:left;
  }
  .products-page .article p {
    font-size:14px;
    line-height:160%;
  }
  .products-page h5 a {
    border-bottom: 1px dotted #4C3312;
    color: #357521;
  }
  .products-page h5 a:hover {
    color: #357521;
  }
  .products-page .five-sixteenths {
    border-right:1px solid #89786d;
    height:330px;
    float:left!important;
    display:block;
    margin-left:5px;
  }
  .products-page .leaf-blends {
    background:transparent url('design/products/tender-leafs.png') no-repeat 0 90px;
  }
  .products-page .foodservice {
    background:transparent url('design/products/romaines.png') no-repeat 5px 90px;
  }
  .products-page .bulk-salads {
    background:transparent url('design/products/foodservice.jpg') no-repeat 20px 100px;
    border-left:1px solid #89786d;
  }
  .products-page .five-sixteenths h5 {
    margin-top:0;
    margin-left:10px;
  }
  .products-page .five-sixteenths p {
    font-size:12px;
    line-height:130%;
    margin-left:10px;
    width:250px;
  }
  .products-page .five-sixteenths +  .five-sixteenths {
    border-right:none;
  }

/* Product List Page
--------------------------------*/

  .product-block {
    padding-left: 30px;
    /*width:900px;*/
    width:448px;
    display:block;
    float:left;
    background: transparent url('design/product-block-underline.gif') no-repeat bottom center;
  }
  .dottedbg {
    width:100%;
    background: transparent url('design/product-block-border-vertical.gif') repeat-y top center;
  }
  .product-block .product-description {
    margin-right:2px;
  }
  .product-block .product-description p {
    font-size: 14px;
    line-height: 160%;
    float:left;
    width:180px;
    clear:both;
  }
  .product-block a {
    border-bottom: 1px dotted #4C3312;
    color: #357521;
  }
  .retail-page .product-specs,
  .foodservice-page .product-specs,
  .bulksalads-page .product-specs {
    display:none;
  }
  .product-image {
    width:250px;
    display:block;
    float:left;
    margin-top:-10px;
  }

  /* Product Detail Page
  ------------------------------ */
  .productdetail-page .article p {
    font-size:16px;
    float:left;
  }
  .productdetail-page .article .product-description {
    width:550px;
    margin-left:10px;
  }
  .productdetail-page .article .product-description ul,
  .productdetail-page .article .product-description h3 {
    float:left;
    clear:left;
  }
  .productdetail-page .product-image-buy {
    float:right;
  }
  .productdetail-page .product-specs {
    float:left;
    display:block;
  }
  .productdetail-page .product-description #retail-baby-leaf-wrapper {
    width:800px;
    float:left;
  }
  .productdetail-page .product-specs table.retail-baby-leaf {
    width:325px;
  }
  .productdetail-page .product-specs table {
    /*border:none;*/
    width: 400px;
    margin-left: 5%;
    border:none;
    border-bottom: 1px solid #A88880;
    font-size: 13px;
  }
  .products-page .product-specs tr.titles {
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid #A88880;
  }
  .productdetail-page .product-specs tr {
    border:none;
  }
  .productdetail-page .product-specs tr + tr {
    border-left:1px solid #A88880;
  }
  .products-page .product-specs tr#titles td + td {
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid #A88880;
  }
  .productdetail-page .product-specs td {
    width: 120px;
    padding-left: 10px;
    border-left: 1px solid #A88880;
  }
  .products-page .product-specs td + td {
    width: 80px;
    /*text-align: center;*/
    padding-left: 10px;
    border:1px solid #A88880;
    border-top:none;
    color:#501000;
  }
  .products-page .product-specs th,
  .products-page .product-specs td {
    padding: 0 8px 0.4px;
    border:none;
  }
  .productdetail-page .product-specs th {
    height: 30px;
    font-size: 16px;
    border:none;
    border-bottom: 6px solid #501000;
    text-align: center;
    border-left:none;
  }
  .productdetail-page .product-name {
    font-weight:bold;
    font-style:italic;
  }
  .products-page div.product-specs tr#asterisk td {
    font-weight: bold;
    border-bottom:none;
    border-right: 1px solid #A88880;
    border-top: 1px solid #A88880;
    text-align: center;
  }
  .products-page div.product-specs td + td + td {
    border-left: none;
    border-right: 1px solid #A88880;
    text-align: center;
  }


/* } */


/* Error Rules
----------------------------------------------- */
.error, .fieldWithErrors, .field_with_errors {
  padding: 2px;
}
.fieldWithErrors input.textfield, .fieldWithErrors input, .fieldWithErrors textarea,
.field_with_errors input.textfield, .field_with_errors input, .field_with_errors textarea {
  border: 1px solid #c00 !important;
  background-color: #fee !important;
}
#errorExplanation {
  margin: 10px 32% 20px 0;
  border: 1px solid #c00;
  padding-top: 0;
  padding-bottom: 12px;
  background-color: #fff5f5;
}
#errorExplanation h2 {
  background: #c00 url("admin/alertbad_icon.gif") no-repeat left;
  margin: 0;
  padding: 5px 5px 6px 30px;
  border: inherit;
  font-size: 12px;
  color: #fff;
  text-align: left;
  font-weight: bold;
}
#errorExplanation p {
  margin: 10px 10px 0 10px;
  padding: 5px;
  font-size: 11px;
  color: #c00;
}
#errorExplanation ul {
  margin-left: 30px;
}
#errorExplanation ul li {
  padding-right: 10px;
  color: #c00;
  font-size: 11px;
  list-style: square;
}