@font-face {
	font-family: GaramondExtended;
	src: local("GaramondExtended"),
		url("/fonts/GaramondExtended76.ttf");
}

@font-face {
	font-family: GaramondExtended;
	src: url("/fonts/GaramondExtended-Italic5.ttf");
	font-style: italic;
}

@font-face {
	font-family: GaramondExtended;
	src: url("/fonts/GaramondExtended-Bold.ttf");
	font-weight: bold;
}

@font-face {
	font-family: Ustav;
	src: local("Ustav"),
		url("/fonts/Ustav3_3.otf");
}

body {
	margin: 0px;
	padding: 0px;
	background: #ffffff;
	font-family: GaramondExtended, Garamond;
	font-size: 16px;
	color: #000000;
	counter-reset: sidenote-counter;
}

h1 {
	font-family: GaramondExtended, Garamond;
	font-weight: bold;
	font-variant: small-caps;
	font-size: 20px;
	text-align: center;
}

h2 {
	font-family: GaramondExtended, Garamond;
	font-weight: bold;
	font-size: 18px;
}

h3 {
	font-family: GaramondExtended, Garamond;
	font-weight: bold;
	font-size: 16px;
}

h4 {
	font-family: GaramondExtended, Garamond;
	font-weight: normal;
	font-size: 16px;
}

img {
	border: 0px;
}

a {
	color: #4c2c92; /* #0645ad */
	text-decoration: underline lightblue;
}

a[href*="//"]:not([href*="sophoncy.net"])::after {
     content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);    
}

a:visited {
	color: #5b5568; /* #888888 */
}

a:hover {
	text-decoration: underline;
}

sup, sub {
	vertical-align: baseline;
	position: relative;
	top: -0.4em;
}
sub { top: 0.4em; }

th, td {
	padding: 5px;
}

#page {
	width: 605px;
	margin: 0px auto;
	text-align: justify;
	padding: 0px 0px 468px;
}

#mid-wide-page {
	width: 700px;
	margin: 0px auto;
	text-align: justify;
	padding: 0px 0px 468px;
}

#wide-page {
	width: 925px;
	margin: 0px auto;
	text-align: justify;
	padding: 0px 0px 468px;
}

.center {
	text-align: center;
}

.prominent {
	font-family: GaramondExtended, Garamond, serif;
	font-variant: small-caps;
	font-size: 18px;
}

.reduced {
	font-family: GaramondExtended, Garamond, serif;
	font-size: 12px;
}

.ocs {
	font-family: Ustav;
	font-size: 14px;
	line-height: 180%;
	font-variant-ligatures: none;
}

.contentselement {
	margin-top: 18px;
}

.contentsheading {
	background-color: #d1e8ff; /* #e7e9eb */
	margin: 0px;
	padding: 1px 3px;
}

.contentsdescription {
	border-left: 5px solid #d1e8ff;
	padding-left: 3px;
	margin: 0px;
}

.quotesource {
	text-indent: 5em;
	padding-bottom: 36px;
}

/* Add sidenotes like this: <span class="sidenote-num ref" tabindex="0"></span><p class="sidenote">Sidenote text</p> */
.sidenote {
	position: absolute;
	left: calc(50% + 302px + 1em);
	/* implied top: auto */
	width: 24em;
	background: #ffffff;
	padding: 1px calc(0.4em + 1px);
	border: 1px solid #d3d3d3;
	border-radius: 0.5em;
	font-size: 12px;
	margin-top: -18px;
}

.sidenote:before {
	content: counter(sidenote-counter, decimal) ". ";
}

.sidenote-num:before {
	content: counter(sidenote-counter);
	font-size: 12px;
	color: #4c2c92;
	vertical-align: baseline;
	position: relative;
	top: -0.4em;
	counter-increment: sidenote-counter;
}

span.ref:hover + .sidenote, span.ref:focus + .sidenote, .sidenote:hover {
	border-color: #4c2c92;
	background-color: #d1e8ff;
	z-index: 1;
}

span.ref:hover {
	cursor: pointer;
}

@media (max-width: 760px) {
	.sidenote {
		display: none;
		left: calc(50% - 10em);
		margin: 0;
	}
	
	span.ref:hover + .sidenote, span.ref:focus + .sidenote {
		display: block;
	}
		
	.sidenote:focus {
		display: none;
	}
}

table {
	border: 1px;
}