summaryrefslogtreecommitdiff
path: root/play.css
blob: 593f5b846a6a80b933984c734a062e87641f5711 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
main { background-color: #777; }

#role_Government, header.govt.your_turn { background-color: skyblue; }
#role_AUC, header.auc.your_turn { background-color: khaki; }
#role_Cartels, header.cartels.your_turn { background-color: darkseagreen; }
#role_FARC, header.farc.your_turn { background-color: lightcoral; }

#role_Government_\+_AUC { background-image: linear-gradient(150deg, skyblue 40%, khaki 60%) }
#role_FARC_\+_Cartels { background-image: linear-gradient(150deg, lightcoral 40%, hsl(60, 20%, 60%) 52%, darkseagreen 60%) }
#role_AUC_\+_Cartels { background-image: linear-gradient(150deg, khaki 40%, darkseagreen 60%) }

#log { background-color: whitesmoke; }
#log .h1 { background-color: silver; font-weight: bold; padding-top:4px; padding-bottom:4px; margin: 8px 0; text-align: center; }
#log .h2 { background-color: gainsboro; padding-top:2px; padding-bottom:2px; text-align: center; }
#log .h2.govt { background-color: #c6d1eb }
#log .h2.farc { background-color: #ebc9be }
#log .h2.auc { background-color: #eaddc4 }
#log .h2.cartels { background-color: #c2d7c7 }
#log .h3 { text-decoration: underline; }
#log .italic { font-style: italic; }
#log .tip { cursor: pointer; }
#log .tip:hover { text-decoration: underline; }

#log div { padding-left: 20px; text-indent: -12px; }
#log div.indent { padding-left: 32px; text-indent: -12px; }

#log .h1 { background-image: linear-gradient(60deg, skyblue, khaki, lightcoral, darkseagreen); text-shadow: 0 0 4px white; }

#log { font-variant-numeric: tabular-nums; }

.action { cursor: pointer }

.role.active span { text-decoration: underline; }

.role_vp { float: right; }

#card_tip {
	position: fixed;
	z-index: 100;
	right: 240px;
	top: 60px;
}

/* Put cards on right of map when zoomed to fit, or very wide screen */
main { grid-template-columns: 1fr min-content min-content 1fr; }
#mapwrap { grid-row: 1; grid-column: 2 }
#card_panel { grid-row: 1; grid-column: 3 }
@media (min-width: 2200px) { main { display: grid; } }
main.fit { display: grid; }

/* MAP */

#mapwrap {
	box-shadow: 0px 1px 10px #0008;
	width: 1650px;
	height: 2550px;
	margin-bottom: 36px;
}

#mapwrap.fit {
	margin-bottom: 0
}

#map {
	width: 1650px;
	height: 2550px;
	background-repeat: no-repeat;
	background-size: cover;
	user-select: none;
}

#map { background-image: url("map75.jpg") }
@media (min-resolution: 97dpi) {
#map { background-image: url("map150.jpg") }
}

#svgmap { position: absolute; }
#tokens { position: absolute; }
#pieces { position: absolute; }
#cities { position: absolute; }
#boxes { position: absolute; }

#map.hide_pieces #pieces { display: none; }
#map.hide_tokens #tokens { display: none; }

#capabilities .token {
	position: static;
	pointer-events: auto;
}

#capabilities {
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	gap: 4px;
}

#insurgent_momentum {
	pointer-events: none;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

/* SPACES */

path { fill: transparent; stroke-width: 4; }
path.action { fill: white; fill-opacity: 0.3; stroke: white; }
path.action.foreign { fill: gold; stroke: lemonchiffon; }
path.action.forest { fill: limegreen; stroke: limegreen; }
path.action.grassland { fill: greenyellow; stroke: greenyellow; }
path.action.mountain { fill: chocolate; stroke: chocolate; }
path.selected { stroke: yellow; }
path.tip { stroke: white; stroke-dasharray: 4 4; }

.box{position:absolute;box-sizing:border-box;border:4px solid transparent}
.box.city{border-radius:50%}
.box.loc{border-radius:50%}
.box.action{border-color:lemonchiffon;}
.box.city.action{background-color:#6495ed55;border-color:deepskyblue;}
.box.loc.action{background-color:#fff5;border-color:white;}
.box.selected{border-color:yellow;}
.box.tip { border-color: white; }

/* PIECES */

.piece {
	position: absolute;
	pointer-events: none;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transition-property: top, left;
	transition-duration: 700ms;
	transition-timing-function: ease;
	filter: drop-shadow(0 1px 2px #000a);
}
.piece.action {
	pointer-events: auto;
	filter:
		drop-shadow(0 -2px 0 white)
		drop-shadow(0 2px 0 white)
		drop-shadow(-2px 0 0 white)
		drop-shadow(2px 0 0 white)
		;
}
.piece.selected {
	pointer-events: auto;
	filter:
		drop-shadow(0 -2px 0 yellow)
		drop-shadow(0 2px 0 yellow)
		drop-shadow(-2px 0 0 yellow)
		drop-shadow(2px 0 0 yellow)
		;
}

.cylinder { width: 44px; height: 48px; }
.base { width: 44px; height: 38px; }
.guerrilla { width: 29px; height: 36px; }
.police, .troops { width: 29px; height: 36px; }

.govt.cylinder { background-image: url(images/govt_cylinder.svg) }
.govt.police { background-image: url(images/govt_police.svg) }
.govt.troops { background-image: url(images/govt_troops.svg) }
.govt.base { background-image: url(images/govt_base.svg) }
.auc.cylinder { background-image: url(images/auc_cylinder.svg) }
.auc.guerrilla { background-image: url(images/auc_guerrilla.svg) }
.auc.guerrilla.active { background-image: url(images/auc_guerrilla_active.svg) }
.auc.base { background-image: url(images/auc_base.svg) }
.cartels.cylinder { background-image: url(images/cartels_cylinder.svg) }
.cartels.guerrilla { background-image: url(images/cartels_guerrilla.svg) }
.cartels.guerrilla.active { background-image: url(images/cartels_guerrilla_active.svg) }
.cartels.base { background-image: url(images/cartels_base.svg) }
.farc.cylinder { background-image: url(images/farc_cylinder.svg) }
.farc.guerrilla { background-image: url(images/farc_guerrilla.svg) }
.farc.guerrilla.active { background-image: url(images/farc_guerrilla_active.svg) }
.farc.base { background-image: url(images/farc_base.svg) }

.base { border-radius: 15px; }
.guerrilla { border-radius: 8px; }
.police, .troops { border-radius: 14px 14px / 10px 10px; }


/* TOKENS */

.token {
	pointer-events: none;
	position: absolute;
	transition-property: top, left;
	transition-duration: 700ms;
	transition-timing-function: ease;
	background-repeat: no-repeat;
	border-radius: 8px;
	border: 2px solid #333;
	background-size: 45px 45px;
	width: 45px;
	height: 45px;
}

.token.terror {
	transition: none;
}

.token.reminder,
.token.action {
	pointer-events: auto;
}

.token.terror,
.token.sabotage,
.token.active_opposition,
.token.passive_opposition,
.token.passive_support,
.token.active_support,
.token.reminder
{
	border-radius: 0px;
	background-size: 36px 36px;
	width: 36px;
	height: 36px;
}

.token.shipment
{
	border-radius: 50%;
	background-size: 50px 50px;
	background-position: center;
	width: 50px;
	height: 50px;
}

.token.shipment.action { box-shadow: 0 0 0 3px white; }
.token.shipment.selected { box-shadow: 0 0 0 3px yellow; }

.token.shipment.action.farc { box-shadow: 0 0 0 3px white, 0 0 2px 6px #f33 }
.token.shipment.action.auc { box-shadow: 0 0 0 3px white, 0 0 2px 6px gold }
.token.shipment.action.cartels { box-shadow: 0 0 0 3px white, 0 0 0 2px 6px lawngreen }

#token_aid.action { box-shadow: 0 0 0 3px white; }

#token_total_support { background-color: #006cb7; border-color: #348cda #004d95 #004d95 #348cda; box-shadow: 0 0 0 1px #000d55, 0px 1px 4px #0008; }
#token_prop_card { background-color: #80643e; border-color: #a0835c #614721 #614721 #a0835c; box-shadow: 0 0 0 1px #291200, 0px 1px 4px #0008; }
#token_oppose_plus_bases { background-color: #d74729; border-color: #ff6f50 #ad1800 #ad1800 #ff6f50; box-shadow: 0 0 0 1px #5a0000, 0px 1px 4px #0008; }
#token_el_presidente { background-color: #004e81; border-color: #23669b #003768 #003768 #23669b; box-shadow: 0 0 0 1px #000939, 0px 1px 4px #0008; }
#token_aid { background-color: #6a8796; border-color: #8eacbc #486472 #486472 #8eacbc; box-shadow: 0 0 0 1px #08232f, 0px 1px 4px #0008; }
.token.shipment { background-color: #01904b; border-color: #01904b; box-shadow: 0 0 0 1px #002c00, 0px 1px 4px #0008; }
.token.passive_support { background-color: #4b87c0; border-color: #70ade8 #266399 #266399 #70ade8; box-shadow: 0 0 0 1px #001e50, 0px 1px 4px #0008; }
.token.passive_opposition { background-color: #b75f61; border-color: #df8384 #903c40 #903c40 #df8384; box-shadow: 0 0 0 1px #460005, 0px 1px 4px #0008; }
.token.active_support { background-color: #0054a6; border-color: #286fc4 #003989 #003989 #286fc4; box-shadow: 0 0 0 1px #000051, 0px 1px 4px #0008; }
.token.active_opposition { background-color: #991a1e; border-color: #b73a37 #7b0001 #7b0001 #b73a37; box-shadow: 0 0 0 1px #400000, 0px 1px 4px #0008; }
.token.govt_control { background-color: #0054a6; border-color: #286fc4 #003989 #003989 #286fc4; box-shadow: 0 0 0 1px #000051, 0px 1px 4px #0008; }
.token.farc_control { background-color: #991a1e; border-color: #b73a37 #7b0001 #7b0001 #b73a37; box-shadow: 0 0 0 1px #400000, 0px 1px 4px #0008; }
.token.farc_zone { background-color: #ffc509; border-color: #fff75f #c68e00 #c68e00 #fff75f; box-shadow: 0 0 0 1px #5d2800, 0px 1px 4px #0008; }
.token.terror { background-color: #535052; border-color: #6b686a #3c393b #3c393b #6b686a; box-shadow: 0 0 0 1px #120f11, 0px 1px 4px #0008; }
.token.sabotage { background-color: #535052; border-color: #6b686a #3c393b #3c393b #6b686a; box-shadow: 0 0 0 1px #120f11, 0px 1px 4px #0008; }
.token.unshaded { background-color: #9dadb3; border-color: #ccdce2 #718086 #718086 #ccdce2; box-shadow: 0 0 0 1px #222f34, 0px 1px 4px #0008; }
.token.shaded { background-color: #465c80; border-color: #60779d #2d4264 #2d4264 #60779d; box-shadow: 0 0 0 1px #021230, 0px 1px 4px #0008; }
.token.reminder.sucumbios { background-color: #6d5735; border-color: #89724f #523d1b #523d1b #89724f; box-shadow: 0 0 0 1px #210f00, 0px 1px 4px #0008; }
.token.reminder.senado_farc { background-color: #cf1f30; border-color: #f74d51 #a7000b #a7000b #f74d51; box-shadow: 0 0 0 1px #590000, 0px 1px 4px #0008; }
.token.reminder.senado_cartels { background-color: #6d9f3b; border-color: #94c865 #487703 #487703 #94c865; box-shadow: 0 0 0 1px #012e00, 0px 1px 4px #0008; }
.token.reminder.senado_auc { background-color: #ffcf00; border-color: #fffa57 #c69700 #c69700 #fffa57; box-shadow: 0 0 0 1px #5b2e00, 0px 1px 4px #0008; }
.token.reminder.darien { background-color: #8dc73f; border-color: #bdfa75 #609600 #609600 #bdfa75; box-shadow: 0 0 0 1px #0a3c00, 0px 1px 4px #0008; }

#token_aid { background-image: url(tokens.1x/aid.png) }
#token_el_presidente { background-image: url(tokens.1x/el_presidente.png) }
#token_oppose_plus_bases { background-image: url(tokens.1x/oppose_plus_bases.png) }
#token_prop_card { background-image: url(tokens.1x/prop_card.png) }
#token_total_support { background-image: url(tokens.1x/total_support.png) }
.token.shipment { background-image: url(tokens.1x/shipment.png) }
.token.terror { background-image: url(tokens.1x/terror.png) }
.token.sabotage { background-image: url(tokens.1x/sabotage.png) }
.token.active_opposition { background-image: url(tokens.1x/active_opposition.png) }
.token.passive_opposition { background-image: url(tokens.1x/passive_opposition.png) }
.token.passive_support { background-image: url(tokens.1x/passive_support.png) }
.token.active_support { background-image: url(tokens.1x/active_support.png) }
.token.farc_control { background-image: url(tokens.1x/farc_control.png) }
.token.govt_control { background-image: url(tokens.1x/govt_control.png) }
.token.farc_zone { background-image: url(tokens.1x/farc_zone.png) }
.token.unshaded.first_div { background-image: url(tokens.1x/unshaded_1st_div.png) }
.token.unshaded.seventh_sf { background-image: url(tokens.1x/unshaded_7th_sf.png) }
.token.unshaded.black_hawks { background-image: url(tokens.1x/unshaded_black_hawks.png) }
.token.unshaded.meteoro { background-image: url(tokens.1x/unshaded_meteoro.png) }
.token.unshaded.mtn_bns { background-image: url(tokens.1x/unshaded_mtn_bns.png) }
.token.unshaded.ndsc { background-image: url(tokens.1x/unshaded_ndsc.png) }
.token.unshaded.ospina { background-image: url(tokens.1x/unshaded_ospina.png) }
.token.unshaded.tapias { background-image: url(tokens.1x/unshaded_tapias.png) }
.token.shaded.first_div { background-image: url(tokens.1x/shaded_1st_div.png) }
.token.shaded.seventh_sf { background-image: url(tokens.1x/shaded_7th_sf.png) }
.token.shaded.black_hawks { background-image: url(tokens.1x/shaded_black_hawks.png) }
.token.shaded.meteoro { background-image: url(tokens.1x/shaded_meteoro.png) }
.token.shaded.mtn_bns { background-image: url(tokens.1x/shaded_mtn_bns.png) }
.token.shaded.ndsc { background-image: url(tokens.1x/shaded_ndsc.png) }
.token.shaded.ospina { background-image: url(tokens.1x/shaded_ospina.png) }
.token.shaded.tapias { background-image: url(tokens.1x/shaded_tapias.png) }
.token.reminder.darien { background-image: url(tokens.1x/reminder_darien.png) }
.token.reminder.senado_auc { background-image: url(tokens.1x/reminder_senado_auc.png) }
.token.reminder.senado_cartels { background-image: url(tokens.1x/reminder_senado_cartels.png) }
.token.reminder.senado_farc { background-image: url(tokens.1x/reminder_senado_farc.png) }
.token.reminder.sucumbios { background-image: url(tokens.1x/reminder_sucumbios.png) }

@media (min-resolution: 97dpi) {
#token_aid { background-image: url(tokens.2x/aid.png) }
#token_el_presidente { background-image: url(tokens.2x/el_presidente.png) }
#token_oppose_plus_bases { background-image: url(tokens.2x/oppose_plus_bases.png) }
#token_prop_card { background-image: url(tokens.2x/prop_card.png) }
#token_total_support { background-image: url(tokens.2x/total_support.png) }
.token.shipment { background-image: url(tokens.2x/shipment.png) }
.token.terror { background-image: url(tokens.2x/terror.png) }
.token.sabotage { background-image: url(tokens.2x/sabotage.png) }
.token.active_opposition { background-image: url(tokens.2x/active_opposition.png) }
.token.passive_opposition { background-image: url(tokens.2x/passive_opposition.png) }
.token.passive_support { background-image: url(tokens.2x/passive_support.png) }
.token.active_support { background-image: url(tokens.2x/active_support.png) }
.token.farc_control { background-image: url(tokens.2x/farc_control.png) }
.token.govt_control { background-image: url(tokens.2x/govt_control.png) }
.token.farc_zone { background-image: url(tokens.2x/farc_zone.png) }
.token.unshaded.first_div { background-image: url(tokens.2x/unshaded_1st_div.png) }
.token.unshaded.seventh_sf { background-image: url(tokens.2x/unshaded_7th_sf.png) }
.token.unshaded.black_hawks { background-image: url(tokens.2x/unshaded_black_hawks.png) }
.token.unshaded.meteoro { background-image: url(tokens.2x/unshaded_meteoro.png) }
.token.unshaded.mtn_bns { background-image: url(tokens.2x/unshaded_mtn_bns.png) }
.token.unshaded.ndsc { background-image: url(tokens.2x/unshaded_ndsc.png) }
.token.unshaded.ospina { background-image: url(tokens.2x/unshaded_ospina.png) }
.token.unshaded.tapias { background-image: url(tokens.2x/unshaded_tapias.png) }
.token.shaded.first_div { background-image: url(tokens.2x/shaded_1st_div.png) }
.token.shaded.seventh_sf { background-image: url(tokens.2x/shaded_7th_sf.png) }
.token.shaded.black_hawks { background-image: url(tokens.2x/shaded_black_hawks.png) }
.token.shaded.meteoro { background-image: url(tokens.2x/shaded_meteoro.png) }
.token.shaded.mtn_bns { background-image: url(tokens.2x/shaded_mtn_bns.png) }
.token.shaded.ndsc { background-image: url(tokens.2x/shaded_ndsc.png) }
.token.shaded.ospina { background-image: url(tokens.2x/shaded_ospina.png) }
.token.shaded.tapias { background-image: url(tokens.2x/shaded_tapias.png) }
.token.reminder.darien { background-image: url(tokens.2x/reminder_darien.png) }
.token.reminder.senado_auc { background-image: url(tokens.2x/reminder_senado_auc.png) }
.token.reminder.senado_cartels { background-image: url(tokens.2x/reminder_senado_cartels.png) }
.token.reminder.senado_farc { background-image: url(tokens.2x/reminder_senado_farc.png) }
.token.reminder.sucumbios { background-image: url(tokens.2x/reminder_sucumbios.png) }
}

/* CARDS */

#card_panel {
	text-align: center;
	margin: 24px;
}

#card_panel .card {
	display: inline-block;
	margin: 9px;
}

.card {
	width: 248px;
	height: 348px;
	border-radius: 16px;
	background-color: #cde1c9;
	background-size: cover;
	background-repeat: no-repeat;
	box-shadow: 0 0 0 1px #223f21, 1px 1px 4px #0008;
}

.card.action {
	box-shadow: 0 0 0 3px white;
}

.card.momentum {
	width: 186px;
	height: 261px;
	border-radius: 12px;
}

#deck_outer { position: relative; }
#deck_size {
	position: absolute;
	right: 24px;
	bottom: 16px;
	font-size: 24px;
	font-weight: bold;
	color: white;
}

#this_card { position: relative; }

#this_card.c #shaded_event { border-top-color: transparent; }
#this_card.c #unshaded_event { border-image: radial-gradient(100px 30px at bottom, transparent 65%, white) 3 }

#unshaded_event, #shaded_event {
	display: none;
	position: absolute;
	box-sizing: border-box;
	border: 3px solid white;
}

#shaded_event.action, #unshaded_event.action {
	display: block;
}

#unshaded_event {
	left: 13px;
	right: 13px;
	top: 186px;
}

#shaded_event {
	left: 19px;
	right: 19px;
	bottom: 23px;
}

#this_card.u2 #unshaded_event { height: 45px; }
#this_card.u3 #unshaded_event { height: 60px; }
#this_card.u4 #unshaded_event { height: 77px; }

#this_card.card_8 #unshaded_event { top: 212px; }
#this_card.card_25 #unshaded_event { top: 201px; }
#this_card.card_37 #unshaded_event { top: 168px; height: 78px; }

#this_card.s2 #shaded_event { height: 56px; }
#this_card.s3 #shaded_event { height: 65px; }
#this_card.s4 #shaded_event { height: 82px; }

#this_card.s3.u4 #shaded_event { height: 67px; }
#this_card.s3.card_14 #shaded_event { height: 71px; }
#this_card.s3.card_15 #shaded_event { height: 71px; }
#this_card.s3.card_31 #shaded_event { height: 68px; }
#this_card.s3.card_38 #shaded_event { height: 65px; }
#this_card.s3.card_49 #shaded_event { height: 68px; }
#this_card.s3.card_58 #shaded_event { height: 67px; }
#this_card.s3.card_62 #shaded_event { height: 67px; }
#this_card.s3.card_68 #shaded_event { height: 67px; }

#this_card.s3.u4 #unshaded_event { height: 75px; }
#this_card.s3.card_38 #unshaded_event { height: 77px; }

#this_card.s3.c #unshaded_event { height: 69px; }
#this_card.s3.c #shaded_event { height: 73px; }
#this_card.s4.c #shaded_event { height: 83px; }

#this_card.card_9.c #unshaded_event { top: 204px; height: 51px; }
#this_card.card_10.c #unshaded_event { height: 59px; }
#this_card.card_11.c #unshaded_event { top: 200px; height: 55px; }

.card.card_back{background-image:url(cards.1x/card_back.jpg)}
.card.card_1{background-image:url(cards.1x/card_01.jpg)}
.card.card_2{background-image:url(cards.1x/card_02.jpg)}
.card.card_3{background-image:url(cards.1x/card_03.jpg)}
.card.card_4{background-image:url(cards.1x/card_04.jpg)}
.card.card_5{background-image:url(cards.1x/card_05.jpg)}
.card.card_6{background-image:url(cards.1x/card_06.jpg)}
.card.card_7{background-image:url(cards.1x/card_07.jpg)}
.card.card_8{background-image:url(cards.1x/card_08.jpg)}
.card.card_9{background-image:url(cards.1x/card_09.jpg)}
.card.card_10{background-image:url(cards.1x/card_10.jpg)}
.card.card_11{background-image:url(cards.1x/card_11.jpg)}
.card.card_12{background-image:url(cards.1x/card_12.jpg)}
.card.card_13{background-image:url(cards.1x/card_13.jpg)}
.card.card_14{background-image:url(cards.1x/card_14.jpg)}
.card.card_15{background-image:url(cards.1x/card_15.jpg)}
.card.card_16{background-image:url(cards.1x/card_16.jpg)}
.card.card_17{background-image:url(cards.1x/card_17.jpg)}
.card.card_18{background-image:url(cards.1x/card_18.jpg)}
.card.card_19{background-image:url(cards.1x/card_19.jpg)}
.card.card_20{background-image:url(cards.1x/card_20.jpg)}
.card.card_21{background-image:url(cards.1x/card_21.jpg)}
.card.card_22{background-image:url(cards.1x/card_22.jpg)}
.card.card_23{background-image:url(cards.1x/card_23.jpg)}
.card.card_24{background-image:url(cards.1x/card_24.jpg)}
.card.card_25{background-image:url(cards.1x/card_25.jpg)}
.card.card_26{background-image:url(cards.1x/card_26.jpg)}
.card.card_27{background-image:url(cards.1x/card_27.jpg)}
.card.card_28{background-image:url(cards.1x/card_28.jpg)}
.card.card_29{background-image:url(cards.1x/card_29.jpg)}
.card.card_30{background-image:url(cards.1x/card_30.jpg)}
.card.card_31{background-image:url(cards.1x/card_31.jpg)}
.card.card_32{background-image:url(cards.1x/card_32.jpg)}
.card.card_33{background-image:url(cards.1x/card_33.jpg)}
.card.card_34{background-image:url(cards.1x/card_34.jpg)}
.card.card_35{background-image:url(cards.1x/card_35.jpg)}
.card.card_36{background-image:url(cards.1x/card_36.jpg)}
.card.card_37{background-image:url(cards.1x/card_37.jpg)}
.card.card_38{background-image:url(cards.1x/card_38.jpg)}
.card.card_39{background-image:url(cards.1x/card_39.jpg)}
.card.card_40{background-image:url(cards.1x/card_40.jpg)}
.card.card_41{background-image:url(cards.1x/card_41.jpg)}
.card.card_42{background-image:url(cards.1x/card_42.jpg)}
.card.card_43{background-image:url(cards.1x/card_43.jpg)}
.card.card_44{background-image:url(cards.1x/card_44.jpg)}
.card.card_45{background-image:url(cards.1x/card_45.jpg)}
.card.card_46{background-image:url(cards.1x/card_46.jpg)}
.card.card_47{background-image:url(cards.1x/card_47.jpg)}
.card.card_48{background-image:url(cards.1x/card_48.jpg)}
.card.card_49{background-image:url(cards.1x/card_49.jpg)}
.card.card_50{background-image:url(cards.1x/card_50.jpg)}
.card.card_51{background-image:url(cards.1x/card_51.jpg)}
.card.card_52{background-image:url(cards.1x/card_52.jpg)}
.card.card_53{background-image:url(cards.1x/card_53.jpg)}
.card.card_54{background-image:url(cards.1x/card_54.jpg)}
.card.card_55{background-image:url(cards.1x/card_55.jpg)}
.card.card_56{background-image:url(cards.1x/card_56.jpg)}
.card.card_57{background-image:url(cards.1x/card_57.jpg)}
.card.card_58{background-image:url(cards.1x/card_58.jpg)}
.card.card_59{background-image:url(cards.1x/card_59.jpg)}
.card.card_60{background-image:url(cards.1x/card_60.jpg)}
.card.card_61{background-image:url(cards.1x/card_61.jpg)}
.card.card_62{background-image:url(cards.1x/card_62.jpg)}
.card.card_63{background-image:url(cards.1x/card_63.jpg)}
.card.card_64{background-image:url(cards.1x/card_64.jpg)}
.card.card_65{background-image:url(cards.1x/card_65.jpg)}
.card.card_66{background-image:url(cards.1x/card_66.jpg)}
.card.card_67{background-image:url(cards.1x/card_67.jpg)}
.card.card_68{background-image:url(cards.1x/card_68.jpg)}
.card.card_69{background-image:url(cards.1x/card_69.jpg)}
.card.card_70{background-image:url(cards.1x/card_70.jpg)}
.card.card_71{background-image:url(cards.1x/card_71.jpg)}
.card.card_72{background-image:url(cards.1x/card_72.jpg)}
.card.card_73{background-image:url(cards.1x/card_7x.jpg)}

@media (min-resolution: 97dpi) {
.card.card_back{background-image:url(cards.2x/card_back.jpg)}
.card.card_1{background-image:url(cards.2x/card_01.jpg)}
.card.card_2{background-image:url(cards.2x/card_02.jpg)}
.card.card_3{background-image:url(cards.2x/card_03.jpg)}
.card.card_4{background-image:url(cards.2x/card_04.jpg)}
.card.card_5{background-image:url(cards.2x/card_05.jpg)}
.card.card_6{background-image:url(cards.2x/card_06.jpg)}
.card.card_7{background-image:url(cards.2x/card_07.jpg)}
.card.card_8{background-image:url(cards.2x/card_08.jpg)}
.card.card_9{background-image:url(cards.2x/card_09.jpg)}
.card.card_10{background-image:url(cards.2x/card_10.jpg)}
.card.card_11{background-image:url(cards.2x/card_11.jpg)}
.card.card_12{background-image:url(cards.2x/card_12.jpg)}
.card.card_13{background-image:url(cards.2x/card_13.jpg)}
.card.card_14{background-image:url(cards.2x/card_14.jpg)}
.card.card_15{background-image:url(cards.2x/card_15.jpg)}
.card.card_16{background-image:url(cards.2x/card_16.jpg)}
.card.card_17{background-image:url(cards.2x/card_17.jpg)}
.card.card_18{background-image:url(cards.2x/card_18.jpg)}
.card.card_19{background-image:url(cards.2x/card_19.jpg)}
.card.card_20{background-image:url(cards.2x/card_20.jpg)}
.card.card_21{background-image:url(cards.2x/card_21.jpg)}
.card.card_22{background-image:url(cards.2x/card_22.jpg)}
.card.card_23{background-image:url(cards.2x/card_23.jpg)}
.card.card_24{background-image:url(cards.2x/card_24.jpg)}
.card.card_25{background-image:url(cards.2x/card_25.jpg)}
.card.card_26{background-image:url(cards.2x/card_26.jpg)}
.card.card_27{background-image:url(cards.2x/card_27.jpg)}
.card.card_28{background-image:url(cards.2x/card_28.jpg)}
.card.card_29{background-image:url(cards.2x/card_29.jpg)}
.card.card_30{background-image:url(cards.2x/card_30.jpg)}
.card.card_31{background-image:url(cards.2x/card_31.jpg)}
.card.card_32{background-image:url(cards.2x/card_32.jpg)}
.card.card_33{background-image:url(cards.2x/card_33.jpg)}
.card.card_34{background-image:url(cards.2x/card_34.jpg)}
.card.card_35{background-image:url(cards.2x/card_35.jpg)}
.card.card_36{background-image:url(cards.2x/card_36.jpg)}
.card.card_37{background-image:url(cards.2x/card_37.jpg)}
.card.card_38{background-image:url(cards.2x/card_38.jpg)}
.card.card_39{background-image:url(cards.2x/card_39.jpg)}
.card.card_40{background-image:url(cards.2x/card_40.jpg)}
.card.card_41{background-image:url(cards.2x/card_41.jpg)}
.card.card_42{background-image:url(cards.2x/card_42.jpg)}
.card.card_43{background-image:url(cards.2x/card_43.jpg)}
.card.card_44{background-image:url(cards.2x/card_44.jpg)}
.card.card_45{background-image:url(cards.2x/card_45.jpg)}
.card.card_46{background-image:url(cards.2x/card_46.jpg)}
.card.card_47{background-image:url(cards.2x/card_47.jpg)}
.card.card_48{background-image:url(cards.2x/card_48.jpg)}
.card.card_49{background-image:url(cards.2x/card_49.jpg)}
.card.card_50{background-image:url(cards.2x/card_50.jpg)}
.card.card_51{background-image:url(cards.2x/card_51.jpg)}
.card.card_52{background-image:url(cards.2x/card_52.jpg)}
.card.card_53{background-image:url(cards.2x/card_53.jpg)}
.card.card_54{background-image:url(cards.2x/card_54.jpg)}
.card.card_55{background-image:url(cards.2x/card_55.jpg)}
.card.card_56{background-image:url(cards.2x/card_56.jpg)}
.card.card_57{background-image:url(cards.2x/card_57.jpg)}
.card.card_58{background-image:url(cards.2x/card_58.jpg)}
.card.card_59{background-image:url(cards.2x/card_59.jpg)}
.card.card_60{background-image:url(cards.2x/card_60.jpg)}
.card.card_61{background-image:url(cards.2x/card_61.jpg)}
.card.card_62{background-image:url(cards.2x/card_62.jpg)}
.card.card_63{background-image:url(cards.2x/card_63.jpg)}
.card.card_64{background-image:url(cards.2x/card_64.jpg)}
.card.card_65{background-image:url(cards.2x/card_65.jpg)}
.card.card_66{background-image:url(cards.2x/card_66.jpg)}
.card.card_67{background-image:url(cards.2x/card_67.jpg)}
.card.card_68{background-image:url(cards.2x/card_68.jpg)}
.card.card_69{background-image:url(cards.2x/card_69.jpg)}
.card.card_70{background-image:url(cards.2x/card_70.jpg)}
.card.card_71{background-image:url(cards.2x/card_71.jpg)}
.card.card_72{background-image:url(cards.2x/card_72.jpg)}
.card.card_73{background-image:url(cards.2x/card_7x.jpg)}
}