/* default CSS */
:root {
	/* GLOBAL SETTINGS */
	--general-padding: 0px; /* set in body */
	--general-margin: 0px; /* set in body */
	--button-background: #D6DBDF; /* grey */
	--button-background-hover: #F8F9F9; /*light grey */
	--color-light-grey: #F8F9F9;
	--general-flex-direction: row;
	--market-flex-direction: column;
	/* HEADER */
	--header-background-color: white;
	--header-color: black;
	--header-display: block; /* check */
	--header-justify-content: center;
	--header-background-image: url("images/itrheader.webp");
	--header-top: 0; /* sticky */
	--header-height: 125px;
	--footer-height: 90px;
	--header-position: fixed;

	--headertitle-font: 'Charm', cursive;
	--headertitle-font-size: 48px;
	--headertitle-font-weight: bold;
	--headertitle-padding: 0px 20px 0px 10px;
	--headertitle-color: white;

	--headerslogan-font: 'Charm', cursive;
	--headerslogan-font-size: 24px;
	--headerslogan-font-weight: normal;
	--headerslogan-padding: 0px 0px 10px 10px;
	--headerslogan-color: white;

	--headersearch-div-padding: 10px 10px 0px 0px;
	--headersearch-div-align-self: flex-start; /* vertical align search box */
	--headersearch-div-justify-content: right;
	--headersearch-div-color: white;
	--headersearch-div-display: flex;
	--headersearch-div-width: auto;
	
	/* Header Promotion 
	--headerpromotion-font-size: 18px;
	--headerpromotion-font-weight: bold;
	--headerpromotion-padding: 0px 0px 10px 10px;
	--headerpromotion-color: black;
	
	--headerpromotion-div-justify-content: middle;
	--headerpromotion-div-align-self: right;
	--headerpromotion-div-padding: 10px 10px 10px 10px;	
	--headerpromotion-div-width: auto;
	--headerpromotion-div-color: black;
	--headerpromotion-div-background-color: white; */
	
	--headerrow-display: flex;
	--headerrow-flex-flow: row nowrap;
	--headerrow-justify-content: flex-start; /* horizontal alignment */
	--headerrow-align-items: flex-end; /* vertical alignment */
	/* MENU */

	--menuglobal-color: black;
	--menuglobal-hover-color: #006400; /* darkgreen */
	--menuglobal-hover-opacity: 1;
	--menuglobal-hover-font-weight: bold;
	--menuglobal-margin: 0px 0px 0px 10px;
	--menuglobal-padding: 5px 5px 5px 5px;
	--menuglobal-border-radius: 5px;
	--menuglobal-background-color: white;
	--menuglobal-hover-background-color: white;
	--menuglobal-border: 1px solid;
	--menuglobal-border-color: #808080; /* grey*/

	--menu-font-size: normal;
	--menuglobal-font-weight: normal;
	--menu-font: 'Cagliostro', sans-serif;
	--menu-ul-display: flex;
	--menu-li-display: block;
	--menu-li-item-width: clear;
	--menu-li-a-opacity: 0.8;
	--menu-li-hover-dropdown-display: block;
	--menu-li-hover-dropdown-margin-left: -20px;
	--menu-li-a-hover-font-weight: bold;
	--menu-li-a-hover-border: 1px solid;
	--menu-li-a-hover-color: black;
	--menu-li-a-hover-background-color: white;
	--menu-li-a-width: auto;
	--menu-li-a-display: block;
	--submenu-ul-position: absolute;
	--submenu-ul-width: 300px; /* verified MIGHT GO */
	--submenu-ul-display: none;
	--submenu-li-a-opacity: 1;
	/* BODY */
	--body-background-color: white;
	--body-fontsize: large;
	--body-padding: 0px;
	--body-margin: 0px;
	--body-overflow: hidden;
	/* ARTICLE */
	--article-margin: 0px 10px 0px 10px;
	--article-height: 75vh;
	/* GALLERY */
	--gallery-img-width: 25vw;
	--gallery-img-height: 25vw;
	--product-font-size: clear;
	/* CART */
	--cart-display: table;
	--cart-display-direction: clear;
	--cart-row-display: table-row;
	--cart-col-display: table-cell;
	--cart-headerrow-display: table-row;
	--cart-margin: 5px 10px 5px 10px;
	--cart-padding: 5px 20px 5px 20px;
	/* FOOTER */
	--footer-bottom: 0; /* sticky */
	--footer-position: fixed;
	--footer-hover-color: blue;
	--footer-foreground-color-hover: #e0f030;
	--footer-background-color: #32373c;
	--footer-color: white;
	--footer-display: flex;
	--footer-flex-direction: row;
	--footer-justify-content: space-evenly;
	--footer-align-items: center;
	--footer-column-text-align: left;
	/* PRODUCT */
	--product-img-width: 50vw;
	--productcol-width: 50vw;
	/* EPUB */
	--pub-content-width: 300px;
	--pub-toc-width: auto;
	--pub-div-mobile-display: inherit;
	--pub-button-prev: '< Previous';
	--pub-button-next: 'Next >';
	--pub-button-toc: 'Table of Contents';
	--pub-button-story: 'Stories';
	--pub-button-recipe: 'Recipes';
	/* CHECKOUT */
	--checkout-input-text-width: 50vw;
}
@media screen and (max-width: 600px) {
	:root {
		--general-flex-direction: column;
		--market-flex-direction: row;
		/* HEADER */				
		--header-top: auto; /* not sticky */
			
		--headerrow-flex-flow: column wrap;
		--headerrow-justify-content: center;	/* horizontal alignment */
		--headerrow-align-items: center;				/* vertical alignment */			
		--headersearch-div-justify-content: center;
		--headersearch-div-display: block;
		--headersearch-div-width: 100%;
		--headertitle-font-size: 32px;
		--headertitle-padding: 5px 5px 5px 5px;
		--headerslogan-font-size: 16px;
		--headerslogan-padding: 0px 5px 5px 5px;
		--header-position: relative;
		--header-height: auto;
		
		/* MENU */
		--menu-ul-flex-direction: column;						
		
		--submenu-ul-position: relative;	
		--submenu-ul-display: block;			
		
		--menu-li-hover-dropdown-width: 100%; 				
		--menu-li-a-width: 100%; 								
		
		--menu-li-a-opacity: 1;		
		/* CHECKOUT */
		--checkout-input-text-width: 100%;		
	
		/* CART */
		--cart-display: block;
		--cart-display-direction: column;
		--cart-row-display: block;
		--cart-col-display: block;	
		--cart-headerrow-display: none;
		--cart-margin: 2px;
		--cart-padding: 2px;
		
		/* GALLERY */
		--gallery-img-width: 100%;
		--gallery-img-height: auto;
		--product-font-size: 24px;
	
		/* PRODUCT */
		--product-img-width: 100%;
		
		--productcol-width: 100%;		
		/* FOOTER */
		--footer-bottom: auto; /* not sticky */
		--footer-position: relative;
		--footer-display: block;		
		--footer-flex-direction: column;				
		--footer-justify-content: center;		
		--footer-height: auto;
		--footer-column-text-align: center;
		
		/* article */
		--article-height:100%;	
		
		/* SIDEBAR */
		--sidebar-content-width: 100%;		
		
		--body-overflow: visible;
		
		/* PUB */
		--pub-div-mobile-display: none;
		--pub-button-prev: '<';
		--pub-button-next: '>';
		--pub-button-toc: 'TOC';
		--pub-button-story:'Stories';
		--pub-button-recipe:'Recipes';		
	}
}
/* locations */
.locationrow {
  display: flex;
	width: 100%;
	flex-direction:var(--general-flex-direction);
}
.locationcol {
	/* flex: 25%; */
	padding: 5px;	
}
/* LINKS */
a {
	text-decoration: none;
}
a.hover {
	cursor: pointer;
}
/* BUTTONS */
.buttonsmall {
	line-height: 1.25;
	vertical-align: middle;
	background-color:var(--button-background);		
}
.buttonsmall:hover {
	background-color:var(--button-background-hover);
	cursor: pointer;
}
.buttonlarge {
	font-size: large;
	font-weight: bold;	
	border-radius: 10px;
	line-height: 1.5;
	vertical-align: middle;
	background-color:var(--button-background);	
}
.buttonlarge:hover {
	background-color:var(--button-background-hover);
	cursor: pointer;	
}
.buttonimage {
	font-size: large;
	font-weight: bold;	
	border-radius: 10px;
	line-height: 1.5;
	vertical-align: middle;
	background-color:var(--button-background);
}
.buttonimage:hover {
	background-color:var(--button-background-hover);
	cursor: pointer;
}
/* HEADER */
header {	
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 0px; 
	padding-right: 10px;
	margin: 0px;	
	width: 100%;	
	display: var(--header-display);
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: var(--header-justify-content);
	background-image: var(--header-background-image); 
	background-color: var(--header-background-color);
	z-index: 999; 
	top: var(--header-top);
	position: var(--header-position);
	top: var(--header-top);
	height: var(--header-height);
}
/* HEADER */
.headerrow {
	display: var(--headerrow-display);
	flex-flow: var(--headerrow-flex-flow); 
	flex-grow: 1; /* fills remaining width */	
	justify-content: var(--headerrow-justify-content); /* horizontal align */
	align-items: var(--headerrow-align-items); /* vertical align */	
}
.header-title-a,
.header-title-a:hover,
.header-title-a:visited,
.header-title-a:active
{
	text-decoration: none;
	color:  var(--headertitle-color);
}
.headertitle {
	flex-shrink: 0;
	font-family: var(--headertitle-font);
	font-size: var(--headertitle-font-size);
	font-weight: var(--headertitle-font-weight);
	padding: var(--headertitle-padding);
	color:  var(--headertitle-color);
}
.headerslogan {	
	flex-shrink: 0;
	font-family: var(--headerslogan-font);
	font-size: var(--headerslogan-font-size);
	font-weight: var(--headerslogan-font-weight);
	padding: var(--headerslogan-padding);
	color:  var(--headerslogan-color);

}
/*
.headerpromotion-div {
	display: flex;
	flex-shrink: 0;
	justify-content: var(--headerpromotion-div-justify-content); 
	flex-grow: 0; // fills remaining width 
	align-self: var(--headerpromotion-div-align-self); 
	padding: var(--headerpromotion-div-padding);
	width: var(--headerpromotion-div-width);
	color: var(--headerpromotion-div-color);
	background-color: var(--headerpromotion-div-background-color);
	opacity: 0.5;
}
.headerpromotion {
	flex-shrink: 0;
	font-size: var(--headerpromotion-font-size);
	font-weight: var(--headerpromotion-font-weight);
	padding: var(--headerpromotion-padding);
	color: var(--headerpromotion-color);
} */

.headersearch-div{
	display: flex;
	flex-shrink: 0;
	justify-content: var(--headersearch-div-justify-content);	
	flex-grow: 1; 							/* fills remaining width */
	align-self: var(--headersearch-div-align-self);
	padding: var(--headersearch-div-padding);
	width: var(--headersearch-div-width);
	color:  var(--headersearch-div-color);
}
.search {
	display: flex;
	margin: 0px 5px 0px 5px;
	vertical-align: middle;
	align-items: center;
}

/* MENU */
.menu {
	font-family: var(--menu-font);				
	font-size: var(--menu-font-size);  		
	font-weight: var(--menuglobal-font-weight); 	
	align-items: var(--menu-align-items);
}
.menu-ul {
	display: var(--menu-ul-display); /* verified	*/
	flex-direction: var(--menu-ul-flex-direction); /* verified	*/
	margin: var(--menuglobal-margin); 					/* verified	*/
	padding: var(--menuglobal-padding); 				/* verified	*/
}

.menu-li { 
	display: var(--menu-li-display); 			
}
.menu-li-a {
	display: var(--menu-li-a-display); 
	text-decoration:none;
	color: var(--menuglobal-color);
	margin: var(--menuglobal-margin); 
	padding: var(--menuglobal-padding); 	
	width: var(--menu-li-a-width);
	white-space: nowrap;
	opacity: var(--menu-li-a-opacity); 										
	font-weight: var(--menuglobal-font-weight);						
	border: var(--menuglobal-border); 											
	color: var(--menuglobal-color); 												
	background-color: var(--menuglobal-background-color);	
	border-radius: var(--menuglobal-border-radius);	
	
}
.menu-li-a:visited, .menu-li-a:active {	
	opacity: var(--menu-li-a-opacity); 										
	font-weight: var(--menuglobal-font-weight);						
	border: var(--menuglobal-border); 											
	color: var(--menuglobal-color); 												
	background-color: var(--menuglobal-background-color);	
}
.menu-li-a:hover {	
	opacity: var(--menuglobal-hover-opacity); 										
	font-weight: var(--menuglobal-hover-font-weight);						
	border: var(--menuglobal-border); 										
	color: var(--menuglobal-hover-color); 												
	background-color: var(--menuglobal-hover-background-color);

}
.menu-li:hover ul { /* this does the dropdown */
	display: var(--menu-li-hover-dropdown-display);						
	margin-left: var(--menu-li-hover-dropdown-margin-left); 	
}
.submenu-ul { 
	display: var(--submenu-ul-display); 
	position: var(--submenu-ul-position); 
	list-style: none;				
	width: var(--submenu-ul-width); 
}
.submenu-li {
	clear: both;
	border-top:none;
	color: var(--menuglobal-color);	
	width: var(--submenu-li-width);	
	border-radius: var(--menuglobal-border-radius);
}
.submenu-li:first-child {
	 clear: both;
}
.submenu-li-a {	
	display: var(--menu-li-a-display); 
	text-decoration:none;
	color: var(--menuglobal-color);
	margin: var(--menuglobal-margin); 
	padding: var(--menuglobal-padding); 	
	width: var(--menu-li-item-width); 
	white-space: nowrap;
	opacity: var(--submenu-li-a-opacity); 								
	font-weight: var(--menuglobal-font-weight);						
	border: var(--menuglobal-border); 										
	color: var(--menuglobal-color); 											
	background-color: var(--menuglobal-background-color);	
	border-radius: var(--menuglobal-border-radius);				
}
.submenu-li-a:visited, .submenu-li-a:active {	
	opacity: var(--submenu-li-a-opacity); 										
	font-weight: var(--menuglobal-font-weight);						
	border: var(--menuglobal-border); 											
	color: var(--menuglobal-color); 												
	background-color: var(--menuglobal-background-color);	
}
.submenu-li-a:hover {	
	opacity: var(--menuglobal-hover-opacity); 										
	font-weight: var(--menuglobal-hover-font-weight);						
	border: var(--menuglobal-border); 										
	color: var(--menuglobal-hover-color); 												
	background-color: var(--menuglobal-hover-background-color);	
}
/* CONTENT */
body {
	margin: var(--body-margin);
	padding: var(--body-padding);
	padding-top:var(--header-height);
	padding-bottom:var(--footer-height);
	
	font-size: var(--body-font-size);	
	background-color: var(--body-background-color);			
	overflow: var(--body-overflow);
	
}
article {
	margin: var(--article-margin);	
	margin-bottom: 100px; /* needed to deal with footer */
	overflow-y: scroll;
	height: var(--article-height);	
	margin-bottom: 100px; /* needed to deal with footer */		
}

/* if it starts with content- that means it is just general page layouts */
.content-title {
	
}
.content-2-column-equal {
	display: flex;
	flex-direction:var(--general-flex-direction);
	justify-content: space-evenly;
}
.material-icons {
	vertical-align: middle;
}
/* ADMIN */
.admin-div {
  display: flex;
	width: 100%;
	height: 75vw;
	overflow: scroll;
}
/* PRODUCT GALLERY */
.galleryrow {
  display: flex;
	width: 100%;
	flex-direction:var(--general-flex-direction);
}
.gallerycol {
/*  display: flex; */
	width: 100%;
/*	flex-direction:var(--market-flex-direction); */
} 
.galleryitem {
	/* flex: 25%; */
	padding: 5px;	
} 
.gallery-img {
	width: var(--gallery-img-width);25vw;
	height: var(--gallery-img-height);25vw;
	object-fit: cover;
	overflow: hidden;
	
}
.gallery-title {
	text-align: center;
	font-size: 1.25vw;
	margin-top: 0;
}
/* PRODUCT GALLERY */

.productlist-row {
	display: flex;
	flex-direction: var(--general-flex-direction);
	width:100%;

}
.productlist-row-title {	
	font-size: 2em;
	font-weight: bold;
	flex-wrap: nowrap;
	width:100%;	
}
.productlist-row-button {
	justify-content: flex-end;
	width:100%;
	text-align: right;
	margin-top: auto;
	margin-bottom: auto;
}
.product-a {
	font-size: var(--product-font-size);
}
/* PRODUCT  */
.productrow {
  display: flex;
	flex-direction: var(--general-flex-direction);
}
.productcol {
	padding: 5px;
	width: var(--productcol-width);
}
.product-img {
	width: var(--product-img-width);
	object-fit: cover;
}
.product-code, .product-quantity, .product-size, .product-purchase, .product-details, .product-description, .product-title, .product-price {
	text-align: center;
	font-size: large;
	font-weight: normal;
}
.product-purchase:hover {
	cursor: pointer;
}
.product-title {
	font-size: 2em;
	font-weight: bold;
}

/* CART */
.cart {
	display: var(--cart-display);
	flex-direction: var(--cart-display-direction);
}
.cart-row, .cart-line {
	display: var(--cart-row-display);
	flex-direction: var(--cart-display-direction);
}
.cart-line {
	background-color: #D3D3D3;
}
.cart-even {
	background-color: white;
}
.cart-odd {
	background-color: #F0F8FF;
}
.cart-left, .cart-center, .cart-right {
	display: var(--cart-col-display);
	margin: var(--cart-margin);
	padding: var(--cart-padding);
}
.cart-left {
	text-align: left;
}
.cart-center {
	text-align: center;
}
.cart-right {
	text-align: right;
}
.cart-headerrow {
	display: var(--cart-headerrow-display); 
}
/* LINKS */
.facebook-a, .email-a {

}
/* CHECKOUT */
.checkout-label {
}
.checkout-input-text {
	width: var(--checkout-input-text-width);
}
/* FOOTER */
footer {
	clear: both;
	/* display: var(--footer-display); */
	display: flex; 
	width: 100%;
	/* position: absolute; */
	bottom: var(--footer-bottom);
	left: 0;  
	color: var(--footer-color);
	background-color: var(--footer-background-color);
	flex-direction: var(--footer-flex-direction);			
	flex-wrap: nowrap;
	align-items: var(--footer-align-items);
	justify-content:var(--footer-justify-content);
	z-index: 10;
	margin-top: 0px;	
	margin-bottom: 0px;
	flex-shrink: 0;
	position: var(--footer-position);
	bottom: var(--footer-bottom);
	height: var(--footer-height);
}

.footer-a {
	text-decoration: none;
	color: var(--footer-color);
}
.footer-a:hover {
	color: var(--footer-hover-color);
}
.footer-a:visited, .footer-a:active {	
	color: var(--footer-color); 												
}

.footer-column {
	vertical-align: top;
	text-align: var(--footer-column-text-align);
}
.footer-ssl-img {
	font-family: arial; 
	color: #212121; 
	text-decoration: none;
	width:80px;
	border: none;
}
/* PRODUCT BLOCK GALLERY */
.product-image-block {
	display: flex;
	width: 100%;
	flex-direction: column;
}
.product-current-text {
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: xx-large;
	font-weight: bold;
	color: white;
}
.product-current-img {
	position: relative;	
	display: flex;
	width: 100%;
	object-fit: cover;
	overflow: hidden;
}
.product-current {
	position: relative;	
	display: flex;
	width: 100%;
	
}
.product-thumb-row {
	display: flex;
	width: 100%;
	flex-direction: row;
}
.product-thumb-col {
	display: flex;
	width: 100%;
	flex-direction: column;
	
}
.product-thumb-img {
	display: flex;
	width: 100px;
	height: 100px;
	object-fit: cover;
	overflow: hidden;		
}
/* SHOP */
.shop-block {
	position: relative;
}
.shop-img {
	width:100%;
	height: auto;
	filter: brightness(65%);
	object-fit: cover;
	overflow: hidden;	
}

.shop-form-block {
	color: white;
  text-shadow: 1px 1px 1px black;
  position: absolute;
  top: 50%;
  left:  50%;
  -webkit-transform: translate(-50%, -50%); /* iOS */
  transform: translate(-50%, -50%);
	text-align: center;
}
.shop-title {
	font-size: x-large;
	font-weight: bold;
}
.shop-text {
	font-size: large;
	font-weight: normal;	
}
/* EBOOK */
.pub-div {
	display: flex;
	flex-direction:var(--general-flex-direction);	
	width:100%;
	font-family: 'Times New Roman', serif;
	
}
.pub-navigation {
	display: flex;
	flex-direction: row; 
	justify-content: space-between;
	width: 100%;
	padding: 2px 20px 2px 20px;
	background-color: var(--color-light-grey);
	font-family: 'Roboto', sans-serif;
	font-size: medium;
}

.pub-div-content { /* the add section */
	width: var(--pub-content-width);
	display: var(--pub-div-mobile-display);
}
.pub-div-toc { /* the add section */
	display: var(--pub-div-mobile-display);
	width: var(--pub-toc-width); 
	/* white-space: nowrap; */
	overflow-y: scroll;
	height: 75vh;
	margin-bottom: 100px; /* needed to deal with footer */
}
.pub-div-article { /* the article section */
	position: relative;
	width:100%;
	font-size: 1.25em;
	overflow-y: scroll;
	height: 75vh;
	margin:5px 5px 100px 5px;
	
}
.pub-button-prev:before {
	content:var(--pub-button-prev);
}
.pub-button-next:before {
	content:var(--pub-button-next);
}
.pub-button-toc:before {
	content:var(--pub-button-toc);
}
.pub-button-story:before {
	content:var(--pub-button-story);
}
.pub-button-recipe:before {
	content:var(--pub-button-recipe);
}
.pub-lvl2 {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 5%;
}
.pub-lvl1 {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0%;
}

.pub h1 {
	text-align: center;
	
}
.pub figure {
	text-align: center;
}
.pub figcaption {
	font-style: italic;
	text-align: center;
	font-size: large;
}
.pub-toc {
	font-size: large;
}
.pub-toc, 
.pub-toc a, 
.pub-toc:visited, 
.pub-toc:hover, 
.pub-toc:active {
	text-decoration: none;
	color: black;
}
.pub-toc:hover {

	background-color: var(--button-background);
}
.pub-toc::after {
	content: "\a";
  white-space: pre;
}
.pub p {
	text-indent: 50px;
}
.pub-center {
	text-indent: 0px;
	text-align: center;
}
.pub-left p {
	clear: both;
	text-indent: 0px;
	text-align: left;
}
.recipeingr {
	clear: both;
  /* margin: 4px;
  padding: 4px 4px 4px 60px; */
  line-height: 150%;
  list-style-type: square;
	text-indent: 0px;
}
.recipestep {
	clear: both;
  /* margin-top: 10px;
  padding-left: 15px; */
	text-indent: 0px;
	
}
.recipestep li {
	clear: both;
  /* margin: 0;
  padding: 0; */
  /* margin-left: 1em; */
	text-indent: 0px;
}
.recipeyield {
  text-align: left;
  text-indent: 0;
}
.recipenote {
	text-align: left;
  
  
}
.recipenote::before {
	content: "Suggestion: ";
  font-style: italic;
  
	font-weight: bold;
}
/* SIDEBAR */
.sidebar-figure {
	text-align: center;
}
.newbanner {
	text-align: center;
	font-size: large;
}
.boldnew {
		font-size: x-large;
		font-weight: bold;
		color: purple;
}
/* spacer */
.spacer {
	margin-bottom: 300px;
}
.nuts {
	font-size: small;
}