@charset "utf-8";

/* Eric Meyer Reset, v1.0 | 20080212, http://meyerweb.com/eric/tools/css/reset/index.html, modified */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,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}:focus{outline:0;}ins{text-decoration:none;}del{text-decoration:line-through;}table{border-collapse:collapse;border-spacing:0;}/* mods */h1,h2,h3,h4,h5,h6{font-weight:normal}
/*CLEAR FIX*/.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix {display: inline-block;}
/* Hides from IE-mac \*/* html .clearfix { height: 1%;} .clearfix {display: block;}

/*
Order of Elements...
	1. Display and Flow
	2. Positioning
	3. Dimensions
	4. Margins, Padding, Borders, Outline
	5. Typographic Styles
	6. Backgrounds
	7. Opacity, Cursors, Generated Content
*/


/***************************************************************
	Basic Elements */
body {
	font: normal 69% 'Lucida Sans', Verdana, Arial, Helvetica, sans-serif; /* 11px */
	text-align: center;
	background: #fddd00 url(../images/bg-body.jpg) no-repeat center top;
	color: #7a1501;
	line-height: 1.455em; /* 16px */
}
html>body {
	font-size: 11px;
}

/****************************************************************
	Generic Classes */


/****************************************************************
	Basic Layout */

#container {
	position: relative;
	width: 994px;
	min-height: 899px;
	margin: 0 auto;
	text-align: left;
	background: #fddd00 url(../images/bg-body.jpg) no-repeat center top;

}

#header {
	position: absolute;
	top: 0;
	left: 0;
}

#nav {
	position: absolute;
	top: 292px;
	left: 248px;
}

#container .mainCopy {
	padding: 285px 50px 0 427px;
}
#container .aboutCopy {
	min-height: 300px;
	padding-top: 345px;
	padding-right: 100px;
	background: url(../images/bg-about.png) no-repeat 747px 482px;
}
#container .aboutProbioticsCopy {
	background: url(../images/strawberries.png) no-repeat 820px 524px;
}
#container .aboutSucraloseCopy {
	background: url(../images/strawberries.png) no-repeat 820px 524px;
}
#container .productsCopy {
	padding-top: 327px;
}
#container .couponsCopy {
	padding-top: 292px;
	padding-right: 27px;
}
#container .recipesCopy {
	padding-top: 325px;
	padding-right: 40px;
}
#container .toolsCopy {
	min-height: 297px;
	padding-top: 335px;
	background: url(../images/bg-tools-content.png) no-repeat 418px 329px;
}
#container .bakingTermsCopy {
	padding-top: 332px;
	padding-right: 0;
	background: none;
}
#container .calculatorCopy {
	padding-right: 0;
	padding-top: 320px;
	background: none;
}
#container .bmiCopy {
	padding-top: 350px;
	background: url(../images/bg-bmi.jpg) no-repeat 778px 355px;
}

#footer {
	position: absolute;
	top: 632px;
	left: 427px;
	font-size: 9px; /* 7px */
	line-height: 9px; /* 9px */
}

/****************************************************************
	Header */

#header h1 {
	position: absolute;
	top: 0;
	left: 248px;
	width: 348px;
	height: 278px;
	overflow: hidden;
}
#header h1 a {
	display: block;
	width: 100%;
	height: 100%;
}
#header h1 a span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/bg-body.jpg) no-repeat -591px top;
	cursor: pointer;
}
#header h2 {
	position: absolute;
	top: 0; 
	left: 0;
	width: 248px;
	height: 125px;
	overflow: hidden;
}
#header h2 span {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/bg-body.jpg) no-repeat -343px top;
}

/****************************************************************
	Other Areas */
	
#topRightContent {
	position: absolute;
	top: 125px;
	right: 0;
}

#botLeftContent {
	position: absolute;
	top: 513px;
	left: 248px;
	width: 175px;
	text-align: right;
	font-size: 13px;
}
#botLeftContent a {
	color: #8cc341;
}
#secondNav {
	position: absolute;
	left: 427px;
	z-index: 1;
	padding-left: 26px;
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	line-height: 20px;
	color: #073d14;
}
#container .aboutProbioticsNav,
#container .aboutSucraloseNav {
	top: 237px;
	width: 296px;
	height: 46px;
	padding-top: 65px;
	background: url(../images/bg-about-nav.png) no-repeat;
}
#container .aboutSucraloseNav {
	background-position: left -111px;
}
#container .productsNav,
#container .productsNutritionalsNav,
#container .productsFoodServiceNav {
	top: 222px;
	width: 352px;
	height: 56px;
	padding-top: 70px;
	background: url(../images/bg-products-nav.png) no-repeat;
}
#container .productsNutritionalsNav {
	background-position: left -126px;
}
#container .productsFoodServiceNav {
	background-position: left -252px;
}
#container .recipesNav {
	top: 280px;
	width: 472px;
	min-height: 82px;
	padding-top: 12px;
	padding-left: 25px;
	font-size: 9px;
	background: url(../images/bg-recipes-nav.png) no-repeat;
}
#container .toolsNav {
	top: 251px;
	width: 370px;
	height: 62px;
	padding-top: 42px;
	padding-left: 25px;
	background: url(../images/bg-tools-nav.png) no-repeat;
}
#secondNav li {
	float: left;
	position: relative;
	z-index: 900;
}
#secondNav li ul { /* second-level lists */
	position: absolute;
	left: -999em; /* using left instead of display to hide navs because display: none isn't read by screen readers */
	top: 20px;
	z-index: 1000;
	width: 80px;
	padding-bottom: 7px;
	font-size: 9px;
	background: url(../images/bg-second-nav-sub.png) no-repeat left bottom;
}
#secondNav li:hover ul,
#secondNav li.sfHover ul { /* lists nested under hovered list items */
	left: -2px;
}
#secondNav a {
	position: relative;
	z-index: 900;
	float: left;
	width: 75px;
	margin-right: 2px;
	text-decoration: none;
	color: #073d14;
	background: url(../images/bg-second-nav-a.png);
}
#secondNav a:hover,
#secondNav a.current {
	color: #7a1501;
}
#secondNav li ul li {
	padding-top: 8px;
	background: url(../images/bg-second-nav-sub-top.png) no-repeat;
}
#secondNav li ul li + li {
	padding-top: 0;
	background: none;
}
#secondNav li ul a {
	width: 60px;
	padding: 5px 11px 5px 9px;
	margin: 0;
	text-decoration: underline;
	text-align: left;
	line-height: 10px;
	color: #174a22;
	background: none;
}
#rightCallout {
	position: absolute;
	top: 298px;
	right: -62px;
}
#container .aboutSucraloseCallout {
	right: -64px;
}
#productsNutritionalsFlash {
	position: absolute;
	top: 277px;
	left: 427px;
}
#productsFoodServiceFlash {
	position: absolute;
	top: 457px;
	right: -27px;
}
#couponFormConf {
	height: 284px;
}
#couponForm {
	position: relative;
	width: 524px;
	height: 284px;
	padding: 0 0 0 17px;
	background: url(../images/bg-coupon-form.png);
}
#couponForm h1 {
	position: relative;
	margin: 0;
	padding: 0;
	width: 345px;
	height: 76px;
	overflow: hidden;
}
#couponForm h1 span {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/bg-coupon-form.png) no-repeat -17px top;
}
#couponForm .formRow {
	height: 25px;
	margin: 4px 0;
	line-height: 25px;
}
#couponForm .txtInput {
	float: left;
	height: 19px;
	margin: 1px 8px 0 0;
	padding: 2px 0 0;
	border: 0;
}
#couponForm .nameInput {
	width: 260px;
}
#couponForm .emailInput,
#couponForm .streetInput {
	width: 113px;
}
#couponForm .phoneInput,
#couponForm .cityInput {
	width: 81px;
}
#couponForm .dateInput {
	width: 63px;
}
#couponForm .zipInput{
	width: 100px;
}
#couponForm label {
	float: left;
	width: 59px;
	font-weight: bold;
	font-size: 16px;
	font-style: italic;
	color: #164a21;
}
#couponForm label.zipLabel {
	width: 89px;
}
#couponForm label.optInLabel {
	float: none;
	width: auto;
	font-size: 11px;
}
#couponForm .submitBtn {
	position: absolute;
	left: 31px;
	top: 235px;
	display: block;
	width: 121px;
	height: 31px;
}
#couponForm .submitBtn span {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/bg-coupon-form.png) no-repeat -31px -235px;
	cursor: pointer;
}
#cookingTerms {
	float: left;
	width: 249px;
	height: 271px;
	padding: 8px 6px 0 4px;
	background: url(../images/bg-cooking-terms.png);
}
#cookingTerms h2 {
	position: relative;
	width: 249px;
	height: 54px;
	margin: 0;
	padding: 0;
	text-align: center;
	overflow: hidden;
}
#cookingTerms h2 span {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/bg-cooking-terms.png) no-repeat -4px -8px;
}
#mapImg {
	position: absolute;
	top: 308px;
	left: 420px;
	z-index: 1;
}
#mapImgTrans {
	position: absolute;
	top: 308px;
	left: 420px;
	z-index: 3;
}
.locations {
	position: absolute;
	width: 125px;
	z-index: 2;
}
.locations .top {
	margin: 0;
	padding: 19px 13px 0 44px;
	font-weight: bold;
	line-height: 10px;
	list-style: none;
	color: #164922;
}
.locations .top li {
	margin: 0 0 8px;
}
.locations .top .city {
	font-size: 9px;
	font-style: italic;
}
.locations .bottom {
	height: 17px;
}
.westLocations {
	top: 279px;
	left: 424px;
}
.westLocations .top {
	min-height: 122px;
	padding-right: 47px;
	padding-left: 13px;
	background: url(../images/bg-popup-west-top.png) no-repeat;
}
.westLocations .bottom {
	background: url(../images/bg-popup-west-bot.png) no-repeat;
}
.southLocations {
	top: 367px;
	left: 529px;
}
.southLocations .top {
	min-height: 120px;
	padding-right: 47px;
	padding-left: 13px;
	background: url(../images/bg-popup-south-top.png) no-repeat;
}
.southLocations .bottom {
	background: url(../images/bg-popup-west-bot.png) no-repeat;
}
.mexicoLocations {
	top: 520px;
	left: 604px;
}
.ukLocations {
	top: 420px;
	left: 904px;
}
.mexicoLocations .top,
.ukLocations .top {
	min-height: 45px;
	background: url(../images/bg-popup-mexico-top.png) no-repeat;
}
.mexicoLocations .bottom,
.ukLocations .bottom {
	background: url(../images/bg-popup-mexico-bot.png) no-repeat;
}
.midwestLocations {
	top: 259px;
	left: 630px;
}
.midwestLocations .top {
	min-height: 120px;
	background: url(../images/bg-popup-midwest-top.png) no-repeat;
}
.midwestLocations .bottom {
	background: url(../images/bg-popup-midwest-bot.png) no-repeat;
}
.eastLocations {
	top: 290px;
	left: 735px;
}
.eastLocations .top {
	min-height: 180px;
	background: url(../images/bg-popup-east-top.png) no-repeat;
}
.eastLocations .bottom {
	background: url(../images/bg-popup-midwest-bot.png) no-repeat;
}
#gallery_display {
	position: absolute;
	top: 290px;
	left: 700px;
}
.galleryThumbs {
	width: 252px;
	height: 181px;
	overflow: auto;
	border: 12px solid #e0a058;
	border-right: 0;
	font-size: 11px;
	font-weight: bold;
	line-height: 21px;
	color: #fdfbfb;
	background: #2c0904 url(../images/bg-gallery-thumbs.png) no-repeat left center;
	scrollbar-3dlight-color: #fff;
	scrollbar-arrow-color: #2c0904; 
	scrollbar-base-color: #e0a058;
	scrollbar-darkshadow-color: #2c0904;
	scrollbar-face-color: #e0a058;
	scrollbar-highlight-color: #fff;
	scrollbar-shadow-color: #a15045;
}
.galleryThumbs p.thumb {
	width: 212px;
	padding: 5px 10px;
}
.galleryThumbs p.thumb img {
	float: left;
	clear: left;
	margin-right: 5px;
}
.balancingAct {
	display: block;
	position: absolute;
	top: 513px;
	left: 747px;
}

/****************************************************************
	Footer */

#footer a {
	text-decoration: none;
	color: #7a1501;
}
#footer a:hover {
	text-decoration: underline;
}
	

/****************************************************************
	Content */
.mainCopy h1 {
	padding: 0;
	font-style: italic;
	font-weight: bold;
	font-size: 2.182em; /* 24px */
	line-height: 24px;
}
.bakingTermsCopy h1,
.findUsCopy h1 {
	font-size: 1.636em; /* 18px */
}
.mediaCopy h1 {
	width: 280px;
	padding: 18px 0;
	font-size: 1.636em; /* 18px */
	color: #7a1600;
}
.mainCopy h2 {
	padding: 0;
	font-style: italic;
	font-weight: bold;
	font-size: 1.364em; /* 15px */
}
.mainCopy h3 {
	padding: 0;
	font-style: italic;
	font-weight: bold;
	font-size: 1.182em; /* 13px */
	color: #154120;
}
.mainCopy h4 {
	padding: 0;
	font-style: italic;
	font-weight: bold;
	font-size: 1.091em; /* 12px */
}
.mainCopy sup {
	position: relative;
	top: -2px;
	font-size: .636em; /* 7px */
}
.mainCopy p.legal {
	padding-top: 0;
	padding-right: 135px;
	font-size: .819em; /* 9px */
	line-height: 1em; /* 9px */
	color: #8cc341;
}
.mainCopy ol {
	list-style: decimal;
	padding: 0 0 0 20px;
}
.mainCopy ul {
	list-style: disc;
	padding: 0 0 0 20px;
}

/* recipes */
.recipesCopy {
	font-size: 10px;
	line-height: 13px;
}
.recipesCopy h1 {
	width: 195px;
	padding: 0;
	font-size: 14px;
	line-height: 14px;
	min-height: 28px;
}
.recipesCopy h1 .servings {
	font-size: 10px;
}
.recipesCopy h2 {
	padding: 0 0 4px;
	font-size: 12px;
	line-height: 1em;
}
.recipeImage {
	float: left;
	margin: 0 5px 5px 0;
}
.recipesCopy ol {
	padding-top: 0;
	padding-botom: 0;
}
.recipesCopy a {
	font-style: normal;
	font-weight: normal;
	color: #88c041;
}
.ingredientsContent {
	float: left;
	width: 320px;
}
.directionsContent {
	clear: left;
}
.conversionLinks {
	position: relative;
	z-index: 2;
	float: right;
	margin-right: 107px;
	text-align: right;
}
.nutritionalsLink {
	display: block;
	position: absolute;
	top: 590px;
	right: 35px;
	font-size: 11px;
}
.printLink {
	position: absolute;
	top: 610px;
	right: 35px;
	font-size: 11px;
	text-align: right;
}
.popup {
	position: absolute;
	z-index: 900;
	width: 320px;
	height: 93px;
	font-style: italic;
	line-height: 12px;
	color: #fdfbfa;
}
.tipsPanel {
	display: inline;
}
.tipsContent {
	top: 437px;
	left: 490px;
}
.nutritionalsContent {
	top: 520px;
	left: 670px;
}
.popup .bg {
	min-height: 5px;
	padding: 15px 14px 9px 14px;
	background: url(../images/bg-recipes-popup.png) no-repeat;
}
.popup h3 {
	width: 250px;
	padding: 0 0 4px;
	font-size: 11px;
	line-height: 13px;
	color: #fdfbfa;
}
.popup .closeLink {
	display: block;
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 1000;
	width: 23px;
	height: 21px;
	text-indent: -999em;
	overflow: hidden;
}
.popup .bottom {
	height: 16px;
	background: url(../images/bg-recipes-popup-bot.png) no-repeat;
}

/* conversion calculator */
.conversionCalc,
#bmiCalc {
	font-size: 10px;
	line-height: 12px;
}
.conversionCalc select, 
#bmiCalc select,
.conversionCalc option,
#bmiCalc option,
.conversionCalc input,
#bmiCalc input {
	font-size: 10px;
}