main { background-color: dimgray; }
header { background-color: silver; }
header.your_turn { background-color: orange; }
#role_Dem { background-color: hsl(210,30%,80%); }
#role_Com { background-color: hsl(35,40%,80%); }
#turn_info { background-color: gray; }

#log { background-color: whitesmoke; }
#log .h1 { font-weight: bold; padding-top:2px; padding-bottom:2px; text-align: center; }
#log .h2 { padding-top:2px; padding-bottom:2px; text-align: center; }
#log .h3 { text-align: center; }
#log .h4 { text-decoration: underline; }
#log .h5 { text-decoration: underline; }

#log .h2 { background-color: hsl(0,0%,80%);}
#log .h1 { background-color: hsl(0,0%,80%); }
#log .h2.dem { background-color: hsl(200,90%,50%); }
#log .h2.com { background-color: hsl(360, 80%, 75%); }
#log .h3.democrat { background-color: hsl(210,30%,90%); }
#log .h3.h2.communist { background-color: hsl(35,40%,90%); }

#log div { padding-left: 20px; text-indent: -12px; }
#log div.i { padding-left: 32px; text-indent: -12px; }
#log div.ii { padding-left: 44px; text-indent: -12px; }

/*Below needs updating 
#log .card_tip { font-style: italic; }
#log .card_tip:hover { text-decoration: underline; }
#log .lord_tip:hover { cursor: pointer; text-decoration: underline; }
#log .locale_tip:hover { cursor: pointer; text-decoration: underline; }
#log .way_tip:hover { cursor: pointer; text-decoration: underline; } */

.selected {
	cursor: pointer;
}

#log {
	font-variant-numeric: tabular-nums;
}

/* TOOLBAR */

#toolbar {
	justify-content: space-evenly;
}

#prompt {
	display: flex;
	margin-left: auto;
}

#button {
	display: flex;
	margin-left: auto;
}
/* MAP */

#map {
	margin: 0 auto ;
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	width: 1275px; /* was 1275*/
	height: 2000px;
	/*border: solid black;*/
	overflow: clip;
	box-shadow: 0px 1px 10px #0008;
	/*z-index: 3;*/
}

#map { background-image: url(1989_map.jpg) }

/* Containers to appear on hover*/
        #overlay {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent overlay */
           /* display: none;*/ 
            justify-content: center;
            align-items: center;
            text-align: left;
        }

/* SPACES */

.space-area {
	position: absolute;
	box-sizing: border-box;
	border: transparent red 2px;
}


/* INFLUENCE MARKERS */

.demInfl {
	position: absolute;
	box-sizing: border-box;
	bottom: 1px;
	left: 6px;
	height: 35px;
	width: 35px;
	border-radius: 5px;
}

.demInfl.controlled {
	background-image: url(images/US_blank.gif);
	background-size: contain;
}


.demInfl.uncontrolled {
	background-image: url(images/USd_blank.gif);
	background-size: contain;
}

.demInfl:hover {
	cursor: pointer;
}

.comInfl {
	position: absolute;
	box-sizing: border-box;
	bottom: 1px;
	right: 6px;
	height: 35px;
	width: 35px;
}

.comInfl:hover {
	cursor: pointer;
}

.comInfl.controlled {
	background-image: url(images/SV_blank.gif);
	background-size: contain;
}


.comInfl.uncontrolled {
	background-image: url(images/SVd_blank.gif);
	background-size: contain;
}

.demInflValue {
	position: absolute;
	box-sizing: border-box;
	font-family: 'Open Sans';
	font-size: 20px;
	font-weight: bold;
	top: 10px;
	left: 16px;
}

.comInflValue {
	position: absolute;
	box-sizing: border-box;
	font-family: 'Open Sans';
	font-size: 20px;
	font-weight: bold;
	top: 12px;
	left: 74px;
}

/* GAME MARKERS */

.t0 {left: 511px}
.t1 {left: 511px}
.t2 {left: 553px}
.t3 {left: 595px}
.t4 {left: 637px}
.t5 {left: 679px}
.t6 {left: 721px}
.t7 {left: 763px}
.t8 {left: 805px}
.t9 {left: 847px}
.t10 {left: 889px}

#turn-tracker {
	position:absolute;
	top: 65px;
	height: 35px;
	width: 36px;
	display: block;
}

.r0 {left: 554px}
.r1 {left: 554px}
.r2 {left: 596px}
.r3 {left: 638px}
.r4 {left: 680px}
.r5 {left: 722px}
.r6 {left: 764px}
.r7 {left: 806px}
.r8 {left: 848px}

.dem-action-round-tracker { background-image: url(images/US_Action_Round.gif);}
.com-action-round-tracker { background-image: url(images/SV_Action_Round.gif);}

#action-round-tracker {
	position: absolute;
	top: 114px;
	height: 30px;
	width: 35px;
	background-size: cover;
}

#stability-track {
	position:absolute;
	top: 853px;
	left: 1085px;
	height: 35px;
	width: 35px;
}

.tst0 {left: 0}
.tst1 {left: 38px}
.tst2 {left: 93px}
.tst3 {left: 148px}
.tst4 {left: 203px}
.tst5 {left: 258px}
.tst6 {left: 313px}
.tst7 {left: 368px}
.tst8 {left: 436px}

#dem-TST {
	position: absolute;
	top: 1680px;
	height: 35px;
	width: 35px;
}

#com-TST {
	position: absolute;
	top: 1782px;
	height: 35px;
	width: 35px;
}

.vp0 {top: 1913px;
left: 660px}

.vp-20, .vp-18, .vp-16, .vp-14, .vp-12, .vp-10, .vp-8, .vp-6, .vp-4, .vp-2, .vp1, .vp3, .vp5, .vp7, .vp9, .vp11, .vp13, .vp15, .vp17, .vp19 {top: 1889px}
.vp-19, .vp-17, .vp-15, .vp-13, .vp-11, .vp-9, .vp-7, .vp-5, .vp-3, .vp-1, .vp2, .vp4, .vp6, .vp8, .vp10, .vp12, .vp14, .vp16, .vp18, .vp20 {top: 1938px}

.vp-20 {left: 165px}
.vp-19 {left: 189px}
.vp-18 {left: 214px}
.vp-17 {left: 238px}
.vp-16 {left: 263px}
.vp-15 {left: 287px}
.vp-14 {left: 312px}
.vp-13 {left: 336px}
.vp-12 {left: 361px}
.vp-11 {left: 385px}
.vp-10 {left: 410px}
.vp-9 {left: 434px}
.vp-8 {left: 459px}
.vp-7 {left: 483px}
.vp-6 {left: 508px}
.vp-5 {left: 532px}
.vp-4 {left: 557px}
.vp-3 {left: 581px}
.vp-2 {left: 606px}
.vp-1 {left: 630px}
.vp1 {left: 692px}
.vp2 {left: 717px}
.vp3 {left: 741px}
.vp4 {left: 766px}
.vp5 {left: 790px}
.vp6 {left: 815px}
.vp7 {left: 839px}
.vp8 {left: 864px}
.vp9 {left: 888px}
.vp10 {left: 913px}
.vp11 {left: 937px}
.vp12 {left: 962px}
.vp13 {left: 986px}
.vp14 {left: 1011px}
.vp15 {left: 1035px}
.vp16 {left: 1060px}
.vp17 {left: 1084px}
.vp18 {left: 1109px}
.vp19 {left: 1133px}
.vp20 {left: 1158px}

#vp	{
	position: absolute;
	height: 40px;
	width: 40px;
}

.marker {
	position: absolute;
	height: 30px;
	width: 30px;
}

.revolution {background-image: url(images/US_blank.gif); background-size: contain}
.held {background-image: url(images/SV_blank.gif); background-size: contain}

.germany {top: 127px; 	left: 439px}
.poland { top: 232px; 	left: 934px}
.czech {top: 494px; 	left: 362px}
.hungary {top: 1041px; 	left: 813px}
.romania {top: 1063px; 	left: 1012px}
.bulgaria {top: 1578px;	left: 720px} 

.times_held {position: absolute; top: -10px; left: 10px}


/* =========== CARDS ================= */

.playedCard {
	display: flex;
	margin: auto;
	height: 300px;
}


.hand_card:hover {
	cursor: pointer;
}


.hand_card {
	background-size: contain;
	height: 250px;
	padding: 10px;
	box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.5); /* White glowing effect */
	border-radius: 5px; 
}


.power_card {
	background-size: contain;
	height: 250px;
	padding: 10px;
	border-radius: 5px; 
}


.selected {
	background-color: #0002;
	outline: solid white 2px;
	box-shadow: 0 0 4px white; 
	border-radius: 18px 18px 0 0;
}