/* *** Stylesheet for Peter Diefenbach Homepage *** */

/* === Global formatting for all devices. === */
body		{ background-color: white; color: black; font-family: Calibri, Tamoha, Arial, sans-serif; }

#skip-link 			{ position: absolute; left: 0; top: 0; background: black; color: white; padding: 0.25em; transform: translateY(-100%); transition: 0.2s transform; z-index: 1001 }
#skip-link:focus	{ transform: translateY(0); }

/* Only for AT */
#sitenav .visually-hidden	{ position: absolute !important; clip: rect(1px, 1px, 1px, 1px) !important; padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden !important; white-space: nowrap !important; }
a.visually-hidden			{ position: absolute !important; clip: rect(1px, 1px, 1px, 1px) !important; padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden !important; white-space: nowrap !important; }

/* --- Style useful for all pages --- */
.nobr				{ white-space: nowrap; hyphens: none; }
div.centered		{ display: flex; justify-content: center; }
p.centered			{ text-align: center; }
dl.spacedEnum dt	{ margin-top: 1ex; }
dl.dtbold dt		{ margin-top: 1ex; font-weight: bold; }
span.error			{ color: red; }
img.noborder		{ border:0; }
img.responsive		{ max-width: 100%; height: auto; }
img.centered		{ display: block; margin-left: auto; margin-right: auto; }
img.portrait		{ display: block; float: right; margin-left: 0.5em; margin-right: 0; }
a.extLink::before,
span.extLinkFake::before{ content: "↪"; }
.pageParamNav a		{ border: 1px solid black; border-radius: 0.5ex; padding: 0px 2px; margin: 1px 0px; 
					  white-space: nowrap; hyphens: none; background-color: #d0d8e0; }

/* #tocHeading			{ background: url(resources/book16.png) no-repeat center right; padding-right: 16px; } */
.noTopBottomMargin	{ margin-top: 0px; margin-bottom: 0px; }
ul.noListStyle		{ list-style-type:none; padding-left:0px; }
ul.noListStyle > li { margin-bottom:1ex;}
.textcentered		{ text-align: center; }
.textleft			{ text-align: left; }
.textright			{ text-align: right; }
ul.implementations	{ margin-top: 0px; margin-bottom: 0px; list-style-type:none; padding-left:1.1em; }

.typewriter			{ font-family: 'Lucida Console', monospace; }

body.private		h1 { background: url(/resources/Sitemap.Private.png)		no-repeat center right; background-size: 24px; padding-right: 24px; }
body.imprint		h1 { background: url(/resources/Sitemap.Imprint.png)		no-repeat center right; background-size: 24px; padding-right: 24px; }
body.quotcoll		h1 { background: url(/resources/book32.png)					no-repeat center right; background-size: 24px; padding-right: 24px; }
body.music			h1 { background: url(/resources/Sitemap.Music.png)			no-repeat center right; background-size: 24px; padding-right: 24px; }
body.bookmark		h1 { background: url(/resources/bookmark32.png)				no-repeat center right; background-size: 24px; padding-right: 24px; }
body.conquest		h1 { background: url(/resources/Sitemap.Conquest.png)		no-repeat center right; background-size: 24px; padding-right: 24px; }
body.empire			h1 { background: url(/resources/Sitemap.Empire.png)			no-repeat center right; background-size: 24px; padding-right: 24px; }
body.kitten.app		h1 { background: url(/resources/Sitemap.Kitten.App.png)		no-repeat center right; background-size: 24px; padding-right: 24px; }
body.kitten.web		h1 { background: url(/resources/Sitemap.Kitten.Web.png)		no-repeat center right; background-size: 24px; padding-right: 24px; }
body.pacman.app		h1 { background: url(/resources/Sitemap.Pacman.App.png)		no-repeat center right; background-size: 24px; padding-right: 24px; }
body.pacman.web		h1 { background: url(/resources/Sitemap.Pacman.Web.png)		no-repeat center right; background-size: 24px; padding-right: 24px; }
body.deinbac		h1 { background: url(/resources/Sitemap.Deinbac.png)		no-repeat center right; background-size: 24px; padding-right: 24px; }
body.troff			h1 { background: url(/resources/Sitemap.Troff.png)			no-repeat center right; background-size: 24px; padding-right: 24px; }
body.poems			h1,
body.poemsfried		h1,
body.puns			h1 { background: url(/resources/Sitemap.Poems.png)			no-repeat center right; background-size: 24px; padding-right: 24px; }
body.poemsaleat		h1,
body.poemsaldyn		h1 { background: url(/resources/Sitemap.Aleatoric.png)		no-repeat center right; background-size: 24px; padding-right: 24px; }
body.quotes			h1 { background: url(/resources/Sitemap.Quotation.png)		no-repeat center right; background-size: 24px; padding-right: 24px; }
body.pictures		h1 { background: url(/resources/Sitemap.Pictures.png)		no-repeat center right; background-size: 24px; padding-right: 24px; }
body.recipes		h1 { background: url(/resources/cookcap32.png)				no-repeat center right; background-size: 24px; padding-right: 24px; }
body.atari8bit		h1 { background: url(/resources/atrlogo2.gif)				no-repeat center right; background-size: 100px 32px; padding-right: 100px; }
body.dsatool.app	h1 { background: url(/resources/Sitemap.DSATool.App.png)	no-repeat center right; background-size: 24px; padding-right: 24px; }
body.dsatool.web	h1 { background: url(/resources/Sitemap.DSATool.Web.png)	no-repeat center right; background-size: 24px; padding-right: 24px; }

ul.recipe > li				{ list-style-image: url(resources/cookcap16.png); }
ul.recipe > li > ul > li 	{ list-style-image: url(resources/cookcap12.png); }
ul.quote > li				{ list-style-image: url(resources/feather16.png); }
ul.quote > li > ul > li		{ list-style-image: url(resources/feather12.png); }
ul.rpg > li					{ list-style-image: url(resources/axe16.png); }
ul.rpg > li > ul > li		{ list-style-image: url(resources/axe12.png); }
ul.poem > li				{ list-style-image: url(resources/feather16.png); }
ul.poem > li > ul > li		{ list-style-image: url(resources/feather12.png); }
ul.tocBookmarks > li		{ list-style-image: url(resources/book16.png); }
ul.tocBookmarks > li > ul > li { list-style-image: url(resources/book12.png); }
ul.bookmarks				{ list-style-type: none; margin-left: 0; padding-left: 0;}
ul.bookmarks > li			{ margin-left: 48px; text-indent: -48px; }
span.oneflag				{ margin-left: 8px; margin-right: 12px; }
span.twoflags				{ margin-left: 0px; margin-right:  4px; }

/* -- Formatting for Java generated help --- */
dd		{ margin-bottom: 12px; }
dd p	{ margin-top: 0px; margin-bottom: 6px; }

/* --- Style used on CV --- */
table.cvSchools > tbody > tr > td { vertical-align: top; }

/* --- Style used for poems --- */
table.inv				{ border-style: none; }
table.inv th			{ border-bottom: 1px solid black; border-top: none;			  border-left: none; border-right: none; }
table.inv td.left		{ border-bottom: 1px solid gray;  border-top: none;			  border-left: none; border-right: none; vertical-align: top; }
table.inv td			{ border-bottom: 1px solid gray;  border-top: none;			  border-left: none; border-right: none; vertical-align: top; }
table.inv tr.first th	{ border-bottom: 1px solid gray;  border-top: 1px solid gray; border-left: none; border-right: none; }
table.inv tr.first td	{ border-bottom: 1px solid gray;  border-top: 1px solid gray; border-left: none; border-right: none; }

table.inv.poem td.best,
table.inv.poem td.language	{ text-align: center; }
table.inv.poem td.title,
table.inv.poem td.category	{ text-align: left; }
table.inv.poem td.date		{ text-align: right; }
/* h2.poemTitle			{ background: url(resources/feather16.png) no-repeat center right; padding-right: 16px; } */
/* h3.poemTitle			{ background: url(resources/feather16.png) no-repeat center right; padding-right: 16px; } */
div.poemDate			{ float: right; text-align: right; margin-bottom: 0ex; margin-top: 0ex; padding-bottom: 0ex; padding-top: 0ex; }
div.poem 				{ margin-top: 1em; margin-bottom: 1em; }
div.verse 				{ margin-left: 60px; margin-right: 40px; margin-top: 1em; margin-bottom: 1em; }
div.verse span.line		{ margin-left: -20px; }
.chords					{ color: darkred; font-weight: bold; }
sup.chords				{ margin-left: 0.5ex; margin-right: 0.5ex; }

/* --- Style used for music --- */
table.music td.best,
table.music td.image,
table.music td.quality	{ text-align: center; }
table.music td.date,
table.music td.duration,
table.music td.fileSize	{ text-align: right; }
table.music td.title,
table.music td.devices	{ text-align: left; }

/* --- Style used for quotes --- */
div.disclaimer	{ font-size: smaller; }
div.quote		{ padding-top: 1ex; padding-bottom: 1ex; }
div.quote p		{ padding-top: 0.5ex; padding-bottom: 0ex; }
div.quoteend	{ border-top: thin groove gray; }
div.quoteoriginal	{ color: #606060; text-shadow: 2px 2px 2px white, 2px 2px 4px gray; }
div.source		{ margin-top: 0ex; margin-bottom: 0ex; margin-left: 5em; font-size: smaller; }
div.explanation	{ margin-top: 0ex; margin-bottom: 0ex; margin-left: 5em; font-size: smaller; font-style: italic; }
ol.upper-roman	{ list-style-type: upper-roman; }
ol.lower-roman	{ list-style-type: lower-roman; }
table.textlike		{ border-style: none; border-collapse: collapse; }
table.textlike caption,
table.textlike th,
table.textlike td	{ border: none; padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px; }

/* --- Style used for pages containing Java applet --- */
#errmsgNoJS					{ color: red; }
#errmsgNoJS.withjs			{ display: none; }
table.unit					{ border-style: none; border-collapse: collapse; }
table.unit th,
table.unit td				{ border-left: 1px solid lightgray; border-right: 1px solid lightgray; padding-left: 1ex; padding-right: 1ex; }
table.unit th				{ border-bottom: 1px solid black; border-top: 1px solid black; font-weight: bold;   text-align: center; }
table.unit th[scope="row"]	{ border-bottom: 1px solid gray;  border-top: 1px solid gray;  font-weight: normal; text-align: left; vertical-align: top; }
table.unit td				{ border-bottom: 1px solid gray;  border-top: 1px solid gray;  font-weight: normal; vertical-align: top; }
table.unit td[rowspan]		{ vertical-align: middle; }
input.joystick				{ width: 4.5ex; }

/* --- Style used for Atari 8bit pages --- */
body.atari8bit dl.atari > dt {
	margin-top: 1ex;
	font-weight: bold;
	color: black;
	background: silver url(resources/fuji.gif) no-repeat center right;
	background-size: 1.25em;
	border-top: solid thin black;
}
body.atari8bit dl.atari > dt::before { content: " //// "; font-style: italic; } 
body.atari8bit dl.atari > dd { margin-left: 0em; } 

dt.section		{ font-style: italic; }
dt.section::after	{ content: ": ";  }

table.usage tr				 th, 
table.usage tr				 td { border-bottom: 1px solid lightgray; vertical-align: top; }
table.usage tr:first-of-type td,
table.usage tr:first-of-type th { border-top: 1px solid lightgray; }
table.usage tr				 td.usageKey	{ color: #004040; font-weight: bold; }

/* --- Style used for pictures --- */
img.thumbnail	{ border: 0; }
td.thumbnail	{ width: 40px; height: 40px; text-align: center; }

/* --- Style used for recipes --- */
tr.ingredient	{ font-weight: bold; border: 0px; }
tr.action		{ font-weight: normal; border: 0px; }
td.amount		{ min-width: 6em; text-align: right; }
td.unit			{ min-width: 6em; text-align: left; }
td.ingredient	{ text-align: left; }
td.action		{ padding-left: 3em; }

div.ingredient		{ clear: left; margin-top: 0ex; margin-left: 6em; font-weight: bold; }
div.action			{ clear: left; margin-top: 0ex; margin-left: 9em; }
div.ingredient div.amountAndUnit	{ float: left; margin-left: -6em; min-width: 6em; overflow: visible; text-align: right; }
* div.ingredient div.amountAndUnit	{ width: 6em; }
span.ingredient	{ padding-left: 0.5em; text-align: left; }
span.category	{ text-decoration: underline dotted gray; }

/* --- Style used for RPG adventures --- */
body.rpg > main,
body.rpg > footer	{ font-family: "Times New Roman", serif; }
body.rpg p			{ margin-top: 0.5ex; margin-bottom: 0.5ex; }
/* body.rpg h1			{ background: url(resources/axe16.png)						no-repeat top right; padding-right: 16px; } */
/* body.rpg h2			{ background: url(resources/axe12.png)						no-repeat top right; padding-right: 12px; } */

body.rpg hgroup,
div.doctitle		{ margin-top: 1em; padding-top: 0.5em; margin-bottom: 1em; }
body.rpg h1,
p.doctitle			{ text-align: center; font-weight: bold; font-size: 250%; }
p.doctitleauthor	{ text-align: center; font-weight: bold; font-size: 125%; }
p.doctitlesub		{ text-align: center; font-weight: bold; font-size: 125%; }
h2.numbered			{ margin-left: 1.5em; text-indent: -1.5em; }
h3.numbered			{ margin-left: 2.6em; text-indent: -2.6em; }
h4.numbered			{ margin-left: 3.8em; text-indent: -3.8em; }
h2.numbered span.chapterNum		{ float: left; min-width: 1.5em; }
h3.numbered span.chapterNum		{ float: left; min-width: 2.6em; }
h4.numbered span.chapterNum		{ float: left; min-width: 3.8em; }
div.info			{ background: gray; color: black; }
div.fairytale p,
p.fairytale					{ font-family: "Apple Chancery", "Zapf Chancery", "Georgia", "Times New Roman", serif; }
div.fairytale p:first-letter,
p.fairytale:first-letter	{ font-size: 180%; }
span.myindex		{ font-weight: bold; }
span.bold			{ font-weight: bold; }

/* Text that can be read to the players aloud: */
p.infoReadAloudIntro{ background: #FFFFFF; color: black; font-style: italic; }
.infoReadAloud		{ background: #FFFFFF; color: black; font-style: italic; }
div.infoReadAloud	{ margin-top: 0px; margin-bottom: 0px; }

/* Info that can be offered to the players if they poke around: */
p.infoDetailIntro	{ background: #FFFFB0; color: black; font-style: italic; margin-top: 0px; margin-bottom: 0px; }
.infoDetail			{ background: #FFFFB0; color: black; }

/* Background info for the game master */
p.infoGMIntro		{ background: #FFE4B0; color: black; font-style: italic; margin-top: 0px; margin-bottom: 0px; }
.infoGM				{ background: #FFE4B0; color: black; border-left: 3px solid black; padding-left: 5px; }

div.note			{ width: 20em; margin: 5px; border: black thin dashed; padding: 5px; }
div.note div.verse				{ margin-left:  20px; margin-top: 0px; margin-bottom: 0px; }
div.note div.verse span.line	{ margin-left: -20px; }

table.attribs th				{ padding-bottom: 0ex; padding-top: 0ex; margin-bottom: 0ex; margin-top: 0ex; border-bottom: 1px solid black; text-align: center; }
table.attribs td.name			{ padding: 0ex 0.5em; margin-bottom: 0ex; margin-top: 0ex; border-bottom: 1px solid gray;  vertical-align: top; text-align: left;  }
table.attribs td.value			{ padding: 0ex 0.5em; margin-bottom: 0ex; margin-top: 0ex; border-bottom: 1px solid gray;  vertical-align: top; text-align: right; }
table.multicolumn th.multicolumn	{ border-left:  1px solid gray; border-right:  1px solid gray; }
table.multicolumn td.name		{ border-left:  1px solid gray; }
table.multicolumn td.value		{ border-right: 1px solid gray; }

table.rumors td.text,
table.rumors td.truth	{ vertical-align: top; }

table.properties th	{ text-align: left; vertical-align: top; }
table.properties td	{ text-align: left; vertical-align: top; }

table.changes		{ color: green; }
table.changes tr	{ margin-bottom: 0ex; margin-top: 0ex; padding-bottom: 0ex; padding-top: 0ex; }
table.changes th,
table.changes td	{ text-align: left; vertical-align: top; margin-bottom: 0ex; margin-top: 0ex; padding-bottom: 0ex; padding-top: 0ex; }

table.history th	{ border-bottom: 1px solid black; }
table.history td	{ border-bottom: 1px solid gray; vertical-align: top; padding: 0.0em 0.5em; }
table.history td.when	{ text-align: right; }
table.history td.what	{ text-align: left;  }

table.translation th	{ text-align: left; border-bottom: 1px solid black; }
table.translation td	{ text-align: left; border-bottom: 1px solid gray; vertical-align: top; }

table.party th		{ padding: 0.0em 0.5em; border-bottom: 1px solid black; }
table.party td		{ padding: 0.0em 0.5em; border-bottom: 1px solid gray; vertical-align: top; text-align: left; }

div.mapLegend				{ border: 1px dotted black; padding: 3px; }
div.mapLegend div.caption	{ text-align: center; }
div.mapLegend div.multicolumn {
  -webkit-column-count: 20;
          column-count: 20;
  -webkit-column-width: 150px;
          column-width: 150px;
}

span.mapLegendSymbol{ width:30px; height:25px; text-align: center; }
img.mapLegendSymbol	{ border:0; width:25px; height:25px; }

table.mapSpots td				{ vertical-align: top; }
table.mapSpots td.symbol		{ text-align: right; }
table.mapSpots td.description	{ text-align: left; }

span.meta			{ color: green; }

.rpgMeta			{ color: green; }
p.rpgDateRL			{ color: green; font-weight: bold; text-align: right; margin-bottom: 0px; }
p.rpgDate			{ text-align: right; margin-top: 0px; margin-bottom: 0px; }

/* --- Style used for DSA tool --- */
/* body.dsatool h1		{ background-image: none; } */
p.response			{ background: yellow; color: red; font-weight: bold; }
p.debugInfo			{ color: gray; }
span.mainMenuTitle	{ font-weight: bold; }
span.subMenuTitle	{ font-weight: bold; }
span.tabbar			{ margin: 0px 2px;  }
span.tab			{ border-top: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; 
					  border-top-left-radius: 0.5ex; border-top-right-radius: 0.5ex; padding: 0px 2px; margin: 1px -2px; 
					  white-space: nowrap; hyphens: none; }
span.tab.selected	{ background-color: white; }
body.dsatool.web span.button		{ border: 1px solid black; border-radius: 0.5ex; padding: 0px 2px; margin: 1px 0px; 
									  white-space: nowrap; hyphens: none; }
body.dsatool.web span.button.ext	{ background-color: yellow; }

/* Model layout */
body.dsatool form		{ font-family: Tamoha, Arial, sans-serif; font-size: smaller; }
body.dsatool table		{ vertical-align: top; padding: 3px; margin: 0px; }
body.dsatool th			{ vertical-align: top; }
body.dsatool td			{ vertical-align: top; }
table.credentials		{ padding: 0px; margin: 0px; border-style: none; }
table.credentials tr.first td.what { padding: 0px;     margin: 0px; border-bottom: 1px solid #A07000; border-top: 1px solid #A07000; border-left: none; border-right: none; vertical-align: top; }
table.credentials tr.first td.who  { padding: 0px 1em; margin: 0px; border-bottom: 1px solid #A07000; border-top: 1px solid #A07000; border-left: none; border-right: none; vertical-align: top; }
table.credentials tr	   td.what { padding: 0px;     margin: 0px; border-bottom: 1px solid #A07000; border-top: none;				 border-left: none; border-right: none; vertical-align: top; }
table.credentials tr	   td.who  { padding: 0px 1em; margin: 0px; border-bottom: 1px solid #A07000; border-top: none;				 border-left: none; border-right: none; vertical-align: top; }

table.dsatool		{ margin: 0px; border: none /* 1px inset  black*/; padding:  0px; }
table.dsatool th	{ margin: 0px; padding: .3em; border-bottom: 1px solid black; border-top: 1px solid gray; }
table.dsatool td	{ margin: 0px; padding: .3em; border-bottom: 1px solid black; }
select#map_zoom		{ text-align: right; }
div.terrain div.multicolumn {
  -webkit-column-count: 20;
          column-count: 20;
  -webkit-column-width: 125px;
          column-width: 125px;
}

/* Help layout */
span.button				{ background: #e0e0e0; color: black; border: groove thin gray; padding: 1px; }

/* --- Formatting for advent subdomain --- */
body.advent table.doors	{ border-spacing: 2ex; }
body.advent table.doors tr td { 
	font-weight: bold; text-align: right; 
	padding:	1ex; 
	border-left:	thin solid gray; 
	border-top:		thin solid gray; 
	border-bottom:	thin solid gray; 
	border-right:	thin dashed gray; 
}
body.advent table.doors tr td.open:focus,
body.advent table.doors tr td.open:hover,
body.advent table.doors tr td.open:active {
	border-left:	thin solid white; 
	border-top:		thin solid lightGray; 
	border-bottom:	thin solid lightGray; 
	border-right:	thin dashed lightGray; 
}
body.advent table.crosswords tr td { 
	font-weight: bold; text-align: center; 
	padding:	1ex; 
	border:		thin solid gray; 
}

/* === For printers completely omit the sitemap and other noisy stuff. === */
@media print {
	#sitenav, 
	.pagenav, 
	.pageParamNav,
	div.audio,
	img.campaign	{ display: none; }

	/* --- Style used for RPG adventures --- */
	hr#hrPreModel,
	hr#hrPreActions	{ display: none; }
	p.mainMenu,
	p.create		{ display: none; }
	body.dsatool form { display: none; }
}

/* === For all screens === */
@media screen {
	body { background-image: url(resources/P9270090-c1v.jpg); background-repeat: repeat-y; background-attachment: fixed; background-position: left top; }

	/* --- https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zugängliche_Dropdown-Navigation --- */
	body.html5nav	{ margin-top: 2.2em; } /* Enough room for the navigation bar */
	#sitenav		{ top: 0.2em; left: 0.3em; }
	#sitenav *, 
	#sitenav a		{ background-color: #d0d8e0; color: black; }
	#sitenav ul		{ list-style-type: none; margin:0; padding-top:.2em; padding-left:.5em; padding-right:1em; border-radius: .5em; opacity: 100%; border-bottom: .3em; }
	#sitenav ul ul	{ margin-left: 7em; margin-top: -3.1em; padding-left: .1em; border-width: 2pt; border-style: ridge; border-color: #b8c8d0; }
	#sitenav li		{ min-height: 1.3em; padding: 0.1em 0.4em ; margin: 0em; white-space: nowrap; vertical-align: middle; color: #606060; }
	#sitenav li.heading			{ font-weight: bold; }
	#sitenav li.heading,
	#sitenav li.langselect,
	#sitenav li.level0			{ vertical-align: baseline; }
	#sitenav li.level1			{ padding-left: 1.5em; }
	#sitenav li.level1::before	{ content: '▫ '; }
	#sitenav li a	{ display: inline-block; margin-top:.1em; margin-bottom:.1em; min-width: 100%; }
	#sitenav li a, 
	#sitenav li summary { line-height: 0.4em; outline: none; }
	#sitenav li a:hover, 
	#sitenav li summary:hover, 
	#sitenav li a:focus, 
	#sitenav li summary:focus { outline: 1px solid #8080ff; }
	#sitenav li a	{ text-decoration: none; }
	#sitenav li[aria-current] a[href='#']			{ color: #4040ff; background-color: #dae4e8; }
/*	#sitenav li[aria-current] a[href='#']::after	{ content: "●"; } */
	#sitenav ul details summary::after { font-family: Tamoha, Arial, sans-serif; vertical-align: middle; }
	#sitenav ul li[aria-current]		details:not([open]) summary::after { color:blue; content: " ▸" /* url('/resources/Nav.Horizontal.Expand.Selected.png') */; }
	#sitenav ul li:not([aria-current])	details:not([open]) summary::after { content: " ▹" /* url('/resources/Nav.Horizontal.Expand.png') */; }
	#sitenav ul li[aria-current]		details[open]		summary::after { color:blue; content: " ◂" /* url('/resources/Nav.Horizontal.Collapse.Selected.png') */; }
	#sitenav ul li:not([aria-current])	details[open]		summary::after { content: " ◃" /* url('/resources/Nav.Horizontal.Collapse.png') */; }
	#sitenav > details:not([open])	> summary::before { color:blue; content: "▾" /* url('/resources/Nav.Vertical.Expand.Selected.png') */; } 
	#sitenav > details[open]		> summary::before { color:blue; content: "▴" /* url('/resources/Nav.Vertical.Collapse.Selected.png') */; } 
	#sitenav > details		{ border: 1px solid #8080ff; border-radius: .2em; max-width: 17em/* -webkit-max-content; max-width: -moz-max-content; max-width: max-content*/;  padding: .2em; }
	#sitenav > details > ul	{ margin-left: -.5em; margin-top: .3em; }
	#sitenav summary		{ cursor: pointer; max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; max-height: 1.4em; }
	#sitenav summary::-webkit-details-marker { display: none; }
	#sitenav summary		{ list-style-type:  none; }
	#sitenav.withjs			{ position: absolute; }
	#sitenav.withjs ul		{ position: absolute; }

	div.contentC			{ padding-top: .2em; } /* a bit more distance to sitenav */
	.pagenav 				{ float: right; border-left: 1px solid #8080ff; padding-left: 0.4em; margin-left: 0.4em; }
	div.scrollable			{ overflow-x:auto; } /* responsive design for wide tables */

	/* --- Style used for RPG adventures --- */
	body.rpg			{ background: #703800; color: yellow; }
	body.rpg > main   a:link,
	body.rpg > footer a:link	{ color: white; }
	body.rpg > main   a:visited,
	body.rpg > footer a:visited	{ color: #FFA080; }
	body.rpg > main   a:focus,
	body.rpg > footer a:focus	{ color: red; }
	body.rpg > main   a:hover,
	body.rpg > footer a:hover	{ color: red; }
	body.rpg > main   a:active,
	body.rpg > footer a:active	{ color: red; }
	body.rpg > main   .pagenav,
	body.rpg > footer .pagenav 	{ float: right; border-left: 1px solid #A05000; padding-left: 0.4em; margin-left: 0.4em; }

	body.rpg div.contentC			{ background: #FFFFD0; color: black; border-top: 2em; border-bottom: 1em; margin-top: 0px; margin-bottom: 0px; margin-right: 0px; text-align: left; }

	body.rpg div.contentC a:link	{ color: #804000; }
	body.rpg div.contentC a:visited	{ color: #C04000; }
	body.rpg div.contentC a:focus	{ color: red; }
	body.rpg div.contentC a:hover	{ color: red; }
	body.rpg div.contentC a:active	{ color: red; }
	body.rpg div.contentC table		{ color: black; }
	div.fairytale p:first-letter,
	p.fairytale:first-letter		{ color: #808000; background: #FFFF70;  }

	/* --- Formatting for advent subdomain --- */
	body.advent { background: #005000; color: white; /* font-family: "Times New Roman", serif; */ }
	body.leonie { background: #005000 url(/advent/resources/backgroundLeonie.jpg) no-repeat; }
	body.family { background: #005000 url(/advent/resources/backgroundFamily.png) no-repeat; }
	body.advent a:link		{ color: yellow;  }
	body.advent a:visited	{ color: orange; }
	body.advent a:focus		{ color: #FF3030; }
	body.advent a:hover		{ color: #FF3030; }
	body.advent a:active	{ color: #FF3030; }
	body.advent table.doors tr td.open { 
		background-color: #106010; /* Fallback for browsers that don't support opacity */
		background-color: rgba(16, 96, 16, 50%); 
		color: yellow; 
	}
	body.advent table.doors tr td.open:focus,
	body.advent table.doors tr td.open:hover,
	body.advent table.doors tr td.open:active {
		background-color: #106010; /* Fallback for browsers that don't support opacity */
		background-color: rgba(16, 96, 16, 100%); 
	}
	body.advent table.doors tr td.closed {
		background-color: #005000; /* Fallback for browsers that don't support opacity */
		background-color: rgba(0, 80, 0, 50%); 
		color: gray; 
	}
	body.advent table.crosswords tr td.unused	{ background: #106010; }
}

/* === For small screens === */
@media screen and (max-width: 849px) {
	#sitenav ul	{ border-width: 2pt; border-style: ridge; border-color: #b8c8d0; }
	#sitenav li.langselect	{ border-top: thin solid gray; }
	#sitenav ul li 			{ white-space: nowrap; }
	#sitenav ul li details summary { white-space: nowrap; min-width: 60%; }
	img.portrait			{ display: block; float: inherit; margin-left: auto; margin-right: auto; }
	div.verse				{ margin-left: 20px; margin-right: 0px; }
	div.verse span.line		{ margin-left: -20px; }
	body.rpg div.contentC	{ padding-left: 4px; padding-right: 4px; padding-bottom: .5em; }
	div.poemDate			{ float: none; text-align: right; margin-bottom: 0ex; margin-top: 0ex; padding-bottom: 0ex; padding-top: 0ex; }

	table.music td.quality,
	table.music th.quality,
	table.music td.devices,
	table.music th.devices	{ display: none; }
}

/* === For wide screens === */
@media screen and (min-width: 850px) {
	#sitenav { top: 0; left: 0; right: 0; }
	#sitenav.withjs.large summary#navrootsummary { display: none; } /* hack for Firefox to explicitly hide Site Navigation summary block on wide displays with javascript */
	#sitenav > details { border: none; border-radius: 0; padding: 0; } 
	#sitenav > details > ul,
	#sitenav > details > ul > li { display: inline-block; }
	#sitenav ul li[aria-current]		details:not([open])	summary::after { color:blue;  content: "▾" /* url('/resources/Nav.Vertical.Expand.Selected.png') */; }
	#sitenav ul li:not([aria-current])	details:not([open])	summary::after { content: "▿" /* url('/resources/Nav.Vertical.Expand.png') */; }
	#sitenav ul li[aria-current]		details[open]		summary::after { color:blue;  content: "▴" /* url('/resources/Nav.Vertical.Collapse.Selected.png') */; }
	#sitenav ul li:not([aria-current])	details[open]		summary::after { content: "▵" /* url('/resources/Nav.Vertical.Collapse.png') */; }
	#sitenav > details > ul { width: 100%; box-sizing: border-box; }
	#sitenav > details > ul { margin-left: 0; margin-top: 0; border-radius: 0; }
	#sitenav ul ul { margin-left: -.5em; margin-top: .2em; padding-left: .5em; border-radius: 0 0 .5em .5em; }
	#sitenav li.heading			{ padding-left: 0; }
	#sitenav li.langselect		{ float: right; padding-right: 0; }

	/* --- Style used for RPG adventures --- */
	body.rpg div.contentL	{ background: url(/resources/scrolll.png) repeat-y left;  padding-left:  16px; }
	body.rpg div.contentR	{ background: url(/resources/scrollr.png) repeat-y right; padding-right: 16px; }
	body.rpg div.contentC	{ padding-left: 8px; padding-right: 8px; padding-bottom: .5em;}
}

/* *** Formatting for HTML5 pages *** */
/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 50px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0, 0, 0); /* Fallback color */
	background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	padding: 0;
	border: 1px solid #888;
	width: 90%;
	overflow-x:auto;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s;
}

/* Add Animation */
@-webkit-keyframes animatetop {
	from {top: -300px; opacity: 0} 
	to	{top: 0; opacity: 1}
}

@keyframes animatetop {
	from {top: -300px; opacity: 0}
	to	{top: 0; opacity: 1}
}

/* The Close Button */
.close {
	color: white;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

.modal-header {
	padding: 2px 12px;
	background-color: #8080ff;
	color: white;
}

.modal-body {padding: 10px 16px;}

.modal-footer {
	padding: 10px 16px;
	background-color: #8080ff;
	color: white;
}

h1.modal-title {
	font-size: 16px;
	font-weight: bold;
}

/* *** W3schools HowTo for a slideshow gallery *** */
/* removed as it disturbs all other pages
* {
	box-sizing: border-box;
}
*/
/* Position the image container (needed to position the left and right arrows) */
.container {
	position: relative;
}
/* Hide the images by default */
.mySlides {
	display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
	cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
	cursor: pointer;
	position: absolute;
	top: 40%;
	width: auto;
	padding: 16px;
	margin-top: -50px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	border-radius: 0 3px 3px 0;
	user-select: none;
	-webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}

/* Container for image text */
.caption-container {
	text-align: center;
	background-color: #222;
	padding: 2px 16px;
	color: white;
}

.row:after {
	content: "";
	display: table;
	clear: both;
}

/* Six columns side by side */
.column {
	float: left;
	width: 16.66%;
}

/* Add a transparency effect for thumbnail images */
.demo {
	opacity: 0.6;
}

.active,
.demo:hover {
	opacity: 1;
}

/* --- That's it folks --- */