* {
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	
}

/* schemecolor.com */
/* amcharts.com */
/* mapchart.net */

/* water: #194868 (25,72,104) */
/* land : #96b797 (150,183,151) */


/* 2 special Blue colors: 
	Headers & Buttons : #486696 rgb(72, 102, 150)
	HLinText & CultLabels : #4e7bc4 rgb(78, 123, 196) */

/* Culture : #890878 rgb(137, 8, 120) */



/* general; for headerLinks  */
/* first color:  #FFFFFF  white (255,255,255)*/
/* second color: #000000  black (0,0,0) */


/* page periodButtons  */
/* first color:  #FFFFFF */
/* second color: #000000 */


:root {
	--infoWinNavBpaddingTop: 0px;
	--infoWinExitBpaddingTop: 0px;
}



.infoOnTop {
	top: 71px;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1001;
	position: fixed;
	transition: opacity 100ms;
	visibility: hidden;
	opacity: 0;

}
.infoOnTop:target {
	visibility: visible;
	opacity:1;
	z-index:1001;  /* it will be an on-top-element */
	-webkit-animation-name: moveInFromBottom;
    -webkit-animation-duration: 0.5s;
    animation-name: moveInFromBottom;
    animation-duration: 0.5s;
}
@-webkit-keyframes moveInFromBottom {
    from {top:2000px; opacity:0} 
    to {top:71px; opacity:1}
}
@keyframes moveInFromBottom {
    from {top:2000px; opacity:0}
    to {top:71px; opacity:1}
}

.container{
	position: relative;
	text-align: center;
}

.infoWindow {
	margin-top: 0;
	padding: 16px 16px 0px 16px; /* top right bottom left */
	font-size:1em;
	background-color:#FCFCFC;
	border-top: 1px solid Black;
	border-bottom: 3px solid Black;
	width: 100%;
	position: relative;
	z-index: 1001;
}

.infoWindow .infoContent {
	margin: 8px 0px 2px 0px; /* top right bottom left */
	padding: 12px 0px 6px 0px; /* top right bottom left */
	font-size: 1.8em;
	color:black;
	border-top: 2px solid black;
	background-color:white;
	font-weight: 500;
	text-align: justify;
	overflow: hidden;
}


.infoHeader {
	display:inline-block;
	width:100%;
	margin:0 0 0 0;
	padding:0px 0px 0px 0px; /* top right bottom left */
	font-size: 28px;
	font-weight: 900;
	text-align: left;
	vertical-align:text-top;
	color: #486696;
	position:relative;
}

/* info Window Header: Inline Navigation Button   */
.infoWIYear{
	display:inline-block;
	text-align:center;
	font-size:28px;
	font-weight: 900;
	width:84px;
	position:relative;
}
/* info Window Header: Inline Navigation Button Float right  */
#infoWINavButFR{
	float:right;
}
	
/* info Window Header: Inline Navigation Button   */
.infoWINavB{
	vertical-align:sub;
	display:inline-block;
	padding: 0px 0px 0px 0px; /* top right bottom left */
	margin:0px 0px 0px 0px; /* top right bottom left */
	width:48px;
	height:48px;
	float:none;
	overflow:hidden;
	cursor:pointer;
}
.infoWINavBlink:link, .infoWINavBlink:visited, .infoWINavBlink:active {
	height: 100%;
	width: 100%;
	display:block;
	font-size:28px;
	padding: var(--infoWinNavBpaddingTop) 0px 0px 0px; /* top right bottom left */
	opacity:0.8;
	text-align:center;
	color:#486696;
	font-weight: 900;
	background-color:rgba(171,202,255,0.2);
    box-shadow: 0 0 2px 2px rgba(15,15,15,0.4) inset;
	border: 1px solid black;
	text-decoration: none;
	}
.infoWINavBlink:hover {
	color: DarkGreen;
	background-color: White;
	opacity:1;
    box-shadow: 0 0 4px 4px rgba(15,15,15,0.6) inset;}

/* info Window Header: Select Civilization Button (Colours)   */
.infoWSCivB{
	vertical-align:sub;
	display:inline-block;
	padding: 0px 0px 0px 0px; /* top right bottom left */
	margin:0px 0px 0px 0px; /* top right bottom left */
	height:48px;
	float:none;
	overflow:hidden;
}
.infoWSCivBlink:link, .infoWSCivBlink:visited, .infoWSCivBlink:active {
	height: 100%;
	width: 100%;
	display:block;
	opacity:1;
	text-decoration: none;
	}
.infoWSCivBlink:hover {
/*   box-shadow: 0 0 1px 1px rgba(15,15,15,0.6) inset; */
	opacity:0.95;
	cursor: pointer;
}

	
/* info Window Header: Inline Exit Button   */
.infoWIExitB{
	vertical-align:sub;
	display:inline-block;
	padding: 0px 0px 0px 0px; /* top right bottom left */
	margin:0px 0px 0px 24px; /* top right bottom left */
	width:48px;
	height:48px;
	float:right;
	overflow:hidden;
	cursor:pointer;
}
.infoWIExitBlink:link, .infoWIExitBlink:visited, .infoWIExitBlink:active {
	height: 100%;
	width: 100%;
	display:block;
	font-size:36px;
	padding: var(--infoWinExitBpaddingTop) 0px 0px 0px; /* top right bottom left */
	padding: 0px 0px 0px 0px; /* top right bottom left */
	opacity:0.8;
	text-align:center;
	color:red;
	font-weight: 900;
	background-color:rgba(171,202,255,0.2);
    box-shadow: 0 0 2px 2px rgba(15,15,15,0.4) inset;
	border: 1px solid black;
	text-decoration: none;
	}
.infoWIExitBlink:hover {
	color: DarkGreen;
	background-color: White;
	opacity:1;
    box-shadow: 0 0 4px 4px rgba(15,15,15,0.6) inset;}

	
/* this is about the HLs in the Text of the Content Window */		
.HLinText:link, .HLinText:visited, .HLinText:active {
	color:#4e7bc4;
	font-size: 28px;
	font-weight: 500;
	text-decoration: none;
	vertical-align:baseline;
	}
.HLinText:hover {
	color: DarkGreen;
	box-shadow: 0 0 0.2em 0.2em rgba(235,235,235,0.8);
	background-color:rgba(255,255,255,0.6);
	vertical-align:baseline;
}

.HLcolor:link, .HLcolor:visited, .HLcolor:active {
	color: #4e7bc4;
	font-weight: 700;
	font-size: 28px;
	text-decoration: none;
	vertical-align:baseline;
	}

.HLcolor:hover {
	color: DarkGreen;
	box-shadow: 0 0 0.2em 0.2em rgba(243,243,243,0.6);
	background-color:rgba(243,243,243,0.6);
	vertical-align:baseline;
}
.colorCult {
	color:#890878;
	font-weight: 700;
}

/* this is about the Major HLs in the right of the Content Window */	
.HLcolorCult:link, .HLcolorCult:visited, .HLcolorCult:active {
	color:#486696;
	font-weight: 700;
	font-size: 28px;
	text-decoration: none;
	vertical-align:baseline;
	}
.HLcolorCult:hover {
	color: DarkGreen;
	background-clip: border-box;
	box-shadow: 0 0 0.2em 0.2em rgba(243,243,243,0.6);
	background-color:rgba(243,243,243,0.5);
	vertical-align:baseline;
}
/* this is about a TABLE for the Major HLs in the right of the Content Window */	
.infoHLinks {
	margin-top:-8px;
	margin-bottom:-6px;
	padding-left:2px;
	float:right;
}
.infoHLinks td {
	height:40px;
}
/* this is about the Major HLs in the right of the Content Window */	
.infoHLtext {
	padding-right:2px;
	text-align:right;}


.infoAreaHeader {
	display:inline-block;
	width:5em;
	margin:0 0 0 0;
	padding:0px 0px 0px 0px; /* top right bottom left */
	font-size: 1em;
	font-weight: 900;
	text-align: left;
	color: #486696;
}
.infoAreaHeaderLong {
	display:inline-block;
	width:15em;
	margin:0 0 0 0;
	padding:0px 0px 0px 0px; /* top right bottom left */
	font-size: 1em;
	font-weight: 900;
	text-align: left;
	color: #486696;
}