summaryrefslogtreecommitdiff
path: root/play.css
diff options
context:
space:
mode:
authorTor Andersson <tor@ccxvii.net>2023-12-08 11:12:55 +0100
committerTor Andersson <tor@ccxvii.net>2023-12-08 11:23:27 +0100
commit6458bf77fb8b33551a1f44a3d3de4ecd222d2ce6 (patch)
tree5de1e55c82673955e7e0f03b721586a2407f140e /play.css
parentd250074699464c561205c3615ea8620770c5c4d0 (diff)
downloadvotes-for-women-6458bf77fb8b33551a1f44a3d3de4ecd222d2ce6.tar.gz
Split CSS into separate file.
Diffstat (limited to 'play.css')
-rw-r--r--play.css878
1 files changed, 878 insertions, 0 deletions
diff --git a/play.css b/play.css
new file mode 100644
index 0000000..b2b7de0
--- /dev/null
+++ b/play.css
@@ -0,0 +1,878 @@
+@font-face {
+ font-family: CopperplateCC;
+ src: url(fonts/CopperplateCC/CopperplateCC-Heavy.woff2) format('woff2')
+}
+
+@font-face {
+ font-family: CopperplateCC;
+ font-weight: bold;
+ src: url(fonts/CopperplateCC/CopperplateCC-Bold.woff2) format('woff2')
+}
+
+@font-face {
+ font-family: TiffanyGothicCC;
+ src: url(fonts/TiffanyGothicCC/TiffanyGothicCC.woff2) format('woff2')
+}
+
+:root {
+ --back-strategy: hsl(36, 71%, 66%);
+ --back-states: hsl(89, 30%, 50%);
+ --back-suf: hsl(278, 29%, 43%);
+ --back-opp: hsl(14, 67%, 56%);
+
+ --action-suf: hsl(278, 29%, 43%);
+ --action-opp: hsl(14, 67%, 56%);
+ --action-strategy: hsl(36, 71%, 70%);
+ --action-states: hsl(89, 30%, 70%);
+
+ --states-25: hsl(88, 100%, 20%);
+ --strategy-25: hsl(36, 100%, 20%);
+
+ --suf-25: hsl(273, 80%, 25%);
+ --suf-50: hsl(273, 80%, 50%);
+ --suf-75: hsl(273, 39%, 75%);
+ --suf-85: hsl(273, 39%, 85%);
+ --suf-90: hsl(273, 39%, 90%);
+ --suf-95: hsl(273, 39%, 95%);
+
+ --opp-25: hsl(16, 100%, 25%);
+ --opp-50: hsl(16, 90%, 50%);
+ --opp-75: hsl(16, 85%, 75%);
+ --opp-85: hsl(16, 85%, 85%);
+ --opp-90: hsl(16, 85%, 90%);
+ --opp-95: hsl(16, 85%, 95%);
+}
+
+main {
+ background-color: slategray;
+ background-color: hsl(170, 15%, 40%);
+}
+
+#role_Suffragist { background-color: var(--suf-85); }
+#role_Opposition { background-color: var(--opp-85); }
+.role.active .role_name span { text-decoration: underline; }
+
+.role_vp { float: right; height: 24px; color: #000c; }
+
+body.Suffragist header.your_turn { background-color: var(--suf-75); }
+body.Opposition header.your_turn { background-color: var(--opp-75); }
+
+#log { background-color: floralwhite; }
+#log .h1, #log .h2 {
+ font-family: TiffanyGothicCC;
+ font-size: 10px;
+ padding-top: 2px;
+ padding-bottom: 2px;
+ text-align: center;
+ border-top: 1px solid black;
+ border-bottom: 1px solid black;
+}
+#log .h1 { background-color: hsl(170, 40%, 73%); }
+#log .h2 { background-color: hsl(170, 40%, 83%); }
+
+#log .suf { background-color: var(--suf-85); border-top: 1px solid var(--suf-25); border-bottom: 1px solid var(--suf-25); }
+#log .opp { background-color: var(--opp-85); border-top: 1px solid var(--opp-25); border-bottom: 1px solid var(--opp-25); }
+#log .suf, #log .opp {
+ font-family: TiffanyGothicCC;
+ font-size: 10px;
+}
+#log .tip { cursor: pointer; }
+#log .tip.states { font-style: italic; }
+#log .tip.support { font-style: italic; }
+#log .tip.opposition { font-style: italic; }
+#log .tip.strategy { font-style: italic; }
+#log .tip:hover { text-decoration: underline; }
+
+#log .tip.support { color: var(--suf-25); }
+#log .tip.opposition { color: var(--opp-25); }
+#log .tip.states { color: var(--states-25); }
+#log .tip.strategy { color: var(--strategy-25); }
+
+#log > .p { padding-left: 20px; text-align: right; font-style: italic; opacity: 75%; }
+#log > .i { padding-left: 20px; }
+
+#log .icon {
+ display: inline-block;
+ vertical-align: -2px;
+ width: 12px;
+ height: 12px;
+ box-shadow: none;
+ border: none;
+ background-size: contain;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+#log .die_d4, #log .die_d6, #log .die_d8 {
+ display: inline-block;
+ vertical-align: -3px;
+ width: 15px;
+ height: 15px;
+ background-size: auto 15px;
+}
+
+#log .d1 { background-position: -0px 0px; }
+#log .d2 { background-position: -15px 0px; }
+#log .d3 { background-position: -30px 0px; }
+#log .d4 { background-position: -45px 0px; }
+#log .d5 { background-position: -60px 0px; }
+#log .d6 { background-position: -75px 0px; }
+#log .d7 { background-position: -90px 0px; }
+#log .d8 { background-position: -105px 0px; }
+
+#log .die_d4 { background-image: url(images/d4.1x.png); }
+#log .die_d6 { background-image: url(images/d6.1x.png); }
+#log .die_d8 { background-image: url(images/d8.1x.png); }
+
+@media (min-resolution: 97dpi) {
+#log .die_d4 { background-image: url(images/d4.2x.png); }
+#log .die_d6 { background-image: url(images/d6.2x.png); }
+#log .die_d8 { background-image: url(images/d8.2x.png); }
+}
+
+#log .purple_campaigner {
+ background-image: url(images/icon_purple_campaigner.png);
+}
+
+#log .yellow_campaigner {
+ background-image: url(images/icon_yellow_campaigner.png);
+}
+
+#log .red_campaigner {
+ background-image: url(images/icon_opposition_campaigner.png);
+}
+
+#log .purple_cube {
+ background-image: url(images/icon_purple_cube.png);
+}
+
+#log .yellow_cube {
+ background-image: url(images/icon_yellow_cube.png);
+}
+
+#log .purple_or_yellow_cube {
+ background-image: url(images/icon_purple_or_yellow_cube.png);
+}
+
+#log .red_cube {
+ background-image: url(images/icon_opposition_cube.png);
+}
+
+#log .button {
+ background-image: url(images/icon_button.png);
+}
+
+#log .congressional_marker {
+ background-image: url(images/icon_congressional_marker.png);
+}
+
+#log .green_check {
+ background-image: url(images/icon_green_check.png);
+}
+
+#log .red_x {
+ background-image: url(images/icon_red_x.png);
+}
+
+/* PANELS */
+
+section > * {
+ margin: 24px auto;
+}
+
+.row {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: start;
+ gap: 24px;
+}
+
+.panel {
+ padding: 3px;
+ font-family: TiffanyGothicCC;
+ x-font-variant: small-caps;
+ font-feature-settings: 'smcp';
+ background-color: hsl(43, 52%, 88%);
+ box-shadow: 1px 2px 4px #0004;
+ min-width: fit-content;
+ max-width: fit-content;
+}
+
+.panel_header {
+ background-color: hsl(43, 42%, 78%);
+ border: 2px solid #222;
+ text-align: center;
+ padding: 2px 0;
+}
+
+.panel_body {
+ margin-top: 3px;
+ border: 2px solid #222;
+ display: grid;
+ grid-template-columns: repeat(3, 250px);
+ padding: 16px;
+ gap: 16px;
+ min-height: 350px;
+ min-width: 250px;
+}
+
+#support_claimed_panel { grid-column: 2; }
+#opposition_claimed_panel { grid-column: 3; }
+
+#support_claimed_header { background-color: var(--back-suf); color: white; }
+#opposition_claimed_header { background-color: var(--back-opp); color: white; }
+#strategy_draw_header { background-color: var(--back-strategy); }
+#states_draw_header { background-color: var(--back-states); }
+
+body.Suffragist #hand_header { background-color: var(--suf-75); }
+body.Opposition #hand_header { background-color: var(--opp-75); }
+
+body.Suffragist #set_aside_header { background-color: var(--suf-85); }
+body.Opposition #set_aside_header { background-color: var(--opp-85); }
+
+#support_claimed, #opposition_claimed { grid-template-columns: 250px; }
+#strategy_draw { grid-template-columns: repeat(3, 250px); }
+
+#states_draw {
+ grid-template-columns: repeat(3, 250px);
+ grid-template-rows: repeat(3, 350px);
+}
+
+@media (min-width: 1320px) {
+ #states_draw {
+ grid-template-columns: repeat(4, 250px);
+ grid-template-rows: repeat(3, 350px);
+ }
+}
+
+@media (min-width: 1590px) {
+ #states_draw {
+ grid-template-columns: repeat(5, 250px);
+ grid-template-rows: repeat(2, 350px);
+ }
+}
+
+@media (min-width: 1840px) {
+ #states_draw {
+ grid-template-columns: repeat(6, 250px);
+ grid-template-rows: repeat(2, 350px);
+ }
+}
+
+#hand, #set_aside {
+ grid-template-columns: repeat(4, 250px);
+ grid-template-rows: repeat(2, 350px);
+}
+
+@media (min-width: 2120px) {
+ #hand, #set_aside {
+ grid-template-columns: repeat(7, 250px);
+ grid-template-rows: repeat(1, 350px);
+ }
+}
+
+@media (max-width: 800px) {
+ section {
+ width: 1100px;
+ }
+}
+
+/* CARD ACTION POPUP MENU */
+
+.popup {
+ min-width: 150px;
+ box-shadow: 0px 8px 16px 0px #0004;
+}
+
+.popup li span { display: inline-block; width: 24px; }
+
+body.Suffragist .popup { background-color: var(--suf-95) }
+body.Suffragist .popup li.title { color: black; background-color: var(--suf-75) }
+body.Suffragist .popup li.action:hover { background-color: var(--suf-25) }
+
+body.Opposition .popup { background-color: var(--opp-95) }
+body.Opposition .popup li.title { color: black; background-color: var(--opp-75) }
+body.Opposition .popup li.action:hover { background-color: var(--opp-25) }
+
+/* MAP */
+
+#mapwrap {
+ width: 1100px;
+ height: 850px;
+ x-border: 1px solid #222;
+ x-margin-top: -1px;
+ box-shadow: 1px 2px 4px #0004;
+}
+
+#map {
+ width: 1100px;
+ height: 850px;
+ background-color: #f0e7d0;
+ background-image: url(map.webp);
+ background-size: 1100px 850px;
+}
+
+#map-texture {
+ position: absolute;
+ width: 1100px;
+ height: 850px;
+ background-image: url(map-texture.jpg);
+ background-size: 1100px 850px;
+ mix-blend-mode: multiply;
+}
+
+svg {
+ position: absolute;
+}
+
+path.state { fill-opacity: 0.0; }
+path.state.action { fill-opacity: 0.7; }
+path.state.west { fill: teal }
+path.state.plains { fill: chocolate }
+path.state.midwest { fill: brown }
+path.state.northeast { fill: royalblue }
+path.state.atlantic { fill: green }
+path.state.south { fill: #444 }
+
+div.state.action.northeast { background-color: #4169e1b3 }
+div.state.action.atlantic { background-color: #008000b3 }
+
+path.state.selected {
+ stroke: black;
+ stroke-width: 12;
+}
+
+path.state.tip {
+ stroke: white;
+ stroke-width: 12;
+ stroke-dasharray: 24 12;
+}
+
+div.state {
+ position: absolute;
+ box-sizing: border-box;
+ background-clip: padding-box;
+ border-radius: 50%;
+ border: 5px solid transparent;
+ width: 62px;
+ height: 62px;
+
+ color: black;
+ font-family: CopperplateCC;
+ font-weight: bold;
+ font-size: 14px;
+ text-align: center;
+ line-height: 52px;
+}
+
+div.label {
+ pointer-events: none;
+ color: #222;
+ position: absolute;
+ font-family: CopperplateCC;
+ font-weight: bold;
+ font-size: 14px;
+ text-align: center;
+ line-height: 14px;
+ width: 50px;
+ height: 14px;
+}
+
+div.label.large {
+ font-size: 15px;
+ line-height: 15px;
+ height: 15px;
+}
+
+div.label.claimable {
+ color: white;
+}
+
+div.state.selected {
+ border-color: black;
+}
+
+div.state.tip {
+ border: 4px dashed white;
+}
+
+div.region {
+ position: absolute;
+ box-sizing: border-box;
+ background-clip: padding-box;
+ border-radius: 50%;
+ border: 4px solid transparent;
+ width: 67px;
+ height: 67px;
+}
+
+div.region.action {
+ border-color: white;
+}
+
+div.region.tip {
+ border: 4px dashed white;
+}
+
+div.persistent_box {
+ position: absolute;
+ width: 125px;
+}
+
+.persistent_box .card {
+ position: absolute;
+ width: 125px;
+ height: 175px;
+ border-radius: 4px;
+ box-shadow: 0 0 0 1px #222, 1px 2px 2px #0004;
+}
+
+body.shift .persistent_box .card:hover {
+ width: 250px;
+ height: 350px;
+ border-radius: 8px;
+ z-index: 100;
+}
+
+div.congress_box {
+ position: absolute;
+ box-sizing: border-box;
+}
+
+div.congress_box.action {
+ background-clip: padding-box;
+ background-color: #FFA500CC;
+ border: 5px solid orange;
+}
+
+div.nineteenth_amendment_score:not(.hide) {
+ position: absolute;
+ background-color: #EEE7D2;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+
+ font-weight: bold;
+ font-size: 24pt;
+}
+
+.piece {
+ pointer-events: none;
+ position: absolute;
+ background-repeat: no-repeat;
+ background-size: contain;
+ filter: drop-shadow(0px 1px 2px #0004);
+}
+
+.piece.congress.action {
+ pointer-events: auto;
+ filter:
+ drop-shadow(2px 0px 0px orange)
+ drop-shadow(0px 2px 0px orange)
+ drop-shadow(-2px 0px 0px orange)
+ drop-shadow(0px -2px 0px orange);
+}
+
+.piece.action {
+ pointer-events: auto;
+ filter:
+ drop-shadow(2px 0px 0px white)
+ drop-shadow(0px 2px 0px white)
+ drop-shadow(-2px 0px 0px white)
+ drop-shadow(0px -2px 0px white);
+}
+
+.piece.selected {
+ filter:
+ drop-shadow(2px 0px 0px yellow)
+ drop-shadow(0px 2px 0px yellow)
+ drop-shadow(-2px 0px 0px yellow)
+ drop-shadow(0px -2px 0px yellow);
+}
+
+
+/* 3D CUBES */
+.piece.cube { width: 21px; height: 25px; }
+.piece.red.cube { background-image: url(pieces/iso_red_cube.svg); }
+.piece.yellow.cube { background-image: url(pieces/iso_yellow_cube.svg); }
+.piece.purple.cube { background-image: url(pieces/iso_purple_cube.svg); }
+
+/* 2D CUBES */
+/*
+.piece.cube { width: 14px; height: 14px; border: 1px solid black; }
+.piece.purple.cube { background-color: #6d5798; }
+.piece.yellow.cube { background-color: #fec36d; }
+.piece.red.cube { background-color: #e06136; }
+*/
+
+.piece.turn {
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ border: 3px solid white;
+ backdrop-filter: invert(80%);
+}
+
+.piece.yes { width: 42px; height: 32px; background-size: 42px 32px; background-image: url(pieces/yes.svg); }
+.piece.yellow2 { width: 36px; height: 50px; background-size: 36px 50px; background-image: url(pieces/yellow2.svg); }
+.piece.yellow1 { width: 34px; height: 50px; background-size: 36px 50px; background-image: url(pieces/yellow1.svg); }
+.piece.turn3d { width: 33px; height: 36px; background-size: 33px 36px; background-image: url(pieces/turn.svg); }
+.piece.red3 { width: 30px; height: 50px; background-size: 36px 50px; background-image: url(pieces/red3.svg); }
+.piece.red2 { width: 30px; height: 50px; background-size: 36px 50px; background-image: url(pieces/red2.svg); }
+.piece.red1 { width: 30px; height: 50px; background-size: 36px 50px; background-image: url(pieces/red1.svg); }
+.piece.purple2 { width: 36px; height: 50px; background-size: 36px 50px; background-image: url(pieces/purple2.svg); }
+.piece.purple1 { width: 34px; height: 50px; background-size: 36px 50px; background-image: url(pieces/purple1.svg); }
+.piece.no { width: 42px; height: 32px; background-size: 42px 32px; background-image: url(pieces/no.svg); }
+.piece.congress { width: 32px; height: 48px; background-size: 32px 48px; background-image: url(pieces/iso_congress.svg); }
+
+div.button_box {
+ position: absolute;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ justify-content: start;
+ gap: 0px;
+}
+
+div.button_box .button { margin: 0 0 -10px 0; }
+div.button_box.h .button { margin: 0 0 0 -10px; }
+
+div.button_box.h {
+ flex-direction: row;
+}
+
+div.button_box .button {
+ width: 38px;
+ height: 38px;
+ background-size: 100%;
+ border-radius: 50%;
+ border: 1px solid #0008;
+ box-shadow: 0 1px 4px #0004;
+}
+
+.button_1{background-image:url(images/button1.png)}
+.button_2{background-image:url(images/button2.png)}
+.button_3{background-image:url(images/button3.png)}
+.button_4{background-image:url(images/button4.png)}
+.button_5{background-image:url(images/button5.png)}
+.button_6{background-image:url(images/button6.png)}
+
+.card {
+ background-size: cover;
+ background-repeat: no-repeat;
+ width: 250px;
+ height: 350px;
+ border-radius: 8px;
+ box-shadow: 0 0 0 1px #222, 1px 2px 4px #0004;
+}
+
+.card.support.action {
+ box-shadow: 0 0 0 1px black, 0 0 0 4px var(--suf-75);
+}
+
+.card.opposition.action {
+ box-shadow: 0 0 0 1px black, 0 0 0 4px var(--opp-75);
+}
+
+.card.states.action {
+ box-shadow: 0 0 0 1px black, 0 0 0 4px var(--action-states);
+}
+
+.card.strategy.action {
+ box-shadow: 0 0 0 1px black, 0 0 0 4px var(--action-strategy);
+}
+
+.card.selected {
+ box-shadow: 0 0 0 1px black, 0 0 0 4px yellow;
+}
+
+.card.played {
+ box-shadow: 0 0 0 3px black;
+}
+
+#tooltip {
+ position: fixed;
+ pointer-events: none;
+ z-index: 600;
+ right: 240px;
+ top: 60px;
+}
+
+@media (max-width: 800px) {
+ #tooltip {
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ }
+}
+
+/* CARD IMAGES */
+
+.card_support_back{background-image:url(cards.1x/support_01.jpg)}
+.card_opposition_back{background-image:url(cards.1x/opposition_01.jpg)}
+.card_1{background-image:url(cards.1x/support_02.jpg)}
+.card_2{background-image:url(cards.1x/support_03.jpg)}
+.card_3{background-image:url(cards.1x/support_04.jpg)}
+.card_4{background-image:url(cards.1x/support_05.jpg)}
+.card_5{background-image:url(cards.1x/support_06.jpg)}
+.card_6{background-image:url(cards.1x/support_07.jpg)}
+.card_7{background-image:url(cards.1x/support_08.jpg)}
+.card_8{background-image:url(cards.1x/support_09.jpg)}
+.card_9{background-image:url(cards.1x/support_10.jpg)}
+.card_10{background-image:url(cards.1x/support_11.jpg)}
+.card_11{background-image:url(cards.1x/support_12.jpg)}
+.card_12{background-image:url(cards.1x/support_13.jpg)}
+.card_13{background-image:url(cards.1x/support_14.jpg)}
+.card_14{background-image:url(cards.1x/support_15.jpg)}
+.card_15{background-image:url(cards.1x/support_16.jpg)}
+.card_16{background-image:url(cards.1x/support_17.jpg)}
+.card_17{background-image:url(cards.1x/support_18.jpg)}
+.card_18{background-image:url(cards.1x/support_19.jpg)}
+.card_19{background-image:url(cards.1x/support_20.jpg)}
+.card_20{background-image:url(cards.1x/support_21.jpg)}
+.card_21{background-image:url(cards.1x/support_22.jpg)}
+.card_22{background-image:url(cards.1x/support_23.jpg)}
+.card_23{background-image:url(cards.1x/support_24.jpg)}
+.card_24{background-image:url(cards.1x/support_25.jpg)}
+.card_25{background-image:url(cards.1x/support_26.jpg)}
+.card_26{background-image:url(cards.1x/support_27.jpg)}
+.card_27{background-image:url(cards.1x/support_28.jpg)}
+.card_28{background-image:url(cards.1x/support_29.jpg)}
+.card_29{background-image:url(cards.1x/support_30.jpg)}
+.card_30{background-image:url(cards.1x/support_31.jpg)}
+.card_31{background-image:url(cards.1x/support_32.jpg)}
+.card_32{background-image:url(cards.1x/support_33.jpg)}
+.card_33{background-image:url(cards.1x/support_34.jpg)}
+.card_34{background-image:url(cards.1x/support_35.jpg)}
+.card_35{background-image:url(cards.1x/support_36.jpg)}
+.card_36{background-image:url(cards.1x/support_37.jpg)}
+.card_37{background-image:url(cards.1x/support_38.jpg)}
+.card_38{background-image:url(cards.1x/support_39.jpg)}
+.card_39{background-image:url(cards.1x/support_40.jpg)}
+.card_40{background-image:url(cards.1x/support_41.jpg)}
+.card_41{background-image:url(cards.1x/support_42.jpg)}
+.card_42{background-image:url(cards.1x/support_43.jpg)}
+.card_43{background-image:url(cards.1x/support_44.jpg)}
+.card_44{background-image:url(cards.1x/support_45.jpg)}
+.card_45{background-image:url(cards.1x/support_46.jpg)}
+.card_46{background-image:url(cards.1x/support_47.jpg)}
+.card_47{background-image:url(cards.1x/support_48.jpg)}
+.card_48{background-image:url(cards.1x/support_49.jpg)}
+.card_49{background-image:url(cards.1x/support_50.jpg)}
+.card_50{background-image:url(cards.1x/support_51.jpg)}
+.card_51{background-image:url(cards.1x/support_52.jpg)}
+.card_52{background-image:url(cards.1x/support_53.jpg)}
+.card_53{background-image:url(cards.1x/opposition_02.jpg)}
+.card_54{background-image:url(cards.1x/opposition_03.jpg)}
+.card_55{background-image:url(cards.1x/opposition_04.jpg)}
+.card_56{background-image:url(cards.1x/opposition_05.jpg)}
+.card_57{background-image:url(cards.1x/opposition_06.jpg)}
+.card_58{background-image:url(cards.1x/opposition_07.jpg)}
+.card_59{background-image:url(cards.1x/opposition_08.jpg)}
+.card_60{background-image:url(cards.1x/opposition_09.jpg)}
+.card_61{background-image:url(cards.1x/opposition_10.jpg)}
+.card_62{background-image:url(cards.1x/opposition_11.jpg)}
+.card_63{background-image:url(cards.1x/opposition_12.jpg)}
+.card_64{background-image:url(cards.1x/opposition_13.jpg)}
+.card_65{background-image:url(cards.1x/opposition_14.jpg)}
+.card_66{background-image:url(cards.1x/opposition_15.jpg)}
+.card_67{background-image:url(cards.1x/opposition_16.jpg)}
+.card_68{background-image:url(cards.1x/opposition_17.jpg)}
+.card_69{background-image:url(cards.1x/opposition_18.jpg)}
+.card_70{background-image:url(cards.1x/opposition_19.jpg)}
+.card_71{background-image:url(cards.1x/opposition_20.jpg)}
+.card_72{background-image:url(cards.1x/opposition_21.jpg)}
+.card_73{background-image:url(cards.1x/opposition_22.jpg)}
+.card_74{background-image:url(cards.1x/opposition_23.jpg)}
+.card_75{background-image:url(cards.1x/opposition_24.jpg)}
+.card_76{background-image:url(cards.1x/opposition_25.jpg)}
+.card_77{background-image:url(cards.1x/opposition_26.jpg)}
+.card_78{background-image:url(cards.1x/opposition_27.jpg)}
+.card_79{background-image:url(cards.1x/opposition_28.jpg)}
+.card_80{background-image:url(cards.1x/opposition_29.jpg)}
+.card_81{background-image:url(cards.1x/opposition_30.jpg)}
+.card_82{background-image:url(cards.1x/opposition_31.jpg)}
+.card_83{background-image:url(cards.1x/opposition_32.jpg)}
+.card_84{background-image:url(cards.1x/opposition_33.jpg)}
+.card_85{background-image:url(cards.1x/opposition_34.jpg)}
+.card_86{background-image:url(cards.1x/opposition_35.jpg)}
+.card_87{background-image:url(cards.1x/opposition_36.jpg)}
+.card_88{background-image:url(cards.1x/opposition_37.jpg)}
+.card_89{background-image:url(cards.1x/opposition_38.jpg)}
+.card_90{background-image:url(cards.1x/opposition_39.jpg)}
+.card_91{background-image:url(cards.1x/opposition_40.jpg)}
+.card_92{background-image:url(cards.1x/opposition_41.jpg)}
+.card_93{background-image:url(cards.1x/opposition_42.jpg)}
+.card_94{background-image:url(cards.1x/opposition_43.jpg)}
+.card_95{background-image:url(cards.1x/opposition_44.jpg)}
+.card_96{background-image:url(cards.1x/opposition_45.jpg)}
+.card_97{background-image:url(cards.1x/opposition_46.jpg)}
+.card_98{background-image:url(cards.1x/opposition_47.jpg)}
+.card_99{background-image:url(cards.1x/opposition_48.jpg)}
+.card_100{background-image:url(cards.1x/opposition_49.jpg)}
+.card_101{background-image:url(cards.1x/opposition_50.jpg)}
+.card_102{background-image:url(cards.1x/opposition_51.jpg)}
+.card_103{background-image:url(cards.1x/opposition_52.jpg)}
+.card_104{background-image:url(cards.1x/opposition_53.jpg)}
+.card_105{background-image:url(cards.1x/strategy_02.jpg)}
+.card_106{background-image:url(cards.1x/strategy_03.jpg)}
+.card_107{background-image:url(cards.1x/strategy_04.jpg)}
+.card_108{background-image:url(cards.1x/strategy_05.jpg)}
+.card_109{background-image:url(cards.1x/strategy_06.jpg)}
+.card_110{background-image:url(cards.1x/strategy_07.jpg)}
+.card_111{background-image:url(cards.1x/strategy_08.jpg)}
+.card_112{background-image:url(cards.1x/strategy_09.jpg)}
+.card_113{background-image:url(cards.1x/strategy_10.jpg)}
+.card_114{background-image:url(cards.1x/strategy_11.jpg)}
+.card_115{background-image:url(cards.1x/strategy_12.jpg)}
+.card_116{background-image:url(cards.1x/strategy_13.jpg)}
+.card_117{background-image:url(cards.1x/states_02.jpg)}
+.card_118{background-image:url(cards.1x/states_03.jpg)}
+.card_119{background-image:url(cards.1x/states_04.jpg)}
+.card_120{background-image:url(cards.1x/states_05.jpg)}
+.card_121{background-image:url(cards.1x/states_06.jpg)}
+.card_122{background-image:url(cards.1x/states_07.jpg)}
+.card_123{background-image:url(cards.1x/states_08.jpg)}
+.card_124{background-image:url(cards.1x/states_09.jpg)}
+.card_125{background-image:url(cards.1x/states_10.jpg)}
+.card_126{background-image:url(cards.1x/states_11.jpg)}
+.card_127{background-image:url(cards.1x/states_12.jpg)}
+.card_128{background-image:url(cards.1x/states_13.jpg)}
+
+@media (min-resolution: 97dpi) {
+.card_support_back{background-image:url(cards.2x/support_01.jpg)}
+.card_opposition_back{background-image:url(cards.2x/opposition_01.jpg)}
+.card_1{background-image:url(cards.2x/support_02.jpg)}
+.card_2{background-image:url(cards.2x/support_03.jpg)}
+.card_3{background-image:url(cards.2x/support_04.jpg)}
+.card_4{background-image:url(cards.2x/support_05.jpg)}
+.card_5{background-image:url(cards.2x/support_06.jpg)}
+.card_6{background-image:url(cards.2x/support_07.jpg)}
+.card_7{background-image:url(cards.2x/support_08.jpg)}
+.card_8{background-image:url(cards.2x/support_09.jpg)}
+.card_9{background-image:url(cards.2x/support_10.jpg)}
+.card_10{background-image:url(cards.2x/support_11.jpg)}
+.card_11{background-image:url(cards.2x/support_12.jpg)}
+.card_12{background-image:url(cards.2x/support_13.jpg)}
+.card_13{background-image:url(cards.2x/support_14.jpg)}
+.card_14{background-image:url(cards.2x/support_15.jpg)}
+.card_15{background-image:url(cards.2x/support_16.jpg)}
+.card_16{background-image:url(cards.2x/support_17.jpg)}
+.card_17{background-image:url(cards.2x/support_18.jpg)}
+.card_18{background-image:url(cards.2x/support_19.jpg)}
+.card_19{background-image:url(cards.2x/support_20.jpg)}
+.card_20{background-image:url(cards.2x/support_21.jpg)}
+.card_21{background-image:url(cards.2x/support_22.jpg)}
+.card_22{background-image:url(cards.2x/support_23.jpg)}
+.card_23{background-image:url(cards.2x/support_24.jpg)}
+.card_24{background-image:url(cards.2x/support_25.jpg)}
+.card_25{background-image:url(cards.2x/support_26.jpg)}
+.card_26{background-image:url(cards.2x/support_27.jpg)}
+.card_27{background-image:url(cards.2x/support_28.jpg)}
+.card_28{background-image:url(cards.2x/support_29.jpg)}
+.card_29{background-image:url(cards.2x/support_30.jpg)}
+.card_30{background-image:url(cards.2x/support_31.jpg)}
+.card_31{background-image:url(cards.2x/support_32.jpg)}
+.card_32{background-image:url(cards.2x/support_33.jpg)}
+.card_33{background-image:url(cards.2x/support_34.jpg)}
+.card_34{background-image:url(cards.2x/support_35.jpg)}
+.card_35{background-image:url(cards.2x/support_36.jpg)}
+.card_36{background-image:url(cards.2x/support_37.jpg)}
+.card_37{background-image:url(cards.2x/support_38.jpg)}
+.card_38{background-image:url(cards.2x/support_39.jpg)}
+.card_39{background-image:url(cards.2x/support_40.jpg)}
+.card_40{background-image:url(cards.2x/support_41.jpg)}
+.card_41{background-image:url(cards.2x/support_42.jpg)}
+.card_42{background-image:url(cards.2x/support_43.jpg)}
+.card_43{background-image:url(cards.2x/support_44.jpg)}
+.card_44{background-image:url(cards.2x/support_45.jpg)}
+.card_45{background-image:url(cards.2x/support_46.jpg)}
+.card_46{background-image:url(cards.2x/support_47.jpg)}
+.card_47{background-image:url(cards.2x/support_48.jpg)}
+.card_48{background-image:url(cards.2x/support_49.jpg)}
+.card_49{background-image:url(cards.2x/support_50.jpg)}
+.card_50{background-image:url(cards.2x/support_51.jpg)}
+.card_51{background-image:url(cards.2x/support_52.jpg)}
+.card_52{background-image:url(cards.2x/support_53.jpg)}
+.card_53{background-image:url(cards.2x/opposition_02.jpg)}
+.card_54{background-image:url(cards.2x/opposition_03.jpg)}
+.card_55{background-image:url(cards.2x/opposition_04.jpg)}
+.card_56{background-image:url(cards.2x/opposition_05.jpg)}
+.card_57{background-image:url(cards.2x/opposition_06.jpg)}
+.card_58{background-image:url(cards.2x/opposition_07.jpg)}
+.card_59{background-image:url(cards.2x/opposition_08.jpg)}
+.card_60{background-image:url(cards.2x/opposition_09.jpg)}
+.card_61{background-image:url(cards.2x/opposition_10.jpg)}
+.card_62{background-image:url(cards.2x/opposition_11.jpg)}
+.card_63{background-image:url(cards.2x/opposition_12.jpg)}
+.card_64{background-image:url(cards.2x/opposition_13.jpg)}
+.card_65{background-image:url(cards.2x/opposition_14.jpg)}
+.card_66{background-image:url(cards.2x/opposition_15.jpg)}
+.card_67{background-image:url(cards.2x/opposition_16.jpg)}
+.card_68{background-image:url(cards.2x/opposition_17.jpg)}
+.card_69{background-image:url(cards.2x/opposition_18.jpg)}
+.card_70{background-image:url(cards.2x/opposition_19.jpg)}
+.card_71{background-image:url(cards.2x/opposition_20.jpg)}
+.card_72{background-image:url(cards.2x/opposition_21.jpg)}
+.card_73{background-image:url(cards.2x/opposition_22.jpg)}
+.card_74{background-image:url(cards.2x/opposition_23.jpg)}
+.card_75{background-image:url(cards.2x/opposition_24.jpg)}
+.card_76{background-image:url(cards.2x/opposition_25.jpg)}
+.card_77{background-image:url(cards.2x/opposition_26.jpg)}
+.card_78{background-image:url(cards.2x/opposition_27.jpg)}
+.card_79{background-image:url(cards.2x/opposition_28.jpg)}
+.card_80{background-image:url(cards.2x/opposition_29.jpg)}
+.card_81{background-image:url(cards.2x/opposition_30.jpg)}
+.card_82{background-image:url(cards.2x/opposition_31.jpg)}
+.card_83{background-image:url(cards.2x/opposition_32.jpg)}
+.card_84{background-image:url(cards.2x/opposition_33.jpg)}
+.card_85{background-image:url(cards.2x/opposition_34.jpg)}
+.card_86{background-image:url(cards.2x/opposition_35.jpg)}
+.card_87{background-image:url(cards.2x/opposition_36.jpg)}
+.card_88{background-image:url(cards.2x/opposition_37.jpg)}
+.card_89{background-image:url(cards.2x/opposition_38.jpg)}
+.card_90{background-image:url(cards.2x/opposition_39.jpg)}
+.card_91{background-image:url(cards.2x/opposition_40.jpg)}
+.card_92{background-image:url(cards.2x/opposition_41.jpg)}
+.card_93{background-image:url(cards.2x/opposition_42.jpg)}
+.card_94{background-image:url(cards.2x/opposition_43.jpg)}
+.card_95{background-image:url(cards.2x/opposition_44.jpg)}
+.card_96{background-image:url(cards.2x/opposition_45.jpg)}
+.card_97{background-image:url(cards.2x/opposition_46.jpg)}
+.card_98{background-image:url(cards.2x/opposition_47.jpg)}
+.card_99{background-image:url(cards.2x/opposition_48.jpg)}
+.card_100{background-image:url(cards.2x/opposition_49.jpg)}
+.card_101{background-image:url(cards.2x/opposition_50.jpg)}
+.card_102{background-image:url(cards.2x/opposition_51.jpg)}
+.card_103{background-image:url(cards.2x/opposition_52.jpg)}
+.card_104{background-image:url(cards.2x/opposition_53.jpg)}
+.card_105{background-image:url(cards.2x/strategy_02.jpg)}
+.card_106{background-image:url(cards.2x/strategy_03.jpg)}
+.card_107{background-image:url(cards.2x/strategy_04.jpg)}
+.card_108{background-image:url(cards.2x/strategy_05.jpg)}
+.card_109{background-image:url(cards.2x/strategy_06.jpg)}
+.card_110{background-image:url(cards.2x/strategy_07.jpg)}
+.card_111{background-image:url(cards.2x/strategy_08.jpg)}
+.card_112{background-image:url(cards.2x/strategy_09.jpg)}
+.card_113{background-image:url(cards.2x/strategy_10.jpg)}
+.card_114{background-image:url(cards.2x/strategy_11.jpg)}
+.card_115{background-image:url(cards.2x/strategy_12.jpg)}
+.card_116{background-image:url(cards.2x/strategy_13.jpg)}
+.card_117{background-image:url(cards.2x/states_02.jpg)}
+.card_118{background-image:url(cards.2x/states_03.jpg)}
+.card_119{background-image:url(cards.2x/states_04.jpg)}
+.card_120{background-image:url(cards.2x/states_05.jpg)}
+.card_121{background-image:url(cards.2x/states_06.jpg)}
+.card_122{background-image:url(cards.2x/states_07.jpg)}
+.card_123{background-image:url(cards.2x/states_08.jpg)}
+.card_124{background-image:url(cards.2x/states_09.jpg)}
+.card_125{background-image:url(cards.2x/states_10.jpg)}
+.card_126{background-image:url(cards.2x/states_11.jpg)}
+.card_127{background-image:url(cards.2x/states_12.jpg)}
+.card_128{background-image:url(cards.2x/states_13.jpg)}
+}