@charset "utf-8";
/* CSS Document */

body {
	padding: 0px;
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
	}
	
img {
	border: 0px;
	}
	
.clear {
	clear: both;
	}
	
/* Background image, its width is auto adjusted by javascript */
#backgroundImage {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	}
	
/* Center the layout of the site */
.centerLayout {
	width: 750px;
	overflow: hidden;
	position:relative;
	z-index:1;
	margin: 0px auto;
	padding: 2px 0px 0px 0px;
	}
	
/* Peppadew logo */
.pepLogo {
	width: 29px;
	float: right;
	padding: 42px 0px 0px 0px;
	margin: 0px 0px 0px 721px;
	position: absolute;
	}

/* Content wrapper */
.contentWrap {
	width: 710px;
	overflow: hidden;
	border-left: 5px solid #000000;
	border-right: 5px solid #000000;
	background: url(../images/inner-background.jpg) no-repeat;
	}
	
/* Navigation */
.navigation {
	width: 690px;
	height: 36px;
	background: #000000;
	padding: 9px 0px 0px 20px;
	list-style: none;
	margin: 0px;
	}
	
.navigation li {
	font-size: 62%;
	color: #fff;
	height: 25px;
	line-height: 25px;
	border-right: 1px solid #4d4d4d;
	float: left;
	font-weight: bold;
	}
	
.navigation li a {
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 0px 15px 0px 15px;
	}
	
.navigation li a:hover {
	color: #ff9900;
	}
	
.navigation .selected a {
	color: #ff9900;
	}
	
.navigation .last {
	border-right: 0px;
	}
	
/* Highlight page in navigation */
#index #nav_index a { color: #ff9900; }
#contact #nav_contact a { color: #ff9900; }
#products #nav_products a { color: #ff9900; }
#recipe #nav_recipes a { color: #ff9900; }
#recipes #nav_recipes a { color: #ff9900; }
	
/* Foodserver logo in navigation */
.navigation .foodservice {
	width: 113px;
	background: url(../images/foodservice-logo.png) no-repeat;
	float: right;
	padding: 0px;
	border: 0px;
	}
	
/* Homepage */
#homepage1 {
	display: block;
	}
	
#homepage2 {
	display: none;
	}
#homepage2Right {
	width: 284px;
	padding: 120px 80px 0px 0px;
	}
	
#homepage3 {
	display: none;
	}
#homepage3Right {
	width: 284px;
	padding: 80px 80px 0px 0px;
	}
	
#homepage4 {
	display: none;
	}
#homepage4Right {
	width: 290px;
	padding: 70px 74px 0px 0px;
	}
	
#homepage5 {
	display: none;
	}
#homepage5Right {
	width: 284px;
	padding: 100px 80px 0px 0px;
	}
	
.homepageTopSpacer {
	height: 132px;
	width: 710px;
	}

.homepageWrap {
	width: 710px;
	height: 350px;
	padding: 0px 0px 0px 0px;
	}
	
.homepageWrap .largeImage {
	float: left;
	}
	
.homepageWrap .rightCol1 {
	width: 287px;
	overflow: hidden;
	float: left;
	padding: 0px 0px 0px 0px;
	}
	
.homepageWrap .rightCol1 h2 {
	color: #ff3333;
	padding: 0px;
	margin: 0px 0px 18px 0px;
	font-size: 150%;
	font-weight: normal;
	line-height: 120%;
	}
	
.homepageWrap .rightCol1 p {
	font-size: 87%;
	color: #666666;
	padding: 0px;
	margin: 0px 0px 12px 0px;
	}
	
.homepageWrap .rightCol1 img {
	float: right;
	}
	
.homepageWrap .rightCol2 {
	overflow: hidden;
	float: left;
	}

.homepageWrap .rightCol2 h1 {
	color: #ff3333;
	padding: 0px 0px 9px 0px;
	margin: 0px;
	font-size: 150%;
	font-weight: normal;
	line-height: 100%;
	}
	
.homepageWrap .rightCol2 p {
	font-size: 87%;
	color: #666666;
	padding: 0px;
	margin: 0px 0px 9px 0px;
	line-height: 120%;
	}
	
.homepageWrap .rightCol2 .spacer10px {
	width: 80%;
	height: 10px;
	}
	
/* Homepage highlighted text */
.homepageText {
	width: 710px;
	float: right;
	margin: 0px 0px 20px 0px;
	}
	
.homepageText ul {
	width: 690px;	
	padding: 18px 20px 0px 0px;
	margin: 0px;
	list-style: none;
	height: 27px;
	}
	
.homepageText ul li {
	font-size: 87%;
	color: #ff3333;
	height: 27px;
	line-height: 21px;
	float: right;
	background: url(../images/highlight-right.png) top right no-repeat;
	}
	
.homepageText ul .nolink {
	background: none;
	}
	
.homepageText a {
	background: url(../images/highlight-left-off.png) top left no-repeat ;
	padding: 0px 5px 10px 5px;
	height: 27px;
	color: #ffffff;
	text-decoration: none;
	display: block;
	}
	
.homepageText a:hover {
	background: url(../images/highlight-left-on.png) top left no-repeat ;
	}
	
.productsLeft {
	width: 292px;
	overflow: hidden;
	float: left;
	padding: 30px 0px 0px 35px;
	}
	
.productsLeft h1 {
	font-size: 131%;
	color: #cc0000;
	font-weight: normal;
	padding: 0px 0px 22px 0px;
	margin: 0px;
	}
	
.productsCol {
	overflow: hidden;
	float: left;
	padding: 0px 0px 25px 0px;
	}
	
.productsCol table td {
	color: #666666;
	font-size: 68%;
	}
	
.productsCol table td p {
	padding: 0px 0px 0px 17px;
	margin: 0px;
	}

#productsCol1 {
	width: 96px;
	background: url(../images/vertical-dotted-line.png) right no-repeat;
	}
	
#productsCol1 table td strong {
	color: #000000;
	}
	
#productsCol2 table td strong {
	color: #cc0000;
	}
	
#productsCol3 table td strong {
	color: #e2a600;
	}
	
#productsCol2 {
	width: 80px;
	background: url(../images/vertical-dotted-line.png) right no-repeat;
	}
	
#productsCol3 {
	width: 80px;
	background: none;
	}
	
.productsRight {
	width: 382px;
	overflow: hidden;
	padding: 110px 0px 30px 0px;
	float: left;
	}
	
.productsRight ul {
	width: 200px;
	float: right;
	margin: -90px 0px 0px 0px;
	padding: 0px;
	list-style: none;
	}
	
.productsRight ul li {
	font-size: 68%;
	padding: 0px 10px 0px 11px;
	margin: 0px;
	float: left;
	}
	
.productsRight h1 {
	font-size: 131%S;
	padding: 0px;
	margin: 0px 0px 10px 0px;
	font-weight: normal;
	}
	
.productsRight p {
	font-size: 75%;
	color: #666666;
	padding: 0px 30px 0px 0px;
	margin: 0px 0px 10px 0px;
	}
	
.productsRight a {
	color: #ff3333;
	}
	
.productsRight a:hover {
	color: #000000;
	}

/* Mild products */
#product1 {
	display: none;
	}
#product1 ul li {
	background: url(../images/mild-bullet.png) no-repeat;
	color: #000;
	}	
#product1 h1 {
	color: #000000;
	}

#product2 {
	display: none;
	}
#product2 ul li {
	background: url(../images/mild-bullet.png) no-repeat;
	color: #000;
	}	
#product2 h1 {
	color: #000000;
	}
	
#product3 {
	display: none;
	}
#product3 ul li {
	background: url(../images/mild-bullet.png) no-repeat;
	color: #000;
	}	
#product3 h1 {
	color: #000000;
	}
	
/* Hot products */
#product4 {
	display: none;
	}
#product4 ul li {
	background: url(../images/hot-bullet.png) no-repeat;
	color: #000;
	}	
#product4 h1 {
	color: #ff3333;
	}
	
#product5 {
	display: none;
	}
#product5 ul li {
	background: url(../images/hot-bullet.png) no-repeat;
	color: #000;
	}	
#product5 h1 {
	color: #ff3333;
	}
	
#product6 {
	display: none;
	}
#product6 ul li {
	background: url(../images/hot-bullet.png) no-repeat;
	color: #000;
	}	
#product6 h1 {
	color: #ff3333;
	}
	
/* Goldew products */
#product7 {
	display: none;
	}
#product7 ul li {
	background: url(../images/goldew-bullet.png) no-repeat;
	color: #000;
	}	
#product7 h1 {
	color: #e2a600;
	}
	
#product8 {
	display: none;
	}
#product8 ul li {
	background: url(../images/goldew-bullet.png) no-repeat;
	color: #000;
	}	
#product8 h1 {
	color: #e2a600;
	}
	
#product9 {
	display: none;
	}
#product9 ul li {
	background: url(../images/goldew-bullet.png) no-repeat;
	color: #000;
	}	
#product9 h1 {
	color: #e2a600;
	}
	
/* Recipes */
.recipesColumn {
	width: 640px;
	padding: 35px 35px 35px 35px;
	}
	
.recipesColumn h1 {
	color: #cc0000;
	font-size: 131%;
	padding: 0px;
	margin: 0px 0px 9px 0px;
	font-weight: normal;
	}
	
.recipesColumn .leftImage {
	float: left;
	}
	
.recipesColumn .introText {
	width: 320px;
	float: left;
	margin: 0px 0px 0px 40px;
	padding: 25px 0px 0px 0px;
	}
	
.recipesColumn .introText p {
	font-size: 75%;
	color: #000000;
	padding: 0px;
	margin: 0px 0px 15px 0px;
	}
	
.recipesColumn .introText h2 {
	font-size: 87%;
	color: #000;
	font-weight: normal;
	padding: 0px;
	margin: 0px 0px 2px 0px;
	}
	
.recipeWrapper {
	width: 700px;
	padding: 0px 0px 0px 10px;
	}
	
/* Mild recipe */
.recipeItemMild {
	width: 209px;
	height: 173px;
	background: url(../images/mild-recipe-bottom.png) bottom no-repeat;
	margin: 0px 10px 20px 10px;
	float: left;
	cursor: pointer;
	}
	
.recipeItemMild .title {
	width: 199px;
	height: 48px;
	padding: 12px 0px 0px 0px;
	margin: 0px 0px 0px 10px;
	color: #000;
	font-size: 75%;
	}
	
.recipeItemMild table td {
	font-size: 68%;
	color: #666666;
	}
	
.recipeItemMild .largeText {
	font-size: 18px;
	}

/* Goldew recipe */
.recipeItemGoldew {
	width: 209px;
	height: 173px;
	background: url(../images/goldew-recipe-bottom.png) bottom no-repeat;
	margin: 0px 10px 20px 10px;
	float: left;
	cursor: pointer;
	}
	
.recipeItemGoldew .title {
	width: 199px;
	height: 48px;
	padding: 12px 0px 0px 0px;
	margin: 0px 0px 0px 10px;
	color: #cc9900;
	font-size: 75%;
	}
	
.recipeItemGoldew table td {
	font-size: 68%;
	color: #666666;
	}
	
.recipeItemGoldew .largeText {
	font-size: 18px;
	color: #cc9900;
	}
	
/* Hot recipe */
.recipeItemHot {
	width: 209px;
	height: 173px;
	background: url(../images/hot-recipe-bottom.png) bottom no-repeat;
	margin: 0px 10px 20px 10px;
	float: left;
	cursor: pointer;
	}
	
.recipeItemHot .title {
	width: 199px;
	height: 48px;
	padding: 12px 0px 0px 0px;
	margin: 0px 0px 0px 10px;
	color: #cc0000;
	font-size: 75%;
	}
	
.recipeItemHot table td {
	font-size: 68%;
	color: #666666;
	}
	
.recipeItemHot .largeText {
	font-size: 18px;
	color: #cc0000;
	}

/* Recipe page */
.recipeColumn {
	width: 640px;
	padding: 35px 35px 35px 35px;
	}
	
.recipeColumn .rightImage {
	float: right;
	margin: 0px 208px 0px 0px;
	}
	
.recipeColumn h1 {
	color: #cc0000;
	font-size: 131%;
	padding: 0px;
	margin: 0px 0px 15px 0px;
	font-weight: normal;
	}
	
.recipeColumn .book {
	width: 263px;
	height: 187px;
	background: url(../images/recipe-book.png) no-repeat;
	padding: 26px 0px 0px 0px;
	}

.recipeColumn .book img {
	float: right;
	margin-right: 18px;
	}
	
.recipeColumn #backButton {
	padding: 0px;
	margin: -40px 0px 0px 0px;
	width: 136px;
	height: 22px;
	list-style: none;
	position: absolute;
	left: 545px;
	}
	
.recipeColumn #backButton li {
	width: 136px;
	height: 22px;
	line-height: 22px;
	font-size: 87%;
	}
	
.recipeColumn #backButton li a {
	display: block;
	color: #fff;
	background: url(../images/back-off.png) no-repeat;
	padding: 0px 0px 0px 13px;
	text-decoration: none;
	}
	
.recipeColumn #backButton li a:hover {
	display: block;
	background: url(../images/back-on.png) no-repeat;
	}
	
.recipeColumn .details {
	width: 355px;
	height: 103px;
	background: url(../images/recipe-details.png) no-repeat;
	float: right;
	}
	
.recipeColumn .details table td {
	color: #333;
	font-size: 75%;
	}
	
.recipeColumn .details .smallRed {
	font-size: 9px;
	color: #961919;
	}
	
.recipeColumn .details .largeRed {
	font-size: 36px;
	color: #cc0000;
	}
	
.recipeColumnLeft {
	width: 280px;
	overflow: hidden;
	float: left;
	padding: 30px 30px 0px 0px;
	}
	
.recipeColumnLeft h2 {
	color: #ff9900;
	font-size: 112%;
	font-weight: normal;
	padding: 0px;
	margin: 0px 0px 10px 0px;
	}
	
.recipeColumnLeft h3 {
	color: #cc0000;
	font-size: 75%;
	font-weight: normal;
	padding: 0px;
	margin: 0px 0px 3px 0px;
	}
	
.recipeColumnLeft p {
	font-size: 75%;
	color: #333;
	padding: 0px;
	margin: 0px 0px 19px 0px;
	}
	
.recipeColumnRight {
	width: 300px;
	overflow: hidden;
	float: left;
	padding: 30px 20px 0px 0px;
	}
	
.recipeColumnRight h2 {
	color: #ff9900;
	font-size: 112%;
	font-weight: normal;
	padding: 0px;
	margin: 0px 0px 10px 0px;
	}
	
.recipeColumnRight h3 {
	color: #cc0000;
	font-size: 75%;
	font-weight: normal;
	padding: 0px;
	margin: 0px 0px 3px 0px;
	}
	
.recipeColumnRight p {
	font-size: 75%;
	color: #333;
	padding: 0px;
	margin: 0px 0px 19px 0px;
	}
	
/* Contact column */
.contactColumn {
	padding: 129px 0px 60px 0px;
	width: 710px;
	}
	
.contactColumn img {
	float: left;
	}
	
.contactColumnRight {
	width: 240px;
	overflow: hidden;
	float: left;
	padding: 75px 0px 0px 0px;
	}
	
.contactColumn p {
	font-size: 87%;
	color: #666;
	padding: 0px;
	margin: 0px 0px 15px 0px;
	}
	
.contactColumn a {
	color: #cc0000;
	text-decoration: none;
	}
	
.contactColumn a:hover {
	color: #333;
	text-decoration: none;
	}

/* Footer */
.footer {
	width: 697px;
	height: 25px;
	background: #000000;
	padding: 10px 10px 0px 3px;;
	list-style: none;
	margin: 0px;
	}
	
.footer li {
	height: 15px;
	font-size: 62%;
	color: #fff;
	line-height: 15px;
	border-right: 1px solid #4d4d4d;
	float: right;
	}
	
.footer li a {
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 0px 3px 0px 3px;
	}
	
.footer li a:hover {
	color: #ff9900;
	}
	
.footer .copyright {
	float: left;
	border: 0px;
	}
	
.footer .last {
	border: 0px;
	}