@charset "UTF-8";
@import "../../../styles/css/defaults.css";
/*---------------------------------------------------
    LESS Elements 0.6
  ---------------------------------------------------
    A set of useful LESS mixins by Dmitry Fadeyev
    Special thanks for mixin suggestions to:
      Kris Van Herzeele,
      Benoit Adam,
      Portenart Emile-Victor,
      Ryan Faerman

    More info at: http://lesselements.com
-----------------------------------------------------*/
/* CSS Document */
body,
html {
  background: url(../../../images/background-pattern.jpg) repeat;
  font: 1.4rem/1.6rem Arial, Helvetica, sans-serif;
  width: 100%;
  height: 100%;
  font-size: 62.5%;
}
/************************************************************************************************************************************ Page Structure */
#content {
  position: relative;
  float: left;
  width: 940px;
  width: 94.0rem;
}
#rightCol {
  position: relative;
  float: right;
  width: 250px;
  width: 25.0rem;
}
#rightCol blockquote p {
  font-size: 14px;
  font-size: 1.4rem;
}
#rightCol blockquote select {
  background: #fff;
  border: 1px solid #aaa;
  display: block;
  height: 30px;
  height: 3.0rem;
  width: 100%;
  margin: 0;
  font-size: 14px;
  font-size: 1.4rem;
}
#leftCol {
  position: relative;
  float: left;
  width: 650px;
  width: 65.0rem;
}
#theHeader {
  position: relative;
  float: left;
  width: 100%;
  height: 200px;
  height: 20.0rem;
}
#wrapper {
  position: absolute;
  width: 940px;
  width: 94.0rem;
  left: 50%;
  margin-left: -470px;
  margin-left: -47rem;
  z-index: 4;
}
/************************************************************************************************************************************ Page Structure */
/************************************************************************************************************************************ Header Area */
#header-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 145px;
  height: 14.5rem;
  z-index: 2;
  background: url(../../../images/dark-background-pattern.jpg) repeat center top;
}
#header-background p {
  font: 12px/14px Arial, Helvetica, sans-serif;
  font: 1.2rem/1.4rem Arial, Helvetica, sans-serif;
}
#header-treelayer {
  position: absolute;
  top: 100px;
  top: 10.0rem;
  left: 0;
  width: 100%;
  height: 100px;
  height: 10.0rem;
  background: url(../../../images/torn.png) repeat-x center top;
  z-index: 3;
}
#logo {
  position: relative;
  float: left;
  margin-top: 40px;
  margin-top: 4.0rem;
  width: 200px;
  width: 20.0rem;
  cursor: pointer;
}
ul#nav {
  position: absolute;
  top: 50px;
  top: 5.0rem;
  right: 110px;
  right: 11.0rem;
  width: 600px;
  width: 60.0rem;
  height: 32px;
  height: 3.2rem;
  background: url(../../../images/dark-red-pattern.png) repeat;
  behavior: url(PIE.htc);
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  background-clip: padding-box;
  text-align: center;
  padding: 15px 0 0 0;
  padding: 1.5rem 0 0 0;
  margin: 0;
  list-style-type: none;
  z-index: 100;
}
ul#nav li {
  display: inline;
}
ul#nav li a {
  text-transform: uppercase;
  color: #f2e4e4;
  font: 12px/13px Arial, Helvetica, sans-serif;
  font: 1.2rem/1.3rem Arial, Helvetica, sans-serif;
  padding: 8px 8px 6px 8px;
  padding: 0.8rem 0.8rem 0.6rem 0.8rem;
  margin: 0 10px;
  text-decoration: none;
}
ul#nav li a:hover {
  color: #d6d4d3;
  border-radius: 6px;
  background-clip: padding-box;
  background: url(../../../images/dark-red-pattern-hover.png) repeat;
}
ul#consumer {
  position: absolute;
  top: 50px;
  top: 5.0rem;
  right: 0;
  width: 105px;
  width: 10.5rem;
  height: 32px;
  height: 3.2rem;
  background: #45392e;
  behavior: url(PIE.htc);
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  background-clip: padding-box;
  text-align: center;
  padding: 15px 0 0 0;
  padding: 1.5rem 0 0 0;
  margin: 0;
}
ul#consumer a {
  text-transform: uppercase;
  color: #c9c5c2;
  font: 12px/13px Arial, Helvetica, sans-serif;
  font: 1.2rem/1.3rem Arial, Helvetica, sans-serif;
  padding: 8px 8px 6px 8px;
  padding: 0.8rem 0.8rem 0.6rem 0.8rem;
  margin: 3px 10px 0 10px;
  margin: 0.3rem 1.0rem 0 1.0rem;
  text-decoration: none;
}
ul#consumer a:hover {
  background: #2e251e;
  color: #d6d4d3;
  border-radius: 6px;
  background-clip: padding-box;
}
/************************************************************************************************************************************ Header Area */
/************************************************************************************************************************************ News List */
.newsStory {
  padding: 10px;
  padding: 1.0rem;
}
.newsDivider {
  height: 1px;
  border-top: 1px dotted #000;
  width: 100%;
  margin: 10px 0;
  margin: 1.0rem 0;
}
.newsStory {
  cursor: pointer;
}
.newsStory p {
  margin: 0;
}
.newsStory .title {
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 800;
}
.newsStory .date {
  font-size: 12px;
  font-size: 1.2rem;
  font-style: italic;
  margin-bottom: 10px;
  margin-bottom: 1.0rem;
}
.newsStory .title:hover {
  text-decoration: underline;
}
.newsStory:hover .title {
  text-decoration: underline;
}
ul#otherStories {
  margin: 0 0 0 20px;
  margin: 0 0 0 2.0rem;
}
ul#otherStories li {
  margin: 5px 0;
  margin: 0.5rem 0;
}
ul#otherStories li a {
  text-decoration: none;
}
.storyDate {
  font-size: 13px;
  font-size: 1.3rem;
  margin-top: -10px;
  margin-top: -1rem;
  font-style: italic;
}
/************************************************************************************************************************************ News List */
/************************************************************************************************************************************ Food Service */
.fsSideNav {
  display: block;
  width: 200px;
  width: 20.0rem;
  height: 40px;
  height: 4.0rem;
  background: url(../../../images/dark-red-pattern.png) repeat;
  behavior: url(PIE.htc);
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  background-clip: padding-box;
  text-align: center;
  margin: 10px 0;
  margin: 1.0rem 0;
  text-transform: uppercase;
  color: #f2e4e4;
  font: 12px/13px Arial, Helvetica, sans-serif;
  font: 1.2rem/1.3rem Arial, Helvetica, sans-serif;
  text-decoration: none;
  line-height: 40px;
  line-height: 4.0rem;
}
.fsSideNav:hover {
  background: url(../../../images/dark-red-pattern-hover.png) repeat;
  color: #f2e4e4;
}
/************************************************************************************************************************************ Food Service */
/************************************************************************************************************************************ Product Navigation */
ul#productNav {
  list-style-type: none;
  position: relative;
  float: left;
  width: 205px;
  width: 20.5rem;
  margin: 0;
}
ul#productNav li {
  border-bottom: 1px dotted #000;
  margin: 0;
}
ul#productNav li a {
  font-size: 12px;
  font-size: 1.2rem;
  display: block;
  color: #342d2c;
  padding: 5px 8px;
  padding: 0.5rem 0.8rem;
  margin: 3px 0;
  margin: 0.3rem 0;
  text-decoration: none;
}
ul#productNav li a:hover,
ul#productNav li .selected {
  background: #4a3e32;
  color: #fff;
}
ul#productNav li ul {
  background: url(../../../images/subnav-bg.png) repeat;
  list-style-type: none;
  margin: 0;
}
ul#productNav li ul li {
  border-bottom: 1px solid #c6baae;
  padding: 1px 0;
  padding: 0.1rem 0;
  margin: 0;
}
ul#productNav li ul li a {
  padding-left: 15px;
  padding-left: 1.5rem;
}
ul#productNav li ul li a:hover {
  background: url(../../../images/subnav-bg-hover.png) repeat;
  color: #000;
}
ul#productNav li:last-child {
  border-bottom: none;
}
ul#productNav ul li:last-child {
  margin-bottom: 3px;
  margin-bottom: 0.3rem;
}
/************************************************************************************************************************************ End Product Navigation */
/************************************************************************************************************************************ Product Lists */
#products {
  position: relative;
  float: right;
  width: 700px;
  width: 70.0rem;
}
.product {
  position: relative;
  width: 0.5rem;
  width: 18.5rem;
  float: left;
  margin: 0 0 25px 25px;
  margin: 0 0 2.5rem 2.5rem;
  text-align: center;
  padding: 10px;
  padding: 1.0rem;
  border: 1px dotted #ece2d9;
}
.product p {
  color: #4a3e32;
  font-size: 13px;
  font-size: 1.3rem;
  position: relative;
  width: -9.5rem;
  width: 17.5rem;
  padding: 5px;
  padding: 0.5rem;
}
.product img {
  height: 180px;
  height: 18.0rem;
  margin-left: 1px;
  margin-left: 0.1rem;
}
.product:hover {
  cursor: pointer;
  border: 1px dotted #4a3e32;
}
/************************************************************************************************************************************ End Product Lists */
/************************************************************************************************************************************ Product Page */
.fsProduct {
  width: 630px;
  width: 63.0rem;
  border: 1px solid #000;
  padding: 10px;
  padding: 1.0rem;
  font-size: 14px;
  font-size: 1.4rem;
}
.fsProduct #fsName {
  float: left;
}
.fsProduct #fsCode {
  float: right;
}
.fsSpecs {
  margin: 10px 0;
  margin: 1.0rem 0;
  width: 315px;
  width: 31.5rem;
  border: 1px solid #000;
  float: left;
}
.fsSpecs tr {
  vertical-align: middle;
}
.fsSpecs tr td {
  padding: 10px;
  padding: 1.0rem;
  border-bottom: 1px dotted #000;
  font-size: 1.4rem;
}
td.specHead {
  font-weight: bold;
  width: 110px;
  width: 11rem;
}
.fsIngredients,
.fsAllergens,
.fsNotes {
  width: 650px;
  width: 65.0rem;
  border: 1px solid #000;
  line-height: 20px;
  line-height: 2.0rem;
  margin-bottom: 10px;
  margin-bottom: 1.0rem;
}
.fsIngredients tr,
.fsAllergens tr,
.fsNotes tr {
  border: 1px dotted #000;
  vertical-align: middle;
}
.fsIngredients td,
.fsAllergens td,
.fsNotes td {
  padding: 10px;
  padding: 1.0rem;
  border-bottom: 1px dotted #000;
  font-size: 1.4rem;
}
.fsIngredients .allergenHead,
.fsAllergens .allergenHead,
.fsNotes .allergenHead {
  font-weight: bold;
}
.fsIngredients td.coloured,
.fsAllergens td.coloured,
.fsNotes td.coloured {
  background: url(../../../images/subnav-bg.png) repeat;
}
.fsNutrition {
  width: 650px;
  width: 65.0rem;
  border: 1px solid #000;
  margin-bottom: 10px;
  margin-bottom: 1.0rem;
}
.fsNutrition tr td {
  padding: 10px;
  padding: 1.0rem;
  font-size: 1.4rem;
}
.present {
  text-align: center;
}
#pdfLink {
  display: block;
  margin-bottom: 20px;
  margin-bottom: 2.0rem;
  text-decoration: none;
  font-size: 1.4rem;
}
#pdfLink img {
  margin: 0 5px -6px 0;
  margin: 0 0.5rem -0.6rem 0;
}
#pdfLink:hover {
  text-decoration: underline;
}
div.nutritionFacts,
div.nutritionFacts2 {
  position: relative;
  padding: 10px;
  padding: 1.0rem;
  border: 1px solid #000;
  background: #fff;
  width: 250px;
  width: 25.0rem;
  z-index: 1000;
}
.nutInfoLink {
  display: block;
  background: #4a3e32;
  margin-top: 20px;
  margin-top: 2.0rem;
  padding: 10px 0;
  padding: 1.0rem 0;
  color: #fff;
  font: 800 12px/18px "Open Sans", Arial, sans-serif;
  font: 800 1.2rem/1.8rem "Open Sans", Arial, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border-radius: 5px;
  background-clip: padding-box;
  behavior: url(PIE.htc);
  width: 90%;
}
table.nutritionFacts,
table.nutritionFacts2 {
  width: 100%;
}
table.nutritionFacts td,
table.nutritionFacts2 td {
  padding: 2px 0;
  padding: 0.2rem 0;
  vertical-align: middle;
  font-size: 14px;
  font-size: 1.4rem;
}
table.nutritionFacts td table,
table.nutritionFacts2 td table {
  width: 95%;
  float: right;
}
table.nutritionFacts td table td,
table.nutritionFacts2 td table td {
  vertical-align: middle;
}
table.nutritionFacts td.percentage,
table.nutritionFacts2 td.percentage {
  text-align: right;
  padding-right: 5px;
  padding-right: 0.5rem;
  font-weight: bold;
}
table.nutritionFacts td.serving,
table.nutritionFacts2 td.serving {
  border-bottom: 2px solid #000;
  padding-bottom: 5px;
  padding-bottom: 0.5rem;
}
table.nutritionFacts td.heading,
table.nutritionFacts2 td.heading {
  font-size: 11px;
  font-size: 1.1rem;
  font-weight: bold;
  border-bottom: 1px solid #000;
}
table.nutritionFacts td.nested,
table.nutritionFacts2 td.nested {
  padding-top: 0;
  padding-bottom: 0;
}
table.nutritionFacts td.nested table td,
table.nutritionFacts2 td.nested table td {
  padding-top: 0;
}
/************************************************************************************************************************************ End Product Page */
/************************************************************************************************************************************ Footer */
#footer {
  position: relative;
  float: left;
  width: 100%;
  border-top: 1px dotted #000;
  margin: 10px 0 0 -10px;
  margin: 1rem 0 0 -1rem;
  padding: 10px 0 60px 0;
  padding: 1.0rem 0 6.0rem 0;
}
#footer p {
  font: 12px/12px Arial, Helvetica, sans-serif;
  font: 1.2rem/1.2rem Arial, Helvetica, sans-serif;
}
#footer p.left {
  float: left;
  margin-left: 5px;
  margin-left: 0.5rem;
}
#footer p.right {
  float: right;
}
#footer p.right a {
  margin: 0 5px;
  margin: 0 0.5rem;
  color: #000;
  font: 12px/12px Arial, Helvetica, sans-serif;
  font: 1.2rem/1.2rem Arial, Helvetica, sans-serif;
}
#footer p.right a:hover {
  text-decoration: underline;
}
/************************************************************************************************************************************ End Footer */
/************************************************************************************************************************************ End Recipes */
.c-skipmain {
  position: fixed;
  background: white;
  color: black;
  padding: 20px;
  padding: 2.0rem;
  z-index: 20;
  left: 2.0rem;
  top: 2.0rem;
  text-decoration: none;
  font-size: 1.6rem;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12), 0 4px 4px rgba(0, 0, 0, 0.12), 0 8px 8px rgba(0, 0, 0, 0.12), 0 16px 16px rgba(0, 0, 0, 0.12);
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12), 0 4px 4px rgba(0, 0, 0, 0.12), 0 8px 8px rgba(0, 0, 0, 0.12), 0 16px 16px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  -webkit-transform: translateX(-200%);
          transform: translateX(-200%);
}
.c-skipmain:focus {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}