@charset "UTF-8";
@import url(reset.css);
@import url(footer.css);
/* @import url(http://fonts.googleapis.com/css?family=Gilda+Display|Alegreya+SC:400,700|Alegreya:400italic,400,700|Sorts+Mill+Goudy:400italic); */
@import url('https://fonts.googleapis.com/css2?family=Alegreya+SC:wght@400;700&family=Alegreya+Sans+SC:ital,wght@1,900&family=Alegreya:ital,wght@0,400..900;1,400..900&family=Gilda+Display&family=Sorts+Mill+Goudy:ital@1&display=swap');

@import url(colorPalette.css);

/* Mobile-First CSS Document. First section, labeled as initial, includes everything for mobile tall */

/* font coding: */
alegreya-sc-regular {
  font-family: "Alegreya SC", serif;
  font-weight: 400;
  font-style: normal;
}

.alegreya-sc-bold {
  font-family: "Alegreya SC", serif;
  font-weight: 700;
  font-style: normal;
}


.sorts-mill-goudy-regular-italic {
  font-family: "Sorts Mill Goudy", serif;
  font-weight: 400;
  font-style: italic;
}
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 900

.alegreya-<uniquifier> {
  font-family: "Alegreya", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.gilda-display-regular {
  font-family: "Gilda Display", serif;
  font-weight: 400;
  font-style: normal;
}


/* ====full-page, initial */

body {
	width: 100%;
	font-size:100%; /* this sets an em space to 16px */
  font-family: "Alegreya", serif;
  font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	color: #3e3c32; /* darkGray */
	background-color: #EFEECC; /*  ivory*/
	}

.wrapper {
	width: 92%;
	margin: 1.5em auto .5em auto; /* when footer is added back in, margin-bottom changes to zero. */
	position: relative;
	overflow: hidden;
	}
	.recipe .wrapper {
		margin-top: .5em;
		}
/* this is to enable having the aside be a little closer to the top of the page. */

/* !====Typography, initial*/
/*
font-family: 'Gilda Display', serif;
font-family: 'Alegreya SC', serif;
font-family: 'Alegreya', serif;
font-family: 'Sorts Mill Goudy', serif;
*/
h1 {
  font-family: "Gilda Display", serif;
  font-weight: 400;
  font-style: normal;
	font-size:3.5em;
	text-transform: lowercase;
	line-height: .9em;
	color: #765483; /* sageflower */
	text-shadow: -3px 3px 3px #EFEECC; /* ivory */
	margin: 0 0 .25em 0;
	hyphens: manual;
	-moz-hyphens: manual;
	-webkit-hyphens: manual;
	}

	h1.long {
		font-size: 2.75em;
		line-height: .95em;
		}

	h1.medium {
		font-size: 3em;
		}

h2  {
  font-family: "Gilda Display", serif;
	font-size:2em;
	font-weight: normal;
	color: #F9FFEC; /* cream */
	text-shadow: -2px 2px 2px #765483; /* sageflower */
	margin: 0;
	text-align: left;
	text-transform: lowercase;
	}

h4 {
  font-family: "Alegreya SC", serif;
	font-size: 1.25em; /* mobile only */
	font-weight: 400;
	line-height: .8em;
	color: #F9FFEC; /* cream */
	margin:0;
	padding: 0 0 .35em 0;
	border-bottom: solid 1px #e9e1f1;
	text-transform: lowercase;
	text-shadow: -1px 2px 1px #5e4468 ; /* eggplant */
	}
	.welcome h4 {
		color: #EFEECC;
		border-bottom: solid 1px #EFEECC;
		text-shadow: -1px 1px 2px #5c5a4e; /* gray */
		}

	h4.link {
		padding: 0;
		}

h6 {
	font-size: 1.5em; /* 24px */
	font-weight: normal;
	color: #F9FFEC;
	display: block;
	padding: .25em;
/*
		padding-top: .1em;
		padding-bottom: .2em;
*/
	text-align: center;
	margin: -1px -2px 0px -2px;
	vertical-align: bottom;
	border-top: 1px solid #765483; /* sageflower */
	border-bottom: 1px solid #765483; /* sageflower */
	background: -webkit-linear-gradient(#765483 0%, #543360 100%);
	background: -moz-linear-gradient(#765483 0%, #543360 100%);
	background: linear-gradient(#765483 0%, #543360 100%);
	}
	h6.alternate {
		color: #765483;
		background: -webkit-linear-gradient(#EFEECC 0%, #F9FFEC 50%);
		background: -moz-linear-gradient(#EFEECC 0%, #F9FFEC 50%);
		background: linear-gradient(#EFEECC 0%, #F9FFEC 50%);
		}
	.whatsCooking h6 {
		display: none;
		}
	.toc h6 {
		text-align: right;
		position: absolute;
	    -ms-transform: translateX(-100%) rotate(-90deg);
	    -moz-transform: translateX(-100%) rotate(-90deg);
	    -webkit-transform: translateX(-100%) rotate(-90deg);
	    transform: translateX(-100%) rotate(-90deg);
	    -ms-transform-origin: top right;
	    -moz-transform-origin: top right;
	    -webkit-transform-origin: top right;
	    transform-origin: top right;
		}

	#recipeIndex .toc h6 {
	    text-align: center;
	    padding: 0;
	    margin: 0;
	    line-height: 1.3em;
	    -ms-transform: inherit;
	    -moz-transform: inherit;
	    -webkit-transform: inherit;
	    transform: inherit;
	    height: 1.4em;
	    width: 1em;
	    }

	.single {
		line-height: 1.8em;
		}

	.double {
		line-height: .9em;
		}


p, li, td {
	font-size: 1em;
	line-height: 1.3em;
	margin: 0 0 .65em 0;
	}

i, cite, .welcome p, a.book {
  font-family: "Sorts Mill Goudy", serif;
  font-weight: 400;
	font-style: italic;
	}

	.ancillary .welcome p {
  font-family: "Alegreya SC", serif;
  font-weight: 400;
		font-style: normal;
		}

sup, sub {
	font-size: .9em;
	vertical-align: baseline;
	position: relative;
	top: -0.15em;
	}

sub {
	top: 0;
	}

/* !=====LINK behavior, initial !*/
a {
	text-decoration:none;
	color: inherit;
	}

a:hover	{
	text-decoration:none;
	color: #765483;
	font-size:1.05em;
	}

	.welcome a:hover	{
		color: #8f885b;
		}

.recipe aside a {
	color: #7b7244;
	}

.recipe aside a[href*=www] {
	color: inherit;
	}


a[href*=www], a.external {
	display: inline-block;
	border-bottom: 1px dashed  #8f885b;
/* 	line-height: 1em; */
	}

	a[href*=www]:hover	{
		color: #47344e;
		font-size:1em;
		}

	.ingredients table	a[href*=www] {
		display: inline;
		border-bottom: none;
		line-height: inherit;
		color: #7b7244;
		}

		.ingredients table	a[href*=www]:hover {
			font-size:1.08em;
			color: #8f885b;
			}

	h4 a:hover, h2 a:hover {
		color: #765483;
		font-size: inherit;
		text-shadow: -1px 1px 1px #F9FFEC; /* cream */
		}

	h2 a:hover {
		text-shadow: -2px 2px 2px #F9FFEC; /* cream */
		}

	#tabs li a:hover {
		font-size: inherit;
		}

a:visited {
	color:inherit;
	}

/*  classes, for global use */

.card {
	border-top-right-radius: 2em;
	}

.letterLoose {
	letter-spacing: .02em;
	}
.letterTight {
	letter-spacing: -.02em;
	}

.nobreak {
 white-space: nowrap;
 }
 
.note {
	color: #5e4468 ;
	}

	 .note:before {
		content:"*";
		font-size: .7em;
		line-height: .5em;
		}

.note, .ingredients td:first-child.note {
		color: inherit;
		margin: 2em 0 0 0;
		text-indent: -.4em;
		padding-left: .4em;
		line-height: 1.15em;
		text-align: left;
		}

	.ingredients td:first-child.note {
		font-size: .9em;
		padding: 1em .5em 1em 2em;
				}

.roman {
	font-family: 'Alegreya', serif;
	font-style: normal;
	}

.smallCaps, .subhead {
  font-family: "Alegreya SC", serif;
	text-transform: lowercase;
	}

p.gameplan, .gameplan p.subhead  {
 margin: 1em 0 0 0;
 padding-top: 1em;
 border-top: 1px solid #EFEECC;
 }
 }
/* 	When using the small caps, the punctuation sometimes needs shrinking. */
	.smPunct {
		font-size: .75em;
		font-weight: 700;
		}

	#recipeIndex .subhead {
		margin: 0;
		}


.tab {
	display: inline-block;
	min-height: 1.25em;
	padding: .25em 1em .25em 1em;
	border-top-left-radius: .75em;
	border-top-right-radius: .75em;
	background-color: #b099b9;
	}


/* ====design blocks, initial */

.mast	{
	width: 100%;
	min-height: 14em;
	margin: 0 auto 1em auto;
	background-image: url(../images/PazomaticJar.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	}

	.mast .homeLink { /* The home-logo on the jump pages is a background image, so anchor cannot be attached to it. Making the anchor a block element gives it a hook. */
		display: block;
		width: 100%;
		height: 14em;
		position: absolute;
		top: 0;
		}

.recipe .mast	{
	width: 100%;
	min-height: 16.5em;
	margin: 0 auto 1em auto;
	background-image: url(../images/PazomaticJar.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: auto 13em;
	position: relative;
	}


/* The asides are hidden for mobile tall. */
aside {
	display: none;
	}

.whatsCooking {
	width: 100%;
	margin: 0 auto;
	}

.whatsCooking .card {
	padding: 1.5em 1em 0 0;
	background: -webkit-linear-gradient(#b099b9 0%, #d8d0df 10%);
	background: -moz-linear-gradient(#b099b9 0%, #d8d0df 10%);
	background: -ms-linear-gradient(#b099b9 0%, #d8d0df 10%);
	background: linear-gradient(#b099b9 0%, #d8d0df 10%);
	}

	#home .whatsCooking .card {
		padding: 1.5em 1em 10em 0;
		margin-bottom: -9em;
		}

.whatsCooking h2 {
	text-align: center;
	line-height: .6em;
	height: 1.1em;
	padding: .2em .6em 0 .5em;
	border-top-right-radius: .75em;
	margin-top: -.15em;
	background: -webkit-linear-gradient(#b099b9 0%, #d8d0df 100%);
	background: -moz-linear-gradient(#b099b9 0%, #d8d0df 100%);
	background: -ms-linear-gradient(#b099b9 0%, #d8d0df 100%);
	background: linear-gradient(#b099b9 0%, #d8d0df 100%);
}

.toc .card, .menu .card {
	background: -webkit-linear-gradient(#b099b9 0%, #d8d0df 10%);
	background: -moz-linear-gradient(#b099b9 0%, #d8d0df 10%);
	background: -ms-linear-gradient(#b099b9 0%, #d8d0df 10%);
	background: linear-gradient(#b099b9 0%, #d8d0df 10%);
	padding: 0 1em 0 0;
	background-size: contain;
	}

.toc h1 {
	padding: .05em 0 .2em .25em;
	}

.recipe-list .toc-list {
	position: relative;
	border-top: 1px solid #765483;
	border-left: 2px solid #765483;
	margin-bottom: 1em;
	background: -moz-linear-gradient(-45deg, rgba(239,238,204,0.25) 0%, rgba(239,238,204,0) 40%); /* FF3.6+ */
	background: -webkit-linear-gradient(-45deg, rgba(239,238,204,0.25) 0%,rgba(239,238,204,0) 40%); /* Chrome10+,Safari5.1+ */
	background: linear-gradient(135deg, rgba(239,238,204,0.25) 0%,rgba(239,238,204,0) 40%); /* W3C */
	}

	.half:last-child .toc-list:last-child {
		margin-bottom: 0;
		}

		.menu .toc-list {
			border: none;
		}

.toc-list ul {
	border-top: 1px solid #765483;
	padding: .5em 0 .75em 4.25em;
	}


	#recipeIndex .toc-list ul {
		padding-left: 2em;
		}

	#recipeIndex .toc-list ul.sublist {
		border-top: none;
		padding: 0;
		}
	#recipeIndex .toc-list ul.sublist li::before {
	    content: ": ";
		}
	#recipeIndex .toc-list ul.sublist li {
	    font-size: 1em;
		}


	.menu .toc-list ul {
		padding: 0;
		border: none;
		}

	.toc-list li {
		color: #765483; /* sageflower */
		margin-bottom: .4em;
		}

		.menu .toc-list li {
			line-height: 1.5em;
			}

		.toc-list li:last-child {
			margin-bottom: 0;
			}

		.toc-list li:after {
		    content: "";
		    display: block;
		    height: 2px;
		    width: 12%;
		    margin: .4em 0 0 0;
		    background: #EFEECC; /* ivory */
			}

		.toc-list li:last-child:after,
		.toc-list .sublist li:after {
		    content: none;
			}

		.toc-list ul.sublist li {
			font-size: .9 em;
			line-height: 1.1em;
			padding: 0;
			margin-bottom: .5px;
			margin-left: .4em;
			text-indent: -.4em;
			}

.recipe aside {
	display: block;
	}

	.recipe aside p {
		display: block;
		position: absolute;
		top: 0;
		font-size: .9em;
  font-family: "Sorts Mill Goudy", serif;
		font-style: italic;
		color: #8f885b;
		letter-spacing: .01em;
		}

/* On recipe pages, the h1 is repeated, as it appears at top of page for mobile and top of directions for desktop.
Positioning won't work because line count may vary. */

.ingredients h1 {
	color: #8f885b;
	text-shadow: none;
	}

.directions h1 {
	display: none;
	}

.directions ul {
	list-style-image: url(../images/diamond.png);
	margin: 0 0 .65em 0;
	}

	.directions li {
		margin: 0 0 0 1.25em;
		}


/* the "tabs" id's are locked into the jquery ui coding */

#tabs {
	margin-top: .75em;
	padding-bottom: .75em;
	}

/* the tabs themselves are li's, and have the "tab" class to have a shape similar to the card tabs. */

#tabs .tab {
	padding: .5em .75em .65em .75em;
	min-height:.75em;
	border-top-right-radius: .75em;
	border-top-left-radius: .75em;
	}

#tabs li {
  font-family: "Alegreya SC", serif;
	font-size: 1em;
	text-transform: lowercase;
	line-height: .5em;
	color: #F9FFEC;
	margin: 0;
	}

	#tabs li.first {
		background: -webkit-linear-gradient(#b2ac83 0%, #c6c19c 60%);
		background: -moz-linear-gradient(#b2ac83 0%, #c6c19c 60%);
		background: linear-gradient(#b2ac83 0%, #c6c19c 60%);
		}
		#tabs li.first a:hover {
			color: #8f885b;
			}

	#tabs li.last {
		background-color: #b2ac83;
		background: -webkit-linear-gradient(#8f885b 0%, #b2ac83 60%);
		background: -moz-linear-gradient(#8f885b 0%, #b2ac83 60%);
		background: linear-gradient(#8f885b 0%, #b2ac83 60%);
		}
		#tabs li.last a:hover {
			color: #EFEECC;
			}


#tabs-1 {
	padding: 0 0 4em 0;
	border-top-right-radius: 2em;
	margin-bottom: -3.5em;
	background: -webkit-linear-gradient(#c6c19c 0%, #d8d4b8 1.5em);
	background: -moz-linear-gradient(#c6c19c 0%, #d8d4b8 1.5em);
	background: linear-gradient(#c6c19c 0%, #d8d4b8 1.5em);
	}

#tabs-2 {
	padding: 0 0 4em 0;
	border-top-right-radius: 2em;
	margin-bottom: -3.5em;
	background: -webkit-linear-gradient(#b2ac83 0%, #c6c19c 1em);
	background: -moz-linear-gradient(#b2ac83 0%, #c6c19c 1em);
	background: linear-gradient(#b2ac83 0%, #c6c19c 1em);
	}

	#home .welcome #tabs-1  {
		padding: 1em 1em 4em 1em;
		background: -webkit-linear-gradient(#c6c19c 0%, #e3e0cb 1.5em);
		background: -moz-linear-gradient(#c6c19c 0%, #e3e0cb 1.5em);
		background: linear-gradient(#c6c19c 0%, #e3e0cb 1.5em);
		}

	#home .welcome #tabs-2 {
		padding: 1em 1em 4em 1em;
		background: -webkit-linear-gradient(#b2ac83 0%, #e3e0cb 1.5em);
		background: -moz-linear-gradient(#b2ac83 0%, #e3e0cb 1.5em);
		background: linear-gradient(#b2ac83 0%, #e3e0cb 1.5em);
		}

		#home #tabs-2 p {
		    color: #5c5a4e;
		    padding: .5em 0;
		    border-bottom: 2px solid #EFEECC; /* ivory */
			}

/* recipe ingredients table, including dashed lines separating  table cells */
.ingredients table {
	width: 100%;
	padding: 0 0 2em 0;
	margin-bottom: 1em;
	}
	.ingredients tr {
		border-bottom: dashed 1px  #b2ac83; /* wheat */
		}
	.ingredients tr:last-child, .ingredients tr.binder, .ingredients tr.pre-binder {
		border-bottom:	none;
		}
		.ingredients td {
			line-height: 1.15em;
			vertical-align: middle;
			padding: .3em;
			}
			.ingredients td:first-child {
				text-align: right;
				border-right: dashed 1px  #b2ac83; /* wheat */
				}
			.ingredients td:first-child.left {
				text-align: left;
				padding-left: 1em;
				}

/* 20150904: decided to try having two width options for ingredients table. */

			.ingredients td:first-child {
				width: 35%;
				}
			.ingredients td:last-child {
				width: 65%;
				padding-right: .8em;
				}

			.ingredients tbody.col-adjust td:first-child {
				width: 43%;
				}
			.ingredients tbody.col-adjust td:last-child {
				width: 57%;
				}

			 .ingredients td.sub, tr.binder td{
  font-family: "Sorts Mill Goudy", serif;
				font-style: italic;
				text-align: left;
				padding: 1em .25em 0 .5em;
				border-right: none;
				column-span: 2;
				}

				.ingredients td.divider {
				border-right: none;
				column-span: 2;
				height: .25em;
				padding: 0;
				}

			 .ingredients td.span {
				text-align: left;
				padding: 1em .25em 0 1.5em;
				border-right: none;
				column-span: 2;
				}

			 .ingredients tr.binder td {
				padding: 0 .25em;
				}

			.ingredients td p {/* for ingredient weight measurement*/
	  font-family: "Alegreya SC", serif;
				text-transform: lowercase;
				font-size: 1em;
				line-height: 1em;
				text-align: right;
				color: #3e3c32;
				margin: 0;
				padding: 0;
				}
/* Sometimes this panel isn't an ingredient table, perhaps a list of supplies. */
.text {
	width: 100%;
	padding: 1em;
	}
#tabs .supply-list li {
  font-family: "Alegreya", serif;
	font-size: 1em;
	text-transform: none;
	line-height: 1.2em em;
	color: #F9FFEC;
	margin: 0;
	}


/* for mobile, the h4 in the tab of the directions card says "directions,"
for desktop it will be a link to the applicable toc page, so two h4's are provided */

.link {
	display: none;
	}

.recipe .card {
	padding: 1em;
	background: -webkit-linear-gradient(#b099b9 0%, #d8d0df 2.5em);
	background: linear-gradient(#b099b9 0%, #d8d0df 2.5em);
	background: linear-gradient(#b099b9 0%, #d8d0df 2.5em);
	}


.menu .card, .ancillary .toc .card {
	padding: 2em 1em 1em 1em;
	}


.about {
	padding: 0 .75em 1em .875em;
	}

	.about h2 {
		font-size: 2em;
		}

	.about p {
		font-size: 1.2em;
		margin-top: .5em;
		}

.ancillary .toc h5 {
  font-family: "Gilda Display", serif;
	font-size: 1.75em;
	font-weight: normal;
	color: #F9FFEC; /* cream */
	text-align: left;
	display: inline-flex;
	margin: 1em .25em .5em -1em;
	padding: .25em .5em .25em 1em;
	text-transform: lowercase;
	border-top: 1px solid #765483; /* sageflower */
 	border-bottom: 1px solid #765483; /* sageflower */
	background: -webkit-linear-gradient(#765483 0%, #543360 100%);
	background: -moz-linear-gradient(#765483 0%, #543360 100%);
	background: linear-gradient(#765483 0%, #543360 100%);
	}

.about .recipes p {
  font-family: "Gilda Display", serif;
	font-size:1.25em;
	font-weight: normal;
	color: #47344e; /* eggplant */
	margin: 0 0 1em 0;
	text-align: left;
	}

.about .recipes p:first-child {
	text-indent: -1em;
	}

/* ====This ends the initial css, none of the subsequent css will apply to mobile-tall. */



/* !==========================================================
	======This begins the mobile-wide media query
	============================================= */
@media only screen and (min-width: 480px) {


h1 {
	font-size: 4em;
	}

	h1.long {
		font-size: 3em;
		}

.recipe .ingredients h1 {
	font-size: 3em;
	}

.recipe .ingredients h1.long {
	font-size: 2.25em;
	}

/* ==== design blocks, mobile-wide*/

.wrapper {
	margin: 1.5em auto 0 auto; /* when footer is added back in, margin-bottom changes to zero. */
	border-bottom: 1px solid #765483;
	}

#home .mast {
	/* the mast background image will be folded into the aside. */
	display: none;
	}

.menu .welcome {
	display: none;
	}

.recipe .mast {
	/* the mast background image will be folded into the aside. */
	background-image: none;
	position: absolute;
	}

	.mast .homeLink {
		height: 14em;
		width: 100%;
		}
		.recipe .mast .homeLink {
			margin-top: 3em;
			}


aside.welcome, .ingredients {
	/* The aside on home page was hidden in phone-V so first display is turned on, then styling appears for the first time. */
	display:block;
	float: left;
	margin: 0;
	width: 15em;
	background-image: url(../images/PazomaticJar.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-color: #EFEECC; /* ivory. This is necessary so that whatsCooking will float next to it.*/
	background-size: 224px 177px;
	}

	.welcome header {
		margin-top: 12em;
		}

	.welcome header.tab {
		background-color: #c6c19c;
		}

		.welcome p.signature {
  font-family: "Alegreya SC", serif;
			text-transform: lowercase;
			font-style: normal;
			}

.whatsCooking, directions {
	margin-top: 1.5em;
	}

	.whatsCooking h2{
		padding: .4em 0 .1em .7em;
		}

.ingredients {
	margin-top: 3em;
	width: 15em;
	float: left;
	padding-top: 12em;
	}

	.ingredients #tabs-1, .ingredients #tabs-2 {
		margin-top: 0;
		padding: .25em 0 40em 0;
		margin-bottom: -40em;
		}

.directions {
	margin-top: 3.5em;
	}

	.directions .card, .whatscooking .card {
		padding: 1em 1em 41em 16em;
		margin-bottom: -40em;
		}

} /* =====this ends the mobile wide query */




/* !==========================================================
	======This begins the iPad tall media query
	============================================= */
@media only screen and (min-width: 688px) {


/* ====full-page parameters, ipad-tall */

.wrapper {
	width: 43em; /*  43*16px=688px */
	height: auto;
	border-bottom: 1px solid #765483;
	}

#home .wrapper {
	height: 61em; /* 1024 pixels less footer and bottom margin */
	}


/* !=====typography, ipad-tall */

.toc h1 {
	margin: -.05em 0 0 0;
	padding: 0 0 .5em 0;
	line-height: .9em;
	}

h2 {
	font-size: 3.25em;
	}

	/* This preps the home page h2 for being inline with checker-style h6's */
	.whatsCooking h2 {
		text-align: left;
		display: inline-block;
		line-height: 1em;
		padding: 0;
		border-radius: 0;
		margin: 0 .25em 0 0;
		background: none;
		}

h4 {
	font-size: 1.25em;
	}

	/* The home page sub-categories are appearing for the first time. */
	.whatsCooking h6 {
		display: inline-block;
		}

/* ===design blocks, ipad-tall*/
.tab {
	border-top-left-radius: 1em;
	border-top-right-radius: 1em;
	}


.mast, #home .mast, .recipe .mast	{
	display: block;
	position: static;
	width: 100%;
	margin: 0 auto;
	background-image: url(../images/PazPantryMasthead.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 43em auto;
	} /* First, mast is set to display: block since .mast was turned off for the home page for mobile wide.
		Then, the spoon is used for mast, as there is now enough room.*/

.recipeList .mast, .menu .mast {
	margin-bottom: -2em;
	}

.recipe .mast	{
	display: block;
	position: static;
	width: 100%;
	margin: 2em auto -2em 0;
	background-image: url(../images/PazPantryMasthead.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 43em auto;
	}

.mast .homeLink {
	width: 43em;
	height: 9em;
	}

#home aside.welcome {
	float: none;
	position: absolute;
	bottom: 0;
	width: 43em;
	margin: 0;
	background-image: none;
	background: none;
	z-index: 10;
	} /* This puts the welcome across the bottom of the ipad-V home page */

	.welcome header {
		margin-top: 2em; /* This deletes the space for the jar image */
		}

	#home .welcome #tabs-1, #home .welcome #tabs-2  {
		height: 8em;
		}

		#home .welcome  #tabs-1 p:first-child {
			display: block;
			width: 32em;
			margin-right: 1em;
			float: left;
			} /* This floats the main paragraph on iPad tall, so sig is pushed to right. */

		.welcome article img {
			margin: -.75em 0 -1.25em 0;
			}

		#home .welcome  #tabs-2 p {
			display: inline-block;
			padding: 0 1em;
			float: left;
			border-bottom: none;
			border-right: 1px solid white;
			}

			#home .welcome  #tabs-2 p:first-child {
				padding-left: 0;
				}

.menu aside.welcome {
	display:block ;
	background-image: none;
	}

	.menu .welcome h1 {
		display: none;
		}

	.menu .welcome article {
		border-bottom: 1px solid #8f885b;
		background: -webkit-linear-gradient(#c6c19c 0%, #d8d4b8  50%);
		background: -moz-linear-gradient(#c6c19c 0%, #d8d4b8  50%);
		background: linear-gradient(#c6c19c 0%, #d8d4b8  50%);
		display: table-cell;
		display: block;
		padding: .625em 1.25em 40em .75em;
		margin-bottom: -40em; /* bottom padding and margin are for faux columns, making welcome and whatsCooking backgrounds meet at the bottom. */
		box-shadow: none;
		z-index: 30;
		}

.whatsCooking {
	position: relative;
	float: none;
	margin-top: -1.5em;
	width: 43em; /* On home page, this snugs the main up to the spoon and makes it a fixed width. */
	}
	.whatsCooking .card {
		padding: 1em;
		height: 43em;
		width: 43em;
		display: table;
		}
		#home .whatsCooking .card {
			padding-left: 1em;
			}
.menu-list {
	width: 28em;
	float: right;
	}

.toc .card {
	padding: 1em 0;
	display: table;
	}
	.toc div.half  {
		width: 21.5em;
		float: left;
		padding: 0 1em;
		min-height: 41em;
		}/* this div creates columns within card, for toc list  */
		.toc-list {
			border-left: none;
			margin-top: .5em;
			}
			.toc-list ul {
		    display: inline-block;
		    90%
				}

.ingredients {
	background-image: none;
	background: none;
	padding-top: 0;
	margin-top: -1em;
	}

.directions {
	margin: -2.5em 0 0 0;
	padding: 0 0 1em 0;
	width: 28em;
	float: left;
	}
	.directions .card {
		width: 28em;
		}

	.directions .card, .menu .card {
		padding: 1em 1em 41em 1em;
		margin: 0 0 -40em 0;
		}


/* The recipe title moves into the recipe card */
.ingredients h1 {
	display: none;
	}
.directions h1 {
	display: block;
	color: #F9FFEC; /* cream */
	text-shadow: -3px 3px 3px #765483; /* sageflower */
	}


/* directions h4 becomes a link; which it wasn't in mobile. */
.link {
	display: inline;
	}
.mobile {
	display: none;
	}

.ancillary .toc h1 {
	margin-left: .125em;
	}

}	/* =====This ends the ipad-tall media query. */



/* !==========================================================
	======This begins the desktop media query
	============================================= */
@media only screen and (min-width: 992px) {




/* ====full-page parameters, desktop */

body {
	background-color: #F9FFEC; /* cream */
	}

.wrapper {
	width: 60em; /*  60*16px=960px */
	}


/* !=====typography, desktop */
h1 {
	font-size: 5.5em;
	}
	h1.medium {
		font-size: 4.5em;
		}

	h1.long {
		font-size: 4em;
		}

h2 {
	font-size:4em; /* 4x16=48px */
	line-height: 1em;
	text-align: left;
	margin: 0;
	}

h4 {
	font-size: 1.5em;
	}

.whatsCooking h6, .toc h6 {
	font-size: 1.5em; /* 24px */
	font-weight: normal;
	text-align: center;
	margin: -1px -2px 0px -2px;
	vertical-align: bottom;
	border-top: 1px solid #765483; /* sageflower */
	border-bottom: 1px solid #765483; /* sageflower */
	height: 3em;
	-moz-transform: none;
	-webkit-transform: none;
	transform: none;
	}

p, li, td {
	font-size: 1.125em;
	}

/*====design blocks, desktop*/

#home .wrapper {
	height: auto;
	border-bottom: none;
	}

#home .mast, .mast	{
	background-image: url(../images/PazPantryMasthead.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 60em auto;
	width: 100%;
	height: 16.5em;
	margin: 0 auto;
	}

	.mast .homeLink {
		width: 60em;
		height: 15em;
		position: static;
		}

.menu .mast {
	margin-bottom: -.5em;
	}

aside.welcome {
	background: none;
	}

.menu .welcome article {
	width: auto;
}

.recipe .mast {
	background-image: url(../images/PazPantryMast-recipe.png);
	height: 14.5em;
	background-size: 60em auto;
	width: 100%;
	}

	.recipe .mast .homeLink {
		width: 43em;
		height: 10em;
		position: absolute;
		}




/* This positions the welcome at the left of the homepage,
after being at bottom of page for ipad tall. */

#home aside.welcome {
	position: static;
	width: 15em;
	margin-top: 2em;
	float: left;
	margin: 0;
	z-index: 10;
	}

	.welcome header {
		box-shadow: none;
		z-index: 10;
		}


	#home .welcome #tabs-1, #home .welcome #tabs-2  {
		height: auto;
		}

		#home .welcome  #tabs-1 p:first-child {
			width: auto;
			float: none;
			}

		#home .welcome  #tabs-2 p {
			display: block;
			padding: .5em 0;
			margin: 0;
			float: none;
			border-right: none;
			border-bottom: 1px solid #F9FFEC;
			}



	.welcome article, .menu .welcome article {
		display: block;
		padding: .625em 0 40em 0;
		margin-bottom: -40em; /* bottom padding and margin are for faux columns, making welcome and whatsCooking backgrounds meet at the bottom. */
		box-shadow: none;
		z-index: 30;
		}

		.menu .welcome article {
			padding: .625em 1em 40em 1em;
			}

		#home .welcome article {
			padding-bottom: .75em;
			margin-bottom: 0;
			}

			#home #tabs-2 {
				min-height: 30em;
				}

		.welcome article p {
			font-size: 1.125em;
			line-height: 1.3em;
			margin: 0 0 .65em 0;
			width: auto;
			}

.whatsCooking, .menu-list {
	position: static;
	float: right;
	width: 45em;
	margin: 0;
	}

	.whatsCooking .card {
		height: auto;
		width: 45em;
		margin-bottom: 0;
		border-bottom: none;
		}
		#home .whatsCooking .card {
			border-bottom: 1px solid #765483; /* sageflower */
		}

	.whatsCooking h2 {
		font-size: 4em;
		}

.toc {
	margin-top: 2em;
	}

.toc .card {
	width: 60em;
	}
	.toc div.half  {
		width: 28em;
		float: left;
		padding: 0 1em;
		}
		.toc-list {
			position: relative;
			background: none;
			border: none;
			margin-top: 1.5em;
			}
		.toc h6 {
			position: absolute;
			right: 12.25em;
			margin: 0;
			}

			#recipeIndex .toc h6 {
			left: 0;
			margin: 0;
			}


			/* classes to make the one- and two-line h6's the same height block */
			.single {
				padding-top: .5em;
				line-height: 2em;
				}
			.double {
				padding-top: .45em;
				line-height: 1em;
				}

		.toc-list ul, recipe-list ul {
			padding: 0 0 0 7.5em;
/* 			width: 20em; */
			border: none;
			}
			.whatsCooking .toc-list ul {
				padding: .5em 0 0 5em;
				width:auto;
				}
			#recipeIndex .toc-list ul {
				padding: 0 0 0 1.5em;
				margin-bottom: 1em;
				width: 27em;
				}

				#recipeIndex .toc-list .sublist {
					width: 23em;
					margin-bottom: 0;
					}

			.toc .toc-list li {
				padding-left: 1em;
				}
			.toc .toc-list li:first-child {
				border-top: 1px solid #765483;
				padding-top: .5em;
				}

				#recipeIndex .toc-list .sublist li:first-child {
					padding-top: 0;
					border-top: none;
					}

/* The aside is a spot for short comments on the recipe, on desktop only. */
.recipe aside {
	display: block;
	position: relative;
	margin-top: 0;
	margin-left: 46.5em;
	width: 13em;
	height: 13em;
	padding: 0;
	}

	.recipe aside p {
		display: table-cell;
		font-size: 1em;
		line-height: 1.4em;
		position: absolute;
		padding: .75em;
		top: auto;
		bottom: 0;
		vertical-align: bottom;
		}

#tabs {
	margin-top: -.75em;
	}

.directions {
	position: relative;
	width: 45em;
	margin-top: 0;
	}

	.directions .tab {
		float: right;
		width: 13.5em;
		height: 1.75em;
		position: absolute;
		right: 0;
		}

		/*
		Because the recipe card tab aligns with the aside background,
		it is the only tab with a fixed width. First, centering the h4 takes some jiggering. Then, since it's now an inline-block item,
		the rule below gets too wide so gets turned off, and replaced with a border on the <a>
		*/
		.directions .tab h4.link {
			display: inline-block;
			width: 7.75em;
			text-align: center;
			border-bottom: none;
			position: relative;
			}

		.directions .tab h4.link a {
			border-bottom: 1px solid #d8d0df;
			}


	.directions .card {
		clear: right;
		float: left;
		border-top-right-radius: 0;
		border-top-left-radius: 2em;
		width: 45em;
		margin-top: 1.75em;
		padding-left: 1.5em;
		}

} /* =====this ends the desktop media query */