/*
Theme Name: 	IIHO
Description: 	A basic theme for the IIHO related content.
Version: 		1.0
Author: 		Leon Janzen
Author URI: 	https://iiho.ca
*/

@font-face {
	font-family: "Gotham-Bold";
	font-display: swap;
	src: url("fonts/Gotham-Bold.otf") format("opentype"); 
	font-weight: bold;
}
@font-face {
	font-family: "Golos";
	font-display: swap;
	src: url("fonts/GolosText-VariableFont_wght.ttf") format("truetype");
}

:root
{
	color-scheme:light; /* So far the theme is designed with a primarily light colour scheme, so set that preference for all SVG images that are displayed on the pages. */

	/*
	All of the colour properties should be located here, so that they can be easily changed
	for accomodate a dark theme (which hasn't been built yet).
	These colour varables are specified as "#,#,#" rather than "rgb(#,#,#)"
	so that they can be included in an rgb() value, or an rgba() value, and
	have opacity added as necessary.
		e.g. "rgba(var(--font-colour-normal), .5)"
	*/
	--font-colour-print:0,0,0; /* black */
	--font-colour-normal:35,31,32; /* normal text on a light background */
	--font-colour-soft:139, 140, 139; /* light text on a light background */
	--font-colour-normal-inverted:255,255,255; /* normal text on a dark background */
	--font-colour-soft-inverted:170, 170, 171; /* light text on a dark background */
	--heading-colour:35,31,32 !important; /* almost black, same as normal text */
	--a-link-colour:16,176,230; /* light blue */
	--a-link-colour:20,147,198; /* light blue */
	--a-link-bright-colour:75,191,229; /* This is a little brighter than --a-link-colour, for display on a dark background. */
	--a-visited-colour:25,106,151; /* dark blue */
	--a-hover-colour:16,176,230; /* lighter blue */

	--a-link-colour-inverted:174, 235, 255; /* very light blue */
	--a-visited-colour-inverted:75,191,229; /* light blue */
	--a-hover-colour-inverted:255,255,255; /* white */

	--nav-a-link-colour:255,255,255;
	--nav-a-link-background-colour:238,238,238;
	--nav-a-current-colour:var(--a-link-bright-colour);
	--nav-a-current-background-colour:238,238,238;
	--nav-a-current-ancestor-colour:var(--nav-a-current-colour);
	--nav-a-current-ancestor-background-colour:238,238,238;
	--nav-a-visited-colour:var(--nav-a-link-colour);
	--nav-a-hover-colour:var(--nav-a-link-colour);
	--nav-a-hover-background-colour:238,238,238;
	--nav-background-colour:var(--header-footer-background-colour);
	--nav-accent-color:239,76,75; /* bright red */

	--border-colour:189, 203, 212 !important;
	--border-colour-inverted:255,255,255 !important;
	--border-colour-inverted:0,0,0 !important;
	--highlight-background-colour:222, 236, 248 !important;
	--highlight-border-colour:157, 197, 225 !important;
	--highlight-background-colour:241, 241, 241 !important;
	--highlight-border-colour:223,223,223 !important;
	--pagination-list-a-current-colour:var(--font-colour-normal-inverted) !important;
	--pagination-list-a-current-background-colour:var(--a-link-colour) !important;
	--menu-user-background-color:var(--highlight-background-colour);
	--menu-user-background-color:74,74,74;
	
	--header-footer-background-colour:28,54,93; /* dark blue */
	--body-background-colour:223,223,223;
	--container-background-colour:255,255,255;
	--content-background-color:var(--container-background-colour);
	--container-print-background-colour:255,255,255;
	--box-shadow-colour:0,0,0;
	--breadcrumb-border-colour:223,223,223;
	--search-background-colour:var(--nav-background-colour);
	--search-background-colour:var(--a-link-colour);
	--tr-hover-background-colour:255,255,255;

	accent-color:rgb(var(--a-link-colour));
	--input-inactive-background-colour:247,247,247; /* This is the normal idle state of an input that doesn't currently have focus. */
	--input-background-colour:255,255,255;
	--input-disabled-background-colour:223,223,223;
	--input-border-colour:189, 203, 212;
	--input-required-border-colour:var(--a-link-colour);
	--button-colour:var(--font-colour-normal-inverted);
	--button-background-colour:var(--a-link-colour);
	--button-disabled-background-colour:127,127,127;

	/* WordPress element colours. */
	--comment-background-colour:127,127,127;

	/* Non-colour variables */
	--container-width:900px;
	--row-padding-left-right:8vw;
	--scrollbar-width:0px;
}

/* CKEditor theme customizations */
:root
{
	/* These must be designated as !important to override the built-in styles, which are loaded after these ones. */
	--ck-color-toolbar-background: rgb(215,215,215) !important;
	--ck-color-button-default-background: rgb(255,255,255) !important;
	--ck-color-button-default-disabled-background: rgb(231,231,231) !important;
}
.ck-editor
{
	color:rgb(var(--font-colour-normal));
}
@media (prefers-color-scheme: dark) {
	/*
	For a dark theme, copy all of the colour properties above, and generally invert them here.
	*/
}

/* MARK: Defaults */

*
,*:before
,*:after
{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
::selection
,::-moz-selection
{
	background:rgb(var(--nav-a-hover-colour));
	color:rgb(var(--font-colour-normal-inverted));
}
html
{
	height:100%;

	font-size: 100%;
	overflow-y: scroll;
}
html
,body
,div
,span
,object
,iframe
,h1
,h2
,h3
,h4
,h5
,h6
,p
,blockquote
,pre
,abbr
,address
,cite
,code
,del
,dfn
,em
,img
,ins
,kbd
,q
,samp
,small
,strong
,sub
,sup
,var
,b
,i
,dl
,dt
,dd
,ol
,ul
,li
,fieldset
,form
,label
,legend
,table
,caption
,tbody
,tfoot
,thead
,tr
,th
,td
,article
,aside
,canvas
,details
,figcaption
,figure
,footer
,header
,hgroup
,menu
,nav
,section
,summary
,time
,mark
,audio
,video
{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}        
article
,aside
,details
,figcaption
,figure
,footer
,header
,hgroup
,nav
,section
,iframe
{
	display: block;
}
div
,article
,section
,header
,footer
,nav
,fieldset
,li
{
	position:relative; /* For absolutely positioning elements within containers (add more to the list as necesssary) */
}
div
,article
,section
,header
,footer
,nav
,table
,td
,th
,form
,hr
,img
,iframe
,fieldset
{
	border-style:solid;
	border-color:rgb(var(--border-colour));
}
audio
,canvas
,video
{
	display: inline-block;
	/*
	I think these properties are pretty old and can be removed.
	*display: inline; 
	*zoom: 1; 
	*/
}
code
,kbd
,samp
{ 
	font-family: monospace; 
	_font-family: 'courier new', monospace; 
}
pre
{ 
	font-family: inherit;
	white-space: pre; 
	white-space: pre-wrap; 
	word-wrap: break-word; 
}
.group:after
{
	/* For clearing */
	display:block;
	height:0;
	clear:both;
	content:".";
	visibility:hidden;
}
a
,a:link
{
	text-decoration:none;
}
p
,h1
,h2
,h3
,h4
,h5
,h6
{
	margin-bottom:.6em;
	
	font-weight:normal;
}
h1
,h2.page-title
,ol > li:has(> h1)::marker /* If a heading is the first element in an ordered list item, make the ::marker style match the heading style. */
{
	font-size:2em;
}
h2
,ol > li:has(> h2)::marker
{
	font-size:1.7em;
}
h3
,ol > li:has(> h3)::marker
{
	font-size:1.4em;
}
h4
,ol > li:has(> h4)::marker
{
	font-size:1.2em;
}
h5
,ol > li:has(> h5)::marker
{
	font-size:1em;
	font-style:italic;
}
h6
,ol > li:has(> h6)::marker
{
	font-size:.75em;
	text-transform:uppercase;
}
small
{
	font-size:85%;
}
sub
,sup
{
	position:relative;
	font-size:75%;
}
sup
{
	top: -0.5em; 
}
sub
{ 
	bottom: -0.25em; 
}
hr
{
	margin:1em 0;
	border-width:1px 0 0;
}
ul
,ol
,blockquote
{
	margin-left:25px;
}
li
{
	list-style-position:outside;
}
ol li
{
	list-style-type:decimal;
}
ol li li
{
	list-style-type:lower-alpha;
}
ol li li li
{
	list-style-type:decimal;
}
ul li
{
	list-style-type:disc;
}
ul ul li
{
	list-style-type:circle;
}
ul ul ul li
{
	list-style-type:square;
}
ul ul ul ul li
{
	list-style-type:disc;
}
dt
{
	margin-bottom:.2em;
	font-weight: bold;
}
dd
{
	margin-bottom:.6em;
}
label
{
	cursor:pointer;
}
textarea
{
	display:block;
	resize:vertical;
}
.input /* This is a class that can be applied to another element (i.e. div) to make it match other inputs. */
{
	display:inline-block;
	cursor:pointer;
}
input
,textarea
,select
,.input
,button
,a.button
{
	font-family:inherit;
	font-size:inherit;
	color:inherit;

	border:1px solid rgb(var(--input-border-colour));
	border-radius: 4px;
	outline:none;

	background-color:rgb(var(--input-inactive-background-colour));
	box-shadow:0 0 8px rgba(var(--box-shadow-colour),.05);
}
input[type="range"]
{
	padding:5px 0;
	max-width:100%;
}
button
,a.button
,a.button:link
,a.button:visited
,a.button:visited:hover
,input[type="button"]
,input[type="submit"]
,input[type="reset"]
,input[type="file"]
{
	display:inline-block;
	padding:5px 12px 6px;
	margin-right:7px;
	border:none;
	border-radius: 20px;

	color:rgb(var(--button-colour));
	background-color:rgb(var(--button-background-colour));
	/*
	TODO - Add a background image (SVG) for an arrow that appears on hover, like the rest of the maptomotion.org website.
	background-image:url("");
	*/
}
.button.button-large
,a.button.button-large
{
	padding:15px 20px 16px;
}
textarea
,select
,.input
,input[type="text"]
,input[type="date"]
,input[type="password"]
,input[type="email"]
,input[type="search"]
,input[type="color"]
,input[type="number"]
,input[type="tel"]
,input[type="url"]
{
	max-width:100%;
	padding:.2em .3em;
}
select
{
	padding-right:2px;
	word-wrap: normal;
}
textarea:focus
,select:focus
,.input:focus
,input:focus
,input:active
,button:hover
,a.button:hover
,a.button:visited:hover
,input[type="button"]:hover
,input[type="submit"]:hover
,input[type="reset"]:hover
,input[type="file"]:hover
,button:focus
,a.button:focus
,input[type="button"]:focus
,input[type="submit"]:focus
,input[type="reset"]:focus
,input[type="file"]:focus
{
	background-color:rgb(var(--input-background-colour));
	box-shadow:0 0 8px rgba(var(--box-shadow-colour),.25);
}
button:hover
,a.button:hover
,a.button:visited:hover
,input[type="button"]:hover
,input[type="submit"]:hover
,input[type="reset"]:hover
,input[type="file"]:hover
,button:focus
,a.button:focus
,input[type="button"]:focus
,input[type="submit"]:focus
,input[type="reset"]:focus
,input[type="file"]:focus
{
	background-color:rgba(var(--button-background-colour),.7);
}
button:active
,a.button:active
,input[type="button"]:active
,input[type="submit"]:active
,input[type="reset"]:active
,input[type="file"]:active
,button:hover:active
,a.button:hover:active
,input[type="button"]:hover:active
,input[type="submit"]:hover:active
,input[type="reset"]:hover:active
,input[type="file"]:hover:active
{
	box-shadow:0 0 3px rgba(var(--box-shadow-colour),.3);
}
button[disabled]
,a.button.disabled
,input[type="button"][disabled]
,input[type="submit"][disabled]
,input[type="reset"][disabled]
,input[type="file"][disabled]
,button:hover[disabled]
,a.button:hover[disabled]
,input[type="button"]:hover[disabled]
,input[type="submit"]:hover[disabled]
,input[type="reset"]:hover[disabled]
,input[type="file"]:hover[disabled]
{
	background-color:rgba(var(--button-disabled-background-colour),.7);
	box-shadow:none;
}
textarea[disabled]
,select[disabled]
,.input[disabled]
,input[disabled]
,.disabled
{
	opacity:.4;
	filter:alpha(opacity=40);
}
textarea[disabled]
,select[disabled]
,.input[disabled]
,input[disabled]
{
	background-color:rgb(var(--input-disabled-background-colour));
}
textarea.required
,select.required
,.input.required
,input[type="text"].required
,input[type="date"].required
,input[type="password"].required
,input[type="email"].required
,input[type="search"].required
,input[type="color"].required
,input[type="number"].required
,input[type="tel"].required
,input[type="url"].required
{
	outline:1px solid rgb(var(--input-required-border-colour));
	outline-offset:-1px; /* Cover the existing border with the outline. */
}

table
{
	table-layout:fixed;
	border-collapse:collapse;
	border-width:1px;
	border-spacing: 0;
}
td
,th
{
	border-width:1px;
	vertical-align: top;
}
tr:hover
{
	background-color:rgba(var(--tr-hover-background-colour),.12);
}
th
,td
{
	padding:5px;
	border-width:1px;
	overflow:hidden;
}
th
{
	text-align:center;
	font-weight:bold;
	background-color:rgb(var(--font-colour-normal));
}
caption
{
	caption-side:top;
	text-align:left;
}

/* MARK: Colours - elements on a light background. */

a
,a:link
,a:visited
{
	color:rgb(var(--a-link-colour));
}
a:visited
{
	color:rgb(var(--a-visited-colour));
}
a:hover
{
	color:rgb(var(--a-hover-colour));
}
a:visited:hover
{
	color:rgb(var(--a-hover-colour));
}
h1
,h2
,h3
,h4
,h5
,h6
{
	font-family:"Gotham-Bold","Golos","Century Gothic","Roboto",Arial,Helvetica,sans-serif;
	font-weight: normal;
	color:rgb(var(--nav-a-hover-colour));
}
body.paper 
h1
,body.paper 
h2
,body.paper 
h3
,body.paper 
h4
,body.paper 
h5
,body.paper 
h6
{
	color:inherit;
	font-weight: bold;
}
small
,.faded
{
	color:rgb(var(--font-colour-soft));
}

/* MARK: Colours - elements on a dark background. */

.content
,.feature
,.portfolio-item:nth-child(2n + 1)
{
	color:rgb(var(--font-colour-normal));
}
.content small
,.content .faded
{
	color:rgb(var(--font-colour-soft));
}
/*
.content a
,.content a:link
,.content a:visited
,.portfolio-item:nth-child(2n + 1) a
,.portfolio-item:nth-child(2n + 1) a:link
,.portfolio-item:nth-child(2n + 1) a:visited
{
	color:inherit;
}
*/
/*
.content a:hover
,.feature a
,.portfolio-item:nth-child(2n + 1) a:hover
,.message a:hover
{
	color:rgb(var(--heading-colour));
}
*/
/*
.content a:visited:hover
,.portfolio-item:nth-child(2n + 1) a:visited:hover
,.message a:visited:hover
{
	color:rgb(var(--a-visited-colour));
}
*/
.content h1
,.content h2
,.content h3
,.content h4
,.content h5
,.content h6
,.feature h1
,.feature h2
,.feature h3
,.feature h4
,.feature h5
,.feature h6
,.portfolio-item:nth-child(2n + 1) h1
,.portfolio-item:nth-child(2n + 1) h2
,.portfolio-item:nth-child(2n + 1) h3
,.portfolio-item:nth-child(2n + 1) h4
,.portfolio-item:nth-child(2n + 1) h5
,.portfolio-item:nth-child(2n + 1) h6
{
	color:rgb(var(--heading-colour));
}

@media print
{
	a
	,a:link
	,a:visited
	{
		color:rgb(var(--font-colour-print));
		text-decoration:none;
	}
	h1
	,h2
	,h3
	,h4
	,h5
	,h6
	{
		color:rgb(var(--font-colour-print));
	}
	textarea
	,input[type="text"]
	,input[type="date"]
	,input[type="password"]
	,input[type="email"]
	,input[type="search"]
	,input[type="color"]
	,input[type="number"]
	,input[type="tel"]
	,input[type="url"]
	{
		border:1px solid rgb(var(--input-border-colour));
	}
	td
	{
		padding:0 2px 2px 2px;
	}
}

/* MARK: Page transitions */

@view-transition {
	navigation: auto; /* This applies a basic fade transition between pages. */
}

/* MARK: Body */

body
{
	height: 100%;
	margin:0;
	display: flex;
	flex-direction: column;

	color:rgb(var(--font-colour-normal));
	font-family:"Golos","Century Gothic","Roboto",Arial,Helvetica,sans-serif;
	font-size:.9rem;
	background-color:rgb(var(--body-background-colour));
}
body.paper
{
	height: auto;
}
@media print
{
	body
	{
		height: auto;

		color:rgb(var(--font-colour-print));
		background-color:transparent;
		
		/*
		I'm not sure if the font should change to a more print-friendly font for printing, or stick with the theme font.
		font-family:Arial, Helvetica, sans-serif;
		*/
		/*
		Make the font a little smaller for printing. The screen size seems a little too large for printing.
		*/
		font-size:.9rem;
	}
}

.container
{
	display: flex;
	flex-direction: column;
	flex:1 1 auto; /* This is the only element in body that is allowed to grow, so it will expand to fill the space. */
	width:100%;
	margin:0;

	background-color:rgb(var(--container-background-colour));
	box-shadow:0 0 20px rgba(var(--box-shadow-colour),.3);
}
body.paper .container
{
	max-width:950px;
	height: auto;
	margin:3% auto;
	padding:3% 0;
	background-color: rgb(var(--container-print-background-colour));
}
@media print
{
	.container
	,body.paper .container
	{
		height: auto;
		margin:0;
		padding:0;
		max-width:none;
		background-color: rgb(var(--container-print-background-colour));

		box-shadow:none;
	}
}
.row-container
{
	box-sizing:content-box; /* Don't include the padding % in the max-width, otherwise the content-box actually shrinks at screen widths above 1080px. */
	max-width:var(--container-width);
	margin:0 auto;
	padding:0 var(--row-padding-left-right);
}
@media print
{
	.row-container
	{
		max-width:none;
		padding-left:0;
		padding-right:0;
	}
}

/* MARK: Header */

.header-row
{
	background-color:rgb(var(--header-footer-background-colour));
	color-scheme:dark;
}
body.paper .header-row
{
	background-color:transparent;
}
.header-row a:not(nav a) /* Use ":not(nav a)" to ovoid overridding the colours of the "nav a" elements, which are less specific than these conditions. */
{
	color:rgb(var(--a-link-colour-inverted));
}
.header-row a:not(nav a):visited
{
	color:rgb(var(--a-visited-colour-inverted));
}
.header-row a:not(nav a):hover
,.header-row a:not(nav a):visited:hover
{
	color:rgb(var(--a-hover-colour-inverted));
}
@media print
{
	.header-row
	{
		background-color:transparent;
	}
}
.header-row .row-container
{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
	padding-left:0;
	padding-right:0;
}
@media screen and (min-width:480px)
{
	.header-row .row-container
	{
		padding-left:var(--row-padding-left-right); /* Set it back to the original padding. */
		padding-right:var(--row-padding-left-right); /* Set it back to the original padding. */
	}
}

header
{
	flex-basis:auto;
	flex-shrink:0;
	flex-grow:0;
	padding:25px var(--row-padding-left-right) 20px;

	color:rgb(var(--font-colour-normal-inverted));
	font-size:1.1em;
}
body.paper header
{
	padding-left:0;
	padding-right:0;
}
header > div
{
	text-align: center; /* Centre the "admin" text below the header image. */
}

body.paper header div
{
	float:left;
}
header h1
{
	margin:0;
}
header h1 a
{
	display:block;
	position:relative;

	/* This text is replaced by an image and is only visible in the print stylesheet. */
	font-size:2.5em;
	font-weight:normal;
	text-transform:lowercase;
}
header h1 a
,header h1 a:link
{
	text-decoration: none;
	border-bottom-width: 0;
}
header h1 a span
{
	display:none; /* Hide the title text. It is replaced with an image. */
}
header h1 a img
{
	display:block;
	position:relative;
	height:auto;
	width:300px;
	max-width:100%;
	margin-bottom:5px;
}
body.paper
header h1 a img
{
	margin-left:0;
	margin-right:0;
	filter: invert(1); /* Turn the white image black for body.paper. */
}
@media screen and (min-width:480px)
{
	header
	{
		/* Remove the left and right padding, since at this width and above, the left and right padding are included in the .row-container parent element. */
		padding-left:0;
		padding-right:15px;
	}
}
@media screen and (min-width:950px)
{
	.header-row .row-container
	{
		flex-wrap:nowrap;
	}
	header
	{
		/*
		width:40%;
		*/
	}
}
@media print
{
	header
	{
		padding:0 0 3%;
	}
	/*
	header div
	{
		float:left;
	}
	*/
	/*
	header h1 a span
	{
		display:inline;
	}
	*/
	header h1 a img
	{
		filter: invert(1); /* Turn the white image black for printing. */
	}
}

/* MARK: Navigation */

nav
{
	flex-basis:auto;
	flex-shrink:1;
	flex-grow:1;
	width:100%;
	order:3;

	border-top:2px solid rgb(var(--a-link-colour));
	font-size:.9rem;
	font-weight:bold;
}
nav:after
{
	content:"";
	display:block;
	clear:both;
}
nav #menu-toggle li
{
	margin-bottom:0 !important;
}
nav #menu
{
	display:none;
	padding-bottom:2%; /* The bottom padding is located within the #menu element so it can be toggled. */
	border-top:2px solid rgb(var(--a-link-colour));
}
nav a#menu-toggle-link
{
	/* This causes the word "Menu" (apparently not case sensitive) to be converted into the three bar menu symbol. */
	font-family:"Material Symbols Outlined";
	font-size: 16px;
	font-weight: 600;
}
nav a#menu-toggle-link::after
{
	display:block;
	float:right;

	font-family:"Material Symbols Outlined";
	font-size: 16px;
	font-weight: 600;

	content:"arrow_drop_down";
}
nav a#menu-toggle-link.up::after
{
	content:"arrow_drop_up";
}
nav ul
{
	margin:0;
}
nav li ul
{
	margin-top:1px; /* This should be the same distance as the nav li margin-bottom below. */
	margin-left:8%; /* Set the margin of the second level items to the same as the padding of the first level items, below. */
}
nav li li ul
{
	margin-left:25px; /* Set the margin of the third level items to the same as the padding of the second level items, below. */
}
/* Hide all submenu items. */
nav li ul
{
	display:none;
}
/* Display submenu items for the current page (and ancestors of the current page). */
nav li.current_page_item > ul
,nav li.current_page_ancestor > ul
,nav li.current-menu-item > ul
,nav li.current-menu-ancestor > ul
,nav li.current-post-ancestor > ul
,body.single nav li.blog-ancestor > ul
{
	display:block;
}
nav li
,nav ul li /* This increases the specificity enough to override the properties above. */
,nav ul ul li
,nav ul ul ul li
{
	list-style-type:none;
	margin-bottom:1px !important; /* This should be the same distance as the nav li ul margin-top above. Use !important to override the style of "body.paper li" which has higher specificity. */
}
nav a
,nav a:link
,nav a:visited
{
	display:block;
	position:relative;
	padding:7px var(--row-padding-left-right) 8px; /* Set the padding of the first level items. */
	min-height:1.4em; /* This keeps all single line boxes the same height, even when the font-weight changes (for nav li.current_page_item > a below), affecting the size of the text, and the size of the box. */

	text-decoration:none;
	border-bottom-width:0;
	color:rgb(var(--nav-a-link-colour));

	-webkit-transition:color .3s ease, background-color .3s ease;
	-moz-transition:color .3s ease, background-color .3s ease;
	-o-transition:color .3s ease, background-color .3s ease;
	transition:color .3s ease, background-color .3s ease;
}
nav li li a
,nav li li a:link
,nav li li a:visited
{
	padding-left:25px; /* Set the padding of the second level items. */
}
nav li.current_page_ancestor > a
,nav li.current_page_ancestor > a:link
,nav li.current_page_ancestor > a:hover /* Retain this text colour during the :hover state. */
,nav li.current-menu-ancestor > a
,nav li.current-menu-ancestor > a:link
,nav li.current-menu-ancestor > a:hover /* Retain this text colour during the :hover state. */
,nav li.current-post-ancestor > a
,nav li.current-post-ancestor > a:link
,nav li.current-post-ancestor > a:hover /* Retain this text colour during the :hover state. */
,body.single nav li.blog-ancestor > a
,body.single nav li.blog-ancestor > a:link
,body.single nav li.blog-ancestor > a:hover /* Retain this text colour during the :hover state. */
{
	color:rgb(var(--nav-a-current-ancestor-colour));
}
nav li.current_page_item > a
,nav li.current_page_item > a:link
,nav li.current-menu-item > a
,nav li.current-menu-item > a:link
{
	background-color:rgb(var(--nav-a-current-background-colour),.2);

	color:rgb(var(--nav-a-current-colour)) !important; /* Use !important to override nav:visited:hover below, which has higher specificy. */

	cursor: default;
}
nav a:hover
,nav a:visited:hover
{
	color:rgb(var(--nav-a-hover-colour));
}
nav a:hover
,nav li.current_page_ancestor > a:hover /* This increases the specificity enough to override the nav li.current_page_ancestor > a:link properties above. */
,nav li.current-menu-ancestor > a:hover /* This increases the specificity enough to override the nav li.current_page_ancestor > a:link properties above. */
,nav li.current-post-ancestor > a:hover /* This increases the specificity enough to override the nav li.current_page_ancestor > a:link properties above. */
,body.single nav li.blog-ancestor > a:hover /* This increases the specificity enough to override the nav li.current_page_ancestor > a:link properties above. */
{
	background-color:rgb(var(--nav-a-hover-background-colour),.1);
}
/*
Add a down arrow beside menu items that contain submenu items.
*/
nav li:has(> ul) > a::after
{
	position: relative;
	top: 2px;
	padding-left: 4px;
	margin-bottom:-2px;
	font-family:"Material Symbols Outlined";
	content:"keyboard_arrow_down";
	font-size: 16px;
	font-weight: 600;
	color:rgb(var(--nav-accent-color));
	vertical-align: text-bottom;
}
@media screen and (min-width:480px)
{
	/* Switch menu to a horizontal layout with pop-up submenu items. */
	nav
	{
		border-top:none;
		text-align:center;
	}
	nav #menu-toggle
	{
		display:none;
	}
	nav #menu
	{
		display:block;
		padding-bottom:0; /* Remove the bottom padding. */
		border-top:none;
	}
	nav ul
	{
		display:inline-block; /* This allows the menu to be centred. */
	}
	nav li
	{
		float:left;
		text-align:left; /* Remove the centre alignment. */
	}
	nav a
	,nav a:link
	,nav a:visited
	{
		position:relative;
		padding:8px 15px 12px;
	}
	nav li.current_page_item > a
	,nav li.current_page_item > a:link
	,nav li.current-menu-item > a
	,nav li.current-menu-item > a:link
	{
		background-color:transparent; /* Remove background-color for first level items. */
	}

	/* Styles for second level items. */

	nav li ul
	{
		display:block;

		opacity:0; /* Hide until hovered over. */
		visibility:hidden; /* Use visibility to show and hide submenu items so that the opacity property can be changed with a transition. (Transitions do not work if the display property changes.) */
		width:0; /* When using the visibility property to hide submenu items, wide hidden items will still overflow the page and allow unncessary scrolling. Set width to 0, and overflow to hidden, and transition to the actual width on hover. */
		overflow:hidden;

		position:absolute;
		left:0px;
		top:100%;
		margin:0 !important; /* Remove the top margin. Use !important to override the style of "body.paper ul", which has higher specificy. */
		z-index:3; /* Set z-index so that it is not covered by subsequent items on the page. ".breadcrumb" is now sticky, and z-index:2, so this must be more than 2. */
		background-color:rgb(var(--nav-background-colour));
		box-shadow:0px 0px 20px rgba(var(--box-shadow-colour),.4);
		border-top:3px solid rgb(var(--a-link-colour));

		-webkit-transition:visibility 0s ease .3s,width 0s ease .3s,opacity .3s ease;
		-moz-transition:visibility 0s ease .3s,width 0s ease .3s,opacity .3s ease;
		-o-transition:visibility 0s ease .3s,width 0s ease .3s,opacity .3s ease;
		transition:visibility 0s ease .3s,width 0s ease .3s,opacity .3s ease;
	}
	nav li ul.reverse
	{
		left:auto;
		right:0px;
	}
	nav li:hover > ul
	{
		/*
		display:block;
		*/
		opacity:1;
		visibility:visible;
		width:250px; /* Set the width of second level items. If this changes, it must also be changed in the javascript in "\themes\default\core\snippets\nav.js". */
		overflow:visible;

		/* Unlike the transition effect, the transition-delay affects transitions to this style, not transitions away from this style. */
		-webkit-transition-delay:0s;
		-moz-transition-delay:0s;
		-o-transition-delay:0s;
		transition-delay:0s;
	}
	nav li li
	{
		float:none;
	}
	nav li li a
	{
		background-color:rgb(var(--nav-background-colour));
	}
	nav li li.current_page_item > a
	,nav li li.current_page_item > a:link
	,nav li li.current-menu-item > a
	,nav li li.current-menu-item > a:link
	{
		background-color:rgb(var(--nav-a-link-background-colour),.2); /* Re-add background-color for second level items. */
	}

	/*
	Add a right arrow beside menu items that contain submenu items.
	*/
	nav li li:has(> ul) > a::after
	{
		content:"chevron_right";
	}

	/* Styles for third level items. */

	nav li li ul
	{
		left:250px; /* The left position should equal the width of the second level items (above). */
		right:auto;
		margin-left:0; /* Remove the left margin. */
		top:0;
	}
	nav li li ul.reverse
	{
		left:-250px; /* Display on the right of the parent, instead of the left. This is for preventing submenus from being displayed off the side of the page. */
	}
}
@media screen and (min-width:950px)
{
	nav
	{
		width:auto;
		padding:30px 0 20px 1%;
		text-align:right; /* Switch to right alignment when this element to the right of <header>, instead of below it. */
	}
	nav li ul
	{
		left:auto;
	}
}
@media print
{
	nav
	{
		display:none;
	}
}

/* MARK: Breadcrumb */

.breadcrumb-row
{
	display:block;
	position:sticky;
	top:calc(5px + 8px + 1px + (1em * 1.55)); /* Calculated to match the height of ".menu-user": text plus top/bottom padding, plus border. */
	z-index:2;
	padding:3px 0 3px;
	border-color:rgb(var(--breadcrumb-border-colour));
	border-style:solid;
	border-bottom-width:1px;
	clear:both;
	background:rgb(255,255,255,.9);
	
	color:rgb(var(--font-colour-soft));
	font-size:80%;
}
body.paper .breadcrumb-row
{
	padding-left:0;
	padding-right:0;
}
@media print
{
	.breadcrumb-row
	{
		display:none;
		padding-left:0;
		padding-right:0;
	}
}
.breadcrumb-row .row-container
{
	padding-top:7px;
	padding-bottom:7px;
}
.breadcrumb-row a:link
,.breadcrumb-row a:visited
{
	color:rgb(var(--font-colour-soft));
}
.breadcrumb-row a:hover
{
	color:rgb(var(--font-colour-soft));
}
span.breadcrumb-separator
{
	display:inline-block;
	width:5px;
	height:5px;
	margin:0 2px;
	background-image:url("images/breadcrumb-separator.png");
}

/* MARK: Search */

#search-1
{
	flex-basis:auto;
	flex-shrink:0;
	flex-grow:1;
	align-self:center;
	order:2; /* Order before the "nav" element (3). */
	text-align: right;
	padding:calc(30px + 8px) var(--row-padding-left-right) calc(20px + 12px); /* The top and bottom padding equal the top and bottom padding of "nav", plus "screen and (min-width:480px) nav a". */
}
#search-1 .search
,#search-1 .close
{
	vertical-align:baseline;
}
.search-box
{
	position:absolute;
	z-index:3; /* Display in front of the breadcrumb bar. */
	background-color:rgb(var(--search-background-colour));
	box-shadow:0px 0px 20px rgba(var(--box-shadow-colour),.4);
	padding:10px;
	right:10px;
	top:70%;
}
.search-form
{
	white-space:nowrap;
}
#search-box-1
{
	display:none;
}
@media screen and (min-width:480px)
{
	#search-1
	{
		flex-grow:0;
		padding-left:0;
		padding-right:0;
	}
	.search-box
	{
		right:-10px;
	}
}
@media screen and (min-width:950px)
{
	#search-1
	{
		order:4; /* Order after the "nav" element (3). */
	}
}

/* MARK: Feature */

.feature
{
	clear:both;
	background-color:rgb(var(--font-colour-normal));
	background-image:url("images/feature-background.png");
	background-repeat:repeat;

	color:rgb(var(--font-colour-normal-inverted));
	font-size:1.1em;
	line-height:1.4em;
}
.feature a.feature-previous
,.feature a.feature-previous:link
,.feature a.feature-next
,.feature a.feature-next:link
{
	display:block;
	position:absolute;
	z-index:2;
	top:0;
	padding:0 2%;
	width:4%;
	max-width:14px;
	height:100%;
	overflow:hidden;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
	
	border-width:0;
	background-position:center center;
	background-repeat:no-repeat;
	background-origin:content-box;
	background-size:contain;

	cursor:pointer;
}
.feature-previous
{
	background-image:url("images/feature-previous.png");
	left:0;
}
.feature-next
{
	background-image:url("images/feature-next.png");
	right:0;
}
.feature-previous:hover
{
	background-image:url("images/feature-previous-hover.png");
}
.feature-next:hover
{
	background-image:url("images/feature-next-hover.png");
}
.feature-item
{
	display:none;
	padding:1.5em 8% 0;
	margin:0;
}
.feature-text
{
	padding-bottom:1.5em;
}
img.feature-image
{
	float:right;
	width:40%;
	height:auto;
	margin:0 0 1.5em 1.5em;
}
.feature p
{
	margin-bottom:1em; /* This should be the same as the margin-top of li, below. */
}
.feature li
{
	margin-bottom:.3em;
}
.feature ol
,.feature ul
{
	margin-top:1em; /* This should be the same as the margin-bottom of li, above. */
}

@media screen and (min-width:480px)
{
	.feature-text
	{
		width:50%;
	}
}
@media screen and (min-width:950px)
{
	.feature
	{
		margin-left:-15px;
		margin-right:-15px;
		width:calc(100% + 30px); /* For some reason, possibly a rendering engine bug, Chrome doesn't make this element expand to fit the area when the negative margins expand the space allowed. */
	}
}

/* MARK: Content */

.page-title
{
	clear:both;
	padding:1.4% 0 1.9%;
	margin:0;

	color:rgb(var(--heading-colour));
}
body.paper .page-title
{
	color:rgb(var(--font-colour-print));
}
@media print
{
	.page-title
	{
		padding-bottom:0;

		color:rgb(var(--font-colour-print));
	}
}
.content
{
	flex:1 1 auto; /* This is the only element in .container that is allowed to grow, so it will expand to fill the space. */
	clear:both;
	padding:1px 0 4%; /* The 1px padding-top prevents the top margin of .column-main-2 from collapsing with this element, and giving it an unwanted top margin. */
	z-index:0; /* Make sure the content is never on top of the menu or other header items. */

	line-height:1.3em;
	word-wrap:break-word;
	overflow-wrap:break-word;
}
body.content-bottom-padding-none .content
{
	padding-bottom: 0;
}
body.paper .content
{
	padding:0 0 2%;
	background: transparent;
	
	color:rgb(var(--font-colour-print));
}
@media print
{
	.content
	{
		padding:0 0 2%;
		background: transparent;
		
		color:rgb(var(--font-colour-print));
	}
	.content a
	,.content a:link
	{
		border-width:0;
	}
}

.content:after
,.column-main:after
{
	/* For clearing */
	content:"";
	display:block;
	height:0;
	clear:both;
}
.column-secondary
{
	padding-top:6%;
}
.content h1
,.content h2
,.content h3
,.content h4
,.content h5
,.content h6
{
	margin-bottom:.6em;
	margin-top:.6em;
	line-height:1.1em;
}
h2 + .content h3
,h3 + .content h4
,h4 + .content h5
,h5 + .content h6
{
	margin-top:.4em;
}
/* Do not use h1 tags on any page. This will make it obvious if one is being used. */
/*
.content h1
{
	text-decoration:line-through; 
}
*/
.product-info h2
{
	margin-top:0;
	margin-left:0;
}
/*
.content h3
{
	font-style:italic;
}
*/
.content .subtitle
{
	font-size:75%;
}
h1 + .subtitle
,h2 + .subtitle
,h3 + .subtitle
,h4 + .subtitle
,h5 + .subtitle
,h6 + .subtitle
{
	margin-top:-1em;
}
.content a
,.content a:link
{
	text-decoration:none;
}
.cke a
,.cke a:link
{
	border-width:0;
}
p
,li
,blockquote
{
	margin-bottom:1em; /* This should be the same as the margin-top of li, below. */
}
ol
,ul
{
	margin-top:1em; /* This should be the same as the margin-bottom of li, above. */
}
/*
Reduce the default spacing for the paper and print display.
*/
body.paper
p
,body.paper
li
,body.paper
blockquote
{
	margin-bottom:.5em; /* This should be the same as the margin-top of li, below. */
}
body.paper
ol
,body.paper
ul
{
	margin-top:.5em; /* This should be the same as the margin-bottom of li, above. */
}
@media print
{
	p
	,li
	,blockquote
	{
		margin-bottom:.5em; /* This should be the same as the margin-top of li, below. */
	}
	ol
	,ul
	{
		margin-top:.5em; /* This should be the same as the margin-bottom of li, above. */
	}
}
.compact
{
	margin-bottom:1em; /* Move the usual bottom margin from the li to the list (ul or ol). */
}
.compact li
,.compact
{
	margin-bottom:.3em;
}
.compact ul
,.compact ol
{
	margin-top:.3em;
	margin-bottom:.3em;
}
.content img
,.content video
,div.wp-caption
{
	max-width:100%;
}
.content img
,.content video
{
	height:auto;
	margin-bottom:15px; /* This should be the same as the right margin of img.alignright and the left margin of img.alignleft. */
}
.content img.avatar
{
	float:left;
	margin:0 12px 12px 0;
	width:25%;
	height:auto;
	max-width:96px;
	max-height:96px; /* Fixes display issue in IE8 where the images get too tall. */
	min-width:50px;
}
.content .wp-smiley
{
	margin:0;
}
.content code
{
	color:rgb(var(--font-colour-normal-inverted));
	font-size:.9em;
	background-color:rgb(var(--comment-background-colour));
	line-height:1em;
	padding:2px 10px 3px 4px;
}
.content pre code
{
	display:block;
	padding:2px 3px;
	margin:1em -3px;
}
.content span.breadcrumb-separator
{
	display:inline-block;
	width:5px;
	height:5px;
	margin:0 2px;
	background-image:url("images/breadcrumb-separator-light.png");
}
div.highlight
{
	margin:.8em calc(-2% - 2px);
	padding:.8em 2%;
	max-width:calc(104% + 4px);
	
	background-color:rgb(var(--highlight-background-colour));
	border:2px solid rgb(var(--border-colour));
	border-radius:4px;
	box-shadow:0 0 8px rgba(var(--box-shadow-colour),.2);
}
.popup-dialogue div.highlight
{
	/* Placeholder */
}
@media print
{
	div.highlight
	{
		margin-left:0;
		margin-right:0;
		max-width:100%;
		box-shadow: none;
	}
}
div.highlight h2
{
	margin-left:0; /* Remove outdent. */
}
div.highlight > h2
{
	margin-top:0; /* Remove top margin. */
}
table.highlight
{
	box-shadow:0 0 8px rgba(var(--box-shadow-colour),.2);
	background-color:rgba(var(--box-shadow-colour),.1); /* Make the background match the box shadow. Box shadow opacity is 50% of regular opacity. */
}
table.highlight td
{
	background-color:rgb(var(--highlight-background-colour));
}
table.highlight
,table.highlight tr
,table.highlight th
,table.highlight td
{
	border-color:transparent;
}
table.highlight tr:hover
{
	background-color:transparent; /* Remove background colour. */
}
img.shadow
{
	box-shadow:0 0 20px rgba(var(--box-shadow-colour), .3);
}
.wp-caption
{
	margin:.8em 0;
	padding:10px;
	background-color:rgb(var(--highlight-background-colour));
	box-shadow:0 0 8px rgba(var(--box-shadow-colour),.2);
}
.wp-caption-text
{
	text-align: center;
}
@media screen and (min-width:950px)
{
	.column-main
	{
		padding-top:0; /* Remove the top padding. */
		float:left;
		width:60%;
	}
	.column-main.column-main-wide
	,body.service-admin .column-main
	,body.service-invitations .column-main
	,body.service-recipes .column-main
	,body.service-repository .column-main
	,body.service-documents .column-main
	,body.service-decision-aid .column-main
	,body#page-id-store-order-account .column-main
	,body#page-id-store-order-account-create .column-main
	,body#page-id-store-order-address .column-main
	,body#page-id-store-order-shipping .column-main
	,body#page-id-store-order-payment .column-main
	,body#page-id-store-order-review .column-main
	,body#page-id-store-order-complete .column-main
	{
		width:100%;
	}
	.column-secondary
	{
		padding-top:0; /* Remove the top padding. */
		float:left;
		padding-left:10%;
		width:40%;
	}
	.content .show-in-sidebar
	{
		position:absolute;
		right:-66%;
		max-width:50%;
	}
	/* Increase the negative right and left margins and the padding when the box is in the secondary column on a wide screen. */
	.column-secondary div.highlight
	{
		margin-right:-5%;
		margin-left:-5%;
		padding:.8em 5%;
		max-width:110%;
	}
	.column-secondary h2
	{
		margin-left:0; /* Remove outdent. */
	}
	/* Don't show anything in the sidebar on the search results page. */
	body.search-results .content .show-in-sidebar
	{
		position:relative;
		right:auto;
		max-width:100%;
	}
}
.form-footer
{
	background-color:rgb(var(--content-background-color));
}

/* MARK: Blog */

ol.post-list
{
	margin-left:0;
}
ol.post-list > li
{
	list-style-type:none;
}
ol.post-list .post-list-content h1
,ol.post-list .post-list-content h2
,ol.post-list .post-list-content h3
,ol.post-list .post-list-content h4
,ol.post-list .post-list-content h5
,ol.post-list .post-list-content h6
{
	margin-left:0;
}
.content time
,.content .comment-link
{
	font-size:.8em;
	color:rgb(var(--font-colour-soft));
}
.content .comment-link
{
	float:right;
	text-align:right;
}
ul.sidebar-blog
{
	margin-left:0;
}
ul.sidebar-blog > li
{
	list-style-type:none;
}
/* Override content.css */
.list-item-large .list-item-content
{
	background-image:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.7) 60%,rgba(255,255,255,.8));
	text-shadow:0 0 5px rgba(255,255,255,1);
}
.list-item-large .list-item-content:hover
{
	background-image:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(255,255,255,.9) 60%,rgba(255,255,255,.9));
}

/* MARK: Blog comments */

#comments article
{
	clear:both;
	margin:10px 0 -5px -5px; /* Negative bottom and left margins should match the border width of #comments li, and comments ul, below. */
	padding:10px;
	background-color:rgb(var(--comment-background-colour));
}
#comments #respond
{
	clear:both;
	margin:10px 0;
	padding:10px;
	background-color:rgb(var(--comment-background-colour));
}
#comments h1
,#comments h2
,#comments h3
,#comments h4
,#comments h5
,#comments h6
{
	margin-left:0;
}
/* First level */
#comments ul
,#comments ol
{
	margin-left:0;
}
/* Second level */
#comments li ul
,#comments li ol
{
	margin-left:15px;
	margin-bottom:-5px; /* Negative margin width should match the border width of #comments article, above, and comments li, below. */
}
#comments li
{
	margin-bottom:0;
	list-style-type:none;
	border-width:0 0 5px 5px; /* Border width should match the negative margin width of #comments article, and #comments ul, above. */
	border-style:solid;
	border-color:rgb(var(--comment-background-colour));
}
#comments h3
,#comments h4
{
	margin-bottom:0;
	padding-bottom:0;
}
#comments article h3
,#comments article h4
,#comments #respond h3
,#comments #respond h4
{
	margin-top:0;
}
#comments span.edit-link
{
	float:right;
}
#comments time
,#comments .comment-notes
,#comments .form-allowed-tags
{
	font-size:.8em;
}
#comments .comment-reply-link-container
{
	display:block;
	clear:left;
}
#comments .comment-form-author input
,#comments .comment-form-email input
,#comments .comment-form-url input
{
	display:block;
}
#comments textarea#comment
{
	width:100%;
}

@media print
{
	#comments #respond
	{
		display:none;
	}
}

/* MARK: Footer */

footer
{
	clear:both;
	padding:25px 0;
	
	color:rgb(var(--font-colour-normal-inverted));
	background-color:rgb(var(--header-footer-background-colour));
}
body.paper footer
{
	padding-left:0;
	padding-right:0;
	padding-bottom:0;

	color:rgb(var(--font-colour-print));
	background-color:transparent;
}
@media print
{
	footer
	{
		padding-left:0;
		padding-right:0;
		padding-bottom:0;
		
		color:rgb(var(--font-colour-print));
		background-color:transparent;
	}
}
footer:after
{
	content:"";
	display:block;
	clear:both;
}
footer a
,footer a:link
,footer a:visited
{
	color:rgb(var(--a-link-bright-colour));
	text-decoration:none;
	border-bottom-width:0;
}
.copy
{
	float:left;
}
a.footer-right
{
	display:block;
	float:right;
	padding:0;
	
	text-align:right;
}
a.eco
{
	padding-right:3.5em;
	width:10.5em;
	background:url("images/eco.png") top right no-repeat;
	background-size:contain;
}
@media print
{
	.copy
	{
		padding:0;
	}
	a.footer-right
	{
		padding:0;
		width:auto;

		color:rgb(var(--font-colour-print));
	}
}

/* MARK: Other */

.clear
{
	clear:both;
}
.alignleft
{
	float:left;
	margin-right:15px;
}
.alignright
{
	float:right;
	margin-left:15px;
}
.aligncenter
{
	clear:both;
	display:block;
	margin-left:auto;
	margin-right:auto;
}
p.alignleft
{
	float:none;
	text-align:left;
}
p.alignright
{
	float:none;
	text-align:right;
}
td.alignleft
,th.alignleft
{
	float:none;
	clear:none;
	display:table-cell;
	text-align:left;
	margin:0;
}
td.alignright
,th.alignright
{
	float:none;
	clear:none;
	display:table-cell;
	text-align:right;
	margin:0;
}
td.aligncenter
,th.aligncenter
{
	clear:none;
	display:table-cell;
	text-align:center;
	margin:0;
}
.not-available
{
	background-image:url("images/close.png");
}
.available
{
	background-image:url("images/ok.png");
}
.button.previous::before
,.button.next::after
,.button.print::after
,.button.email::after
,.button.send::after
,.button.delete::after
,.button.download::after
{
	display:inline-block;
	font-family:"Material Symbols Outlined";
	vertical-align:bottom;
	width:1em;

	opacity:0;
	transition:margin .2s, opacity .2s;
}
.button.previous::before
{
	content:"navigate_before";
	content:"\e408";
	text-align: left;
	margin-right:-1em;
}
.button.next::after
,.button.print::after
,.button.email::after
,.button.send::after
,.button.delete::after
,.button.download::after
{
	text-align: right;
	margin-left:-1em;
}
.button.next::after
{
	content:"navigate_next";
	content:"\e409";
}
.button.print::after
{
	content:"print";
	content:"\e8ad";
}
.button.email::after
{
	content:"mail";
	content:"\e158";
}
.button.send::after
{
	content:"send";
	content:"\e163";
}
.button.delete::after
{
	content:"delete";
	content:"\e872";
}
.button.download::after
{
	content:"download";
	content:"\f090";
	vertical-align:middle;
}
.button.previous:hover::before
,.button.next:hover::after
,.button.print:hover::after
,.button.email:hover::after
,.button.send:hover::after
,.button.delete:hover::after
,.button.download:hover::after
{
	opacity:1;
}
.button.previous:hover::before
{
	margin-right:2px;
	margin-left:-3px;
}
.button.next:hover::after
,.button.print:hover::after
,.button.email:hover::after
,.button.send:hover::after
,.button.delete:hover::after
,.button.download:hover::after
{
	margin-left:2px;
	margin-right:-3px;
}
.button.print:hover::after
,.button.email:hover::after
,.button.send:hover::after
,.button.delete:hover::after
,.button.download:hover::after
{
	margin-left:5px;
}

/*
Override and adjust styles in content.css, without having to make a new copy of that stylesheet.
*/
.menu-user
{
	background-color:rgb(var(--menu-user-background-color));
	border-color:rgb(var(--border-colour-inverted));

	color:rgb(var(--font-colour-normal-inverted));
}
.menu-user a
{
	color:rgb(var(--a-link-colour-inverted));
}
.menu-user a:visited
{
	color:rgb(var(--a-visited-colour-inverted));
}
.menu-user a:hover
,.menu-user a:visited:hover
{
	color:rgb(var(--a-hover-colour-inverted));
}
.list-sorting-options
{
	background-color:rgb(var(--input-background-colour)) !important;
}
.toggle::after
,.sortable span::after
{
	filter:invert(1); /* Turn the white image to black.*/
}
.pagination
{
	background-color:rgb(var(--highlight-background-colour)) !important;
}
.popup-dialogue h1
,.popup-dialogue h2
,.popup-dialogue h3
,.popup-dialogue h4
,.popup-dialogue h5
,.popup-dialogue h6
{
	color: rgb(var(--heading-colour));
}

/* MARK: Decision aid styles */

.zoom-level
{
	font-family:"Material Symbols Outlined";
	font-variation-settings:
		'FILL' 0
		,'wght' 400
		,'GRAD' 0
		,'opsz' 24;
}
.zoom-level .zoom-in
,.zoom-level .zoom-out
{
	display: inline-block;
	vertical-align: middle;
	margin:-.3em 0;
}
.zoom-level .zoom-out
{
	font-size:1.5em;
}
.zoom-level .zoom-in
{
	font-size:2em;
	font-variation-settings:
		'FILL' 0
		,'wght' 300
		,'GRAD' 0
		,'opsz' 24;
	margin-left:-2px;
}
.keyboard-key
{
	padding: 0px 5px 1px 5px;
	outline-style: solid;
	outline-width: 1px;
	outline-offset: -1px;
	outline-color:rgb(var(--font-colour-normal));
	border-radius: 4px;
	background-color:rgba(var(--font-colour-normal),.1);
}