*{ padding: 0; margin: 0; }

@font-face {
	font-family: 'gill-sans-nova';
	src:
		url('../ttf/GillSansNovaLight.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../woff/GillSansNovaLight.woff') format('woff'); /* chrome, firefox */
}
@font-face {
	font-family: 'Gotham-SSm';
	src:
		url('../ttf/GothamSSm-Book.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../woff/GothamSSm-Book.woff') format('woff'); /* chrome, firefox */
}
@font-face {
	font-family: 'Orpheus';
	src:
		url('../fonts/Orpheus W05 Regular/Orpheus W05 Regular.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../fonts/Orpheus W05 Regular/Orpheus W05 Regular.woff') format('woff'); /* chrome, firefox */
 	letter-spacing: .05em;
}
@font-face {
	font-family: 'SnellBT-Regular';
	src:
		url('../fonts/SnellBT-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../fonts/SnellBT-Regular.woff') format('woff'); /* chrome, firefox */
}
@font-face {
	font-family: 'SnellBT-Bold';
	src:
		url('../fonts/SnellBT-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../fonts/SnellBT-Bold.woff') format('woff'); /* chrome, firefox */
}

/*
* {
    text-rendering: optimizeLegibility;
}
*/

.promo .logo img{ filter: invert(100%); }

h2{ clear: both; margin: 2em 0 1em 0; }

body {
    color: #424241;
	font-family: "Orpheus", sans-serif;
    font-size: 18px;
    line-height: 24px;
	padding: 0;
	margin: 0;
	padding-bottom: 10em;
}
body {
	--empire-0: #fff;
	--empire-1: #000;
	--empire-2: #666;
	--empire-3: #ccc;
}
.content{
	width: 920px;
	margin: 0 auto;
}
a{ text-decoration: none; }

/* -------------------------------------------------------------------------- */

span.key{ width: 21px; height: 21px; display: inline-block; border: 1px solid #000; margin-right: .5em; position: relative; bottom: 0; }

.key.empire-0{ background: var( --empire-0); }
.key.empire-1{ background: var( --empire-1); }
.key.empire-2{ background: var( --empire-2); }
.key.empire-3{ background: var( --empire-3); }
.key.pending{ background: var( --pending); border: 1px solid #ddd; }

.slaves-1:after { font-family: "Gotham-SSm", sans-serif; content: "\2234"; font-size: 21px; font-weight: 700; position: absolute; top: -1px; left: 4px; color: #444; text-align: center; }
.slaves-2:after { font-family: "Gotham-SSm", sans-serif; content: "\2025"; font-size: 21px; font-weight: 700; position: absolute; top: -7px; left: 4px; color: #333; text-align: center;  }
.slaves-3:after { font-family: "Gotham-SSm", sans-serif; content: "\00B7"; font-size: 21px; font-weight: 700; position: absolute; top: -1px; left: 8px; color: #333; text-align: center;  }

.empire-1.slaves-1:after,
.empire-1.slaves-2:after,
.empire-1.slaves-3:after{ color: #fff !important; }


/* -------------------------------------------------------------------------- */

h1{ text-transform: uppercase; text-align: center; line-height: 1.5em; letter-spacing: .3em;  word-spacing: .25em; margin-top: 1em; margin-bottom: 1.5em; font-size: 1.8em; }

h1.home{ margin-bottom: 0.75em; margin-top: .5em; font-size: 3em; text-transform: uppercase; text-align: center; line-height: 1.5em; letter-spacing: .2em; word-spacing: .4em; font-weight: 700; }
h1.home span.first{ font-size: .85em; }
h1.home span.of{ display: block; font-size: .7em; }
h1.home::after{ content ";" }

.content{ position: relative; }

h2{ text-align: center; line-height: 2em; letter-spacing: .05em; font-weight: 700; }

h1 a{ color: #424241; }
h2 a{ color: #424241; }

h3 span.key{ width: 21px; height: 21px; display: inline-block; border: 1px solid #000; margin-right: .5em; position: relative; bottom: -4px; }

div.index .place{ position: relative; display: grid; grid-template-columns: 1fr 2fr; border-top: 1px solid #aaa; padding-top: 4px; padding-bottom: 6px; line-height: 1.75em; }
div.index .place .srcs{ display: grid; grid-template-columns: 1fr; }
div.index .place .srcs .vol{ text-align: center; }
div.index .place .srcs .page{ text-align: center; }
div.index .place .srcs .src{ display: grid; grid-template-columns: 1fr 2fr 3fr 15fr 1fr; line-height: 1.2em; padding: .2em 0 .3em 0; }
div.index .place .srcs .src a{ display: block; }

div.index a{ color: #424241; }

.place.header{ font-weight: 700; border-top: none !important; }
.num{ float: right; }

h3{ text-align: center; margin-bottom: 1em; }

.num{ text-align: right; }

.pers{ display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 2em; margin-top: 1em; }
.pers .date{ padding-left: 1em; }
.pers .action{ padding-right: 1em; }
.pers .win{ text-align: center; border-left: 1px solid #000; }
.pers .local{ text-align: center; }

.num_places{ text-align: center; font-weight: 700; margin-bottom: 1em; }

.quote{
	font-family: "SnellBT-Bold", serif; font-size: 1.6em; margin-left: 5.5em; margin-right: 5.5em; line-height: 1.5em;
}

.caption{ text-align: right; margin-right: 9em; }

.portrait{ margin: 0 auto; width: 240px; border: 12px solid #000; display: block; margin-top: 2em; margin-bottom: 3em; }

.return{ text-align: center; display: block; }

.separator{ margin-top: 6em;}

span.geo-lnk{
	padding-left: 24px;
	margin-left: -24px;
	background: url(../img/geo-small.png) no-repeat;
	background-position: bottom left;
	cursor: zoom-in;
}
span.geo-lnk.active{
	background-color: yellow;
}

.map{ border: 1px solid #000; padding: 10px 10px 12px 10px; background: #fff; margin-bottom: 3em; }

.map img{
	border: 1px solid #000;
	max-width: calc(100% - 2px);
	max-height: calc(100% - 2px);
}

div.about{ margin-top: 4em; }
div.about p{ line-height: 1.75em; margin-bottom: 1.5em; }

img.not-available{ opacity: .3; }

div.index .inner-header{ display: none; }

.contributors{
	column-count: 4;
	text-align: center;
	column-gap: 20px;
}

.contributors p{
	margin-top: 0;
}

.about-image{ margin-bottom: 2em; text-align: center; }
.about-image img{
	max-width: 100%; margin-bottom: 5px;
	border: 1px solid #000;
}

.no-connection{ color: #aaa; }

@media screen and (max-width: 980px) {
	h1.home{
		font-size: 2em;
	}
	h2{
		font-size: 1.2em;
	}
	h3{
		font-size: 1em;
	}
	.content{
		width: 90%;
		margin: 0 auto;
	}
	div.index .place{ position: relative; display: grid; grid-template-columns: 1fr; }
	div.index .place_name{ font-weight: 700; text-align: center; }
	div.index .header{ display: none; }
	div.index .inner-header{ display: block; }
	div.index .place .srcs .src{ display: grid; grid-template-columns: 1fr 2fr 3fr 15fr 1fr; }
	div.index .place .srcs .src .vol{ text-align:center; display: inline-block; }
	div.index .place .srcs .src .page{ text-align:center; display: inline-block; }
	/*div.index .place .srcs .src{ position: relative; display: grid; grid-template-columns: 1fr 2fr 2fr 1fr; }
	div.index .place .srcs .src .vol{ width: auto; text-align:center; display: inline-block; }
	div.index .place .srcs .src .page{ width: auto; text-align:center; display: inline-block; }*/
	.quote{
		font-family: "SnellBT-Bold", serif; font-size: 1.6em; margin-left: .5em; margin-right: .5em; line-height: 1.5em;
	}
	.promo .about{ display: none; }
}


.src_desc{
	margin-bottom: 3em; font-weight: 700; text-align: center;
}

.biog{ cursor: pointer; }
.biog.on{ background: yellow; }

#map-panel{ position: absolute; z-index: 10; width: 66%; }

.megaview{ position: relative !important; top: 0 !important; left: 50% !important; height: 100vh !important; width: 100vw !important; margin-left: -50vw !important; }

#expand-tree{ width: 100%; display: block; text-align: center; padding-bottom: .5em; opacity: .2; }
#expand-tree:hover{ opacity: .7; }