main { background-color: slategray; } .x_britain { background-color: hsl(15, 88%, 66%) } .x_america { background-color: hsl(211, 52%, 64%) } body.Britain header.your_turn { background-color: hsl(15, 90%, 75%) } body.America header.your_turn { background-color: hsl(211, 50%, 75%) } #role_Britain { background-color: hsl(15, 90%, 80%) } #role_America { background-color: hsl(211, 50%, 80%) } #log { background-color: hsl(35, 53%, 89%); } #turn_info { background-color: hsl(35, 25%, 50%); } #log .h { border-top: 1px solid black; border-bottom: 1px solid black; text-align: center; } #log .h.turn { background-color: hsl(35, 45%, 70%); } #log .h.britain { background-color: hsl(15, 90%, 80%) } #log .h.america { background-color: hsl(211, 50%, 80%) } #tooltip { display: none; pointer-events: none; position: fixed; z-index: 600; right: 240px; top: 60px; } #tooltip.show { display: block; } #mapwrap { width: 1650px; height: 2550px; } #map { width: 1650px; height: 2550px; background-size: 1650px 2550px; box-shadow: 1px 1px 8px #0008; } @media (max-width: 800px) { #tooltip { top: 0; left: 0; right: 0; bottom: 0; margin: auto; } } @media (max-height: 800px) { #turn_info { display: none; } } /* CARD ACTION POPUP MENU */ #popup { max-width: 250px; } #popup li.title { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } #popup li.disabled { display: none } #popup li.title { background-color: moccasin; } /* SPACES */ .space { position: absolute; border: 5px solid transparent; } .space.regular { border-radius: 50%; } .space.fortified_port { transform: rotate(45deg); } .space.sea { border-radius: 12px; } .space.action { border-color: white; box-shadow: 0 0 2px 1px #000c, inset 0 0 2px 1px #000c; } .space.selected { border-color: aqua; box-shadow: 0 0 2px 1px #000c, inset 0 0 2px 1px #000c; } .space.action.Canada { background-color: #e4795080 } .space.action.NY { background-color: #52954680 } .space.action.NH { background-color: #ded36380 } .space.action.MA { background-color: #6e407a80 } .space.action.CT { background-color: #d6b5be80 } .space.action.RI { background-color: #31a9d080 } .space.action.PA { background-color: #64408980 } .space.action.NJ { background-color: #ca4d5b80 } .space.action.MD { background-color: #e5a02380 } .space.action.DE { background-color: #dcca8780 } .space.action.VA { background-color: #409d8280 } .space.action.NC { background-color: #d9819480 } .space.action.SC { background-color: #ffe05d80 } .space.action.GA { background-color: #6d9ab480 } /* MARKERS */ .marker { position: absolute; background-size: 100%; border: 1px solid black; box-shadow: 1px 1px 4px #0008; } .marker.large { width: 55px; height: 55px; } .marker.tall { width: 64px; height: 130px; } .marker.small { width: 45px; height: 45px; } .marker.pc { pointer-events: none; border: none; box-shadow: none; width: 58px; height: 66px; filter: drop-shadow(1px 1px 2px #0008); } .marker.congress { pointer-events: none; } .marker.cu { pointer-events: none; width: calc(60px - 8px - 8px); height: calc(60px - 14px - 18px); line-height: 28px; padding: 14px 8px 18px 8px; font-size: 28px; font-weight: bold; color: white; text-shadow: -1px -1px 2px #0008, 1px 1px 2px #0008, -1px 1px 2px #0008, 1px -1px 2px #0008 ; border-radius: 50%; } .general.action { box-shadow: 0 0 0 3px yellow, 0 0 2px 4px black; } .general.selected { box-shadow: 0 0 0 3px aqua, 0 0 2px 4px black; } /* CARDS */ #last_played { margin: 4px auto; } #hand { display: flex; flex-wrap: wrap; justify-content: center; min-height: 352px; padding: 12px; gap: 12px; margin: 24px 0; } .card { width: 250px; height: 350px; border-radius: 16px; background-size: 100%; background-color: hsl(35, 53%, 89%); border: 1px solid black; box-shadow: 1px 1px 4px #0008; } .card.shrink { width: 187px; height: 262px; border-radius: 12px; } #war_ends { position: absolute; left: 1034px; top: 1684px; width: 262px; height: 187px; border-radius: 12px; background-size: 100%; border: 1px solid black; box-shadow: 1px 1px 4px #0008; display: none; } #war_ends.year_1779 { display: block; } #war_ends.year_1780 { display: block; } #war_ends.year_1781 { display: block; } #war_ends.year_1782 { display: block; } #war_ends.year_1783 { display: block; } .reinforcements { position: absolute; top: 1922px; width: 187px; height: 262px; border-radius: 12px; border: 1px solid black; box-shadow: 1px 1px 4px #0008; display: none; } #played_british_reinforcements { left: 909px; } #played_american_reinforcements_1 { left: 1142px; } #played_american_reinforcements_2 { left: 1375px; } .reinforcements.ops_1 { display: block; } .reinforcements.ops_2 { display: block; } .reinforcements.ops_3 { display: block; } /* IMAGES */ #map { background-image: url(map75.jpg); } .marker.french_navy { background-image: url(markers.1x/french_navy.png); } .marker.french_navy.tall { background-image: url(markers.1x/french_navy_tall.png); } .marker.turn { background-image: url(markers.1x/game_turn_regulars.png); } .marker.turn.no_regulars { background-image: url(markers.1x/game_turn_no_regulars.png); } .marker.french_alliance { background-image: url(markers.1x/french_alliance.png); } .marker.french_alliance.european_war { background-image: url(markers.1x/european_war.png); } .marker.congress { background-image: url(markers.1x/continental_congress.png); } .marker.congress { background-image: url(markers.1x/continental_congress.png); } .marker.control.british { background-image: url(markers.1x/colony_british.png); } .marker.control.american { background-image: url(markers.1x/colony_american.png); } .cu.american { background-image: url(markers.1x/cu_american.png); } .cu.british { background-image: url(markers.1x/cu_british.png); } .cu.french { background-image: url(markers.1x/cu_french.png); } .pc.american { background-image: url(markers.1x/pc_american.svg); } .pc.british { background-image: url(markers.1x/pc_british.svg); } .general.tall.Arnold { background-image: url(markers.1x/general_arnold_tall.png); } .general.tall.Gates { background-image: url(markers.1x/general_gates_tall.png); } .general.tall.Greene { background-image: url(markers.1x/general_greene_tall.png); } .general.tall.Lafayette { background-image: url(markers.1x/general_lafayette_tall.png); } .general.tall.Lee { background-image: url(markers.1x/general_lee_tall.png); } .general.tall.Lincoln { background-image: url(markers.1x/general_lincoln_tall.png); } .general.tall.Rochambeau { background-image: url(markers.1x/general_rochambeau_tall.png); } .general.tall.Washington { background-image: url(markers.1x/general_washington_tall.png); } .general.tall.Burgoyne { background-image: url(markers.1x/general_burgoyne_tall.png); } .general.tall.Carleton { background-image: url(markers.1x/general_carleton_tall.png); } .general.tall.Clinton { background-image: url(markers.1x/general_clinton_tall.png); } .general.tall.Cornwallis { background-image: url(markers.1x/general_cornwallis_tall.png); } .general.tall.Howe { background-image: url(markers.1x/general_howe_tall.png); } .general.small.Arnold { background-image: url(markers.1x/general_arnold.png); } .general.small.Gates { background-image: url(markers.1x/general_gates.png); } .general.small.Greene { background-image: url(markers.1x/general_greene.png); } .general.small.Lafayette { background-image: url(markers.1x/general_lafayette.png); } .general.small.Lee { background-image: url(markers.1x/general_lee.png); } .general.small.Lincoln { background-image: url(markers.1x/general_lincoln.png); } .general.small.Rochambeau { background-image: url(markers.1x/general_rochambeau.png); } .general.small.Washington { background-image: url(markers.1x/general_washington.png); } .general.small.Burgoyne { background-image: url(markers.1x/general_burgoyne.png); } .general.small.Carleton { background-image: url(markers.1x/general_carleton.png); } .general.small.Clinton { background-image: url(markers.1x/general_clinton.png); } .general.small.Cornwallis { background-image: url(markers.1x/general_cornwallis.png); } .general.small.Howe { background-image: url(markers.1x/general_howe.png); } #war_ends.year_1779 { background-image:url(cards75/card_7_rot.png); } #war_ends.year_1780 { background-image:url(cards75/card_8_rot.png); } #war_ends.year_1781 { background-image:url(cards75/card_9_rot.png); } #war_ends.year_1782 { background-image:url(cards75/card_10_rot.png); } #war_ends.year_1783 { background-image:url(cards75/card_11_rot.png); } .reinforcements.ops_3 { background-image:url(cards75/card_2.png); } .reinforcements.ops_2 { background-image:url(cards75/card_3.png); } .reinforcements.ops_1 { background-image:url(cards75/card_4.png); } .card_0{background-image:url(cards100/card_1.png)} .card_1{background-image:url(cards100/card_2.png)} .card_2{background-image:url(cards100/card_2.png)} .card_3{background-image:url(cards100/card_2.png)} .card_4{background-image:url(cards100/card_2.png)} .card_5{background-image:url(cards100/card_2.png)} .card_6{background-image:url(cards100/card_2.png)} .card_7{background-image:url(cards100/card_2.png)} .card_8{background-image:url(cards100/card_2.png)} .card_9{background-image:url(cards100/card_2.png)} .card_10{background-image:url(cards100/card_2.png)} .card_11{background-image:url(cards100/card_2.png)} .card_12{background-image:url(cards100/card_2.png)} .card_13{background-image:url(cards100/card_2.png)} .card_14{background-image:url(cards100/card_2.png)} .card_15{background-image:url(cards100/card_2.png)} .card_16{background-image:url(cards100/card_2.png)} .card_17{background-image:url(cards100/card_2.png)} .card_18{background-image:url(cards100/card_2.png)} .card_19{background-image:url(cards100/card_2.png)} .card_20{background-image:url(cards100/card_2.png)} .card_21{background-image:url(cards100/card_2.png)} .card_22{background-image:url(cards100/card_2.png)} .card_23{background-image:url(cards100/card_3.png)} .card_24{background-image:url(cards100/card_3.png)} .card_25{background-image:url(cards100/card_3.png)} .card_26{background-image:url(cards100/card_3.png)} .card_27{background-image:url(cards100/card_3.png)} .card_28{background-image:url(cards100/card_3.png)} .card_29{background-image:url(cards100/card_3.png)} .card_30{background-image:url(cards100/card_3.png)} .card_31{background-image:url(cards100/card_3.png)} .card_32{background-image:url(cards100/card_3.png)} .card_33{background-image:url(cards100/card_3.png)} .card_34{background-image:url(cards100/card_3.png)} .card_35{background-image:url(cards100/card_3.png)} .card_36{background-image:url(cards100/card_3.png)} .card_37{background-image:url(cards100/card_3.png)} .card_38{background-image:url(cards100/card_3.png)} .card_39{background-image:url(cards100/card_3.png)} .card_40{background-image:url(cards100/card_3.png)} .card_41{background-image:url(cards100/card_3.png)} .card_42{background-image:url(cards100/card_3.png)} .card_43{background-image:url(cards100/card_3.png)} .card_44{background-image:url(cards100/card_3.png)} .card_45{background-image:url(cards100/card_4.png)} .card_46{background-image:url(cards100/card_4.png)} .card_47{background-image:url(cards100/card_4.png)} .card_48{background-image:url(cards100/card_4.png)} .card_49{background-image:url(cards100/card_4.png)} .card_50{background-image:url(cards100/card_4.png)} .card_51{background-image:url(cards100/card_4.png)} .card_52{background-image:url(cards100/card_4.png)} .card_53{background-image:url(cards100/card_4.png)} .card_54{background-image:url(cards100/card_4.png)} .card_55{background-image:url(cards100/card_4.png)} .card_56{background-image:url(cards100/card_4.png)} .card_57{background-image:url(cards100/card_4.png)} .card_58{background-image:url(cards100/card_4.png)} .card_59{background-image:url(cards100/card_4.png)} .card_60{background-image:url(cards100/card_4.png)} .card_61{background-image:url(cards100/card_4.png)} .card_62{background-image:url(cards100/card_4.png)} .card_63{background-image:url(cards100/card_4.png)} .card_64{background-image:url(cards100/card_4.png)} .card_65{background-image:url(cards100/card_4.png)} .card_66{background-image:url(cards100/card_4.png)} .card_67{background-image:url(cards100/card_5.png)} .card_68{background-image:url(cards100/card_5.png)} .card_69{background-image:url(cards100/card_5.png)} .card_70{background-image:url(cards100/card_6.png)} .card_71{background-image:url(cards100/card_7.png)} .card_72{background-image:url(cards100/card_8.png)} .card_73{background-image:url(cards100/card_9.png)} .card_74{background-image:url(cards100/card_10.png)} .card_75{background-image:url(cards100/card_11.png)} .card_76{background-image:url(cards100/card_12.png)} .card_77{background-image:url(cards100/card_13.png)} .card_78{background-image:url(cards100/card_14.png)} .card_79{background-image:url(cards100/card_15.png)} .card_80{background-image:url(cards100/card_16.png)} .card_81{background-image:url(cards100/card_17.png)} .card_82{background-image:url(cards100/card_18.png)} .card_83{background-image:url(cards100/card_19.png)} .card_84{background-image:url(cards100/card_20.png)} .card_85{background-image:url(cards100/card_21.png)} .card_86{background-image:url(cards100/card_22.png)} .card_87{background-image:url(cards100/card_23.png)} .card_88{background-image:url(cards100/card_24.png)} .card_89{background-image:url(cards100/card_25.png)} .card_90{background-image:url(cards100/card_26.png)} .card_91{background-image:url(cards100/card_27.png)} .card_92{background-image:url(cards100/card_28.png)} .card_93{background-image:url(cards100/card_29.png)} .card_94{background-image:url(cards100/card_30.png)} .card_95{background-image:url(cards100/card_31.png)} .card_96{background-image:url(cards100/card_32.png)} .card_97{background-image:url(cards100/card_33.png)} .card_98{background-image:url(cards100/card_34.png)} .card_99{background-image:url(cards100/card_35.png)} .card_100{background-image:url(cards100/card_36.png)} .card_101{background-image:url(cards100/card_37.png)} .card_102{background-image:url(cards100/card_38.png)} .card_103{background-image:url(cards100/card_39.png)} .card_104{background-image:url(cards100/card_40.png)} .card_105{background-image:url(cards100/card_41.png)} .card_106{background-image:url(cards100/card_42.png)} .card_107{background-image:url(cards100/card_43.png)} .card_108{background-image:url(cards100/card_44.png)} .card_109{background-image:url(cards100/card_45.png)} .card_110{background-image:url(cards100/card_46.png)}