/* Clik Site Standard */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, input, textarea, button, select,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}

html {
  box-sizing: border-box;
  height:100%;
  position:relative;
}
body { 
  -webkit-font-smoothing: antialiased;
  height:100%;
}

button, input[type=submit], input[type=button] {
  background-color: transparent;
}

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

p {
	margin-bottom: 1em;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
}

h1 {
  font-size: 1.8em;
  margin-bottom:0.625em;
}

h2 {
	font-size: 1.6em;
	margin-bottom:0.625em;
}

h3 {
	font-size: 1.4em;
	margin-bottom:0.714em;
}

h4 {
	font-size: 1.2em;
}

h4 {
  font-size: 1.1em;
}

b,strong {
  font-weight: bold;
}
i,em {
  font-style: italic;
}

img {
	display:block;
}

/* Use inner divs to stop a host of issues like margin expanding etc. Also needed in grid layouts
to expand content to fit. Apply .container div around the normal div.
 */
div.container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

div.container > * {
  position: relative;
  flex-grow: 1;
  height:100%;
  width:100%;
}

.clear:after, .clearfix:after {
  content: "";
  line-height:0px;
  font-size:0px;
  display: table;
  height: 0;
  clear: both;
}

/* common elements */

img {
  display:block;
}

div.clearing {
  clear: both;
  display: block;
  margin: 0;
  padding: 0;
  height: 0;
  line-height: 1px;
  font-size: 1px;
}

.clear {
  clear:both;
}

.print {
  display:none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

th,td {
  vertical-align:top;
}

th {
  font-weight: bold;
}

ol, ul {
  margin:1em 0;
  padding-left: 2em;
  text-indent:0px;
}

ul {
  list-style: disc;
}
ul ul  {
  list-style: circle;
}
ol  {
  list-style: decimal;
}
ol ol {
  list-style: lower-alpha;
}

a {
	text-decoration: none;
	color: inherit;
}

a:hover {
	text-decoration: none;
	color: inherit;
}

/* 

# Columns CSS

Style a standard layout with some pre-defined options

## Synopsis

*/

:root {
	--header-fixed: 0;
	--footer-fixed: 0;
	--headerpos: top; /* top|side */
	--menupos: static;/* static|fixed|slide|none   */
	--menu: open; /* open | close */
	--xcol: open; /* open | close */
	--framed: 0;
	--site-align:center;

	/* style vars */
	--menu-width:220px;
	--xcol-width:160px;
	--header-height: 60px;
	--site-width:960px;
	--footer-height:60px;
	--menu-anim-time:0.2s;

	/* adjustment vars 
	These either need setting explicitly or programatically with something like:

	let menuPad = window.getComputedStyle(document.querySelector('#menu')).paddingTop;
	document.body.style.setProperty('--menu-top-padding', menuPad);
	*/

	--menu-top-padding: 0px; /* Should be the same as the "top" padding of the menu container when set to sticky */
	--xcol-top-padding:0px ;/* Should be the same as the "top" padding of the xcol container when set to sticky */

	/* Individual components of "body" padding */
	--toptalbug:0;
	--site-right-padding: 0px;
	--site-top-padding: 0px;
	--site-bottom-padding: 0px;
	--site-left-padding: 0px;
}

body {
	container-name:body;
}

div:not(.grid):has( > .inner) {
	container-name:hasInner;
	--sticky: 0;
}

#header {
	grid-area:header;
	height: var(--header-height);
}

/* Body wrapper is required to allow padding between content and the edge of page */
#bodyWrapper {
	min-height:100%;
	padding: var(--site-top-padding) var(--site-right-padding)	var(--site-bottom-padding)	var(--site-left-padding);
}


#ubercontainer {
	min-height:100%;
	--grid-mode: rows;
}
#ubercontainer {
	--grid-template-rows: min-content auto min-content;
}

@container body ( style(--header-fixed:1) ) {
	#bodyWrapper  {
		padding-top:0;
	}
	#header {
		position: fixed;
		width:100%;
		top: var(--site-top-padding);
		left: 0;
		z-index: 100;
	}
	#ubercontainer {
		padding-top: calc( var(--header-height) + var(--site-top-padding) );
		--grid-mode: rows;
		min-height:100%;
	}
	#ubercontainer {
		--grid-template-rows: auto min-content;
	}
}

@container body ( style(--headerpos:side) ) {
	
	#header {
		position: fixed;
		width:var(--menu-width);
		left: 0;
		z-index: 100;
		height: 100vh;
	}
	
	#ubercontainer {
		--grid-mode: rows;
		min-height:100%;
	}

	#ubercontainer {
		--grid-template-rows: auto min-content;
	}

	#menu {
		display: none;
	}

	#nav {
		display: none;
	}


}

@container body ( style(--footer-fixed:1) ) {
	#bodyWrapper  {
		padding-bottom:0;
	}

	#footer {
		position: fixed;
		width:100%;
		bottom:  var(--site-bottom-padding) ;
		left: 0;
		z-index: 100;
	}

	#ubercontainer {
		padding-bottom: calc( var(--footer-height) + var(--site-bottom-padding) );
	}

	@container body ( style(--header-fixed:0) ) {
		#ubercontainer {
			--grid-mode: rows;
		}
		#ubercontainer {
			--grid-template-rows: min-content auto ;
		}
	}
	@container body ( style(--header-fixed:1) ) {
		#ubercontainer {
			--grid-mode: rows;
		}
		#ubercontainer {
			--grid-template-rows:  auto ;
		}
	}

}

@container body ( style( --menupos:slide) or style( --headerpos:side) ) {
	#bodyWrapper {
		padding-left: calc( var(--menu-width) + var(--site-left-padding) );
		/* This triggers on page load !!! See JS, we add it after load */
		/* transition : padding var(--menu-anim-time) ease-in-out;*/
	}
}


.spanning > .inner {
	margin: 0 auto;
	max-width: var(--site-width);
	width: 100%;
}

@container body ( style( --site-align:left) ) {
	.spanning > .inner  {
		margin: 0 auto 0 0;
	}
}

@container body ( style( --site-align:right) ) {
	.spanning > .inner  {
		margin: 0 0 0  auto;
	}
}

@container body ( style( --framed:1) ) {
	.spanning > .inner  {
		width: 100%;
	}
	#ubercontainer {
		max-width:calc( var(--site-width) - var(--site-left-padding) - var(--site-right-padding) );
		margin-left:auto;
		margin-right:auto;
	}
	@container body ( style( --site-align:left) ) {
		.framed {
			margin: 0 auto 0 0;
		}
	}
	@container body ( style( --site-align:right) ) {
		.framed {
			margin: 0 0 0 auto ;
		}
	}

	@container body ( style( --header-fixed:1 ) ) {
		#header {
			width: 100%;
			max-width:calc( var(--site-width) - var(--site-left-padding) - var(--site-right-padding) );
			left:auto;
			top: var(--site-top-padding);
		}
	}
	

	@container body ( style( --footer-fixed:1 ) ) {
		#footer {
			width: 100%;
			max-width:calc( var(--site-width) - var(--site-left-padding) - var(--site-right-padding) );
			left:auto;
			bottom: var(--site-bottom-padding);
		}
	}

}



#content {
	grid-area:content;
}
#bottomnav {
	grid-area:bottomnav;
}
#footer {
	grid-area:footer;
}
#footer_left {
	grid-area:footer_left;
}
#footer_middle {
	grid-area:footer_middle;
}
#footer_right {
	grid-area:footer_right;
}
#content_top {
	grid-area:content_top;
}
#content_wrap {
	grid-area:content_wrap;
}
#content_bottom {
	grid-area:content_bottom;
}
#menu {
	grid-area:menu;
	overflow: clip;
}
#maincol {
	grid-area:maincol;
	overflow: clip;
}
#xcol {
	grid-area:xcol;
	overflow: clip;
}


/** Have thought about some sort of generic setting here:
 * 
 *  Would need to get the top of the element + the top padding
 *  
 */

@container hasInner ( style( --sticky:1 ) ) {

	
	#xcol .inner {
		position:sticky;
		top: calc( (var(--header-fixed) * var(--header-height) ) + var(--xcol-top-padding, 4px) );
		z-index: 90;
	}

	#menu .inner {
		position:sticky;
		top: calc( (var(--header-fixed) * var(--header-height) ) + var(--menu-top-padding,4px) );
		z-index: 90;
	}


}

.show-hide {
	height:0 !important;
	visibility: hidden !important;
	border-width: 0 !important;
	margin:0 !important;
	padding:0 !important;
	overflow: hidden !important;
}


#content_main {
	--grid-mode: named;
}
#content_main {
	--grid-template-areas: "menu content_wrap";
	--grid-template-columns: var(--menu-width) auto;
	--grid-template-rows: auto;
}

@container body ( style(--headerpos:side) ) {
	
	#content_main {
		--grid-mode:none;
	}

}

#content {
	--grid-mode: rows;
	--grid-template-rows: min-content auto min-content;
}

#content_wrap {
	--grid-mode: named;
}
#content_wrap {
	--grid-template-areas: "maincol xcol";
	--grid-template-columns: auto var(--xcol-width) ;
	--grid-template-rows: auto;
	height:100%;
}


@container body ( style( --xcol:close ) ) {
	
	#xcol {
		display:none;
	}
	
	#content_wrap {
		--grid-mode: flex;
	}
	
}

#maincol {
	height:100%;
}

#maincol {
	--grid-mode: none;
	--grid-template-rows: min-content auto min-content;
}

#maincol_grid {
	--grid-mode: fixed;
	--grid-columns: 2;
}

#footer {
	height: var(--footer-height);
	--grid-mode: rows;
}
#footer {
	--grid-template-rows: min-content auto;
}


#footer_left {
	justify-self: start;
}

#footer_right {
	justify-self: end;
}

#footer_middle {
	justify-self: center;
}


#header {
	--grid-mode: rows;
}
#header {	
	--grid-template-rows:auto  min-content ;
}

#nav {
	--grid-mode: columns;
	--grid-template-columns: min-content 1fr min-content;
	--grid-gap: 0 8px ;
/*	--align-items: center;*/
}

#footer_main {
	--grid-mode: fixed;
}
#footer_main {
	--grid-columns: 3;
}

@media (max-width:800px) {
	
	#content_wrap {
		--grid-mode: flex;
		--flex-direction: column;
	}
	
	#maincol {
		height:auto;
	}

}

@media (max-width:600px) {

	body {
		--menu: close;
	}

	#content_main {
		--grid-mode: none;
		min-height: auto;
	}

	#content {
		--grid-mode: none;
	}

	#maincol {
		height:auto;
		--grid-mode: none;
	}

	#maincol_grid {
		--grid-mode: none;
	}

	#footer_main {
		--grid-mode: flex;
	}
	#footer_main {
		--flex-direction: column-reverse;
		--justify-content:start;
	}

	@container body ( style( --footer-fixed:0 ) ) {
		#footer {
			height: auto;
			--grid-mode: flex;
		}
		#footer {
			--flex-direction: column;
			--justify-content:start;
		}
	}
	
}

:is(#menubutton,#xcolbutton).state-open a .icon {
	transform: rotate(180deg);
}

@media (max-width:600px) {
	body {
		--menupos: slidedown;
		--menu:close;
	}
}


#menubutton, #hamburger, #menuclose {
	display: none;
}

@container body ( style( --menupos:fixed ) or style( --menupos:slide )  ) {
	#content_main {
		--grid-mode: none;
	}
	#menu {
		--height: fixed;/* WIP trying to animate thesee */ 
		position: fixed;
		top: calc(var(--header-fixed) * var(--header-height) );
		left: 0;
		height: calc( 100vh - (var(--header-fixed) * var(--header-height)) - (var(--footer-fixed) * var(--footer-height) ) );
		width: var(--menu-width);
		transition: transform var(--menu-anim-time) ease-in-out; /* Smooth transition */
	}
}	

@container body ( style( --menupos:fixed ) ) {
	
	#menu {
		left:  calc( ( -1 * var(--menu-width)) - 10px) ;
		top: 0;
		height: 100vh;
		z-index: 110;
	}

	#hamburger,  #menuclose {
		display: block;
	}

	#menuclose {
		position: absolute;
		top:12px;
		right:12px;
		z-index: 500;
	}

	body.menu-open #menu {
		transform: translateX( calc( ( var(--menu-width)) + 10px) );
	}

}

@container body ( style( --menupos:none ) ) { 
	#menu {
		display: none;
	}
	#content_main {
		--grid-mode: none;
	}
}


@container body ( style( --menupos:slide ) ) {
	body.menu-close #bodyWrapper {
		padding-left: 0;
	}

	body.menu-close #menu {
		transform: translateX( calc( ( -1 * var(--menu-width)) - 10px) );
	}

	#content .spanning > .inner {
		max-width: calc( var(--site-width) - var(--menu-width) );
		transition: max-width var(--menu-anim-time) ease-in-out;
	}

	body.menu-close #content .spanning > .inner {
		max-width:  var(--site-width) ;
	}

	@container body ( style( --footer-fixed:0 ) ) {
		#footer .spanning  > .inner {
			max-width: calc( var(--site-width) - var(--menu-width) );
			transition: max-width var(--menu-anim-time) ease-in-out;
		}
		body.menu-close #footer .spanning > .inner {
			max-width: calc( var(--site-width) - var(--menu-width) );
			transition: max-width var(--menu-anim-time) ease-in-out;
		}
	}

	@container body ( style( --header-fixed:0 ) ) {
		#header .spanning > .inner {
			max-width: calc( var(--site-width) - var(--menu-width) );
			transition: max-width var(--menu-anim-time) ease-in-out;
		}
		body.menu-close #header .spanning > .inner {
			max-width: calc( var(--site-width) - var(--menu-width) );
			transition: max-width var(--menu-anim-time) ease-in-out;
		}
	}
	
	#menubutton {
		display: block;
	}

}

@container body ( style( --menupos:slidedown ) ) {
	
	#menu {
		--height: auto;/* WIP trying to animate these */ 
	}

	#menubutton {
		display: block;
	}

	#menubutton.state-open a .icon {
		transform: rotate(90deg);
	}

	@container body ( style( --menu:close ) ) {
		#menu {
			height:0 !important;
			padding:0 !important;
			margin:0 !important;
			overflow: hidden;
		}
	}
	body.menu-close	#menu {
		height:0;
	}

	@container body ( style( --menu:open ) ) {
		#menu {
			position: static;
			height: auto;
			width: auto;
		}
	}
	
	body.menu-open #menu {
		position: static;
		height: auto;
		width: auto;
		/*	transform: translateY( -100% );
		transition: transform var(--menu-anim-time) ease-in-out; /* Smooth transition */
	}

}

/* 

Style "items" - DIVS with a title, an image and a text element

## Options

htop
: 1*|0 Place heading above image. When aligning left or right setting htop=0 puts the into the text column

texttop
: 1|0* Place text in its own column when aligning left and right. Has no affect with align center.

image-align
: center*|left|right Use a separate column for the image or wrap the text to the side (center leaves 1 column)

wrap
: 1|0* float the image and wrap text around it (align must be left or right). Note to use htop=0 for this you need an additional duplicate tag for the title in the textWrap - see the sample HTML

show-title
: 1*|0 show title 

show-image
: 1*|0 show image 

imagespace
: Leave space for the image even when there is none. Useful when you have multiple items in a list and some may or may not have images.
: Note for imagespace to work a class "noimage" has to be added to any items without images. Some tag must be left in even if there is no image. Easiest is just to leave the .imageWrap tag.

## List or classes

Note that the settings will inherit from a parent. You can apply the settings to a wrapping div element. Alternatively stick to giving each one a class.

## HTML

<div class="item">
	<div class="itemInner">
		<h3 class="title">Box title</h3>

		<div class="imageWrap">
			<!--- can just use img here --->
			<figure> 
				<img src="//d2033d905cppg6.cloudfront.net/tompeer/images/Graphic_111.jpg">
				<figcaption>An elephant at sunset</figcaption>
			</figure>
		</div>
				
		<div class="textWrap">
			<!-- Wrap title is an additional duplicate title placed into the textWrap if you need htop=0 with wrapping. It can be omitted -->
			<h3 class="title wraptitle">Box title</h3>
			<p>....</p>
	</div>
	</div>	
</div>

*/

:root {
	--htop:1;
	--texttop:0;
	--imagespace:0;
	--image-align:center;
	--wrap:0;
	--show-title:1;
	--show-image:1;
	--caption-display:none;
	--image-width: 40%;
	--item-gridgap: 10px;	
}

.item {
	container-name:item;
}

.imageWrap img {
	max-width: 100%;
	height: auto;
}

/* Wrap title is an additional duplicate title placed into the textWrap if you need htop=0 with wrapping */
.wraptitle {
	display: none;
}

.item .title {
	grid-area: title;
}
.item .textWrap {
	grid-area: textWrap;
}
.item .imageWrap {
	grid-area: imageWrap;
}

.textWrap > p {
	margin-top:0;
}

.itemInner {
	display: grid;
	grid-template-areas: "title" "imageWrap"  "textWrap";
	grid-gap: var(--item-gridgap);
	grid-template-rows: auto;
	grid-template-columns:   1fr;
}

.item figcaption {
	display: var(--caption-display);
}

.noimage figure {
	display: none;
}

.item:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
}


@container item ( style(--htop:0 ) ) {
	.itemInner {
		grid-template-areas:  "imageWrap" "title" "textWrap";
	}
}

@container item ( style(--htop:0 ) and ( style(--image-align:left ) or style(--image-align:right ) ) ) {
	.itemInner {
		grid-template-rows: min-content 1fr;
	}
}

@container item ( style(--image-align:left ) ) {
	.itemInner {
		grid-template-columns:  var(--image-width) auto;
	}

	@container item ( style(--texttop:0 ) ) {
		.itemInner {
			grid-template-areas:  "title title" "imageWrap  textWrap";
		}
		@container item ( style(--htop:0 ) ) {
			.itemInner {
				grid-template-areas:  "imageWrap title" "imageWrap textWrap";
			}
		}
	}
	@container item ( style(--texttop:1 ) ) {
		.itemInner {
			grid-template-areas:  "title textWrap" "imageWrap  textWrap";
		}
		@container item ( style(--htop:0 ) ) {
			.itemInner {
				grid-template-areas:  "imageWrap textWrap" "title  textWrap";
			}
		}
	}
	@container item ( style(--show-title:0 ) ) {
		.itemInner {
			grid-template-areas:  "imageWrap textWrap";
		}
	}
}

@container item ( style(--image-align:right ) ) {
	.itemInner {
		grid-template-columns: auto var(--image-width);
	}
	@container item ( style(--texttop:0 ) ) {
		.itemInner {
			grid-template-areas:  "title title" "textWrap imageWrap";
		}
		@container item ( style(--htop:0 ) ) {
			.itemInner {
				grid-template-areas:  "title imageWrap" "textWrap imageWrap";
			}
		}
	}
	@container item ( style(--texttop:1 ) ) {
		.itemInner {
			grid-template-areas:  "textWrap title" "textWrap imageWrap";
		}
		@container item ( style(--htop:0 ) ) {
			.itemInner {
				grid-template-areas:  "textWrap imageWrap" "textWrap title";
			}
		}
	}
	@container item ( style(--show-title:0 ) ) {
		.itemInner {
			grid-template-areas:  "textWrap imageWrap";
		}
	}
}

@container item ( style(--show-image:0 ) ) {
	.itemInner {
		grid-template-areas:  "title" "textWrap";
		grid-template-rows: min-content auto;
		grid-template-columns:   1fr;
	}
	.imageWrap {
		display: none;
	}
}


/* noimage class needs to be applied to item if there is no image. This is for removing
the space in a list of items with the same class */
@container item ( style(--imagespace:0 ) ) {
	/*	TODO: check these work. May need to appy to itemInner*/
	.itemInner.noimage {
		grid-template-areas:  "title" "textWrap";
		grid-template-rows: min-content auto;
		grid-template-columns:   1fr;
	}

	.itemInner.noimage .imageWrap {
		display: none;
	}

}

@container item ( style(--wrap:1 ) ) {
	
	.itemInner {
		display:block;
	}
	
	.imageWrap {
		width: var(--image-width);
	}

	/*	TODO: check these work. May need to appy to itemInner*/
	.itemInner.noimage .imageWrap {
		display: none;
	}

	@container item ( style(--image-align:left ) ) {
		.imageWrap {
			float: left;
			margin-right: var(--item-gridgap);
			margin-bottom: var(--item-gridgap);
		}
	}

	@container item ( style(--image-align:right ) ) {
		.imageWrap {
			float: right;
			margin-left: var(--item-gridgap);
			margin-bottom: var(--item-gridgap);
		}
	}

	@container item ( style(--htop:0 ) ) {
		.itemInner > .title {
			display: none;
		}
		.wraptitle {
			display: block;
		}
	}
	
}

@container item ( style(--show-title:0 ) ) {
	.title {
		display: none;
	}
}
/**
 * Not sure if this is really worth it. Could add the functionality to basic flexbox
 */
.breadcrumb {
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style: none;
    border-radius: .25rem; 
    padding:0px;
    margin:0px;
}

.breadcrumb-item+.breadcrumb-item {
    padding-left: .5rem;
}

.breadcrumb-item+.breadcrumb-item::before {
    display: inline-block;
    padding-right: .5rem;
    content: "/";
}.footnotes p span {
	display: inline-block;
	padding:0 4px 0 0;
}

#footnotes {
	margin-top: 0.5em;
	border-top:1px solid var(--bordercolor, #ccc);
	padding-top:0.5em;
}/* MENUS

Create a grid or flexbox menu from a ul

## Grid menus

The following "var classes" need to be applied IN ORDER (orientation sets align defaults)

orientation,mode,borders,align,stretch,submenualign

menu-orientation
: horizontal* | vertical

menu-mode
: grid|flex flex is default for horizontal

menu-borders
: normal|boxes|dividers border mode. Using boxes or dividers, adjusts borders to allow for justa single width value to be supplied.

menu-submenualign
: (menu-)top|bottom-left|right (default top-right) alignment of absolute position submenu. Relative to item unless prefixed with menu

menu-stretch
: 0|1*   Stretch flex menu

menu-align
: center left|center|right  Align text. Also for flex menus that don't stretch, align the whole menu.

### Other settings

--menu-submenu-position
: absolute* | relative  Sub menu rollover style or inline

submenu-display
: none*|block show sub menus: obvs need to be inline

## Notes

The a tags are actually set to display flex themselves in order to accomodate icons. To align the lext you have to set
the justify-content property.

# Highlights etc

Use the following selector

hover   li a:hover
hi      li.hi a
*/

:root {
	--link-color: #000;
	--menu-mode: flex;/* grid|flex */
	--menu-borders: normal; /* normal|boxes|dividers */
	--menu-orientation: horizontal;/* horizontal | vertical */
	--menu-submenualign: bottom-left; /* (top|bottom)-(left|right) */
	--menu-submenu-position: absolute; /* absolute | relative */
	--menu-submenu-show: hide; /* show|hide|hover using hover works quite well without need for JS, no animations though */
	--menu-stretch: 1; /* 1|0 */
	--menu-align: center;
	--menu-border-color:var(--link-color);
	--menu-background: transparent;
	--menu-gap: 4px;/* Gap between items */
	--menu-item-padding: 0 8px;
	--menu-item-border:0px;/* item border width MUST be single value for boxes or dividers */
	--menu-item-width: 140px; /* min width of menu items in grid layou */
	--menu-icon-display: none;/* none or block */
	--menu-label-display: block;/* text part of menu item:; none or block */
	--menu-icon-width:32px;/* normal menu icons */
	--menu-icon-height:32px;
	--menu-icon-valign: middle;/* WIP */
	--menu-icon-gap: 8px;/* gap between label and icon */
	--menu-icon-stretch: 1;/* stretch labels to fill remaining space */
	--menu-icon-align: row; /* flex direction for icon alignment */
	--menu-openicon-width:16px;/* "openicon" is the automatic icon applied for sub menus. Needs work */
	--menu-openicon-height:16px;
	--menu-openicon-adjust: -4px;
	--menu-text-align: center;/* alignment of text in menu items */
	--menu-anim-time: 0.3s;
	--menu-reverse: 0; /* reverse irection of flex menus */
	--menu-item-justify: center; /* item aligment start|center|end. Also see menu-text-align which usually needs setting as well */
	--menu-item-align: center; /* cross axis aligment, e.g. vertical when menu is horizontal */
	--menu-wrap: wrap;
	--menu-rollout: 0;
	--sub-menu-adjust:0px;/* add to positioning of sub menus */
}

.menu {
	container-name: menu;
	--menu-item-border-width: var(--menu-item-border); /* reserved for system. Used with e.g. boxes and dividers schemes */
	/* Individual v and h settings for sub menu adjustments */
	--sub-menu-adjust-v: var(--sub-menu-adjust);
	--sub-menu-adjust-h: var(--sub-menu-adjust);
}

/* BASE: grid defaults for mode:grid OR mode:flex (we apply same grid defaults for grid mode) */
/* Using two separate container queries for broader support instead of 'or' */
@container menu (style(--menu-mode: grid)) {
	ul, ul ul {
		list-style: none;
		margin: 0;
		padding-left: 0;
		text-indent: 0;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(var(--menu-item-width), 1fr));
		gap: var(--menu-gap);
		justify-content: var(--menu-item-justify);
		align-items: var(--menu-item-align);
		margin: 0 auto;
	}
}

@container menu (style(--menu-mode: flex)) {
	/* when using flex mode we still set sensible grid defaults for nested uls */
	ul, ul ul {
		list-style: none;
		margin: 0;
		padding-left: 0;
		text-indent: 0;
		/* For nested lists we keep grid layout unless overridden below */
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(var(--menu-item-width), 1fr));
		gap: var(--menu-gap);
		justify-content: var(--menu-item-justify);
		align-items: var(--menu-item-align);
		margin: 0 auto;
	}
}

/* ALIGN overrides */
@container menu (style(--menu-align: left)) {
	ul {
		margin-left: 0;
		--menu-item-justify: start;
		--menu-text-align: left;
	}
}

@container menu (style(--menu-align: right)) {
	ul {
		margin-right: 0;
		--menu-item-justify: end;
		--menu-text-align: right;
	}
}

/* FLEX-specific layout overrides */
@container menu (style(--menu-mode: flex)) {
	ul {
		display: flex;
		flex-direction: row;
		flex-wrap: var(--menu-wrap);
	}
}

/* FLEX reverse */
@container menu (style(--menu-mode: flex)) and (style(--menu-reverse: 1)) {
	ul {
		flex-direction: row-reverse;
	}
}

/* VERTICAL orientation: make items single column */
@container menu (style(--menu-orientation: vertical)) {
	ul {
		display: grid;
		grid-template-columns: 1fr;
		--menu-text-align: left;
		--menu-item-justify: start;
	}
}

/* Vertical + align:right */
@container menu (style(--menu-orientation: vertical)) and (style(--menu-align: right)) {
	ul {
		--menu-text-align: right;
		--menu-item-justify: end;
	}
}

/* Vertical + align:center */
@container menu (style(--menu-orientation: vertical)) and (style(--menu-align: center)) {
	ul {
		--menu-text-align: center;
		--menu-item-justify: center;
	}
}

/* Vertical + mode:flex: stack column */
@container menu (style(--menu-orientation: vertical)) and (style(--menu-mode: flex)) {
	ul {
		display: flex;
		flex-direction: column;
	}
}

/* Vertical + mode:flex + stretch */
@container menu (style(--menu-orientation: vertical)) and (style(--menu-mode: flex)) and (style(--menu-stretch: 1)) {
	ul {
		align-items: stretch;
	}
}

/* BORDERS: dividers */
@container menu (style(--menu-borders: dividers)) {
	ul {
		--menu-gap: 0px;
		--menu-item-border-width: 0 var(--menu-item-border) 0 0;
	}
	li:last-of-type {
		--menu-item-border-width: 0;
	}
}

/* BORDERS: dividers + vertical orientation */
@container menu (style(--menu-borders: dividers)) and (style(--menu-orientation: vertical)) {
	ul {
		--menu-item-border-width: 0 0 var(--menu-item-border) 0;
	}
}

/* BORDERS: boxes */
@container menu (style(--menu-borders: boxes)) {
	ul {
		--menu-gap: 0px;
		--menu-item-border-width: var(--menu-item-border) 0 var(--menu-item-border) var(--menu-item-border);
	}
	li:last-of-type {
		--menu-item-border-width: var(--menu-item-border);
	}
}

/* BORDERS: boxes + vertical orientation */
@container menu (style(--menu-borders: boxes)) and (style(--menu-orientation: vertical)) {
	ul {
		--menu-item-border-width: var(--menu-item-border) var(--menu-item-border) 0 var(--menu-item-border);
	}
}

.menu li {
	position: relative;
	flex-grow: var(--menu-stretch);
}

/* Stretch behaviour */
@container menu (style(--menu-stretch: 1)) {
	ul {
		width: 100%;
	}
}

.menu a, .menu a:hover {
	white-space: nowrap;
	color: var(--link-color);
	display: flex;
	flex-grow: 1;
	flex-direction: var(--menu-icon-align);
	align-items: center;
	justify-content: var(--menu-item-justify); /* This is the icon, label etc  */
	gap: var(--menu-icon-gap);
	text-decoration: none;
	padding: var(--menu-item-padding);
	border-width: var(--menu-item-border-width);
	border-style: solid;
	border-color: var(--menu-border-color);
	background-color: var(--menu-background);
	/* watch browser agent default. Can't apply to ul */
	text-align: var(--menu-text-align);
	transition: background-color var(--menu-anim-time) ease-in-out, border-color var(--menu-anim-time) ease-in-out, color .25s var(--menu-anim-time) ease-in-out;
}

/* Don't use flex mechanism if we're using access keys */
.menu a[accesskey] {
	display: inline-block;
}

/* Per class behaviour applied via JS. leave for now. */
.menu.open {
	height: auto;
}

/* Submenu basics */
.submenu {
	display: none;
	position: var(--menu-submenu-position);
	top: 0;
	left: 0;
	z-index: 100;
	min-width: 100%;
	height: auto;
	width: max-content;
}

/* show submenus all the time via setting */
@container menu (style(--menu-submenu-show: show)) {
	.submenu {
		display: block;
	}
}

/* orientation context for submenu elements: horizontal menus' submenus are vertical */
@container menu (style(--menu-orientation: horizontal)) {
	.submenu {
		--menu-orientation: vertical;
	}
}

/* position submenus relative to whole menu when using 'menu-*' submenualign variants */
@container menu (style(--menu-submenualign: menu-bottom-left)) or 
                (style(--menu-submenualign: menu-top-left)) or
                (style(--menu-submenualign: menu-top-right)) or
                (style(--menu-submenualign: menu-bottom-right)) {
	ul {
		position: relative;
	}
	.menu li {
		position: static;
	}
}

/* Submenu position absolute */
@container menu (style(--menu-submenu-position: absolute)) {
	.submenu {
		position: absolute;
	}
}

/* submenu align variants when absolute

DO NOT try to rationalise this. It doesn't work in Chrome never mind Safari

 */
@container menu (style(--menu-submenu-position: absolute)) and (style(--menu-submenualign: menu-top-left)) {
	.submenu {
		right: var(--sub-menu-adjust-h);
		top: 0;
	}
}
@container menu (style(--menu-submenu-position: absolute)) and (style(--menu-submenualign: top-left)) {
	.submenu {
		right: var(--sub-menu-adjust-h);
		top: 0;
	}
}

@container menu (style(--menu-submenu-position: absolute)) and (style(--menu-submenualign: menu-bottom-left)) {
    .submenu {
		right: 0;
		top: calc(100% + var(--sub-menu-adjust-v));
	}
}

@container menu (style(--menu-submenu-position: absolute)) and (style(--menu-submenualign: bottom-left)) {
	.submenu {
		right: 0;
		top: calc(100% + var(--sub-menu-adjust-v));
	}
}

@container menu (style(--menu-submenu-position: absolute)) and (style(--menu-submenualign: menu-top-right)) {
    .submenu {
		left: calc(100% + var(--sub-menu-adjust-v));
		top: 0;
	}
}

@container menu (style(--menu-submenu-position: absolute)) and (style(--menu-submenualign: top-right)) {
    .submenu {
		left: calc(100% + var(--sub-menu-adjust-v));
		top: 0;
	}
}

@container menu (style(--menu-submenu-position: absolute)) and (style(--menu-submenualign: menu-bottom-right)) {
    .submenu {
		left: calc(100% + var(--sub-menu-adjust-h));
		top: 100%;
	}
}

@container menu (style(--menu-submenu-position: absolute)) and (style(--menu-submenualign: bottom-right)) {
    .submenu {
		left: calc(100% + var(--sub-menu-adjust-h));
		top: 100%;
	}
}

/* Mechanism for showing via javascript */
li.open > .submenu, .submenu.show {
	display: block;
}

/* hover-style submenus */
@container menu (style(--menu-submenu-show: hover)) {
	li:hover > .submenu {
		display: block;
	}
}

.submenu > ul > li.open > .submenu {
	margin-top: 0px;
}

/* sub menu indicator */
.menu a > i[class*=icon].openicon {
	--menu-icon-height: var(--menu-openicon-height);
	--menu-icon-width: var(--menu-openicon-width);
	display: block;
	flex-grow: 0;
	position: relative;
	right: var(--menu-openicon-adjust, 0);
	max-height: 100%;
	top: 0;
	fill: var(--link-color);
	stroke: var(--link-color);
	transition-property: transform;
	transition-duration: 0.3s;
	transition-timing-function: ease-in-out;
}

/* menu icons

Requires icons.css and navbuttons.css

*/
.menu a > i[class*=icon] {
	display: var(--menu-icon-display);
	width: var(--menu-icon-width);
	height: var(--menu-icon-height);
	line-height: var(--menu-icon-height);
	font-size: var(--menu-icon-height);
	overflow: hidden;
}

.menu a span:not(.accessKey) {
	display: var(--menu-label-display);
}

.menu span.accessKey {
	display: inline;
	text-decoration: underline;
}

.menu li.open > a .openicon {
	transform: rotate(90deg);
}

/* Expand label to fill space */
.menu a > span:not(.accessKey) {
	flex-grow: var(--menu-icon-stretch);
}

/* rollout behaviour */
@container menu (style(--menu-rollout: 1)) {
	a span {
		visibility: hidden;
		overflow: hidden;
		position: absolute;
		top: 100%;
		left: 0;
		width: 0;
		transition: background-color var(--menu-anim-time) ease-in-out, border-color var(--menu-anim-time) ease-in-out, width var(--menu-anim-time) ease-in-out;
		align-items: center;
		justify-content: start;
	}

	a:hover span {
		width: var(--menu-item-width);
		box-sizing: content-box;
		display: flex;
		visibility: visible;
		height: var(--menu-icon-height);
		padding: var(--menu-item-padding);
		background-color: var(--menu-background);
	}
}

/* rollout + align:right */
@container menu (style(--menu-rollout: 1)) and (style(--menu-align: right)) {
	a span {
		left: auto;
		right: 0;
		bottom: auto;
		justify-content: end;
	}
}

/* rollout + vertical orientation + align:left */
@container menu (style(--menu-rollout: 1)) and (style(--menu-orientation: vertical)) and (style(--menu-align: left)) {
	a span {
		top: 0;
		left: 100%;
		bottom: auto;
	}
}

/* rollout + vertical orientation + align:right */
@container menu (style(--menu-rollout: 1)) and (style(--menu-orientation: vertical)) and (style(--menu-align: right)) {
	a span {
		top: 0;
		right: 100%;
		bottom: auto;
		left: auto;
	}
}
/* 

# Grids

Static CSS for grid and flex styling 

See /_notes/grids.md

## Quick Ref

HTML

<div class='grid'>
	<div class='gridInner'>
		any elements
	</div>
</div>


*/

/* If you don't already know, you want fit, columns, or flex. NB masonry required JS */
@property --grid-mode {
	syntax: 'none | fit | fill | fixed | fixedwidth | columns | rows | named | flex | masonry';
	inherits: false;
	initial-value: fit;
}
/* ALL OTHER PROPERTIES inherit and shuold be defined for every nested grid 

/* Gap between cells. One value or column gap, row gap */
@property --grid-gap {
	syntax: '*';
	inherits: false;
	initial-value: 0px;
}

/* Maximum width of cells when using fit|fill|fixedwidth */
@property --grid-width {
	syntax: '<length> | <percentage>';
	inherits: false;
	initial-value: 180px;
}

/*Number of columns when using mode=fixed. Actually what you want is mode=columns and set --grid-template-columns */
@property --grid-columns {
	syntax: '<integer>'; 
	inherits: false;
	initial-value: 3;
}

/* explicitly list heights of rows e.g. 120px auto 160px */
@property --grid-template-rows {
	syntax: '*';
	initial-value: auto;
	inherits: false;
}

/* explicitly list widths of columns e.g. 120px auto 160px */
@property --grid-template-columns {
	syntax: '*';
	inherits: false;
	initial-value: auto;
}

/* e.g. "header header" "menu main" "footer footer" */
@property --grid-template-areas {
	syntax: '*';
	inherits: false;
	initial-value: none;
}

@property --flex-direction {
	syntax: 'row | row-reverse | column | column-reverse'; 
	inherits: false;
	initial-value: row;
}

/* main axis alignment */
@property --justify-content {
	syntax: 'normal | start | end | center | space-between | space-around |  space-evenly'; 
	inherits: false;
	initial-value: normal;
}
/* alignment for multiple rows within their container (no, me neither: what you want is actually align-items) */
@property --align-content {
	syntax: 'normal | start | end | center | space-between | space-around |  space-evenly |  stretch'; 
	inherits: false;
	initial-value: normal;
}

/* this the vertical alignment you're after */
@property --align-items {
	syntax: 'normal | stretch | start | end | center '; 
	inherits: false;
	initial-value: normal;
}

/* the default for this 0 for mode=flex. This is applied explicitly below in a property query NB this does inherit, be careful  */
@property --flex-stretch {
	syntax: '<number>'; 
	inherits: false;
	initial-value: 1;
}

@property --flex-wrap {
	syntax: 'wrap | nowrap'; 
	inherits: false;
	initial-value: wrap;
}

@property --grid-max-height {
	syntax: '*'; 
	inherits: false;
	initial-value: 1fr;
}

.grid {
	container-name:grid;
	display: grid; /* need to get content to expand */
}

.grid.list {
	--grid-mode: none;
}

.grid > .gridInner {
	height:100%;
	min-height: 100%;
	align-self: stretch;
}

/* Note the inheritance from the container. This is all to cope with
grids within grids. We don't want the properties to cascade,
but we need them to apply to the "inner" div */
.gridInner {
	--grid-gap: inherit;
	--grid-width: inherit;
	--grid-columns: inherit;
	--grid-template-rows: inherit;
	--grid-template-columns: inherit;
	--grid-template-areas: inherit;
	--flex-direction: inherit;
	--justify-content: inherit;
	--align-content: inherit;
	--align-items: inherit;
	--flex-stretch: inherit;
	--flex-wrap: inherit;
	--grid-max-height: inherit;
	display:grid;
	grid-gap:var(--grid-gap);
	align-content: var(--align-content);
	align-items: var(--align-items);
	justify-content: var(--justify-content);
	grid-template-columns: var(--grid-template-columns);
	grid-template-rows: var(--grid-template-rows);
}

.gridInner > * {
	--flex-stretch: inherit;
	height: var(--grid-max-height);
	flex-grow: var(--flex-stretch);
}

@container grid ( style(--grid-mode:none) ) {
	.gridInner {
		display: block;
	}
}

@container grid ( style(--grid-mode:masonry) ) {
	.gridInner {
		display: block;
		opacity: 0;
		visibility: hidden;
		transition: opacity 160ms;
	}

	.gridInner.is-laidout {
		opacity: 1;
		visibility: visible;
	}

	.gridInner > * {
		--grid-width: inherit;
		--grid-gap: inherit;
		width: var(--grid-width);
		padding-right: var(--grid-gap);
		margin-bottom: var(--grid-gap);
	}

	.gridInner > .wide {
		width: calc( var(--grid-width) * 2 );
	}

}

@container grid ( style(--grid-mode:fit) ) {
	.gridInner {
		grid-template-columns: repeat(auto-fit, minmax(var(--grid-width),1fr));
	}

}

@container grid ( style(--grid-mode:fill) ) {
	.gridInner {
		grid-template-columns: repeat(auto-fill, minmax(var(--grid-width),1fr));
	}
}

@container grid ( style(--grid-mode:flex) ) {
	.gridInner {
		display: flex;
		flex-direction: var(--flex-direction);
		flex-wrap: var(--flex-wrap);
	}
}

@container grid ( style(--grid-mode:fixed) ) {
	.gridInner {
		grid-template-columns: repeat(var(--grid-columns), 1fr);
	}
}

@container grid ( style(--grid-mode:fixedwidth) ) {
	.gridInner {
		grid-template-columns:  repeat(auto-fit, var(--grid-width));
	}
}
/* See notes on mode=rows */
@container grid ( style(--grid-mode:rows) ) {
	.gridInner {
		grid-template-columns: 1fr;
	}
}

@container grid ( style(--grid-mode:named) ) {
	.gridInner {
		grid-template-areas: var(--grid-template-areas);
	}
}
/* Setting a name seems to cause issues when in other modes*/
@container grid ( not style(--grid-mode:named) ) {
	.gridInner > * {
		grid-area: unset !important;
	}
}
/* Standardised icon naming to allow swapping out of icon sets
To use an icon font, you'll need to include this page and a font specific page,
see e.g. fonts/google_icons.css

Font Awesome doesn't actually work...

With this in mind, maybe we could actually dispense with all this, just stick with the
google icons. Some of the names are a bit funny though.
*/

:root {
	--icon-close:'close';
	--icon-menu:'menu';
	--icon-previous:'chevron_left';
	--icon-next:'chevron_right';
	--icon-squares:'apps';
	--icon-fullscreen: "fullscreen";
	--icon-fullscreen_exit: "fullscreen_exit";
	--icon-first_page: "first_page";
	--icon-last_page: "last_page";
	--icon-help: "help";
	--icon-cart: "cart";
	--icon-done: "done";
	--icon-favorite: "favorite";
	--icon-home: "home";
	--icon-search: "search";
	--icon-account: "account";
	--icon-list: "list";
	--icon-sortasc: "[A-Z]";
	--icon-sort: "[sort]";
	--icon-sortdesc: "[Z-A]";
	--icon-grip: "||";
	--icon-info: "info";
	--icon-delete: "delete";
	--icon-credit_card: "credit_card";
	--icon-edit: "edit";
	--icon-add: "add";
	--icon-run: "run";
}

i[class*=icon] {
	font:var(--icon-font);
	font-weight: normal;
	font-style: normal;
	display: inline-block;
	text-transform: none;
}
.icon-close:before {
	content:var(--icon-close);
}
.icon-menu:before {
	content:var(--icon-menu);
}
.icon-previous:before {
	content:var(--icon-previous);
}
.icon-next:before {
	content:var(--icon-next);
}
.icon-squares:before {
	content:var(--icon-squares);
}
.icon-fullscreen:before {
	content:var(--icon-fullscreen);
}
.icon-fullscreen_exit:before {
	content:var(--icon-fullscreen_exit);
}
.icon-first_page:before {
	content:var(--icon-first_page);
}
.icon-last_page:before {
	content:var(--icon-last_page);
}
.icon-help:before {
	content:var(--icon-help);
}
.icon-cart:before {
	content:var(--icon-cart);
}
.icon-done:before {
	content:var(--icon-done);
}
.icon-favorite:before {
	content:var(--icon-favorite);
}
.icon-home:before {
	content:var(--icon-home);
}
.icon-search:before {
	content:var(--icon-search);
}
.icon-account:before {
	content:var(--icon-account);
}
.icon-list:before {
	content:var(--icon-list);
}
.icon-sortasc:before {
	content: var(--icon-sortasc);
}
.icon-sort:before {
	content: var(--icon-sort);
}
.icon-sortdesc:before {
	content: var(--icon-sortdesc);
}
.icon-grip:before {
	content: var(--icon-grip);
}
.icon-info:before {
	content: var(--icon-info);
}
.icon-grip:before {
	content: var(--icon-grip);
}
.icon-info:before {
	content: var(--icon-info);
}
.icon-delete:before {
	content: var(--icon-delete);
}
.icon-credit_card:before {
	content: var(--icon-credit_card);
}
.icon-edit:before {
	content: var(--icon-edit);
}
.icon-add:before {
	content: var(--icon-add);
}
.icon-run:before {
	content: var(--icon-run);
}
/*

# Usage

Styling should be applied to `.button` with hover state `.button:hover`

The label itself can also be styled with a selector of `.button label`.

E.g.

```
.scheme-button.button 
.scheme-button.button label
.scheme-button.button:hover label
```

## Notes

Buttons get complicated through the problem of <a> tags and inputs.

Both of these get styled through the browser defaults and reset.

To get around this and preserve inheritance, all buttons need to be wrapped in
another div with a class of .button which allows us to provide the consistency.

Styling should be applied to the .button element.

To assign icons we can use icons or svgs. For icons, always use our standard icon vars, see icons.css.

Either way the icon needs a class of "icon".

```css
<div class="button"><a href="#"><i class="icon icon-close"></i><label>Button text</label></a></div>

<div class="button"><input type="submit" value="">Button text
Button text</div>

<div class="button"><svg class="icon" viewBox="0 0 24 24"><use xlink:href="../images/combined.svg#cart" /><label>Button text</label></svg></div>
```

### Sizing 

There is no "width" for a whole button, only the icon. In common with much modern styling, widths
should be assigned by the containing div through grid or flexbox.

The buttons are inline-blocks, so always style the surrounding div with grid or flexbox to control
 the whitespace between them.

*/

:root {
	--icon-width: 32px; /* size of icon */
	--icon-height: var(--icon-width); /* size of icon */
	--label-gap: 10px;
	--label-display:1;
	--icon-display:1;
	--button-align:left; /* align icon left,center or right */
	--button-valign:center; /* icon valign csnter, start, or end */
	--link-color:inherit;
	--label-align:left;
	--stretch:0;/* expand text label */
	--popout: 0;
	--button-padding: 0px; /* single value padding MUST be used if adding padding to pop outs */
}

.button {
	container-name: button;
	display: inline-block;
	cursor: pointer;
	position: relative;
	color:var(--link-color);
	stroke:var(--link-color);
	fill:var(--link-color);
}

.button label {
	cursor: inherit;
}

.button input {
	width: 100%;
}

.button a, .button input {
	padding: var(--button-padding);
	display:flex;
	align-items: var(--button-valign);
  	flex-direction: row;
  	grid-gap:var(--label-gap);
}

.button a, .button a:hover, .button input {
	color:inherit;
	stroke: inherit;
	fill:inherit;
}

.button svg {
	width:100%;
	height:100%;
	display:block;
}

.button [class*="icon"] {
	display: block;
	width:var(--icon-width);
	height:var(--icon-height);
	line-height:var(--icon-height);
	font-size: var(--icon-height);
}

@container button ( style(--icon-display:0) ) {
	[class*="icon"] {
		display: none !important;
	}
}

@container button {
	label {
		display: block;
		line-height: var(--icon-height);
		text-align: var(--label-align);
		flex-grow: var(--stretch);
	}
}

@container button ( style(--label-display:0) ) {
	.button  label {
		display:none;
	}
}

/** See auto button functionality */
.button > a:not(:first-child) {
    display: none;
}

@container button ( style(--button-align:right) ) {

	.button a {
		flex-direction: row-reverse;
	}

}

@container button ( style(--button-align: center) ) {

	.button a {
		flex-direction: column;
	}

}

@container button ( style(--popout:1) ) {

	a {
		display: block;
		position: relative;
		width: var(--icon-width);
		--popoutwidth: 200px;
	}

	label {
		line-height: calc( var(--icon-height) + var(--button-padding) * 2 );
		visibility: hidden;
		position: absolute;
		width: 0;
		padding: 0 12px 0 0;
		overflow: hidden;
		top: 0;
		height:  calc( var(--icon-height) + var(--button-padding) * 2 );
		left:calc(var(--icon-width) + var(--button-padding));
		transition: width 0.3s ease-in-out;
		white-space: nowrap;
	}

	a:hover label {
		visibility: visible;
		width:var(--popoutwidth);/* can't be auto. doesn't animate */
	}

	@container button ( style(--button-align:right) ) {
		
		label {
			left:unset;
			right:0;
		}

	}

}

.button a .icon {
	transition: transform 0.5s ease-in;
}

.button.rotate.state-open a .icon {
	transform: rotate(90deg);
}

.button.flip.state-open a .icon {
	transform: rotate(180deg);
}:root {
	--bordercolor: #eee;
}

.cs-imagegrid, .cs-image {
	--image-max-height: auto;
  	--image-max-width: 100%;
  	--object-fit: scale-down;
  	--align-frame:center;/* align items within frame */
	--justify-frame:start;/* justify content within frame */
	--align-caption:center;/* align caption */
	--justify-caption:start;/* justify  caption */
	--image-grow:0;/* expand image to frame */
	--frame-flex-direction:column; /* image on top of caption (can reverse) */
	--transition-time:1s;/* time for rollover transition */
	--object-position-x: center;
	--object-position-y: center;
}

.cs-imagegrid.masonry, .cs-imagegrid.justifiedGallery {
	--grid-mode:none;
}
.cs-imagegrid.masonry > .grid, .cs-imagegrid.justifiedGallery > .grid {
	display: block;
	height: auto;
}

.cs-imagegrid.masonry .frame, .cs-imagegrid.carousel .frame {
	width:var(--grid-width);
}

.cs-grid .flickity-page-dots {
	height: auto;
}

.cs-imagegrid:not(.justifiedGallery) .frame:not(.flickity-cell ) {
	position: relative;
}

.cs-imagegrid:not(.justifiedGallery)  .frame {
	display: flex;
	flex-direction: var(--frame-flex-direction);
	align-items: var(--align-frame);
	justify-content: var(--justify-frame);
}

.cs-imagegrid:.flickity-enabled  .frame {
	margin-right: var(--grid-gap);
}

.cs-imagegrid:not(.justifiedGallery) .frame img {
	display: block;
	width: 100%;
	height:100%;
	object-fit: var(--object-fit);
}

.cs-imagegrid:not(.justifiedGallery) .image {
	height: var(--image-max-height);
	width: var(--image-max-width);
	flex-grow: var(--image-grow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: var(--justify-frame);
	align-items: var(--align-frame);
}

.cs-imagegrid .caption {
	display: flex;
	flex-direction: column;
	align-items: var(--align-caption);
	justify-content: var(--justify-caption);
	transition:opacity var(--transition-time);
}

.cs-imagegrid .frame:hover .caption {
	opacity: 1 !important;
}

.cs-image {
	overflow: hidden;
	min-width: 0;
	min-height: 0;
}

.cs-image figure {
	display: flex;
	max-height:100%;
	flex-direction: column;
}

.cs-image img {
	object-fit:var(--object-fit);
	flex-grow:1;
	max-width: 100%;
	max-height:100%;
	height:auto;
}

.cs-image.fixedheight figure  {
	width: 100%;
	height:100%;
}

.cs-image.fixedheight img {
	object-fit:var(--object-fit);
	object-position: var(--object-position-x) var(--object-position-y);
}

.popup {
	position: fixed;
	padding:20px;
	top:0;
	left:0;
	background-color: rgba(255,255,255,1);
	width: 100vw;
	height: 100vh;
	display: none;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	z-index: 110;
}

.popup .button {
	position: fixed;
	top:6px;
	right:6px;
	--icon-width:12px;
	--icon-height:12px;
}

.popup img {
	margin:0 auto;
	box-shadow: 10px 10px 15px -4px rgba(0,0,0,0.72);
}

.popup .button:hover {
	stroke:#ff00ff;
	fill:#ff00ff;
	color:#ff00ff;
}

.closeButton.button {
	--label-display:none;
}

.nextButton.button{
	top:40%;
	--button-align:flex-start; 
	--button-direction: row-reverse;
	right:60x;
}

.previousButton.button{
	right:unset;
	top:40%;
	left:60x;
}

.popup_image {
	width: 100%;
	height: 100%;
}
/*

main       
item      .frame
image     .image
caption   .caption			
 */


@container grid ( style(--caption-position:top) ) {
	@container grid ( style(--justify-frame:end) ) {
		.image {
			margin-top:auto;
			margin-bottom:0;
		}
	}
	@container grid ( not style(--justify-frame:center) ) {
		.frame {
			--image-grow:1;
		}
	}

	.frame {
		--frame-flex-direction:column-reverse;
	}
} 

@container grid ( style(--caption-position:bottom) ) {
	@container grid ( style(--justify-frame:end) ) {
		.image {
			margin-top:0;
			margin-bottom:auto;
		}
	}
	@container grid ( not style(--justify-frame:center) ) {
		.frame {
			--image-grow:1;
		}
	}
} 
			
@container grid ( style(--caption-position:under) or style(--caption-position:above) ) {
	.frame {
		--image-grow:0;
	}
	.image {
		margin:0;
	}

}

@container grid ( style(--caption-position:above) ) {
	.frame {
		--frame-flex-direction: column-reverse;
	}
}

@container grid ( style(--caption-position:overlay) ) {
	.frame {
		--justify-frame:start;
		--justify-caption:center;
	}
	.caption {
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

}		
/**
 * Use grid column to solve the problem of styling definition lists where
 * there may or may not be multiple definintions for a single term
 *
 * @dl-gap  dimensionlist  [4px 8px]  Grip gap for definition lists
 * @term-width  columnwidth [max-content] Width of first column. Apply dimension or percentage if whole list has a width
 */
:root {
  --dl-gap: 4px 8px ;
  --term-width: max-content;
}
dl {
  display: grid;
  grid-template-columns: var(--term-width) 1fr;
  gap: var(--dl-gap);
  margin-bottom:1rem;
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
}/** Markdown style admonitions
 * 
 *  This is a var'd up version of the standard  ones from Flexmark. Needs some work
 *   
 **/

:root {
     --admon-icon-color: #448AFF;
    --admon-border-color: #e0edff;
    --admon-bg-color: #EDF4FF;
}

.adm-note {
    --admon-icon-color: #448AFF;
    --admon-border-color: #e0edff;
    --admon-bg-color: #EDF4FF;
}

.adm-abstract {
    --admon-icon-color: #48C4FF;
    --admon-border-color: #dbf3ff;
    --admon-bg-color: #E8F7FF;
}

.adm-bug {
    --admon-bg-color: #FEE7EE;
   --admon-icon-color: #F50057;
    --admon-border-color: #fcd9e4;
}

.adm-danger {
    --admon-bg-color: #FFE9ED;
    --admon-icon-color: #FE1744;
    --admon-border-color: #ffd9e0;
}

.adm-example {
    --admon-bg-color: #EFEBFF;
    --admon-icon-color: #7940ff;
    --admon-border-color: #e0d9ff;
}

.adm-fail {
    --admon-bg-color: #FFEEEE;
    --admon-icon-color: #Fe5e5e;
    --admon-border-color: #ffe3e3;
}

.adm-faq {
    --admon-bg-color: #EEFAE8;
    --admon-icon-color: #5ED116;
    --admon-border-color: #e6fadc;
}

.adm-info {
    --admon-bg-color: #E8F7FA;
    --admon-icon-color: #00B8D4;
    --admon-border-color: #dcf5fa;
}

.adm-note {
    --admon-bg-color: #EDF4FF;
    --admon-icon-color: #448AFF;
    --admon-border-color: #e0edff;
}

.adm-quote {
    --admon-bg-color: #F4F4F4;
    --admon-icon-color: #9E9E9E;
    --admon-border-color: #e8e8e8;
}

.adm-success {
    --admon-bg-color: #E9F8EE;
    --admon-icon-color: #1DCD63;
    --admon-border-color: #dcf7e5;
}

.adm-tip {
    --admon-bg-color: #E9F9F6;
    --admon-icon-color: #01BFA5;
    --admon-border-color: #dcf7f2;
}

.adm-warning {
    --admon-bg-color: #FEF3E8;
    --admon-icon-color: #FF9001;
    --admon-border-color: #Fef3e8;
}






.adm-hidden {
    display: none;
}

.adm-block {
   
    display: block;
    width: 99%;
    border-radius: 6px;
    padding-left: 10px;
    margin-bottom: 1em;
    border: 1px solid #ebebeb;
    border-bottom-color: #bfbfbf;
    border-left-color: var(--admon-icon-color);
    border-left-width: 4px;
    box-shadow: 2px 2px 6px #cdcdcd;
}

.adm-heading {
    color: var(--admon-icon-color);
    border-bottom-color: var(--admon-border-color);
    background: var(--admon-bg-color);
    display: block;
    font-weight: bold;
    font-size: 0.9em;
    height: 1.8em;
    padding-top: 0.3em;
    padding-bottom: 2em;
    border-bottom: solid 1px;
    padding-left: 10px;
    margin-left: -10px;
}

.adm-icon {
    height: 1.6em;
    width: 1.6em;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.25em;
    margin-left: -0.25em;
}

.adm-heading > span {
    color: initial;
}

.adm-body {
    display: block;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
    margin-left: 1.5em;
    margin-right: 1.5em;
}


/*

*/
.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0)}.select2-hidden-accessible{border:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-top:5px;margin-right:10px;padding:1px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline{float:right}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid black 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:transparent;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option[role=group]{padding:0}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999}.select2-container--default .select2-results__option[aria-selected=true]{background-color:#ddd}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#5897fb;color:white}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top, #fff 50%, #eee 100%);background-image:-o-linear-gradient(top, #fff 50%, #eee 100%);background-image:linear-gradient(to bottom, #fff 50%, #eee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-right:10px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:-webkit-linear-gradient(top, #eee 50%, #ccc 100%);background-image:-o-linear-gradient(top, #eee 50%, #ccc 100%);background-image:linear-gradient(to bottom, #eee 50%, #ccc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:transparent;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:-webkit-linear-gradient(top, #fff 0%, #eee 50%);background-image:-o-linear-gradient(top, #fff 0%, #eee 50%);background-image:linear-gradient(to bottom, #fff 0%, #eee 50%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:-webkit-linear-gradient(top, #eee 50%, #fff 100%);background-image:-o-linear-gradient(top, #eee 50%, #fff 100%);background-image:linear-gradient(to bottom, #eee 50%, #fff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)}.select2-container--classic .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0}.select2-container--classic .select2-selection--multiple:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{color:#888;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{float:right;margin-left:5px;margin-right:auto}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid #5897fb}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option[role=group]{padding:0}.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey}.select2-container--classic .select2-results__option--highlighted[aria-selected]{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:#5897fb}
/*

# Table styling

Most styling is done using standard CSS properties applied to tr, th, or td. Only the padding and border settings, which can be difficult, have parameters.

## Borders

Adjust the following for the main table, th, and td and they **should** work.

```
--table-border-width:0px;
--table-border-style:solid;
--table-border-color:initial;
```

## Padding

Adjust the following for the main table and optionally th if different.

```
--table-cell-padding: 2px;
```

## Fonts etc

Use standard CSS properties applied to tr, th, or td.

The default for th is bold, centered.

# Backgrounds 

--table-background: transparent
--table-stripe-bg: var(--table-background)

## Notes

We can't use border collapse to do any sort of sensible table styling

We need to do it the usual way of adjusting border widths for rows and columns

NB Note that if you want to adjust the border widths for td/th you do it by just adjusting the
vars for that scope e.g.

```css
table.info td, table.info th {
	--table-border-color:#c3c3c3;
}
```

## Adjusting columns or rows

Use numeric column values to adjust styling if you can't set a class (e.g. coming from Markdown)

```
table.info tr td:nth-of-type(3) {
	font-weight:bold;
	text-align:left;	
}
```

### First and last rows

Use

`table.info tr td:first-of-type` and `table.info tr td:last-of-type`

## Stripes

There is one more var, --table-stripe-bg, for striped rows.

You can also use `tr:nth-child(odd|even)`

## To do

1. Better mechanism for first and last column paddings? (not a priority).

*/

:root {
	--table-border-width:0px;
	--table-border-style:solid;
	--table-border-color:initial;
	--table-cell-padding:0;
	--table-text-align:inherit;
	--table-vertical-align: top;
	--table-background: transparent;
	--table-stripe-bg: var(--table-background);
	--table-sticky: block;/* sticky || block */
	--table-sticky-top:0;
}

th {
	font-weight:bold;
	--table-text-align:center;
}

table {
	border-width: var(--table-border-width);
	border-style: var(--table-border-style);
	border-color: var(--table-border-color);
	border-collapse: separate;
	width: auto;/* will override leagcy table width= settings */
	margin: 1em 0;
}

th, td  {
	border-width: var(--table-border-width);
	border-style: var(--table-border-style);
	border-color: var(--table-border-color);
	text-align: var(--table-text-align);
	padding: var(--table-cell-padding);
	vertical-align:var(--table-vertical-align);
}

/* legacy styling needed for markdown tables */
th[align="center"], td[align="center"] {
	--table-text-align:center;
}

th[align="right"], td[align="right"] {
	--table-text-align:right;
}

tbody tr {
	background-color: var(--table-background);
}

tbody tr:nth-of-type(2n) {
	background-color: var(--table-stripe-bg);
}

thead {
	z-index: 990;
}

tbody {
	z-index: 100;
}

thead tr th {
	border-top-width: 0;
}

tfoot  th {
	border-bottom-width: 0;
}
/* tables have to have body for effective styling */
tbody  tr {
	border-top-width: 0;
}

td, th {
	border-left-width: 0px;
}

td {
	border-top-width: 0px;
}

tr td:last-of-type, tr th:last-of-type {
	border-right-width:0;
}

tbody  tr:last-of-type td {
	border-bottom-width: 0;
}
/* NB recordlist, am_table deprecated */
table:where(.info,.reverse,.recordlist,.am_table) {
	--table-border-width:1px;
	--table-border-style:solid;
	--table-border-color:var(--border-color, black);
	--table-cell-padding:2px;
}

table.info {
	--table-border-width: 1px;
	--table-cell-padding: 2px;
	--table-margin:0 0 1em 0;
	--table-sticky:sticky;
}

table.stripy {
	--table-stripe-bg: #d3d3d3;
}

table.reverse th {
	background-color: var(--panelbg, black);	
	color: var(--paneltext, white);
}

table.sticky {
  position:relative;
}

table.sticky th {
  position: sticky;
  top: 0;
}

table {
  position:relative;
}

thead {
  position: var(--table-sticky);
  top: var(--table-sticky-top);
}

table.nohead thead {
    display: none;
}

:root {
	--border-color:gray;
	--form-label-width: 160px;
	--form-label-gap: 20px;
	--form-row-gap: 0px;
	--field-checkbox-width:16px;
	--form-display:grid;
	--field-border-color: var(--border-color);
	--form-stripe-background-color: transparent;
	--row-padding: 4px;
	--field-padding: 4px;
	--field-border-width: 1px;
	--field-border-radius: 0px;
	--field-background-color: transparent;
	--checkbox-field-display: grid;/* turn on uniform replace with 'block' */
	--checkbox-display: inline-block;/* turn on uniform replace with 'none' */
	--checkbox-replace-display: none;/* turn on uniform replace with 'inline-block' */
	--checkbox-label-display: inline-block;/* turn on uniform replace with 'flex' */
}

body.media-mid {
	--form-row-gap: 8px;
	--form-label-gap: 8px;
}

div.uniform {
	--checkbox-field-display: block;/* turn on uniform replace with 'block' */
	--checkbox-display: none;/* turn on uniform replace with 'none' */
	--checkbox-replace-display:  inline-block;
	--checkbox-label-display: flex;
	--field-checkbox-width:auto;
}

div.fieldrow, div.fieldButtons {
	display:var(--form-display);
	grid-template-columns: var(--form-label-width) auto;
	margin-bottom: var(--form-row-gap);
	grid-gap: var(--form-label-gap);
	padding: var(--row-padding);
}

div.fieldrow, div.fieldButtons {
	grid-template-areas: "label field";
}

body.media-mid div.fieldrow, body.media-mid div.fieldButtons {
	grid-template-columns: 1fr;
	grid-template-areas: "label" "field";
}

div.fieldrow.search {
	grid-template-columns: var(--form-label-width) 26% auto;
	grid-template-areas: "label search field";
}

body.media-mid div.fieldrow.search {
	grid-template-columns: 33% auto;
	grid-template-areas: "label label"  "search field";
}

body.media-mobile div.fieldrow.search {
	grid-template-columns: 1fr;
	grid-template-areas: "label" "search" "field";
}

div.fieldrow:nth-of-type(2n) {
    background-color: var(--form-stripe-background-color);
}

div.fieldrow .error {
	grid-area:error;
}

div.fieldrow.error {
	grid-template-areas: "label field" "label error";
}

.fieldrow > .fieldLabel , .fieldrow > .fieldSpacer {
	grid-area:label;
	display: flex;
	width: 100%;
}

.fieldrow > .fieldLabel label {
	flex-grow: 1;
}

.fieldLabel  {
	--icon-width:1em;
	--icon-height:1em;
}

.fieldrow > .field, .fieldrow > .buttons {
	grid-area:field;
}
.fieldrow > .field.search {
	grid-area:search;
}


.fieldrow .field + label {
	text-align: left;	
}

/** Don't understand this.
 *  Possible vestigial.  
 */
.field:not(.field_boolean) input, .field select
 {
 	width: 100%;
}

.fieldrow input:not([type='checkbox']):not([type='radio']):not([type='search']), 
.fieldrow textarea, .field textarea,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple   {
	padding:var(--field-padding);
	border:var(--field-border-width) solid var(--field-border-color);
	background-color: var(--field-background-color);
	border-radius: var(--field-border-radius);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1;
	padding-left: 0px;
    padding-right: 0px;
    padding:var(--field-padding);
}

.field_boolean, .buttons {
	justify-self: flex-start;
}

div.fieldLabel {
	padding:4px;
}

.field.checkbox, .field.radio {
	display: var(--checkbox-field-display);
	align-items: center;
	grid-template-columns: var(--field-checkbox-width) auto ;
	grid-row-gap: 2px;
	grid-gap: 2px;
}


/* checkbox replace 
--checkbox-display: none;
--checkbox-label-display:flex;
--checkbox-replace-display:inline-block;
*/ 

input[type="checkbox"],  input[type="radio"]  {
	display:var(--checkbox-display);
}

input[type="checkbox"] + label, input[type="radio"] + label {
	display: var(--checkbox-label-display);
	align-items: center;	
}

input[type="checkbox"] + label:before, input[type="radio"] + label:before {
    display:var(--checkbox-replace-display);
    width:18px;
    height:18px;
    margin:-1px 4px 0px 0;
    padding:0 0 4px 0;
    vertical-align:middle;
    cursor:pointer;
    content:"";
    background:url(/_assets/images/forms/square.svg) left center no-repeat;
    background-size: contain;
}

input[type="checkbox"]:checked + label:before {
  	background-image:url(/_assets/images/forms/square-check.svg);
}
input[type="radio"] + label:before {
	background-image:url(/_assets/images/forms/circle.svg);
}
input[type="radio"]:checked + label:before {
	background-image:url(/_assets/images/forms/circle-check.svg);
}
/* Deprecated. All new versions to use text.css. To be removed when FOEC site is checked.
*/
:root {
	--text-color:initial;
	--text-font: initial;
	--font-size:100%;
	--title-font:inherit;
	--title-font-weight:bold;
	--title-color:inherit;
	--title-font-align: inherit;
	--title-font-size:inherit;

	/* Headings are the cross headers inside text items (see .textWrap) 
	usually we want headings to be the title font but sometimes
	we want something different. The sizes here only apply to these. 
	All sizes applied to titles are done by assigning a font size to the content section (for titles)
	or the cs title panel for e.g. general content sections */
	
	--heading-font: inherit;
	--heading-font-weight:inherit;
	--heading-color:inherit;
	--heading-font-align: inherit;
	--heading-font-size:inherit;

	--heading-margin:0;
	--heading-padding:0;
	--link-color:inherit;

}

body {
	font-family: var(--text-font);
	font-size: var(--font-size);
	color: var(--text-color);
}

/* Need the hover to override reset.css value */
a, a:hover {
	color:var(--link-color);
}

.cs-title, .title {
	font-family: var(--title-font);
	font-weight:  var(--title-font-weight);
	text-align: var(--title-font-align);
	color:  var(--title-color);
	font-size: var(--title-font-size);
}

.cs-title h1, .cs-title h2, .cs-title h3, .cs-title h4, .cs-title h5, .cs-title h6,
.title h1, .title h2, .title h3, .title h4, .title h5, .title h6 {
	font-family: inherit;
	font-weight:  inherit;
	text-align: inherit;
	color:  inherit;
	font-size: inherit;
}

.cs-title a, .cs-title a:hover {
	color:inherit;
}

.cs-text, .textWrap {
	color: var(--text-color);
}

.title h1, .cs-title h1,.title h2, .cs-title h2 ,.title h3, .cs-title h3 ,.title h4, .cs-title h4 ,.title h5, .cs-title h5 ,.title h6, .cs-title h6  {
	margin: 0;
	padding: 0;
	font-family:  inherit;
	font-weight:   inherit;
	text-align:   inherit;
	color:   inherit;
	font-size:   inherit;
}

h1, h2, h3, h4, h5, h6 {
	margin: var(--heading-margin);
	font-family:  var(--heading-font);
	font-weight:  var(--heading-font-weight);
	text-align: var(--heading-font-align);
	color:  var(--heading-color);
	font-size: var(--heading-font-size);
}

/* TEMP fix for wrapped anchor tags coming from flexmark */
h1 a,h1 a:hover, h2 a,h2 a:hover, h3 a,h3 a:hover, h4 a,h4 a:hover, h5 a,h5 a:hover, h6 a, h6 a:hover {
	color:inherit;
	text-decoration: inherit;
	font-size: inherit;
}


/* Standard Class styling */

/* 1. Headings within text items */

.textWrap, .cs-text {
	--heading-font: var(--title-font);
	--heading-margin: 0 0 0.2em 0;
}

.textWrap h1, .cs-text  h1 {
	--heading-font-size: 140%;
}
.textWrap h2, .cs-text  h2 {
	--heading-font-size: 120%;
}
.textWrap h3, .cs-text  h3 {
	--heading-font-size: 110%;
}
.textWrap h4, .cs-text  h4, .textWrap h5, .cs-text  h5, .textWrap h6, .cs-text  h6 {
	--heading-font-size: 140;
}


/*

# Table styling

Most styling is done using standard CSS properties applied to tr, th, or td. Only the padding and border settings, which can be difficult, have parameters.

## Borders

Adjust the following for the main table, th, and td and they **should** work.

```
--table-border-width:0px;
--table-border-style:solid;
--table-border-color:initial;
```

## Padding

Adjust the following for the main table and optionally th if different.

```
--table-cell-padding: 2px;
```

## Fonts etc

Use standard CSS properties applied to tr, th, or td.

The default for th is bold, centered.

# Backgrounds 

--table-background: transparent
--table-stripe-bg: var(--table-background)

## Notes

We can't use border collapse to do any sort of sensible table styling

We need to do it the usual way of adjusting border widths for rows and columns

NB Note that if you want to adjust the border widths for td/th you do it by just adjusting the
vars for that scope e.g.

```css
table.info td, table.info th {
	--table-border-color:#c3c3c3;
}
```

## Adjusting columns or rows

Use numeric column values to adjust styling if you can't set a class (e.g. coming from Markdown)

```
table.info tr td:nth-of-type(3) {
	font-weight:bold;
	text-align:left;	
}
```

### First and last rows

Use

`table.info tr td:first-of-type` and `table.info tr td:last-of-type`

## Stripes

There is one more var, --table-stripe-bg, for striped rows.

You can also use `tr:nth-child(odd|even)`

## To do

1. Better mechanism for first and last column paddings? (not a priority).

*/

:root {
	--table-border-width:0px;
	--table-border-style:solid;
	--table-border-color:initial;
	--table-cell-padding:0;
	--table-text-align:inherit;
	--table-vertical-align: top;
	--table-background: transparent;
	--table-stripe-bg: var(--table-background);
	--table-sticky: block;/* sticky || block */
	--table-sticky-top:0;
}

th {
	font-weight:bold;
	--table-text-align:center;
}

table {
	border-width: var(--table-border-width);
	border-style: var(--table-border-style);
	border-color: var(--table-border-color);
	border-collapse: separate;
	width: auto;/* will override leagcy table width= settings */
	margin: 1em 0;
}

th, td  {
	border-width: var(--table-border-width);
	border-style: var(--table-border-style);
	border-color: var(--table-border-color);
	text-align: var(--table-text-align);
	padding: var(--table-cell-padding);
	vertical-align:var(--table-vertical-align);
}

/* legacy styling needed for markdown tables */
th[align="center"], td[align="center"] {
	--table-text-align:center;
}

th[align="right"], td[align="right"] {
	--table-text-align:right;
}

tbody tr {
	background-color: var(--table-background);
}

tbody tr:nth-of-type(2n) {
	background-color: var(--table-stripe-bg);
}

thead {
	z-index: 990;
}

tbody {
	z-index: 100;
}

thead tr th {
	border-top-width: 0;
}

tfoot  th {
	border-bottom-width: 0;
}
/* tables have to have body for effective styling */
tbody  tr {
	border-top-width: 0;
}

td, th {
	border-left-width: 0px;
}

td {
	border-top-width: 0px;
}

tr td:last-of-type, tr th:last-of-type {
	border-right-width:0;
}

tbody  tr:last-of-type td {
	border-bottom-width: 0;
}
/* NB recordlist, am_table deprecated */
table:where(.info,.reverse,.recordlist,.am_table) {
	--table-border-width:1px;
	--table-border-style:solid;
	--table-border-color:var(--border-color, black);
	--table-cell-padding:2px;
}

table.info {
	--table-border-width: 1px;
	--table-cell-padding: 2px;
	--table-margin:0 0 1em 0;
	--table-sticky:sticky;
}

table.stripy {
	--table-stripe-bg: #d3d3d3;
}

table.reverse th {
	background-color: var(--panelbg, black);	
	color: var(--paneltext, white);
}

table.sticky {
  position:relative;
}

table.sticky th {
  position: sticky;
  top: 0;
}

table {
  position:relative;
}

thead {
  position: var(--table-sticky);
  top: var(--table-sticky-top);
}

table.nohead thead {
    display: none;
}

/*

# Tabs styling

NB Propbably broken by deprecated of CSS settings styff

MUST DO: container styling version of the styling applied by tabs here.

*/

:root {
	--dark-color: #ccc;
	--lightcolor:#e4e4e4;
	--border-color:#ffffff;
}

.cs-tabs {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	grid-gap:0; /* Applying a grid gap seems to work in some browsers */
	--vertical: false;
	--accordian: false;
	--fixedheight: true;
	--fitheight: false;
	--menuAnimationTime: 300;
	--allowClosed: false;
	--tab-padding:8px 14px;
	--tab-font-size:inherit;
	--tab-font-weight:inherit;
	--tab-font:inherit;
	--tab-background:var(--lightcolor);
	--tab-border-width:1px;
	--tab-border-color:var(--border-color);
	--tab-border-radius: 8px 6px;
	--tab-width:160px;
	--tab-first-inset:6px;
}
.cs-tabs .tab:not(.state_open) .title {
	--tab-background:var(--dark-color);
}
.cs-tabs .tab .title:hover {
	--tab-background:var(--lightcolor);
}

.cs-tabs.vertical {
	flex-direction: column;
	grid-gap:0; /* Applying a grid gap seems to work in some browsers */
	/*align-items: center;*/
}

.cs-tabs.vertical .title {
	width:var(--tab-width);
}
.cs-tabs.vertical .item {
	left:var(--tab-width);
	top:0;
}

.cs-tabs.accordian {
	display: block;
}

.cs-tabs .title {
	cursor:pointer;
	font-size: var(--tab-font-size);
	font-weight: var(--tab-font-weight);
	font-family: var(--tab-font);
	padding:var(--tab-padding);
	border-style:solid;
	border-width:var(--tab-border-width);
	border-color:var(--tab-border-color);
	position: relative;
	z-index: 200;
	background: var(--tab-background);
}

.cs-tabs:not(.vertical, .accordian) .title {
	margin-left:-1px;
	margin-bottom:-1px;
	border-top-left-radius: var(--tab-border-radius);
	border-top-right-radius: var(--tab-border-radius);
}

.cs-tabs.vertical .title, .cs-tabs.accordian .title {
	border-top-width: 0;
}

.cs-tabs.vertical .tab:first-of-type .title, .cs-tabs.accordian .tab:first-of-type .title {
	border-top-width: var(--tab-border-width);
}

.cs-tabs:not(.vertical, .accordian) .tab:first-of-type .title {
	margin-left:var(--tab-first-inset);
} 

.cs-tabs .state_open .title { 
	border-bottom-color: transparent;
	background: var(--tab-background);
} 

.cs-tabs .item {
	visibility: hidden;
	height:0;
	position:absolute;
	left:0;
	border-style:solid;
	border-width:var(--tab-border-width);
	border-color:var(--tab-border-color);
	background: var(--tab-background);
	overflow: hidden;
	padding: var(--tab-padding);
	font-size: var(--tab-font-size);
	font-weight: var(--tab-font-weight);
	font-family: var(--tab-font);
}

.cs-tabs .state_open .item {
	visibility: visible;
	height: auto;
	display: block;
}

.cs-tabs.accordian .item {
	position:static;
	height: 0;
	display: none;
}

.cs-tabs.accordian .state_open .item {
	height: auto;
	display: block;
}

.cs-tabs.accordian .title {
	margin-left:0px;
}

/*.modal .cs-tabs .item {
	z-index: 1001;
}*/
/*!
 * justifiedGallery - v3.8.1
 * http://miromannino.github.io/Justified-Gallery/
 * Copyright (c) 2020 Miro Mannino
 * Licensed under the MIT license.
 */
.justified-gallery {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.justified-gallery > a,
.justified-gallery > div,
.justified-gallery > figure {
  position: absolute;
  display: inline-block;
  overflow: hidden;
  /* background: #888888; To have gray placeholders while the gallery is loading with waitThumbnailsLoad = false */
  filter: "alpha(opacity=10)";
  opacity: 0.1;
  margin: 0;
  padding: 0;
}
.justified-gallery img, .justified-gallery svg {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 0;
  border: none;
  filter: "alpha(opacity=0)";
  opacity: 0;
}
.justified-gallery .jg-caption {
  display: none;
  position: absolute;
  bottom: 0;
  padding: 5px;
  background-color: #000000;
  left: 0;
  right: 0;
  margin: 0;
  color: white;
  font-size: 12px;
  font-weight: 300;
  font-family: sans-serif;
}
.justified-gallery .jg-caption-visible {
  display: initial;
  filter: "alpha(opacity=70)";
  opacity: 0.7;
  -webkit-transition: opacity 500ms ease-in;
  -moz-transition: opacity 500ms ease-in;
  -o-transition: opacity 500ms ease-in;
  transition: opacity 500ms ease-in;
}
.justified-gallery > .jg-entry-visible {
  filter: "alpha(opacity=100)";
  opacity: 1;
  background: none;
}
.justified-gallery > .jg-entry-visible img,
.justified-gallery > .jg-entry-visible svg {
  filter: "alpha(opacity=100)";
  opacity: 1;
  -webkit-transition: opacity 500ms ease-in;
  -moz-transition: opacity 500ms ease-in;
  -o-transition: opacity 500ms ease-in;
  transition: opacity 500ms ease-in;
}
.justified-gallery > .jg-filtered {
  display: none;
}
.justified-gallery > .jg-spinner {
  position: absolute;
  bottom: 0;
  margin-left: -24px;
  padding: 10px 0 10px 0;
  left: 50%;
  filter: "alpha(opacity=100)";
  opacity: 1;
  overflow: initial;
}
.justified-gallery > .jg-spinner > span {
  display: inline-block;
  filter: "alpha(opacity=0)";
  opacity: 0;
  width: 8px;
  height: 8px;
  margin: 0 4px 0 4px;
  background-color: #000;
  border-radius: 6px;
}
/* "modal" mode, shows backdrop, overlays other content  */
@property --modal {
	syntax: '<number>'; 
	inherits: false;
	initial-value: 0;
}

/* Animate opening - only useful for pulldowns */
@property --animate {
	syntax: '<number>'; 
	inherits: false;
	initial-value: 0;
}

/* Time of animation */
@property --animationTime {
	syntax: '<number>'; 
	inherits: false;
	initial-value: 600;
}

/* Popup is draggable */
@property --draggable {
	syntax: '<number>'; 
	inherits: false;
	initial-value: 0;
}

/* Allow scrolling of content in popup */
@property --scroll {
	syntax: '<number>'; 
	inherits: false;
	initial-value: 1;
}

/* Popup is pulldown menu relative to data-parent */
@property --pulldown {
	syntax: '<number>'; 
	inherits: false;
	initial-value: 0;
}

/* "my" Position of pulldown */
@property --positionMy {
	syntax: '*'; 
	inherits: false;
	initial-value: right top+1
}

/* "at" Position of pulldown */
@property --positionAt {
	syntax: '*';
	inherits: false;
	initial-value: right bottom;
}

/** Width of pull down menus: auto or parent  */
@property --width {
	syntax: '*';
	inherits: false;
	initial-value: parent;
}



:root {
	--panel-bg: black;
	--panel-text: white;
	--border-color: black;
}

.modal {
	border:1px solid var(--border-color); 
	display: none;
	position: fixed;
	background-color: white;
}

.modal:not(.pulldown) {
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:660px;
	height: 400px;
	max-width: 100vw;
}

.modal.pulldown {
	overflow: hidden;
	--pulldown: 1;
	top:0;
	right:0;
}

.modal  .wrapper {
	overflow: hidden;
	position: relative;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.modal  .content {
	padding:4px;
	flex-grow: 1;
	overflow: clip;
}

.modal .closebutton {
	padding:2px;
	--icon-height:24px;
	--icon-width:24px;
	--label-display:0;
	position: absolute;
	top:2px;
	right:2px;
}

.modal .hasTitle .closebutton {

}

.modal.open {
	display: block;
}

.modal-backdrop {
	display: none; /* hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width:100vw;
	height:100vh;
    background: rgba(0, 0, 0, 0.3); /* semi-transparent black */
    z-index: 999; /* should be below modal’s z-index (your modal uses 1000) */
    cursor: pointer; /* optional - makes it clear it’s clickable */
}

.modal .title {
	padding:4px;
	background-color: var(--panel-bg);
	color: var(--panel-text);
	font-weight:bold;
	font-size:1.2em;
}

.modal.hasTitle .closebutton {
	color: var(--panel-text);
}.fade-in-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    will-change: opacity, transform;
}

.fade-in-scroll.fade-in-visible {
    opacity: 1;
    transform: translateY(0);
}