/************************************/
/* Logo                             */
/************************************/

#logo {
  position: absolute;
  top: 20px;
  left: 20px;
  }
  
#logobiltong {
  position: absolute;
  top: 20px;
  right: 70px;
  }
  
/************************************/
/* Main Navigation                  */
/************************************/
  
#navlist {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 5px 0 20px 15px;
  }

#navlist ul, #navlist li {
  margin: 0;
  padding: 0;
  display: inline;
  list-style-type: none;
  }

#navlist a:link, #navlist a:visited {
  float: left;
  font-weight: normal;
  margin: 0 10px 0 10px;
  text-decoration: none;
  color: #FFFFFF;
  }

#navlist a:hover { 
  color: #F3F1DC; 
  }

/************************************/
/* Split Columns                    */
/************************************/

#col1 {
  float: left;
  width: 325px;
  }
  
#col2 {
  float: left;
  width: 325px;
  }

/************************************/
/* Right Bar - Promo                */
/************************************/

#promo {
  width: 311px;
  height: 300px;
  background: url(../images/promo-bg.gif) no-repeat;
  }
  
#promo h2 {
  font-family: "Times New Roman", Times, serif;
  color: #821938;
  font-size: 20px;
  font-weight: normal;
  letter-spacing: 2px;
  padding: 20px 10px 10px 20px;
  }
  
#promo span {
  font-family: "Times New Roman", Times, serif;
  color: #a3a080;
  font-size: 20px;
  font-weight: normal;
  letter-spacing: 2px;
  }
  
#promo p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color:#999999;
  padding: 10px 10px 10px 20px;
  line-height: 18px;
  }
  
/************************************/
/* Right Bar - Promo Buttons        */
/************************************/
  
#promo ul {
  margin: 0;
  padding: 0;
  list-style: none;
  }
  
#promo ul li {
  margin: 2px 0 8px 20px;
  padding: 0;
  font-weight: bold;
  line-height: 28px; /* height of icon */
  background-repeat: no-repeat;
  background-position: 0 50%;
  }
  
#promo ul li a {
  color: #FFFFFF;
  text-decoration: none;
  padding-left: 30px; /* width of icon + whitespace */
  }
  
#promo ul li a:hover {
  color: #F3F1DC;
  }
  
#meat { background-image: url(../images/b-redbutton.png); }
#biltong { background-image: url(../images/b-blackbutton.png); }

  
/************************************/
/* Right Bar - Questions            */
/************************************/ 

#question {
  margin: 10px 0 50px 0;
  padding: 0;
  }
  
#question h2 {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  color: #821938;
  font-size: 20px;
  font-weight: normal;
  letter-spacing: 2px;
  padding: 0 10px 10px 5px;
  }
  
#question span {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  color: #a3a080;
  font-size: 20px;
  font-weight: normal;
  letter-spacing: 2px;
  }
  
#newsletterBg {
  position: relative; 
  width:311px; 
  height:250px; 
  display:block; 
  background:url(../images/ask-chef-box.jpg) no-repeat left top;    
  }

input.name {
  width:191px;
  height:21px;
  display:block;
  background:none;
  border:none;
  font-size:11px;
  color:#888888;
  position:absolute;
  top:72px;
  left:15px;
  padding:3px;
  }
  
input.email {
  width:191px;
  height:21px;
  display:block;
  background:none;
  border:none;
  font-size:11px;
  color:#888888;
  position:absolute;
  top:109px;
  left:15px;
  padding:3px;
  }

textarea.text {
  width:173px;
  height:75px;
  display:block;
  background:none;
  border:none;
  font-size:11px;
  color:#888888;
  position:absolute;
  top:151px;
  left:16px;
  padding:3px;
  }

.formOk { 
  width:90px; 
  height: 30px; 
  position:absolute; 
  display:block; 
  top:235px; 
  left:20px; 
  }

/************************************/
/* Left Bar - Flash Header          */
/************************************/

#flashHeader {
  width: 671px;
  height: 286px;
  margin: 0 0 20px 0;
  padding: 0;
  }
  
#flashSub {
  margin: 0;
  padding: 0 0 20px 0;
  }
  
#blurp {
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
  padding: 30px 0 0 30px;
  width: 310px;
  }
  
.heading {
  font-family: "Times New Roman", Times, serif;
  font-size: 22px;
  color: #F3F1DC;
  }
  
/* About / History Page */  
#subpage1 {
  margin: 0;
  padding: 0 0 20px 0;
  background: url(../images/sub-headers/brand-history.jpg) no-repeat;
  width: 671px;
  height: 171px;
  }
   
/* Franchise Pages / Downloads Pages */  
#subpage2 {
  margin: 0;
  padding: 0 0 20px 0;
  background: url(../images/sub-headers/franchise.jpg) no-repeat;
  width: 671px;
  height: 171px;
  }
  
/* Products Pages */  
#subpage3 {
  margin: 0;
  padding: 0 0 20px 0;
  background: url(../images/sub-headers/products.jpg) no-repeat;
  width: 671px;
  height: 171px;
  }
  
/* Press Release Pages */  
#subpage4 {
  margin: 0;
  padding: 0 0 20px 0;
  background: url(../images/sub-headers/latest-news.jpg) no-repeat;
  width: 671px;
  height: 171px;
  }
  
/* Advert / Links / Sitemap / FAQ Pages */  
#subpage5 {
  margin: 0;
  padding: 0 0 20px 0;
  background: url(../images/sub-headers/generic.jpg) no-repeat;
  width: 671px;
  height: 171px;
  }
  
/* Recipes  */  
#subpage6 {
  margin: 0;
  padding: 0 0 20px 0;
  background: url(../images/sub-headers/recipes.jpg) no-repeat;
  width: 671px;
  height: 171px;
  }
  
/* Store Locator / Where To Buy */  
#subpage7 {
  margin: 0;
  padding: 0 0 20px 0;
  background: url(../images/sub-headers/store-locator.jpg) no-repeat;
  width: 671px;
  height: 171px;
  }  
  
  
/************************************/
/* Left Bar - Main Body             */
/************************************/ 

#leftcolumn h2 {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  color: #821938;
  font-size: 20px;
  padding: 10px 20px 0 30px;
  }
  
#leftcolumn h3 {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  color: #821938;
  font-size: 16px;
  padding: 10px 20px 0 30px;
  }
  
#leftcolumn h4 {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  font-size: 14px;
  padding: 10px 20px 10px 5px;
  }
  
#leftcolumn td {
  padding: 10px 0 0 10px;
  } 
  
#leftcolumn p {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  color: #666666;
  font-size: 12px;
  padding: 10px 30px 0 30px;
  }
  
#leftcolumn ul, ol {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  color: #666666;
  font-size: 12px;
  line-height: 18px;
  margin: 0;
  padding: 15px 0 15px 50px;
  }
  
#leftcolumn li {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 18px;
  margin: 0;
  padding: 5px 30px 0 0;
  }
  
#leftcolumn a {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  color: #821938;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none
  }
  
.logos img {
  padding: 0 50px 0 0;
  }
  
/************************************/
/* Left Bar - Recipe logos          */
/************************************/
  
#recipeLogos {
  position: absolute;
  top: 185px;
  left: 480px;
  }
  
/************************************/
/* Left Bar - Recipe Box            */
/************************************/
  
#recipeMainBox {
  width: 605px;
  min-height: 200px;
  background: #821938;
  margin: 15px 30px 30px 30px;
  padding: 0;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  }
  
.clear {
  clear:both;
  height:1px;
  overflow:hidden;
  }
  
#recipeMainBox ul {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  font-size: 12px;
  line-height: 18px;
  margin: 0;
  padding: 15px 0 15px 50px;
  } 
  
#recipeMainBox h3 {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  font-size: 16px;
  padding: 10px 20px 0 30px;
  }  
  
#recipeMainBox p {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  font-size: 12px;
  padding: 10px 30px 0 30px;
  }
  
#recipeMainBox img {
  margin: 0 10px 0 0;
  vertical-align: middle; /* aligns the chef hat and the text to middle */
  }
  
#recipeBox1 {
  float: left;
  width: 302px;
  border-right: 1px solid #FFFFFF;
  margin: 10px 0 10px 0;
  padding: 0 0 10px 0;
  }
  
#recipeBox2 {
  float: left;
  width: 302px;
  margin: 0 0 10px 0;
  padding: 10px 0 10px 0;
  }
  
#recipeBox2 p img {
  padding: 10px 20px 0 20px;
  }
  
#recipeBox2 ul li a {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #FFFFFF;
  }
  
#recipeBox2 ul li a:hover {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #F3F1DC;
  }
  
/************************************/
/* Left Bar - Recipe Summary        */
/************************************/  

#mainListing {
  width: 671px;
  margin: 20px 0 0 0;
  padding: 0;
  }
  
#mainListing img {
  float: left;
  margin: 0;
  padding: 0 20px 0 0;
  width: 140px;
  }
  
#mainListing li h3 {
  font:  Geneva, Arial, Helvetica, sans-serif;
  color: #821938;
  font-size: 14px;
  margin: 0;
  padding: 0 0 10px 0;
  }
  
#mainListing ul {
  list-style: none;
  }
  
#mainListing li {
  margin: 0;
  padding: 0 30px 50px 0;
  }
  
#mainListing li p {
  font:  Geneva, Arial, Helvetica, sans-serif;
  font-size: 12px;
  margin: 0;
  padding: 0;
  color: #666666;
  }

#mainListing li p a {
  color: #821938;
  text-decoration: none;
  font-size: 10px;
  }
  
#mainListing li p a:hover {
  text-decoration: none;
  color: #333333;
  }
  
/************************************/
/* Footer - Bottom Sprite Images    */
/************************************/
  
.bye {
  margin:0;
  padding:0;
  position:absolute;
  top:-500em;
  overflow:hidden;
  }  
  
.cola , .colb, .colc, .cold {
  width:241px;
  float:left;
  position:relative;
  }

.cola {}
.colb {margin-left:13px;}
.colc {margin-left:13px;}
.cold {margin-left:13px;}  
  
.sole {
  padding: 20px 0 10px 10px;
  float:left;
  }  
  
.cola h3 a {width:241px;height:98px;margin:0;padding:0;display:block;background:url(../images/bottom-sprite.jpg) no-repeat 0px 0px;}
.cola h3 a:hover {background:url(../images/bottom-sprite.jpg) no-repeat 0px -98px;}

.colb h3 a {width:241px;height:98px;margin:0;padding:0;display:block;background:url(../images/bottom-sprite.jpg) no-repeat -241px 0;}
.colb h3 a:hover {background:url(../images/bottom-sprite.jpg) no-repeat -241px -98px;}

.colc h3 a {width:241px;height:98px;margin:0;padding:0;display:block;background:url(../images/bottom-sprite.jpg) no-repeat -484px 0;}
.colc h3 a:hover {background:url(../images/bottom-sprite.jpg) no-repeat -484px -98px;}

.cold h3 a {width:241px;height:98px;margin:0;padding:0;display:block;background:url(../images/bottom-sprite.jpg) no-repeat -725px 0;}
.cold h3 a:hover {background:url(../images/bottom-sprite.jpg) no-repeat -725px -98px;}
  
/************************************/
/* Footer - Brand Logos             */
/************************************/

#brands {
  background: #FFFFFF url(../images/jagged-edge.gif) repeat-x top left;
  }
  
#brands img {
  padding: 35px 0 0 25px;
  }
  
/************************************/
/* Footer - Term Links              */
/************************************/
  
#terms {
  position: absolute;
  top: 14px;
  right: 10px;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: normal;
  color: #FFFFFF;
  }
  
#terms ul {
  list-style: none;
  margin: 0;
  padding: 0;
  }
  
#terms li {
  display: inline;
  }
  
#terms a:link, #terms a:visited {
  padding: 3px 10px 2px 10px;
  color: #FFFFFF;
  text-decoration: none;
  }
  
#terms a:hover {
  color: #F3F1DC;
  }
  
/************************************/
/* Footer - SEO  Links              */
/************************************/
  
#seo {
  position: absolute;
  top: 14px;
  left: 10px;
  text-align: right;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: normal;
  color: #FFFFFF;
  }
  
#seo ul {
  list-style: none;
  margin: 0;
  padding: 0;
  }
  
#seo li {
  display: inline;
  }
  
#seo a:link, #seo a:visited {
  padding: 3px 10px 2px 10px;
  color: #FFFFFF;
  text-decoration: none;
  }
  
#seo a:hover {
  color: #F3F1DC;
  }
  
  
/***************************************************************/
/* FORM                                                        */
/***************************************************************/

input.txt {
  color: #00008B;
  background-color: #c1bda7;
  border: 1px inset #c1bda7;
  width: 200px;
  }
  
textarea.txt {
  color: #00008B;
  background-color: #c1bda7;
  border: 1px inset #c1bda7;
  width: 200px;
  }  
  
input.btn {
  colour: #00008B;
  background-color: #c1bda7;
  border: 1px outset #c1bda7;
  }
  
form p {
  clear: left;
  margin: 0;
  padding: 0;
  padding-top: 5px;
  }
  
form p label {
  float: left;
  width: 30%;
  }