/* ==========================================================================
   ------------------ RECIPE PAGES ------------------------
   ========================================================================== */


.recipe {position: relative; float: left; width: 100%; min-height: 110px; margin: 1.5em auto 0 auto; text-align: center; background: #faf7e0 url('/images/ui/index-card.gif') repeat-x;
	-webkit-box-shadow: 2px 2px 3px rgba(0,0,0, 0.6);
	-moz-box-shadow: 2px 2px 3px rgba(0,0,0, 0.6);
	box-shadow: 2px 2px 3px rgba(0,0,0, 0.6);
	}
	#page-content .recipe {display: block; text-decoration: none;}
	#page-content .recipe:hover {opacity:0.6; text-decoration: none;}
.recipe #tape {position: absolute; top: -1em; left: 50%;   transform: translate(-50%, -5%);}
#page-content .recipeHead {display: block; width: 90%; margin: .5em auto; color: #666; font-size: 1em; font-family: 'Homemade Apple', cursive;}
#page-content .recipeName {display: block; width: 90%; margin: 0 auto .5em auto; font-size: 1.0em; line-height: 1.125em;}
	#page-content .recipeName:hover {text-decoration: underline;}


.recipeCard {position: relative; float: left; width: 94%; min-height: 350px; margin: 1.5em auto; padding: 0 3%; background: #faf7e0 url('/images/ui/index-card.gif') repeat-x;
	-webkit-box-shadow: 2px 3px 5px rgba(0,0,0, 0.5);
	-moz-box-shadow: 2px 3px 5px rgba(0,0,0, 0.5);
	box-shadow: 2px 3px 5px rgba(0,0,0, 0.5);
	}
	
#page-content .recipeCard .recipeHead {width: 100%; text-align: center; font-size: 1.125em;}
#page-content .recipeSubhead {color: #900028; margin: 0 0 .25em 0; font-weight: 700; font-size: 1.25em; line-height: 1.125em; font-family: "Raleway",verdana,"Trebuchet MS",Helvetica,Arial,sans-serif;} 
#page-content .recipeGroupName {color: #000; margin: 1em 0 .25em 0; font-weight: 700; font-size: 1.0em; line-height: 1.125em; font-family: "Raleway",verdana,"Trebuchet MS",Helvetica,Arial,sans-serif;}
#page-content .recipeCard ul {list-style-type: none; margin: 0 0 1.0em 0; padding: 0; }
	#page-content .recipeCard li {width: 100%; float: left; margin: 0 0 .5em 0;}
	#page-content .recipeCard li:nth-of-type(odd) {margin-right: 0;}
#page-content .recipeCard p {font-size: 1.0em; line-height: 1.75em;}


	/* -----------------------  MEDIA QUERIES    ------------------------ */

	/* 430px/16px = 26.875em */
	@media all and (min-width: 26.875em) {
	.recipe {width: 46%; margin: 1.5em 4% 0 0;}
	#page-content .recipeCard li {width: 47%;}
	#page-content .recipeCard li:nth-of-type(odd) {margin-right: 4%;}
	}

	/* 520px/16px = 32.5em */
	 @media all and (min-width: 32.5em) {
	}
	
	/* 580px/16px = 36.25em */
	 @media all and (min-width: 36.25em) {
	.recipe {width: 30%; margin: 1.5em 3% 0 0;}
	.recipe:nth-of-type(odd) {clear: none;}
	.recipe:nth-of-type(3n+1) {clear: both;}
	}

	/* 700px/16px = 43.75em */
	@media all and (min-width: 43.75em) {
	.recipe {width: 46%; margin: 1.5em 4% 0 0;}
	.recipe:nth-of-type(3n+1) {clear: none;}
	.recipe:nth-of-type(odd) {clear: both;}
	}
	
	/* 780px/16px = 48.75em */
	@media all and (min-width: 48.75em) {
	}

	/* 900px/16px = 56.25em */
	 @media all and (min-width: 56.25em) {
	.recipe {width: 30%; margin: 1.5em 3% 0 0;}
	.recipe:nth-of-type(odd) {clear: none;}
	.recipe:nth-of-type(3n+1) {clear: both;}
	}

	/* 1200px/16px = 75em */
	 @media all and (min-width: 75em) {
	.recipe {min-height: 0;}
	}