main .h1{
	font-size: 2.2em;
}

/** Recipe pages */
.recipe{
	
}
	/** Recipe instructions */
	.instructions h3{
		text-transform: lowercase;
	}
		.instructions ol,
		.instructions ol > li{
			list-style-position: inside;
			padding: 0;
			margin: 0 0 1em;
		}



main.white{
	padding-top: .9em;
}
	main.white h2{
		margin-bottom: .5em;
	}
	

	/** Displayed at the top of a recipe category listing */
	#ingredients-spec{
		padding: .5em 1em 1em;
		-webkit-border-radius:	.5em;
		-moz-border-radius:		.5em;
		border-radius:			.5em;
	}
		#ingredients-spec > .h2{
			font-size: 1.42em;
			line-height: 1.3em;
		}

		#ingredients-spec hr{
			color: #7b72b2;
			border: 1px solid #7b72b2;
			border-width: 1px 0 0;
			margin: .8em 0;
		}

		/** Skill legend */
		#skill-levels{
			font-weight: bold;
		}
			#skill-levels .skill-meter::after{
				font-size: 1.3em;
				font-weight: normal;
				vertical-align: bottom;
			}


		/** Ordering method dropdown */
		#sort-recipes{
			text-align: right;
			clear: both;
			padding-top: .5em;
		}
			#ingredients-spec select{
				margin-left: .5em;
				color: #000;
			}


	/** List of recipes for the currently opened category. */
	.recipes > *{
		padding: .5em 0;
	}
		.recipe-details{
			
		}
			.recipe-details::after{
				content: "";
				clear: both;
				display: block;
			}
			.recipes a			{color: inherit !important}
			.recipes a:hover	{text-decoration: none}

			.recipes h3{
				color: #332a86;
				font-size: 1.42em;
			}

			/** Skill level + cooking time */
			.recipe-stats{
				margin: 1em 0 0;
			}
				.recipe-stats > dt{
					text-transform: none;
					font-weight: normal;
					display: inline-block;
					vertical-align: top;
					width: 6.25em;
					position: absolute;
				}

				.recipe-stats > dd{
					padding: 0;
					margin: 0;
					padding-left: 6.25em;
					padding-bottom: .5em;
				}
					/** Tweakpoint: shrink the stat labels a little for smaller handheld devices (<= 352px) */
					@media screen and (max-width: 22em){
						.recipe-stats > dd{padding-left: 5.25em}
					}

					.recipe-stats > dd i{
						font-size: 1.4em;
						vertical-align: middle;
					}

			/** Thumbnail */
			.recipes .thumbnail{
				float: right;
				margin-left: 1em;
				position: relative;
			}
				.recipes .thumbnail a > img{
					width: 11.666em;
					display: block;
					float: right;
					max-width: 100%;
				}

				.stamp.new{
					position: absolute;
					color: #fff;
					font: bold 1.2em/normal "futura-pt", sans-serif;
					text-transform: uppercase;
					white-space: nowrap;
					right: 100%;
					top: 100%;
					margin-right: -2em;
					z-index: 55;
				}
		
		/** Purple footer holding "view recipe" permalink + FB "Like box" */
		.recipes footer{
			background: #8781bd;
			color: #fff;
			padding: .35em .75em;
			font-weight: bold;
			position: relative;
			z-index: 50;

			-webkit-border-radius:	.35em;
			-moz-border-radius:		.35em;
			border-radius:			.35em;
		}
			.recipes .permalink{
				display: inline-block;
				vertical-align: middle;
			}
				.recipes .permalink ~ a::before{
					display: inline-block;
					vertical-align: middle;
					width: 1px;
					height: 1.2em;
					background: #fff;
					content: "";
					margin: 0 .5em 0 .25em;
				}
			
			.recipes .rating{
				font-size: 1.3em;
				letter-spacing: .2em;
				vertical-align: top;
			}
			.recipes .fb_likes{
				float: right;
			}

	/** Hide dividers, since we're only displaying our data in one column. */
	.recipes > hr{
		display: none;
	}


	/** Individual recipe pages */
	.recipe > .result{
		text-align: center;
	}
		#mk-remove .icon-heart{
			padding-right: .5em;
		}
		#mk-remove{
			padding-right: 1.7em;
		}


	/** Sidebar: hide everything except the share links */
	#share-box{
		padding: .75em .5em .5em;
		margin-bottom: 2em;
	}
		#share-box > .h3{
			text-align: left;
			text-indent: .7em;
		}
		#share-box > .white{
			padding: .6em 1em;
			min-height: 2.85em;
		}

		.btn.grey{
			border: 2px solid #443180;
			color: #443180 !important;
			font-weight: normal;
			font-size: 1.2em;
			padding-top: .45em;
			padding-bottom: .45em;
			margin-top: .25em;
			text-transform: none;

			background:	#c0c0c0 url("../img/grad/btn-grey.png") repeat-x;
			background:	-webkit-gradient(linear, left top, left bottom, color-stop(0%, #e7e7e7), color-stop(99%, #c0c0c0));
			background:	-webkit-linear-gradient(top,	#e7e7e7 0%,	#c0c0c0 99%);
			background:	-moz-linear-gradient(top,		#e7e7e7 0%,	#c0c0c0 99%);
			background:	-ms-linear-gradient(top,		#e7e7e7 0%,	#c0c0c0 99%);
			background:	-o-linear-gradient(top,			#e7e7e7 0%,	#c0c0c0 99%);
			background:	linear-gradient(to bottom,		#e7e7e7 0%,	#c0c0c0 99%);
		}

	#share-box ~ *{
		display: none;
	}



	/** Reviews list */
	ul.reviews,
	ul.reviews > li{
		display: block;
		list-style: none;
		color: #9189af;
		padding: 0;
		margin: 0;
	}

	ul.reviews > li{
		border-top: 1px solid #f1f1f1;
		padding-top: .5em;
	}
		ul.reviews > :first-child{
			border-top: 0;
			padding-top: 0;
		}

		ul.reviews .name{
			float: left;
			width: 61%;
		}

		ul.reviews .rating{
			color: #a29061;
			float: right;
			width: 38%;
			text-align: right;
			font-size: 1.3em;
			letter-spacing: .25em;
		}
		
		ul.reviews > li > p{
			clear: both;
			padding-top: .5em;
		}
			ul.reviews time{
				font-weight: bold;
			}




	/** Rate and Review form */
	#rate-and-review form{
		position: relative;
		margin-left: 7em;
		margin-right: 2em;
	}
		#rate-and-review form fieldset > div{
			padding: .75em 0 .25em;
		}
			#rate-and-review form label{
				position: absolute;
				width: 7em;
				right: 100%;
				margin-right: 1em;
				display: block;
				color: #9189af;
				text-align: right;
			}

			#rate-and-review input[type="text"],
			#rate-and-review input[type="email"],
			#rate-and-review textarea{
				width: 100% !important;
				display: block;
			}

			#rate-and-review input[type="submit"]{
				font-size: .9em;
				padding: .75em 1.25em;
			}

			#rate-and-review p{
				color: #9189af;
			}
				#rate-and-review p.small{
					font-size: .85em;
				}
			
			#rate-and-review .captcha{
				padding-top: 0;
				font-size: .9em;
			}
			
		/** jQuery ratings plugin */
		.star-rating-control,
		.star-rating-control > *{
			display: inline-block;
			vertical-align: middle;
		}
		
		.star-rating-control > .star{
			vertical-align: top;
			width:	1.75em;
			height: 1em;
		}
			.star-rating-control > .star > a{
				cursor: pointer;
				display: block;
				font-size: 0;
			}
				.star-rating-control > .star > a::before{
					content: "☆";
					color: #a29061;
					display: inline-block;
					font-family: CKitchenIcons;
					font-size: 16px;
					font-size: 1rem;
					position: relative;
				}

				.star-rating-control > .star-rating-hover > a::before,
				.star-rating-control > .star-rating-on > a::before{
					content: "★";
				}


/** Recipe search results */
.results > article{
	position: relative;
	padding: 1em 1em 1em 14.5em;
	border-top: 1px solid #7067a0;
	margin: 0 -1.25em;
}
	.results > article > .thumbnail{
		position: absolute;
		width: 11.666em;
		left: 1em;
	}

	.results > article > .details{
		
	}
		.results h3 > a,
		.results h3 > a:hover{
			color: inherit;
			text-decoration: none;
		}
		
		.results .recipe-stats{
			background: #fff;
			position: relative;
			z-index: 55;
			padding: 1em 0 0 2em;
			margin: 0 0 0 -15em;
		}
			.results dt{
				font-weight: bold;
			}
				.results dt::after{
					content: ":";
				}

			.results dd{
				padding-left: 7.25em;
			}


/*=============================================================================*
	2. TABLET (600+)
===============================================================================*/
@media screen and (min-width: 37.5em){
	#ingredients-spec > .data{
		display: table;
		width: 100%;
	}
		#skill-level{
			display: table-cell;
		}
		#sort-recipes{
			display: table-cell;
			text-align: right;
		}

	.recipes{
		clear: both;
		display: block;
		content: "";
		margin: 0 -1em;
	}
		.recipes > *{
			width: 50%;
			float: left;
			padding: 1em;
		}

		/** Allow dividers to force recipe boxes onto their own lines for entries that're really too tall to fit everything in at once... */
		.recipes > hr{
			display: block;
			clear: both;
			float: none;
			width: auto;

			padding: .5em 0 0;
			margin: 0 -.5em .5em;
			border: 0 solid #f1f1f1;
			border-width: 0 0 1px;
		}

		/** Search results */
		.pagination > .page-count{
			display: inline-block;
			vertical-align: middle;
			padding-top: .5em;
		}


	/** Individual recipe pages */
	.stats{
		display: table;
		width: 100%;
	}
		.stats > *{
			display: table-cell;
			vertical-align: top;
			white-space: nowrap;
			width: 32%;
		}
			dt.recipe-rating > span{
				display: inline;
			}

			.stats > dl > dt{
				width: auto;
				width: 42%;
			}

		#recipe-actions > li{
			margin: 0;
		}


	/** Primary content */
	.instructions{
		position: relative;
		padding-left: 1em;
		padding-right: 22em;
		margin-right: -19em;
		width: 100%;
		float: left;
	}
		/** Hide the result image at the top of the page (was only displayed for handheld) */
		.recipe > .result{
			display: none;
		}


		.recipe h3{
			margin-bottom: 1em;
			font-size: 1.5em;
		}

		p.preamble{
			font-size: 1.25em;
			line-height: 1.5em;
			margin-top: 0;
		}

		.recipe ol{
			margin-left: 1.25em;
			margin-top: 1em;
		}
			.recipe ol,
			.recipe ol > li{
				list-style-position: outside;
			}


	/** Sidebar */
	#share-box{
		margin-bottom: 0;
	}
	.recipe .sidebar{
		width: 19em;
		float: right;
		display: block;
		padding-bottom: 1em;
		position: relative;
		z-index: 20;
	}
		.sidebar > *			{margin-top: 1em;}
		.sidebar > :first-child	{margin-top: 0;}
		#share-box ~ *			{display: block;}
		
		/** "See who's baking" */
		.baked_button{
			display: table;
			width: 100%;
		}
			.baked_button{
				display: table-cell;
			}
				#btn_baked{
					text-transform: none;
					font-size: 1.2em;
					font-weight: normal;
					padding: .5em 1.4em;
					margin-bottom: .2em;
					vertical-align: middle;
				}

			.bakedit_like{
				display: table-cell;
				padding-right: 1.5em;
				text-align: right;
				vertical-align: bottom;
			}


		/** FB friends who've baked stuff */
		#baked-friends{
			
		}
			#baked-friends > .h3{
				font: bold 1.1em/1.5em sans-serif;
				margin-bottom: .8em;
			}

			#baked-friends .columns{
				width: auto;
			}

			#baked-friends .friends > div::after{
				clear: both;
				display: block;
				content: "";
			}
				.baked_friend_img{
					padding-right: .5em;
				}
					.baked_friend_img img{
						max-width: 4.1666em;
						height: auto;
					}

				/** "Latest baked recipes" / "What your friends have baked" */
				.baked_recipe_name > a:link,
				.baked_recipe_name > a:visited,
				.baked_recipe_name > a:hover{
					font-weight: bold;
					padding-right: .5em;
					display: block;
					color: #39257f;
					text-decoration: none;
				}




	/** Reviews list */
	ul.reviews{
		display: table;
		width: 100%;
	}
		ul.reviews > li{
			display: table-row;
		}
			ul.reviews > li > *{
				display: table-cell;
				vertical-align: top;
				padding: .25em .5em 1em 0;
				float: none !important;
			}
			ul.reviews .name{
				width: 21%;
			}
			ul.reviews .rating{
				width: 16%;
				font-size: 1em;
				text-align: left;
			}
			
			ul.reviews > li > p{
				padding-top: 0
			}


	/** Rate & review form */
	#rate-and-review fieldset:first-child{
		width: 48%;
		float: left;
		padding-right: 7em;
		position: relative;
	}
	#rate-and-review fieldset:first-child + fieldset{
		float: right;
		margin-bottom: 1.5em;
		width: 40%;
		position: relative;
	}
	
	
	/** Search results */
	.results > article{
		min-height: 14.5em;
	}
		.results > article > .details::after{
			content: "";
			display: block;
			clear: both;
		}
			.results > article > .details > div{
				width: 50%;
				float: left;
			}
	
			.results > article > .details > .recipe-stats{
				width: 50%;
				float: left;
				margin: 0;
			}
}

/*=============================================================================*
	2.5 TABLET: Tweakpoint (600-720)
===============================================================================*/
@media screen and (min-width: 37.5em) and (max-width: 45em){

	/** Recipes listing */
	.recipe-details{
		height: 11.5em;
	}
		.recipes h3{
			font-size: 1.35em;
		}
		.recipes dl{
			font-size: .9em;
			margin-top: .5em;
		}
		.recipes dd{
			padding-left: 5em;
			padding-bottom: 0;
		}
			.recipe-time + dd{
				line-height: 1.3em;
				padding-top: .15em;
			}
			.recipes .icon-clock{
				font-size: 1.3em;
			}
		
		dt.recipe-rating{
			word-spacing: -.1em;
		}
			dt.recipe-rating > span{
				display: none;
			}
			.recipes .rating{
				font-size: 1.1em;
				vertical-align: middle;
			}

	.recipes .thumbnail{
		margin-left: .5em;
	}
}


/*=============================================================================*
	3. DESKTOP (1024+)
===============================================================================*/
@media screen and (min-width: 64em){

#ingredients-spec{
	margin: 0 -1.5em;
	font-size: 1em;
	padding-left: 1.5em;
}
	#ingredients-spec > .h2{
		font-size: 2em;
	}

	.recipe figure.result{
		margin-right: -1.25em;
	}

.instructions{
	padding-left: 0;
	padding-top: 2em;
}

.sidebar{
	margin-right: -1.5em;
	margin-top: 2em;
}

.accordion{
	margin-left: -1.5em;
	margin-right: -1.5em;
}

}



/*=============================================================================*
	PRINT
===============================================================================*/
@media print{
	.page-tabs,
	.recipe .sidebar,
	.page-actions,
	#rate-and-review{
		display: none !important;
	}
	
	ul.reviews, ul.reviews > li{
		color: #000;
	}
	

	.recipe{
		position: relative;
	}
		.statbox{
			color: #000;
			background: none;
			padding-left: 0;
			padding-right: 0;
		}

		.recipe > .result{
			float: right;
			margin-left: 2em;
		}
}