/*----------------------------------------------
Main Style Sheet (Tested on IE6 & up, Safari & Firefox)

version:  1.0
author:  scott anderson
email:  scott@abandondesign.com
website:  http://www.abandondesign.com
------------------------------------------------*/

/* =Typography
----------------------------------------------*/
h1 {
	float: left;
	display: inline;
	text-indent: -9999px;
}
 h2 {
 	font-size: 30px;
 	font-weight: bold;
 	letter-spacing: -1px;
}
h3 {
	font-size: 24px;
	font-weight: bold;
	letter-spacing: -1px;
}
h4 {
	font-size: 18px;
	font-weight: bold;
}

h5 {
	font-size: 16px;
	font-weight: bold;
}

p {
	font-size: 14px;

}

/* =links
----------------------------------------------*/
a {
	color: #fff;
	
}
a:hover {
	color: #82bcea;
text-decoration: none;
}
p a {
	border-bottom: 1px dotted #FFF;
}

/* =main
----------------------------------------------*/
body {
	margin: 0 auto;
	font: normal 62.5% Arial,'Lucida Grande', Helvetica, sans-serif;
	color: #FFF;
	background: #82bcea url(../images/bg.gif) repeat-x;
}
#wrapper {
	margin: 0 auto;
	width: 860px;
}

/* =header
----------------------------------------------*/
#header {
	float: left;
	display: inline;
	width: 100%;
	height: 122px; 
	background: transparent url(../images/header2.jpg) repeat-x;
}

/* =navigation
----------------------------------------------*/
#navigation {
	float: left;
	display: inline;
	width: 860px;
	height: 34px;
}
#navigation ul {
	float: left;
	display: inline;
}
#navigation ul li {
	float: left;
	display: inline;
	height: 34px;
	text-indent: -9999px;
}
#navigation ul li a {
	height: 34px;
	display: block;
}

/* =rollovers */
li.home a {
	width: 120px;
	background: transparent url(../images/navBar.gif) no-repeat scroll 0px 0px;
}

li.home a:hover, li.home a:active {
	width: 120px;
	background: transparent url(../images/navBar.gif) no-repeat scroll 0px -34px;
}

li.store a {
	width: 101px;
	background: transparent url(../images/navBar.gif) no-repeat scroll -120px 0px;
}

li.store a:hover, li.store a:active {
	width: 101px;
	background: transparent url(../images/navBar.gif) no-repeat scroll -120px -34px;
}

li.history a {
	width: 101px;
	background: transparent url(../images/navBar.gif) no-repeat scroll -221px 0px;
}

li.history a:hover, li.history a:active {
	width: 101px;
	background: transparent url(../images/navBar.gif) no-repeat scroll -221px -34px;
}

li.testimonials a {
	width: 101px;
	background: transparent url(../images/navBar.gif) no-repeat scroll -322px 0px;
}

li.testimonials a:hover, li.testimonials a:active {
	width: 101px;
	background: transparent url(../images/navBar.gif) no-repeat scroll -322px -34px;
}

li.faqs a {
	width: 101px;
	background: transparent url(../images/navBar.gif) no-repeat scroll -423px 0px;
}

li.faqs a:hover, li.faqs a:active {
	width: 101px;
	background: transparent url(../images/navBar.gif) no-repeat scroll -423px -34px;
}

li.recipes a {
	width: 101px;
	background: transparent url(../images/navBar.gif) no-repeat scroll -524px 0px;
}

li.recipes a:hover, li.recipes a:active {
	width: 101px;
	background: transparent url(../images/navBar.gif) no-repeat scroll -524px -34px;
}

li.cart a {
	width: 101px;
	background: transparent url(../images/navBar.gif) no-repeat scroll -625px 0px;
}

li.cart a:hover, li.cart a:active {
	width: 101px;
	background: transparent url(../images/navBar.gif) no-repeat scroll -625px -34px;
}

li.contact a {
	width: 133px;
	background: transparent url(../images/navBar.gif) no-repeat scroll -726px 0px;
}

li.contact a:hover, li.contact a:active {
	width: 133px;
	background: transparent url(../images/navBar.gif) no-repeat scroll -726px -34px;
}

/* =section1Home
----------------------------------------------*/
#section1 {
	position: relative;
	float: left;
	display: inline;
	width: 100%;
	height: auto;
	margin-top: 20px;
	background: transparent url(../images/mainBg.gif) repeat-x;
}
#top {
	float: left;
	display: inline;
	width: 860px;
	height: 10px;
	background: transparent url(../images/mainTop.gif) no-repeat;
}
#bottom {
	float: left;
	display: inline;
	width: 860px;
	height: 10px;
	background: transparent url(../images/mainBottom.gif) no-repeat;
}
#section1 img.mainImage {
	float: left;
	display: inline;
	margin-left: 10px;
}
#description {
	float: left;
	display: inline;
	width: 225px;
	margin-left: 10px;
}
#description h2 {
	font-size: 26px;
	margin-top: 10px;
}

#description p {
	font-size: 14px;
	
}
#description p.noTop {
	margin-top: 0;
	text-indent: 10px;
}
#description img {
	margin: 20px 0 0 40px;
}

/* =section2
----------------------------------------------*/
#section2 {
	position: relative;
	float: left;
	display: inline;
	width: 100%;
	height: auto;
	margin-top: 20px;
	background: transparent url(../images/midBg.gif) repeat-x;
}
#midTop {
	float: left;
	display: inline;
	width: 860px;
	height: 10px;
	background: transparent url(../images/midTop.gif) no-repeat;
}
#midBottom {
	float: left;
	display: inline;
	width: 860px;
	height: 10px;
	background: transparent url(../images/midBottom.gif) no-repeat;
}
#section2 img {
	float: left;
	display: inline;
	margin-left: 10px;
}
#section2 img.rightImage, #section2 img.middleImage {
	margin-left: 15px;
}

/* =section3
----------------------------------------------*/
#section3 {
	position: relative;
	float: left;
	display: inline;
	width: 100%;
	height: auto;
	margin: 20px 0 0 0;
	background: transparent url(../images/section3Bg.gif) repeat-x;
}
#bottomTop {
	float: left;
	display: inline;
	width: 860px;
	height: 10px;
	background: transparent url(../images/section3Top.gif) no-repeat;
}
#bottomBottom {
	float: left;
	display: inline;
	width: 860px;
	height: 10px;
	background: transparent url(../images/section3Bottom.gif) no-repeat;
}
#meet {
	float: left;
	display: inline;
	width: 300px;
	margin: 10px 0 0 0;
}
#meet h2 {
	font-size: 24px;
}
#meet a:hover {
	border-bottom: none;
}
#section3 img {
	float: left;
	display: inline;
	margin: 0 0 0 20px;
}

/* =historyPage
----------------------------------------------*/
#history #section1 {
	position: relative;
	float: left;
	display: inline;
	width: 100%;
	height: auto;
	margin-top: 20px;
	background: #5085bb url(../images/historyBg.gif) repeat-x;
}
#history #top {
	background: transparent url(../images/historyTop2.gif) no-repeat;
}
#history #bottom {
	float: left;
	display: inline;
	width: 100%;
	height: 10px;
	background: #82bcea url(../images/historyBottom.gif) no-repeat;
}
#historyContent {
	float: left;
	display: inline;
	width: 550px;
	margin-left: 40px;
}
#historyContent h2 {
	margin-top: 30px;
}
#historyPhotos {
	float: left;
	display: inline;
	width: 240px;
	margin: 20px 0 0 10px;
}
#history #section1 img {
	margin: 20px 0 20px 20px;
}

/* =testimonialsPage & faqsPage
----------------------------------------------*/
#testimonials #section1, #faqs #section1 {
	position: relative;
	float: left;
	display: inline;
	width: 860px;
	height: auto;
	margin-top: 20px;
	background: #5085bb url(../images/historyBg.gif) repeat-x;
}
#testimonials #top, #faqs #top {
	background: transparent url(../images/historyTop2.gif) no-repeat;
}
#testimonials #bottom, #faqs #bottom {
	float: left;
	display: inline;
	width: 100%;
	height: 10px;
	background: #82bcea url(../images/historyBottom.gif) no-repeat;
}
#testimonialsContent, #faqsContent {
	float: left;
	display: inline;
	width: 750px;
	margin-left: 40px;
}
#testimonialsContent h2, #faqsContent h2 {
	margin-top: 30px;
}
p.testTag {
	font-size: 12px;
	font-style: italic;
}
div.testimonial {
	margin-top: 40px;
	padding: 10px;
	background-color: #225289;
}
div#lastTestimonial {
	margin-bottom: 30px;
}
p.author {
	margin-top: 0;
	font-style: italic;
	font-size: 12px;
}
#questionList {
	float: left;
	display: inline;
	width: 780px;
}
#questionList ul {
	float: left;
	display: inline;
	width: 100%;
}

#questionList ul li {
	font-size: 14px;
	margin-top: 10px;
}

#faqs #section1 #faqsContent div.question {
	float: left;
	display: inline;
	width: 100%;
	margin-top: 30px;
	padding: 10px;
	background-color: #225289;
}

#question17 {
	margin-bottom: 50px;
}

h4.questionCategory, h3.questionSection {
	float: left;
	display: inline;
	margin-top: 20px;
	padding: 5px;
	background-color: #1e497a;
}
#productQuestions, #shippingQuestions, #pricingQuestions {
	width: 100%;
}

/* =recipesPage
----------------------------------------------*/
#recipes #section1 {
	position: relative;
	float: left;
	display: inline;
	width: 100%;
	height: auto;
	margin-top: 20px;
	background: #5085bb url(../images/historyBg.gif) repeat-x;
}
#recipes #top {
	background: transparent url(../images/historyTop2.gif) no-repeat;
}
#recipes #bottom {
	position: absolute;
	bottom: 0;
	right: 0;
	float: left;
	display: inline;
	width: 100%;
	height: 10px;
	background: #82bcea url(../images/historyBottom.gif) no-repeat;
}

/*Recipe List*/
#recipeList #listTop {
	float: left;
	display: inline;
	width: 100%;
}
#recipeList h2 {
	float: left;
	display: block;
	margin: 10px 0 0 20px;
}
#recipeList {
	float: left;
	display: inline;
	margin-top: 20px;
	margin-left: 20px;
}
#recipeList ul {
	float: left;
	display: inline;
	margin: 15px 0 0 20px;	
}
#recipeList ul li {
	float: left;
	display: inline;
	margin-right: 10px;	
}
#recipeList ul li a {
	display: block;
	padding: 5px;
	font-size: 14px;
	font-weight: bold;
	border: 1px solid #fff;
}
#recipeList ul li a:hover {
	background-color: #FFF;
}

/*Recipe Boxes*/
#recipeBox {
	float: left;
	display: inline;
	margin-top: 20px;
	border-top: 1px dotted #FFF;
}
div.recipe {
	float: left;
	display: inline;
	width: 550px;
	margin-left: 20px;
}
div.recipe h3 {
	margin-top: 20px;
}
div.recipe p {
	margin-top: 4px;
}

div.recipePhoto p {
	text-align: center;
}
div.recipePhoto {
	float: left;
	display: inline;
	margin: 20px 20px 0 20px;
}
div.recipePhoto img {
	border: 5px solid #FFF;
}
div.lastRecipe {
	margin-bottom: 20px;
}
span.recipeFeed {
	font-weight: bold;
	font-size: 16px;
}

/* =newsPage
----------------------------------------------*/
ul#newsList {
	margin-top: 20px;
}
ul#newsList a {
	display: block;
	height: 24px;
	padding-left: 32px;
	background: transparent url(../images/newsIcon.png) no-repeat left center;
}
li.newsIcon {
	font-size: 14px;
}
span.choose {
	font-weight: bold;
}

/* =humourPage
----------------------------------------------*/
#humour #section1 {
	text-align: center;
	background: transparent;
}

/* =errorPage
----------------------------------------------*/
#error #section1 {
	text-align: center;
	background: transparent;
}

/* =contactPage
----------------------------------------------*/
/*Form Side*/
#formBox {
	position: relative;
	float: left;
	display: inline;
	width: 522px;
	height: auto;
	margin-top: 20px;
	background: #225289 url(../images/formBg.gif) repeat-x;
}

#formBox #top {
	float: left;
	display: inline;
	width: 522px;
	height: 10px;
	background: transparent url(../images/formTop2.gif) no-repeat;
}
#formBox #bottom {
	float: left;
	display: inline;
	width: 522px;
	height: 10px;
	margin-top: 20px;
	background: #5fa7e1 url(../images/formBottom.gif) no-repeat;
}

a.privacy {
	float: left;
	display: inline;
	margin: 10px 0 0 25px;
	text-decoration: underline;
}

/*Address Side*/
#addressBox {
	position: relative;
	float: left;
	display: inline;
	width: 318px;
	height: auto;
	margin: 20px 0 0 20px;
	background: #225289 url(../images/formBg.gif) repeat-x;
}

#addressBox #top {
	float: left;
	display: inline;
	width: 318px;
	height: 10px;
	background: transparent url(../images/addressTop2.gif) no-repeat;
}
#addressBox h3 {
	margin: 20px 0 0 20px;
}

#addressBox p {
	margin: 10px 0 0 20px;
}
#addressBox p.noTop {
	margin-top: 0;
}
#addressBox p.addressTitle {
	font-weight: bold;
}

#addressBox #bottom {
	float: left;
	display: inline;
	width: 318px;
	height: 10px;
	margin-top: 90px;
	background: #5fa7e1 url(../images/addressBottom.gif) no-repeat;
}

/* =form Elements
----------------------------------------------*/
form {
	float: left;
	display: inline;
	margin: 20px 0 0 20px;
	padding: 0;
}
label {
	display: block;
	margin-top: 20px;
	text-align: left;
	font-size: 12px;
	letter-spacing: normal;
	padding: 0;
}
/*Inputs & Textareas*/
textarea {
	margin: 10px 0 0 0;
}
.border {
	border: 1px solid #CCC;
	color:#666;
	background-color:#82bcea;
	font-size:12px;
	line-height:160%;
	height:20px;
	width:190px;
	margin: 0;
	padding: 0;
}
.borders {
	border: 1px solid #CCC;
	color:#666;
	background-color:#82bcea;
	font-size:12px;
	line-height:160%;
	height:130px;
	width:262px;
}
input[type="text"]:hover, textarea:hover {
	background-color:#fff;
}
input.border:focus, textarea.borders:focus {
	background: #fff;
	border: 1px solid #595959;
}
/*Information Fields*/
div#inputs {
	float: left;
	display: inline;
}
div#comments {
	float: left;
	display: inline;
	margin-left: 20px;
}
/*Text*/
#formBox h2, #formBox p {
	margin: 20px 0 0 20px;
}
#formBox p.small {
	margin: 5px 0 0 20px;
	font-weight: normal;
	font-size: 12px;
	letter-spacing: normal;
}
#formBox p.required {
	font-size: 11px;
	font-weight: normal;
	margin: 0;
	letter-spacing: normal;
}
/*Submit Button*/
.submitBtn {
	margin-top: 20px;
}

/* =billy
----------------------------------------------*/
#billy {
	float: left;
	display: inline;
	width: 199px;
	height: 206px;
}

#billy a {
	display: block;
}

#billy img {
	margin-left: 0;
}
/* =privacy
----------------------------------------------*/
#historyContent h4 {
	margin-top: 20px;
}

/* =footer
----------------------------------------------*/
#footer {
	float: left;
	display: inline;
	width: 100%;
	height: 100px;
	margin-top: 20px;
	text-align: center;
	color: #225289;	
}
#footer p {
	font-size: 11px;
}
#footer a:hover {
	color: #5085bb;
}