/**
 * This contains the most basic layouts and styles
 * @author Sascha Leib <sascha@leib.be>
 */

html, body, * {
	font-family: @ini_default_fonts;
	margin: 0;
	padding: 0;
	scrollbar-gutter: auto;
	scrollbar-width: thin;
	scrollbar-color: @ini_blockquote @ini_background_site;
}
html {
	scroll-behavior: smooth;
}
body {
	background-color: @ini_background_site;
	font-size: @ini_default_font_size;
}

/* scrollbar styles */
::-webkit-scrollbar {
	width: .5rem;
}
::-webkit-scrollbar-track {
	background: @ini_background_site;
}
::-webkit-scrollbar-thumb {
	border-radius: .25rem;
	background: @ini_blockquote;
}
::-webkit-scrollbar-thumb:hover {
	background: @ini_separator;
}

#skip-link {
	& {
		position: fixed;
		left: 4pt;
		top: 4pt;
		width: auto;
		z-index: 9999;
	}
	a {
		position: absolute;
		background-color: @ini_background;
		font-size: 1.25em;
		color: @ini_link;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}
	a:focus {
		position: static;
		display: inline-block;
		padding: 8px;
		height: auto;
		clip: auto;
		overflow: visible;
		outline: 2px solid @ini_focus_color;
	}
	&:focus {
		display: block;
	}
}

.sronly {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	display: block;
}
.printonly,
.print-only,
.wrap_print-only {
	display: none;
}
div.no {
	display: inline;
	margin: 0;
	padding: 0;
}

#globalTools {
	& {
		grid-column: 2 / span 2;
		grid-row: 1;
		text-align: right;
		font-size: 10pt;
	}
	a:link {
		text-decoration: none;
	}
}
#gSiteTools {
	& {
		justify-self: start;
	}
	& select {
		display:	none;
	}
}
#gUserTools {
	& {
		justify-self: end;
		padding-right: .5rem;
	}
	ul {
		list-style: none inside;
		display: block;
	}
	ul li {
		display: inline;
	}
	ul li::before {
		content: '\00B7';
		display: inline-block;
		width: .35em;
		padding-right: .35em;
	}
	ul li:first-child::before {
		content:		'';
	}
}

#header-layout,
#footer-layout {
	width: 100%;
}

#header-layout > header {
	width: 100%;
	max-width: @ini_site_width;
	margin: 0 auto;
	padding-top: .25rem;
	display: grid;
	grid-template-columns: @ini_sidebar_width auto @ini_sidebar_width;
	grid-template-rows: auto auto auto;
	justify-items: stretch;
}

#siteLogo {
	& {
		grid-column: 1;
		grid-row: 1 / span 3;
		column-gap: 8px;
		padding: 0 .25em 0 .5em;
		display: grid;
		grid-template-columns: 64px auto;
		grid-template-rows: auto auto;
	}
	.logo {
		margin-top: 3pt;
		grid-column: 1;
		grid-row: 1 / span 2;
	}
	.logo img {
		width:					64px;
		height:					auto;
	}
	.title,
	.claim {
		grid-column:			2;
		grid-row:				2;
		align-self:				start;
		font-size:				10pt;
		padding-right:			.5em;
		max-width:				e("calc(") @ini_sidebar_width e(" - 80px)")
	}
	.title {
		grid-row:				1;
		align-self:				center;
		font-size:				14pt;
		line-height:			1em;
		margin:					0;
	}
	.title * {
	/*	font-family:			@ini_headline_fonts;
		font-size:				13pt;	*/
	}
}

#phSearch {
	& {
		grid-column: 2;
		grid-row: 2;
		padding: .5em 0;
	}
	form {

		& > div.search-field {
			width: 100%;
			display: grid;
			grid-template-columns: auto 20pt 20pt;
			place-items: stretch;
			border: @ini_border solid 1pt;
			background: @ini_background;
			border-radius: 4pt;
			-moz-box-shadow: inset 0 0 3pt @ini_border;
			-webkit-box-shadow: inset 0 0 3pt @ini_border;
			box-shadow: inset 0 0 3pt @ini_border;
			outline: transparent solid 2pt;
		}

		& .search-popup {
			position: absolute;
			width: 100%;
			height: 5pt;
			margin-right: 21pt;
		}

		> div {
			&.search-field.focus {
				outline-color: @ini_focus_color;
			}
			input {
				grid-column: 1;
				grid-row: 1;
				z-index: 23;
				font-size: large;
				padding: 2pt 0 2pt 4pt;
				border: transparent none 0;
				border-radius: 3pt;
				background-color: transparent;
			}
			input:focus {
				outline: transparent none 0;
			}
			button {
				color: @ini_text;
				border: transparent solid 1pt;
				background: transparent none no-repeat center;
				background-size: 13pt;
				width: 2em;
				height: 2em;
				border-radius: 3pt;
				overflow: hidden;
				margin: 1pt 1pt 1pt 0;
				height: auto;
				outline: transparent solid 2pt;
			}
			button[type=reset] {
				background-image: url('images/delete.svg');
				border-right: @ini_border solid 1pt;
			}
			button[type=submit] {
				background-image: url('images/search.svg');
			}
			button:hover {
				background-color: @ini_background_neu;
				border-color: @ini_border;
			}
			button:focus {
				background-color: @ini_background_neu;
			}
		}

	}
}	
#qsearch__out {
	& {
		z-index: 20;
		position: relative;
		left: 0;
		width: auto;
		padding: 0;
		white-space: nowrap;
		font-size: 1rem;
		background-color: @ini_background_site;
		-moz-box-shadow:	2px 2px 2px 0 rgba(0,0,0,.5);
		-webkit-box-shadow:	2px 2px 2px 0 rgba(0,0,0,.5);
		box-shadow:			2px 2px 2px 0 rgba(0,0,0,.5);
	}
	strong {
		display: none;
		padding: 2pt;
		font-weight: normal;
	}
	ul {
		border: @ini_border solid 1px;
		border-top-width: 0;
		max-height: 11em;
	}
	li {
		border-top: @ini_border solid 1px;
	}
	a {
		display: block;
		padding: 2pt 0 2pt 4pt;
		border: transparent solid 2px;
		overflow: hidden;
		text-overflow: '\2025';
	}
	a:focus {
		border-color: 		@ini_focus_color;
	}
}

#phTools{ }
#phInclude {
	grid-column: 2 / span 2;
	grid-row: 3;
	margin-right: 2pt;
}

#main-layout {
	width: 100%;
	max-width: @ini_site_width;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: flex-start;
}

#sidebar {
	& {
		width: @ini_sidebar_width;
		max-width: @ini_sidebar_width;
		flex-grow: 0;
	}
	&.toggle.hide,
	&.toggle.alt {
		max-width: 1em;
	}
	p, ul, ol {
		padding-left: 1.25em;
	}
	ul {
		list-style: square outside;
	}
	ul ~ ul, ul ~ ol,
	ol ~ ul, ol ~ ol {
		margin-top: .5em;
	}
	ul li, ol li {
		color: @ini_text_alt;
		padding: .1em 0;
	}
	dl dt {
		font-weight: bold;
	}
	a:link, a:visited {
		color: @ini_link;
	}
	.home a::before {
		content: ' ';
		display: inline-block;
		width: 10pt;
		height: 1em;
		background: transparent url('images/home.svg') no-repeat no-repeat 0 4px;
		background-size: .8em;
		padding-right: 3pt;
	}
	.curid {
		font-weight: bold;
	}
	h3, h4 {
		font-size: 1.1rem;
		margin: 0.25em 2pt;
	}
	& > button.tg_button {
		float: right;
		display: block;
		background-color: transparent;
		border: transparent none 0;
		margin-right: 2px;
		font-size: 1.5rem;
	}
	& > button:focus {
		outline: @ini_focus_color solid 2px;
	}
	& > button.tg_button span {
		display: none;
	}
	&.hide > button.tg_button,
	&.alt > button.tg_button {
		margin-left: 0;
		width: 11pt;
	}
	& > button.tg_button::after {
		content: '\2039';
		color: @ini_link;
		display: inline-block;
		width: .75em;
		height: 1.25em;
		text-align: center;
	}
	&.hide>button.tg_button span,
	&.alt>button.tg_button span {
		display: none;
	}
	&.hide>button.tg_button::after,
	&.alt>button.tg_button::after {
		content: '\203A';
		width: auto;
	}

	.tg_content {
		line-height: 1.5em;
		font-size: 11.5pt;
	}

	hr {
		border: 0;
		height: 1pt;
		background: @ini_text_alt;
		background-image: linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt);
		margin: .5em 1em .5em 0;
	}
}

#sbNavigation {
	margin: 1em .25em 0 1em;
}
#navBreadCrumbs {
	margin-left: .5em;
}
#navBreadCrumbs ol {
	list-style: decimal outside;
	padding-left: 2em;
}


#navYouAreHere {
	& {
		display: flex;
		flex-flow: row nowrap;
		position: relative;
		top: 0;
		left: 0;
		height: 16pt;
		overflow: hidden;
		white-space: nowrap;
	}
	h4 {
		display: none /*inline-block */;
		font-family: @ini_default_fonts;
		font-weight: normal;
		font-size: small;
		line-height: 1.5em;
		margin: 0 .5em 0 0;
	}
	ol {
		& {
			list-style: none inside;
			display: flex;
			line-height: 1.5em;
			height: 100pt;
			padding-left: 0;
			margin: 0 2pt 0 0;
			font-size: small;
			overflow: scroll hidden;
		}
		li {
			& {
				color: @ini_headlines;
				display: inline;
				margin-bottom: 0;
				max-width: 20em;
				min-width: 2.2em;
				overflow: hidden;
				text-overflow: '\202F...';
			}

			&:last-child { flex-shrink: 1; }
			&:nth-last-child(2) { flex-shrink: 2; }
			&:nth-last-child(3) { flex-shrink: 3; }
			&:nth-last-child(4) { flex-shrink: 4; }
			&:nth-last-child(5) { flex-shrink: 5; }
			&:nth-last-child(6) { flex-shrink: 6; }

			&.home {
				min-width:		14px;
				flex-shrink:	0 !important;
			}

			&::before {
				content:		'\25B8';
				padding:		0 2pt;
				color:			@ini_text_alt;
			}
			&.home::before {
				content:		'';
				padding:		0;
			}
			&.home a {
				display:		inline-block;
				width:			14px;
				overflow:		hidden;
			}
			&.home a::before {
				content:		' ';
				display:		inline-block;
				width:			14px;
				height:			1em;
				background:		transparent url('images/home.svg') no-repeat left bottom;
				filter:			hue-rotate(-80deg);
			}
		}
	}
}

/* fix for issue with homepage */
body.home #navYouAreHere ol li:last-child {
	display:		none;
}

/* Table of Contents */
#toc {
	& {
		clear: both;
		float: right;
		width: auto;
		min-width: 32px;
		padding-left: .25em;
		line-height: 1.5em;
		text-align: left;
		max-width: @ini_toc_width;
		background-color: transparent;
		border: transparent none 0;
		border-left: @ini_border solid 1pt;
	}
	ol {
		list-style: none inside;
		padding: 0 0 0 1em;
		margin: 0;
	}
	ol li {
		font-size: small;
		line-height: 1.25em;
		margin: .5em 0;
	}
	a[href^='#']:link,
	a[href^='#']:visited {
		color: @ini_inpage;
	}
}

#toc-menubutton {
	background: transparent;
	margin-left: .5em;
	padding: 0 .25em;
	width: auto;
	height: auto;
	overflow: hidden;
	border: transparent 0 none;
	border-radius: 3pt;
}
#toc-menubutton > span {
	font-family: @ini_headline_fonts;
	line-height: 1.5em;
	font-weight: bold;
	color: @ini_headlines;
}
#toc-menubutton::after {
	content: '\203A';
	display: inline-block;
	width: 1.5em;
	text-align: center;
}

.hide #toc-menubutton::after,
.alt #toc-menubutton::after {
	content: '\2630';
}

.hide #toc-menubutton>span,
.alt #toc-menubutton>span {
	display: none;
}

main {
	& {
		width: e("calc(90% - 5px)");
		flex-grow: 100;
		background-color: @ini_background;
		color: @ini_text;
		line-height: 1.5em;
		padding: 1.5em 5% .75em 5%;
		border: @ini_border solid 1px;
		border-radius: 5px;
	}

	/* edit buttons */
	.secedit {
		float: right;
		margin-top: -22pt;
		line-height: 0;
	}
	.secedit button {
		border: @ini_border solid 1pt;
		background-color: transparent;
		color: transparent;
		width: 20pt;
		height: 20pt;
		border-radius: 50%;
		font-size: 0;
		cursor: pointer;
	}
	.secedit button::before {
		content: ' ';
		display: inline-block;
		width: 13pt;
		height: 13pt;
		padding: 2pt;
		background: transparent url('images/edit.svg') no-repeat center;
		background-size: 10pt;
	}
	.secedit button:hover {
		background-color: @ini_highlight;
		border: @ini_text_alt solid 1pt;
	}
	.secedit button:focus {
		background-color: @ini_highlight;
		border: @ini_focus_color solid 2px;
		outline: transparent none 0;
	}
	.secedit button:hover::before {
	}

	.section_highlight {
		border-radius: .5em;
		outline: orange dashed 3px;
	}

	/* Definition List styles: */
	dt { font-weight: 600; }
	dd { margin-left: 1.25em; margin-bottom: .5em; }
	dl.compact {
		display: grid;
		grid-template-columns: minmax(8em,min-content) auto;
	}
	dl.compact dt { grid-column-start: 1; }
	dl.compact dd { grid-column-start: 2; margin-bottom: 0; }
	
	/* math fonts */
	math, .math, .math *,
	.wrap_math, .wrap_math * {
		font-family: @ini_math_fonts;
		font-size: 12pt;
		line-height: 1em;
	}

/* figure block */
	figure {
		& {
			padding: .5em;
			overflow: hidden;
		}
		figcaption {
			clear: left;
			margin-top: .5em;
			font-size: smaller;
			line-height: 1.4em;
		}
		figcaption p {
			margin-bottom: 0;
		}
		figcaption.centered {
			text-align: center;
		}
		& > *:first-child {
			margin-top: .25em;
		}
		table {
			background-color: @ini_background;
			margin: 0;
		}
		div.table {
			margin: 0;
		}
		& > p {
			margin: 0;
		}
	}

	& > footer {
		margin-top: 1em;
		padding-top: 1em;
		text-align: right;
	}
	& > footer p.docInfo {
		display: inline-block;
		border-top: @ini_separator solid 1px;
		padding-top: .5em;
		padding-left: 5%;
		font-size: small;
		color: @ini_text_alt;
	}
}

body.mediadetail { 
	figure {
		img {
			background: transparent url('images/transparency.gif');
		}
		table {
			&.img_detail,
			&.img_detail th,
			&.img_detail td {
				border: none;
			}
			&.img_detail th {
				text-align: right;
				white-space: nowrap;
				border: none;
			}
		}
	}
}

#footer-layout {
	& {
		padding-top: 1.5em;
	}
	& > footer {
		& {
			width: 100%;
			max-width: @ini_site_width;
			margin: 0 auto;
			display: grid;
			grid-template-columns: @ini_sidebar_width 1fr 1fr 1fr;
			grid-template-rows: auto auto;
			grid-gap: 6pt;
			align-items: stretch;
		}
		.ftSection {
			padding-left: 1em;
		}
		.ftSection ul {
			list-style: none inside;
			padding-left: .5em;
		}
		.ftSection ul li {
			margin-bottom: .5em;
			font-size: small;
		}
		.ftSection ul li a {
			white-space: nowrap;
		}
		h4 {
			color: @ini_headlines;
			margin: 0 0 1em 0;
			font-family: @ini_headline_fonts;
			font-size: 1rem;
		}

		#ftPlaceholder>* {
			display: none;
		}
	}
}

#ftLicenseButtons {
	& {
		grid-row: 2;
		grid-column: 2 / span 3;
		text-align: center;
		font-size: small;
		padding-top: 1em;
	}
	hr {
		border: 0;
		height: 1pt;
		background: #333;
		background-image: linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt);
	}
	p.license {
		margin: .5em 0 1em 0;
		font-size: small;
		color: @ini_text_alt;
	}
	p.license bdi {
		display: block;
		width: 100%;
	}
}

/* togglers */
.toggle .tg_button.active {
	color:			@ini_link;
	cursor:			pointer;
}
.toggle .tg_content,
.toggle.auto .tg_content,
.toggle.show .tg_content {
	display:		initial;
}
.toggle.hide .tg_content,
.toggle.alt .tg_content {
	display:		none;
}

/* config overrides */
#config__manager {
	#dw__configform {
		
		.selectiondefault {
			background-color: @ini_background_alt;
		}
		.selection input {
			margin-left: .5em;
		}
		
		& p:last-child {
			position: -webkit-sticky; /* Safari */
			position: sticky;
			bottom: 0;
			box-sizing: border-box;
			background-color: rgba(255,255,255,.67);
			border: @ini_border solid 2pt;
			padding: .5em 0;
			z-index: 9;
			display: grid;
			grid-template-columns: auto auto;
			justify-items: center;
		}
		 p:last-child button {
			border: @ini_border solid 2pt;
			padding: .25em .5em;
		}
		p:last-child button[type=submit] {
			background-color: #ccddff;
		}
	}

	fieldset {
		background-color: transparent;
		color: inherit;
	}

	table {
		th, td {
			border: none;
		}
		td.label span.outkey {
			background-color: inherit;
		}

		tr.default .input,
		tr .input {
			background-color: transparent;
		}
	}
}
#extension__list {
	.legend a.info, .legend a.info.close {
		width: 22px;
		height: 22px;
		background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 9H13V7H11M12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M11 17H13V11H11V17Z' style='fill:%23ADADB3'/%3E%3C/svg%3E") center no-repeat;
		background-size: 24px;
		border-radius: 50%;
		margin-bottom: .5em;
	}
}

/* RTL Overrides */
[dir=rtl] {
	#phSearch form .search-popup {
		margin-right: 0;
		margin-left: 21pt;
	}
	#phSearch form > div input {
		padding-right: 4pt;
	}

	#globalTools {
		text-align: left;
	}
	#gUserTools {
		padding: 0 0 0 .5rem;
	}

	#toc {
		float: left;
		border-left: transparent 0;
		border-right: #CCC solid 1pt;
	}
	#toc ol {
		padding: 0 1em 0 0;
	}

	.secedit {
		float: left;
	}
	
	#navYouAreHere ol li::before {
		content: '\25C2';
	}
	#navYouAreHere ol li.home::before {
		content: '';
	}

	#sidebar {
		> button.tg_button {
			float: left;
		}

		p, ul, ol {
			padding-left: 0;
			padding-right: 1.25em;
		}
	}
	#sbNavigation {
		margin: 1em 1em 0 .25em;
	}
	main {
		figure figcaption {
			clear: right;
		}
	
		& > footer {
			text-align: left;
		}
		& > footer p.docInfo {
			padding-left: 0;
			padding-right: 5%;
		}
	}
}

/* dark mode overrides */
@media screen and (prefers-color-scheme: dark) {
	
	body.darkmode {

		& { background-color: @ini_background_site_dark; color: @ini_text_dark; }
		#skip-link a { background-color: @ini_background_dark;color: @ini_link_dark;}
		#navYouAreHere ol {
			li { color: @ini_headlines_dark;}
			li::before { color: @ini_text_alt_dark;}
		}
		#phSearch form > div {
			&.search-field { border-color: @ini_border_dark; background: @ini_background_dark; }
			input { color: @ini_text_dark; }
			button {color: @ini_text_dark; }
			button[type="reset"] {border-right-color: @ini_border_dark; }
		}
		#qsearch__out {
			& { background-color: @ini_background_site_dark; }
			ul, li { border-color: @ini_border_dark; }
		}

		#config__manager {
			#dw__configform {
				
				.selectiondefault {
					background-color: @ini_background_alt_dark;
				}
				.selectiondefault label {
					color: @ini_text_dark;
				}

				p:last-child {
					& {
						background-color: rgba(57,57,61,.67);
						border-color: @ini_border_dark;
					}
					button {
						background-color: @ini_background_dark;
						border-color: @ini_border_dark;
						color: @ini_missing_dark;
					}
					button[type=submit] {
						border-color: @ini_existing_dark;
						background-color: @ini_background_dark;
						color: @ini_existing_dark;
					}
				}
			}
		}
		#sbNavigation {
			h1, h2, h3, h4, h5, h6 { color: @ini_headlines_dark; }
		}
		#sidebar {
			hr { background-image:	linear-gradient(to right, @ini_background_site_dark, @ini_text_alt, @ini_background_site_dark); }
			a:link, a:visited { color: @ini_link_dark; }
			li::marker { color: @ini_text_dark; }
		}

		#toc {
			& { border-color: @ini_border_dark; }
			#toc-menubutton,
			#toc-menubutton span { color: @ini_headlines_dark; }
			a[href^='#']:link, a[href^='#']:visited { color: @ini_inpage_dark; }
		}

		main { 
			& { background-color: @ini_background_dark; color: @ini_text_dark; border-color: @ini_background_dark; }
			h1, h2, h3, h4, h5, h6 { color: @ini_headlines_dark; }
			& > footer p.docInfo { color: @ini_text_alt_dark; }
			figure table { background-color: @ini_background_dark; }
		}

		#footer-layout > footer h4 { color: @ini_headlines_dark; }
		
		#ftLicenseButtons {
			p.license { color: @ini_text_alt_dark; }
			hr { background-image: linear-gradient(to right, @ini_background_site_dark, @ini_text_dark, @ini_background_site_dark); }
		}

		/* Extension Manager: */
		#extension__manager{
			.panelHeader { background-color: @ini_background_alt_dark; }
			ul.tabs li a { background-color: @ini_background_dark; border-color: @ini_border_dark; color: @ini_text_dark }
			ul.tabs li.active a { background-color: @ini_background_alt_dark; border-color: @ini_text_dark; }
			tr .input, tr.default .input { color: @ini_text_dark; }
		}
		#extension__list ul.extensionList li { color: @ini_text_dark; }
	}

	/* dark scrollbar styles for webkit browsers: */
	&::-webkit-scrollbar-track {
		background: @ini_background_site_dark; 
	}
	&::-webkit-scrollbar-thumb {
		background: @ini_background_alt_dark; 
	}
	&::-webkit-scrollbar-thumb:hover {
		background: @ini_background_dark;
	}
	/* dark scrollbars for firefox: */
	* { scrollbar-color: @ini_background_alt_dark @ini_background_site_dark; }
}

/* tablet break point */
@media all and (max-width: @ini_tablet_width) {
	#header-layout > header {
		margin: 0;
		grid-template-columns: e("repeat(2, auto)");
		grid-template-rows:    e("repeat(4, auto)");
	}
	#header-layout > header #siteLogo {
		grid-column: 1;
		grid-row: 1;
	}
	#header-layout > header #globalTools {
		grid-row: 1;
		grid-column: 2;
	}
	#header-layout>header #globalTools ul li {
		display:			block;
		margin-bottom:		.5em;
	}
	#header-layout>header #globalTools ul li:before {
		content:			'';
	}
	#header-layout>header #phSearch {
		grid-row: 2;
		grid-column: 1 / span 2;
		padding: .5em 1em 0 68px;
	}
	[dir=rtl] #header-layout>header #phSearch {
		padding: .5em 68px 0 1em;
	}
	#header-layout>header #phTools {
		grid-row: 3;
		grid-column: 1 / span 2;
	}
	#header-layout>header #phInclude {
		grid-row: 4;
		grid-column: 1 / span 2;
		margin: 0 6pt 5pt 64px;
	}

	#qsearch__out ul {
		max-height: 100%;
	}

	#main-layout {
		display: block;
	}

	#sidebar.toggle {
		width: auto;
		margin-left: .5em;
		padding: 0;
		position: relative;
		top: -2.25em;
		height: .25em;
	}
	#sidebar > button.tg_button,
	[dir=rtl] #sidebar > button.tg_button {
		float: none;
	}
	#sidebar.auto > button.tg_button,
	#sidebar.hide > button.tg_button,
	#sidebar.alt > button.tg_button,
	#sidebar.show > button.tg_button {
		width: 1.5em;
	}
	#sidebar > button.tg_button span {
		display: none;
	}

	#sidebar > button.tg_button::after {
		content: '\2630';
	}
	#sidebar.hide>button.tg_button::after,
	#sidebar.alt>button.tg_button::after {
		content: '\2715';
	}

	#sidebar .tg_content {
		min-width: @ini_sidebar_width;
		padding-right: 0;
		margin-top: 10px;
		padding-bottom: 1em;
		background-color: @ini_background_site;
		position: absolute;
		z-index: 18;
		border: @ini_border solid 1px;
		-moz-box-shadow: 2px 2px 2px @ini_border;
		-webkit-box-shadow: 2px 2px 2px @ini_border;
		box-shadow: 2px 2px 2px @ini_border;
	}

	#sidebar .tg_content:before {
		content: ' ';
		z-index: 19;
		width: 0; 
		height: 0; 
		position: absolute;
		top: -10px;
		left: 7px;
		border-width: 0 10px 10px;
		border-style: solid;
		border-color: transparent;
		border-bottom-color: @ini_border;
	}
	#sidebar .tg_content:after {
		content: ' ';
		z-index: 20;
		width: 0; 
		height: 0; 
		position: absolute;
		top: -8px;
		left: 8px;
		border-width: 0 9px 8px;
		border-style: solid;
		border-color: transparent;
		border-bottom-color: @ini_background_site;
	}
	
	[dir=rtl] {
		#sidebar .tg_content {
			right: 5px;
		}
		#sidebar .tg_content:before {
			right: 7px;
		}
		#sidebar .tg_content:after {
			right: 8px;
		}
	}

	#sbNavigation {
		padding-left: .5em;
		margin-left: 0;
	}
	#sidebar h3,
	#sidebar h4	{
		font-size: 1rem;
		padding: .25em 0 .25em 2pt;
	}
	#sidebar ul, #sidebar ol {
		margin-left: .5em;
	}
	#sidebar ul ul, #sidebar ol ol,
	#sidebar ul ol, #sidebar ol ul {
		margin-left: 0;
	}
	#sidebar p,
	#sidebar li	{
		font-size: small;
		padding: .25em 0 .25em .25em;
	}

	main {
		width: auto;
		box-shadow: 0 0 0 0 transparent;
	}

	.toggle .tg_content,
	.toggle.alt .tg_content,
	.toggle.show .tg_content {
		display: initial;
	}
	.toggle.auto .tg_content {
		display:		none;
	}

	#toc.hide h3::after,
	#toc.auto h3::after {
		content: '\2630';
	}
	#toc.alt h3::after {
		content: '\203A';
	}

	#toc.hide h3 > span,
	#toc.auto h3 > span {
		display: none;
	}
	#toc.alt h3 > span {
		display: inline-block;
	}

	#footer-layout > footer {
		grid-template-columns: 12pt 1fr 1fr 1fr;
	}
}

@media all and (max-width: @ini_tablet_width) and (prefers-color-scheme: dark) {
	body.darkmode #sidebar {
		.tg_content {
			& {
				background-color:	@ini_background_dark;
				border-color:		@ini_border_dark;
				-moz-box-shadow:		3px 3px 3px @ini_background_site_dark;
				-webkit-box-shadow:		3px 3px 3px @ini_background_site_dark;
				box-shadow:				3px 3px 3px @ini_background_site_dark;
			}
			&::before {
				border-bottom-color:	@ini_border_dark;
			}
			&::after {
				border-bottom-color:	@ini_background_dark;
			}
		}
		hr {
			background:				@ini_link_dark;
			background-image:		linear-gradient(to right, @ini_background_dark, @ini_headlines_dark, @ini_background_dark);
		}
	}
}

/* medium break point: */
@media all and (max-width: @ini_phone_width) {
	#footer-layout {
		& {
			padding-top: .5em;
		}
		& > footer {
			& {
				grid-template-columns: 100%;
				grid-template-rows: auto auto auto auto auto;
			}
			.ftSection {
				grid-column: 1;
				padding: 0 .25em 0 .5em;
				white-space: normal;
			}
			.ftSection ul {
				padding-left: 0;
			}
			.ftSection li {
				display: inline-block;
			}
			.ftSection li::before {
				content: '\00B7';
				display: inline;
				width: .35em;
				padding: 0 .35em;
			}
			.ftSection li:first-child::before {
				content: '';
				padding-left: 0;
			}

			#ftPlaceholder {
				grid-row: 1;
			}
			#ftInclude {
				grid-row: 2;
			}
			#ftSiteTools {
				grid-row: 3;
			}
			#ftPageTools {
				grid-row: 4;
			}
			#ftLicenseButtons {
				grid-column: 1;
				grid-row: 5;
			}

			h4 {
				margin-bottom: .5em;
			}
		}
	}

	main blockquote {
		margin-left:	.15em;
		margin-right:	0;
	}
	main ul, main ol {
		margin-left:	.5em;
		margin-right:	0;
		padding-left:	.75em;
	}	
}