/*******************************************************************************
** site.css
**
** These selectors are ONLY for the site template.
*/

/*******************************************************************************
** Full reset and some global things.
** http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
*/

:root
{
	--C_MAIN: whitesmoke;
	--C_MAIN_MEDIUM: #D3D3D3;		/* LightGray */
	--C_MAIN_DARK: #696969;			/* DimGray */
	--C_SITE: #696969;				/* DimGray */
	--C_TABLE_BORDER: #696969;		/* DimGray */
	/* ********************************************* Debug */
	--C_MSG: #008000;					/* Green */
	--C_ERR: #B22222;					/* FireBrick */
	/* ********************************************* Colours for each site */

/*	--CS_RECIPES: #990009;			/* "wine" */
/*	--CS_CREATIVE: #7B68EE;			/* MediumSlateBlue */
/*	--CS_FAVOURITES: #008B8B;		/* DarkCyan */
/*	--CS_WISHLIST: #AF00BF;			/* HotMagenta */
/*	--CS_EXERCISES: #FFA500;		/* Orange */
/*	--CS_AUTDHD_LIFE: #9370DB;		/* MediumPurple */
/*	--CS_SHOPPING_LIST: #996633;	/* Shit brown */

/*	--CS_HAPPY: #FFFF80;				/* "light yellow" */
/*	--CS_ND: #B22222;					/* FireBrick */
/*	--CS_GENDER: #FFF50E;			/* SeaShell */
	/*csQueer*/
/*	--CS_SOCIAL_JUSTICE: black;	/* black */
/*	--CS_MENTAL_HEALTH: #8F00FF;	/* RebeccaPurple */
/*	--CS_POLYAMORY: blue;			/* Plum */
/*	--CS_WEIRD: #90EE90;				/* LightGreen */
/*	--CS_CRITTERS: #3CB371;			/* MediumSeaGreen */
/*	--CS_LIFE_HACKS: #87CEFA;		/* LightSkyBlue */

/*	--CS_HORSE_ISLE: #87CEEB;		/* SkyBlue */

    --INTENSITY_WHITESMOKE: whitesmoke;		/* Default backgroud colour*/
	--INTENSITY_LOW: #FFFFFF;		/* Table row highlights */
	--INTENSITY_MED: #EEF5F5;
	--INTENSITY_HI : #CCE2E1;
    --INTENSITY_ZAP: #FFEFD5;
    --INTENSITY_YELLOW: #faf9ca;    /* Old   #fffed4 */
	--INTENSITY_YELLOWGREEN: #EDFFCA;     /* Old   #f1ffd4 */
	--INTENSITY_GREEN: #e3fce4;     /* Old   #f1ffd4 */
    --INTENSITY_GREENBRIGHT: #EDFFCA;
    --INTENSITY_BLUE: #d8f9ff;      /* Old #e0faff; #d0f8ff; xxx #ebf2ff; Neon Blue #83eeff*/
    --INTENSITY_RED: #ffe4da;	    /* Old  #ffc8b6 */
	--INTENSITY_GREY: #EEF1F1;
}

*
{
	outline: none;
	margin: 0;
	border: 0;
	padding: 0;
	font-family: Verdana, Geneva, Arial, Sans-serif;
}

/* When adding padding to a box it changes the width of the box.
** https://www.paulirish.com/2012/box-sizing-border-box-ftw/
*/

*, *::before, *::after
{
	box-sizing: inherit;
}

/* 100% height on body fixes issues with CSS gradients on the page body. */

html
{
	height: 100%;
	box-sizing: border-box;
}

body
{
	background-color: var(--C_MAIN);
	margin-left: 10px;
	text-align: left;
	color: black;
	font-size: 1.0em;
}

#errors
{
	margin: 0px 0px 15px 75px;
	color: var(--C_ERR);
	font-size: 1.5rem;
	font-weight: bold;
}

/*******************************************************************************
/* Debugging.
*/

.alan
{
	border: 3px dotted yellow;
	background-color: #8F4B8B;
}
.alan a { color: blue; }

.shelley
{
	border: 3px dotted yellow;
	background-color: green;
}
.shelley a { color: orange; }

/*******************************************************************************
** Common page things.
*/

header
{
/*outline: 1px solid red;*/
	margin-bottom: 5px;
	font-size: 2.0rem;
}
header a
{
	color: black;
	text-decoration: none;
}

h1
{
/*	margin-top: 20px;*/
	margin-bottom: 10px;
	border-top: 1px solid var(--C_MAIN_DARK);
	border-bottom: 1px solid var(--C_MAIN_DARK);
	font-size: 1.7rem;
	font-weight: normal;
}

h2
{
	margin-top: 20px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--C_MAIN_DARK);
	font-size: 1.4rem;
	font-weight: normal;
}

h3
{
	margin-top: 20px;
}

#croutons
,.idx_menu
,#topmenu
,.listmenu
,p
,ul
/*,.xstitch*/
/*,.zenaThumbs*/
/*,.thumbnails*/
/*,.booklist*/
,.shopping
{
	margin-bottom: 20px;	/* Every "block" should have spacing */
}

/*******************************************************************************
** Tables
*/

.std
{
/*outline: 2px dashed green;*/
	border-collapse: collapse;
/*	margin: 20px 0px 20px 0px;*/
	margin-bottom: 20px;

	/* https://stackoverflow.com/questions/11267154/fit-cell-width-to-content
	max-width: 100%;
	white-space: nowrap;
	*/
}

.std tr
{
}

.std th
,.std td
{
	border: 2px solid var(--C_TABLE_BORDER);
	padding: 5px;
}

.std th
{
	font-size: 1.1rem;
	background: var(--C_MAIN_MEDIUM)
}

.img_line
{
	white-space: nowrap;
}

/*
.csBox
{
	outline: 1px solid var(--C_MAIN_MEDIUM);
}
*/

/*******************************************************************************
** Sortable.
** https://javascript.plainenglish.io/easy-table-sorting-with-javascript-370d8d97cad8
*/

.sortable
{
/*outline: 3px solid red;*/
}

.sortable thead th
{
/*outline: 1px solid red;*/
	padding: 0px;
}

.sortable thead th a
{
/*outline: 1px solid red;*/
/*
*/
	display: block;
/*	width: 140px;*/
	line-height: 30px;
	padding: 2px 8px;
	border: 1px solid var(--C_MAIN_MEDIUM);
	background: rgb(215, 210, 203);
/*	background: linear-gradient(180deg, rgba(215,210,203,1) 0%, rgba(255,255,255,1) 100%);*/
/*	background: linear-gradient(180deg, rgba(200,200,255,1) 0%, rgba(244,244,255,1) 100%);*/
	background: linear-gradient(180deg, #C8C8FF 0%, #F4F4FF 100%);
	text-decoration: none;
	color: black;
	font-family: ariel, sans-serif;
	font-size: 16px;
	text-align: center;

/*
	background-color: transparent;
	padding: 5px 10px;
	border-radius: 10px;
	text-decoration: none;
	border: 2px solid #e74c3c;
	color: #e74c3c;
	transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
*/
/*
	background-color: transparent;
	padding: 5px 10px;
	border-radius: 10px;
	text-decoration: none;
	border-color: #3498db;
	color: white;
	box-shadow: 0 0 40px 40px #3498db inset, 0 0 0 0 #3498db;
	transition: all 150ms ease-in-out;
*/
}

 .sortable thead th a:hover
,.sortable thead th a:focus
{
/*
*/
	background: rgb(205, 205, 205);
	background: linear-gradient(180deg, rgba(205, 205, 205,1) 0%, rgba(135, 135, 135,1) 100%);

/*
	color: black;
	outline: 0;
	box-shadow: 0 0 40px 40px #e74c3c inset;
*/
/*
	color: black;
	outline: 0;
	box-shadow: 0 0 10px 0 #3498db inset, 0 0 10px 4px #3498db;
*/
}

/*******************************************************************************
** Colours for site.
*/

.cMain
{	background: var(--C_MAIN);}

.cMainMedium
{	background: var(--C_MAIN_MEDIUM);}

.cMainDark
{	background: var(--C_MAIN_DARK);}

.cTableBorder
{	background: var(--C_TABLE_BORDER);}

.cMsg
{	background: var(--C_MSG);}

.cErr
{	background: var(--C_ERR);}

/* Colours for sections - sites */

.csSite
{	background: var(--C_MAIN_DARK);}

.bgLow
{   background-color: var(--INTENSITY_LOW);}

.bgMed
{	background-color: var(--INTENSITY_MED);}

.bgHigh
{	background-color: var(--INTENSITY_HI );}

.bgZap
{	background-color: var(--INTENSITY_ZAP );}

.bgSmoke
{	background-color: var(--INTENSITY_WHITESMOKE );}

.bgYellow
{	background-color: var(--INTENSITY_YELLOW );}

.bgYellowGreen
{	background-color: var(--INTENSITY_YELLOWGREEN );}

.bgGreen
{   background-color: var(--INTENSITY_GREEN );}

.bgGreenBright
{   background-color: var(--INTENSITY_GREENBRIGHT );}

.bgBlue
{   background-color: var(--INTENSITY_BLUE );}

.bgRed
{   background-color: var(--INTENSITY_RED );}

.bgGrey
{   background-color: var(--INTENSITY_GREY );}

.bgSite
,td.csSite
{	background: var(--CS_SITE);}

/*******************************************************************************
** Links aka menu "buttons".
*/

 .menu
,#slideshow button
,#topmenu a
,.idx_menu a
,.choiceButton
{
	display: inline-block;
	width: 140px;						/* Width of top level menu link items */
	line-height: 30px;

	padding: 2px 8px;
	border: 1px solid var(--C_MAIN_MEDIUM);

	background: rgb(215, 210, 203);
	background: linear-gradient(180deg, rgba(215,210,203,1) 0%, rgba(255,255,255,1) 100%);

	text-decoration: none;

	color: black;
	font-family: ariel, sans-serif;
	font-size: 16px;
	text-align: center;
}

#topmenu a
,.idx_menu a
{
	width: 300px;						/* Width of site menu link items */
	text-align: left;
}

 #topmenu tr td:nth-child(2) a	/* Slideshow */
,#topmenu tr td:nth-child(3) a	/* Gallery */
{
/*outline: 1px solid red;*/
	width: 100px;
}

#croutons
,.idx_menu td
{
	padding-left: 30px;
}

.choiceButton
{
	width: 140px;
	line-height: 25px;
	font-size: 16px;
	text-align: center;
}

#slideshow button
{
	width: 90px;
	line-height: 20px;
	font-size: 14px;
	text-align: center;
}

 .menu:hover
,#slideshow button:hover
,#topmenu a:hover
,.idx_menu a:hover
,.choiceButton:hover
{
	background: rgb(205, 205, 205);
	background: linear-gradient(180deg, rgba(205, 205, 205,1) 0%, rgba(135, 135, 135,1) 100%);
}

/* Top dev menu */

#devMenu
{
	display: inline-block;
	position: absolute;
	top: -6px;
	right: 10px;
}

#hamburger
,#close_menu
{
	display: none;
}

#hamburger
{
	position: absolute;
	top: 0;
	right: 0;
	width: 35px;
	height: 35px;
	background-color: var(--C_MAIN);
	cursor: pointer;
}

#hamburger div
{
	width: 80%;
	height: 15%;
	background-color: black;
	border-radius: 20px;
	margin: 14% 10% 14% 10%;
}

#close_menu
{
	color: black;
	text-align: right;
	text-decoration: none;
}

#close_menu:hover
{
	color: white;
}

/*******************************************************************************
/* Slideshow

<section id="slideshow">
<p id="ss_title"></p>
<img id="ss_img" src="" height="500" alt="" />
<div id="ss_controls">
<button type="button" onclick="slideshow(-1000)">&lt;&lt;</button>
<button type="button" onclick="slideshow(-1)">&lt;</button>
<button type="button" onclick="slideshow(+1)">&gt;</button>
<button type="button" onclick="slideshow(+1000)">&gt;&gt;</button>
</div>
</section>
*/

#slideshow
{
	display: inline-block;
	width: 520px;
	margin: 0px 0px 20px 0px;
}

.img_wrap
{
	border: 1px solid var(--C_MAIN_DARK);
	padding: 9px 0px 0px 0px;
}

.img_box
{
	position: relative;
	display: block;
	width: 500px;
	height: 500px;
	margin: 0 auto;
}

/* https://stackoverflow.com/questions/299870/how-to-center-an-image-horizontally-and-align-it-to-the-bottom-of-the-container */

#slideshow img
{
	display: block;
	max-width: 500px;
	max-height: 500px;
	margin: auto;
	position: absolute;
	bottom: 0;
	left:0; right:0; /* Aligns horizontal center */
}

#slideshow #ss_title
{
	display: block;
	margin: 6px;
	text-align: center;
	font-size: 1.1rem;
}

#slideshow #ss_controls
{
	margin: 6px;
	text-align: center;
}

/*******************************************************************************
/* Random stuff.
*/

.err
{
	margin: 25px 0px 25px 25px;
	color: var(--C_ERR);
	font-size: 1.0rem;
	font-style: italic;
}

.rindent
{
	padding-left: 100px;
}

.thumbnails img
{
	width: 75px;
}

.std img
,.assemblage img
{
	max-width: 175px;
	max-height: 115px;
}

.unordered
{
	margin-left: 20px;
}

#recipe h2
{
/*outline: 1px solid red;*/
/*	display: block;*/
	margin: 15px 0px 5px 0px;
/*	border: none;*/
	border-bottom: 1px solid var(--C_MAIN_DARK);
/*	width: 100%;*/
/*	text-decoration: underline; /* overline line-through*/
/*	margin-top: 20px;*/
/*	margin-bottom: 10px;*/
/*	border-bottom: 1px solid var(--C_MAIN_DARK);*/
/*	font-size: 1.4rem;*/
/*	font-weight: normal;*/
}

/*******************************************************************************
** These get modified by the JavaScript.
*/

#croutons
{
	display: block;
}

#topmenu td
{
	padding-left: 30px;
}

footer
{
	padding: 10px 0px 10px 10px;
	color: var(--C_MAIN);
	font-size: 0.75rem;
}

/*******************************************************************************
** sitemap
** https://stackoverflow.com/questions/4810841/pretty-print-json-using-javascript
** https://stackoverflow.com/questions/2614862/how-can-i-beautify-json-programmatically
*/

#pretty_json { white-space: pre-wrap; }
/*pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }*/
#pretty_json .number		{ color: darkorange; }
#pretty_json .string		{ color: green; }
#pretty_json .key			{ color: red; }
#pretty_json .boolean	{ color: blue; }
#pretty_json .null		{ color: magenta; }

#modal
{
	position: fixed;
	z-index: 1;
	top: 50px;
	left: 500px;
	max-width: 1200px;
	max-height: 930px;
	overflow-y: scroll;

	outline: 5px solid purple;
	background-color: white;
}

#modal .close
{
	position: fixed;
	top: 19px;
	left: 495px;

	background-color: white;
	border: 2px solid black;
	border-radius: 5px;
	line-height: 75%;
	padding-bottom: 4px;

	color: #AAA;
/*	float: right;*/
	font-size: 28px;
	font-weight: bold;
}

 #modal .close:hover
,#modal .close:focus
{
	color: black;
	text-decoration: none;
	cursor: pointer;
}

.btn
{
	background-color: transparent;
	padding: 5px 10px;
	border-radius: 10px;
/*
	border: 2px solid #e74c3c;
	color: #e74c3c;
	transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
*/
	border-color: #3498db;
	color: white;
	box-shadow: 0 0 40px 40px #3498db inset, 0 0 0 0 #3498db;
	transition: all 150ms ease-in-out;
}

 .btn:hover
,.btn:focus
{
	color: black;
	outline: 0;
/*	box-shadow: 0 0 40px 40px #e74c3c inset;*/
	box-shadow: 0 0 10px 0 #3498db inset, 0 0 10px 4px #3498db;
}

/*******************************************************************************
** "Responsiveness" is just a bug fancy way of saying
** 	"looks different at different widths"
** Different widths usually mean smaller screens, such as on phones.
** 	iPad = 1024x768, iPhone = 320x480
*/

/******************************************************************************/
@media screen and (max-width: 1199px)
{
#modal
{
	left: 0px;
}

} /* X < 1200 */

/******************************************************************************
@media screen and (max-width: 999px)
{
} /* X < 1000 */

/******************************************************************************
@media screen and (max-width: 817px)
{
} /* X < 818 */

/******************************************************************************
@media screen and (max-width: 799px)
{
} /* X < 800 */

/******************************************************************************/
@media screen and (max-width: 767px)
{
#devMenu .menu
{
	width: 100px;
	padding: 2px 2px;
}

} /* X < 768 */

/******************************************************************************
@media screen and (max-width: 714px)
{
} /* X < 715 */

/******************************************************************************/
@media screen and (max-width: 599px)
{
 #menu li:hover
,#menu li a:hover
,#close_menu:hover
{
}

#devMenu
{
	display: none;

	background-color: green;
	border: 3px dotted yellow;
	outline: 3px solid blue;

	position: absolute;
	right: 3px;
	top: 3px;
	margin: 0px 0px 0px 0px;
	padding: 0px 10px 10px 10px;
	z-index: 10;
}

#close_menu
{
	display: block;
}

#hamburger
{
	display: inline-block;
}

} /* X <= 600 */

/******************************************************************************/
@media screen and (max-width: 549px)
{
#slideshow button
{
	width: 60px;
	padding: 2px 2px;
	font-size: 12px;
}

#slideshow
{
	width: 320px;
}

.img_wrap
{
}

.img_box
{
	width: 300px;
	height: 300px;
}

#slideshow img
{
	max-width: 300px;
	max-height: 300px;
}

#slideshow #ss_title
{
	font-size: 0.85rem;
}

} /* 0 <= X < 550 */

/******************************************************************************/
@media screen and (max-width: 499px)
{
#croutons .menu
{
	width: 100px;
	padding: 2px 2px;
	font-size: 14px;
}

} /* 0 <= X < 500 */

/******************************************************************************
@media screen and (max-width: 479px)
{
} /* 0 <= X < 480 */

/******************************************************************************/