@charset "UTF-8";

/* Stylesheet for Web Apps
 * by Sascha Leib for ad.hominem.info
 * File name: app.css
 */

html, body, * {
	margin:			0;
	padding:		0;
	font-family:	Helvetica,Arial,sans-serif;
}

/* helper classes */
.info-box {
	background-color:	#EEE;
	border:				#999 solid 1px;
	padding:			.25em .25em .25em .5em;
}

/* accessibility fixes */
#skip-link {
	position:			fixed;
	left:				1.5em;
	top:				1.5em;
	width:				auto;
	z-index:			1060;
}
#skip-link a {
    position:			absolute;
	background-color:	#fff;
    height:				1px;
    overflow:			hidden;
	clip:				rect(1px, 1px, 1px, 1px);
}
#skip-link a:focus {
	position:			static;
	display:			inline-block;
    padding:			8px;
	height:				auto;
	clip:				auto;
	overflow:			visible;
}

/* general styles for links: */
a:link,
a:visited {
	color:				#2b73b7;
	text-decoration:	none;
}
a:focus,
input:focus,
select:focus,
textarea:focus {
    outline:	rgba(255,136,0,0.75) solid 2px;;
}	

/* internal links: */
a.wikilink1:link,
a.wikilink1:visited {
	color:		#080;
}
a.wikilink2:link,
a.wikilink2:visited {
	color:		#d30;
}

/* code and similar */
code {
	font-family: Consolas, Code, 'Courier New', Courier, mono;
	border: #CCC solid 1px;
	border-radius: 3pt;
	padding: 0 2pt;
}

body {
	background-color:	#fbfaf9;
}

/* === logo & tools bar === */
header {
	width:				100%;
	max-width:			800px;
	margin:				0 auto;
	display:			grid;
	grid-template-columns: 48px auto 30px;
	column-gap:			4px;
	grid-column-gap:	4px;
}
header #site-logo {
	padding:			3px;
}
header h2 {
	font-size:			16pt;
	line-height: 		1em;
	padding-top:		4pt;
}
header p.claim {
	font-size:			10pt;
	margin:				2pt 0 0 0;
}

/* header: language menu */
header #language-wrapper {
	position:			relative;
}
header #language-menu-button {
	background-color:	#CCC;
	mask:				url('../img/translate.svg') no-repeat center;
	-webkit-mask:		url('../img/translate.svg') no-repeat center;
	mask-size:			20px;
	height:				22px;
	width:				22px;
	padding-left:		22px;
	margin:				5px 8px 0 0;
	overflow:			hidden;
	border:				transparent none;
	cursor:				pointer;
}
header #language-menu-button:hover,
header #language-menu-button:active {
	background-color:	#2b73b7;
}
header #language-menu-button:focus {
	background-color:	rgba(255,136,0,0.75);
    outline: 			rgba(255,136,0,0.75) solid 2px;;
}
header #language-menu {
	display:			none;
	position:			absolute;
	left:				-2.7em;
	top:				36px;
	list-style:			inside none;
	background-color:	#FFF;
	border:				#CCC solid 1px;
	z-index:			18;
	-moz-box-shadow: 2px 2px 2px #CCC;
	-webkit-box-shadow: 2px 2px 2px #CCC;
	box-shadow: 2px 2px 2px #CCC;
}
header #language-menu.open {
	display:			block;
}
header #language-menu::before {
	content: ' ';
	z-index: 19;
	width: 0;
	height: 0;
	position: absolute;
	top: -10px;
	right: 7px;
	border-width: 0 10px 10px;
	border-style: solid;
	border-color: transparent;
	border-bottom-color: transparent;
	border-bottom-color: #CCC;
}
header #language-menu::after {
	content: ' ';
	z-index: 20;
	width: 0;
	height: 0;
	position: absolute;
	top: -8px;
	right: 8.5px;
	border-width: 0 9px 8px;
	border-style: solid;
	border-color: transparent;
	border-bottom-color: transparent;
	border-bottom-color: #fbfaf9;
}

header #language-menu li a:link,
header #language-menu li a:visited {
	display:			block;
	padding:			5px;
	font-size:			12pt;
	z-index:			21;
}
header #language-menu li a:hover,
header #language-menu li a:focus {
	background-color:	#2b73b7;
	color:				#FFF;
}


/* main layout */
main {
	width:				calc (100% - 2px);
	max-width:			800px;
	margin:				0 auto;
	background-color:	#FFF;
    border: 			#CCC solid 1px;
	border-radius:		5px;
}
main > * {
	padding:			6pt 10pt 0 6pt;
}

main h1, main h2, main h3, main h4, main h5, main h6 {
    font-family: Georgia, Palatino, Baskerville, serif;
    color: #333;
    line-height: 1.1em;
	margin:	.25em 0 .5em 0;
}
main h1 {
	font-size:		18pt;
	padding:		.25em 0 .25em 6pt;
}
main h2 {
	font-size:		14pt;
}
main h3 {
	font-size:		12pt;
}

main p {
	font-size:	11pt;
	line-height:1.4em;
	margin:		.75em 0;
}
main ul {
	margin:		.75em 0;
	padding-left: 1.5em;
}
main ul ul {
	margin:		0;
}
main li {
	font-size:	11pt;
	line-height:1.4em;
	margin:		.75em 0;
}

/* panels */
main .altpanel {
	background-color:	#fbfaf9;
	margin:				0 .5em .5em .5em;
	padding-bottom:		.5em;
	box-shadow:			1px 1px 2px 2px #888888;
	border-radius:		3px;
}

main .altpanel button.close-panel {
	float:			right;
	background:		url('../img/close.svg') no-repeat center;
	background-size:	20px;
	height:				22px;
	width:				22px;
	padding-left:		22px;
	border:				transparent none;
	overflow:			hidden;
	cursor:				pointer;
}
/* footer */
footer {
	width:				100%;
	max-width:			800px;
	margin:				0 auto;
}
footer ul {
	margin:			.5em .25em;
	list-style:		none inside;
	white-space-collapse: discard;
	text-align:		center;
}
footer ul li {
	display:		inline-block;
}
footer ul li::before {
	content:		'\B7';
	display:		inline-block;
	width:			1.25em;
	text-align:		center;
}
footer ul li:first-child::before {
	content:		'';
	width:			0;
}

/* Accessibility classes */
.spell-out {
	speak:	spell-out !important;
}

/* dark mode overrides */
@media (prefers-color-scheme: dark) {
	a.wikilink1:link, a.wikilink1:visited { color: #008811; }
	a:link, a:visited { color: #4190D5; }
	body { background-color: #0C0C0D; color: #CCC; }
	header #language-menu { background-color: #232327; border-color: #38383D; box-shadow: 2px 2px 2px rgba(0,0,0,.5); }
	header h2 a:link, header h2 a:visited { color: #4190D5; }
	code { border-color: #38383D; }
	header #language-menu::before { border-bottom-color: #38383D; }
	header #language-menu::after { border-bottom-color: #37373D; }
	main { background-color: #232327; border-color: #38383D; }
	main h1, main h2, main h3, main h4, main h5, main h6 { color: #CCC; }
	main .altpanel { background-color: #37373D; box-shadow: 1px 1px 2px 2px #1C1B22; }
	.info-box { background-color: rgba(0,0,0,.25); border-color: #38383D; }
}