main { background-color: dimgray; } #mapwrap { width: 1650px; height: 1275px; } #map { width: 1650px; height: 1275px; background-size: 1650px 1275px; box-shadow: 0px 1px 10px #0008; background-image: url(images/map75.jpg); } @media (min-resolution: 97dpi) { #map { background-image: url(images/map150.jpg); } } /* PANELS */ .panel { background-color: #555; max-width: 1650px; margin: 24px auto; position: relative; } .panel_header { background-color: #888; padding: 6px; } .panel_body { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; } .card { background-size: 100% 100%; width: 206px; height: 281px; xborder-radius: 5px; box-shadow: 0 0 0 1px #333; } .card.event { position: absolute; } .faction_token[data-faction-id=a] { background-image: url("images/factions/anarchists.png"); } .faction_token[data-faction-id=c] { background-image: url("images/factions/communists.png"); } .faction_token[data-faction-id=m] { background-image: url("images/factions/moderates.png"); } .initiative_token { background-image: url("images/initiative_clockwise.png"); } .initiative_token[data-year="2"] { background-image: url("images/initiative_counter_clockwise.png"); } .standee[data-standee-id="0"] { background-image: url("images/standees/standee_0.png"); } .standee[data-standee-id="1"] { background-image: url("images/standees/standee_1.png"); } .standee[data-standee-id="2"] { background-image: url("images/standees/standee_2.png"); } .standee[data-standee-id="3"] { background-image: url("images/standees/standee_3.png"); } .standee[data-standee-id="4"] { background-image: url("images/standees/standee_4.png"); } .bonus[data-bonus-id="0"][data-bonus-on="0"] { background-image: url("images/bonus/bonus_0_off.png"); } .bonus[data-bonus-id="0"][data-bonus-on="1"] { background-image: url("images/bonus/bonus_0_on.png"); } .bonus[data-bonus-id="1"][data-bonus-on="0"] { background-image: url("images/bonus/bonus_1_off.png"); } .bonus[data-bonus-id="1"][data-bonus-on="1"] { background-image: url("images/bonus/bonus_1_on.png"); } .medallion[data-medallion-id="0"] { background-image: url("images/medallions/medallion_0.png"); } .medallion[data-medallion-id="1"] { background-image: url("images/medallions/medallion_1.png"); } .medallion[data-medallion-id="2"] { background-image: url("images/medallions/medallion_2.png"); } .medallion[data-medallion-id="3"] { background-image: url("images/medallions/medallion_3.png"); } .medallion[data-medallion-id="4"] { background-image: url("images/medallions/medallion_4.png"); } .medallion[data-medallion-id="5"] { background-image: url("images/medallions/medallion_5.png"); } .medallion[data-medallion-id="6"] { background-image: url("images/medallions/medallion_6.png"); } .medallion[data-medallion-id="7"] { background-image: url("images/medallions/medallion_7.png"); } .medallion[data-medallion-id="8"] { background-image: url("images/medallions/medallion_8.png"); } .card[data-card-id="1"] { background-image: url("images/cards75/card_1.png"); } .card[data-card-id="2"] { background-image: url("images/cards75/card_2.png"); } .card[data-card-id="3"] { background-image: url("images/cards75/card_3.png"); } .card[data-card-id="4"] { background-image: url("images/cards75/card_4.png"); } .card[data-card-id="5"] { background-image: url("images/cards75/card_5.png"); } .card[data-card-id="6"] { background-image: url("images/cards75/card_6.png"); } .card[data-card-id="7"] { background-image: url("images/cards75/card_7.png"); } .card[data-card-id="8"] { background-image: url("images/cards75/card_8.png"); } .card[data-card-id="9"] { background-image: url("images/cards75/card_9.png"); } .card[data-card-id="10"] { background-image: url("images/cards75/card_10.png"); } .card[data-card-id="11"] { background-image: url("images/cards75/card_11.png"); } .card[data-card-id="12"] { background-image: url("images/cards75/card_12.png"); } .card[data-card-id="13"] { background-image: url("images/cards75/card_13.png"); } .card[data-card-id="14"] { background-image: url("images/cards75/card_14.png"); } .card[data-card-id="15"] { background-image: url("images/cards75/card_15.png"); } .card[data-card-id="16"] { background-image: url("images/cards75/card_16.png"); } .card[data-card-id="17"] { background-image: url("images/cards75/card_17.png"); } .card[data-card-id="18"] { background-image: url("images/cards75/card_18.png"); } .card[data-card-id="19"] { background-image: url("images/cards75/card_19.png"); } .card[data-card-id="20"] { background-image: url("images/cards75/card_20.png"); } .card[data-card-id="21"] { background-image: url("images/cards75/card_21.png"); } .card[data-card-id="22"] { background-image: url("images/cards75/card_22.png"); } .card[data-card-id="23"] { background-image: url("images/cards75/card_23.png"); } .card[data-card-id="24"] { background-image: url("images/cards75/card_24.png"); } .card[data-card-id="25"] { background-image: url("images/cards75/card_25.png"); } .card[data-card-id="26"] { background-image: url("images/cards75/card_26.png"); } .card[data-card-id="27"] { background-image: url("images/cards75/card_27.png"); } .card[data-card-id="28"] { background-image: url("images/cards75/card_28.png"); } .card[data-card-id="29"] { background-image: url("images/cards75/card_29.png"); } .card[data-card-id="30"] { background-image: url("images/cards75/card_30.png"); } .card[data-card-id="31"] { background-image: url("images/cards75/card_31.png"); } .card[data-card-id="32"] { background-image: url("images/cards75/card_32.png"); } .card[data-card-id="33"] { background-image: url("images/cards75/card_33.png"); } .card[data-card-id="34"] { background-image: url("images/cards75/card_34.png"); } .card[data-card-id="35"] { background-image: url("images/cards75/card_35.png"); } .card[data-card-id="36"] { background-image: url("images/cards75/card_36.png"); } .card[data-card-id="37"] { background-image: url("images/cards75/card_37.png"); } .card[data-card-id="38"] { background-image: url("images/cards75/card_38.png"); } .card[data-card-id="39"] { background-image: url("images/cards75/card_39.png"); } .card[data-card-id="40"] { background-image: url("images/cards75/card_40.png"); } .card[data-card-id="41"] { background-image: url("images/cards75/card_41.png"); } .card[data-card-id="42"] { background-image: url("images/cards75/card_42.png"); } .card[data-card-id="43"] { background-image: url("images/cards75/card_43.png"); } .card[data-card-id="44"] { background-image: url("images/cards75/card_44.png"); } .card[data-card-id="45"] { background-image: url("images/cards75/card_45.png"); } .card[data-card-id="46"] { background-image: url("images/cards75/card_46.png"); } .card[data-card-id="47"] { background-image: url("images/cards75/card_47.png"); } .card[data-card-id="48"] { background-image: url("images/cards75/card_48.png"); } .card[data-card-id="49"] { background-image: url("images/cards75/card_49.png"); } .card[data-card-id="50"] { background-image: url("images/cards75/card_50.png"); } .card[data-card-id="51"] { background-image: url("images/cards75/card_51.png"); } .card[data-card-id="52"] { background-image: url("images/cards75/card_52.png"); } .card[data-card-id="53"] { background-image: url("images/cards75/card_53.png"); } .card[data-card-id="54"] { background-image: url("images/cards75/card_54.png"); } .card[data-card-id="55"] { background-image: url("images/cards75/card_55.png"); } .card[data-card-id="56"] { background-image: url("images/cards75/card_56.png"); } .card[data-card-id="57"] { background-image: url("images/cards75/card_57.png"); } .card[data-card-id="58"] { background-image: url("images/cards75/card_58.png"); } .card[data-card-id="59"] { background-image: url("images/cards75/card_59.png"); } .card[data-card-id="60"] { background-image: url("images/cards75/card_60.png"); } .card[data-card-id="61"] { background-image: url("images/cards75/card_61.png"); } .card[data-card-id="62"] { background-image: url("images/cards75/card_62.png"); } .card[data-card-id="63"] { background-image: url("images/cards75/card_63.png"); } .card[data-card-id="64"] { background-image: url("images/cards75/card_64.png"); } .card[data-card-id="65"] { background-image: url("images/cards75/card_65.png"); } .card[data-card-id="66"] { background-image: url("images/cards75/card_66.png"); } .card[data-card-id="67"] { background-image: url("images/cards75/card_67.png"); } .card[data-card-id="68"] { background-image: url("images/cards75/card_68.png"); } .card[data-card-id="69"] { background-image: url("images/cards75/card_69.png"); } .card[data-card-id="70"] { background-image: url("images/cards75/card_70.png"); } .card[data-card-id="71"] { background-image: url("images/cards75/card_71.png"); } .card[data-card-id="72"] { background-image: url("images/cards75/card_72.png"); } .card[data-card-id="73"] { background-image: url("images/cards75/card_73.png"); } .card[data-card-id="74"] { background-image: url("images/cards75/card_74.png"); } .card[data-card-id="75"] { background-image: url("images/cards75/card_75.png"); } .card[data-card-id="76"] { background-image: url("images/cards75/card_76.png"); } .card[data-card-id="77"] { background-image: url("images/cards75/card_77.png"); } .card[data-card-id="78"] { background-image: url("images/cards75/card_78.png"); } .card[data-card-id="79"] { background-image: url("images/cards75/card_79.png"); } .card[data-card-id="80"] { background-image: url("images/cards75/card_80.png"); } .card[data-card-id="81"] { background-image: url("images/cards75/card_81.png"); } .card[data-card-id="82"] { background-image: url("images/cards75/card_82.png"); } .card[data-card-id="83"] { background-image: url("images/cards75/card_83.png"); } .card[data-card-id="84"] { background-image: url("images/cards75/card_84.png"); } .card[data-card-id="85"] { background-image: url("images/cards75/card_85.png"); } .card[data-card-id="86"] { background-image: url("images/cards75/card_86.png"); } .card[data-card-id="87"] { background-image: url("images/cards75/card_87.png"); } .card[data-card-id="88"] { background-image: url("images/cards75/card_88.png"); } .card[data-card-id="89"] { background-image: url("images/cards75/card_89.png"); } .card[data-card-id="90"] { background-image: url("images/cards75/card_90.png"); } .card[data-card-id="91"] { background-image: url("images/cards75/card_91.png"); } .card[data-card-id="92"] { background-image: url("images/cards75/card_92.png"); } .card[data-card-id="93"] { background-image: url("images/cards75/card_93.png"); } .card[data-card-id="94"] { background-image: url("images/cards75/card_94.png"); } .card[data-card-id="95"] { background-image: url("images/cards75/card_95.png"); } .card[data-card-id="96"] { background-image: url("images/cards75/card_96.png"); } .card[data-card-id="97"] { background-image: url("images/cards75/card_97.png"); } .card[data-card-id="98"] { background-image: url("images/cards75/card_98.png"); } .card[data-card-id="99"] { background-image: url("images/cards75/card_99.png"); } .card[data-card-id="100"] { background-image: url("images/cards75/card_100.png"); } .card[data-card-id="101"] { background-image: url("images/cards75/card_101.png"); } .card[data-card-id="102"] { background-image: url("images/cards75/card_102.png"); } .card[data-card-id="103"] { background-image: url("images/cards75/card_103.png"); } .card[data-card-id="104"] { background-image: url("images/cards75/card_104.png"); } .card[data-card-id="105"] { background-image: url("images/cards75/card_105.png"); } .card[data-card-id="106"] { background-image: url("images/cards75/card_106.png"); } .card[data-card-id="107"] { background-image: url("images/cards75/card_107.png"); } .card[data-card-id="108"] { background-image: url("images/cards75/card_108.png"); }