html, body {behavior: url(csshover.htc); margin: 0; padding: 0; font-family: arial, helvetica, sans-serif; font-size: 1em; color: #000; background-color: #fc3; _height: 100%; _overflow-y: auto /* fixed position of menu and search bar */}
h1, h2, h3 {font-family: georgia, times, "times new roman", serif; font-size: 1.7em}
h2 {font-size: 1.49em}
h3 {font-size: 1.3em}
.hide {display: none}
acronym {cursor: help}
address {font-style: normal; line-height: 1.4em}
address a:hover {color: #fff; background-color: #dd2516}
sup, sub {line-height: 0em}
#brands sup, .row sup, li sup {font-size: 0.7em; _font-size: 0.8em}
h1 sup {font-size: 0.6em; _font-size: 0.7em}
sub { vertical-align: -0.3em}
.spacer {font-size: 0.1em; margin-bottom: -1em; clear: both}
.capt {padding-top: 0.3em; font-style: italic; font-size: 0.9em;}
.cent {text-align: center}
#wrap {padding: 1.5em 0.1em 1em 0.8em; _padding-top: 0; margin-left: 6.3em;	/* L margin should match #navlist's width */ color: #000; background-color: #fff; min-height: 24em; _height: 22.5em}
.trail {padding-top: 1em; _padding-top: 0.5em; font-weight: bold}
.trail a:hover {padding: 0.3em 0; text-decoration: none; color: #fff; background-color: #dd2516}
#footer {padding: 0.2em 2em 0.2em 6.9em; font-size: 0.9em; text-align: right}
#footer a:hover {padding: 0.3em 0; text-decoration: none; color: #fff; background-color: #dd2516}
/* menu */
#navlist {z-index: 99; position: fixed; _position: absolute; top: 0; left: 0; width: 6.3em; /* width should match #wrap's margin */ text-align: right; /* applies to item inside L nav button */ min-height: 100%}
#navlist ul {list-style: none; margin: 0; padding-left: 0; /* controls width & pos of L nav button */ overflow: hidden}
#navlist li {_float: left; /* remove extra px below logo */ font-weight: bold}
#navlist li.sub {/* subtab */ border-left: 7px solid #dd2516; /* create border to link subtab with tab */ font-weight: normal; background-color: #dd2516; /* only appears on selected submenu */}
#navlist li.sub a {background: #fc3 url(img/buttonsub.gif) left top repeat-x; border-bottom: none}
#navlist li ul.sub {display: none} /* hide subtabs unless selected */
#navlist li:hover ul.sub {display: block} /* show subtabs when hover over tab */
#navlist span {/* tab */ display: block; padding-right: 0.5em; padding-top: 1em; padding-bottom: 1em}
#navlist li.sub span {/* selected subtab */ font-style: italic; color: #fff; padding-top: 0.3em; padding-bottom: 0.3em; _height: 1%; /* draw highlighted subcat to width of tab */}
#navlist li.sub a span {/* tab selected but not this subtab */ padding-top: 0.7em; padding-bottom: 0.7em; color: #000; font-style: normal}
#navlist a {color: #000; display: block; text-decoration: none; background: #fc3 url(img/button.jpg) left top no-repeat; /* bgcolor must match color of button corner */ border-bottom: 1px dotted #fff; _height: 1%; /* don't interpret line breaks as part of HTML */}
#navlist a.home, #navlist a.home:hover {/* icon always on white bg */ background: #fff; border-bottom: 1px solid #fff; /* cancel red border */}
#navlist a.home img {display: block; margin: 0 auto; border: none; width: 5em; _width: 4.4em; height: 5em; _height: 4.4em}
#navlist a:hover {color: #fff; background: #dd2516 url(img/button_s.jpg) left top no-repeat; /* bgcolor must match color of button corner */ border-bottom: 1px solid #dd2516; /* cancel dotted white line */}
#navlist li.sub a:hover span {_margin-bottom: -1px; /* IE shrinks height of subtab */ color: #fff; background-color: #dd2516}
/* home */
.bgimg {background: #fff url(img/index-bg.jpg) 0 0 repeat-x; _background: #fff url(img/index-bg.jpg) 0 -2em repeat-x}
#intro {margin-right: 0.5em; margin-top: 0.5em; _margin-top: 2.5em; float: left; width: 25em}
#intro h1 {margin-bottom: -0.4em}
#intro h2 {font-size: 1.49em; font-style: italic; margin-top: 0; margin-bottom: -0.6em}
#intro p {line-height: 1.4em; margin-bottom: 0}
#intro ul {_margin-top: 1em; padding-left: 1.2em; _margin-left: 0.3em; line-height: 1.4em; list-style-type: square}
#intro li {padding-bottom: 0.4em}
#intro li a:hover, #intro p a:hover {padding: 0.3em 0; text-decoration: none; color: #fff; background-color: #dd2516}
#company {color: #dd2516; font-size: 3em; padding-bottom: 0.4em}
#brands {margin: 5.9em 0 0 25.8em; _margin: 5.9em 0 0 25.6em; /* 25.8em = leftcol's width + brands's L margin */}
#brands h1 {margin-bottom: 0.2em}
#brands a, #fea {display: block; float: left; border: 2px solid #fff; border-bottom: 2px solid #eee; border-right: 2px solid #eee}
#brands a {margin-bottom: 0.5em; margin-right: 0.5em; padding-bottom: 0.2em; _line-height: 1.3em; width: 9em; text-decoration: none; color: #000; overflow: hidden; /* Firefox: font <= 14pt causes box width to be more narrow than logo */}
#brands a:hover, #fea:hover {border: 2px dotted #dd2516}
#brands img {display: block; border: none; margin: 0.2em auto auto auto}
#brands a span {display: block; text-align: center}
#fea {margin-top: 1em; margin-right: 0.5em}
#fea img {margin: 0.3em 0.3em 0 0.3em; _margin: 0.3em 0.3em 0.3em 0.3em; border: none}
/* search bar */
#header {margin: 0; padding-top: 0.2em; padding-bottom: 0.2em; padding-left: 7.1em; z-index: 1; background-color: #fc3; position: fixed; _position: relative;}
head:first-child+body #header {width: 100%} /* IE interprets 100% as 120% */
#header form {margin: 0}
#header span {margin-left: 1em; font-weight: bold}
#header a.tele, #header a.tele:hover {cursor: text; color: #000; text-decoration: none}
#header input#q {margin-right: 0.5em; font-size: 0.9em}
/* search results */
dd {line-height: 1.4em; margin: 0; padding: 0}
.results {_margin-top: 0.5em}
dt {font-family: georgia, times, "times new roman", serif; font-size: 1.1em; margin-top: 1em}
dt a:hover, p.nav a:hover {padding: 0.3em 0; text-decoration: none; color: #fff; background-color: #dd2516}
.nav a {margin-right: 0.7em}
.nav strong {font-size: 1.3em}
.nav strong a:link, p.nav strong a:visited, p.nav strong a:active {color: #00c}
.nav strong a:hover {color: #fff}
.nav span {padding: 0.2em; font-style: italic; background-color: #dd2516; color:#fff; margin-right: 0.7em}
/* aboutus & contact */
.aboutus, .aboutus2 {margin-top: 0.7em; float: left}
.aboutus {width: 26em; _width: 25em}
.aboutus2 {width: 23.5em; _width: 22.5em;}
.aboutus img, .aboutus2 img {margin: 1em 0 -1em 0}
.aboutus ul, .aboutus2 ul {margin-top: 0.5em; padding-left: 1.4em; _margin-left: 0; line-height: 1.4em; list-style-type: square}
.aboutus a:hover, .aboutus2 a:hover {padding: 0.3em 0; text-decoration: none; color: #fff; background-color: #dd2516}
.aboutus a.tele, .aboutus2 a.tele, .aboutus a.tele:hover, .aboutus2 a.tele:hover {cursor: text; background-color: #fff; color: #000; text-decoration: none}
.aboutus p, .aboutus2 p {line-height: 1.4em}
.aboutus h1, .aboutus2 h1 {margin-top: 0.3em; margin-bottom: -0.5em}
.aboutus h2, .aboutus2 h2 {margin-bottom: -0.3em}
/* e-mail contact */
.maildiv {margin-top: 1.15em; _margin-left: 0.3em; line-height: 1.4em}
.maildiv input, .maildiv select {font-size: 0.9em}
.fminfofull {margin-left: 0.3em; _margin-left: 0.5em}
.fmerrorbox {_margin-left: -0.3em}
.maildiv input {margin-bottom: 1em}
.maildiv select {margin-bottom: 1em}
fieldset {margin-bottom: -1em; margin-left: -0.7em; border: none}
legend, .maildiv .fmerrortitle {font-family: georgia, times, "times new roman", serif; font-size: 1.7em; font-weight: bold}
legend {margin-bottom: -0.5em}
.fmerrortitle {color: #dd2516; margin-bottom: -0.3em; _margin-bottom: -0.5em}
.legendspacing {_margin-bottom: -1.5em; _height: 0.1em}
.sidelbl {float: left; text-align: right; margin-right: 0.5em; width: 9.8em}
.fmrequired {color: #dd2516}
.maildiv ul {padding-left: 1.4em; _margin-left: 0; list-style-type: square; color: #dd2516}
.maildiv li {line-height: 1.4em}
/* history */
.hist {margin-top: 0.5em}
.hist ul {padding-left: 1.4em; _margin-left: 0; list-style-type: square; line-height: 1.4em}
/* career */
.career {_margin-top: 0.5em; float: left; width: 25em; padding-right: 1em}
.career p {line-height: 1.4em; padding-bottom: 0.4em; _padding-bottom: 0}
.career p a:hover {padding: 0.3em 0; text-decoration: none; color: #fff; background-color: #dd2516}
.career h1, .career h2 {margin-bottom: -0.5em}
.career ul {padding-left: 1.4em; _margin-left: 0; margin-top: -1.3em; margin-bottom: 1.3em; list-style-type: square; line-height: 1.4em;}
/* product detail */
div.prod {width: 28em; _width: 27em}
div.prod {float: left; padding-right: 0.5em}
div.prod form {margin: -0.7em auto -0.3em auto}
div.prod input {margin-right: 0.7em}
div.prod div.bc {display: none}
div.prod p {margin-top: -0.5em; line-height: 1.4em}
div.prod a:hover {padding: 0.3em 0; text-decoration: none; color: #fff; background-color: #dd2516}
div.prod ol {margin-top: -1em; padding-left: 1.4em; _margin-left: 0.3em}
div.prod img {padding-top: 0.7em}
div.prod h1 {margin-top: 0.3em}
div.prod h2 {font-family: arial, helvetica, sans-serif; color: #dd2516; background-color: #fec; padding-left: 0.3em; margin-bottom: -0.7em; _margin-bottom: -0.8em}
div.prod ul {list-style-type: square; background-color: #fec; line-height: 1.4em; padding-left: 1.4em; _margin-left: 0; _padding-left: 1.5em}
div.prodimg {width: 25em}
div.prodimgthin {width: 16em}
div.prodimgxthin {width: 11em}
div.prodimgtaller {min-height: 33.4em; _height: 34em} /* stretch height of div so nutrition facts doesn't wrap under it */
/* nutrition facts */
#nf {padding: 0.3em; background-color: #fec}
table {line-height: 1.4em; width: 100%; font-family: arial, helvetica, san-serif}
th {text-align: left; font-weight: bold; font-family: helvetica, arial, san-serif}
table b {font-size: 1.1em; font-weight: bold; font-family: helvetica, arial, san-serif}
thead th {color: #dd2516; line-height: 1em; font-size: 1.49em}
thead td {border: none}
tbody th {background-color: #fec}
td {/* 1px tall bar */ border-top: 0.08em solid #000; background-color: #fec}
.footnote {line-height: 1.25em; padding: 0.3em 0.1em} /* Not a significant source... */
.bul {/* bullet point */ font-family: "helvetica black", "arial black", san-serif; text-align: center; padding-right: 1.5em; _padding-right: 0em}
.dv {/* % daily value */ text-align: right}
.t3 {/* thickest bar */ border-top: 1em solid #000}
.t2 {/* thinner bar */ border-top: 0.5em solid #000; font-size: 0.8em}
.t21 {/* used for French NF */ border-top: 0.5em solid #000}
.white {color: #fec; background-color: #fec}
td span {/* indent 1px bar, doesn't work in IE */ _visibility: hidden; position: relative; left: -0.1em; top: -0.2em; float: left; width: 1em; height: 0.1em; border-top: 0.2em solid #fec}
hr {display: none} /* separate 4 sections of NF for non-GUI browsers */
tfoot, .aps {font-size: 0.8em} /* aps = amount per serving */
caption {display: none} /* show only for non-GUI browser */
/* product by brand */
.row {float: left; width: 53.5em}
.row h1 {_margin-top: 0.3em; margin-bottom: -0.5em; _margin-bottom: 0}
h1.row {margin-top: 0.3em}
h1.row2 {margin-bottom: -0.5em; _margin-bottom: 0} /* <h2 class="row"> just below this */
.row h2 {margin: 0.7em 0 0.2em 0}
.row3 {margin-top: 2em} /* <h2 class="row row3"> only appears with new product */
.row p {float: left; width: 25.7em; line-height: 1.3em; padding-right: 1em; _padding-bottom: 1em}
.row a {display: block; float: left; _margin-top: 0.2em; margin-bottom: 0.5em; margin-right: 0.5em; padding-top: 0.2em; min-height: 10.6em; _height: 10em; width: 12.5em; text-decoration: none; color: #000; border: 2px solid #fff; border-bottom: 2px solid #eee; border-right: 2px solid #eee}
a.recent {border: 2px dashed #fc3}
a.recent em {color: #dd2516}
.minheight {width: auto} /* row wraps to occupy entire width of window */
.minheight a { /* shorten height of box to fit 2-line desc */ min-height: 9.2em; _height: 9.4em; _line-height: 1.3em; overflow: hidden}
.row img {margin-left: auto; margin-right: auto; margin-bottom: 0.2em; display: block; border: none}
.row span {display: block; text-align: center}
.row a:hover {border: 2px dotted #dd2516}
/* product by type */
.bytype {float: left; width: 27em; _width: 26em; padding-right: 0.5em}
.bytype ol {padding-left: 1.9em; _margin-left: 0.3em}
.bytype li {padding-bottom: 0.7em}
.bytype h2 {margin-bottom: -0.5em}
.bytype li a {text-decoration: none; border-bottom: 1px solid #ddf}
.bytype li a em {color: #dd2516}
.bytype li a:hover {padding: 0.3em 0; border-bottom: none; color: #fff; background-color: #dd2516}
.bytype h2 img {text-align: center; _margin-top: 0.5em; border: 1px solid #ccc}
.bytypeheader h1 {margin-bottom: -0.3em; _margin-top: 0.3em}
/* customer */
div.cust {margin-right: 0.3em; _margin-right: 0em; width: 27em; _width: 26em; float: left}
div.cust h1, div.cust h2 {_margin-top: 0.4em}
div.cust p {line-height: 1.4em; margin-top: -1em}
div.cust ul {padding-left: 1.4em; _margin-left: 0; margin-top: -0.5em; list-style-type: square}
div.cust img {border: none}
div.cust a:hover {_line-height: 1em; padding: 0.3em 0; text-decoration: none; color: #fff; background-color: #dd2516}
/* event */
div.event h1 {_margin-top: 0.3em; margin-bottom: -0.5em}
div.event br {clear: left}
div.event a.txt:hover {padding: 0.3em 0; color: #fff; background-color: #dd2516; text-decoration: none}
div.event a:hover {_border: none}
div.event a:hover img {border: 2px dotted #dd2516}
div.event h2 a {float: left; display: block; text-decoration: none}
div.event span {padding-left: 0.5em; float: left; line-height: 1.5em}
div.event h2 img {_margin-top: 0.2em; _margin-bottom: 0.2em; border: 2px solid #fff; border-bottom: 2px solid #eee; border-right: 2px solid #eee}
/* recipe */
.recipheader h1 {_margin-top: 0.3em; margin-bottom: -0.3em}
.recipheader em {background-color: #dd2516; color: #fff; padding: 0.3em 0}
div.recip form {text-align: center}
div.recip h1, div.recip h2, div.recip h3 {margin-bottom: 0}
div.recip h1 {text-align: center}
div.recip h2 {font-size: 1.3em}
div.recip h3 {font-size: 1.1em}
div.recip p {text-align: center; margin: 0 auto; _margin-bottom: -1em; line-height: 1.4em}
.steps {float: left; width: 27em; _width: 26em; padding-right: 0.5em; line-height: 1.4em; margin-top: 0.3em}
.steps ol {padding-left: 1.8em; _margin-left: 0.2em; margin-top: 0.5em}
.steps ul {list-style-type: square; padding-left: 1.4em; _margin-left: 0.3em; margin-top: 0.5em}
.steps li {padding-bottom: 0.3em}
.steps a:hover {padding: 0.3em 0; text-decoration: none; color: #fff; background-color: #dd2516}
.list {text-align: center; background: #fc3 url(img/buttonsub.gif) repeat-x; margin-right: 0.7em; padding: 0.3em; line-height: 1.7em; margin-bottom: 0}
.list a:hover {padding: 0.3em 0; text-decoration: none; color: #fff; background-color: #dd2516}
/* press */
div.press {line-height: 1.4em; width: 27em; _width: 26em}
div.press h1, div.press h2 {line-height: 1.2em}
div.press h2 {margin-bottom: -0.5em}
/* privacy */
.priv {margin-top: 0.7em; margin-right: 1em; width: 26em; line-height: 1.4em; float: left}
.priv a:hover {padding: 0.3em 0; color: #fff; text-decoration: none; background-color: #dd2516}
.priv h1 {line-height: 1em; margin-bottom: -0.3em; _margin-bottom: -0.5em}
.priv ol {padding-left: 1.8em; _margin-left: 0.2em; margin-top: -0.9em}