/**
 * This contains the content styling
 * @author Sascha Leib <sascha@leib.be>
 */
 
main {
	/* simplified spacing in boxes: */
	.outline > *, .box > *, .info > *, .tip > *, .important > *,
	.alert > *, .help > *, .download > *, .todo > * {
		margin: .5em 0;
	}

	/* plain box and outline are different from the other styles: */
	.outline, .box {
		box-sizing: border-box;
		padding: .25em 1em .5em 1em;
		margin: 1em 0;
	}
	.outline {
		border: @ini_border solid 2pt;
	}
	.box {
		background-color: @ini_background_alt;
	}

	/* icon-box classes: */
	.info, .tip, .important, .alert, .help, .download, .todo {
		background: transparent .25em center no-repeat;
		background-size: 1em;
		box-sizing: border-box;
		border: @ini_border solid 1px;
		border-left-width: 4pt;
		border-radius: .25em;
		padding: 1pt .25em 1pt 1.5em;
		margin: .5em 0;
		/* position: relative; */
	}
	
	.outline { border: #CCC solid 2pt; padding-left: .5em; }
	.outline.filled { background-color: #EEE; }

	.info {
		border-left-color: #0085F2;
		background-color: #E5F3FE;
		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEzLDlIMTFWN0gxM00xMywxN0gxMVYxMUgxM00xMiwyQTEwLDEwIDAgMCwwIDIsMTJBMTAsMTAgMCAwLDAgMTIsMjJBMTAsMTAgMCAwLDAgMjIsMTJBMTAsMTAgMCAwLDAgMTIsMloiIHN0eWxlPSJmaWxsOiMwMDg1RjI7IiAvPjwvc3ZnPg==");
	}
	
	.tip {
		border-left-color: #FFCA28;
		background-color: #FFF9C4;
		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyLDZBNiw2IDAgMCwxIDE4LDEyQzE4LDE0LjIyIDE2Ljc5LDE2LjE2IDE1LDE3LjJWMTlBMSwxIDAgMCwxIDE0LDIwSDEwQTEsMSAwIDAsMSA5LDE5VjE3LjJDNy4yMSwxNi4xNiA2LDE0LjIyIDYsMTJBNiw2IDAgMCwxIDEyLDZNMTQsMjFWMjJBMSwxIDAgMCwxIDEzLDIzSDExQTEsMSAwIDAsMSAxMCwyMlYyMUgxNE0yMCwxMUgyM1YxM0gyMFYxMU0xLDExSDRWMTNIMVYxMU0xMywxVjRIMTFWMUgxM000LjkyLDMuNUw3LjA1LDUuNjRMNS42Myw3LjA1TDMuNSw0LjkzTDQuOTIsMy41TTE2Ljk1LDUuNjNMMTkuMDcsMy41TDIwLjUsNC45M0wxOC4zNyw3LjA1TDE2Ljk1LDUuNjNaIiBzdHlsZT0iZmlsbDojRkY5ODAwOyIgLz48L3N2Zz4=");
	}
	
	.important {
		border-left-color: #FF9800;
		background-color: #FFE0B2;
		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEzIDE0SDExVjlIMTNNMTMgMThIMTFWMTZIMTNNMSAyMUgyM0wxMiAyTDEgMjFaIiBzdHlsZT0iZmlsbDojRjU3QzAwOyIgLz48L3N2Zz4=");
	}

	.alert {
		border-left-color: #B71C1C;
		background-color: #FFCDD2;
		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTguMjcsM0wzLDguMjdWMTUuNzNMOC4yNywyMUgxNS43M0wyMSwxNS43M1Y4LjI3TDE1LjczLDNNOC40MSw3TDEyLDEwLjU5TDE1LjU5LDdMMTcsOC40MUwxMy40MSwxMkwxNywxNS41OUwxNS41OSwxN0wxMiwxMy40MUw4LjQxLDE3TDcsMTUuNTlMMTAuNTksMTJMNyw4LjQxIiBzdHlsZT0iZmlsbDojQjcxQzFDOyIgLz48L3N2Zz4=");
	}

	.help {
		border-left-color: #7986CB;
		background-color: #E8EAF6;
		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE1LjA3LDExLjI1TDE0LjE3LDEyLjE3QzEzLjQ1LDEyLjg5IDEzLDEzLjUgMTMsMTVIMTFWMTQuNUMxMSwxMy4zOSAxMS40NSwxMi4zOSAxMi4xNywxMS42N0wxMy40MSwxMC40MUMxMy43OCwxMC4wNSAxNCw5LjU1IDE0LDlDMTQsNy44OSAxMy4xLDcgMTIsN0EyLDIgMCAwLDAgMTAsOUg4QTQsNCAwIDAsMSAxMiw1QTQsNCAwIDAsMSAxNiw5QzE2LDkuODggMTUuNjQsMTAuNjcgMTUuMDcsMTEuMjVNMTMsMTlIMTFWMTdIMTNNMTIsMkExMCwxMCAwIDAsMCAyLDEyQTEwLDEwIDAgMCwwIDEyLDIyQTEwLDEwIDAgMCwwIDIyLDEyQzIyLDYuNDcgMTcuNSwyIDEyLDJaIiBzdHlsZT0iZmlsbDojMUEyMzdFOyIgLz48L3N2Zz4=");
	}

	.download {
		border-left-color: #66BB6A;
		background-color: #E8F5E9;
		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJDMTcuNSAyIDIyIDYuNSAyMiAxMkMyMiAxNy41IDE3LjUgMjIgMTIgMjJDNi41IDIyIDIgMTcuNSAyIDEyQzIgNi41IDYuNSAyIDEyIDJNOCAxN0gxNlYxNUg4VjE3TTE2IDEwSDEzLjVWNkgxMC41VjEwSDhMMTIgMTRMMTYgMTBaIiBzdHlsZT0iZmlsbDojMUI1RTIwOyIgLz48L3N2Zz4=");
	}
	
	.todo {
		border-left-color: #4DD0E1;
		background-color: #E0F7FA;
		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3IDE1TDE4IDE5SDIxVjIySDNWMTlINkw3IDE1SDE3TTE1IDhMMTYgMTJIOEw5IDhIMTVNMTMgMUwxNCA1SDEwTDExIDFIMTNaIiBzdHlsZT0iZmlsbDojRjQ1MTFFOyIgLz48L3N2Zz4=");
	}
	
	/* modify spacing around headlines within blocks */
	.outline h1, .outline h2, .outline h3, .outline h4, .outline h5, .outline h6, 
	.info h1, .info h2, .info h3, .info h4, .info h5, .info h6, 
	.tip h1, .tip h2, .tip h3, .tip h4, .tip h5, .tip h6, 
	.important h1, .important h2, .important h3, .important h4, .important h5, .important h6, 
	.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6, 
	.help h1, .help h2, .help h3, .help h4, .help h5, .help h6, 
	.download h1, .download h2, .download h3, .download h4, .download h5, .download h6, 
	.todo h1, .todo h2, .todo h3, .todo h4, .todo h5, .todo h6 {
		margin: 6pt 0;
	}
	
	/* extra spacing for selected block-level elements: */
	div.info, div.tip, div.important, div.alert, div.help, div.download, div.todo,
	article.info, article.tip, article.important, article.alert, article.help, article.download, article.todo,
	aside.info, aside.tip, aside.important, aside.alert, aside.help, aside.download, aside.todo,
	section.info, section.tip, section.important, section.alert, section.help, section.download, section.todo,
	figure.info, figure.tip, figure.important, figure.alert, figure.help, figure.download, figure.todo {
		padding: .5em 1em .75em 2em;
	}
	
	/* notch down the icons for selected block-level elements: */
	div.info, div.tip, div.important, div.alert, div.help, div.download, div.todo,
	article.info, article.tip, article.important, article.alert, article.help, article.download, article.todo,
	aside.info, aside.tip, aside.important, aside.alert, aside.help, aside.download, aside.todo,
	section.info, section.tip, section.important, section.alert, section.help, section.download, section.todo,
	figure.info, figure.tip, figure.important, figure.alert, figure.help, figure.download, figure.todo {
		background-position: .5em 1.3em;
	}

	/* text colours: */
	.yellow { color: #966C03; }
	.orange { color: #B24103; }
	.brown { color: #3E2723; }
	.red { color: #B71C1C; }
	.purple { color: #4A148C; }
	.indigo { color: #1A237E; }
	.blue { color: #0D47A1; }
	.cyan { color: #006064; }
	.teal { color: #004D40; }
	.green { color: #1B5E20; }
	.grey, .gray { color: #37474F; }
	
	/* special case: markers: */
	mark.yellow { background-color: #FFF176; color: #111; }
	mark.orange { background-color: #FFB74D; color: #111; }
	mark.brown { background-color: #BCAAA4; color: #111; }
	mark.red { background-color: #E57373; color: #111; }
	mark.purple { background-color: #CE93D8; color: #111; }
	mark.indigo { background-color: #9FA8DA; color: #111; }
	mark.blue { background-color: #64B5F6; color: #111; }
	mark.cyan { background-color: #4DD0E1; color: #111; }
	mark.teal { background-color: #4DB6AC; color: #111; }
	mark.green { background-color: #81C784; color: #111; }
	mark.grey, mark.gray { background-color: #B0BEC5; color: #111; }

	/* text format helper classes: */
	.nowrap {
		white-space: nowrap !important;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.small-text {
		font-size: smaller !important;
		line-height: 1.4em;
	}
	.large-text {
		font-size: larger !important;
		line-height: 1.4em;
	}
	.clear-right {
		clear: right;
	}
	.clear-left {
		clear: left;
	}
	.clear {
		clear: both;
	}

	/* repeating the float classes from the Ad-Hominem template: */
	.float-left, .float-right {
		width: 50%;
		max-width: 220px;
		min-width: 150px;
		font-size: smaller;
		line-height: 1.5em;
	}
	.float-left {
		clear: left;
		float: left;
		margin-right: .5em;
	}
	.float-right {
		clear: right;
		float: right;
		margin-left: .5em;
	}

	/* grid-layout classes */
	.grid-2-columns,
	.grid-3-columns,
	.grid-4-columns {
		display: grid;
	}
	.grid-2-columns {
		grid-template-columns: 1fr 1fr;
		grid-gap: 0 .5em;
	}
	.grid-3-columns {
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 0 .33em;
	}
	.grid-4-columns {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-gap: 0 .25em;
	}

	/* grid cell classes: */
	.colspan-2 { grid-column-end: span 2; }
	.colspan-3 { grid-column-end: span 3; }
	.colspan-4 { grid-column-end: span 4; }
	.rowspan-2 { grid-row-end: span 2; }
	.rowspan-3 { grid-row-end: span 3; }
	.rowspan-4 { grid-row-end: span 4; }

	/* Definition List styles: */
	dt { font-weight: 600; }
	dd { margin-left: 1.25em; margin-bottom: .5em; }
	dl.compact { display: grid; grid-template-columns: min-content auto; }
	dl.compact dt { grid-column-start: 1; }
	dl.compact dd { grid-column-start: 2; margin-bottom: 0; }

	/* disclosure and summary: */
	details summary { cursor: pointer; }
}

/* RTL Overrides */
main {
	[dir=rtl] &,
	& *[dir=rtl] {
		.info, .tip, .important, .alert, .help, .download, .todo {
			padding: 1pt 1.5em 1pt .25em;
			border-width: 1px 4pt 1px 1px;
			border-left-color: #CCC;
			background-position: right .25em center;
		}
		div.info, div.tip, div.important, div.alert, div.help, div.download, div.todo,article.info, article.tip, article.important, article.alert, article.help, article.download, article.todo, aside.info, aside.tip, aside.important, aside.alert, aside.help, aside.download, aside.todo, section.info, section.tip, section.important, section.alert, section.help, section.download, section.todo, figure.info, figure.tip, figure.important, figure.alert, figure.help, figure.download, figure.todo {
			padding-right: 2em;
			background-position: right .5em 1.3em;
		}
		.info { border-right-color: #0085F2; }
		.tip { border-right-color: #FFCA28; }
		.important { border-right-color: #FF9800; }
		.alert { border-right-color: #B71C1C; }
		.help { border-right-color: #7986CB; }
		.download { border-right-color: #66BB6A; }
		.todo { border-right-color: #4DD0E1; }
	}
	.info[dir=rtl], .tip[dir=rtl], .important[dir=rtl],
	.alert[dir=rtl], .help[dir=rtl], .download[dir=rtl], .todo[dir=rtl] {
		padding: 1pt 1.5em 1pt .25em;
		border-width: 1px 4pt 1px 1px;
		border-right-color: #CCC;
		background-position: right .25em center;
	}
	div.info[dir=rtl], div.tip[dir=rtl], div.important[dir=rtl], div.alert[dir=rtl], div.help[dir=rtl], div.download[dir=rtl], div.todo[dir=rtl],article.info[dir=rtl], article.tip[dir=rtl], article.important[dir=rtl], article.alert[dir=rtl], article.help[dir=rtl], article.download[dir=rtl], article.todo[dir=rtl], aside.info[dir=rtl], aside.tip[dir=rtl], aside.important[dir=rtl], aside.alert[dir=rtl], aside.help[dir=rtl], aside.download[dir=rtl], aside.todo[dir=rtl], section.info[dir=rtl], section.tip[dir=rtl], section.important[dir=rtl], section.alert[dir=rtl], section.help[dir=rtl], section.download[dir=rtl], section.todo[dir=rtl], figure.info[dir=rtl], figure.tip[dir=rtl], figure.important[dir=rtl], figure.alert[dir=rtl], figure.help[dir=rtl], figure.download[dir=rtl], figure.todo[dir=rtl] {
		padding-right: 2em;
		background-position: right .5em 1.3em;
	}
	.info[dir=rtl] { border-right-color: #0085F2; }
	.tip[dir=rtl] { border-right-color: #FFCA28; }
	.important[dir=rtl] { border-right-color: #FF9800; }
	.alert[dir=rtl] { border-right-color: #B71C1C; }
	.help[dir=rtl] { border-right-color: #7986CB; }
	.download[dir=rtl] { border-right-color: #66BB6A; }
	.todo[dir=rtl] { border-right-color: #4DD0E1; }

}

/* dark mode overrides */
@media (prefers-color-scheme: dark) {

	body.darkmode {
		main {
			
			.outline, .info, .tip, .important, .alert, .help, .download, .todo {
				border-color: #39393D #39393D #39393D inherit;
			}
			.outline { border-color: #ADADB3; }
			.info { border-color: #027BDF; background-color: #182631; color: inherit; }
			.tip { border-color: #F9A825; background-color: #46361e; }
			.important { border-color: #E57403; background-color: #532E1D; }
			.alert { border-color: #FF2A2A; background-color: #482124; }
			.help { border-color: #4157FF; background-color: #20233C; }
			.download { border-color: #288D30; background-color: #203125; }
			.todo { border-color: #006064; background-color: #1A3236; }

			.alert::before { filter: brightness(1.5); }
			.help::before { filter: brightness(2.5); }
			.download::before { filter: brightness(1.5); }

			/* text colours: */
			.yellow { color: #FDD835; }
			.orange { color: #FB8C00; }
			.brown { color: #A5847E; }
			.red { color: #FF4314; }
			.purple { color: #BC6DCA; }
			.indigo { color: #7986CB; }
			.blue { color: #42A5F5; }
			.cyan { color: #00BCD4; }
			.teal { color: #26A69A; }
			.green { color: #43A047; }
			.grey, .gray { color: #78909C; }

			/* special case: markers: */
			mark.yellow { background-color: #754E00; color: #CCC; }
			mark.orange { background-color: #943400; color: #CCC; }
			mark.brown { background-color: #4E342E; color: #CCC; }
			mark.red { background-color: #A81A1A; color: #CCC; }
			mark.purple { background-color: #6A1B9A; color: #CCC; }
			mark.indigo { background-color: #1A237E; color: #CCC; }
			mark.blue { background-color: #0D47A1; color: #CCC; }
			mark.cyan { background-color: #006064; color: #CCC; }
			mark.teal { background-color: #004D40; color: #CCC; }
			mark.green { background-color: #1B5E20; color: #CCC; }
			mark.grey, mark.gray { background-color: #37474F; color: #CCC; }

		}
	}
}

/* layout overrides for narrow screens: */
@media (max-width: 670px) {
	body.dokuwiki main {
		.grid-2-columns,
		.grid-3-columns {
			grid-template-columns: 100%;
		}
		.grid-4-columns {
			grid-template-columns: 1fr 1fr;
		}
		
		.colspan-2,
		.colspan-3,
		.colspan-4 { grid-column-end: span 1; }

		.float-left, .float-right {
			float: none;
			clear: both;
			width: initial;
			max-width: initial;
			min-width: initial;
			margin: 0;
		}
	}
}
@media (max-width: 440px) {
	main {
		.grid-4-columns {
			grid-template-columns: 100%;
		}
	}
}