/**
 * 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;
}
body {
	background-color:	@ini_background_site;
	font-size:			@ini_default_font_size;
	letter-spacing:		@ini_default_letter_spacing;
}

#skip-link {
	display:		none;
}

.sronly {
	display:		none;
}
div.no {
    display: inline;
    margin: 0;
    padding: 0;
}

#globalTools a:link {
	text-decoration:	none;
}

#gSiteTools {
	justify-self: start;
}
#gSiteTools select {
	display:	none;
}
#gUserTools {
	justify-self:		end;
	padding:			2pt 5pt 2pt 0;
}
#gUserTools ul {
	list-style:			none inside;
	display:			block;
	padding:			.5em;
}
#gUserTools ul li {
	display:			inline;
}
#gUserTools ul li::before {
	content:		'\00B7';
	display:		inline-block;
	width:			.35em;
	padding-right:	.35em;
}
#gUserTools 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;
	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:			10px;
	padding:			.25em 0 0 .5em;
	display:			grid;
	grid-template-columns:	70px auto;
	grid-template-rows:	auto auto;
}
#siteLogo .logo {
	grid-column:		1;
	grid-row:			1 / span 2;
}
#siteLogo .logo img {
	width:	64px;
	height:	auto;
}
#siteLogo .title {
	grid-column:		2;
	grid-row:			1;
	align-self:			center;
	font-size:			14pt;
	line-height:		1em;
	margin:				0;
}
#siteLogo .title * {
	font-family:		@ini_alt_fonts;
}
#siteLogo .claim {
	grid-column:		2;
	grid-row:			2;
	align-self:			start;
	font-size:			10pt;
}

#globalTools {
	grid-column:		2 / span 2;
	grid-row:			1;
	text-align:			right;
	font-size:			10pt;
}
#phSearch {
	grid-column:		2;
	grid-row:			2;
	padding:			.5em 0;
}
#phSearch form {
}
#phSearch 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;
}
#phSearch form>div 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;
	outline:			transparent solid 2pt;
}
#phSearch form>div input:focus {
	outline-color:		@ini_focus_color;
}
#phSearch form>div button {
	border:				transparent solid 1pt;
	background:			transparent none no-repeat center;
	background-size:	13pt;
	color:				transparent;
	width:				19pt;
	border-radius:		3pt;
	overflow:			hidden;
	margin:				1pt 1pt 1pt 0;
	outline:			transparent solid 2pt;
}
#phSearch form>div button[type=reset] {
	background-image:	url('images/delete.svg');
	border-right:		@ini_border solid 1pt;
}	
#phSearch form>div button[type=submit] {
	background-image:	url('images/search.svg');
}	
#phSearch form>div button:hover {
	background-color:	@ini_background_neu;
	border-color:		@ini_border;
}
#phSearch form>div button:focus {
	outline-color:		@ini_focus_color;
	border-color:		@ini_border;
}

#phSearch form .search-popup {
	height:				5pt;
	margin-right:		38pt;
}
#phSearch form #qsearch__out {
	left:				0;
	width:				auto;
	padding:			0;
	-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);
}

#qsearch__out {
	position:			relative;
	white-space:		nowrap;
	font-size:			small;
	background-color:	@ini_background_site;
}
#qsearch__out strong {
	display:			none;
	padding:			2pt;
	font-weight:		normal;
}
#qsearch__out ul {
	background-color:	@ini_background_neu;
	border:				@ini_border solid 1px;
	border-top-width:	0;
	max-height:			11em;
	overflow:			hidden auto;
}
#qsearch__out li {
	border-top:			@ini_border solid 1px;
}
#qsearch__out li a {
	display:			block;
	padding:			4pt 0 4pt 6pt;
}

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

#main-layout {
	width:				100%;
	max-width:			@ini_site_width;
	margin:				0 auto;
	display:			grid;
	grid-template-columns:	@ini_sidebar_width auto;
	place-items:		stretch;
}

#sidebar {
	padding:			1em .25em 0 1em;
}
#sidebar .content {
	line-height:		1.7em;
	font-size:			small;
}
#sidebar p,
#sidebar ul {
}
#sidebar ul {
	list-style:			square outside;
	padding-left:		1.25em;
}
#sidebar ul li {
	color:				@ini_text_alt;
	padding:			.1em 0;
}
#sidebar .curid {
	font-weight:		bold;
}
#sidebar h4 {
	font-size:			1rem;
	margin:				0.5em;
}
#sidebar .tg_button {
	display:			none;
}
#sidebar 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-bottom:		1.5em;
}
#navBreadCrumbs ol {
	list-style:			decimal outside;
	padding-left:		2em;
}

main {
	width:				e("calc(90% - 5px)");
	background-color:	@ini_background;
	color:				@ini_text;
	line-height:		1.5em;
	padding:			1.5em 5% .75em 5%;
	border:				@ini_border solid 1px;
	-moz-box-shadow:	2px 2px 2px 2px rgba(0,0,0,.5);
	-webkit-box-shadow:	2px 2px 2px 2px rgba(0,0,0,.5);
	box-shadow:			2px 2px 2px 2px rgba(0,0,0,.5);
}
#navYouAreHere {
	display:			flex;
	flex-flow:			row nowrap;
	position:			relative;
	top:				0;
	left:				0;
	height:				16pt;
	overflow:			hidden;
	white-space:		nowrap;
}
#navYouAreHere 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;
}

#navYouAreHere 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;
}
#navYouAreHere ol li {
	display:			inline;
	margin-bottom:		0;
}
#navYouAreHere ol li.home {
	min-width:		14px;
	overflow:		hidden;
}
#navYouAreHere ol li .curid {
	display:		none;
}

#navYouAreHere ol li:before {
	content:		'\25B8';
	padding:		0 2pt;
	color:			@ini_text_alt;
}
#navYouAreHere ol li.home::before {
	content:		'';
	padding:		0;
}
#navYouAreHere ol li.home a {
	display:		inline-block;
	width:			14px;
	overflow:		hidden;
}
#navYouAreHere ol li.home a::before {
	content:		' ';
	display:		inline-block;
	width:			14px;
	height:			1em;
	background:		transparent url('images/home.svg') no-repeat left center;
}

body.home #navYouAreHere {
	display:		none;
}

main>footer {
	margin-top:			2em;
	text-align:			right;
}
main>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;
}

/* Table of Contents */
#toc {
	clear:				both;
	float:				right;
    width:				auto;
    max-width:			@ini_sidebar_width;
	background-color:	transparent;
	line-height:		1.5em;
}
#toc ol {
	list-style:			none inside;
	padding:			0 .5em;
	margin:				0;
}
#toc>div {
	padding:			.5em 0 .5em .5em;
	border-left:		@ini_border solid 1pt;
}
#toc ol li {
	font-size:			small;
	text-indent:		-1em;
	padding-left:		1em;
	line-height:		1.25em;
	margin:				.5em 0;
}
#toc h3 {
	margin:				0;
    width:				@ini_sidebar_width;
	height:				1.2em;
	font-family:		@ini_default_fonts;
	font-size:			small;
	overflow:			hidden;
	font-weight:		bold;
	line-height:		1.5em;
	border-left:		@ini_border solid 1pt;
}
#toc.closed h3 {
}
#toc.mobile.closed h3 {
}
#toc h3::before {
	content:			'\2013';
	display:			inline-block;
	width:				1.5em;
	text-align:			center;
}
#toc.closed h3::before {
	content:			'\2630';
}
#toc.mobile.closed h3::before {
	content:			'\2013';
}

/* edit buttons */
main .secedit {
    float:				right;
    margin-top:			-22pt;
	line-height:		0;
}
main .secedit button {
	border:				@ini_border solid 1pt;
	background-color:	transparent;
	color:				transparent;
	width:				20pt;
	height:				20pt;
	border-radius:		50%;
	font-size:			0;
	cursor:				pointer;
}
main .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;
}
main .secedit button:hover {
	background-color:	@ini_highlight;
	border:				@ini_text_alt solid 1pt;
}
main .secedit button:focus {
	background-color:	@ini_highlight;
	border:				@ini_focus_color solid 2px;
	outline:			transparent none 0;
}
main .secedit button:hover::before {
}

main .section_highlight {
	background-color:	@ini_highlight;
    border:				solid @ini_highlight;
    border-width:		0 .5em;
	border-radius:		.5em;
	margin:				0 -.5em;
}

/* math fonts */
main math,
main .math,
main .math * {
	font-family:		@ini_math_fonts;
	font-size:			12pt;
	line-height:		1em;
}

#footer-layout {
	padding-top:		1.5em;
}
#footer-layout>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;
}
#footer-layout>footer .ftSection {
	padding-left:		1em;
}
#footer-layout>footer .ftSection ul {
	list-style:			none inside;
	padding-left:		.5em;
}
#footer-layout>footer .ftSection ul li {
	margin-bottom:		.5em;
	font-size:			small;
}
#footer-layout>footer h4 {
	color:				@ini_headlines;
	margin:				0 0 1em 0;
	font-family:		@ini_alt_fonts;
	font-size:			1rem;
}

#footer-layout>footer #ftPlaceholder>* {
	display:			none;
}

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

/* togglers */
.toggle .tg_button.active {
	color:			@ini_link;
	cursor:			pointer;
}
.toggle.closed .tg_content {
	display:		none;
}

/* 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;
	}
	#header-layout>header #phTools {
		grid-row:			3;
		grid-column:		1 / span 2;
	}
	#header-layout>header #phInclude {
		grid-row:			4;
		grid-column:		1 / span 2;
	}
	
	#qsearch__out ul {
		max-height:		100%;
	}
	
	#main-layout {
		display:			block;
	}
	
	#sidebar {
		width:					100%;
		margin-left:			.5em;
		padding:				0;
		position:				relative;
		top:					-2.25em;
		height:					.25em;
	}

	#sidebar .tg_button {
		display:				block;
		font-size:				1.5em;
		width:					2em;
		height:					1.5em;
		overflow:				hidden;
		color:					@ini_link;
		background-color:		@ini_border;
		border:					transparent none 0;
		border-radius:			.5em .5em 0 0;
	}
	#sidebar.closed .tg_button {
		background-color:		transparent;
	}

	#sidebar .tg_button::before {
		content:				'\2715';
		display:				inline-block;
		width:					2em;
		height:					2em;
		color:					@ini_link;
		text-align:				center;
	}
	#sidebar.closed .tg_button::before {
		content:				'\2630';
	}

	#sidebar .tg_content {
		width:					97%;
		min-width:				@ini_sidebar_width;	
		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;

	}
	#sbNavigation {
		padding-left:		.5em
	}
	


	#sidebar h3,
	#sidebar h4	{
		font-size:			1rem;
		padding:			.25em 0 .25em 1em;
	}
	#sidebar ul,
	#sidebar ol	{
		margin-left:		1em;
	}
	#sidebar p,
	#sidebar li	{
		font-size:			small;
		padding:			.25em 0 .25em .25em;
	}
	
	main {
		width:				auto;
		box-shadow:			0 0 0 0 transparent;
	}

	.toggle.mobile.closed .tg_content {
		display:		none;
	}


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

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

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

	#footer-layout>footer h4 {
		margin-bottom:		.5em;
	}

}