/* TOP PAGE ELEMENTS */


html, body { 
	margin: auto;
	padding: auto;
}

body {  
	text-align: center;
	
	background: #000 url(../images/bg.gif) repeat-y top center;
}

h1, h2, h3, h4, ul, li, form { 
	padding: 0;
	margin: 0;
	list-style: none;
}

form {  
	margin-top: -3px;
}


.top {  
	/*height: auto;*/
	width: auto;
	background: #000;
	float: auto;
}


#page, #page2 { 
	padding:auto;
	height: auto;
	width: 775px;
	#width: 776px;	
	text-align: left;
	margin: auto ;
}


.logo { 
	width: 203px;
	float: left;	
	background: url(../images/logo.jpg);
	height: 99px;
}

#page2 .logo {  
	background: url(../images/logo_full.jpg);
	height: 171px;
}

#page2 .logo a {  
	display: block;
	height: 141px;
	width: 193px;
	position: absolute;
}


.search {
	width: 405px; 
	height: 39px;
	padding: 19px 0 0 167px;
	float: left;
	background: #000;
}

.submit {  
}

form, input {
	float: left;
}

form {  
	width: 200px;
}

input {  
	font-size: 9px;
	color: #3e3d3e;
}

.search div {  
	float: left;
	padding: 0 9px 0 0;
	font-weight: bold;
}

.submit {  
	margin-left: 4px;
}

.nav {
	float: left;
	padding: auto;
    margin: auto;
	width: auto;
	height: auto;
}

#page2 .nav { 
	height: 75px;
}

.bg_start {  
	background: url(../images/bg_start.jpg) no-repeat;
	width: 32px;
	height: 38px;
	position: absolute;
}

.background {
	float: left;
	width: 775px; 
}

.padding {
	float: left;  
	padding: 0 0 0 32px;
}

#page2 .padding {
	padding: 0 0 0 56px;
}

.bg_start {  
	margin-left: -32px;
}

/* BOTTOM PAGE ELEMENTS */


.scroller {  
	float: left;
}

.content {  
	padding: 10px 8px 0 15px;
	border-left: 1px solid #77d9f1;
	border-right: 1px solid #77d9f1;
	float: left;
}

.content p, .callout p {  
	margin: 5px 0 6px 0;
	padding: 0;
}

.block {  
	width: 337px;
	margin: 0 0 20px 0;
}

.block .copy {  
	padding: 0 1px;
}

.copy {  
	width: 197px;
	float: left;
	margin: 0 0 20px 0;
}

.copy2 {  
	width: 187px;
}

.copy2_1 {  
	width: 197px;
	float: left;
	margin: 0 0 20px 0;
}

.copy3 {  
	padding: 15px 10px 0 0;
}

.right {  
	float: left;
	padding: 0 16px 0 14px;
	width: 176px;
}

.poll {  
	text-align: left;
	background: url(../images/poll.jpg) no-repeat;
	padding: 46px 0 0 4px;
}

.poll ul {  
	padding: 13px 0 0 7px;
}

.poll ul li {
	padding: 0 0 8px 0;
}

.poll ul li a {  
	display: block;
	width: 150px;
	padding: 1px 0 0 23px;
	background: url(../images/bauble.gif) no-repeat;
}

.poll ul li a:hover, .poll ul li a:active {  
	background: url(../images/bauble_filled.gif) no-repeat;
}

.poll .vote {  
	margin: 3px 0 0 -4px;
}

.callout {  
	margin: 29px 0 0 0;
	float: left;
}

.read {  
	margin-left: -4px;
}

.footer {
	width: 711px;
	clear: both;
	float: left;
	padding: 20px 0 10px 0;
}

.container {  
	margin: 0 0 0 150px;
}

.container div, .footer ul, .footer li {  
	float: left;
}

.footer div { 
	padding-right: 6px;
}

.footer ul li {  
	background: url(../images/bullet.gif) no-repeat 0 6px; 
	padding: 0 7px 0 10px;
}


/* PRODUCTS PAGE CUSTOM TAGS */

.products {  
	width: 700px;
	margin-top: -7px;
	z-index: 10;
	position: relative;
	float: left;
}

.products p {  
	margin: 11px 50px 0 0;
	padding: 0;
	line-height: 17px;
}

.desc {  
	float: left;
	margin: 0 0 20px 0;
}

.product1, .product2, .product3, .product4 {
	float: left;
	width: 312px;  
	padding-top: 15px;
	border-right: 1px solid #77d9f1;
}

.product1 p, .product2 p, .product3 p, .product4 p {  
	margin: 6px 0 0 0;
	padding: 0;
	line-height: normal;
}

.product2, .product4 {  
	border-right: none;
	margin-left: 15px;
}

.products .copy {  
	padding-left: 5px;
	width: 143px;
	float: left;
}

.products .read {  
	float: left;
	padding-top: 10px;
}

.horizontal {  
	float: left;
	background: url(../images/horizontal.gif) no-repeat;
	width: 621px;
	height: 31px;
}


/* HISTORY PAGE */

.box {  
	z-index: 10;
	margin: -26px 0 0 25px;
	width: 666px;
}

.box .photo {  
	float: left;
	position: relative;
	z-index: 10;
}

.box .content {  
	padding: 11px 0 0 9px;
	width: 498px;
	z-index: 10;
	position: relative;
	float: left;
	border: none;
}

.box .headline {  
	padding-top: 16px;
}

.box .content h2 {  
	padding: 3px 0 2px 0;
}

.history {  
	float: left;
	width: 620px;
	padding-top: 10px;
}

.blurb {  
	float: left;
	width: 620px;
	/*padding: 24px 18px 18px 15px;
	border-top: 1px solid #77d9f1;*/
}

.blurb .anchor {  
	display: block;
	margin-top: 13px;
}



/* FAQ PAGE */

.faq {  
	float: left;
}

.faq a:link, .faq a:visited {  
	text-decoration: underline;
}


.faq .h { 
	float: left;
}

.qa {  
	float: left;
	width: 367px;
	margin-top: 27px;
}

.qa div, .anchors div {
	margin: 0 0 20px 0;
	line-height: 15px;
}

.anchors div {  
	line-height: 14px;
}

.qa h1 {  
	padding-right: 8px;
	float: left;
	margin-top: -1px;
}

.anchors {  
	float: left;
	width: 222px;
	margin: 27px 0 0 42px;
}


/* ABOUT PAGE */

.about {  
	float: left;
	margin: -34px 0 0 0;
	position: relative;
	left: -15px;
	width: 660px;
	
	z-index: 10;
}

.about .header {  
	position: relative;
}

.about .header .content {  
	margin-bottom: 10px;
}

.about .header .photo {  
	padding: 0;
	margin: 0;
	border: none;
	float: left;
}

.about .header .content {  
	float: left;
	padding: 20px 0 0 0;
	border: none;
	width: 320px;
}

.about .header .content p {  
	line-height: 15px;
}

.about .callouts {
	padding-top: 14px;
	border-top: 1px solid #77d9f1;  
	float: left;
	width: 690px;
}

.about .callouts .photo {  
	margin-left: 12px;
	position: relative;
	z-index: 20;
}

.about .callout1, .about .callout2 {  
	width: 334px;
	float: left;
	padding-top: 13px;
}

.about .callout2 {  
	width: 340px;
}

.about .callout1 {  
	padding-right: 10px;
}

.about .callouts .photo {  
	float: left;
}

.about .callouts h1 {  
	margin: 9px 0 6px 0;
}

.about .callouts .copy {  
	float: left;
	width: 160px;
}

.about .callouts .read {  
	padding: 10px 0 0 0;
	margin: 0;
	position: relative;
	left: -5px;
}

.about .divider {  
	background: url(../images/divider.gif) no-repeat;
	float: left;
	width: 1px;
	height: 165px;
	padding: 0 4px 0 0;
}



/* FUN FACTS PAGE */


.funfacts { 
	float: left;
	width: 680px;
	margin: -14px 0 0 -7px;
}

.funfacts .photo {  
	margin: 0 28px 0 0;
	padding: 0;
	border: none;
	position: relative;
	z-index: 10;
	float: left;
}

.funfacts .facts {  
	float: left;
	margin: 13px 0 0 0;
	width: 422px;
}

.funfacts .facts ul {  
	margin: 25px 0 30px 0;
	line-height: 16px;
}

.funfacts .facts ul li {  
	padding-left: 34px;
	background: url(../images/funfacts_pretzel.jpg) no-repeat;
}


/* INDIVIDUAL PRODUCTS PAGES */

.product {  
	float: left;
	width: 404px;
}

.product h2 {  
	margin: 10px 0 12px 0;
}

.product p {  
	line-height: 16px;
}

.product .callout {  
	margin: 5px 0 0 -3px;
	padding: 0;
	float: left;
}

.product .copy {  
	float: left;
	margin: 0 20px 0 2px;
	padding: 0;
	width: 350px;
}

.info {  
	float: left;
	width: 230px;
	margin: 0 0 0 26px;
}

.info .photo {  
	padding: 0 0 20px 0;
	float: left;
}



/* J&J PAGE */



.jj {  
	margin: -12px 0 0 9px;
	width: 690px;
	position: relative;
	z-index: 10;
}

.jj .header {  
	position: relative;
}

.jj .header .photo {  
	padding: 0 14px 0 0;
	margin: 0;
	border: none;
	float: left;
}

.jj .header .content {  
	float: left;
	padding: 0;
	border: none;
	width: 320px;
}

.jj h2 {  
	padding: 11px 0 12px 0;
}

.jj .header .content p {  
	line-height: 15px;
}

.jj .callouts {
	padding-top: 43px;
	margin-left: -25px;
	position: relative;
	z-index: 10;
	float: left;
	width: 690px;
}

.jj .callout1, .jj .callout2 {  
	width: 338px;
	float: left;
	padding-top: 2px;
}

.jj .callout1 .photo {  
	padding-left: 15px;
}

.jj .callout2 {  
	width: 310px;
	padding: 0 0 0 11px;
}

.jj .callout1 {  
	padding-right: 13px;
	margin-right: 10px;
}

.jj .callouts .photo {  
	float: left;
}

.jj .callout2 .photo {  
	padding-top: 7px;
}

.jj .callouts h1 {  
	margin: 9px 0 6px 0;
}

.jj .callouts .copy {  
	float: left;
	width: 160px;
}

.jj .callouts .read {  
	padding: 10px 0 0 0;
	margin: 0;
	position: relative;
	left: -5px;
}

.jj .divider {  
	background: url(../images/divider.gif) no-repeat;
	float: left;
	width: 1px;
	height: 165px;
	padding: 0 4px 0 0;
}



/* SPECIAL OFFERS PAGE */

.offers {  
	width: 701px;
}

.offers #frm {  
}

.offers p {  
	line-height: 16px;
}

.offers .left {  
	width: 287px;
	float: left;
}

.offers .left h1 {  
	margin: 0 0 22px 0;
}

.offers .line {  
	height: 1px;
	width: 286px;
	margin: 0 0 8px 1px;
	background: transparent url(../images/blue.gif) repeat-x;
	font-size: 0em;
	float: left;
}

.offers .labels {  
	float: left;
	margin: 13px 0;
}

.offers #frm strong {  
	display: block;
}

.offers .labels input {  
	font-size: 11px;
	padding: 0;
	margin: 0;
}

.offers .callout {  
	height: 262px;
}

.longForm, .longForm option {  
	font-size: 11px;
}

.gender div {  
	float: left;
	padding-right: 25px;
}

.gender div input {  
	display: block;
	float: left;
	height: 17px;
}

.gender div em {  
	display: block;
	float: left;
	padding: 2px 0 0 3px;
	font-style: normal;
}

#frm { 
	width: 287px;
}

#frm .submit {  
	padding-left: 75px;
	float: left;
}

#frm .reset {  
	font-weight: bold;
	width: 80px;
	float: left;
	padding: 8px 0 0 5px;
}

.offers .left td {  
	padding: 3px 0;
}

.offers .right {  
	width: 361px;
	float: left;
	margin: 0 0 0 11px;
}

.offers .right .callout { 
	margin: 0;
	padding: 0;
	float: left;
}

.offers .right .coupons {
	float: left;  
	width: 325px;
	padding-top: 18px;
	margin: 0 0 0 14px;
	/*border-top: 1px solid #77d9f1;*/
}

.offers .right .coupons p {  
	margin: 18px 0;
	padding: 0;
	line-height: 12px;
}

.offers .right .coupons .image {  
	margin-left: 56px;
}


/* RECIPES PAGE */

.recipes {  
	width: 645px;
}

.recipes .h {  
	padding-bottom: 10px;
}

.recipes .main {  
	float: left;
	width: 383px;
	margin-right: 53px;
}

.recipes .main ul {  
	margin: 20px 0 20px 12px;
	line-height: 16px;
}

.recipes .main ul li {  
	padding-left: 24px;
	background: url(../images/recipes_pretzel.jpg) no-repeat 0 2px;
}

.recipes .main ul li p {  
	margin: 0 0 7px 0;
	padding: 0;
}

.recipes .pics {  
	float: left;
	width: 209px;
}

.recipes .pic { 
	width: 209px; 
	padding-bottom: 54px;
}






/* MISC */

.lister {  
	margin: 0 0 0 20px;
}

.lister li { 
	list-style: disc;
}

.lister li p {  
	margin: 8px 0;
}

.legal {  
	font-size: 9px;
}

.coupon_legal {
	float: left;
	margin-top: 13px;
}

.coupon_legal p {  
	margin: 0 0 13px 0;
}

#poll {  
}

#poll ul {  

}

#poll input {  
	display: block;
	float: left;
	margin-top: -2px;
	width: 25px;
}

#poll p {  
	margin: 8px 0 5px 0;
}

/* FONTS */

.content, .main, .poll, .callout, .history, .footer, .search, .products, a, a:link, a:visited, h1, h2, h3, .blurb, .faq, .callouts, .facts, .product, .offers, .right .coupons, td {  
	font-family: arial, verdana, helvetica, sans-serif;
	color: #3f3f3f;
	font-size: 11px;
}

.search {  
	color: #0dbff3;
}

.qa h1, #frm .reset {  
	font-size: 12px;
}

h1, h2, h3 { 
	font-weight: bold;
}


h2 {  
	color: #2395b6;
}


h3 a:link, h3 a:visited, #frm .reset a:link, #frm .reset a:visited, .right .coupons, .recipes .main ul li p strong, .coupon_legal {  
	color: #d7621d;
}


h3 a:hover, h3 a:active, #frm .reset a:hover, #frm .reset a:active {  
	color: #333;
	text-decoration: underline;
}

.blurb .anchor {  
	font-weight: bold;
}

.blurb .anchor:link, .blurb .anchor:visited {  
	color: #d7621d;
	text-decoration: none;
}

.blurb .anchor:hover, .blurb .anchor:active {  
	text-decoration: underline;
}

.footer {  
	font-size: 10px;
	color: #d7621d;
}

a:link, a:visited {  
	text-decoration: none;
}

a:hover, a:active {  
	color: #000;
}

.footer a {  
	font-size: 10px;
}

.footer a:link, .footer a:visited {  
	color: #f70000;
	text-decoration: underline;
}

.footer a:hover, .footer a:active {  
	color: #333;
}

.anchors a:link, .anchors a:visited {  
	color: #d7621d;
	text-decoration: none;
	font-weight: bold;
}

.anchors a:hover, .anchors a:active {  
	text-decoration: underline;
}


.jj a:link, .jj a:visited, .faq .qa a:link, .faq .qa a:visited {  
	color: #f70000;
	text-decoration: underline;
}

.jj a:hover, .jj a:active, .faq .qa a:hover, .faq .qa a:active  {  
	color: #333;
}

.offers .labels strong {  
	font-weight: bold;
	color: #d7621d;
}

/* HACK ATTACK! (Hacks for Safari and Opera, respectively)
	Reason for hackination: For whatever reason, pages in Safari/Opera were not comfortable with the centered repeating background.
	Attempts to resolve without hacks proved fruitless.
*/

#page, #page2{padding: 0 0 0 1px;#}

@media all and (min-width: 0px){
   #page, #page2 {  
		padding: 0;
	}
}