path: root/play.css

/* MAIN */

main { background-color: #461145; }
header { background-color: tan; }
header.your_turn { background-color: orange; }
#role_Caesar { background-color: salmon; }
#role_Pompeius { background-color: #eb5; }
.role_info { background-color: tan; }
#turn_info { background-color: burlywood; }

#log { background-color: wheat; }
#log div { padding-left: 20px; text-indent: -12px; }
#log div.i { padding-left: 32px; text-indent: -12px; }
#log .h1 { background-color: brown; color: gold; font-weight: bold; }
#log .h2 { background-color: brown; color: gold; font-weight: bold; }
#log .C { background-color: salmon; }
#log .P { background-color: #eb5; }
#log .h4 { background-color: tan; }
#log .h5 { font-style: italic; text-decoration: underline; }
#log .tip:hover { text-decoration: underline; cursor: pointer; }

/* CARDS */

.hand {
	margin: 25px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	min-height: 348px;
	gap: 16px;
}

@media (max-width: 800px) {
	.hand {
		min-width: 2425px;
	}
}

.card_back { background-image: url('cards/card_back.jpg'); }
.card_apollo { background-image: url('cards/card_apollo.jpg'); }
.card_jupiter { background-image: url('cards/card_jupiter.jpg'); }
.card_mars { background-image: url('cards/card_mars.jpg'); }
.card_mercury { background-image: url('cards/card_mercury.jpg'); }
.card_neptune { background-image: url('cards/card_neptune.jpg'); }
.card_pluto { background-image: url('cards/card_pluto.jpg'); }
.card_vulcan { background-image: url('cards/card_vulcan.jpg'); }
.card_12 { background-image: url('cards/card_12.jpg'); }
.card_13 { background-image: url('cards/card_13.jpg'); }
.card_21 { background-image: url('cards/card_21.jpg'); }
.card_22 { background-image: url('cards/card_22.jpg'); }
.card_23 { background-image: url('cards/card_23.jpg'); }
.card_31 { background-image: url('cards/card_31.jpg'); }
.card_32 { background-image: url('cards/card_32.jpg'); }
.card_41 { background-image: url('cards/card_41.jpg'); }

.card {
	background-size: cover;
	background-repeat: no-repeat;
	background-color: white;
	width: 225px;
	height: 350px;
	border-radius: 12px;
	box-shadow: 1px 1px 4px #0008;
	display: none;
}

.card.show {
	display: block;
}

.card.enabled:hover {
	transform: translateY(-8px);
}

.card.enabled {
	cursor: pointer;
}

.card.disabled {
	filter: grayscale(100%);
}

.card.prior {
	filter: grayscale(100%);
}

.card_back {
	background-color: #822c1f;
}

.role_info {
	overflow: clip;
	transition: height 100ms, padding 100ms;
	height: 84px;
	padding: 12px 0;
}

.role_info .card {
	width: 169px;
	height: 263px;
	border-radius: 9px;
	margin: 0 auto;
}

.role:hover .role_info {
	height: 261px;
}

@media (max-height: 600px) {
	.role:not(:hover) .role_info { display: none; }
}

@media (max-height: 800px) {
	#turn_info { display: none; }
	.role_info { height: 38px; padding: 8px 0; }
}

/* BATTLE BOARD */

#battle { background-color: tan; }
#battle_message { background-color: wheat; }
#battle_header { background-color: brown; color: lemonchiffon; }
#FR, #ER { background-color: #bda27e; }

#battle.sea #battle_header { background-color: hsl(205, 40%, 45%); color: white; }
#battle.sea #FR, #battle.sea #ER { background-color: hsl(205, 30%, 60%); }
#battle.sea { background-color: hsl(205, 30%, 70%); }
#battle.sea #battle_message { background-color: hsl(205, 50%, 85%); }

/* MAP WITH BLOCKS AND SPACES */

#mapwrap {
	width: 2550px;
	height: 1275px;
}

#map {
	width: 2550px;
	height: 1275px;
	background-size: cover;
}

#map { background-image: url("map2_75.jpg") }
@media (min-resolution: 97dpi) {
	#map { background-image: url("map2_150.jpg") }
}

#turn {
	position: absolute;
	width: 75px;
	height: 75px;
	left: 56px;
	border-radius: 12px;
	border: 3px solid white;
}
#turn.year_705 { top: 391px; }
#turn.year_706 { top: 308px; }
#turn.year_707 { top: 225px; }
#turn.year_708 { top: 142px; }
#turn.year_709 { top: 58px; }

.space {
	position: absolute;
	opacity: 0;
	z-index: 1;
	border: 5px solid white;
}
.space.city {
	width: 60px;
	height: 60px;
	border-radius: 50%;
}
.space.sea {
	width: 70px;
	height: 70px;
	border-radius: 50%;
}
.space.highlight {
	cursor: pointer;
	opacity: 0.8;
	z-index: 9;
}
.space.tip {
	opacity: 1;
	border-color: yellow;
	border-style: dashed;
	z-index: 9;
}
.space.battle {
	opacity: 1;
	border-color: #700c;
	background-color: #6008;
}
.space.sea.battle {
	opacity: 1;
	border-color: #037c;
	background-color: #0368;
}

.road {
	position: absolute;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	text-align: center;
	line-height: 24px;
	font-size: 16px;
	font-weight: bold;
	color: #432;
	box-shadow: 0 0 4px 1px #0006;
}

.road.major { background-color: #c1da96; color: #432; }
.road.minor { background-color: #c1da96; color: #432; }
.road.strait { background-color: #92d6e2; color: #234; }

.road.Caesar { background-color: #b22; color: gold; }
.road.Pompeius { background-color: #eb2; color: brown; }

#blocks.hide_blocks {
	display: none;
}

body.shift .block.known:hover {
	transform: scale(2) !important;
	transition: 100ms;
	z-index: 100;
}

#battle > .block { position: relative; }

#blocks > .block { position: absolute; z-index: 2; }
#blocks > .block.highlight { z-index: 3; }
#blocks > .block.selected { z-index: 4; }
#blocks > .block.known:hover { z-index: 5; }

.block.highlight { cursor: pointer; }

.simple-labels .block {
	width: 48px;
	height: 48px;
	border: 3px solid black;
	box-shadow: 0 0 2px 1px #0002;
	border-radius: 6px;
}
.simple-labels .block.Caesar { background-color: #b22; border-color: #822; }
.simple-labels .block.Pompeius { background-color: #eb2; border-color: #862; }
.simple-labels .block.Cleopatra { background-color: #09b; border-color: #067; }
.simple-labels .block.highlight { border-color: white; }
.simple-labels .block.selected { border-color: yellow; }
.simple-labels .hit .block.highlight { border-color: black; }

.columbia-labels .block {
	width: 60px;
	height: 60px;
	border: 3px solid #363639;
	box-shadow: 0 0 2px 1px #0002;
	border-radius: 8px;
}

/* RED + OCHRE */
.columbia-labels .block.Caesar { background-color: hsl(358, 69%, 47%); }
.columbia-labels .block.Caesar { border-color: hsl(358, 69%, 32%); }
.columbia-labels .block.Pompeius { background-color: hsl(43, 87%, 44%); }
.columbia-labels .block.Pompeius { border-color: hsl(43, 87%, 30%); }
.columbia-labels .block.Cleopatra { background-color: hsl(187, 100%, 35%); }
.columbia-labels .block.Cleopatra { border-color: hsl(187, 100%, 23%); }

/* BROWN + GREEN */
/*
.columbia-labels .block.Caesar { background-color: hsl(25, 50%, 40%); }
.columbia-labels .block.Caesar { border-color: hsl(25, 50%, 30%); }
.columbia-labels .block.Pompeius { background-color: hsl(150, 95%, 30%); }
.columbia-labels .block.Pompeius { border-color: hsl(150, 95%, 23%); }
.columbia-labels .block.Cleopatra { background-color: hsl(206, 75%, 45%); }
.columbia-labels .block.Cleopatra { border-color: hsl(206, 75%, 35%); }
*/

.columbia-labels .block.highlight { border-color: white; }
.columbia-labels .block.selected { border-color: yellow; }
.columbia-labels .hit .block.highlight { border-color: black; }

.columbia-labels .block.r0 { transform: rotate(0deg); }
.columbia-labels .block.r1 { transform: rotate(-90deg); }
.columbia-labels .block.r2 { transform: rotate(-180deg); }
.columbia-labels .block.r3 { transform: rotate(-270deg); }

.block.moved { filter: grayscale(50%); }

.block.mars {
	background-image: url("mars.svg");
	background-size: 80%;
	background-position: center;
}
.block.neptune {
	background-image: url("neptune.svg");
	background-size: 80%;
	background-position: center;
}
.block.jupiter:not(.known) {
	background-image: url("jupiter.svg");
	background-size: 80%;
	background-position: center;
}

.block.battle { opacity: 0; pointer-events: none; }

.block {
	transition-property: top, left, transform, opacity;
	transition-duration: 700ms, 700ms, 250ms, 250ms;
	transition-timing-function: ease, ease, ease, linear;
}

#replay_panel {
	background-color: tan;
}

/* COLUMBIA BLOCKS */

.columbia-labels .known.block { background-size: 360px 360px; }
.columbia-labels .Cleopatra.known.block { background-size: 60px 60px; }

.columbia-labels .Caesar.known.block { background-image: url(blocks_caesar.1x.webp); }
.columbia-labels .Cleopatra.known.block { background-image: url(blocks_cleopatra.1x.webp); }
.columbia-labels .Pompeius.known.block { background-image: url(blocks_pompeius.1x.webp); }

@media (min-resolution: 97dpi) {
.columbia-labels .Caesar.known.block { background-image: url(blocks_caesar.2x.webp); }
.columbia-labels .Cleopatra.known.block { background-image: url(blocks_cleopatra.2x.webp); }
.columbia-labels .Pompeius.known.block { background-image: url(blocks_pompeius.2x.webp); }
}

body.shift .columbia-labels .Caesar.known.block:hover { background-image: url(blocks_caesar.2x.webp); }
body.shift .columbia-labels .Cleopatra.known.block:hover { background-image: url(blocks_cleopatra.2x.webp); }
body.shift .columbia-labels .Pompeius.known.block:hover { background-image: url(blocks_pompeius.2x.webp); }

.columbia-labels .known.block_1_1{background-position:0px 0px}
.columbia-labels .known.block_1_2{background-position:-60px 0px}
.columbia-labels .known.block_1_3{background-position:-120px 0px}
.columbia-labels .known.block_1_4{background-position:-180px 0px}
.columbia-labels .known.block_1_5{background-position:-240px 0px}
.columbia-labels .known.block_1_6{background-position:-300px 0px}
.columbia-labels .known.block_2_1{background-position:0px -60px}
.columbia-labels .known.block_2_2{background-position:-60px -60px}
.columbia-labels .known.block_2_3{background-position:-120px -60px}
.columbia-labels .known.block_2_4{background-position:-180px -60px}
.columbia-labels .known.block_2_5{background-position:-240px -60px}
.columbia-labels .known.block_2_6{background-position:-300px -60px}
.columbia-labels .known.block_3_1{background-position:0px -120px}
.columbia-labels .known.block_3_2{background-position:-60px -120px}
.columbia-labels .known.block_3_3{background-position:-120px -120px}
.columbia-labels .known.block_3_4{background-position:-180px -120px}
.columbia-labels .known.block_3_5{background-position:-240px -120px}
.columbia-labels .known.block_3_6{background-position:-300px -120px}
.columbia-labels .known.block_4_1{background-position:0px -180px}
.columbia-labels .known.block_4_2{background-position:-60px -180px}
.columbia-labels .known.block_4_3{background-position:-120px -180px}
.columbia-labels .known.block_4_4{background-position:-180px -180px}
.columbia-labels .known.block_4_5{background-position:-240px -180px}
.columbia-labels .known.block_4_6{background-position:-300px -180px}
.columbia-labels .known.block_5_1{background-position:0px -240px}
.columbia-labels .known.block_5_2{background-position:-60px -240px}
.columbia-labels .known.block_5_3{background-position:-120px -240px}
.columbia-labels .known.block_5_4{background-position:-180px -240px}
.columbia-labels .known.block_5_5{background-position:-240px -240px}
.columbia-labels .known.block_5_6{background-position:-300px -240px}
.columbia-labels .known.block_6_1{background-position:0px -300px}
.columbia-labels .known.block_6_2{background-position:-60px -300px}
.columbia-labels .known.block_6_3{background-position:-120px -300px}
.columbia-labels .known.block_6_4{background-position:-180px -300px}
.columbia-labels .known.block_6_5{background-position:-240px -300px}
.columbia-labels .known.block_6_6{background-position:-300px -300px}

/* SIMPLE BLOCKS */

.simple-labels .block.known {
	background-image: url('blocks_simple.webp');
	background-repeat: no-repeat;
	background-size: 600% 3100%;
}

.simple-labels .block_0.r0{background-position:0% 0%}
.simple-labels .block_0.r1{background-position:0% 3.3333333333333335%}
.simple-labels .block_0.r2{background-position:0% 6.666666666666667%}
.simple-labels .block_1.r0{background-position:0% 10%}
.simple-labels .block_1.r1{background-position:0% 13.333333333333334%}
.simple-labels .block_2.r0{background-position:0% 16.666666666666668%}
.simple-labels .block_2.r1{background-position:0% 20%}
.simple-labels .block_2.r2{background-position:0% 23.333333333333332%}
.simple-labels .block_3.r0{background-position:0% 26.666666666666664%}
.simple-labels .block_3.r1{background-position:0% 29.999999999999996%}
.simple-labels .block_3.r2{background-position:0% 33.33333333333333%}
.simple-labels .block_4.r0{background-position:0% 36.666666666666664%}
.simple-labels .block_4.r1{background-position:0% 40%}
.simple-labels .block_4.r2{background-position:0% 43.333333333333336%}
.simple-labels .block_5.r0{background-position:0% 46.66666666666667%}
.simple-labels .block_5.r1{background-position:0% 50.00000000000001%}
.simple-labels .block_5.r2{background-position:0% 53.33333333333334%}
.simple-labels .block_6.r0{background-position:0% 56.66666666666668%}
.simple-labels .block_6.r1{background-position:0% 60.000000000000014%}
.simple-labels .block_6.r2{background-position:0% 63.33333333333335%}
.simple-labels .block_7.r0{background-position:0% 66.66666666666669%}
.simple-labels .block_7.r1{background-position:0% 70.00000000000001%}
.simple-labels .block_7.r2{background-position:0% 73.33333333333334%}
.simple-labels .block_8.r0{background-position:0% 76.66666666666667%}
.simple-labels .block_8.r1{background-position:0% 80%}
.simple-labels .block_8.r2{background-position:0% 83.33333333333333%}
.simple-labels .block_9.r0{background-position:0% 86.66666666666666%}
.simple-labels .block_9.r1{background-position:0% 89.99999999999999%}
.simple-labels .block_9.r2{background-position:0% 93.33333333333331%}
.simple-labels .block_10.r0{background-position:0% 96.66666666666664%}
.simple-labels .block_10.r1{background-position:0% 99.99999999999997%}
.simple-labels .block_10.r2{background-position:20% 0%}
.simple-labels .block_11.r0{background-position:20% 3.3333333333333335%}
.simple-labels .block_11.r1{background-position:20% 6.666666666666667%}
.simple-labels .block_11.r2{background-position:20% 10%}
.simple-labels .block_12.r0{background-position:20% 13.333333333333334%}
.simple-labels .block_12.r1{background-position:20% 16.666666666666668%}
.simple-labels .block_12.r2{background-position:20% 20%}
.simple-labels .block_12.r3{background-position:20% 23.333333333333332%}
.simple-labels .block_13.r0{background-position:20% 26.666666666666664%}
.simple-labels .block_13.r1{background-position:20% 29.999999999999996%}
.simple-labels .block_13.r2{background-position:20% 33.33333333333333%}
.simple-labels .block_13.r3{background-position:20% 36.666666666666664%}
.simple-labels .block_14.r0{background-position:20% 40%}
.simple-labels .block_14.r1{background-position:20% 43.333333333333336%}
.simple-labels .block_14.r2{background-position:20% 46.66666666666667%}
.simple-labels .block_14.r3{background-position:20% 50.00000000000001%}
.simple-labels .block_15.r0{background-position:20% 53.33333333333334%}
.simple-labels .block_15.r1{background-position:20% 56.66666666666668%}
.simple-labels .block_15.r2{background-position:20% 60.000000000000014%}
.simple-labels .block_15.r3{background-position:20% 63.33333333333335%}
.simple-labels .block_16.r0{background-position:20% 66.66666666666669%}
.simple-labels .block_16.r1{background-position:20% 70.00000000000001%}
.simple-labels .block_16.r2{background-position:20% 73.33333333333334%}
.simple-labels .block_16.r3{background-position:20% 76.66666666666667%}
.simple-labels .block_17.r0{background-position:20% 80%}
.simple-labels .block_17.r1{background-position:20% 83.33333333333333%}
.simple-labels .block_17.r2{background-position:20% 86.66666666666666%}
.simple-labels .block_18.r0{background-position:20% 89.99999999999999%}
.simple-labels .block_18.r1{background-position:20% 93.33333333333331%}
.simple-labels .block_19.r0{background-position:20% 96.66666666666664%}
.simple-labels .block_19.r1{background-position:20% 99.99999999999997%}
.simple-labels .block_20.r0{background-position:40% 0%}
.simple-labels .block_20.r1{background-position:40% 3.3333333333333335%}
.simple-labels .block_20.r2{background-position:40% 6.666666666666667%}
.simple-labels .block_21.r0{background-position:40% 10%}
.simple-labels .block_21.r1{background-position:40% 13.333333333333334%}
.simple-labels .block_21.r2{background-position:40% 16.666666666666668%}
.simple-labels .block_21.r3{background-position:40% 20%}
.simple-labels .block_22.r0{background-position:40% 23.333333333333332%}
.simple-labels .block_22.r1{background-position:40% 26.666666666666664%}
.simple-labels .block_22.r2{background-position:40% 29.999999999999996%}
.simple-labels .block_22.r3{background-position:40% 33.33333333333333%}
.simple-labels .block_23.r0{background-position:40% 36.666666666666664%}
.simple-labels .block_23.r1{background-position:40% 40%}
.simple-labels .block_23.r2{background-position:40% 43.333333333333336%}
.simple-labels .block_24.r0{background-position:40% 46.66666666666667%}
.simple-labels .block_24.r1{background-position:40% 50.00000000000001%}
.simple-labels .block_24.r2{background-position:40% 53.33333333333334%}
.simple-labels .block_25.r0{background-position:40% 56.66666666666668%}
.simple-labels .block_25.r1{background-position:40% 60.000000000000014%}
.simple-labels .block_26.r0{background-position:40% 63.33333333333335%}
.simple-labels .block_26.r1{background-position:40% 66.66666666666669%}
.simple-labels .block_27.r0{background-position:40% 70.00000000000001%}
.simple-labels .block_27.r1{background-position:40% 73.33333333333334%}
.simple-labels .block_28.r0{background-position:40% 76.66666666666667%}
.simple-labels .block_28.r1{background-position:40% 80%}
.simple-labels .block_29.r0{background-position:40% 83.33333333333333%}
.simple-labels .block_29.r1{background-position:40% 86.66666666666666%}
.simple-labels .block_30.r0{background-position:40% 89.99999999999999%}
.simple-labels .block_30.r1{background-position:40% 93.33333333333331%}
.simple-labels .block_31.r0{background-position:40% 96.66666666666664%}
.simple-labels .block_31.r1{background-position:40% 99.99999999999997%}
.simple-labels .block_31.r2{background-position:60% 0%}
.simple-labels .block_31.r3{background-position:60% 3.3333333333333335%}
.simple-labels .block_32.r0{background-position:60% 6.666666666666667%}
.simple-labels .block_32.r1{background-position:60% 10%}
.simple-labels .block_32.r2{background-position:60% 13.333333333333334%}
.simple-labels .block_33.r0{background-position:60% 16.666666666666668%}
.simple-labels .block_33.r1{background-position:60% 20%}
.simple-labels .block_33.r2{background-position:60% 23.333333333333332%}
.simple-labels .block_34.r0{background-position:60% 26.666666666666664%}
.simple-labels .block_34.r1{background-position:60% 29.999999999999996%}
.simple-labels .block_35.r0{background-position:60% 33.33333333333333%}
.simple-labels .block_35.r1{background-position:60% 36.666666666666664%}
.simple-labels .block_35.r2{background-position:60% 40%}
.simple-labels .block_35.r3{background-position:60% 43.333333333333336%}
.simple-labels .block_36.r0{background-position:60% 46.66666666666667%}
.simple-labels .block_36.r1{background-position:60% 50.00000000000001%}
.simple-labels .block_36.r2{background-position:60% 53.33333333333334%}
.simple-labels .block_36.r3{background-position:60% 56.66666666666668%}
.simple-labels .block_37.r0{background-position:60% 60.000000000000014%}
.simple-labels .block_37.r1{background-position:60% 63.33333333333335%}
.simple-labels .block_37.r2{background-position:60% 66.66666666666669%}
.simple-labels .block_38.r0{background-position:60% 70.00000000000001%}
.simple-labels .block_38.r1{background-position:60% 73.33333333333334%}
.simple-labels .block_38.r2{background-position:60% 76.66666666666667%}
.simple-labels .block_39.r0{background-position:60% 80%}
.simple-labels .block_39.r1{background-position:60% 83.33333333333333%}
.simple-labels .block_39.r2{background-position:60% 86.66666666666666%}
.simple-labels .block_40.r0{background-position:60% 89.99999999999999%}
.simple-labels .block_40.r1{background-position:60% 93.33333333333331%}
.simple-labels .block_40.r2{background-position:60% 96.66666666666664%}
.simple-labels .block_41.r0{background-position:60% 99.99999999999997%}
.simple-labels .block_41.r1{background-position:80% 0%}
.simple-labels .block_41.r2{background-position:80% 3.3333333333333335%}
.simple-labels .block_42.r0{background-position:80% 6.666666666666667%}
.simple-labels .block_42.r1{background-position:80% 10%}
.simple-labels .block_42.r2{background-position:80% 13.333333333333334%}
.simple-labels .block_43.r0{background-position:80% 16.666666666666668%}
.simple-labels .block_43.r1{background-position:80% 20%}
.simple-labels .block_43.r2{background-position:80% 23.333333333333332%}
.simple-labels .block_44.r0{background-position:80% 26.666666666666664%}
.simple-labels .block_44.r1{background-position:80% 29.999999999999996%}
.simple-labels .block_44.r2{background-position:80% 33.33333333333333%}
.simple-labels .block_45.r0{background-position:80% 36.666666666666664%}
.simple-labels .block_45.r1{background-position:80% 40%}
.simple-labels .block_45.r2{background-position:80% 43.333333333333336%}
.simple-labels .block_45.r3{background-position:80% 46.66666666666667%}
.simple-labels .block_46.r0{background-position:80% 50.00000000000001%}
.simple-labels .block_46.r1{background-position:80% 53.33333333333334%}
.simple-labels .block_46.r2{background-position:80% 56.66666666666668%}
.simple-labels .block_47.r0{background-position:80% 60.000000000000014%}
.simple-labels .block_47.r1{background-position:80% 63.33333333333335%}
.simple-labels .block_47.r2{background-position:80% 66.66666666666669%}
.simple-labels .block_47.r3{background-position:80% 70.00000000000001%}
.simple-labels .block_48.r0{background-position:80% 73.33333333333334%}
.simple-labels .block_48.r1{background-position:80% 76.66666666666667%}
.simple-labels .block_48.r2{background-position:80% 80%}
.simple-labels .block_49.r0{background-position:80% 83.33333333333333%}
.simple-labels .block_49.r1{background-position:80% 86.66666666666666%}
.simple-labels .block_50.r0{background-position:80% 89.99999999999999%}
.simple-labels .block_50.r1{background-position:80% 93.33333333333331%}
.simple-labels .block_50.r2{background-position:80% 96.66666666666664%}
.simple-labels .block_50.r3{background-position:80% 99.99999999999997%}
.simple-labels .block_51.r0{background-position:100% 0%}
.simple-labels .block_51.r1{background-position:100% 3.3333333333333335%}
.simple-labels .block_51.r2{background-position:100% 6.666666666666667%}
.simple-labels .block_52.r0{background-position:100% 10%}
.simple-labels .block_52.r1{background-position:100% 13.333333333333334%}
.simple-labels .block_53.r0{background-position:100% 16.666666666666668%}
.simple-labels .block_53.r1{background-position:100% 20%}
.simple-labels .block_53.r2{background-position:100% 23.333333333333332%}
.simple-labels .block_53.r3{background-position:100% 26.666666666666664%}
.simple-labels .block_54.r0{background-position:100% 29.999999999999996%}
.simple-labels .block_54.r1{background-position:100% 33.33333333333333%}
.simple-labels .block_54.r2{background-position:100% 36.666666666666664%}
.simple-labels .block_54.r3{background-position:100% 40%}
.simple-labels .block_55.r0{background-position:100% 43.333333333333336%}
.simple-labels .block_55.r1{background-position:100% 46.66666666666667%}
.simple-labels .block_55.r2{background-position:100% 50.00000000000001%}
.simple-labels .block_56.r0{background-position:100% 53.33333333333334%}
.simple-labels .block_56.r1{background-position:100% 56.66666666666668%}
.simple-labels .block_56.r2{background-position:100% 60.000000000000014%}
.simple-labels .block_57.r0{background-position:100% 63.33333333333335%}
.simple-labels .block_57.r1{background-position:100% 66.66666666666669%}
.simple-labels .block_58.r0{background-position:100% 70.00000000000001%}
.simple-labels .block_58.r1{background-position:100% 73.33333333333334%}
.simple-labels .block_59.r0{background-position:100% 76.66666666666667%}
.simple-labels .block_59.r1{background-position:100% 80%}
.simple-labels .block_60.r0{background-position:100% 83.33333333333333%}
.simple-labels .block_60.r1{background-position:100% 86.66666666666666%}
.simple-labels .block_61.r0{background-position:100% 89.99999999999999%}
.simple-labels .block_61.r1{background-position:100% 93.33333333333331%}
.simple-labels .block_62.r0{background-position:100% 96.66666666666664%}
.simple-labels .block_62.r1{background-position:100% 99.99999999999997%}