* {
	margin  : 0;
	padding : 0;
	outline : none;
}

:focus-visible {
	color      : var(--focus-text);
	background : var(--focus-background);
}

/*
	Force a vertical scrollbar so content doesn't shift horizontally
	when moving between short and long pages.
 */
html#DOL {
	overflow-y : scroll;
}

body {
	background-color : var(--main-background);
	color            : var(--main-text);
	font-family      : 'Merriweather Sans', Verdana, sans-serif;
	font-size        : 16px;
	line-height      : 1.6;
	visibility       : hidden;
}

h1, h2, h3 {
	font-family : 'Merriweather', serif;
	margin      : 0 0 0.25em 0;
	font-weight : normal;
	line-height : 1.2;
	color       : var(--main-headline);
	clear       : left;
}

h1 {
	font-size : 240%;
}

h2 {
	font-size : 175%;
}

h3 {
	font-size : 125%;
}

h1.receipt-headline {
	color : var(--receipt-headline);
}

a {
	color           : var(--link-text);
	text-decoration : none;
	outline         : 0;
}

a:hover {
	color           : var(--link-text);
	text-decoration : underline;
}

a.highlight {
	color : var(--highlight-link-text);
}

a.highlight:hover {
	color : var(--highlight-link-hover);
}

a.detail-link {
	font-size : 80%;
}

a.underline {
	text-decoration : underline;
}

a.underline:hover {
	color : var(--link-hover);
}

p {
	margin-bottom : 1em;
}

p.code,
span.code {
	font-family : monospace, monospace;
	font-size   : 90%;
}

p.code {
	white-space : pre;
	padding     : 0.5em;
}

span.code {
	display : inline-block;
	padding : 0 0.25em;
}

.print-only {
	display : none;
}

ul, ol {
	margin-left   : 2em;
	margin-bottom : 1em;
}

li {
	margin-bottom : 0.5em;
}

hr {
	margin : 2em 5em;
}

mark {
	background-color : transparent;
	color            : var(--contrast-main);
	font-weight      : bold;
}

pre {
	font-size : 15px !important;
}

/*
	====================================================================
	ODD STUFF FOR THE T&C PAGE
	====================================================================
 */

div.tc-wrapper {
	counter-reset : section;
	margin-bottom : 2em;
}

div.tc-wrapper a {
	text-decoration : underline;
}

div.tc-wrapper h2.tc-section:before {
	counter-increment : section;
	content           : counters(section, '.') '. ';
}

div.tc-wrapper ol {
	counter-reset : bonsai;
	list-style    : none;
	margin-top    : 1em;
}

div.tc-wrapper ol li {
	counter-increment : bonsai;
	display           : block;
	margin-left       : 1em;
}

div.tc-wrapper ol li::before {
	content       : counters(section, '.') '.' counters(bonsai, '.') ' ';
	font-weight   : bold;
	float         : left;
	padding-right : 1em;
	margin-left   : -3em;
}


/*
	T&C END
 */

blockquote {
	quotes     : "\201C" "\201D" "\201C" "\201D";
	position   : relative;
	padding    : 2em 2em 1em 3em;
	font-style : italic;
}

blockquote:before {
	content     : open-quote;
	float       : left;
	font-size   : 3em;
	margin-left : -0.7em;
	margin-top  : -0.4em;
}

img.rounded {
	border-radius : 5px;
}

/*
===========================================================
	UNIVERSAL MODIFIERS
===========================================================
 */

.centred-text {
	text-align : center;
}

.warning,
.content-warning {
	color : var(--warning);
}

.highlight {
	color            : var(--highlight-text);
	background-color : var(--highlight-background);
	border-radius    : 3px;
	padding-left     : 2px;
	padding-right    : 2px;
}

.required {
	color : var(--required) !important;
}

.disabled {
	color : var(--disabled) !important;
}

::selection {
	background-color : var(--selection-background);
	color            : var(--selection-text);
}

.small-print {
	font-size : 90%;
}

.larger-text {
    font-size : 115%;
    font-weight : bold;
    margin-bottom: 0.5em;
}

/*
===========================================================
	WARNING BLOCK
===========================================================
 */
div.warning {
	display          : block;
	text-align       : center;
	background-color : var(--warning-background);
	padding          : 0.5em 1em;
	border           : 1px solid var(--warning);
	border-radius    : 10px;
	margin           : 0 auto 10px;
}

div.warning.left {
	text-align : left;
}

div.warning p:last-child {
	margin : 0;
}

/*
===========================================================
	NOTIFICATION BLOCK
===========================================================
 */
div.notification {
	display          : block;
	text-align       : center;
	background-color : var(--notification-background);
	padding          : 0.5em 1em;
	border           : 1px solid var(--notification);
	border-radius    : 10px;
	margin           : 0 auto 10px;
}

div.notification.left {
	text-align : left;
}

div.notification p:last-child {
	margin : 0.5em 0;
}

/*
===========================================================
	SUMMARY/DETAIL BLOCK - DEFAULT
===========================================================
 */
details {
	padding      : 0.5em;
	margin-left  : 2em;
	margin-right : 2em;
	transition   : height 1s ease;
	clear        : left;
}

details > summary {
	padding : .25em;
	/*font-size : 110%;*/
}

details > summary:hover {
	cursor           : pointer;
	background-color : var(--table-hover);
}

details[open] {
	font-weight : normal;
	font-size   : 100%;
	color       : var(--main-text);
	height      : fit-content;
}

/* remove the hover style when the details section is open */
div.listing-container details.listing[open] > summary > div.listing:hover {
	background-color : var(--main-background);
}

details[open] > summary {
	padding       : .25em;
	border-radius : 10px;
	color         : var(--main-headline);
}

div.detail-content.listing {
	border-top : none !important;
}

div.detail-content.listing {
	border-top    : none !important;
	margin-bottom : 0 !important;
}

div.detail-content {
	background-color : var(--main-background);
	color            : var(--main-text);
	border-radius    : 10px;
	font-size        : 100%;
	padding          : 1em 1em 0.5em 1em;
}

div.detail-content a {
	text-decoration : underline;
	color           : var(--main-headline);
}

/*
	BUTTON VARIANT
 */
details.button {
	margin-left   : 0;
	border-radius : 10px;
}

details.button > summary.button {
	color            : var(--detail-button-text);
	background-color : var(--detail-button-background);
	padding          : .25em 0.5em;
	/*font-size        : 125%;*/
	border-radius    : 5px;
	width            : fit-content;
	float            : left;
	margin-bottom    : 1em;
	transition       : background-color 0.5s ease;
}

details.button > summary.button:hover {
	color            : var(--detail-button-hover-text);
	background-color : var(--detail-button-hover-background);
	transition       : background-color 0.5s ease;
}

details.button > summary::marker {
	content : ''; /* remove the marker */
}

/*
===========================================================================
	SUMMARY/DETAIL BLOCK - LISTINGS
===========================================================================
 */

summary.listing {
	margin  : 0 !important;
	padding : 0;
}

details.listing {
	margin  : 0;
	padding : 0;
}


details.listing > summary {
	list-style    : none;
	border-radius : 0;
	padding       : 0;
}

details.listing [open] > summary.listing {
	border-radius : 0;
}

details.listing [open] > summary > div.listing {
	background    : red;
	border-bottom : 1px solid var(--main-background) !important;
}

div.listing-container details.listing summary.listing div.listing {
	border-bottom : 1px solid var(--main-background);
	margin-bottom : 0 !important;
}

div.detail-content.listing {
	color         : var(--main-text);
	border-radius : 0;
	font-size     : 100%;
	padding       : 0;
}

div.detail-content.listing:hover {
	background-color : var(--main-background);
}

/*
===========================================================
	STRUCTURAL DIVS
===========================================================
 */

div#header {
	position      : fixed;
	top           : 0;
	width         : 100%;
	height        : 90px;
	background    : var(--header-background);
	z-index       : 888;
	border-bottom : 3px solid var(--main-border);
	padding-top   : 5px;
	overflow      : hidden;
	/* USE FOR DEBUG ONLY */
	/*display       : none;*/
}


div#header h1,
div#header h2 {
	text-align : center;
}

div#header span#site-banner {
	display     : block;
	font-family : 'Merriweather', serif;
	text-align  : center;
	font-size   : 175%;
	margin      : 20px 0 15px 0;
	color       : var(--main-headline);
}

div#header-content {
	max-width : 750px;
	margin    : 0 auto;
	overflow  : auto;
}

div#header div#header-content img {
	display : block;
	margin  : 10px auto;
}

div#header a,
div#header a:hover {
    display         : block;
    text-decoration : none;
    background      : transparent;
    margin          : 0;
    padding         : 0;
    overflow        : hidden;
}
div#header .user-controls a,
div#header .user-controls a:hover {
    display         : inline-block;
    margin          : 0 0 0 1em;
}
.account-link{
    font-family : 'Merriweather', serif;
    font-weight: 700;
}

div#header img.extra-logo {
	display : none;
}

div#header a img {
	position : fixed;
	left     : 0;
	margin   : 0;
	padding  : 0;
	z-index  : 1000;
}

div#header div.user-controls,
div#header div.admin-feedback {
	display    : block;
	float      : right;
	padding    : 0 0.25em 0.5em;
	margin-top : 0;
	text-align : right;
	clear      : none;
}

@media only screen and (max-width : 600px) {
	div#header div.user-controls span {
		display : none;
	}
}

div#header div.user-controls a,
div#header div.admin-feedback a {
	text-decoration : underline;
}

/* BANNER AS STRAP */
div#header-strap {
	position      : fixed;
	top           : 98px;
	width         : 100%;
	background    : var(--main-headline);
	text-align    : center;
	border-bottom : 3px solid var(--main-border);
}

div#header-strap h2 {
	font-size : 24px;
	display   : inline-block;
	margin    : 5px;
	color     : var(--main-background);
}

/* =============================================================================
	THEME CHANGE ICONS
 */
div#header a#light-theme-icon {
	/*
	The default theme is light, if no other signal has selected another,
	so this one starts out hidden.
	 */
	display          : none;
	width            : 24px;
	height           : 24px;
	float            : right;
	/*margin-top       : 5px;*/
	margin-right     : 5px;
	background-image : var(--theme-light-icon);
	background-size  : cover;
	overflow         : hidden;
	text-indent      : 9999px;
	cursor           : pointer;
}

div#header a#dark-theme-icon {
	display          : block;
	width            : 24px;
	height           : 24px;
	float            : right;
	/*margin-top       : 5px;*/
	margin-right     : 5px;
	background-image : var(--theme-dark-icon);
	background-size  : cover;
	overflow         : hidden;
	text-indent      : 9999px;
	cursor           : pointer;
}

@media only screen and (max-width : 1440px) {
	div#header h1 {
		display : none;
	}

	div#header span#site-banner {
		display : none;
	}

	div#header div.user-controls {
		padding-right : 0.25em;
	}
}

/* =============================================================================
	Footer is pushed to the bottom of short pages by the min-height
	rule in div#content
 */
div#footer {
	font-size        : 80%;
	/*text-align       : center;*/
	width            : 100%;
	padding          : 10px 0;
	margin-top       : 1em;
	border-top       : 1px solid var(--main-border);
	background-color : var(--footer-background);
	color: var(--footer-text);
}

div#footer.fixedfooter {
	position : fixed;
	bottom   : 0;
}

div#footer p {
	clear:both;
	margin-bottom : 0;
}

div#footer p.footer-links {
	border:1px solid red;
	margin-bottom : 1em;
}

div#footer ul {
	float:left;
	list-style: none;
	/*border:1px solid red;*/
	/*margin-top : 0.5em;*/
	/*margin-bottom : 0.5em;*/
	margin: 0.5em 4em;
}

.footer-feedback {
	font-size : 90%;
	text-align:center;
}

/*
===============================================================================
	FAT FOOTER - design change April 2025
===============================================================================
*/
div#footer-container {
	display               : grid;
	grid-template-columns : 1fr 1fr 1fr;
	column-gap            : 1em;
	row-gap               : 1em;
	margin-bottom         : 1em;
}

div.footer-column {
	display:flex;
	/*align-items: center !important;*/
	/*background:darkblue;*/
}

div.footer-column img#footer-logo {
	margin: 2em auto;
	width: 150px;
	height: 58px;
}

div.footer-column ul {
	margin-left: 0;
}

@media only screen and (max-width : 900px) {
	div.footer-container {
		grid-template-columns : 1fr 1fr;
	}

	div.footer-column.logo {
		display:none;
	}
}

@media only screen and (max-width : 600px) {
	div#feature-cards {
		grid-template-columns : 1fr 1fr;
	}
	/*div#footer-container {*/
	/*	grid-template-columns : 1fr 1fr;*/
	/*}*/
}

@media only screen and (max-width : 400px) {
	div#feature-cards {
		grid-template-columns : 1fr;
	}

	div#footer-container {
		grid-template-columns : 1fr ;
	}
}

/*
===========================================================
	CONTENT WRAPPERS
===========================================================
 */

div#content {
	max-width   : 1000px;
	margin      : 0 auto;
	overflow    : auto;
	padding-top : 125px;
	min-height  : calc(100vh - 356px);
}

@media only screen and (max-width : 1000px) {
	div#content {
		padding-left  : 0.5em;
		padding-right : 0.5em;
	}
}

/*
	Different value here so the smaller admin footer still reaches the bottom
	of the page. The class is added ni the DOlAdminPage constructor.
 */
div#content.admin {
	min-height : calc(100vh - 198px);
}

#editor-content {
	max-width : 600px;
	margin    : 0 auto;
	overflow  : auto;
	padding   : 2em;
}

div#page {
	max-width   : 750px;
	margin      : 0 auto;
	padding-top : 150px;
	overflow    : auto;
}

div#wide {
	max-width   : 1000px;
	margin      : 0 auto;
	padding-top : 150px;
	overflow    : auto;
}

/*
===========================================================
	MESSAGE BOX
===========================================================
 */
div#messagebox {
	color            : var(--messagebox-text);
	background-color : var(--messagebox-background);
	width            : 30em;
	margin           : 10% auto 2em;
	padding          : 2em;
	border           : 1px solid var(--messagebox-border);
	border-radius    : 10px;
	text-align       : left;
	box-shadow       : 10px 10px 10px var(--messagebox-shadow);
}

div#messagebox h1 {
	color          : var(--messagebox-title);
	text-align     : left;
	font-size      : 24px;
	border-bottom  : 1px solid var(--messagebox-border);
	padding-bottom : 0.5em;
	margin-bottom  : 0.5em;
	margin-top     : 0;
}

div#messagebox p {
	font-size     : 18px;
	margin-bottom : 20px;
}

div#messagebox form,
div#messagebox button {
	margin : 0;
}

@media only screen and (max-width : 750px) {
	div#messagebox {
		width  : 60%;
		margin : 50px auto;
	}
}

/*
===============================================================================
	LIST NAVIGATION
===============================================================================
*/
div.pagination-links {
	width         : 100%;
	text-align    : center;
	padding-top   : 1em;
	margin-bottom : 1em;
}

div.pagination-links span.disabled-link,
div.pagination-links a {
	display       : inline-block;
	background    : var(--button-background);
	padding       : 5px 10px 5px 10px;
	margin        : 6px 3px 0;
	border        : 1px solid var(--button-background);
	color         : var(--button-text) !important;
	/*text-decoration : none;*/
	text-shadow   : none;
	border-radius : 3px;
}

div.pagination-links span.disabled-link {
	color      : var(--main-text) !important;
	background : var(--button-disabled-background);
	border     : 1px solid var(--button-background);
}

div.pagination-links a:hover,
div.pagination-links a:focus-visible,
div.pagination-links a:focus {
	background : var(--button-hover-background);
	border     : 1px solid var(--button-hover-background);
	color      : white;
	cursor     : pointer;
}

div.pagination-links span.list-nav-feedback {
	display : block;
}

div.page-links {
	display : inline-block;
}

div.button-group {
	margin : 1em 0;
	clear  : left;
}

div.button-group.centred {
	text-align : center;
}

@media screen and (max-width : 575px) {
	div.page-links {
		display : none;
	}

	div.pagination-links .first,
	div.pagination-links .last {
		/*display : none !important;*/
	}


}

/*
===========================================================
	DECEASED BASIC LISTING
===========================================================
 */

div.listing-container {
	border-top       : 1px solid var(--main-border);
	margin-bottom    : 1em;
	background-color : var(--messagebox-background);
}

div.listing-container p {
	text-align : center;
	margin     : 0.5em auto 0.5em;
}

div.listing {
	position         : relative;
	border-top       : 1px solid var(--main-border);
	margin           : 0 auto;
	padding          : 0.75em 1em 0.5em;
	overflow         : auto;
	background-color : var(--main-background);
	break-inside     : avoid;
	color            : var(--main-text) !important;
}

div.listing p {
	text-align : left;
}

div.listing:hover {
	background-color : var(--table-hover);
}

div.listing h3 {
	/*position: absolute;*/
	margin-top    : 0;
	margin-bottom : 0;
	font-size     : 140%;
	color         : var(--main-text);
}

div.listing span.listing-header {
	margin-top    : 0;
	margin-bottom : 0;
	font-size     : 140%;
	color         : var(--main-text);
}

div.listing a:hover span.listing-header {
	color : var(--link-hover);
}

div.listing a:hover h3 {
	color : var(--link-hover);
}

div.listing a {
	color    : var(--main-text);
	overflow : auto;
}

div.listing a.admin-action {
	display : block;
	float   : right;
}

div.listing a:hover {
	color : var(--link-hover) !important;
}

div.listing div.detail {
	width : 35%;
	float : right;
	color : var(--main-text);
}

div.listing div.detail a:hover {
	color : var(--link-hover);
}

@media only screen and (max-width : 550px) {
	div.listing div.detail {
		width         : 50%;
		overflow-wrap : break-word;
	}

	div.listing-container p {
		font-size : 80%;
	}
}

div.listing div.detail span,
div.listing div.detail a {
	/*font-size   : 90%;*/
	display     : block;
	margin-left : 1em;
}

div.listing div.detail span.disabled {
	font-size : 100%;
	display   : inline;
}

p.legal {
	width        : 90%;
	margin-left  : auto;
	margin-right : auto;
}

/*
===========================================================
	IMAGE VIEWER
===========================================================
 */
div#scan-container {
	width            : 90%;
	height           : 60vh;
	border           : 1px solid var(--image-viewer-border);
	margin           : 0 auto 1em;
	background-color : var(--image-viewer-background);
	overflow         : hidden;
}

/*div#scan-container img {*/
/*	position:relative;*/
/*	max-width            : 100%;*/
/*	height:100%;*/
/*	max-height           : 100%;*/
/*	margin: 0 auto;*/
/*}*/

/*
===========================================================
	TABLES
===========================================================
 */
table {
	width           : 100%;
	border-color    : var(--table-border);
	border-collapse : collapse;
	margin-bottom   : 1em;
	margin-left     : auto;
	margin-right    : auto;
}

table tr:hover {
	background : var(--table-hover);
}


td, th {
	vertical-align : top;
	border-bottom  : 1px solid var(--table-border);
	padding        : 0.5em;
	font-weight    : normal;
}

th {
	background-color : var(--table-header-background);
	border-color     : var(--table-border);
}

div.half-column table {
	width : 100%;
}

td.number-cell {
	text-align : right;
}

/*
===============================================================================
	GROUPED TABLES
===============================================================================
*/

table.grouped #tooltip {
	position     : relative;
	color        : #66CCFF;
	border-color : var(--table-border);
}

table.grouped {
	border-top    : 0;
	border-left   : 0;
	border-right  : 0;
	border-color  : var(--table-border);
	border-bottom : 1px solid var(--table-border);
}

table.grouped td {
	border-right  : 1px solid var(--table-border);
	border-left   : 1px solid var(--table-border);
	border-top    : none;
	border-bottom : none;
}

table.grouped td.group-first {
	border-top    : 1px solid var(--table-border);
	/*background-color: red;*/
	border-bottom : none;
}

table.grouped td.group-member {
	color : transparent;
}

table td.group-member:hover {
	background : transparent;
}

table.grouped td.group-leaf {
	border-bottom : 1px solid var(--table-border);
}

table.grouped td#tooltip {
	position : relative;
	color    : red;
}


/*
===============================================================================
	EMBEDDED TABLES
===============================================================================
*/

table.debug tr:hover,
table.embedded tr:hover {
	background : transparent;
}

table.embedded {
	width  : 100%;
	border : none;
	margin : 0;
}

td.embedded {
	padding : 0;
}

table.embedded td {
	border : none;
}

table.debug td:first-child,
table.embedded td:first-child {
	width : 20%;
}

table.embedded tr:first-child td {
	border-top : none;
}

/*
===============================================================================
	NEWS WRAPPER
===============================================================================
*/
div#news-delete {
	background-color : white;
	padding          : 1em;
}


div.news-item {
	background-color : var(--alt-background);
	padding          : 1em;
	margin-bottom    : 1em;
}

div.news-item a {
	font-weight     : bold;
	text-decoration : underline;
}

/*
===============================================================================
	INFORMATION PAGE WRAPPER
===============================================================================
*/
div#page-delete {
	background-color : white;
	padding          : 1em;
}


div.page-body {
	/*background-color : white;*/
	padding       : 1em;
	margin-bottom : 1em;
}

div.page-body a {
	font-weight     : bold;
	text-decoration : underline;
}

/*
===============================================================================
	IMAGE WRAPPER
===============================================================================
*/
div.image-wrapper img {
	width : 100%;
}

div.image-wrapper.full {
	width : 100%;
}


div.image-wrapper.left,
div.image-wrapper.right {
	width : 50%;
}

div.image-wrapper.left {
	float        : left;
	margin-right : 2em;
}

div.image-wrapper.right {
	float       : right;
	margin-left : 2em;
}

div.image-wrapper p.image-caption {
	font-size  : 80%;
	font-style : italic;
	float      : left;
}

div.image-wrapper p.image-copyright {
	font-size  : 80%;
	font-style : italic;
	float      : right;
}

/*
===============================================================================
	AUTHORITY DISPLAY
===============================================================================
*/

div.authority-description {
	/*background-color : var(--alt-background);*/
	/*padding          : 1em;*/
	margin : 1em 0 2em;
}

div.authority-description a {
	text-decoration : underline;
	font-weight     : bold;
	color           : var(--link-text);
}

/*
===============================================================================
	ADMIN TABLES
===============================================================================
*/


table.admin {
	background-color : var(--table-background);
	border           : none;
}

table.admin th {
	color            : var(--table-header-text);
	font-weight      : bold;
	text-align       : left;
	background-color : var(--table-header-background);
	border           : none;
	/*border-top:1px solid var(--main-border);*/
	/*border-bottom:1px solid var(--main-border);*/
	border-bottom    : 3px solid var(--button-background);
}

table.admin tr {
	border-bottom : 1px solid var(--table-hover);
}

table.admin tr:hover {
	background-color : var(--table-hover);
}

table.admin td {
	border : none;
}

th.label-cell,
td.label-cell {
	width      : 25%;
	background : #F1F1F1;
	text-align : right;
}

th.label-cell {
	width : 30%;
}

td.main-cell {
	width : 55%;
}

td.action-cell {
	width      : 7%;
	text-align : center;
}

td.action-cell a {
	text-decoration : underline;
}

td.icon, th.icon {
	width      : 20px;
	text-align : center;
}

/*
===============================================================================
	MENU STRUCTURE
===============================================================================
*/
div.menu-left-column,
div.menu-centre-column {
	float        : left;
	width        : 30%;
	margin-right : 3%;
}

div.menu-right-column {
	float        : left;
	width        : 30%;
	margin-right : 0;
}

@media only screen and (max-width : 700px) {
	div.menu-left-column,
	div.menu-centre-column,
	div.menu-right-column {
		float        : none;
		width        : 90%;
		margin-right : 0;
	}
}

/*
===============================================================================
	MENU LINK LIST
===============================================================================
*/
ul.menu-link-list {
	list-style : none;
	margin-top : 0;
}

ul.menu-link-list li {
	display : block;
	width   : 100%;
}

ul.menu-link-list li a {
	display         : block;
	text-decoration : none;
	padding         : 0.5em;
}

ul.menu-link-list li a:hover {
	color            : var(--main-background);
	background-color : var(--link-hover);
}

h3.menu-title {
	margin-top    : 1em;
	margin-bottom : 0.5em;
}

/*
===============================================================================
	LISTING STYLES - ADMIN LOG ENTRIES
===============================================================================
*/
div.log-list {
	border-top    : 1px solid #CCCCCC;
	margin-bottom : 1em;
}

div.log-entry {
	/*position         : relative;*/
	border-bottom    : 1px solid #CCCCCC;
	margin           : 0 auto;
	padding          : 0.5em 1em 0.25em;
	overflow         : auto;
	background-color : var(--main-background);
}

div.log-entry p {
	text-align    : left;
	margin-bottom : 0.5em;
}

div.log-entry p.admin-name,
div.log-entry p.detail-link {
	display : block;
	float   : right;
}

/*
===============================================================================
	GRID - TABLE LAYOUT
===============================================================================

	Default grid container.
*/
div.layout-grid {
	display               : grid;
	grid-template-columns : 1fr 3fr;
	grid-gap              : 1px;
	width                 : 90%;
	background-color      : var(--table-border);
	border                : 1px solid var(--table-border);
	margin                : 0 auto 2em;
}

/*
	Grid heading is actually in an unconnected div.
 */
div.layout-grid-heading {
	margin           : 0 auto;
	background-color : var(--table-cell-label);
	padding          : 0.5em 0;
	border-top       : 1px solid var(--table-border);
	border-left      : 1px solid var(--table-border);
	border-right     : 1px solid var(--table-border);
	width            : 90%;
	font-weight      : bold;
	font-size        : 110%;
	text-align       : center;
}

/*
	Default padding for ALL cells.
*/

div.layout-grid div {
	padding : 0.5em;
}

/*
	Turn off padding and border for a value cell that contains an
	embedded grid.
 */
div.grid-value > div.layout-grid {
	padding : 0;
	border  : none;
}

/*
	Label cell styles.
 */
div.layout-grid div.grid-label {
	text-align       : right;
	padding-right    : 1em;
	background-color : var(--table-cell-label);
}

/*
	Value cell styles.
 */
div.layout-grid div.grid-value {
	background-color : var(--table-cell-value);
	padding-left     : 1em;
}

/*
	Make an embedded grid fit cleanly into its containing cell.
 */
div.layout-grid div.grid-value div.layout-grid {
	width         : 100%;
	margin-bottom : 0;
}

div.layout-grid div.grid-value.embedded {
	padding : 0;
}

/*
===============================================================================
	CHART CONTAINER
===============================================================================
*/
div.chart-container {
	background-color : white;
	margin-bottom    : 1em;
}

/*
===============================================================================
	SEARCH LIST ICON KEY
===============================================================================
*/
/*div.search-icon-key {*/
/*	background-color : white;*/
/*	border           : 1px solid var(--table-border);*/
/*	width            : 15%;*/
/*	padding          : 1em;*/
/*	float            : right;*/
/*}*/

/*div.search-icon-key p {*/
/*	font-weight   : bold;*/
/*	text-align    : center;*/
/*	margin-bottom : 0;*/
/*}*/

/*div.search-icon-key img {*/
/*	margin-right : 1em;*/
/*	margin-top   : 5px;*/
/*}*/


/*
===============================================================================
	PASSWORD ENTRY FORM FIELD WITH VISIBILITY TOGGLE
===============================================================================
*/
div.pass-wrapper {
	background    : var(--input-background);
	display       : inline-block;
	border        : 1px solid var(--main-border);
	padding       : 0;
	width         : 70%;
	margin-bottom : 2%;
}

div.pass-wrapper a.eye,
div.pass-wrapper a.eye-slash {
	display     : block;
	float       : right;
	width       : 24px;
	height      : 24px;
	text-indent : -9999px;
	margin      : 2px 4px;
}

div.pass-wrapper a.eye {
	background : url(/images/eye.svg) center center no-repeat var(--input-background);
}

div.pass-wrapper a.eye-slash {
	background : url(/images/eye-slash.svg) center center no-repeat var(--input-background);
}

div.pass-wrapper a.eye:hover {
	background : url(/images/eye.svg) center center no-repeat var(--input-background);
	cursor     : pointer;
}

div.pass-wrapper a.eye-slash:hover {
	background : url(/images/eye-slash.svg) center center no-repeat var(--input-background);
	cursor     : pointer;
}


div.pass-wrapper input {
	display : block;
	float   : left;
	border  : none !important;
	margin  : 0 0 0 0 !important;
	padding : 5px;
}

@media screen and (max-width : 750px) {

	div.pass-wrapper {
		width : 91%;
	}

	div.pass-wrapper input {
		width : 80%;
	}
}

@media screen and (max-width : 520px) {

	div.pass-wrapper {
		width       : 91%;
		margin-left : 1em;
	}

	div.pass-wrapper input[type="text"],
	div.pass-wrapper input[type="password"] {
		width : 80%;
	}
}

/*
 * Stop MS Edge adding a reveal icon - we have our own that works everywhere.
 * At least there is an option for us :)
 */
input::-ms-reveal {
	display : none;
}

div.pass-wrapper input:focus {
	box-shadow : none;
	border     : none;
}

/*
===============================================================================
	PURCHASED RECORD RECEIPT
===============================================================================
*/

div#receipt-wrapper {
	/*border   : 1px solid red;*/
	overflow      : auto;
	background    : white;
	color         : #333333;
	padding       : 2em;
	border-radius : 10px;
}

div.receipt-header {
	float : right;
	clear : right;
	width : 50%;
}

div#receipt-detail,
div#receipt-detail-header {
	clear                 : both;
	padding               : 0 1em 0 1em;
	display               : grid;
	grid-template-columns : 50% 17% 17% 18%;
	border-bottom         : 3px solid #AAAAAA;
}

div#receipt-detail-header {
	font-weight    : bold;
	border-bottom  : 3px solid #AAAAAA;
	padding-bottom : 0;
}

div#receipt-detail div {
	border-bottom : 1px solid #AAAAAA;
}

div#receipt-detail div:nth-last-child(-n+4) {
	border         : none;
	padding-bottom : 0;
}

div#receipt-wrapper div.value {
	text-align : right;
}

ul.grave-ref-terms {
	list-style-type : none;
}

/*
===============================================================================
	BASKET DISPLAY
===============================================================================
*/
div.basket-container {
	margin   : 0 auto 2em;
	width    : 90%;
	overflow : auto;
}

div.basket-container div {
	float : left;
}

div.basket-container div.product-listing,
div.basket-container div.product-listing-header {
	width         : 100%;
	clear         : left;
	border-bottom : 1px solid var(--basket-border);

}

div.basket-container div.product-listing-header {
	border-bottom : 3px solid var(--basket-border);
}

div.basket-container div.product-listing-totals {
	width : 100%;
	clear : left;
}

div.basket-container div.icon {
	padding : 0.25em 1em 0 0;
    /*width   : 16px;*/
    width   : 50px;
}

div.basket-container div.description {
	padding : .25em;
	width   : 45%;
}

div.basket-container div.money {
	padding    : .25em;
	float      : right;
	text-align : right;
	width      : 90px;
	/*border:1px solid yellow;*/
}

div.product-listing-totals div.money {
	float         : right;
	border-bottom : 1px solid var(--basket-border);
}

/*div.product-listing,*/
div.product-listing-header {
	font-weight : bold;
	/*background : var(--basket-header-background);*/
	/*color      : var(--basket-header-text);*/
}

/*
===============================================================================
	MEMORIAL DISPLAY
===============================================================================
*/
div.memorial-listing {
	border-top : 1px solid var(--main-border);
	overflow   : auto;
	padding    : 1em;
}


div.memorial-listing div.inscription {
	width       : 75%;
	float       : left;
	line-height : 1.75;
}

div.memorial-listing div.link {
	width      : 15%;
	float      : right;
	text-align : right;
}

div.listing-container div.listing:last-of-type,
div.listing-container details:last-of-type {
	border-bottom : 1px solid var(--main-border);
	margin-bottom : 2em;
}

div.memorial-listing:last-of-type {
	border-bottom : 1px solid var(--main-border);
	margin-bottom : 1em;
}

/*
===============================================================================
	VOUCHER PURCHASE FORM
===============================================================================
*/
div.offer {
	padding          : 1em 1em 0 1em;
	border           : 3px solid var(--offer-border);
	border-radius    : 0.5em;
	margin-bottom    : 1em;
	color            : var(--offer-text);
	background-color : var(--offer-background);
}

div.offer h2 {
	color : var(--offer-headline);
}

div#voucher-form {
	width         : 90%;
	overflow      : auto;
	border-bottom : 1px solid var(--main-border);
	margin        : 0 auto 1em;
}

div#voucher-form div.form-row {
	/*width:90%;*/
}

div#voucher-form div.form-row.header h3 {
	margin-bottom : 0;

}

div#voucher-form button {
	margin    : 3px 0 5px 0;
	font-size : 90%;
}

div#voucher-form div.form-row form {
	border-top : 1px solid var(--main-border);
	overflow   : auto;
	padding    : 3px 0 0 0;
	margin     : 0;
}

div#voucher-form div.product-name {
	width   : 50%;
	float   : left;
	padding : 5px;
	/*border :1px solid yellow;*/
}

div#voucher-form div.product-price {
	width      : 20%;
	text-align : right;
	float      : left;
	padding    : 5px;
	/*border :1px solid yellow;*/
}

div#voucher-form div.product-button {
	width      : 110px;
	text-align : right;
	float      : right;
	padding    : 0;
	/*border :1px solid yellow;*/
}

/*@media screen and (max-width:1001px) {*/
/*div#voucher-form div.product-name {*/
/*	width   : 50%;*/
/*	float   : left;*/
/*	padding : 5px;*/
/*	!*border :1px solid yellow;*!*/
/*}*/

/*div#voucher-form div.product-price {*/
/*	width      : 20%;*/
/*	text-align : right;*/
/*	float      : left;*/
/*	padding    : 5px;*/
/*	!*border :1px solid yellow;*!*/
/*}*/

/*div#voucher-form div.product-button {*/
/*	width      : 18%;*/
/*	text-align : right;*/
/*	float      : left;*/
/*	padding    : 0;*/
/*	!*border :1px solid yellow;*!*/
/*}*/
/*}*/

/*
===============================================================================
	CHECKOUT DISPLAY
===============================================================================
*/
div.address-display p {
	/*border:1px solid red;*/
	padding-left : 3em;
}

div.mail-display {
	width            : 80%;
	margin           : 1em auto 2em;
	padding          : 1em;
	color            : black;
	background-color : white;
	box-shadow       : 10px 10px 5px black;
}

div.mail-display a {
	color : blue;
}

div.mail-display h3 {
	color         : black;
	margin-bottom : 0.5em;
}

div.mail-display hr {
	margin : 0.5em 0;
}

div.mail-display p.header {
	margin : 0;
}

div.mail-display p.header strong {
	display : inline-block;
	width   : 15%;
	margin  : 0;
}

div.mail-display span {
	color : red;
}

/*
===============================================================================
	MODAL FOR COLLECTIONS
===============================================================================
*/

/* this may not be required, leaving it here until I'm sure */
div#header span#collection-trigger {
	display          : block;
	width            : 16px;
	height           : 16px;
	float            : right;
	margin-right     : 5px;
	background-image : var(--modal-trigger-icon);
	overflow         : hidden;
	text-indent      : -9999px;
	cursor           : pointer;
}

#modal-background {
	position   : fixed;
	top        : 0;
	left       : 0;
	right      : 0;
	bottom     : 0;
	background : var(--modal-background);
	transition : all 0.5s var(--bounceEasing);
	cursor     : pointer;
	visibility : hidden;
	opacity    : 0;
	z-index    : 1099;
}


.modal-dialog {
	position      : fixed;
	top           : 125px;
	left          : 50%;
	transform     : translate(-50%);
	margin        : 0 auto;
	min-width     : 300px;
	max-width     : 400px;
	max-height    : 80vh;
	border-radius : 5px;
	background    : var(--main-background);
	transition    : all 0.5s var(--bounceEasing);
	overflow      : auto;
	cursor        : default;
	border        : 3px solid var(--main-border);
	opacity       : 0;
	z-index       : 1100;
	visibility    : hidden;
	display       : none;
}

.modal-dialog > * {
	padding : 1rem;
}

.modal-header,
.modal-footer {
	background : var(--header-background);
}

.modal-header {
	display         : flex;
	align-items     : center;
	justify-content : space-between;
	padding         : 0;
}

.modal-footer {
	text-align : center;
	font-size  : 80%;
}

.modal-header h2 {
	font-size   : 140%;
	margin-left : 1em;
}

/*
	hamburger character
 */
/*.modal-header h2:before {*/
/*	content : '\2261';*/
/*}*/

button.close-modal {
	font-size   : 1.5rem;
	font-weight : bold;
	padding     : 0.25em 0.5em;
	margin      : 0.5em;
	color       : var(--modal-close-button-color);
}

button.close-modal:hover {
	background-color : red;
}

.modal p + p {
	margin-top : 1rem;
}

#modal-background.is-visible {
	visibility : visible;
	opacity    : 0.75;
}

.modal-dialog.is-visible {
	display    : block;
	visibility : visible;
	opacity    : 1;
}

div.modal-content form {
	margin : 0;
}

div.modal-content label {
	/*display : none;*/
}

div.modal-content input[type="text"] {
	width : 97%;
}

div.modal-content select {
	padding : 0.5em;
	width   : 100%;
}

@media only screen and (max-width : 520px) {

	div.modal-content input[type="text"] {
		margin-left : 0;
	}

	div.modal-content select {
		margin-left : 0;
	}
}

div.modal-content h3 {
	width      : 100%;
	text-align : center;
}

div.modal-content p {
	margin : 0;
}

div.modal-content button {
	display : block;
	margin  : 0.5em auto 0;
}

.spinner {
	width             : 234px;
	height            : 90px;
	background        : var(--main-background) url(/images/new_logo_trans_v3.png) no-repeat center center;

	margin            : 0 auto;
	-webkit-animation : sk-rotateplane 2s infinite ease-in-out;
	animation         : sk-rotateplane 2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
	0% {
		-webkit-transform : perspective(120px)
	}
	50% {
		-webkit-transform : perspective(120px) rotateX(360deg)
	}
	/*100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }*/
}

@keyframes sk-rotateplane {
	0% {
		transform         : perspective(120px) rotateX(0deg) rotateY(0deg);
		-webkit-transform : perspective(120px) rotateX(0deg) rotateY(0deg)
	}
	50% {
		transform         : perspective(120px) rotateX(360deg) rotateY(0deg);
		-webkit-transform : perspective(120px) rotateX(360deg) rotateY(0deg)
	}
}

div.map-wrapper {
	width  : 600px;
	margin : 1em auto;
}

img.map {
	display      : block;
	margin-left  : auto;
	margin-right : auto;
	max-width    : 95%;
}

/*
===============================================================================
	LOCATION SEARCH CUSTOMS
===============================================================================
*/
div.loc-result {
	border-bottom : 1px solid var(--table-border);
}

div.loc-row {
	display : flex;
	width   : 100%;
}

div.loc-row > * {
	width   : calc(100% / 3);
	padding : 0.5em;
}

div.cell-county {
	border-left : 1px solid var(--table-border);
}

div.cell-county.start {
	border-top : 1px solid var(--table-border);
}

div.cell-authority {
	border-left  : 1px solid var(--table-border);
	border-right : 1px solid var(--table-border);
}

div.cell-authority.start {
	border-top : 1px solid var(--table-border);
}

div.cell-site {
	border-top   : 1px solid var(--table-border);
	border-right : 1px solid var(--table-border);
}

@media only screen and (max-width : 650px) {

	div.loc-row {
		flex-wrap : wrap;
	}

	div.cell-county {
		display     : none;
		width       : 100%;
		text-align  : center;
		font-weight : bold;
		font-size   : 110%;
	}

	div.cell-county.start {
		display          : block;
		border-left      : none;
		/*color:var(--main-background);*/
		background-color : var(--table-cell-label);
	}

	div.cell-authority,
	div.cell-site {
		width        : calc((100% / 2) - 1em);
		border-left  : none;
		border-right : none;
	}

	div.cell-site {
		border-right : none;
	}
}

div.etl-log {
	padding-bottom : 1em;
}

div.etl-log h2 {
	margin-bottom : 1em;
}

div.etl-log p {
	margin-left : 3em;
}


/*
===============================================================================
	ADVERT BANNERS
===============================================================================
*/
a.banner-link {
	text-decoration : none;
}

div.dol-ab {
	background-color : var(--banner-background);
	border           : 5px solid var(--banner-border);
	border-radius    : 12px;
	padding          : 1em 1em 0;
	margin-bottom    : 2em;
	text-align       : center;
	overflow         : auto;
}

div.dol-ab a.button {
	margin-bottom : 0;
	float         : right;
}

/*
===============================================================================
	HOMEPAGE HERO BANNERS
===============================================================================
*/

div#homepage-hero {
	border:1px solid var(--banner-border);
	border-radius:5px;
    /*min-height            : 320px;*/
    /*padding               : 2em 2em 1em;*/
    padding               : 2em;
	margin-bottom         : 1em;
	/*margin-top            : -27px;*/
	text-align            : left;
	text-transform        : uppercase;
	background-image      : url("/images/homepicnew2.jpg");
	background-position   : 0 0;
	background-size       : cover;
	/*background-color      : #777;*/
	/*background-blend-mode : darken;*/
}

div#homepage-hero h2, div#homepage-hero h3, div.feature-card h3 {
	font-family : 'Merriweather Sans', Verdana, sans-serif;
	color       : white;
	opacity     : 100;
    text-shadow: #000 0 0 5px;
}

div#homepage-hero h2 {
	font-size     : 44px;
	font-weight   : bold;
	margin-bottom : 1.5em;
}

div#homepage-hero h3 {
	font-size  : 24px;
	margin-top : 1em;

}

a.button.hero {
	font-weight : bold;
	font-size   : 125% !important;
	padding     : 0.5em 1em;
	border      : 2px solid white;
	margin      : 0 auto;
    box-shadow: #000 0 0 5px;
}

.bold {
	font-weight : bold;
	color       : var(--required);
}

@media only screen and (max-width : 600px) {

	div#homepage-hero h2 {
        /*font-size     : 36px;*/
        font-size     : 24px;
		margin-bottom : 1em;
	}

	div#homepage-hero h3 {
        display: none;
		/*font-size     : 18px;*/
		/*margin-bottom : 1em;*/
	}

    div#header a img {
        margin-top: 32px;
        width: 150px;
    }
}

/*
===============================================================================
	FEATURE CARDS
===============================================================================
*/
div#feature-cards {
	display               : grid;
	grid-template-columns : 1fr 1fr 1fr;
	column-gap            : 1em;
	row-gap               : 1em;
	margin-bottom         : 1em;
}

div.feature-card {
	background-color : var(--dark-purple);
	color            : white;
	border-radius    : 10px;
	padding          : 1em 1em 0.5em 1em;
}

div.feature-card h3 {
	text-transform : uppercase;
}

div.button-strip {
	width:100%;
	text-align:center;
	margin-bottom: 1em;
}