@charset "utf-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, 
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 1;
    border: 1;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
ol, ul {
    list-style: none;
}
table tr td {vertical-align: top;}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}


* {font-size: 100.1%; line-height: 130.3%;}
html {font-size: 62.5%;    height: 100%;}
body {
    height: 100%;
    font-size: 1.4em; 
    line-height: 1.82em;
    background: #fff url(../images/gradient-bg.png) top left repeat-y scroll;
    color: #000;
    margin: 0;
    padding: 0;
}
body, p, li, li * {font-family: Arial, Helvetica, sans-serif;}


/* h1 {font-size: 1.2em; line-height: 1em;}
h2 {font-size: 1.0em; font-weight: normal;}
*/

h1, h2
{
font-size: 1.2em;
font-weight: normal;
font-family: "gotham rounded light","gotham
rounded","gotham","arial","trebuchet","verdana",sans-serif;
}

span.red 
{
line-height: 1.7em;
color:red; 
font-weight: normal;
}

h3 {font-size: 0.9em;}
p {margin-bottom: 24px;}
select {font-size: 0.857em;}
input {font-size: 0.857em; color: #000;}
a:link,
a:visited {color: #000; text-decoration: underline;}
a:active,
a:hover {color: #898989; text-decoration: none !important;}
#head,
div.chip p,
div.ticker ul li {font-size: 0.857em;} 
#foot span.copyright {font-size: 0.786em;}
#foot ul {font-size: 0.713em;}


/* Underline hover */
#foot ul li a {position: relative;}
#foot ul li a span.underline-shim {height: 16px; }


/* Section-specific general formatting */
#content-area h1 {font-size: 1.5em; margin-bottom: 18px;}
h1, h2 {font-weight: normal; font-family: "gotham rounded light","gotham rounded","gotham","verdana","arial","trebuchet",sans-serif;}
.section-planet h1,   .section-planet h2, .section-planet h3     {color: #64a8d2;}
.section-health h1,   .section-health h2, .section-health h3     {color: #9aae49;}
.section-products h1, .section-products h2, .section-products h3 {color: #dca920;}
.section-recipes h1,  .section-recipes h2, .section-recipes h3 {color: #77486a;}
.section-company h1,  .section-company h2, .section-company h3,
.section-general h1,  .section-general h2, .section-general h3   {color: #cb7131;}

#content-area hr {clear: both; height: 1px; margin-bottom: 13px; background-color: #e4dbbb; color: #e4dbbb; border: 0 none; }

.section-planet blockquote {color: #64a8d2;}
.section-health blockquote {color: #9aae49;}
.section-products blockquote {color: #dca920;}
.section-recipes blockquote {color: #77486a;}
.section-company blockquote,
.section-general blockquote {color: #cb7131;}


/* ----- Page Layout ----- */

/* Stacking order */
#doc-height {z-index: 10;}
    #doc-outer {z-index: 20;}
       #doc-inner {z-index: 30;height:auto;}
#doc-bg {z-index: 0;}
#top-nav {z-index: 10; position: relative;}
#breadcrumb {z-index: 5; position: relative; padding-top:0px; padding-bottom:3px;}
#head {z-index: 20;position: relative;}
#content-area {overflow: hidden;
    position: relative;
    z-index: 15;}
	#content-area_inn {overflow: hidden;
    position: relative;
    }
#doc-shadows {}
div.chip {z-index: 1;}
div.chip * {z-index: 5; position: relative;}
div.chip div.c-bg {z-index: 1;}

#top-nav a.title {z-index: 1;}
#top-nav div.subsection {z-index: 2;}
#top-nav div.subsection-top {z-index: 5;}
#top-nav div.subsection-bg {z-index: 5;}
#top-nav div.subsection-bottom {z-index: 5;}
#top-nav div.subsection-shadow {z-index: -1;}


/* ----- Header & Top Nav ----- */
#branding {position: relative; top: -15px; margin-bottom:-6px}
#branding h1.logo {float: left;}
#branding ul.nav {position: absolute; bottom: 0px; right: 0px;}
#branding ul.nav li {float: left; margin-right: 10px; font-size:10px; line-height:12px;}
#branding ul.nav li a {text-decoration: none;}
#branding ul.socialmedia {position: absolute; bottom: 20px; right: 181px;}
#branding ul.socialmedia  li {float: left; margin-right: 10px;}
#branding ul.socialmedia  li a {text-decoration: none;}

#top-nav ul {margin-bottom:0px; display:inline-block;}
#top-nav ul ul {display:block;}
#top-nav ul li.section {position: relative; float: left;  width: 180px;  margin-right: 0; display: block; cursor:pointer; }
#top-nav a.title {opacity: 0.7; display: block; text-indent: -100000px; width: 169px; background-position: 0 0; background-color: transparent; background-repeat: no-repeat; }
#home #top-nav a.title {opacity: 1;} 


/* Off state (rounded corners) */
.nav-products a.title {height: 45px; background-image: url(../images/nav/products_in.png);}
.nav-recipes a.title {height: 45px; background-image: url(../images/nav/recipes.png);}
.nav-health a.title {height: 45px; background-image: url(../images/nav/health.png);}
.nav-our-planet a.title {height: 45px; background-image: url(../images/nav/planet.png);}
.nav-company a.title {height: 45px; background-image: url(../images/nav/company.png);}


/* Expand correct nav element for the current site section; */
.section-products #top-nav .nav-products a.title {opacity: 1; height: 49px; background-position: 0 -45px; background-image: url(../images/nav/products-bgin.png);}
.section-recipes #top-nav .nav-recipes a.title {opacity: 1; height: 49px; background-position: 0 -45px; background-image: url(../images/nav/recipes.png);}
.section-health #top-nav .nav-health a.title {opacity: 1; height: 49px; background-position: 0 -45px; background-image: url(../images/nav/health.png);}
.section-planet #top-nav .nav-our-planet a.title {opacity: 1; height: 49px; background-position: 0 -45px; background-image: url(../images/nav/planet.png);}
.section-company #top-nav .nav-company a.title {opacity: 1; height: 49px; background-position: 0 -45px; background-image: url(../images/nav/company.png);}

/* no right margin for rightmost item */
#top-nav .nav-company,
#top-nav .nav-company-on {margin-right: 0 !important;}
.section-home #top-nav ul {background: none;} 
 



/* Dropdown menu */ 
div.subsection {
    position: absolute; top: 0px; left: 0px; 
    display: block; width: 100%; 
    padding-bottom: 5px; /* make room for shadow */
	margin-top:10px;
}
div.subsection a.title {background-image: none !important;} /* The background image is redundant, because we're overlaying the existing a.title */
div.subsection div.subsection-top {position: relative; display: block; width: 169px; height: 49px;}
div.subsection ul {margin-bottom: 0px !important;}
div.subsection-bg {position: relative; width: 169px;}
div.subsection-bg a {
    display: block; width: 100%; padding: 4px 0; 
    background-position: 0 -110px; background-color: transparent; background-repeat: repeat-y;
}
div.subsection-bg a:link,
div.subsection-bg a:active,
div.subsection-bg a:visited {color: #FFF; text-decoration: none;}
div.subsection-bg a span {padding: 0 10px;}
div.subsection-bg a:hover span {padding: 0 10px;  text-decoration: underline;}
div.subsection-bottom {position: relative; display: block; width: 100%; height: 10px; background-position:  0 -141px; background-color: transparent; background-repeat: no-repeat;}
div.subsection-shadow {
    position: absolute; bottom: 0px; left: 0px; display: block;  width: 175px; height: 100px; 
    background: transparent url(../images/nav/shadow.png) 0 0 no-repeat scroll;
}
div.subsection-top {background-position: 0 -45px; background-color: transparent; background-repeat: no-repeat;}

/* Dropdown menu detail by section */
.nav-products div.subsection-bg a,
.nav-products div.subsection-top,
.nav-products div.subsection-bottom {background-image: url(../images/nav/products-bgin.png);}
.nav-recipes div.subsection-bg a,
.nav-recipes div.subsection-top,
.nav-recipes div.subsection-bottom {background-image: url(../images/nav/recipes-bg.png);}
.nav-health div.subsection-bg a,
.nav-health div.subsection-top,
.nav-health div.subsection-bottom {background-image: url(../images/nav/health-bg.png);}
.nav-our-planet div.subsection-bg a,
.nav-our-planet div.subsection-top,
.nav-our-planet div.subsection-bottom {background-image:  url(../images/nav/planet-bg.png);}
.nav-company div.subsection-bg a,
.nav-company div.subsection-top,
.nav-company div.subsection-bottom {background-image:  url(../images/nav/company-bg.png);}

/* ----- Reusable Classes ----- */
div.clearer { clear: both; display:block; overflow: hidden; height: 1px; }

.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}

.clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}

/* Underline hovers */
span.underline-shim {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border-bottom: 1px solid #898989;}

/* Sliding Doors Buttons */
button.btn-bg, a.btn-bg {
    float: left;
    cursor: pointer; 
    display: block; 
    font-weight: bold; 
    font-size: 0.857em; 
    border: 0 none; 
    text-decoration: none !important; 
    background-image:url(../images/buttons/button-sprite-l1.png);
    padding-left: 8px;
    background-repeat: no-repeat; 
    background-color: transparent; 
}
button.btn-bg span.in, a.btn-bg span.in {
    color: #FFF; 
    float: left;
    cursor: pointer; 
    display: block; 
    line-height: 25px;
    background-image:url(../images/buttons/button-sprite-r1.png);
    padding-left: 4px;
    padding-right: 12px;
    background-repeat: no-repeat; 
    background-color: transparent;
    background-position: right top;
}
a.btn-blu {background-position: left -50px;} a.btn-blu span.in {background-position: right -50px;}
a.btn-grn {background-position: left 0;}     a.btn-grn span.in {background-position: right 0;}
a.btn-yel {background-position: left -25px;} a.btn-yel span.in {background-position: right -25px;}
a.btn-red {background-position: left -75px;} a.btn-red span.in {background-position: right -75px;}
a.btn-plp {background-position: left -100px;} a.btn-plp span.in {background-position: right -100px;}
button.btn-bg span.arrow, 
a.btn-bg span.arrow {display: block; width: 6px; height: 20px; padding-right: 5px; float: left; background: transparent url(../images/icons/btn-arrow-wht.png) 0 10px no-repeat;}

/* Prev/next buttons have different arrows */
a.btn-prev span.arr-l {background: transparent url(../images/icons/btn-arrow-wht-l.png) 0 10px no-repeat;}
a.btn-next span.arr-r {float: right; padding-right: 0px; margin-left: 5px; background: transparent url(../images/icons/btn-arrow-wht.png) 0 10px no-repeat;}
 

/* Button rollovers */
button.btn-bg span.arrow-on, a.btn-bg span.arrow-on {position: absolute; left: 12px; display: block; width: 6px; height: 20px; background: transparent url(../images/icons/btn-arrow-grey.png) 0 10px no-repeat;}
a.btn-prev span.arrow-on {background: transparent url(../images/icons/btn-arrow-grey-l.png) 0 10px no-repeat;}
a.btn-next span.arrow-on {left: auto; right: 12px; background: transparent url(../images/icons/btn-arrow-grey.png) 0 10px no-repeat;}

/* Box modules (chips) */
div.chip {position: relative;}
div.chip div.content {padding: 15px 13px 0;}
div.chip h1, div.chip h2 {margin-bottom: 7px;}
div.chip p {margin-bottom: 0.3em;}

/* Module backgrounds */
div.c-plain {height: auto; padding-top: 8px; display: block; width: 212px; background: transparent url(../images/modules/plain-top.png) top left no-repeat scroll;}
div.c-plain div.chip-in {background: #FBEDC2 none;}
div.c-plain div.chip-btm {clear: both; display: block; width: 212px; height: 8px; background: transparent url(../images/modules/plain-bottom.png) top left no-repeat scroll;}
div.c-plain div.content {padding-top: 0; border-left: 1px solid #E4DBBB; border-right: 1px solid #E4DBBB;}

div.c-plain-141 {height: 141px; background: transparent url(../images/modules/plain.png) top left no-repeat scroll;}

div.c-floated {width: 100%; height: auto; margin: 20px 0;} 
div.c-floated a.img {float: left;}
div.c-floated div.content {float: left; width: 213px; margin-left: 8px; padding: 0;} 


div.c-home-01-top {height: 188px; background: transparent url(../images/modules/home-01-top.png) top left no-repeat scroll;}
div.c-home-02-btm {height: 188px; background: transparent url(../images/modules/hm-rt-btm-duaf2.png) bottom left no-repeat scroll;}

div.c-snacks-01 {height: 141px; background: transparent url(../images/modules/health-03.png) top left no-repeat scroll;}
div.c-snacks-02 {height: 141px; background: transparent url(../images/modules/snacks-02.jpg) top left no-repeat scroll;}
div.c-snacks-03 {height: 141px; background: transparent url(../images/modules/snacks-03.png) top left no-repeat scroll;}

div.c-about-01 {height: 141px; background: transparent url(../images/modules/about-01.gif) top left no-repeat scroll;}
div.c-about-02 {height: 141px; background: transparent url(../images/modules/about-02.gif) top left no-repeat scroll;}
div.c-about-03 {height: 141px; background: transparent url(../images/modules/about-03.png) top left no-repeat scroll;}

div.c-health-01 {height: 141px; background: transparent url(../images/modules/health-01.gif) top left no-repeat scroll;}
div.c-health-02 {height: 141px; background: transparent url(../images/modules/snacks-03.gif) top left no-repeat scroll;}
div.c-health-03 {height: 141px; background: transparent url(../images/modules/health-03.png) top left no-repeat scroll;}

div.c-planet-01 {height: 141px; background: transparent url(../images/modules/planet-01.gif) top left no-repeat scroll;}
div.c-planet-02 {height: 141px; background: transparent url(../images/modules/planet-02.gif) top left no-repeat scroll;}
div.c-planet-03 {height: 141px; background: transparent url(../images/modules/planet-03.gif) top left no-repeat scroll;}

div.c-top-story-01 {height: 188px; background: transparent url(../images/modules/home-01-top.png) top left no-repeat scroll;}
div.c-top-story-02 {height: 188px; background: transparent url() top left no-repeat scroll;}
div.c-top-story-03 {height: 188px; background: transparent url(../images/modules/top-story-03.gif) top left no-repeat scroll;}

div.c-non-pool-recipes {height: 141px; background: transparent url(../images/modules/recipes-promo.png) top left no-repeat scroll;}
div.c-non-pool-snack-sense {height: 141px; background: transparent url(../images/modules/snack-sense.gif) top left no-repeat scroll;}
div.c-non-pool-license-to-snack {height: 141px; background: transparent url(../images/modules/license-to-snack.png) top left no-repeat scroll;}

div.n-floated {width: 100%; height: auto;} 
div.n-floated a.img {float: left;}
div.n-floated div.content {float: left; width: 341px; margin-left: 20px; margin-bottom: 13px; padding: 0;} 

/* Chip Rollovers */
.hoverable div.c-bg {cursor: pointer;z-index: 50;display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.hoverable * {cursor: pointer;}

/*div.chip div.c-bg {display: none;}
div.chip-on div.c-bg {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent url(../images/modules/hover-213x188.png) top left no-repeat scroll;}*/

/* Outer div is for positioning; needed for IE to fade in/out properly */
.c-hov-213x141 div.c-bg, .c-hov-213x141 div.c-bg-in {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 141px; }
.c-hov-213x188 div.c-bg, .c-hov-213x188 div.c-bg-in {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 188px; }
.c-hov-438x129 div.c-bg, .c-hov-438x129 div.c-bg-in {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 129px; }
.c-hov-438x325 div.c-bg, .c-hov-438x325 div.c-bg-in {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 325px; }

/* Inner div has actual bg */
.c-hov-213x141 div.c-bg-in {background: transparent url(../images/modules/hover-213x141.png) top left no-repeat scroll;}
.c-hov-213x188 div.c-bg-in {background: transparent url(../images/modules/hover-213x188.png) top left no-repeat scroll;}
.c-hov-438x129 div.c-bg-in {background: transparent url(../images/modules/hover-438x129.png) top left no-repeat scroll;}
.c-hov-438x325 div.c-bg-in {background: transparent url(../images/modules/hover-438x325.png) top left no-repeat scroll;}

/* headers with text replacement */
.txt-rpl { background-color: transparent;
    background-position: left top;
    background-repeat: no-repeat;
    display: block;
	font-size:18px;
	color:#FDB913;
    margin-bottom: 2px;
    margin-top: 0;
	font-weight:bold;
    /*text-indent: -100000px;*/
    width: 100%;}

/*
.browse-our-snacks { background-image: url(../images/text/browse-our-snacks.png);}
.delivered { background-image: url();}
.employee-story { background-image: url();}
.find-a-brand { background-image: url(../images/text/find-a-brand.png);}
.goodbye-trans-fats { background-image: url();}
.how-its-made { background-image: url(../images/text/how-its-made.png);}
.less-salt { background-image: url();}
.net-zero-manufacture { background-image: url(../images/text/net-zero-manufacture.png);}
.our-mission { background-image: url();}
.powered-by-the-sun { background-image: url();}
.rebuilding-greensburg-kansas { background-image: url();}
.reusing-water{ background-image: url(../images/text/reusing-water.png);}
.still-looking-for-answers { background-image: url(../images/text/still-looking-for-answers.png);}
.sunchips { background-image: url();}
.the-simple-chip {background-image: url(../images/text/the-simple-chip.png);}
.tostitos-hint-of-jalapeno { background-image: url();}
.truenorth { background-image: url(../images/text/truenorth.png);}
.your-questions-answered { background-image: url(../images/text/your-questions-answered.png);}
div.prod-locator h3 {background-image: url(../images/text/product-locator.png);}
*/

/* Alphabet Picker */
ul.alpha {margin-bottom: 25px;}
ul.alpha li {float: left; margin: 0 0 0 5px;}


/* "Back to top" rule with letter in middle */
a.alpha {
    display: block;
    position: relative;
    width: 100%;
    margin-bottom: 1px;
    background: transparent url(../images/rule-top.png) top left no-repeat scroll;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}
a.alpha * {}

a.alpha span
{
    display: block;
    width: 100%;
    position: relative;
    top: -3px;
    height: 11px;
}

a.alpha hr
{
    background-color:#e8e4c9;
    color:#e8e4c9;
    height:1px;
    border:0 none;
    float: left;
    width: 390px; 
}

.section-products a.alpha {color: #dca920;}
.section-products img.thumb {
    border:0px;
    margin:0px 4px 8px 4px;
    float:left;
}
.section-products img.thumbend {margin:0px 0px 10px 0px;}


/* Expandable List */
ul.x-list {}

/* top level inactive item */
ul.x-list li * {cursor: pointer;}
ul.x-list li {position: relative; padding-bottom: 3px; margin-bottom: 3px; border-bottom: 1px solid #EBE3C8; }
ul.x-list li a {display: block; padding: 6px 0;}
ul.x-list li h2 {position: relative; font-size: 1em; display: block; padding-left: 27px; }
ul.x-list li h3 {font-size: 1em; display: block; padding-left: 27px; }
ul.x-list li h2 a  {font-size: 1em; font-weight: normal; text-decoration: underline;}
ul.x-list li h3 a  {font-size: 0.857em; font-weight: normal; padding: 4px 0; }
ul.x-list li.last {margin-bottom: 0; padding-bottom: 0; border-bottom: 0 none;} /* last one should not have a border underneath */
ul.x-list li a.bold{font-weight: bold;}
ul.x-list li p {margin-left: 27px; margin-right: 27px;}

/* Rollover stacking order */
ul.x-list li h2 {z-index: 50;}
ul.x-list div.x-bg-shim {z-index: 0;}
ul.x-list div.x-bullet-shim {z-index: 100;}

/* Expanded header */
ul.x-list div.x-bg-shim {position: absolute; top: 0px; left: 0px; display: block; width: 100%; height: 32px;}
ul.x-list div.x-bullet-shim {position: absolute; top: 8px; left: 5px; width: 15px; height: 15px; display: block; background: transparent url(../images/icons/minus-wht.png) top left no-repeat;}

/* 2nd level item */
ul.x-list li ul {background: #fcf0c8 none; padding: 6px 0; overflow: hidden; /* without this, IE7 will stutter */}
ul.x-list li ul li {margin-bottom: 0; padding-bottom: 0; border-bottom: 0 none; position: static; /* fix for IE7  */}
ul.x-list li ul li h3 {background: transparent none;}
 

/* Section-specific bullets */
.section-planet ul.x-list li h2 {background: transparent url(../images/icons/plus-blu.png) 5px center no-repeat;}
.section-health ul.x-list li h2 {background: transparent url(../images/icons/plus-grn.png) 5px center no-repeat;}
.section-products ul.x-list li h2 {background: transparent url(../images/icons/plus-yel.png) 5px center no-repeat;}
.section-company ul.x-list li h2 {background: transparent url(../images/icons/plus-red.png) 5px center no-repeat;}

* Section-specific headers */
.section-planet ul.x-list div.x-bg-shim {background: transparent url(../images/list-hdr-blu.jpg) center left repeat-x scroll;}
.section-health ul.x-list div.x-bg-shim {background: transparent url(../images/list-hdr-grn.jpg) center left repeat-x scroll;}
.section-products ul.x-list div.x-bg-shim {background: transparent url(../images/list-hdr-yel.jpg) center left repeat-x scroll;}
.section-company ul.x-list div.x-bg-shim {background: transparent url(../images/list-hdr-red.jpg) center left repeat-x scroll;}

/* Variation on the expandable list (ex: Press Releases) */
ul.xl-complex li ul li {margin-bottom: 10px;}
ul.xl-complex li ul li p {margin-bottom: 0;}
ul.xl-complex li ul li h3:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
ul.xl-complex li ul li h3 {display: inline-block;}
html[xmlns] ul.xl-complex li ul li h3 {display: block;}
* html ul.xl-complex li ul li h3 {height: 1%;}
.section-planet ul.xl-complex li ul li h3 a {color: #64a8d2;}
.section-health ul.xl-complex li ul li h3 a  {color: #9aae49;}
.section-products ul.xl-complex li ul li h3 a  {color: #dca920;}
.section-company ul.xl-complex li ul li h3 a,
.section-general ul.xl-complex li ul li h3 a  {color: #cb7131;}
ul.xl-complex li ul li h3 a {font-size: 0.857em; float: left; margin-right: 5px;}
ul.xl-complex li ul li h3 em {font-size: 0.929em; float: left; display: block; font-weight: normal; padding: 6px 0; /* for vertical centering */}

/* ul for press releases */
.section-company ul.news {list-style: disc inside none; margin: 15px}
.section-company ul.news li {margin: 10px}


/* Non-expandable news item list */
ul.simple li {margin-bottom: 7px; padding-bottom: 11px; border-bottom: 1px solid #EBE3C8;}
ul.simple li.last {border-bottom: 0px none;}
ul.simple li em {font-size: 0.857em; display: block; margin-bottom: 3px; }
ul.simple li h2  {font-size: 0.929em; font-weight: normal;}
ul.simple li h2 a {}

/* Lists with icons as bullets */
ul.icons li {display: block; margin-bottom: 0.4em; background-color: transparent; background-position: left center; background-repeat: no-repeat;}
ul.icons li a {padding-left: 30px; line-height: 28px; /* enough to clear the icons */ display: block; }
ul.icons li a:link,
ul.icons li a:visited {text-decoration: none;} 
ul.icons li a:hover,
ul.icons li a:active {text-decoration: underline !important;}

ul.icons li.two-g {background-image: url();}
ul.icons li.additive-free {background-image: url(../images/icons/AdditiveFree.png);}
ul.icons li.baked {background-image: url(../images/icons/Baked.png);}
ul.icons li.corn-free {background-image: url(../images/icons/CornFree.png);}
ul.icons li.contains-eggs {background-image: url(../images/icons/ContainsEggs.png);}
ul.icons li.gluten-free {background-image: url(../images/icons/GlutenFree.png);}
ul.icons li.no-gluten-ingredients {background-image: url(../images/icons/NoGlutenIngredients.png);}
ul.icons li.gluten-and-milk-free {background-image: url(../images/icons/GlutenAndMilkFree.png);}
ul.icons li.good-source {background-image: url(../images/icons/Excellent-Good-Source.png);}
ul.icons li.kosher-ou {background-image: url(../images/icons/Kosher_OrthodoxUnion.png);}
ul.icons li.kosher-triangle-k {background-image: url(../images/icons/Kosher_Triangle.png);}
ul.icons li.milk-free {background-image: url(../images/icons/MilkFree.png);}
ul.icons li.msg-free {background-image: url(../images/icons/MSG_Free.png);}
ul.icons li.contains-nuts {background-image: url(../images/icons/ContainsNuts.png);}
ul.icons li.onion-free {background-image: url(../images/icons/Onion_Free.png);}
ul.icons li.porcine-free {background-image: url(../images/icons/PorkEnzyme_Free.png);}
ul.icons li.contains-soy {background-image: url(../images/icons/ContainsSoy.png);}
ul.icons li.soy-free {background-image: url(../images/icons/SoyFree.png);}
ul.icons li.wholegrain-8g {background-image: url(../images/icons/WholeGrain_8Gram.png);}
ul.icons li.wholegrain-18g {background-image: url(../images/icons/WholeGrain_18Gram.png);}
ul.icons li.zerog-trans-fat {background-image: url(../images/icons/Zero_Trans_Fat.png);}

/* Search results list */
ul.result-list {}
ul.result-list li {padding: 10px 0; border-bottom: 1px solid #E4DBBB;}
ul.result-list li.last {border-bottom: none;}
ul.result-list li h2 {font-size: 1em;}
ul.result-list li h2,
ul.result-list li h2 a:link,
ul.result-list li h2 a:hover,
ul.result-list li h2 a:active,
ul.result-list li h2 a:visited {float: left; color: #CB7131;}
ul.result-list li p {margin-bottom: 0px;}
/* Search results pagination */
div.pagination {position: relative; padding-bottom: 8px; border-bottom: 1px solid #E4DBBB;}
div.pagination p {position: absolute; left: 0px; bottom: 8px; margin-bottom: 0px;}
div.pagination div.buttons {float: right;}
div.pagination div.buttons .btn-prev {margin-right: 8px;}


/* Bottom of Page */
#doc-bg {position: fixed; bottom: 0; left: 0; display: block; width: 684px; height: 723px; background: transparent url(../images/burlap-bg.jpg) bottom left no-repeat scroll;}
#doc-height {
    margin: 0 auto;
    height:    100%;
    min-height: 100%;
    width: 949px;
    background: transparent none;
}
* html #doc-height {
    height: 100%;
}
#content-area {
  height: 100%; 
}
/* Bottom shadow */
#doc-outer
{
    position: relative;
    top: 27px;
    margin: 0 auto;
    width: 937px;
    background: #fff url(../images/content-area-bg.png) top right repeat-y scroll;
}
#doc-inner {padding: 0 12px 0 25px;}
#content-bottom {
  background: #fff url(../images/content-area-bg.png) top right repeat-y scroll;
  padding-bottom: 1em;  /* make space for the shadow */
    position: relative;
}

#content-bottom_inn {
  background: #fff url(../images/content-area-bg.png) top right repeat-y scroll;
  padding-bottom: 0em;  /* make space for the shadow */
    position: relative;
}
#doc-shadows {
    position: absolute; 
    width: 949px;
    bottom: 0;
    left: -6px;
}
#doc-shad-l {
    position: absolute; 
    bottom: -7px; /* Slide down, these were cut a tiny bit off */
    left: 0; 
    display: block; 
    width: 6px; 
    height: 465px; 
    background: transparent url(../images/content-area-shad-l.png) top left no-repeat scroll;
}
#doc-shad-r {
    position: absolute; 
    bottom: -7px; /* Slide down, these were cut a tiny bit off */
    right: 0; 
    display: block; 
    width: 6px; 
    height: 465px; 
    background: transparent url(../images/content-area-shad-r.png) top left no-repeat scroll;
}
#doc-shad-bot {position: absolute; 
  /* bottom: 20px; # of px up from very bottom of page */ 
  left: 6px; 
  display: block; 
    width: 937px; 
    height: 7px;
    background: transparent url(../images/content-area-shad-btm.png) bottom left repeat-x scroll;
}
#doc-btm-margin {display: block; width: 100%; height: 40px;}
#doc-btm-margin_inn {display: block; width: 100%; height: 12px;}
/* ----- Footer ----- */
#foot {
  width: 889px;
  margin: 0 auto; 
  font-size:14px;
}
#foot-bg {
  height: 21px;
  padding: 0 8px;
  background: transparent url(../images/footer.png) top left repeat-x;
}
#foot span.copyright {float: left; font-weight: bold; margin-right: 1em;line-height: 21px;}
#foot ul {float: left;}
#foot ul li {float: left; }
#foot ul li a {text-decoration: none; display: block; line-height: 21px; padding-right: 15px; margin-right: 15px;background: transparent url(../images/foot-pipe.png) center right no-repeat scroll;}
#foot ul li.r a {background: transparent none !important;} 



/* Breadcrumb */
#breadcrumb {   background-repeat: repeat-y;
    margin-bottom: 0.929em;
    margin-top: 0px;
    padding-left: 5px;
    z-index: -10;}

.section-products  {background-image: url(../images/nav/products_bar.gif);}
.section-products1  {background-image: url(../images/nav/products_bar.gif);}
.section-recipes {background-image: url(../images/nav/recipes_bar.gif);}
.section-health  {background-image: url(../images/nav/health_bar.gif);}
.section-planet  {background-image: url(../images/nav/planet_bar.gif);}
.section-company ,
.section-general  {background-image: url(../images/nav/company_bar.gif);}
.section-general #breadcrumb { margin-top:4px; }

#breadcrumb  li {float: left; color:#fff; font-size:12px; line-height:16px;}
#breadcrumb  li a {text-decoration: none; background-image: url(../images/nav/arrow-8x9-white.png); color:#fff;}
#breadcrumb  li.h a {margin-left: 0; padding-left: 0; background-image: none;} /* leftmost (home) link */
#breadcrumb  li strong {font-weight: bold;}
#breadcrumb  li strong, 
#breadcrumb  li a {
    display: block; 
    margin-left: 4px; /* space to left of bullet */ 
    padding-left: 12px; /* width of bullet + space to right of bullet */ 
    background-color: transparent; 
    background-position: left center; 
    background-repeat: no-repeat;
} 
  .p
  {
	  background: url(../images/nav/arrow-8x9-white.png) no-repeat 3px!important;
	  
  }
.section-products  ol li strong,
.section-recipes  ol li strong,
.section-health  ol li strong,
.section-planet  ol li strong,
.section-company  ol li strong,
.section-general  ol li strong {color:#fff;}  
    
.section-products #breadcrumb strong,
.section-recipes #breadcrumb strong,
.section-health #breadcrumb strong,
.section-planet #breadcrumb strong,
.section-company #breadcrumb strong,
.section-general #breadcrumb strong {background-image: url(../images/icons/arrow-8x9-white.png);}


/* Left nav */
div.side-nav {width: 211px; margin: 0 0 0.857em 0;}

/* left nav header */
div.side-nav h2 {display: block; margin-bottom: 15px;}
.section-planet   div.side-nav div.hr {background-image: url(../images/rule-blu.png);}
.section-health   div.side-nav div.hr {background-image: url(../images/rule-grn.png);}
.section-products div.side-nav div.hr {background-image: url(../images/rule-yel.png);}
.section-company  div.side-nav div.hr,
.section-general  div.side-nav div.hr  {background-image: url(../images/rule-red.png);}

div.side-nav div.hr {margin-bottom: 0.929em;}

div.side-nav ul li {margin-bottom: 0.3em; font-size:12px;}
div.side-nav ul li a {display: block; text-decoration: none !important;}

/* 2nd level list */
div.side-nav ul li ul {width: 100%;}
div.side-nav ul li ul li {}

/* top level active item */
.section-planet li strong {color: #64a8d2; }
.section-health li strong {color: #9aae49; }
.section-products li strong {color: #dca920; }
.section-company li strong,
.section-general li strong {color: #cb7131; }

/* <strong> indicates current (active) page */
div.side-nav li strong {display: block; margin-bottom: 0.2em; font-weight: bold; background-color: transparent; background-repeat: no-repeat; background-position: left 5px; font-size:14px;}
.section-planet   div.side-nav li strong {}
.section-health   div.side-nav li strong {}
.section-products div.side-nav li strong {}
.section-company  div.side-nav li strong,
.section-general  div.side-nav li strong {}

/* <a href=....><strong> indicates parent of current page */
div.side-nav li a strong {padding-left: 0; font-weight: bold; background-image: none !important;} 

/* Left nav header */
.side-nav h2 {width: 100%; display: block; text-indent: -100000px; background-position: top left; background-color: transparent; background-repeat: no-repeat;}
.section-planet .side-nav h2 {height: 15px; background-image: url(../images/text/t-our-planet.png);}
.section-products .side-nav h2 {height: 15px; background-image: url(../images/text/t-our-snacks.png);}
.section-health .side-nav h2 {height: 15px; background-image: url(../images/text/t-your-health.png);}
.section-company .side-nav h2,
.section-general .side-nav h2 {height: 15px; background-image: url(../images/text/t-about-us.png);}

/* Rounded search boxes */
div.srch-box {position: relative; padding-left: 12px; background: transparent url(../images/buttons/button-sprite-l1.png) 0px -100px no-repeat;}
div.srch-box input {float: left; height: 18px; width: 152px; padding-top: 5px; /* center text vertically */ border: 0 none; background: #FEFAED; }
div.srch-box button {cursor: pointer; position: absolute; right: 10px; width: 26px; height: 25px; text-indent: -100000px; border: 0 none; background: transparent url(../images/icons/srch.png) center right no-repeat;}
div.srch-box span.r {float: left; display: block; padding-right: 20px; background: transparent url(../images/buttons/button-sprite-r1.png) right -100px no-repeat;}

/* Content area footer - email/print icons */
.foot-icons {margin-bottom: 40px; clear: both;}
.foot-icons ul {float: left;}
.foot-icons ul li {position: relative; display: block; float: left; margin-right: 18px;}
.foot-icons ul li a {cursor: pointer; display: block; padding-left: 30px; line-height: 27px; position: relative; }
.foot-icons ul li a span.content-wrap {display: block; line-height: 27px; }
.foot-icons ul li a:link,
.foot-icons ul li a:visited {text-decoration: none;}
.foot-icons ul li a:hover, 
.foot-icons ul li a:active {text-decoration: underline !important;}
.foot-icons ul li.email a {background: transparent url(../images/icons/email.png) bottom left no-repeat scroll;}
.foot-icons ul li.print a {background: transparent url(../images/icons/print.png) bottom left no-repeat scroll;}
 
/* Alternate version with prev/next buttons */
/*.foot-icons hr {clear: both;height: 1px; margin-bottom: 13px; background-color: #e4dbbb; color: #e4dbbb; border: 0 none; }*/
.foot-icons div.buttons {float: right;}
.foot-icons div.buttons .btn-prev {margin-right: 8px;}


/* -------------------- */
/* ----- Homepage ----- */
/* -------------------- */
div.ticker {margin-bottom: 0.929em;}

div.layout-home div.top-row {margin-bottom: 0.929em; margin-top: 0.9em;}
div.layout-home div.col-main {float: left; width: 663px; margin-right: 12px;}
div.layout-home div.col-right {float: left; width: 213px;}
div.layout-home div.chip a {}
div.layout-home div.c-home-01-top{margin-bottom: 0.929em;}
div.layout-home div.video {display: block; width: 663px; height: 285px; background: transparent url() top left no-repeat;}
div.layout-home div.bottom-row {margin-bottom: 0.857em;}
div.layout-home div.bottom-row div.box {float: left; display: block; width: 437px; height: 129px; }
div.layout-home div.bottom-row div.box div.content{float: right; width: 50%; padding-right: 0;}
div.layout-home div.bottom-left {margin-right: 12px; background: transparent url(../images/modules/hm-btm-left.png) top left no-repeat scroll;}
div.layout-home div.bottom-right {background: transparent url(../images/modules/hm-btm-right.gif) top left no-repeat scroll;}

/*
 * 2-Col Layout A:
 * 
 * This is a grid with 2 cols, 2 rows. 
 * Can be used in a few different configurations.
 * 
 *  left column: 438px with 13px right margin
 *  right column: 438px 
 * 
 */
div.layout-2-col div#top-row {margin-bottom: 0.929em;}
div.layout-2-col div#top-row a {float: left;}
div.layout-2-col div#top-row h2 {display: none;} /* these are for SEO only */
div.layout-2-col div#top-row a.left {margin-right: 0.929em;}
div.layout-2-col div#bottom-row {margin-bottom: 0.857em;}
div.layout-2-col div#bottom-row div.chip {float: left; width: 213px; margin-right: 12px;}
div.layout-2-col a.hoverable, 
div.layout-2-col a.hoverable img {z-index: 10; display: block;position: relative;}
div.layout-2-col div.side-nav {float: left; margin-right: 0.929em;} 

/*
 * 3-Col Layout A:
 * 
 *  left column: 213px with 13px right margin
 *  middle column: 438px with 13px right margin
 *  right column: 213px  
 * 
 */
div.layout-3-col #col-left {float: left; margin-right: 0.929em; width: 213px;}
div.layout-3-col #col-mid {float: left; margin-right: 0.929em; width: 438px; }
div.layout-3-col #col-right {float: left; width: 213px;}
div.layout-3-col #col-right div.chip {margin-bottom: 0.929em;}
div.layout-3-col #col-mid h1 {margin-bottom: 20px;}
div.layout-3-col p {margin-bottom: 1em;}

/*
 * 2-Col Layout B:
 * 
 *  example:  Nutrition Lists
 *  left column: 213px with 13px right margin
 *  right column: 665px  
 * 
 */
div.layout-2-col-B #col-left {float: left; margin-right: 0.929em; width: 213px;}
div.layout-2-col-B #col-right {float: left; width: 665px;}
div.layout-2-col-B #col-right div.chip {width: 213px;}

/*
 * 1-Col Layout:
 * 
 *  example:  ToS & Privacy Policy
 *  main column: 889px
 * 
 */
div.layout-1-col #col-main {float: left; margin-right: 0.929em; width: 889px;}

/*
 * 2-Col Layout C:
 * 
 *  top row: 886px
 *  left column: 665px with 13px right margin
 *  right column: 213px  
 * 
 */
div.layout-2-col-C #col-top {float: left; margin-right: 0.929em; width: 886px;}
div.layout-2-col-C #col-left {float: left; margin-right: 0.929em; width: 665px;}
div.layout-2-col-C #col-right {float: left; width: 213px;}
div.layout-2-col-C #col-right div.chip {width: 213px;}
div.layout-2-col-C #col-right div.right {float: right; padding: 10px 10px 5px 10px;}
div.layout-2-col-C #col-right div.right-img {float: right; width: 213px; background: transparent url(../images/misc/plain-cic.jpg) top right no-repeat scroll;}

/*
 * Content page 2-column layout (C2)
 */
#pg-content-2-col .layout-3-col blockquote {
    font-weight: bold; 
    font-family: "times new roman"; 
    font-style: italic; 
    font-size: 1.3em;
    float: right; 
    width: 60%;
    margin-left: 10px;
}
#pg-content-2-col .layout-3-col img.feature,
#pg-simple-list .layout-2-col-B img.feature {float: left; margin: 0 13px 10px 0;}

/*
 * Simple list page layout (L1)
 */
#pg-simple-list h3 {font-size: 0.857em;}

/*
 * Complex list page layout (L2)
 */
#pg-complex-list {}

/* Product Detail */
#product-detail #col-mid div.prod-img {float: left; width: auto; }
#product-detail #col-mid div.prod-img a {font-size: 0.857em; display: block; clear:both; margin: 0 auto 0.4em; text-decoration: none;}
#product-detail #col-mid div.prod-img a.img {width: auto; margin-bottom: 1em;}
#product-detail #col-mid div.prod-txt {float: right; width: 200px;}

/*
 * Mobile OLS Layout A:
 * 
 *  left column: 213px with 13px right margin
 *  middle column: 438px with 5px right margin
 *  right column: 213px  
 * 
 */
div.mobile-1-col #col-mid {float: left; margin-right: 0.929em; width: 438px; }
div.mobile-1-col #col-mid h1 {margin-bottom: 20px;}
div.mobile-1-col p {margin-bottom: 1em;}


/* +1, share & like buttons on a page level */
div.toolspace {float: right; width: 435px; margin-bottom: 10px}

ul.tools {float: right}
ul.tools li {float: left}
ul.tools li.share {cursor: pointer; width: 140px; height: 26px; overflow: hidden;}

/* share sprite */
div.share {cursor: pointer;    width: 140px; height: 26px;    overflow: hidden;
    /*background: url(../media../images/sprites/share.png) no-repeat;*/}
div.share.hover {background-position: 0px -50px;}
div.share.down {background-position: 0px -100px;}

#product-detail #col-mid h5 {margin-bottom: 14px; padding-bottom: 10px; background: transparent url(../images/rule-yel.png) bottom left no-repeat scroll;}
#product-detail #col-mid ul {font-size: 0.857em; margin-bottom: 1em;}

/* Search Results */
#search-results #col-left div.chip {margin-bottom: 13px;}
#search-results #col-left div.chip p {margin-bottom: 12px;}

div.brand-locator {margin-bottom: 0.929em;} 
div.brand-locator select {width: 90%;}

/* Brand listing */
#brands #col-right div.chip {margin-bottom: 0.929em;}
#brands #flashcontent{text-align:left;}

/* Brand detail */
#brand-detail #col-right h1 {font-size: 1em; border-bottom: 1.286px solid #dcd1ad; padding-bottom: 13px; margin-bottom: 12px;}
#brand-detail div.summary img.logo {display: block; float: left; margin-right: 1em;}
#brand-detail div.summary div.desc {float: left; width: 492px;}
#brand-detail div.summary p {margin-bottom: 1em;} 
#brand-detail table.prod-list {table-layout: auto; width: 100%; margin-bottom: 5px;}
#brand-detail table.prod-list td {vertical-align: middle; padding: 3px 0;}
#brand-detail table.prod-list td.prod {width: auto; }
#brand-detail table.prod-list td.attr {width: 222px; border-left: 1px solid #e4dab9; padding-left: 10px;}

#brand-detail table.prod-list ul.icons li {float: left; cursor: pointer; margin: 0 5px 0 0;}
#brand-detail table.prod-list ul.icons li a {padding-left: 0; width: 25px; height: 25px; text-indent: -10000px;}

/* Health landing page */
#health div.top-row {width: 100%; height: 476px; background-color: #FFB6C1; /*pink*/ margin-bottom: 1em;}
#health div.bottom-row {margin-bottom: 1em;}
#health div.bottom-row div.chip {float: left; }
#health div.bottom-row div.c-raise-hand,
#health div.bottom-row div.c-plain-141 {margin-right: 12px;}


/* Lightbox hack */
#lightbox-overlay-text-about,
#lightbox-overlay-text-interact,
#lightbox-infoContainer {display: none !important;}
#lightbox-imageBox {border: 15px solid #fff !important;}

#planet div#top-row {width: 100%; height: 323px;}
#feature img.head {margin-bottom: 10px;}

/* Tooltips */
#tooltip {
    position: absolute;
    z-index: 3000;
    font-size: 0.786em;
}

.tt-logoimg {width: 120px; height: 130px; background: transparent url() top left no-repeat scroll;}
.tt-logoimg div {padding: 5px; text-align: center; padding-right: 8px; }
.tt-logoimg div.body img {display: block; margin: 5px auto;}
.tt-ingred {background: #fff; border: 1px solid #666;}
.tt-ingred div.body {padding: 2px 5px;}

/* Horizontal rules */
div.hr {
  height: 1px;
  width: 100%;
  background-color: transparent;
  background-position: top left;
  background-repeat: no-repeat; 
}
div.hr-yel {background-image: url(../images/rule-yel.png);}
div.hr-blu {background-image: url(../images/rule-blu.png);}
div.hr-grn {background-image: url(../images/rule-grn.png);}
div.hr-red {background-image: url(../images/rule-red.png);}
div.hr hr {display: none;}

/* homepage news ticker */
div.ticker strong {float: left; }
div.ticker ul {float: left; width: 790px; margin-left: 1em; margin-right: 13px;}

/* liScroll style declarations */
.tickercontainer { /* the outer div with the black border */
    width: 738px; 
    /*height: 27px; */
    margin: 0; 
    padding: 0;
    overflow: hidden; 
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
    position: relative;
    left: 10px;
    /*top: 8px;*/
    width: 718px;
    overflow: hidden;
}
ul.newsticker { /* that's your list */
    position: relative;
    left: 750px;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul.newsticker li {
    float: left; /* important: display inline gives incorrect results when you check for elem's width */
    margin: 0;
    padding: 0;
}
ul.newsticker a {
    white-space: nowrap;
    padding: 0;
    margin: 0 50px 0 0;
} 
ul.newsticker span {margin: 0 10px 0 0;}
 
.op-steps {float: left; height: 100%; margin-right: 20px;}
 
ul.dietary li {margin-bottom: 10px;}

#ourBrands a {
    color: #666;
    text-decoration: none;
	font-size:10px;
}

#product_warp
{
	margin-top:20px;
}

/************Submenu*******************************/
/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
   /* color: #fff;
    background: #666;*/
    padding: 2px;
    display:inline-block;
	width:169px;
	font-size: 13px;
	padding-left:4px;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}

ul#menu li a, ul#menu li ul.sub-menu li a:hover
{
	text-decoration:underline;
}

/***************************************/

#leftside
{
	width:200px;
	float:left;
}

#leftside a:link,#leftside a:visited
{
	text-decoration:none !important;
	line-height:7px;
	padding-top:5px;
}

#leftside li {
    line-height: 22px;
}
#rightside
{
	width:690px;
	float:left;
	text-align:justify;
}


#form1 input,textarea,select {
    border: 1px solid #e4ca8d;
	margin-top:2px;
	margin-bottom:2px;
}

#form1 input[type="submit"]:hover,#form1 input[type="reset"]:hover
{
 cursor:pointer;
 background:#FFF6DA;
}