﻿/* =============================================================================

CONTAINER HEIGHT FIXES FOR MOZILLA

============================================================================= */
#mainContent:after,
#centerColumnInner:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* =============================================================================

GENERAL STYLES

============================================================================= */

form,
input {
margin: 0;
padding: 0;
position: relative; 
vertical-align: middle;
}

.field {
border: 1px solid #a9a9a9;
background: #fff;
margin: 5px 0;
}

ul,
li {
margin: 0;
padding: 0;
list-style-image: url('/images/bullet.gif')
}

h1, h2, h3, h4, h5, h6, h7 {
font-family: "Baskerville Old Face", Times, Times New Roman;
margin: 0;
padding: 0;
}

h2, h3 {
	font-size: 1.386em; /* 18px */
	line-height: 1.056em; /* 19(px) : 18(px) =   1.056(em) */
	padding: 0; 
	margin: 0;
	display: inline;
	color: #b75200;
}

h3 {
	font-size: 1.12em;
}

p {
	font-size: 1em; /* 14px */
	line-height: 1.357em;
	margin: .6785em 0;
}

a {
color: #b75200;
text-decoration: underline;
}

a:hover {
text-decoration: none;
color: #410803;
}

a img {
border: 0;
}

a.info{
position:relative;
z-index:24;
}

a.info:hover{
z-index:25;
}

a.info span{
display: none
}

a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:-65px; 
left:25px; 
padding: 3px 10px;
line-height: 95%;
font-size: 95%;
font-weight: bold;
border:1px solid #998c70;
background-color:#723504; 
color:#fff;
text-align: center;
opacity: .85;
}

table.data {
border-width: 1px 1px 0 0;
border-style: solid;
border-color: #a9a9a9;
background: #fff;
font-size: 90%;
margin-left: 2em;
}

table.data td {
border-width: 0 0 1px 1px;
border-style: solid;
border-color: #a9a9a9;
text-align: center;
padding: 3px 6px;
}

table.samples td {
padding: 4px 8px;
}

table.samples td img {
border: 1px solid #a9a9a9;
}

table.customInstructions {
border-width: 1px;
border-style: solid;
border-color: #938976;
background: #d68b19;
padding: 10px;
height: 126px;
width: 550px;
}

table.customInstructions h3 {
color: #e2d0ac;
}

table.templateThumbs {
border-width: 1px;
border-style: solid;
border-color: #938976;
background: #d68b19;
width: 550px;
}

table.templateThumbs img {
border: 2px solid #fff;
margin: 4px;
}

.leftImage {
float: left;
margin: 0 6px 6px 0;
}

.rightImage {
float: right;
margin: 0 0 1.357em 2em;
border: 1px solid #b3a48d;
padding: 0 10px 10px 10px;
font-size: 85%;
text-align: center;
}

.rightImage img {
border: 5px solid #eee;
margin: 10px 0 2px 0;
}


.centeredImage {
text-align: center;
margin: 6px;
}

.rightText {
text-align: right;
}

/* =============================================================================

LAYOUT/STRUCTURAL STYLING - DO NOT EDIT!

============================================================================= */

body {
  padding: 0 0 24px 0;
  margin:0;
  height:100%;
  background: #e6a15c url('/images/wood_bg_2.jpg') top left repeat;
  font-size: 14px;
  line-height: 1.357em; /* 19px */
  font-family: Helvetica, Arial, sans-serif;
  color: #4f331b;
  }
  
#wrapper {
background: url('/images/textured_bg.jpg') top left repeat;
margin: 0 auto;
width: 968px;
}

#subWrapper {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  }
  


/* =============================================================================

TITLEBAR

============================================================================= */

#printHeader {
display: none;
}

#tagline {
float: right;
padding: 33px 10px 0 0;
overflow: hidden;
}

#titleBar {
padding: 0 0 6px 0;
margin: 0;
text-align: center;
}

#pano {
background: url('/images/pano_image_comp.jpg') 7px 0 no-repeat;
height: 247px;
overflow: hidden;
}

#panoInner {
text-align: left;
padding: 0 6px;
}

#logo {
float: left;
}

#separator {
height: 4px;
background: url('/images/separator_bg.jpg') 0 0 repeat-x;
}

  
/* =============================================================================

RIGHT RAIL

============================================================================= */

#rightColumn {
float: right;
width: 221px;
}

img.rightAd {
display: block;
margin: 9px 0;
}


/* =============================================================================

HEADER

============================================================================= */

#header {
overflow: hidden;
}



#menuWrapper {
padding: 0 0 0 10px;
}


#menu {  
margin: 0;
padding: 0;
float: left;
}

#menu li {
float: left; /* needs to be floated to display bg color */
margin: 5px 0 0 2px;
display: inline;
padding: 0;
background: url('/images/tab_left_off.jpg') 0px 0px no-repeat;
}  

#menu li:hover,
#menu li.over,
#menu li.on,
#menu li.menuCurrentLoc {
background: #4F637F url('/images/tab_left_on.jpg') 0px 0px no-repeat;
margin-top: 2px;
}

#menu li a {
float: left;
display: block;
font-size: 10px;
font-weight: bold;
font-family: arial, sans-serif; 
color: #fff;
margin: 0;
padding: 4px 8px;
text-decoration: none;
background: url('/images/tab_right_off.jpg') 100% 0px no-repeat;
} 

#menu li a:hover,
#menu li.menuCurrentLoc a {
color : #fff; 
background: url('/images/tab_right_on.jpg') 100% 0px no-repeat;
padding: 5px 8px 6px 8px;
}

#mainContent {
margin: 5px;
position: relative;
background: #e2d0ac;
}

.rollover {display: block; float: left; margin-right: 5px;} 
.rollover img { border: 0; height: 33px; } 
.rollover:hover { visibility: visible; /* for IE */ } 
.rollover:hover img { visibility: hidden; } 

#buttonCustomize {width: 202px; background: url('/images/buttons/customize_over.gif') 0 0 no-repeat;}
#buttonFlavors {width: 143px; background: url('/images/buttons/flavors_over.gif') 0 0 no-repeat;}
#buttonFacts {width: 123px; background: url('/images/buttons/facts_over.gif') 0 0 no-repeat;}
#buttonFundraising {width: 129px; background: url('/images/buttons/fundraising_over.gif') 0 0 no-repeat;}
#buttonTestimonials {width: 60px; background: url('/images/buttons/faq_over.gif') 0 0 no-repeat;}
#buttonContact {width: 114px; background: url('/images/buttons/contact_over.gif') 0 0 no-repeat;}
#buttonProducts {width: 148px; background: url('/images/buttons/products_over.gif') 0 0 no-repeat;}
#buttonBrowse {width: 184px; background: url('/images/buttons/browse_over.gif') 0 0 no-repeat;}


/* =============================================================================

LEFT RAIL

============================================================================= */

#leftColumn {
width: 200px;
margin: 9px 0 9px 9px;
padding: 10px;
background: #f3deb0;
border: 1px solid #b9ad95;
float: left;
font-size: 90%;
}

#leftFeature {
font-size: 100%;
}

#leftFeature p {
padding-left: 4px;
margin-top: 0;
}


/* =============================================================================

CENTER COLUMN - HOMEPAGE

============================================================================= */

#centerColumn {
float: left;
background: #f3deb0 url('/images/bg/bg_958.jpg') top left repeat-y;
width: 958px;
}

#home #centerColumn {
width: 506px;
background: url('/images/bg/bg_506.jpg') top left repeat-y;
}

#centerColumnInner {
padding: 0 0 12px 0;
}

#home #centerColumnInner {
background: url('/images/homepage_bg.jpg') 15px 0 no-repeat;
padding: 0 25px;
}

#centerColumnInnerContent {
padding: 90px 0 0 205px;
min-height: 255px;
}

.topCornerOuter {
background: url('/images/bg/top_left_rivet.jpg') top left no-repeat;
}

.topCornerInner {
height: 32px;
background: url('/images/bg/top_right_rivet.jpg') top right no-repeat;
}

.bottomCornerOuter {
background: url('/images/bg/bottom_left_rivet.jpg') bottom left no-repeat;
}

.bottomCornerInner {
height: 32px;
background: url('/images/bg/bottom_right_rivet.jpg') bottom right no-repeat;
}



#childLeft {
float: left;
width: 184px;
padding: 0;
text-align: right;
}

.childLeftAd {
margin-bottom: 10px;
}

#childContentRight {
margin: 0 25px 0 193px;
}

#textContent {
padding: 0 15px;
font-size: 110%;

}

#textContent ul {
margin-left: 2em;
}

#customTemplate {
margin-top: 8px;
}

#configuratorDisplay {
width: 285px;
height: 402px;
padding: 66px 0 0 26px;
background: url('/images/jerky_bag.gif') top left no-repeat;
}

#configuratorInner {
width: 256px;
height: 256px;
background: #fff;
}

#userText {
text-align: center;
height: 76px;
padding: 15px 5px 0 5px;
width: 182px;
font-size: 10px;
overflow: hidden;
}

#userText #line1,
#userText #line2 {
line-height: 175%;
font-weight: bold;
}

.arial {
font-family: arial;
font-weight: bold;
font-size: 125%;
}

.times {
font-family: times new roman, times;
font-weight: bold;
font-size: 125%;
}

.verdana {
font-family: verdana;
font-weight: bold;
font-size: 125%;
}

.helvetica {
font-family: helvetica;
font-weight: bold;
font-size: 125%;
}


/* =============================================================================

CENTER COLUMN - CHILD PAGE

============================================================================= */



/* =============================================================================

FOOTER

============================================================================= */

#footer {
clear: left;
padding: 25px 20px 0 20px;
height: 39px;
background: url('/images/footer_bg.jpg') top left no-repeat;
font-family: arial, san-serif;
font-size: 90%;
margin: 0 5px 5px 6px;
}

#footer a {
color: #b75200;
}

#copyright {
float: left;
}

#siteCredit {
float: right;
}

#footerCenter {
margin-top: -8px;
text-align: center;
}

