main { background-color: slategray; } aside { background-color: darkgray; } header { background-color: gainsboro; } body.France header.your_turn { background-color: lightskyblue; } body.Britain header.your_turn { background-color: salmon; } #role_France, #log .h2.france { background-color: #bdf; } #role_Britain, #log .h2.britain { background-color: #fcb; } aside { width: 220px; } /* LOG */ .checked::before { content: "\2714 " } .unchecked::before { content: "\2714 "; color:transparent; } #log { background-color: floralwhite; } #log .h1 { background-color: tan; font-weight: bold; padding-top:2px; padding-bottom:2px; text-align: center; } #log .h2 { background-color: wheat; padding-top:2px; padding-bottom:2px; text-align: center; } #log .h3 { background-color: antiquewhite; padding-top:2px; padding-bottom:2px; text-align: center; } #log .b { text-transform: uppercase; } #log .tip { color: blue; } #log .tip:hover { text-decoration: underline; } #log .indent { padding-left: 12px; text-indent: -12px; } /* CARDS */ .card { width: 240px; height: 336px; border-radius: 16px; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); transition: transform 100ms; background-color: #f1ead0; background-size: cover; background-repeat: no-repeat; border: 1px solid #655c4d; } .card.highlight { box-shadow: 0 0 0 2px yellow; } .card.enabled:hover, .card.selected { transform: translateY(-10px); } .hand .card { display: none; } .hand .card.show { display: block; } .card_info { border-bottom: 1px solid black; padding: 15px 0; } .card_info .card { width: 120px; height: 168px; border-radius: 8px; margin: 0 auto; } #tooltip { display: none; position: fixed; z-index: 300; right: 240px; top: 60px; } #tooltip.show { display: block; } /* CARD LIST DIALOGS */ .card_list_dialog { position: absolute; width: 300px; border: 1px solid black; box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5); user-select: none; } .card_list_header { cursor: move; border-bottom: 1px solid black; background-color: tan; padding: 5px 10px; } .card_list_x { cursor: pointer; float: right; padding: 0px 2px; margin: 5px 5px; } .card_list_x:hover { background-color: black; color: white; } .card_list_body { padding: 5px 10px; background-color: floralwhite; overflow-y: scroll; max-height: 500px; } .card_list_body div { text-indent: -30px; margin-left: 30px; } #removed { top: 100px; left: 100px; z-index: 98; } #discard { top: 100px; left: 425px; z-index: 99; } /* CARD MENU */ #popup { position: fixed; user-select: none; background-color: white; left: 10px; top: 100px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3); z-index: 300; min-width: 20ex; white-space: nowrap; display: none; border: 1px solid black; } #popup div { padding: 3pt 8pt; color: gray; display: none; } #popup div.enabled { color: black; display: block; } #popup div.enabled:hover { background-color: black; color: white; } #popup div.always { display: block; } /* MAP */ #mapwrap { position: relative; box-shadow: 0px 1px 10px rgba(0,0,0,0.5); width: 2550px; height: 1650px; } #map { position: absolute; width: 2550px; height: 1650px; background-color: #ffedb3; background-size: cover; background-repeat: no-repeat; } #map.hide_pieces #pieces { display: none; } #map.hide_markers #markers { display: none; } #events { position: absolute; display: flex; top: 230px; left: 190px; } .event { margin: 3px; } #focus { position: absolute; background-color: black; opacity: 50%; box-shadow: 0 0 5px black; z-index: 100; } .offmap { display: none; } .highlight { cursor: pointer; z-index: 200; } /* SPACES */ .leader-box { background-repeat: no-repeat; background-size: 32px; } .leader-box.french { background-position: center bottom 35px; } .leader-box.british { background-position: center bottom 30px; } .leader-box.dead { background-image: url(/images/hasty-grave.svg); opacity: 20%; } .leader-box.pool { background-image: url(/images/swap-bag.svg); opacity: 40%;} .leader-box.unavailable { background-image: url(/images/swap-bag.svg); opacity: 20%; } .wilderness, .cultivated, .box, .militia-box, .leader-box { position: absolute; border: 5px solid transparent; } .wilderness { border-radius: 50%; } .mountain { position: absolute; border-radius: 66% 34% 0 0; background-size: cover; background-repeat: no-repeat; } .mountain.highlight { background-image: url(mountain-highlight.svg); } .mountain.selected { background-image: url(mountain-selected.svg); } .mountain.british_supply { background-image: url(mountain-supply-british.svg); } .mountain.french_supply { background-image: url(mountain-supply-french.svg); } .mountain.british_supply.french_supply { background-image: url(mountain-supply-both.svg); } .cultivated.highlight, .box.highlight, .militia-box.highlight { border-color: white; box-shadow: 0 0 5px white; } .wilderness.highlight { border-color: white; } .wilderness.selected, .cultivated.selected, .box.selected, .militia-box.selected { border-color: crimson; } .wilderness.french_supply, .cultivated.french_supply, .box.french_supply { border-top-color: #0092d5; border-left-color: #0092d5; } .wilderness.british_supply, .cultivated.british_supply, .box.british_supply { border-bottom-color: #f0594e; border-right-color: #f0594e; } /* COUNTERS */ .leader, .unit, .marker { transition: left 200ms, top 200ms; position: absolute; background-size: auto 100%; background-repeat: no-repeat; } .leader.activated, .unit.activated { transform: rotate(20deg); } .leader.inside, .unit.inside { filter: grayscale(50%); } /* FLAT STYLE */ body.flat .leader, body.flat .unit, body.flat .marker, body.flat .event { border-width: 1px; border-style: solid; } body.flat .leader.highlight, body.flat .unit.highlight { box-shadow:0 0 0 2px yellow; } body.flat .leader.selected, body.flat .unit.selected { box-shadow:0 0 0 2px crimson; } /* BEVEL STYLE ( top right bottom left ) */ body.bevel .leader, body.bevel .unit, body.bevel .marker, body.bevel .event { border-width: 2px; border-style: solid; } /* TRACKS */ #bpa_reluctant { position: absolute; top: 1228px; left: 48px; width: 93px; height: 128px; } #bpa_supportive { position: absolute; top: 1356px; left: 48px; width: 93px; height: 128px; } #bpa_enthusiastic { position: absolute; top: 1484px; left: 48px; width: 93px; height: 128px; } #season_marker.early { top: 104px; } #season_marker.late { top: 160px; } #season_marker.year_1755 { left: 220px; } #season_marker.year_1756 { left: 304px; } #season_marker.year_1757 { left: 388px; } #season_marker.year_1758 { left: 472px; } #season_marker.year_1759 { left: 556px; } #season_marker.year_1760 { left: 640px; } #season_marker.year_1761 { left: 725px; } #season_marker.year_1762 { left: 809px; } #vp_marker { left: 76px; top: 39px; } #vp_marker.french_vp_10 { top: 40px; } #vp_marker.french_vp_9 { top: 95px; } #vp_marker.french_vp_8 { top: 150px; left: 82px; } #vp_marker.french_vp_7 { top: 205px; } #vp_marker.french_vp_6 { top: 260px; } #vp_marker.french_vp_5 { top: 315px; left: 82px; } #vp_marker.french_vp_4 { top: 371px; } #vp_marker.french_vp_3 { top: 426px; } #vp_marker.french_vp_2 { top: 481px; } #vp_marker.french_vp_1 { top: 537px; left: 82px; } #vp_marker.vp_0 { top: 592px; } /* 0 */ #vp_marker.british_vp_1 { top: 647px; } #vp_marker.british_vp_2 { top: 702px; } #vp_marker.british_vp_3 { top: 757px; } #vp_marker.british_vp_4 { top: 812px; } #vp_marker.british_vp_5 { top: 867px; left: 82px; } #vp_marker.british_vp_6 { top: 923px; } #vp_marker.british_vp_7 { top: 978px; } #vp_marker.british_vp_8 { top: 1033px; } #vp_marker.british_vp_9 { top: 1089px; } #vp_marker.british_vp_10 { top: 1144px; } #pa_marker { left: 70px; } #pa_marker.reluctant { top: 1270px; } #pa_marker.supportive { top: 1398px; } #pa_marker.enthusiastic { top: 1526px; } /* MARKERS */ .marker{width:45px;height:45px;} .marker.small{width:36px;height:36px} .event{width:54px;height:54px;background-size:cover;display:none} .event.show{display:block} .m1s{width:45px;height:45px;background-position:-0px 0} .m1{width:45px;height:45px;background-position:-0px 0} .m1.reduced{background-position:-45px 0} .m2s{width:45px;height:45px;background-position:-45px 0} .m2{width:45px;height:45px;background-position:-90px 0} .m2.reduced{background-position:-135px 0} .m3s{width:45px;height:45px;background-position:-90px 0} .m3{width:45px;height:45px;background-position:-180px 0} .m3.reduced{background-position:-225px 0} .m4s{width:45px;height:45px;background-position:-135px 0} .m4{width:45px;height:45px;background-position:-270px 0} .m4.reduced{background-position:-315px 0} .m5s{width:45px;height:45px;background-position:-180px 0} .m5{width:45px;height:45px;background-position:-360px 0} .m5.reduced{background-position:-405px 0} .m6s{width:45px;height:45px;background-position:-225px 0} .m6{width:45px;height:45px;background-position:-450px 0} .m6.reduced{background-position:-495px 0} .m7s{width:45px;height:45px;background-position:-270px 0} .m7{width:45px;height:45px;background-position:-540px 0} .m7.reduced{background-position:-585px 0} .m8s{width:45px;height:45px;background-position:-315px 0} .m8{width:45px;height:45px;background-position:-630px 0} .m8.reduced{background-position:-675px 0} .m9s{width:45px;height:45px;background-position:-360px 0} .m9{width:45px;height:45px;background-position:-720px 0} .m9.reduced{background-position:-765px 0} .m10s{width:45px;height:45px;background-position:-405px 0} .m10{width:45px;height:45px;background-position:-810px 0} .m10.reduced{background-position:-855px 0} .m11s{width:45px;height:45px;background-position:-450px 0} .m11{width:45px;height:45px;background-position:-900px 0} .m11.reduced{background-position:-945px 0} .m12s{width:45px;height:45px;background-position:-495px 0} .m12{width:45px;height:45px;background-position:-990px 0} .m12.reduced{background-position:-1035px 0} .m13s{width:45px;height:45px;background-position:-540px 0} .m13{width:45px;height:45px;background-position:-1080px 0} .m13.reduced{background-position:-1125px 0} .m14s{width:45px;height:45px;background-position:-585px 0} .m14{width:45px;height:45px;background-position:-1170px 0} .m14.reduced{background-position:-1215px 0} .m15s{width:45px;height:45px;background-position:-630px 0} .m15{width:45px;height:45px;background-position:-1260px 0} .m15.reduced{background-position:-1305px 0} .m16s{width:45px;height:45px;background-position:-675px 0} .m16{width:45px;height:45px;background-position:-1350px 0} .m16.reduced{background-position:-1395px 0} .m17s{width:45px;height:45px;background-position:-720px 0} .m17{width:45px;height:45px;background-position:-1440px 0} .m17.reduced{background-position:-1485px 0} .t1s{width:54px;height:117px;background-position:-0px 0} .t2s{width:54px;height:117px;background-position:-54px 0} .t3s{width:54px;height:117px;background-position:-108px 0} .t4s{width:54px;height:117px;background-position:-162px 0} .t5s{width:54px;height:117px;background-position:-216px 0} .t6s{width:54px;height:117px;background-position:-270px 0} .t7s{width:54px;height:117px;background-position:-324px 0} .t8s{width:54px;height:117px;background-position:-378px 0} .t9s{width:54px;height:117px;background-position:-432px 0} .t10s{width:54px;height:117px;background-position:-486px 0} .c1{border-radius:50%;width:48px;height:48px;background-position:-0px 0} .c1.reduced{background-position:-48px 0} .c2{border-radius:50%;width:48px;height:48px;background-position:-96px 0} .c2.reduced{background-position:-144px 0} .c3{border-radius:50%;width:48px;height:48px;background-position:-192px 0} .c3.reduced{background-position:-240px 0} .c4{border-radius:50%;width:48px;height:48px;background-position:-288px 0} .c4.reduced{background-position:-336px 0} .c5{border-radius:50%;width:48px;height:48px;background-position:-384px 0} .c5.reduced{background-position:-432px 0} .c6{border-radius:50%;width:48px;height:48px;background-position:-480px 0} .c6.reduced{background-position:-528px 0} .c7{border-radius:50%;width:48px;height:48px;background-position:-576px 0} .c7.reduced{background-position:-624px 0} .c8{border-radius:50%;width:48px;height:48px;background-position:-672px 0} .c8.reduced{background-position:-720px 0} /* COLORS */ .leader{background-color:#f0f0f0} body.bevel .leader{border-color:#f5f5f5 #d8d8d8 #d8d8d8 #f5f5f5;box-shadow:0 0 0 1px #707070} body.bevel .leader.highlight{box-shadow:0 0 0 1px #707070,0 0 0 3px yellow} body.bevel .leader.selected{box-shadow:0 0 0 1px #707070,0 0 0 3px crimson} body.flat .leader{border-color:#707070} .event{background-color:#f0f0f0} body.bevel .event{border-color:#f5f5f5 #d8d8d8 #d8d8d8 #f5f5f5;box-shadow:0 0 0 1px #707070} body.bevel .event.highlight{box-shadow:0 0 0 1px #707070,0 0 0 3px yellow} body.bevel .event.selected{box-shadow:0 0 0 1px #707070,0 0 0 3px crimson} body.flat .event{border-color:#707070} .marker.amphib{background-color:#f0f0f0} body.bevel .marker.amphib{border-color:#f5f5f5 #d8d8d8 #d8d8d8 #f5f5f5;box-shadow:0 0 0 1px #707070} body.bevel .marker.amphib.highlight{box-shadow:0 0 0 1px #707070,0 0 0 3px yellow} body.bevel .marker.amphib.selected{box-shadow:0 0 0 1px #707070,0 0 0 3px crimson} body.flat .marker.amphib{border-color:#707070} .marker.british_allied{background-color:#ffd990} body.bevel .marker.british_allied{border-color:#fff8af #dfb86f #dfb86f #fff8af;box-shadow:0 0 0 1px #7f580f} body.bevel .marker.british_allied.highlight{box-shadow:0 0 0 1px #7f580f,0 0 0 3px yellow} body.bevel .marker.british_allied.selected{box-shadow:0 0 0 1px #7f580f,0 0 0 3px crimson} body.flat .marker.british_allied{border-color:#7f580f} .marker.french_allied{background-color:#ffd990} body.bevel .marker.french_allied{border-color:#fff8af #dfb86f #dfb86f #fff8af;box-shadow:0 0 0 1px #7f580f} body.bevel .marker.french_allied.highlight{box-shadow:0 0 0 1px #7f580f,0 0 0 3px yellow} body.bevel .marker.french_allied.selected{box-shadow:0 0 0 1px #7f580f,0 0 0 3px crimson} body.flat .marker.french_allied{border-color:#7f580f} .marker.british_stockade{background-color:#e7e2c5} body.bevel .marker.british_stockade{border-color:#ffffe3 #c7c2a4 #c7c2a4 #ffffe3;box-shadow:0 0 0 1px #676244} body.bevel .marker.british_stockade.highlight{box-shadow:0 0 0 1px #676244,0 0 0 3px yellow} body.bevel .marker.british_stockade.selected{box-shadow:0 0 0 1px #676244,0 0 0 3px crimson} body.flat .marker.british_stockade{border-color:#676244} .marker.french_stockade{background-color:#e7e2c5} body.bevel .marker.french_stockade{border-color:#ffffe3 #c7c2a4 #c7c2a4 #ffffe3;box-shadow:0 0 0 1px #676244} body.bevel .marker.french_stockade.highlight{box-shadow:0 0 0 1px #676244,0 0 0 3px yellow} body.bevel .marker.french_stockade.selected{box-shadow:0 0 0 1px #676244,0 0 0 3px crimson} body.flat .marker.french_stockade{border-color:#676244} .marker.british_raided{background-color:#f78b33} body.bevel .marker.british_raided{border-color:#ffaa52 #d76a12 #d76a12 #ffaa52;box-shadow:0 0 0 1px #770a00} body.bevel .marker.british_raided.highlight{box-shadow:0 0 0 1px #770a00,0 0 0 3px yellow} body.bevel .marker.british_raided.selected{box-shadow:0 0 0 1px #770a00,0 0 0 3px crimson} body.flat .marker.british_raided{border-color:#770a00} .marker.french_raided{background-color:#f78b33} body.bevel .marker.french_raided{border-color:#ffaa52 #d76a12 #d76a12 #ffaa52;box-shadow:0 0 0 1px #770a00} body.bevel .marker.french_raided.highlight{box-shadow:0 0 0 1px #770a00,0 0 0 3px yellow} body.bevel .marker.french_raided.selected{box-shadow:0 0 0 1px #770a00,0 0 0 3px crimson} body.flat .marker.french_raided{border-color:#770a00} .marker.siege_0{background-color:#fff460} body.bevel .marker.siege_0{border-color:#ffff78 #dfd43f #dfd43f #ffff78;box-shadow:0 0 0 1px #7f7400} body.bevel .marker.siege_0.highlight{box-shadow:0 0 0 1px #7f7400,0 0 0 3px yellow} body.bevel .marker.siege_0.selected{box-shadow:0 0 0 1px #7f7400,0 0 0 3px crimson} body.flat .marker.siege_0{border-color:#7f7400} .marker.siege_1{background-color:#fff460} body.bevel .marker.siege_1{border-color:#ffff78 #dfd43f #dfd43f #ffff78;box-shadow:0 0 0 1px #7f7400} body.bevel .marker.siege_1.highlight{box-shadow:0 0 0 1px #7f7400,0 0 0 3px yellow} body.bevel .marker.siege_1.selected{box-shadow:0 0 0 1px #7f7400,0 0 0 3px crimson} body.flat .marker.siege_1{border-color:#7f7400} .marker.siege_2{background-color:#fff460} body.bevel .marker.siege_2{border-color:#ffff78 #dfd43f #dfd43f #ffff78;box-shadow:0 0 0 1px #7f7400} body.bevel .marker.siege_2.highlight{box-shadow:0 0 0 1px #7f7400,0 0 0 3px yellow} body.bevel .marker.siege_2.selected{box-shadow:0 0 0 1px #7f7400,0 0 0 3px crimson} body.flat .marker.siege_2{border-color:#7f7400} .marker.fieldworks{background-color:#e3dfd6} body.bevel .marker.fieldworks{border-color:#fffef5 #c3beb5 #c3beb5 #fffef5;box-shadow:0 0 0 1px #635e55} body.bevel .marker.fieldworks.highlight{box-shadow:0 0 0 1px #635e55,0 0 0 3px yellow} body.bevel .marker.fieldworks.selected{box-shadow:0 0 0 1px #635e55,0 0 0 3px crimson} body.flat .marker.fieldworks{border-color:#635e55} .unit.british{background-color:#eac99e} body.bevel .unit.british{border-color:#ffe8bd #caa87d #caa87d #ffe8bd;box-shadow:0 0 0 1px #6a481d} body.bevel .unit.british.highlight{box-shadow:0 0 0 1px #6a481d,0 0 0 3px yellow} body.bevel .unit.british.selected{box-shadow:0 0 0 1px #6a481d,0 0 0 3px crimson} body.flat .unit.british{border-color:#6a481d} .marker.british_fort{background-color:#ef473e} body.bevel .marker.british_fort{border-color:#ff665d #cf261d #cf261d #ff665d;box-shadow:0 0 0 1px #770000} body.bevel .marker.british_fort.highlight{box-shadow:0 0 0 1px #770000,0 0 0 3px yellow} body.bevel .marker.british_fort.selected{box-shadow:0 0 0 1px #770000,0 0 0 3px crimson} body.flat .marker.british_fort{border-color:#770000} .marker.british_fort_uc{background-color:#f15a4f} body.bevel .marker.british_fort_uc{border-color:#ff796e #d1392e #d1392e #ff796e;box-shadow:0 0 0 1px #710000} body.bevel .marker.british_fort_uc.highlight{box-shadow:0 0 0 1px #710000,0 0 0 3px yellow} body.bevel .marker.british_fort_uc.selected{box-shadow:0 0 0 1px #710000,0 0 0 3px crimson} body.flat .marker.british_fort_uc{border-color:#710000} .unit.french{background-color:#aae0fa} body.bevel .unit.french{border-color:#c9ffff #89c0da #89c0da #c9ffff;box-shadow:0 0 0 1px #29607a} body.bevel .unit.french.highlight{box-shadow:0 0 0 1px #29607a,0 0 0 3px yellow} body.bevel .unit.french.selected{box-shadow:0 0 0 1px #29607a,0 0 0 3px crimson} body.flat .unit.french{border-color:#29607a} .marker.french_fort{background-color:#007ec5} body.bevel .marker.french_fort{border-color:#1f9ee5 #005ea5 #005ea5 #1f9ee5;box-shadow:0 0 0 1px #001d64} body.bevel .marker.french_fort.highlight{box-shadow:0 0 0 1px #001d64,0 0 0 3px yellow} body.bevel .marker.french_fort.selected{box-shadow:0 0 0 1px #001d64,0 0 0 3px crimson} body.flat .marker.french_fort{border-color:#001d64} .marker.french_fort_uc{background-color:#0093d6} body.bevel .marker.french_fort_uc{border-color:#1fb3f6 #0073b6 #0073b6 #1fb3f6;box-shadow:0 0 0 1px #002467} body.bevel .marker.french_fort_uc.highlight{box-shadow:0 0 0 1px #002467,0 0 0 3px yellow} body.bevel .marker.french_fort_uc.selected{box-shadow:0 0 0 1px #002467,0 0 0 3px crimson} body.flat .marker.french_fort_uc{border-color:#002467} .marker.season_french_first{background-color:#0072bb} body.bevel .marker.season_french_first{border-color:#1f92db #00529b #00529b #1f92db;box-shadow:0 0 0 1px #001963} body.bevel .marker.season_french_first.highlight{box-shadow:0 0 0 1px #001963,0 0 0 3px yellow} body.bevel .marker.season_french_first.selected{box-shadow:0 0 0 1px #001963,0 0 0 3px crimson} body.flat .marker.season_french_first{border-color:#001963} .marker.season_british_first{background-color:#da2127} body.bevel .marker.season_british_first{border-color:#fa4046 #ba0006 #ba0006 #fa4046;box-shadow:0 0 0 1px #810000} body.bevel .marker.season_british_first.highlight{box-shadow:0 0 0 1px #810000,0 0 0 3px yellow} body.bevel .marker.season_british_first.selected{box-shadow:0 0 0 1px #810000,0 0 0 3px crimson} body.flat .marker.season_british_first{border-color:#810000} .marker.provincial_assemblies{background-color:#004892} body.bevel .marker.provincial_assemblies{border-color:#1f68b2 #002872 #002872 #1f68b2;box-shadow:0 0 0 1px #000d57} body.bevel .marker.provincial_assemblies.highlight{box-shadow:0 0 0 1px #000d57,0 0 0 3px yellow} body.bevel .marker.provincial_assemblies.selected{box-shadow:0 0 0 1px #000d57,0 0 0 3px crimson} body.flat .marker.provincial_assemblies{border-color:#000d57} .marker.vps{background-color:#b4883d} body.bevel .marker.vps{border-color:#d4a75c #94671c #94671c #d4a75c;box-shadow:0 0 0 1px #340700} body.bevel .marker.vps.highlight{box-shadow:0 0 0 1px #340700,0 0 0 3px yellow} body.bevel .marker.vps.selected{box-shadow:0 0 0 1px #340700,0 0 0 3px crimson} body.flat .marker.vps{border-color:#340700}