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: white; }
.aside_events {
	font-family: "Source Sans";
	font-style: normal;
	font-size: 16px;
	line-height: 1.5;
}

#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; }


#log .card_name { font-style: italic; }
#log .card_name:hover { text-decoration: underline; }
#log .space_tip:hover { cursor: pointer; text-decoration: underline; }

/* Below currently not used
#log .lord_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;
}

/* PANELS AND HANDS */

.panel {
	background-color: #555;
}

.panel_header {
	background-color: #444;
	color: hsl(40, 60%, 90%);
	font-weight: bold;
	text-align: center;
	padding: 3px 1em;
}

#events_panel, #played_card_panel  {
	min-width: 200px;
	width: auto;
	display: inline-block;
	margin: 10px;
	border-radius: 5px;
}

#discard_panel {
	min-width: 200px;
	width: auto;
	display: inline-block;
	margin: 10px;
	border-radius: 5px;
}

#discard_panel.hide {
	display: none;
}

#hand_panel {
	margin: 10px;
	border-radius: 5px;
}

/* 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;
}

.comInflValue.controlled, .held {
	color: whitesmoke;
	text-shadow: 
        1px 1px 0 #c2272d, /* Right bottom */
        -1px 1px 0 #c2272d, /* Left bottom */
        1px -1px 0 #c2272d, /* Right top */
        -1px -1px 0 #c2272d; /* Left top */
}

.comInflValue.uncontrolled {
	color: #c2272d;
	text-shadow: 
	1px 1px 0 #ffffff, /* Right bottom */
	-1px 1px 0 #ffffff, /* Left bottom */
	1px -1px 0 #ffffff, /* Right top */
	-1px -1px 0 #ffffff; /* Left top */
}


/* 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;
	left: 1085px;
	height: 35px;
	width: 35px;
}

.s0 {top: 853px}
.s1 {top: 896px}
.s2 {top: 939px}
.s5 {top: 982px}
.s4 {top: 1025px}


.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-21 {top: 1912px; left: 117px}
.vp21 {top: 1912px; left: 1182px}

.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; 
	font-family: 'Open Sans';
	font-size: 20px;
	font-weight: bold;
	top: -18px; 
	left: 8px
}

.outlined_text {
    text-shadow: 
        1px 1px 0 #ffffff, /* Right bottom */
        -1px 1px 0 #ffffff, /* Left bottom */
        1px -1px 0 #ffffff, /* Right top */
        -1px -1px 0 #ffffff; /* Left top */
}

/* ============= EVENT MARKERS ========== */

.event-marker {
	display: none;
	position: absolute;
	height: 30px;
	width:  30px;
	transition: transform 0.3s ease;
}

.event-marker:hover {
	cursor: pointer;
	transform: scale(2);
	z-index: 1;
}

.event-marker.aside {
	border: solid black 1.5px;
}

#turn_info {
	display: flex;
    flex-direction: column; 
    align-items: flex-start; 	
}

#turn_info > div {
	display: flex;
    margin-bottom: 8px; 
	gap: 4px; 
}

#turn_info > img {
	display: block;
    
}

#eco_glasnost {
	position: relative;
	/*top: 1500px;
	left: 1050px;*/
}

#helsinki_final_act {
	position: relative;
	display: flex;
}
#solidarity_legalised {
	top: 216px;
	left: 612px;
}

#st_nicholas_church {
	position: relative;
	/*top: 181px;
	left: 320px;*/
}

#systematization {
	height: 65px;
	width: 65px;
}

#the_tyrant_is_gone {
	height: 40px;
	width: 40px;
}

#the_wall {
	top: 143px;
	left: 170px;
}

#we_are_the_people {
	position: relative;
}


/* =========== CARDS ================= */
/*
.playedCard {
	display: flex;
	margin: auto;
	height: 300px;
}*/

.hand_card {
	background-size: contain;
	height: 250px;
	margin: 10px;
	border-radius: 5px; 
	transition: transform .3s ease 0.5s;
}

.hand_card:hover {
	cursor: pointer;
	/*transform: scale(1.75);*/
}

.zoom {
	transform: scale(1.75)
}

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

.discard_card, .event_card {
	background-size: contain;
	height: 150px;
	padding: 5px;
	border-radius: 5px; 
	transition: transform .3s ease;
}

.discard_card:hover, .event_card:hover {
	cursor: pointer;
	transform: scale(2);
}

.selected.space-area {
	background-color: #0002;
	outline: solid white 2px;
	/*box-shadow: 0 0 4px white; */ 
	border-radius: 10px 10px 0 0;
}

.space-area.tip {
	background-color: #ff08;
	outline: solid white 2px;
	box-shadow: 0 0 8px #ff08; 
	border-radius: 10px 10px 0 0;
}

.selected.hand_card {
	outline: solid silver 3px;
	/*box-shadow: 0 0 4px white; */ 
	border-radius: 18px;
}


.selected.power_card {
	outline: solid silver 3px;
	/*box-shadow: 0 0 4px white; */ 
	border-radius: 18px;
}

/* =============== OTHER ===============*/
#space-characteristics {display: none}

/* =============== CARD IMAGES =========*/

#tooltip {
	position: fixed;
	pointer-events: none;
	z-index: 600;
	right: 240px;
	top: 60px;
}

.card {
	background-size: cover;
	background-repeat: no-repeat;
	width: 250px;
	height: 350px;
	border-radius: 16px;
	box-shadow: 1px 2px 4px #0004;
}

.card_1 {background-image: url(cards/e1.gif)}
.card_2 {background-image: url(cards/e2.gif)}
.card_3 {background-image: url(cards/e3.gif)}
.card_4 {background-image: url(cards/e4.gif)}
.card_5 {background-image: url(cards/e5.gif)}
.card_6 {background-image: url(cards/e6.gif)}
.card_7 {background-image: url(cards/e7.gif)}
.card_8 {background-image: url(cards/e8.gif)}
.card_9 {background-image: url(cards/e9.gif)}
.card_10 {background-image: url(cards/e10.gif)}
.card_11 {background-image: url(cards/e11.gif)}
.card_12 {background-image: url(cards/e12.gif)}
.card_13 {background-image: url(cards/e13.gif)}
.card_14 {background-image: url(cards/e14.gif)}
.card_15 {background-image: url(cards/e15.gif)}
.card_16 {background-image: url(cards/e16.gif)}
.card_17 {background-image: url(cards/e17.gif)}
.card_18 {background-image: url(cards/e18.gif)}
.card_19 {background-image: url(cards/e19.gif)}
.card_20 {background-image: url(cards/e20.gif)}
.card_21 {background-image: url(cards/e21.gif)}
.card_22 {background-image: url(cards/e22.gif)}
.card_23 {background-image: url(cards/e23.gif)}
.card_24 {background-image: url(cards/e24.gif)}
.card_25 {background-image: url(cards/e25.gif)}
.card_26 {background-image: url(cards/e26.gif)}
.card_27 {background-image: url(cards/e27.gif)}
.card_28 {background-image: url(cards/e28.gif)}
.card_29 {background-image: url(cards/e29.gif)}
.card_30 {background-image: url(cards/e30.gif)}
.card_31 {background-image: url(cards/e31.gif)}
.card_32 {background-image: url(cards/e32.gif)}
.card_33 {background-image: url(cards/e33.gif)}
.card_34 {background-image: url(cards/e34.gif)}
.card_35 {background-image: url(cards/e35.gif)}
.card_36 {background-image: url(cards/e36.gif)}
.card_37 {background-image: url(cards/e37.gif)}
.card_38 {background-image: url(cards/e38.gif)}
.card_39 {background-image: url(cards/e39.gif)}
.card_40 {background-image: url(cards/e40.gif)}
.card_41 {background-image: url(cards/e41.gif)}
.card_42 {background-image: url(cards/e42.gif)}
.card_43 {background-image: url(cards/e43.gif)}
.card_44 {background-image: url(cards/e44.gif)}
.card_45 {background-image: url(cards/e45.gif)}
.card_46 {background-image: url(cards/e46.gif)}
.card_47 {background-image: url(cards/e47.gif)}
.card_48 {background-image: url(cards/e48.gif)}
.card_49 {background-image: url(cards/e49.gif)}
.card_50 {background-image: url(cards/e50.gif)}
.card_51 {background-image: url(cards/e51.gif)}
.card_52 {background-image: url(cards/e52.gif)}
.card_53 {background-image: url(cards/e53.gif)}
.card_54 {background-image: url(cards/e54.gif)}
.card_55 {background-image: url(cards/e55.gif)}
.card_56 {background-image: url(cards/e56.gif)}
.card_57 {background-image: url(cards/e57.gif)}
.card_58 {background-image: url(cards/e58.gif)}
.card_59 {background-image: url(cards/e59.gif)}
.card_60 {background-image: url(cards/e60.gif)}
.card_61 {background-image: url(cards/e61.gif)}
.card_62 {background-image: url(cards/e62.gif)}
.card_63 {background-image: url(cards/e63.gif)}
.card_64 {background-image: url(cards/e64.gif)}
.card_65 {background-image: url(cards/e65.gif)}
.card_66 {background-image: url(cards/e66.gif)}
.card_67 {background-image: url(cards/e67.gif)}
.card_68 {background-image: url(cards/e68.gif)}
.card_69 {background-image: url(cards/e69.gif)}
.card_70 {background-image: url(cards/e70.gif)}
.card_71 {background-image: url(cards/e71.gif)}
.card_72 {background-image: url(cards/e72.gif)}
.card_73 {background-image: url(cards/e73.gif)}
.card_74 {background-image: url(cards/e74.gif)}
.card_75 {background-image: url(cards/e75.gif)}
.card_76 {background-image: url(cards/e76.gif)}
.card_77 {background-image: url(cards/e77.gif)}
.card_78 {background-image: url(cards/e78.gif)}
.card_79 {background-image: url(cards/e79.gif)}
.card_80 {background-image: url(cards/e80.gif)}
.card_81 {background-image: url(cards/e81.gif)}
.card_82 {background-image: url(cards/e82.gif)}
.card_83 {background-image: url(cards/e83.gif)}
.card_84 {background-image: url(cards/e84.gif)}
.card_85 {background-image: url(cards/e85.gif)}
.card_86 {background-image: url(cards/e86.gif)}
.card_87 {background-image: url(cards/e87.gif)}
.card_88 {background-image: url(cards/e88.gif)}
.card_89 {background-image: url(cards/e89.gif)}
.card_90 {background-image: url(cards/e90.gif)}
.card_91 {background-image: url(cards/e91.gif)}
.card_92 {background-image: url(cards/e92.gif)}
.card_93 {background-image: url(cards/e93.gif)}
.card_94 {background-image: url(cards/e94.gif)}
.card_95 {background-image: url(cards/e95.gif)}
.card_96 {background-image: url(cards/e96.gif)}
.card_97 {background-image: url(cards/e97.gif)}
.card_98 {background-image: url(cards/e98.gif)}
.card_99 {background-image: url(cards/e99.gif)}
.card_100 {background-image: url(cards/e100.gif)}
.card_101 {background-image: url(cards/e101.gif)}
.card_102 {background-image: url(cards/e102.gif)}
.card_103 {background-image: url(cards/e103.gif)}
.card_104 {background-image: url(cards/e104.gif)}
.card_105 {background-image: url(cards/e105.gif)}
.card_106 {background-image: url(cards/e106.gif)}
.card_107 {background-image: url(cards/e107.gif)}
.card_108 {background-image: url(cards/e108.gif)}
.card_109 {background-image: url(cards/e109.gif)}
.card_110 {background-image: url(cards/e110.gif)}