Szablon:Navigation/styles.css

/* container */
.Szablon-Navigation--container {
	color: #FFFFFF;
	font-family:Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
	font-size: 1.5em
}

/* title / main link */
.Szablon-Navigation--gap,
.Szablon-Navigation--main {
	float:left;
}
.Szablon-Navigation--gap {
	width: 2em;
}
.Szablon-Navigation--main::after {
	content: " ";
	margin-right: .2em;
	padding: .35em 0;
	border: .15em solid black;
	background: black;
	position: relative;
	margin-left: .3em;
}

/* link-label common */
.Szablon-Navigation--tablink a span,
.Szablon-Navigation--main span {
	white-space: nowrap;
	padding: .5em;
}

/* sub page (tab) */
.Szablon-Navigation--tablink {
	float:left;
}

/* link colors */
.Szablon-Navigation--main span {
	background: #000;
	color: #FFFFFF;
}
.Szablon-Navigation--tablink a span {
	background: #767676;
	color: #FFFFFF;
}
.Szablon-Navigation--tablink.active a span {
	background: #ffc200;
	color: #000;
}
.Szablon-Navigation--tablink.inactive.subactive a span {
	border-bottom: 8px solid #ffc200;
}
.Szablon-Navigation--container a:focus {
	outline: 2px dotted white;
	outline-offset: -4px;
	text-decoration: none;
}

/* wrapping in thin window */
/* @supports (display: flex) { <- doesn't work 😢 */
.Szablon-Navigation--container {
	display: flex;
	flex-wrap: wrap;
	gap: .4em;
	margin: 1em 0;
}
.Szablon-Navigation--container > div {
	margin: 0;
	margin-left: 1px; /* micro gap for IE */
}
.Szablon-Navigation--container a {
	padding: 6px 0;
	display: inline-block;
}

/* thin/mobile screen */
@media only screen and (max-width: 600px) {

	.Szablon-Navigation--main::after,
	.Szablon-Navigation--gap {
		display: none;
	}

	.Szablon-Navigation--container a {
		padding: 0;
		display: block;
	}
	.Szablon-Navigation--tablink a span,
	.Szablon-Navigation--main span {
		white-space: normal;
		display: block;
	}
	.Szablon-Navigation--container > div {
		flex-grow: 1;
	}

}