/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Page Styles
================================================== */

/* #Top Nav
================================================== */

	#topnav {
		width: 100%; height: 40px; margin:0; padding:0; background-color: #fff; 
	}
	
	#topnav ul li {
		display:inline; line-height: 40px; margin:0 10px 0 5px;
	}
	
	.table {
		margin: 0 auto; display: table;   /* Allow the centering to work */
	}
	
	.topnav a {
		color: #402c1a; text-decoration: none;
	}
	
	.topnav a:hover {
		text-decoration: underline;
	}
	

/* #Body
================================================== */	

	#recipe-pics {position: absolute; left:52%; top:50px;}
	
	.logo{margin-left: -5px;}
	.logo+.column{margin-top: -6px;}
	
	.intro { padding-bottom: 10px;}
	.intro .full-width{ width: 100%; }
	
	.white-bg { 
		background: rgba(227, 216, 211, .7);
	}
	.ie8 .white-bg{background-color: #ffffff !important;}
	.white-bg p { padding:10px 20px;  }
	img.chef-tory {width: 100%;}
	
	.headline { padding: 0; margin-top: 0; text-shadow: 1px 1px #4b3034 }
	.large { font: 16px/28px Georgia, "Times New Roman", Times, sans-serif; }
	.white-bg-intro { padding: 5px 10px; margin-top: 9px;}
	.intro .one-third.column .white-bg-intro ~ img{ margin-top: 14px;}
	.intro .one-third.column .white-bg-intro{padding: 12px 10px;}
	.intro .two-thirds.column .white-bg-intro p{padding: 10px 15px}
	.intro .two-thirds.column .white-bg-intro p:first-child{padding-right: 50px;}
	.intro .tilted{ position: absolute; bottom: 118px; right: 226px;}
	
	.expand.ui-accordion-header-active.bg_container{height: auto; background: #fff;}
	.expand.ui-accordion-header-active h2{
		font-size: 30px;
		padding-top: 20px;
		line-height: 36px;
	}
	.expand.ui-accordion-header-active .container p{
		width: 525px;
		border-bottom: 1px solid #4e3320;
		padding-bottom: 8px;
	}
	.expand.bg_container{background: url('../images/expand-bg.png') 0 0 repeat-x transparent; height: 57px;}
	.expand .container{width: 944px;}
	.expanded .container{width: 944px; padding-bottom: 5px;}
	.expand .button{
		float: right; 
		margin-top: 13px; 
		height: 25px; 
		width: 23px; 
		display: block;
		background: url('../images/expand.png')
	}
	.expand.ui-accordion-header-active .button{
		background: url('../images/collapse.png')
	}
	.expand h2{padding-top: 6px;}
	.expand .container p{
		padding: 0; 
		color:#432712;
		font-size: 14px;
	}
	
	#accordion .expanded{background: url('../images/expanded-bg.png') 0 bottom repeat-x #fff; }
	.expanded .column{
		width: 290px;
		margin:0 28px 0 0;
		display: inline-block;
		padding: 30px 0;
		float: none;
		vertical-align: top;
	}
	.expanded .column img{width: 100%;}
	.expanded .column.third{margin-right: 0;}
	.expanded .column p{
		padding: 0; 
		margin-bottom: 15px; 
		font-size: 14px; 
		font-family: Georgia, 'Times New Roman', Times, sans-serif;
		line-height: 22px;
	}
	.expanded .column img+p{margin-top: 45px;}
	.expanded li{
		font-size: 14px;
		line-height: 22px;
		font-family: Georgia, 'Times New Roman', Times, sans-serif;
		margin-bottom: 15px;
		list-style-type: disc;
		list-style-position: inside;;
		margin-left: 17px;
	}
	#expanded_3 strong,
	#expanded_6 strong,
	#expanded_8 strong{
		font-weight: normal;
		color: #5c9c3a;
		font-size: 16px;
	}
	#expanded_4 img{margin-top: 30px;}
	.expanded img+img{margin-top: 50px;}
	.expanded a{color: #143cbd !important;}
	.expand .ui-accordion-header-icon{display: none;}
	.ui-accordion .ui-accordion-icons.expand{padding: 0; margin: 0; border-radius: 0; border: 0 !important; width: 100%;}
	.ui-accordion .ui-accordion-content.expanded{padding: 0; margin: 0; border-radius: 0; border: 0 !important;}
	
	.becci, .recipe-card { min-height: 321px; }
	.becci img, .recipe-card img { float:left; height:321px; padding:0 20px 10px 0; }
	
	.recipe-card, .chef, footer-links {margin: 15px;}
	
	.chef {min-height:254px; margin-top:25px;}
	.chef img {float:left; padding:20px;}
	.chef p {padding-left: 20px;}
	
	.container p {padding:10px 20px;}
	
	.featured-recipes { margin: 15px; }
	.featured-recipes img { padding: 5px 5px 5px 0; float: left;}
	a.recipe {color:#749e5e; text-decoration: none; font-size: 16px; line-height: 18px; float:left; clear: left;}
	a.recipe:hover {text-decoration: underline;}
	
	
/* #Footer
================================================== */		

	#footer { width: 100%; height: 55px; margin:0; padding:0; background-color: #402c1a; }
	
	#footer .container {padding: 10px 20px;}
	
	.social { float:right; padding-top: 5px; }
	.social ul li { display: inline; }
	
	#footer ul li a {font-size: 11px; font-family: Arial; color:#589638; }

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		.grant img {margin-right: 100px;}
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		img.creole-pistachios {width: 100%;}
		
	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/

@font-face {
  font-family: 'Gentium Basic';
  font-style: normal;
  font-weight: 400;
  src: local('Gentium Basic'), local('GentiumBasic'), url(http://themes.googleusercontent.com/static/fonts/gentiumbasic/v4/KCktj43blvLkhOTolFn-MU3vq9dAc3DuCNWjMJNKvGE.woff) format('woff');
}
@font-face {
  font-family: 'Gentium Bold';
  font-style: normal;
  font-weight: 700;
  src: local('Gentium Basic Bold'), local('GentiumBasic-Bold'), url(http://themes.googleusercontent.com/static/fonts/gentiumbasic/v4/2qL6yulgGf0wwgOp-UqGyJtLj97TRHZgRjiWmuQrnKE.woff) format('woff');
}
@font-face {
  font-family: 'Gentium Italic';
  font-style: italic;
  font-weight: 400;
  src: local('Gentium Basic Italic'), local('GentiumBasic-Italic'), url(http://themes.googleusercontent.com/static/fonts/gentiumbasic/v4/qoFz4NSMaYC2UmsMAG3lyZsOf4RmPPVZkcJgvAG5zrc.woff) format('woff');
}
@font-face {
  font-family: 'Gentium Bold Italic';
  font-style: italic;
  font-weight: 700;
  src: local('Gentium Basic Bold Italic'), local('GentiumBasic-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/gentiumbasic/v4/8N9-c_aQDJ8LbI1NGVMrwrDZl-4EaWqUt2vChmZtKR8.woff) format('woff');
}