/*---------- HTML5 Doctor Reset ----------*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } ins { background-color: #303030; color: #fff; text-decoration: none; } mark { background-color: #303030; color: #fff; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } body { font:13px/1.231 sans-serif; *font-size:small; } select, input, textarea, button { font:99% sans-serif; } pre, code, kbd, samp { font-family: monospace, sans-serif; } /*html { overflow-y: scroll; }*/ a:hover, a:active { outline: none; } ul, ol { margin-left: 2em; } ol { list-style-type: decimal; } nav ul, nav li { margin: 0; list-style:none; list-style-image: none; } small { font-size: 85%; } strong, th { font-weight: bold; } td { vertical-align: top; } sup { top: -0.5em; } sub { bottom: -0.25em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; } textarea { overflow: auto; } .ie6 legend, .ie7 legend { margin-left: -7px; } input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; } .ie7 input[type="checkbox"] { vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } button, input, select, textarea { margin: 0; } input:valid, textarea:valid   {  } input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; } .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } ::-moz-selection{ background: #000; color:#fff; text-shadow: none; } ::selection { background:#000; color:#fff; text-shadow: none; } a:link { -webkit-tap-highlight-color: #1e9999; } button {  width: auto; overflow: visible; } .ie7 img { -ms-interpolation-mode: bicubic; } body, select, input, textarea { color: #444; } h1, h2, h3, h4, h5, h6 { font-weight: bold; }

/*---------- Body & Wrapper -----------*/

/*html { font-family: 'global' } */

html {
	font-family: 'global'
}
* html { /* IE 6 */
	font-family: 'global'
}
*+html { /* IE 7 */
	font-family: 'global'
}
@media \0screen { /* IE 8 */
	html {
		font-family: 'global'
	}
}

html { height: 105%; }

body { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 20px; color: #000;  -webkit-font-smoothing: antialiased; font-smoothing: antialiased; }
	h1, h2, a#startButton, h3, .closeButton, h4 {  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif; font-weight: normal; color: #0b9bc9; text-transform: uppercase; font-size: 60px; }
	h2 { font-size: 30px; color: #000; margin: 20px 0; }
	a {  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 13px; font-weight: bold; text-shadow: 0 1px 0 #000; line-height: 26px; color: #fff; text-decoration: none; font-weight: normal; }
	p { line-height: 30px; font-weight: bold; }
	em { font-style: italic; }
	.cf { clear: both; }

/*
New code for headers in the indredients dropdown and the first page ingredients | SP | 6/12/2015 ----------*/

.hangingIndent { padding-left: 22px; text-indent: -22px; }

.ingredientHeader { font-weight: bold; display: block; margin: 25px 0 -14px 0; }
.ingredientHeader:first-of-type { margin: 0 0 -14px 0; }
	#ingredientsHolder p.hangingIndent { font-weight: normal; margin-bottom: -23px; line-height: 23px; }
	.footnote { font-size: 15px; font-style: italic; }

.descriptiveText h4 { font-weight: normal; margin: 20px 0 10px 0; padding: 0; font-size: 20px; color: #000; }

#nutritionalHolder h4 { color: #fff; font-size: 25px; text-transform: none; font-weight: normal; }

	#wrapper { width: 1070px; margin: 0 auto; }

		/* overflow hidden kills the video controls (and the bottom 10% of the video)
		/* .instructionResource, .disclaimerResource { width: 1070px; max-height: 550px; border-radius: 4px; overflow: hidden; margin: 60px 0 20px 0; } */
		.instructionResource, .disclaimerResource { width: 1070px; border-radius: 4px; margin: 60px 0 20px 0; }
		/* #imgHolder { width: 1070px; max-height: 550px; border-radius: 4px; overflow: hidden; margin: 60px 0 20px 0; } */

			/* #mainImg { float: left; background-image: url(../img/mainImg.jpg); background-size: 1112px 705px; width: 1070px; height: 550px; } */
			#mainImg { pointer-events: none; float: left; background-size: 1112px 705px; width: 1070px; height: 550px; }

			nav { float: right; margin: 59px 0 0 548px; }	
			.lt-ie9 ul.nav { float: right; margin: 60px 0 0 548px; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000); zoom: 1;  }						
				nav li { display: inline-block; width: 106px; height: 26px; margin: 0 0 0 20px; text-align: center; }
				.lt-ie9 ul.nav li { display: inline-block; margin: 0; padding: 0;}
				.lt-ie8 ul.nav li { display: inline; }
					nav li a { display: block; background: rgba(0,0,0,.7); border-radius: 0 0 4px 4px; box-shadow: 0 1px 0 rgba(255,255,255,.3); }
	     			.lt-ie9 ul.nav a { display: block; padding: 10px 25px; }
					nav li a:hover { background-color: #000; }

			#navContainer { display: none; }

			a#startButton { float: right; text-shadow: 0 0 0; font-size: 30px; background: url(../img/nextArrow.jpg) no-repeat right center; width: 108px; display: block; margin: -45px 0 0 0; }
			a#startButton:hover { width: 115px; margin-right: -7px; }

/*---------- Navigation -----------*/

	#secondNav { width: 1070px; float: left; margin-top: 320px; position: absolute; pointer-events: none; }

	a.npButtons { display: block; background-color: rgba(255,255,255,.5); width: 29px; height: 54px;  pointer-events: auto;  }
	.lt-ie9 a.npButtons { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff,endColorstr=#7fffffff); zoom: 1; }
		#leftImg, #rightImg { width: 22px; height: 19px; margin: 17px 0 0 3px; }
		#rightImg { margin: 17px 0 0 5px; }
		#iLeftImg, #iRightImg { display: none; }
	.l { margin-left: 0px; border-radius: 0 4px 4px 0; float: left; }
	.r { margin-right: 0px; border-radius: 4px 0 0 4px; float: right; }
	.l:hover { margin-left: 0; width: 54px; }
	.r:hover { margin-right: 0; width: 54px; }
	.l:hover > #leftImg { margin: 17px 0 0 13px; }
	.r:hover > #rightImg { margin: 17px 0 0 20px; }

	.toggleMenu { float: left; z-index: 2; display: none; width: 100%; height: 44px; background-color: rgba(0,0,0,.8); margin-top: 20px; left: 0; }
		.toggleMenu span { float: right; display: block; width: 30px; height: 4px; border-radius: 5px; background-color: #fff; clear: both; margin: 2px 10px 2px 0; }
		#fs { margin-top: 10px; }

/*---------- Info Holders -----------*/

		.closeButton { background: url(../img/closeButton.png) no-repeat 0 0; width: 41px; height: 44px; display: inline-block; /*float: right; margin-left: -41px;*/ }

		/*#ingredientsHolder, #videoHolder, #nutritionalHolder, #printHolder { float: left; margin: -1000px 0 0 0; width: 10000px; height: 10000px; background: rgba(0,0,0,.7); display: none; }*/
		#ingredientsHolder, #videoHolder, #nutritionalHolder, #resourceViewHolder, #printHolder { float: left; margin: -26px 0 0 0; display: none; overflow: hidden; }
		.lt-ie9 #ingredientsHolder, .lt-ie9 #videoHolder, .lt-ie9 #nutritionalHolder, .lt-ie9 #resourceViewHolder, .lt-ie9 #printHolder { margin-top: -46px; }
		.lt-ie8 #ingredientsHolder, .lt-ie8 #videoHolder, .lt-ie8 #nutritionalHolder, .lt-ie8 #resourceViewHolder, .lt-ie8 #printHolder { margin-top: 60px; position: absolute; }
			.textHolder { position: relative;  background: rgba(0,0,0,.9); display: block; width: 1070px; height: 591px; padding-bottom: 20px; }
			.lt-ie9 .textHolder { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#e5000000,endColorstr=#e5000000); zoom: 1; }
				h3 { color: #fff; display: block; float: left; padding: 10px 10px 0 20px; }
				/*p.mainText { float: left; margin: 5px 0 0 25px; width: 600px; font-weight: normal; color: #fff; }*/
				p.mainText { float: left; margin: 20px 0 0 25px; width: 710px; font-weight: normal; color: #fff; font-size: 16px; line-height: 24px; }
				p.mainText.firstCol { clear: left; }
				p.mainText.twoCol { width: 45%; width: calc(50% - 25px); }
				p.mainText li { float: left; width: 100%; }
				/*#resourceViewHolder { margin-top: -550px; width: 100%; height: 100%; background-color: rgba(0,0,0,.9); }*/
				/*TLR: removed width: 100%*/
				#resourceViewHolder { margin-top: -601px; height: 100%; background-color: rgba(0,0,0,.9); }
				
				.resourceDetail {	width: 550px; }

				/* SBP: Added this to stop the videos from looking bad */
				#videoHolder .mainText { width: 100%; }
					#videoHolder .mainText .resource { width: 45%; }
 
/*---------- Hidden Elements For iPhone ----------*/

		#fadeOut { display: none; }

/*--global--TLR: also set in html element as font-family - solely "body:after" fails in chrome as of 33.0.1750.117 m */
html { font-family: 'global' }
body:after { content: 'global'; display: none; }

/*-- IE 7/8 are not setting the size because it is the "same" as when it loads, need to trigger once? --*/
/*html { font-family: 'small' }
body:after { content: 'small'; display: none; }*/


/*--large--*/
/*@media all and (min-width: 1100px) {*/
@media screen and (min-width: 1100px) {

	html { font-family: 'larger'; }	
	body:after { content: 'larger'; display: none; }

}

/*---------- Smaller Screen ----------*/

/*@media (max-width: 1100px) {*/
@media screen and (max-width: 1100px) {
	
	html { font-family: 'large'; }
	body:after { content: 'large'; display: none; }

	/* #wrapper, #imgHolder { width: 900px; } */
	
	#wrapper, .instructionResource, .disclaimerResource { width: 900px; }

		#mainImg { pointer-events: none; background-size: 90%; width: 570px; }

		nav { margin: 59px 0 0 0; }

		#secondNav { margin-top: 618px; width: 900px; }

		/*#ingredientsHolder, #videoHolder, #nutritionalHolder, #resourceViewHolder, #printHolder { margin: -500px 0 0 -45px; }
			.textHolder { width: 900px; overflow: hidden; margin: 560px 0 0 45px; position: absolute; }*/
			
		#ingredientsHolder, #videoHolder, #nutritionalHolder, #resourceViewHolder, #printHolder { margin: -500px 0 0 -45px; }
		.lt-ie9 #ingredientsHolder, .lt-ie9 #videoHolder, .lt-ie9 #nutritionalHolder, .lt-ie9 #resourceViewHolder, .lt-ie9 #printHolder { margin-top: -500px!important; }
			.textHolder { width: 900px; overflow: hidden; margin: 560px 0 0 45px; position: absolute; /*height: 506px;*/ }
			
			h3 { font-size: 40px; }
			p.mainText { width: 700px; font-size: 15px; }

		a.npButtons { margin-top: -310px; }

		p.mainText + #resourceViewHolder { margin-left: 250px; }

}

.resource { float: left; margin-left: 15px; margin-top: 10px; /*width: 150px;*/ }
	.resource img { cursor: pointer; float: left; clear: both; }
	span.resourceTitle { float: left; }

/*---------- iPad < -----------*/

/*@media (min-device-width: 768px) and (max-device-width: 1024px) {*/
@media screen (min-device-width: 768px) and (max-device-width: 1024px) {

	.spaceBreak { display: none; }
	/*@media only screen and (max-device-width: 959px) and (-webkit-min-device-pixel-ratio: 1) */
	
	html { font-family: 'medium'; }
	body:after { content: 'medium'; display: none; }	
	
#wrapper { padding-bottom: 25px; }

	/* #wrapper, #imgHolder { width: 800px; } 

		#imgHolder { margin: 20px 0; height: 507px; } */

		/*nav { margin: 0; box-shadow: none; float: left; width: 100%; left: 0; }
				nav ul { width: 100%; height: 100%; background: transparent; left: 0;  }
				nav ul li { height: 80px; display: block; width: 100%; float: left; margin: 0; }
					nav ul li a { display: block; line-height: 80px; border-radius: 0; font-size: 20px; left: 0; width: 100%; }*/

		.disclaimerResource { margin: 20px 0; }

		#ingredientsHolder, #videoHolder, #nutritionalHolder, #resourceViewHolder, #printHolder { float: left; margin: -564px 0 0 -845px; }
		
		#wrapper, .instructionResource, .disclaimerResource { width: 90%;  }
		.instructionResource { margin: 20px 0; }

		/*.textHolder { width: 800px; height: 450px; margin-top: 520px; background: rgba(0,0,0,.98); }*/
		/* TLR: increased height */
		.textHolder { width: 90%; min-height: 423px; margin: 584px 0 0 844px; background: rgba(0,0,0,.98); z-index:9999; box-shadow: 0 5px 5px rgba(0,0,0,.5); }

		#secondNav { margin-top: 545px; width: 90%; }


		/*.resource { width: 130px; }*/
			.resource img { width: 130px; }
			p.mainText { width: 100%; }

			.resourceDetail { padding-top: 25px; margin: 0 auto; padding: 0 25px; }

			a.npButtons { margin-top: -350px; }
 			#imgHolder { width: 101%; }

		nav { margin: 18px 15px 0 0; }

		img { width: 110%; }

		.closeButton { background-size: 50%; background-position-y: 100%;  }
}


/*@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {*/
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

	.spaceBreak { display: none; }

	#wrapper, .instructionResource, .disclaimerResource { width: 800px; margin: 15px auto 0 auto; }
		img { width: 100%; }

	nav { margin: 13px 15px 0 0; }

	#secondNav { width: 804px; margin-top: 570px; }

	.textHolder { width: 810px; margin: 579px 0 0 844px; min-height: 563px; }

}

input[type="button"] { background-color: rgba(0,0,0,.7); border-radius: 4px; width: 100%; height: 66px; float: left; border: none; font-size: 30px; color: #fff; text-shadow: 0 1px 0 #000; }
	input[type="button"]:hover { background-color: #000; }

/*---------- FF Fixes -----------*/

@-moz-document url-prefix() {
    .closeButton { margin-top: 70px; }
}

.descriptiveText { float: left; width: 98%; }

.copyright { font-size: 12px; font-style: italic; }
.copyright a { font-weight: normal; text-shadow: 0 0 0; color: #000; }

/*---------- iPhone ----------*/

/*@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {*/
@media screen and (min-device-width: 320px) and (max-device-width: 568px) {

/*TLR: what about small sizes on desktop? */
/*@media only screen and (min-width: 320px) and (max-width: 568px) {*/

/*@media (max-width: 760px) and (-webkit-min-device-pixel-ratio: 1.5) and (min-resolution: 144dpi) {*/
	
	html { font-family: 'small'; }
	body:after { content: 'small';	display: none; }

	.spaceBreak { display: none; }

	body { background: #000; }

	h1 { font-size: 30px; }

	.descriptiveText { float: none; width: 98%; margin: 0 2%; padding: 0 0 50px 0; }

		#wrapper { width: 100%; }
		
		p.mainText, p.mainText.twoCol { width: calc(100% - 25px); }


			nav { margin: 44px 0 0 0px; box-shadow: none; position: absolute; width: 100%; left: 0; }
				nav ul { width: 100%; height: 100%; background: transparent; left: 0;  }
				nav ul li { height: 80px; display: block; width: 100%; float: left; margin: 0; }
					nav ul li a { display: block; line-height: 80px; border-radius: 0; font-size: 20px; left: 0; width: 100%; }

			input[type="button"] { background-color: rgba(0,0,0,.7); border-radius: 0px; width: 100%; height: 66px; float: left; border: none; font-size: 15px; color: #fff; text-shadow: 0 1px 0 #000; }
				 input[type="button"]:hover { background-color: #000; }

		/* #imgHolder { width: 620px; border-radius: 0; margin: 0 auto; } */		
		.instructionResource, .disclaimerResource { width: 100%; border-radius: 0; margin: 44px auto 0 auto; }
	
		/* #mainImg { float: left; background-image: url(../img/mainImg@2x.jpg); background-size: 700px 444px; margin-left: -50px; } */
		#mainImg { pointer-events: none; float: left; background-size: 700px 444px; margin-left: -50px; }
			
		#fadeOut { display: block; position: absolute; margin: 210px 0 0 0px; z-index: 999; width: 100%; background-repeat: repeat-x; }

		#secondNav { position: fixed; width: 100%; bottom: 0; margin: 0 0 0 0; z-index: 10; }
	
			a.npButtons { width: 50%; height: 40px; background-color: #000; z-index: 10; margin: 0 0 0 0; }
			.l { margin: 0 0 0 0; border-radius: 0; background-color: #fff000; float: left; }
			.r { margin: 0 0 0 50%; border-radius: 0; float: right;  }
			#leftImg, #rightImg { display: none; }
			#iLeftImg, #iRightImg { display: block; width: 12px; height: 18px; margin: 12px 0 0 50%; position: relative; }

			.l:hover, .r:hover { width: 50%; }
	
		#iTextHolder { position: absolute; margin: -220px 0 0 0; z-index: 11; padding: 0 10px; }
	
			#iTextHolder p { color: #fff; }
	
			#iTextHolder p { font-weight: normal; }

			#iPhoneNav { display: block; float: right; }
				#iPhoneNav a { display: block; }

		#ingredientsHolder, #videoHolder, #nutritionalHolder, #resourceViewHolder, #printHolder { margin: -519px 0 0 0; left: 0; float: left; width: 100%; }
			/*.textHolder { background: #000; width: 100%; z-index: 9999; min-height: 100%; left: 0; margin-left: 0; }*/
			
			/*TLR: changed it from min-height:100% to padding-bottom:5000px;  otherwise you can't scroll the videos*/
			/*.textHolder { background: #000; width: 100%; z-index: 9999; padding-bottom:5000px; left: 0; margin-left: 0; }*/
			.textHolder { background: #000; width: 100%; z-index: 9999; min-height:100%; padding-bottom:6000px; left: 0; margin-left: 0; }

			.toggleMenu { position: absolute; z-index: 2; display: none; width: 100%; height: 44px; background-color: #000; margin-top: 0px; left: 0; }
				.toggleMenu span { float: right; display: block; width: 30px; height: 4px; border-radius: 5px; background-color: #fff; clear: both; margin: 2px 10px 2px 0; }

		.responsiveImg { max-width: 100%; }

		#dismissDisclaimer { float: left; }

		.closeButton { width: 20px; height: 22px; }
			.closeButton { background-size: 100%; }

			.resource { width: 90%; margin-left: 0; overflow: hidden; clear: both; }
			.resource img { width: 100%; margin-left: -10px; }

			.cf:before, .cf:after { content: " "; display: table; }
			.cf:after { clear: both; }

/*.textHolder { overflow: visible; position: relative; padding-bottom: 50px; }*/
}
			/*---------- FF Fixes -----------*/

@-moz-document url-prefix() {
    .closeButton { margin-top: 45px; }
}


/*
@media (max-width: 400px) {	
	body:after { 
		content : 'smaller';
		display : none;
	}

	#imgHolder { width: 620px; border-radius: 0; margin: 0 auto; } 
	
	.instructionResource, .disclaimerResource { width: 620px; border-radius: 0; margin: 0 auto; }	
}
*/


/*---------- Animations ----------*/

a, #leftImg, #rightImg, input[type="button"] {
-webkit-transition-timing-function: linear; -webkit-transition-duration: .25s;
   -moz-transition-timing-function: linear;    -moz-transition-duration: .25s;
    -ms-transition-timing-function: linear;     -ms-transition-duration: .25s;
     -o-transition-timing-function: linear;      -o-transition-duration: .25s;
        transition-timing-function: linear;         transition-duration: .25s; 
}

.disclaimer {
	background-color: orange;
	position:absolute;
	height: 100%;
	width: 100%;
	z-index: 100;
}

.disclaimer p {	color: #000; background-color: #fff; font-size: 14px; font-weight: lighter; padding: 10px 0; margin-top: -15px; }

#instructions {
	z-index:-1;
}


/*----------- Video embedding -----------*/
/*
.video {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px; height: 0; overflow: hidden;
}
 
.video iframe,
.video object,
.video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
*/   

@-moz-document url-prefix() {
    h3 {
        padding: 0 10px 0 20px;
        margin: -10px 0;
    }
}