/* Maria */ #mapwrap { width: 2485px; height: 1654px; margin-bottom: 30px; } #map { position: absolute; width: 2485px; height: 1654px; background-size: cover; background-image: url(Maria.Gameboard.075.jpg); background-color: #ece1a9; } #political_display { position: relative; margin: 0 auto; width: 1169px; height: 827px; background-size: cover; background-image: url(Maria.Political.Display.100.jpg); background-color: #ece1a9; } body { background-color: slategray; } .panel { background-color: #444; width: clamp(824px, calc(100% - 30px), 1636px); margin: 12px auto 36px auto; box-shadow: 1px 2px 6px #0004; border: 1px solid #0008; } .panel_header { color: white; font-weight: bold; text-align: center; padding: 3px 1em; border-bottom: 1px solid #0008; } .panel_body { background-color: #555; display: flex; justify-content: start; flex-wrap: wrap; padding: 18px; gap: 18px; min-height: 350px; } .city { position: absolute; box-sizing: border-box; border: 2px solid black; width: 24px; height: 24px; border-radius: 100%; background-color: #0002; } .minor.fortress { position: absolute; box-sizing: border-box; border: 2px solid black; width: 28px; height: 28px; border-radius: 0%; //background-color: lime; } .major.fortress { position: absolute; border: 2px solid black; box-sizing: border-box; width: 40px; height: 40px; border-radius: 50%; //background-color: lime; } .Austria { background-color: #fcffff; } .France { background-color: #ea192e; } .Prussia { background-color: #035783; } .Netherlands { background-color: #7d7c7a; } .Silesia { background-color: #91b4a0; } .Saxony { background-color: #127a3b; } .Bavaria { background-color: #fcb01f; } .fortress.HRE { background-color: #b41a70; } .city.HRE { background-color: #e0d796; } .Poland { background-color: #cac180; } .major_road { position: absolute; box-sizing: border-box; background-color: black; width: 20px; height: 6px; } .road { position: absolute; box-sizing: border-box; background-color: dimgray; width: 20px; height: 4px; } .marker { position: absolute; width: 30px; height: 30px; background-size: 34px 34px; background-position: center; border: 1px solid black; } .political_marker { position: absolute; width: 45px; height: 45px; border: 1px solid black; } .marker.turn_marker { background-image: url(markers/turn_marker.075.png) } .marker.elector_marker_austria_pragmatic { background-image: url(markers/elector_marker_austria_pragmatic.075.png) } .marker.elector_marker_france { background-image: url(markers/elector_marker_france.075.png) } .marker.elector_marker_prussia { background-image: url(markers/elector_marker_prussia.075.png) } .marker.elector_marker_saxony { background-image: url(markers/elector_marker_saxony.075.png) } .marker.question_marker_austria { background-image: url(markers/question_marker_austria.075.png) } .marker.question_marker_france { background-image: url(markers/question_marker_france.075.png) } .marker.question_marker_pragmatic { background-image: url(markers/question_marker_pragmatic.075.png) } .marker.question_marker_prussia { background-image: url(markers/question_marker_prussia.075.png) } .marker.victory_marker_austria { background-image: url(markers/victory_marker_austria.075.png) } .marker.victory_marker_france { background-image: url(markers/victory_marker_france.075.png) } .marker.victory_marker_pragmatic { background-image: url(markers/victory_marker_pragmatic.075.png) } .marker.victory_marker_prussia { background-image: url(markers/victory_marker_prussia.075.png) } .marker.subsidy_marker { background-image: url(markers/subsidy_marker.075.png) } .marker.income_minus_marker { background-image: url(markers/income_minus_marker.075.png) } .marker.income_plus_marker { background-image: url(markers/income_plus_marker.075.png) } .political_marker.italy { background-image: url(markers/political_marker_italy.100.png) } .political_marker.russia { background-image: url(markers/political_marker_russia.100.png) } .political_marker.saxony { background-image: url(markers/political_marker_saxony.100.png) } .card { width: 220px; height: 342px; background-size: 220px 342px; background-color: #f3ebd5; border-radius: 8px; border: 1px solid black; } .card.polcard.c01 { background-image: url(cards/Maria.PolCard.01.100.jpg) } .card.polcard.c02 { background-image: url(cards/Maria.PolCard.02.100.jpg) } .card.polcard.c03 { background-image: url(cards/Maria.PolCard.03.100.jpg) } .card.polcard.c04 { background-image: url(cards/Maria.PolCard.04.100.jpg) } .card.polcard.c05 { background-image: url(cards/Maria.PolCard.05.100.jpg) } .card.polcard.c06 { background-image: url(cards/Maria.PolCard.06.100.jpg) } .card.polcard.c07 { background-image: url(cards/Maria.PolCard.07.100.jpg) } .card.polcard.c08 { background-image: url(cards/Maria.PolCard.08.100.jpg) } .card.polcard.c09 { background-image: url(cards/Maria.PolCard.09.100.jpg) } .card.polcard.c10 { background-image: url(cards/Maria.PolCard.10.100.jpg) } .card.polcard.c11 { background-image: url(cards/Maria.PolCard.11.100.jpg) } .card.polcard.c12 { background-image: url(cards/Maria.PolCard.12.100.jpg) } .card.polcard.c13 { background-image: url(cards/Maria.PolCard.13.100.jpg) } .card.polcard.c14 { background-image: url(cards/Maria.PolCard.14.100.jpg) } .card.polcard.c15 { background-image: url(cards/Maria.PolCard.15.100.jpg) } .card.polcard.c16 { background-image: url(cards/Maria.PolCard.16.100.jpg) } .card.polcard.c17 { background-image: url(cards/Maria.PolCard.17.100.jpg) } .card.polcard.c18 { background-image: url(cards/Maria.PolCard.18.100.jpg) } .card.polcard.c19 { background-image: url(cards/Maria.PolCard.19.100.jpg) } .card.polcard.c20 { background-image: url(cards/Maria.PolCard.20.100.jpg) } .card.polcard.c21 { background-image: url(cards/Maria.PolCard.21.100.jpg) } .card.polcard.c22 { background-image: url(cards/Maria.PolCard.22.100.jpg) } .card.polcard.c23 { background-image: url(cards/Maria.PolCard.23.100.jpg) } .card.polcard.c24 { background-image: url(cards/Maria.PolCard.24.100.jpg) } .card.polcard.impelection { background-image: url(cards/Maria.PolCard.ImpElection.100.jpg) } .card.polcard.reverse.deck_1 { background-image: url(cards/Maria.PolCard.reverse.deck_1.100.jpg) } .card.polcard.reverse.deck_2 { background-image: url(cards/Maria.PolCard.reverse.deck_2.100.jpg) } .card.polcard.reverse.deck_3 { background-image: url(cards/Maria.PolCard.reverse.deck_3.100.jpg) } .card.polcard.reverse.deck_4 { background-image: url(cards/Maria.PolCard.reverse.deck_4.100.jpg) } .card.tc.c01 { background-image: url(cards/Maria.TC.01.100.jpg) } .card.tc.c02 { background-image: url(cards/Maria.TC.02.100.jpg) } .card.tc.c03 { background-image: url(cards/Maria.TC.03.100.jpg) } .card.tc.c04 { background-image: url(cards/Maria.TC.04.100.jpg) } .card.tc.c05 { background-image: url(cards/Maria.TC.05.100.jpg) } .card.tc.c06 { background-image: url(cards/Maria.TC.06.100.jpg) } .card.tc.c07 { background-image: url(cards/Maria.TC.07.100.jpg) } .card.tc.c08 { background-image: url(cards/Maria.TC.08.100.jpg) } .card.tc.c09 { background-image: url(cards/Maria.TC.09.100.jpg) } .card.tc.c10 { background-image: url(cards/Maria.TC.10.100.jpg) } .card.tc.c11 { background-image: url(cards/Maria.TC.11.100.jpg) } .card.tc.c12 { background-image: url(cards/Maria.TC.12.100.jpg) } .card.tc.c13 { background-image: url(cards/Maria.TC.13.100.jpg) } .card.tc.c14 { background-image: url(cards/Maria.TC.14.100.jpg) } .card.tc.c15 { background-image: url(cards/Maria.TC.15.100.jpg) } .card.tc.c16 { background-image: url(cards/Maria.TC.16.100.jpg) } .card.tc.c17 { background-image: url(cards/Maria.TC.17.100.jpg) } .card.tc.c18 { background-image: url(cards/Maria.TC.18.100.jpg) } .card.tc.c19 { background-image: url(cards/Maria.TC.19.100.jpg) } .card.tc.c20 { background-image: url(cards/Maria.TC.20.100.jpg) } .card.tc.c21 { background-image: url(cards/Maria.TC.21.100.jpg) } .card.tc.c22 { background-image: url(cards/Maria.TC.22.100.jpg) } .card.tc.c23 { background-image: url(cards/Maria.TC.23.100.jpg) } .card.tc.c24 { background-image: url(cards/Maria.TC.24.100.jpg) } .card.tc.c25 { background-image: url(cards/Maria.TC.25.100.jpg) } .card.tc.c26 { background-image: url(cards/Maria.TC.26.100.jpg) } .card.tc.c27 { background-image: url(cards/Maria.TC.27.100.jpg) } .card.tc.c28 { background-image: url(cards/Maria.TC.28.100.jpg) } .card.tc.c29 { background-image: url(cards/Maria.TC.29.100.jpg) } .card.tc.c30 { background-image: url(cards/Maria.TC.30.100.jpg) } .card.tc.c31 { background-image: url(cards/Maria.TC.31.100.jpg) } .card.tc.c32 { background-image: url(cards/Maria.TC.32.100.jpg) } .card.tc.c33 { background-image: url(cards/Maria.TC.33.100.jpg) } .card.tc.c34 { background-image: url(cards/Maria.TC.34.100.jpg) } .card.tc.c35 { background-image: url(cards/Maria.TC.35.100.jpg) } .card.tc.c36 { background-image: url(cards/Maria.TC.36.100.jpg) } .card.tc.c37 { background-image: url(cards/Maria.TC.37.100.jpg) } .card.tc.c38 { background-image: url(cards/Maria.TC.38.100.jpg) } .card.tc.reverse.deck_1 { background-image: url(cards/Maria.TC.reverse.deck_1.100.jpg) } .card.tc.reverse.deck_2 { background-image: url(cards/Maria.TC.reverse.deck_2.100.jpg) } .card.tc.reverse.deck_3 { background-image: url(cards/Maria.TC.reverse.deck_3.100.jpg) } .card.tc.reverse.deck_4 { background-image: url(cards/Maria.TC.reverse.deck_4.100.jpg) } .card.tc + .card.tc { margin-left: -120px; }