main { background-color: slategray; } header { background-color: silver; } body.British header.your_turn { background-color: salmon; } body.American header.your_turn { background-color: skyblue; } aside { background-color: #f5e8d7; } .one .role_name { background-color: skyblue; } .two .role_name { background-color: salmon; } #log .h1 { background-color: tan; font-weight: bold; text-align: center; padding: 3px; } #log .h2 { background-color: tan; text-align: center; padding: 1px; } #log .h2.american { background-color: skyblue; } #log .h2.british { background-color: salmon; } #log .card_tip { text-decoration: dotted underline; } aside { width: 230px; } .role_info { padding: 10px 20px; background-color: wheat; white-space: pre-wrap; } .last_played { background-color: tan; } .last_played .card { margin: 5px auto; } /* CARD ACTION POPUP MENU */ #popup { position: absolute; user-select: none; background-color: #ddd; left: 10px; top: 100px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3); z-index: 100; min-width: 20ex; white-space: nowrap; } #popup div { padding: 3pt 8pt; display: none; } #popup div.enabled { padding: 3pt 8pt; display: block; } #popup div:hover { background-color: teal; color: white; } /* MAP WITH MARKERS, CUs, LEADERS, AND SPACES */ /* 3300x5100 */ #mapwrap { width: 1576px; height: 2480px; margin-top: 40px; } #map { width: 1576px; height: 2480px; background-image: url("/washingtons-war/images/map-75.jpg"); background-size: cover; box-shadow: 0 0 20px black; } #map.hide_markers > div { visibility: hidden; } .marker { transition-property: top, left; transition-duration: 700ms; } .marker { position: absolute; background-size: cover; } .marker.turn { width: 56.5px; height: 56.5px; background-image: url('/washingtons-war/images/Marker_GameTurnRegulars.jpg'); box-shadow: 1px 1px 5px rgba(0,0,0,0.5); } .marker.turn.no-regulars { background-image: url('/washingtons-war/images/Marker_GameTurnNoRegulars.jpg'); } .marker.french-alliance { width: 56.5px; height: 56.5px; background-image: url('/washingtons-war/images/Marker_FrenchAlliance.jpg'); box-shadow: 1px 1px 5px rgba(0,0,0,0.5); } .marker.french-alliance.european-war { background-image: url('/washingtons-war/images/Marker_EuropeanWar.jpg'); } .marker.french-navy { width: 63px; height: 126px; background-image: url('/washingtons-war/images/Marker_FrenchNavy.jpg'); box-shadow: 1px 1px 5px rgba(0,0,0,0.5); } .marker.congress { width: 56.5px; height: 56.5px; background-image: url('/washingtons-war/images/Marker_ContinentalCongress.jpg'); box-shadow: 1px 1px 5px rgba(0,0,0,0.5); } .marker.control { width: 38px; height: 38px; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); visibility: hidden; } .marker.control.british { visibility: visible; border: 4px solid white; background-image: url('/washingtons-war/images/BR_ColonyControl.png'); } .marker.control.american { visibility: visible; border: 4px solid #27b; background-image: url('/washingtons-war/images/AM_ColonyControl.png'); } .pc { width: 67px; height: 58.5px; } .pc { transform: scale(1.25) translate(-3px,5px); } .pc.american { background-image: url('/washingtons-war/images/American-PC.png'); } .pc.british { background-image: url('/washingtons-war/images/British-PC.png'); } .cu { width: 55px; height: 61px; line-height: 50px; padding-left: 6px; font-size: 30px; user-select: none; color: white; text-shadow: 0px 0px 3px black; font-weight: bold; border-radius: 60px; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); } .cu.american { background-image: url('/washingtons-war/images/American-CU.png'); } .cu.british { background-image: url('/washingtons-war/images/British-CU.png'); } .cu.french { background-image: url('/washingtons-war/images/French-CU.png'); } .general { position: absolute; width: 63px; height: 126px; background-size: cover; outline: 1px solid black; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); } .general.offmap { display: none; } .general.enabled { cursor: pointer; } .general.british.enabled, .general.british.selected { box-shadow: 0 0 5px 5px white; } .general.american.enabled, .general.american.selected { box-shadow: 0 0 5px 5px white; } .general.french.enabled, .general.french.selected { box-shadow: 0 0 5px 5px white; } .general:hover { z-index: 1; } .general.selected { z-index: 2; } .marker.congress { z-index: 3 } .cu { z-index: 4; } .space { z-index: 5; } .general.Arnold { background-image: url('/washingtons-war/images/AM_General_Arnold.jpg'); } .general.Gates { background-image: url('/washingtons-war/images/AM_General_Gates.jpg'); } .general.Greene { background-image: url('/washingtons-war/images/AM_General_Greene.jpg'); } .general.Lafayette { background-image: url('/washingtons-war/images/AM_General_Lafayette.jpg'); } .general.Lee { background-image: url('/washingtons-war/images/AM_General_Lee.jpg'); } .general.Lincoln { background-image: url('/washingtons-war/images/AM_General_Lincoln.jpg'); } .general.Rochambeau { background-image: url('/washingtons-war/images/AM_General_Rochambeau.jpg'); } .general.Washington { background-image: url('/washingtons-war/images/AM_General_Washington.jpg'); } .general.Burgoyne { background-image: url('/washingtons-war/images/BR_General_Burgoyne.jpg'); } .general.Carleton { background-image: url('/washingtons-war/images/BR_General_Carleton.jpg'); } .general.Clinton { background-image: url('/washingtons-war/images/BR_General_Clinton.jpg'); } .general.Cornwallis { background-image: url('/washingtons-war/images/BR_General_Cornwallis.jpg'); } .general.Howe { background-image: url('/washingtons-war/images/BR_General_Howe.jpg'); } .space { position: absolute; border: 7px solid transparent; display: none; } .space.enabled { display: block; border: 7px solid transparent; box-shadow: 0 0 10px 10px white; } .space.enabled:hover { border: 7px solid yellow; } .space.regular-space { border-radius: 100px; } .space.fortified-port { transform: rotate(45deg); } .space.blockade { border-radius: 15px; border: 7px solid white; box-shadow: none; } .space.highlight { cursor: pointer; display: block; } /* CARDS */ .card { background-position: -1px -1px; background-size: 188.5px 264px; width: 186px; height: 262px; border-radius: 10px; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); transition: 100ms; display: none; } .card.show { display: block; } .hand .card.enabled:hover, .hand .card.selected { Xtransform: scale(1.5) translate(0,-30px); transform: scale(1.1); z-index: 10; } .shift .hand .card:hover, .shift .hand .card.selected { transform: scale(1.5) translate(0,-30px); z-index: 10; } #war_ends { left:1034px; top:1611px; position:absolute; width: 186px; height: 262px; transform: rotate(90deg); background-position: -1px -1px; background-size: 188.5px 264px; border-radius: 10px; box-shadow: 2px -2px 8px rgba(0,0,0,0.5); display: none; } #war_ends.year_1779 { background-image:url('/washingtons-war/images/Card_71.jpg'); display: block; } #war_ends.year_1780 { background-image:url('/washingtons-war/images/Card_72.jpg'); display: block; } #war_ends.year_1781 { background-image:url('/washingtons-war/images/Card_73.jpg'); display: block; } #war_ends.year_1782 { background-image:url('/washingtons-war/images/Card_74.jpg'); display: block; } #war_ends.year_1783 { background-image:url('/washingtons-war/images/Card_75.jpg'); display: block; } #played_british_reinforcements { left: 871px; } #played_american_reinforcements_1 { left: 1104px; } #played_american_reinforcements_2 { left: 1336px; } .reinforcements { position:absolute; top: 1886px; width: 186px; height: 262px; background-position: -1px -1px; background-size: 188.5px 264px; border-radius: 10px; box-shadow: 2px 2px 8px rgba(0,0,0,0.5); display: none; } .reinforcements.ops_1 { background-image:url('/washingtons-war/images/Card_45-66.jpg'); display: block; } .reinforcements.ops_2 { background-image:url('/washingtons-war/images/Card_23-44.jpg'); display: block; } .reinforcements.ops_3 { background-image:url('/washingtons-war/images/Card_1-22.jpg'); display: block; } /* IMAGES */ .card_back{background-image:url('/washingtons-war/images/Card_Back.png')} .card_1{background-image:url('/washingtons-war/images/Card_1-22.jpg')} .card_2{background-image:url('/washingtons-war/images/Card_1-22.jpg')} .card_3{background-image:url('/washingtons-war/images/Card_1-22.jpg')} .card_4{background-image:url('/washingtons-war/images/Card_1-22.jpg')} .card_5{background-image:url('/washingtons-war/images/Card_1-22.jpg')} .card_6{background-image:url('/washingtons-war/images/Card_1-22.jpg')} .card_7{background-image:url('/washingtons-war/images/Card_1-22.jpg')} .card_8{background-image:url('/washingtons-war/images/Card_1-22.jpg')} .card_9{background-image:url('/washingtons-war/images/Card_1-22.jpg')} .card_10{background-image:url('/washingtons-war/images/Card_1-22.jpg')} .card_11{background-image:url('/washingtons-war/images/Card_1-22.jpg')} .card_12{background-image:url('/washingtons-war/images/Card_1-22.jpg')} .card_13{background-image:url('/washingtons-war/images/Card_1-22.jpg')} .card_14{background-image:url('/washingtons-war/images/Card_1-22.jpg')} .card_15{background-image:url('/washingtons-war/images/Card_1-22.jpg')} .card_16{background-image:url('/washingtons-war/images/Card_1-22.jpg')} .card_17{background-image:url('/washingtons-war/images/Card_1-22.jpg')} .card_18{background-image:url('/washingtons-war/images/Card_1-22.jpg')} .card_19{background-image:url('/washingtons-war/images/Card_1-22.jpg')} .card_20{background-image:url('/washingtons-war/images/Card_1-22.jpg')} .card_21{background-image:url('/washingtons-war/images/Card_1-22.jpg')} .card_22{background-image:url('/washingtons-war/images/Card_1-22.jpg')} .card_23{background-image:url('/washingtons-war/images/Card_23-44.jpg')} .card_24{background-image:url('/washingtons-war/images/Card_23-44.jpg')} .card_25{background-image:url('/washingtons-war/images/Card_23-44.jpg')} .card_26{background-image:url('/washingtons-war/images/Card_23-44.jpg')} .card_27{background-image:url('/washingtons-war/images/Card_23-44.jpg')} .card_28{background-image:url('/washingtons-war/images/Card_23-44.jpg')} .card_29{background-image:url('/washingtons-war/images/Card_23-44.jpg')} .card_30{background-image:url('/washingtons-war/images/Card_23-44.jpg')} .card_31{background-image:url('/washingtons-war/images/Card_23-44.jpg')} .card_32{background-image:url('/washingtons-war/images/Card_23-44.jpg')} .card_33{background-image:url('/washingtons-war/images/Card_23-44.jpg')} .card_34{background-image:url('/washingtons-war/images/Card_23-44.jpg')} .card_35{background-image:url('/washingtons-war/images/Card_23-44.jpg')} .card_36{background-image:url('/washingtons-war/images/Card_23-44.jpg')} .card_37{background-image:url('/washingtons-war/images/Card_23-44.jpg')} .card_38{background-image:url('/washingtons-war/images/Card_23-44.jpg')} .card_39{background-image:url('/washingtons-war/images/Card_23-44.jpg')} .card_40{background-image:url('/washingtons-war/images/Card_23-44.jpg')} .card_41{background-image:url('/washingtons-war/images/Card_23-44.jpg')} .card_42{background-image:url('/washingtons-war/images/Card_23-44.jpg')} .card_43{background-image:url('/washingtons-war/images/Card_23-44.jpg')} .card_44{background-image:url('/washingtons-war/images/Card_23-44.jpg')} .card_45{background-image:url('/washingtons-war/images/Card_45-66.jpg')} .card_46{background-image:url('/washingtons-war/images/Card_45-66.jpg')} .card_47{background-image:url('/washingtons-war/images/Card_45-66.jpg')} .card_48{background-image:url('/washingtons-war/images/Card_45-66.jpg')} .card_49{background-image:url('/washingtons-war/images/Card_45-66.jpg')} .card_50{background-image:url('/washingtons-war/images/Card_45-66.jpg')} .card_51{background-image:url('/washingtons-war/images/Card_45-66.jpg')} .card_52{background-image:url('/washingtons-war/images/Card_45-66.jpg')} .card_53{background-image:url('/washingtons-war/images/Card_45-66.jpg')} .card_54{background-image:url('/washingtons-war/images/Card_45-66.jpg')} .card_55{background-image:url('/washingtons-war/images/Card_45-66.jpg')} .card_56{background-image:url('/washingtons-war/images/Card_45-66.jpg')} .card_57{background-image:url('/washingtons-war/images/Card_45-66.jpg')} .card_58{background-image:url('/washingtons-war/images/Card_45-66.jpg')} .card_59{background-image:url('/washingtons-war/images/Card_45-66.jpg')} .card_60{background-image:url('/washingtons-war/images/Card_45-66.jpg')} .card_61{background-image:url('/washingtons-war/images/Card_45-66.jpg')} .card_62{background-image:url('/washingtons-war/images/Card_45-66.jpg')} .card_63{background-image:url('/washingtons-war/images/Card_45-66.jpg')} .card_64{background-image:url('/washingtons-war/images/Card_45-66.jpg')} .card_65{background-image:url('/washingtons-war/images/Card_45-66.jpg')} .card_66{background-image:url('/washingtons-war/images/Card_45-66.jpg')} .card_67{background-image:url('/washingtons-war/images/Card_67-69.jpg')} .card_68{background-image:url('/washingtons-war/images/Card_67-69.jpg')} .card_69{background-image:url('/washingtons-war/images/Card_67-69.jpg')} .card_70{background-image:url('/washingtons-war/images/Card_70.jpg')} .card_71{background-image:url('/washingtons-war/images/Card_71.jpg')} .card_72{background-image:url('/washingtons-war/images/Card_72.jpg')} .card_73{background-image:url('/washingtons-war/images/Card_73.jpg')} .card_74{background-image:url('/washingtons-war/images/Card_74.jpg')} .card_75{background-image:url('/washingtons-war/images/Card_75.jpg')} .card_76{background-image:url('/washingtons-war/images/Card_76.jpg')} .card_77{background-image:url('/washingtons-war/images/Card_77.jpg')} .card_78{background-image:url('/washingtons-war/images/Card_78.jpg')} .card_79{background-image:url('/washingtons-war/images/Card_79.jpg')} .card_80{background-image:url('/washingtons-war/images/Card_80.jpg')} .card_81{background-image:url('/washingtons-war/images/Card_81.jpg')} .card_82{background-image:url('/washingtons-war/images/Card_82.jpg')} .card_83{background-image:url('/washingtons-war/images/Card_83.jpg')} .card_84{background-image:url('/washingtons-war/images/Card_84.jpg')} .card_85{background-image:url('/washingtons-war/images/Card_85.jpg')} .card_86{background-image:url('/washingtons-war/images/Card_86.jpg')} .card_87{background-image:url('/washingtons-war/images/Card_87.jpg')} .card_88{background-image:url('/washingtons-war/images/Card_88.jpg')} .card_89{background-image:url('/washingtons-war/images/Card_89.jpg')} .card_90{background-image:url('/washingtons-war/images/Card_90.jpg')} .card_91{background-image:url('/washingtons-war/images/Card_91.jpg')} .card_92{background-image:url('/washingtons-war/images/Card_92.jpg')} .card_93{background-image:url('/washingtons-war/images/Card_93.jpg')} .card_94{background-image:url('/washingtons-war/images/Card_94.jpg')} .card_95{background-image:url('/washingtons-war/images/Card_95.jpg')} .card_96{background-image:url('/washingtons-war/images/Card_96.jpg')} .card_97{background-image:url('/washingtons-war/images/Card_97.jpg')} .card_98{background-image:url('/washingtons-war/images/Card_98.jpg')} .card_99{background-image:url('/washingtons-war/images/Card_99.jpg')} .card_100{background-image:url('/washingtons-war/images/Card_100.jpg')} .card_101{background-image:url('/washingtons-war/images/Card_101.jpg')} .card_102{background-image:url('/washingtons-war/images/Card_102.jpg')} .card_103{background-image:url('/washingtons-war/images/Card_103.jpg')} .card_104{background-image:url('/washingtons-war/images/Card_104.jpg')} .card_105{background-image:url('/washingtons-war/images/Card_105.jpg')} .card_106{background-image:url('/washingtons-war/images/Card_106.jpg')} .card_107{background-image:url('/washingtons-war/images/Card_107.jpg')} .card_108{background-image:url('/washingtons-war/images/Card_108.jpg')} .card_109{background-image:url('/washingtons-war/images/Card_109.jpg')} .card_110{background-image:url('/washingtons-war/images/Card_110.jpg')}