1
/* reset CSS */
2
html, body, div, span, applet, object, iframe,
3
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
4
a, abbr, acronym, address, big, cite, code,
5
del, dfn, em, img, ins, kbd, q, s, samp,
6
small, strike, strong, sub, sup, tt, var,
7
b, u, i, center,
8
dl, dt, dd, ol, ul, li,
9
fieldset, form, label, legend,
10
table, caption, tbody, tfoot, thead, tr, th, td,
11
article, aside, canvas, details, embed, 
12
figure, figcaption, footer, header, hgroup, 
13
menu, nav, output, ruby, section, summary,
14
time, mark, audio, video {
15
	margin: 0;
16
	padding: 0;
17
	border: 0;
18
	font-size: 100%;
19
	font: inherit;
20
	vertical-align: baseline;
21
}
22
/* HTML5 display-role reset for older browsers */
23
article, aside, details, figcaption, figure, 
24
footer, header, hgroup, menu, nav, section {
25
	display: block;
26
}
27
body {
28
	line-height: 1;
29
}
30
ol, ul {
31
	list-style: none;
32
}
33
blockquote, q {
34
	quotes: none;
35
}
36
blockquote:before, blockquote:after,
37
q:before, q:after {
38
	content: '';
39
	content: none;
40
}
41
table {
42
	border-collapse: collapse;
43
	border-spacing: 0;
44
}
45

46

47
/*=====================================================================================
48
BASE
49
=======================================================================================*/
50
html,body
51
{
52
	width:100%;
53
	height:100%;
54
}
55

56
body
57
{
58
	-webkit-touch-callout: none;
59
	-webkit-user-select: none;
60
	-khtml-user-select: none;
61
	-moz-user-select: -moz-none;
62
	-moz-user-select: none;
63
	-ms-user-select: none;
64
	user-select: none;
65
	touch-action: manipulation;
66
	
67
	color:#fff;
68
	background:#000 url(img/darkNoise.jpg);
69
	font-family:Tahoma,Arial,sans-serif;
70
	font-size:13px;
71
}
72
.selectable
73
{
74
	-webkit-touch-callout: text;
75
	-webkit-user-select: text;
76
	-khtml-user-select: text;
77
	-moz-user-select: text;
78
	-ms-user-select: text;
79
	user-select: text;
80
}
81

82
#wrapper
83
{
84
	width:100%;
85
	height:100%;
86
	position:absolute;
87
	left:0px;
88
	top:0px;
89
	right:0px;
90
	bottom:0px;
91
	/*min-width:1280px;*/
92
}
93

94
small
95
{
96
	font-size:80%;
97
}
98

99
a,a:visited
100
{
101
	text-decoration:underline;
102
	cursor:pointer;
103
	color:#ccc;
104
}
105
a:hover
106
{
107
	text-shadow:0px 0px 3px #fff;
108
	color:#fff;
109
}
110
a:active
111
{
112
	opacity:0.8;
113
	background:transparent;
114
}
115

116
.inset
117
{
118
	/*box-shadow:0px 0px 12px #000 inset;*/
119
}
120

121
.titleFont,.title,.section,.lockedTitle
122
{
123
	font-family: 'Merriweather', Georgia,serif;
124
}
125
.title,.section,.lockedTitle
126
{
127
	font-size:28px;
128
	text-shadow:0px 0px 4px #000;
129
	color:#fff;
130
}
131

132
/*=====================================================================================
133
SECTIONS
134
=======================================================================================*/
135
.section
136
{
137
	text-align:center;
138
	padding:0px 16px;
139
	background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0.5),rgba(0,0,0,0),rgba(0,0,0,0));
140
	margin:12px 0px;
141
}
142
.section:after
143
{
144
	content:'';
145
	display:block;
146
	background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,0.25),rgba(255,255,255,0),rgba(255,255,255,0));
147
	height:1px;
148
	margin:6px 0px;
149
}
150
.section:before
151
{
152
	content:'';
153
	display:block;
154
	background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,0.25),rgba(255,255,255,0),rgba(255,255,255,0));
155
	height:1px;
156
	margin:6px 0px;
157
}
158
.subsection
159
{
160
	padding:8px 0px;
161
	font-size:14px;
162
}
163
.subsection div.title
164
{
165
	font-size:22px;
166
	padding-left:16px;
167
	margin-bottom:8px;
168
	background:linear-gradient(to right,rgba(0,0,0,0.5),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0));
169
}
170
.subsection div.title:after
171
{
172
	content:'';
173
	display:block;
174
	background:linear-gradient(to right,rgba(255,255,255,0.25),rgba(255,255,255,0));
175
	height:1px;
176
	width:50%;
177
	margin:6px 0px;
178
	margin-left:-16px;
179
}
180
.subsection div.title:before
181
{
182
	content:'';
183
	display:block;
184
	background:linear-gradient(to right,rgba(255,255,255,0.25),rgba(255,255,255,0));
185
	height:1px;
186
	width:50%;
187
	margin:6px 0px;
188
	margin-left:-16px;
189
}
190
.update
191
{
192
	-webkit-touch-callout: auto;
193
	-webkit-user-select: auto;
194
	-khtml-user-select: auto;
195
	-moz-user-select: auto;
196
	-moz-user-select: auto;
197
	-ms-user-select: auto;
198
	user-select: auto;
199
}
200
.update .title
201
{
202
	color:#69c;
203
}
204
.update.small .title
205
{
206
	font-size:16px;
207
	opacity:0.8;
208
	color:#fff;
209
}
210
.listing
211
{
212
	padding:3px 16px;
213
	font-size:13px;
214
}
215
.listing b
216
{
217
	font-weight:bold;
218
	opacity:0.6;
219
}
220
.listing small
221
{
222
	font-size:11px;
223
	opacity:0.9;
224
}
225
.listing label
226
{
227
	font-size:12px;
228
	border-bottom:1px solid rgba(255,255,255,0.25);
229
	border-right:1px solid rgba(255,255,255,0.25);
230
	opacity:0.5;
231
	padding-left:16px;
232
	padding-bottom:2px;
233
	padding-right:4px;
234
	position:relative;
235
	left:-4px;
236
	top:-2px;
237
	background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0.5));
238
}
239

240
.hidden
241
{
242
	visibility:hidden;
243
}
244
.toggledOff
245
{
246
	opacity:0;
247
	display:none;
248
}
249
.listing:hover .hidden
250
{
251
	visibility:visible;
252
}
253

254
.optionBox
255
{
256
	text-align:center;
257
	clear:both;
258
	margin-bottom:-12px;
259
}
260
.optionBox .option
261
{
262
}
263
a.option.big
264
{
265
	font-size:30px;
266
	margin:auto;
267
	padding:8px 16px;
268
	width:80%;
269
}
270
a.option.framed.large small {font-size:65%;}
271
a.option.framed.large
272
{
273
	font-size:20px;
274
	margin:4px auto;
275
	padding:6px 12px;
276
	background:#058;
277
	box-shadow:0px 0px 1px 2px rgba(0,0,0,0.5),0px 2px 4px rgba(0,0,0,0.25),0px 1px 1px 1px rgba(0,0,0,0.5) inset,0px 0px 12px 2px #0cf inset;
278
	text-shadow:0px 1px 2px #000;
279
}
280
a.option.framed.large:hover
281
{
282
	background:#0cf;
283
	box-shadow:0px 0px 1px 2px rgba(0,0,0,0.5),0px 2px 4px rgba(0,0,0,0.25),0px 1px 1px 1px rgba(0,0,0,0.5) inset,0px 0px 12px 2px #8ef inset;
284
	text-shadow:0px 1px 2px #000;
285
	color:#fff;
286
}
287
a.option.framed.large.red
288
{
289
	background:#c30;
290
	box-shadow:0px 0px 1px 2px rgba(0,0,0,0.5),0px 2px 4px rgba(0,0,0,0.25),0px 1px 1px 1px rgba(0,0,0,0.5) inset,0px 0px 12px 2px #f64 inset;
291
}
292
a.option.framed.large.red:hover
293
{
294
	background:#f64;
295
	box-shadow:0px 0px 1px 2px rgba(0,0,0,0.5),0px 2px 4px rgba(0,0,0,0.25),0px 1px 1px 1px rgba(0,0,0,0.5) inset,0px 0px 12px 2px #fc7 inset;
296
}
297
a.option, .info a
298
{
299
	display:inline-block;
300
	border:1px solid #ccc;
301
	background:#000;
302
	margin:2px 4px 2px 0px;
303
	color:#ccc;
304
	font-size:12px;
305
	padding:4px 8px;
306
	text-decoration:none;
307
}
308
a.option.off {opacity:0.5;}
309
a.option:hover, .info a:hover
310
{
311
	border-color:#fff;
312
	color:#fff;
313
	text-shadow:none;
314
}
315
a.option:active, .info a:active
316
{
317
	background-color:#333;
318
}
319
.warning, a.option.warning
320
{
321
	color:#c00;
322
	border-color:#c00;
323
}
324
a.option.warning:hover
325
{
326
	border-color:#f33;
327
	color:#f33;
328
}
329
a.option.warning:active
330
{
331
	background-color:#300;
332
}
333

334
.neato, a.option.neato
335
{
336
	color:#096;
337
	border-color:#096;
338
}
339
a.option.neato:hover
340
{
341
	border-color:#3c9;
342
	color:#3c9;
343
}
344
a.option.neato:active
345
{
346
	background-color:#032;
347
}
348
.info a
349
{
350
	border-color:#666;
351
	background:#eee;
352
	color:#666;
353
	padding:2px 6px;
354
}
355
.info a:hover
356
{
357
	border-color:#000;
358
	background-color:#fff;
359
	color:#000;
360
}
361
.info a:active
362
{
363
	background-color:#999;
364
}
365

366
/*=====================================================================================
367
oh forget it this is just a mess
368
=======================================================================================*/
369
#backgroundLayers, #backgroundLayers div
370
{
371
	width:100%;
372
	height:100%;
373
	position:absolute;
374
	left:0px;
375
	top:0px;
376
}
377

378
#backgroundCanvas,#backgroundLeftCanvas
379
{
380
	position:absolute;
381
	left:0px;
382
	top:0px;
383
}
384

385
#topBar
386
{
387
	position:absolute;
388
	left:0px;
389
	top:0px;
390
	width:100%;
391
	height:32px;
392
	background:url(img/darkNoiseTopBar.jpg) repeat-x bottom;
393
	color:#ccc;
394
}
395
#topBar>div
396
{
397
	display:inline-block;
398
	float:left;
399
	border-right:1px solid #000;
400
	box-shadow:0px 0px 3px 1px rgba(255,255,255,0.2) inset;
401
	padding:7px 8px 9px 8px;
402
}
403
#topBar a
404
{color:#fff;}
405
#topBar a.blueLink
406
{color:#06c;}
407
#topBar a.blueLink:hover
408
{color:#28f;text-shadow:0px 0px 3px #06c;}
409
#topBar a.lightblueLink
410
{color:#6ad3ff;}
411
#topBar a.lightblueLink:hover
412
{color:#74fffd;text-shadow:0px 0px 3px #6ad3ff;}
413
a.orangeLink,#topBar a.orangeLink
414
{color:#f65f4d;}
415
a.orangeLink:hover,#topBar a.orangeLink:hover
416
{color:#ff9580;text-shadow:0px 0px 3px #f65f4d;}
417

418
#topBar>#links
419
{
420
	display:block;
421
	position:absolute;
422
	right:0px;
423
	top:0px;
424
	z-index:10000000;
425
	float:none;
426
}
427

428
.hoverable
429
{
430
	text-align:left;
431
	opacity:0;
432
	transition:max-height 0.25s ease-out,opacity 0.25s ease-out;
433
	position:absolute;
434
	left:0px;
435
	top:32px;
436
	padding-right:1px;
437
	width:100%;
438
	max-height:0px;
439
	overflow:hidden;
440
	color:#fff;
441
	box-shadow:0px 0px 4px rgba(255,255,255,0.2) inset,0px 2px 4px 2px rgba(0,0,0,0.5),0px 0px 0px 1px rgba(0,0,0,0.5);
442
	background:url(img/darkNoise.jpg);
443
}
444
div:hover>.hoverable
445
{
446
	opacity:1;
447
	max-height:400px;
448
}
449
.hoverable>div
450
{
451
	padding:8px 12px;
452
}
453
.hoverable a
454
{
455
	text-shadow:none;
456
	display:block;
457
	text-decoration:none;
458
	padding:5px 8px 7px 8px;
459
}
460
.hoverable a:nth-child(odd)
461
{
462
	background:rgba(255,255,255,0.05);
463
}
464
.hoverable a:hover
465
{
466
	text-shadow:none;
467
	background:rgba(255,255,255,0.2);
468
	box-shadow:0px 0px 4px rgba(255,255,255,0.2) inset,0px 0px 2px 1px rgba(0,0,0,0.5);
469
}
470

471

472
#javascriptError
473
{
474
	position:absolute;
475
	left:0px;
476
	top:0px;
477
	right:0px;
478
	bottom:0px;
479
	background:#111 url(img/darkNoise.jpg);
480
	background:url(img/shadedBorders.png) left top/100% 100%,#111 url(img/darkNoise.jpg);
481
	text-align:center;
482
	z-index:100000000000;
483
	line-height:150%;
484
	font-size:20px;
485
}
486
#loader
487
{
488
	padding:64px 128px;
489
	position:relative;
490
	top:120px;
491
	animation-name:appear;
492
	animation-iteration-count:1;
493
	animation-timing-function:ease-out;
494
	animation-duration:0.5s;
495
}
496
@keyframes appear
497
{
498
	from {opacity:0;top:130px;}
499
	to {opacity:1;top:120px;}
500
}
501
#loading
502
{
503
	text-shadow:0px 0px 3px rgba(255,255,255,0.5),0px 0px 20px #39f;
504
	animation-name:blink;
505
	animation-iteration-count:infinite;
506
	animation-timing-function:ease-in-out;
507
	animation-duration:0.75s;
508
}
509
@keyframes blink
510
{
511
	0% {opacity:0.5;}
512
	50% {opacity:1;}
513
	100% {opacity:0.5;}
514
}
515
#ifIE9{display:none;}
516
#failedToLoad
517
{
518
	text-shadow:0px 0px 3px rgba(255,255,255,0.5),0px 0px 20px #f33;
519
	animation-name:appearLater;
520
	animation-iteration-count:1;
521
	animation-timing-function:ease-out;
522
	animation-duration:15s;
523
}
524
@keyframes appearLater
525
{
526
	0% {opacity:0;}
527
	95% {opacity:0;}
528
	100% {opacity:1;}
529
}
530
.spinnyBig,.spinnySmall
531
{
532
	display:block;
533
	width:100px;
534
	height:100px;
535
	position:absolute;
536
	left:50%;
537
	top:-75px;
538
	margin-left:-50px;
539
	animation-name:loadSpin;
540
	animation-iteration-count:infinite;
541
	animation-timing-function:ease-in-out;
542
}
543
.spinnyBig
544
{
545
	background:url(img/spinnyBig.png);
546
	animation-duration:5s;
547
}
548
.spinnySmall
549
{
550
	background:url(img/spinnySmall.png);
551
	animation-duration:9s;
552
}
553
@keyframes loadSpin
554
{
555
	from {transform:rotate(0deg);}
556
	to {transform:rotate(360deg);}
557
}
558

559
#game
560
{
561
	position:absolute;
562
	left:0px;
563
	top:32px;
564
	right:0px;
565
	bottom:0px;
566
	overflow:hidden;
567
}
568
#sectionLeft
569
{
570
	position:absolute;
571
	left:0px;
572
	top:0px;
573
	width:30%;
574
	bottom:0px;
575
	min-width:100px;
576
	/*overflow:hidden;*/
577
}
578
/*#sectionLeftExtra{position:absolute;left:0px;top:0px;}*/
579
#sectionMiddle
580
{
581
	position:absolute;
582
	left:30%;
583
	padding-left:16px;
584
	margin-right:15px;
585
	top:0px;
586
	right:318px;
587
	bottom:0px;
588
	min-width:100px;
589
	overflow:hidden;
590
}
591
#centerArea
592
{
593
	overflow-x:hidden;
594
	overflow-y:scroll;
595
	position:absolute;
596
	top:112px;
597
	left:16px;
598
	bottom:0px;
599
	right:0px;
600
}
601
#game.onMenu #centerArea
602
{
603
	background:#000 url(img/darkNoise.jpg);
604
	background-image:url(img/shadedBorders.png),url(img/darkNoise.jpg);
605
	background-size:100% 100%,auto;
606
	background-color:#000;
607
}
608
#sectionRight
609
{
610
	height:100%;
611
	position:absolute;
612
	top:0px;
613
	right:0px;
614
	overflow-x:hidden;
615
	overflow-y:scroll;
616
	/*background:url(img/panelBG.png);*/
617
	background:rgba(0,0,0,0.5);
618
}
619

620
#sectionLeft .blackGradient
621
{
622
	background:url(img/blackGradient.png) repeat-x bottom;
623
	position:absolute;
624
	left:0px;
625
	right:0px;
626
	top:300px;
627
	height:640px;
628
}
629
#sectionLeft .blackFiller
630
{
631
	background:#000;
632
	position:absolute;
633
	left:0px;
634
	right:0px;
635
	top:940px;
636
	bottom:0px;
637
}
638

639

640
/* this is a mess */
641
.framed,a.option,.sliderBox,.smallFramed
642
{
643
	border:1px solid #e2dd48;
644
	background:#000 url(img/darkNoise.jpg);
645
	background-image:url(img/shadedBordersSoft.png),url(img/darkNoise.jpg);
646
	background-size:100% 100%,auto;
647
	background-color:#000;
648
	border-radius:2px;
649
	box-shadow:0px 0px 1px 2px rgba(0,0,0,0.5),0px 2px 4px rgba(0,0,0,0.25),0px 0px 2px 2px #000 inset,0px 1px 0px 1px rgba(255,255,255,0.5) inset;
650
	text-shadow:0px 1px 1px #000;
651
	color:#ccc;
652
	line-height:100%;
653
}
654
.framed,a.option,a.option.framed,a.option.framed:hover,.smallFramed
655
{
656
	/*border-color:#dac56e #c07a36 #a44e36 #c07a36;*/
657
	/*border:1px solid #e2dd48;*/
658
	border-color:#ece2b6 #875526 #733726 #dfbc9a;
659
}
660
.smallFramed
661
{border-radius:8px;}
662
a.option,textarea,input[type="text"],.sliderBox
663
{
664
	border:1px solid #e2dd48;
665
	border-color:#ece2b6 #875526 #733726 #dfbc9a;
666
	border-radius:2px;
667
}
668
textarea,input[type="text"]
669
{
670
	border-radius:4px;
671
	box-shadow:0px 0px 0px 1px rgba(0,0,0,0.5) inset,0px 1px 2px rgba(0,0,0,0.5) inset;
672
}
673

674
.framed,a.option.framed
675
{
676
	padding:4px 8px;
677
	margin:4px;
678
	border:3px solid transparent;
679
	border-image:url(img/frameBorder.png) 3 round;
680
	border-radius:2px;
681
	box-shadow:0px 0px 1px 2px rgba(0,0,0,0.5),0px 2px 4px rgba(0,0,0,0.25),0px 0px 6px 1px rgba(0,0,0,0.5) inset;
682
	-webkit-transition: opacity 0.1s ease-out;
683
	-moz-transition: opacity 0.1s ease-out;
684
	-ms-transition: opacity 0.1s ease-out;
685
	-o-transition: opacity 0.1s ease-out;
686
	transition: opacity 0.1s ease-out;
687
}
688

689
.sliderBox
690
{
691
	padding:4px 8px;
692
	width:200px;
693
	display:inline-block;
694
	margin-bottom:2px;
695
	margin-right:2px;
696
}
697
.sliderBox>div
698
{
699
	margin-bottom:4px;
700
}
701
.sliderBox>input
702
{
703
	display:block;
704
	margin:2px auto;
705
}
706

707
/* why, CSS? why? */
708
input[type=range]
709
{
710
	-webkit-appearance:none;
711
	width:100%;
712
	height:12px;
713
	margin:0px 0px;
714
	border:0px solid #000;
715
	cursor:pointer;
716
}
717
input[type=range]:focus{outline:none;}
718
input[type=range]::-webkit-slider-runnable-track
719
{
720
	width:100%;
721
	height:12px;
722
	cursor:pointer;
723
	background:#999;
724
	border:0px solid #000;
725
	border-radius:4px;
726
	box-shadow:0px 0px 4px #000,0px 2px 3px rgba(0,0,0,0.5) inset;
727
}
728
input[type=range]::-webkit-slider-thumb
729
{
730
	border:0px solid #000;
731
	height:12px;
732
	width:12px;
733
	background:#ccc;
734
	box-shadow:0px 0px 4px #fff inset,0px 1px 3px 1px rgba(0,0,0,0.5);
735
	cursor:pointer;
736
	-webkit-appearance:none;
737
	margin-top:0px;
738
	border-radius:4px;
739
}
740
input[type=range]:active::-webkit-slider-thumb,input[type=range]:hover::-webkit-slider-thumb {background:#fff;}
741

742
input[type=range]::-moz-range-track 
743
{
744
	width:100%;
745
	height:12px;
746
	cursor:pointer;
747
	background:#999;
748
	border:0px solid #000;
749
	border-radius:4px;
750
	box-shadow:0px 0px 4px #000,0px 2px 3px rgba(0,0,0,0.5) inset;
751
}
752
input[type=range]::-moz-range-thumb
753
{
754
	border:0px solid #000;
755
	height:12px;
756
	width:12px;
757
	background:#ccc;
758
	box-shadow:0px 0px 4px #fff inset,0px 1px 3px 1px rgba(0,0,0,0.5);
759
	cursor:pointer;
760
	-webkit-appearance:none;
761
	margin-top:0px;
762
	border-radius:4px;
763
}
764
input[type=range]:active::-moz-range-thumb,input[type=range]:hover::-moz-range-thumb {background:#fff;}
765

766
input[type=range]::-ms-track 
767
{
768
	width:100%;
769
	height:12px;
770
	cursor:pointer;
771
	background:#999;
772
	border:0px solid #000;
773
	border-radius:4px;
774
	box-shadow:0px 0px 4px #000,0px 2px 3px rgba(0,0,0,0.5) inset;
775
}
776
input[type=range]::-ms-thumb
777
{
778
	border:0px solid #000;
779
	height:12px;
780
	width:12px;
781
	background:#ccc;
782
	box-shadow:0px 0px 4px #fff inset,0px 1px 3px 1px rgba(0,0,0,0.5);
783
	cursor:pointer;
784
	-webkit-appearance:none;
785
	margin-top:0px;
786
	border-radius:4px;
787
}
788
input[type=range]:active::-ms-thumb,input[type=range]:hover::-ms-thumb {background:#fff;}
789

790

791

792
.framed b
793
{
794
	color:#fff;
795
	font-weight:bold;
796
}
797
.framed .name
798
{
799
	font-weight:bold;
800
	font-size:110%;
801
	color:#fff;
802
	margin:2px 0px;
803
	text-shadow:0px 0px 2px rgba(255,255,255,0.3);
804
}
805
.framed q
806
{
807
	display:block;
808
	position:relative;
809
	text-align:right;
810
	margin-top:8px;
811
	font-style:italic;
812
	color:rgba(255,255,255,0.5);
813
	font-size:11.5px;
814
	font-family:Georgia;
815
	line-height:135%;
816
}
817
.framed q:before
818
{
819
	display:inline-block;
820
	content:"“";
821
	font-size:14px;
822
	font-family:Georgia;
823
	font-weight:bold;
824
}
825
.framed q:after
826
{
827
	display:inline-block;
828
	content:"”";
829
	font-size:14px;
830
	font-family:Georgia;
831
	font-weight:bold;
832
}
833
.framed .close
834
{
835
	position:absolute;
836
	top:-5px;
837
	right:0px;
838
	padding:4px;
839
}
840
.close
841
{
842
	font-weight:bold;
843
	font-size:16px;
844
	text-shadow:0px 0px 2px #000,0px 0px 1px #000;
845
	cursor:pointer;
846
	font-family:Comic Sans MS;
847
	padding:1px 8px 7px 8px;
848
	z-index:1000;
849
}
850
.close:hover
851
{
852
	color:#fff;
853
	text-shadow:0px 0px 2px #fff;
854
}
855
.sidenote
856
{
857
	position:absolute;
858
	right:-6px;
859
	bottom:6px;
860
}
861

862
.menuClose
863
{
864
	position:absolute;
865
	top:0px;
866
	right:0px;
867
	border-bottom-left-radius:36px;
868
	padding:4px 12px 16px 18px;
869
	font-size:24px;
870
	box-shadow:-2px 2px 8px #000, 2px -2px 8px rgba(255,255,255,0.1) inset;
871
}
872
.menuClose:hover
873
{
874
	background:rgba(255,255,255,0.05);
875
}
876

877
.framed .block
878
{
879
	padding:8px;
880
	margin:2px;
881
	border-radius:4px;
882
	border:1px solid rgba(255,255,255,0.1);
883
	box-shadow:0px 0px 1px #000,0px 0px 1px #000 inset;
884
}
885

886

887
#tooltipAnchor
888
{
889
	position:absolute;
890
	z-index:1000000000;
891
	display:none;
892
	//transition:left 0.1s ease-out,right 0.1s ease-out,top 0.1s ease-out,bottom 0.1s ease-out;
893
}
894
#tooltip
895
{
896
	position:absolute;
897
	-webkit-transition:none;
898
	-moz-transition:none;
899
	-ms-transition:none;
900
	-o-transition:none;
901
	transition:none;
902
	pointer-events:none;
903
	opacity:1;
904
}
905
.wobbling
906
{
907
	animation:wobble 0.1s ease-out;
908
}
909
#tooltip .data
910
{
911
	/*border-top:1px solid rgba(255,255,255,0.25);*/
912
	padding:4px 0px;
913
	font-size:80%;
914
}
915

916
.line
917
{
918
	background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0.25),rgba(255,255,255,0));
919
	height:1px;
920
	width:90%;
921
	margin:6px auto;
922
	position:relative;
923
}
924
.line:before,.line:after
925
{
926
	content:'';
927
	display:block;
928
	background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0.25),rgba(0,0,0,0));
929
	height:1px;
930
	width:90%;
931
	position:absolute;
932
	left:0px;
933
	bottom:1px;
934
}
935
.line:after
936
{
937
	bottom:-1px;
938
}
939
.description
940
{
941
	/*border-top:1px solid rgba(255,255,255,0.25);*/
942
	margin:4px 0px;
943
}
944

945
q:before
946
{
947
	display:inline-block;
948
	content:"\"";
949
}
950
q:after
951
{
952
	display:inline-block;
953
	content:"\"";
954
}
955

956

957
.price
958
{
959
	font-weight:bold;
960
	color:#6f6;
961
	padding-left:18px;
962
	position:relative;
963
}
964
.priceMult
965
{
966
	font-weight:bold;
967
	color:#ffc;
968
}
969
.price .tinyCookie
970
{
971
	display:block;
972
	position:absolute;
973
	left:0px;
974
	top:0px;
975
	width:16px;
976
	height:16px;
977
	cursor:pointer;
978
}
979
.price.disabled, .disabled .price
980
{
981
	color:#f66;
982
}
983
.price:before
984
{
985
	content:'';
986
	display:block;
987
	position:absolute;
988
	left:0px;
989
	top:2px;
990
	background:url(img/money.png);
991
	width:16px;
992
	height:16px;
993
}
994
.hasTinyCookie
995
{
996
	position:relative;
997
	padding-left:18px;
998
}
999
.hasTinyCookie:before
1000
{
1001
	content:'';
1002
	display:block;
1003
	position:absolute;
1004
	left:0px;
1005
	top:0px;
1006
	background:url(img/money.png);
1007
	width:16px;
1008
	height:16px;
1009
}
1010
.heavenly.price:before
1011
{
1012
	background:url(img/heavenlyMoney.png);
1013
}
1014
.lump.price:before
1015
{
1016
	background:url(img/sugarLump.png);
1017
}
1018
.price.plain
1019
{
1020
	color:#fff;
1021
	display:inline-block;
1022
}
1023
.price.plain:before
1024
{
1025
	top:0px;
1026
}
1027

1028
#cookieAnchor
1029
{
1030
	position:absolute;
1031
	left:50%;
1032
	top:40%;
1033
}
1034
#bigCookie
1035
{
1036
	width:256px;
1037
	height:256px;
1038
	position:absolute;
1039
	left:-128px;
1040
	top:-128px;
1041
	/*background:url(img/perfectCookie.png);
1042
	background-size:256px 256px;*/
1043
	background:url(img/empty.png);/* somehow necessary; an empty div with no background seems to be click-through */
1044
	cursor:pointer;
1045
	z-index:10000;
1046
	border-radius:128px;
1047
}
1048
.elderWrath #bigCookie
1049
{
1050
	background:url(img/imperfectCookie.png);
1051
	background-size:256px 256px;
1052
}
1053
#cookieNumbers{position:absolute;top:-80px;}
1054
.cookieNumber
1055
{
1056
	position:absolute;
1057
	pointer-events:none;
1058
	left:-100px;
1059
	top:0px;
1060
	width:200px;
1061
	z-index:100;
1062
	text-align:center;
1063
	text-shadow:none;
1064
}
1065
#cookieCursors{position:absolute;z-index:5;}
1066
.cursor
1067
{
1068
	width:32px;
1069
	height:32px;
1070
	position:absolute;
1071
	background:url(img/cursor.png);
1072
}
1073
.cookieParticle
1074
{
1075
	width:64px;
1076
	height:64px;
1077
	margin-left:-32px;
1078
	margin-top:-32px;
1079
	position:absolute;
1080
	background:url(img/smallCookies.png);
1081
	opacity:0;
1082
}
1083
#particles {position:absolute;left:0px;top:0px;z-index:100000000000;}
1084
.particle
1085
{
1086
	position:absolute;
1087
	pointer-events:none;
1088
	left:-200px;
1089
	bottom:0px;
1090
	width:400px;
1091
	z-index:100000000;
1092
	text-align:center;
1093
	text-shadow:1px 1px 1px #000,0px 0px 6px #000;
1094
	font-size:24px;
1095
}
1096
.particle.title
1097
{
1098
	background:rgba(0,0,0,0.5);
1099
	box-shadow:0px 0px 8px 8px rgba(0,0,0,0.5);
1100
	border-radius:16px;
1101
	display:none;
1102
}
1103

1104
#milk
1105
{
1106
	width:100%;
1107
	height:0%;
1108
	position:absolute;
1109
	left:0px;
1110
	bottom:0px;
1111
	z-index:100;
1112
	opacity:0.9;
1113
}
1114
.milkLayer
1115
{
1116
	width:100%;
1117
	height:100%;
1118
	position:absolute;
1119
	left:0px;
1120
	top:0px;
1121
	background-repeat:repeat-x;
1122
}
1123
#cookies
1124
{
1125
	position:absolute;
1126
	left:0px;
1127
	top:10%;
1128
	width:100%;
1129
	text-align:center;
1130
	z-index:200;
1131
	background:#000;
1132
	background:rgba(0,0,0,0.4);
1133
	padding:2px 0px;
1134
	pointer-events:none;
1135
}
1136
.monospace
1137
{
1138
	font-family:Courier,monospace;
1139
	font-weight:bold;
1140
}
1141
#bakeryNameAnchor
1142
{
1143
	position:absolute;
1144
	left:0px;
1145
	top:10%;
1146
	width:100%;
1147
	z-index:200;
1148
}
1149
#bakeryName
1150
{
1151
	position:absolute;
1152
	left:0px;
1153
	bottom:8px;
1154
	left:12.5%;
1155
	width:75%;
1156
	text-align:center;
1157
	font-size:20px;
1158
	background:#000;
1159
	background:rgba(0,0,0,0.4);
1160
	border-radius:12px;
1161
	padding:4px 0px;
1162
	cursor:pointer;
1163
}
1164
#bakeryName:hover
1165
{
1166
	text-shadow:0px 0px 8px #fff;
1167
}
1168

1169
#specialPopup
1170
{
1171
	position:absolute;
1172
	left:50%;
1173
	margin-left:-185px;
1174
	bottom:32px;
1175
	width:350px;
1176
	min-height:8px;
1177
	z-index:20000;
1178
	transition:bottom 0.2s ease-out,opacity 0.1s ease-out;
1179
	text-align:center;
1180
}
1181
#specialPopup.onScreen
1182
{
1183
	bottom:32px;
1184
	opacity:1;
1185
}
1186
#specialPopup.offScreen
1187
{
1188
	bottom:-32px;
1189
	pointer-events:none;
1190
	opacity:0;
1191
}
1192

1193
.separatorLeft, .separatorRight
1194
{
1195
	width:16px;
1196
	height:100%;
1197
	background:url(img/panelVertical.png?v=2) repeat-y;
1198
	background:url(img/panelGradientTop.png) no-repeat top left,url(img/panelGradientBottom.png) no-repeat bottom left,url(img/panelVertical.png?v=2) repeat-y;
1199
	position:absolute;
1200
	top:0px;
1201
	bottom:0px;
1202
	z-index:100;
1203
}
1204
.separatorLeft
1205
{
1206
	left:30%;
1207
}
1208
.separatorRight
1209
{
1210
	right:317px;
1211
}
1212
.separatorBottom
1213
{
1214
	width:100%;
1215
	height:16px;
1216
	background:url(img/panelHorizontal.png?v=2) repeat-x;
1217
	background:url(img/panelGradientLeft.png) no-repeat top left,url(img/panelGradientRight.png) no-repeat top right,url(img/panelHorizontal.png?v=2) repeat-x;
1218
	position:absolute;
1219
	left:0px;
1220
	bottom:0px;
1221
}
1222

1223
.button
1224
{
1225
	background:url(img/panelMenu3.png);
1226
	background-position:0px 0px;
1227
	position:absolute;
1228
	z-index:100;
1229
	width:100px;
1230
	height:48px;
1231
	text-align:center;
1232
	font-size:18px;
1233
	cursor:pointer;
1234
	
1235
	box-sizing:border-box;
1236
	padding-top:16px;
1237
	
1238
	color:#999;
1239
	text-shadow:0px 1px 0px #444,0px 0px 4px #000;
1240
}
1241
.button:hover,.button.selected
1242
{
1243
	z-index:1000;
1244
	color:#fff;
1245
	text-shadow:0px 1px 0px #999,0px 0px 4px #000;
1246
}
1247
#prefsButton{top:0px;left:0px;		padding-top:16px;		padding-right:2px;		background-position:0px 0px;}
1248
#statsButton{bottom:16px;left:0px;	padding-top:14px;		padding-right:2px;		background-position:0px -48px;}
1249
#logButton{top:0px;right:0px;		padding-top:16px;		padding-left:2px;		background-position:-100px 0px;}
1250
#legacyButton{bottom:16px;right:0px;padding-top:14px;		padding-left:2px;		background-position:-100px -48px;}
1251
#prefsButton:hover,#prefsButton.selected{					background-position:0px -96px;}
1252
#statsButton:hover,#statsButton.selected{					background-position:0px -144px;}
1253
#logButton:hover,#logButton.selected{						background-position:-100px -96px;}
1254
#legacyButton:hover,#legacyButton.selected{					background-position:-100px -144px;}
1255

1256
#logButton.hasUpdate
1257
{
1258
	color:#ffc;
1259
}
1260
#logButton.hasUpdate:before
1261
{
1262
	content:'';
1263
	display:block;
1264
	position:absolute;
1265
	left:-60px;
1266
	top:0px;
1267
	width:60px;
1268
	height:56px;
1269
	background:url(img/pointyLad.png);
1270
	animation:pointLadBump 0.5s infinite ease-in-out;
1271
}
1272
@keyframes pointLadBump{
1273
	0% {transform:translate(0px,0px);}
1274
	20% {transform:translate(-15px,0px);}
1275
	50% {transform:translate(-20px,0px);}
1276
	80% {transform:translate(-15px,0px);}
1277
	100% {transform:translate(0px,0px);}
1278
}
1279
#checkForUpdate
1280
{
1281
	display:none;
1282
	font-size:10px;
1283
	margin-top:-8px;
1284
	animation:checkForUpdateFlash 0.5s infinite ease-in-out;
1285
}
1286
@keyframes checkForUpdateFlash{
1287
	0% {color:#999;}
1288
	50% {color:#ffc;}
1289
	100% {color:#999;}
1290
}
1291
#logButton.hasUpdate #checkForUpdate {display:block;}
1292

1293

1294
.roundedPanel
1295
{
1296
	background:url(img/roundedPanelBGS.png) repeat-x 0px 0px;
1297
	position:relative;
1298
	padding:9px 0px;
1299
	height:20px;
1300
}
1301
.roundedPanel:before,.roundedPanel:after
1302
{
1303
	content:'';
1304
	display:block;height:36px;
1305
	position:absolute;top:0px;
1306
}
1307
.roundedPanel:before
1308
{
1309
	background:url(img/bracketPanelLeftS.png) no-repeat;left:-16px;width:16px;
1310
}
1311
.roundedPanel:after
1312
{
1313
	background:url(img/bracketPanelRightS.png) no-repeat;right:-18px;width:18px;
1314
}
1315
/*.roundedPanel
1316
{
1317
	background:url(img/roundedPanelBG.png) repeat-x 0px 0px;
1318
	position:relative;
1319
}
1320
.roundedPanel:before,.roundedPanel:after
1321
{
1322
	content:'';
1323
	display:block;width:17px;height:32px;
1324
	position:absolute;top:0px;
1325
}
1326
.roundedPanel:before
1327
{
1328
	background:url(img/roundedPanelLeft.png) no-repeat;left:-17px;
1329
}
1330
.roundedPanel:after
1331
{
1332
	background:url(img/roundedPanelRight.png) no-repeat;right:-17px;
1333
}*/
1334
#ascendNumber
1335
{
1336
	display:none;
1337
	position:absolute;
1338
	right:115px;
1339
	top:22px;
1340
	font-size:14px;
1341
	font-weight:bold;
1342
	font-family:Georgia;
1343
	color:#fff;
1344
	text-shadow:0px -1px 1px #09f,0px 1px 1px #f04;
1345
}
1346
#legacyButton:hover>#ascendNumber
1347
{text-shadow:0px -1px 1px #09f,0px 1px 1px #f04,0px -1px 1px #09f,0px 1px 1px #f04,0px 0px 4px #fff;}
1348

1349
#ascendTooltip
1350
{
1351
	display:none;
1352
	position:absolute;
1353
	right:0px;
1354
	top:52px;
1355
	font-family:Tahoma,Arial,sans serif;
1356
	font-size:11px;
1357
	width:220px;
1358
	padding:8px;
1359
	pointer-events:none;
1360
}
1361
#legacyButton:hover>#ascendTooltip
1362
{display:block;}
1363

1364
#lumps
1365
{
1366
	display:none;
1367
	position:absolute;
1368
	width:32px;
1369
	height:32px;
1370
	position:absolute;
1371
	z-index:10000;
1372
	left:-8px;
1373
	bottom:-12px;
1374
	z-index:10000;
1375
	cursor:pointer;
1376
	filter:drop-shadow(0px 3px 2px #000);
1377
	-webkit-filter:drop-shadow(0px 3px 2px #000);
1378
}
1379
#lumps:hover #lumpsIcon,#lumps:hover #lumpsIcon2
1380
{top:-10px;}
1381
#lumpsIcon,#lumpsIcon2
1382
{
1383
	width:48px;
1384
	height:48px;
1385
	position:absolute;
1386
	left:-8px;
1387
	top:-8px;
1388
	pointer-events:none;
1389
}
1390
#lumpsAmount
1391
{
1392
	font-size:12px;
1393
	color:#6cf;
1394
    position:absolute;
1395
    left:36px;
1396
    top:6px;
1397
	pointer-events:none;
1398
}
1399
.lumpsOn #lumps{display:block;}
1400

1401

1402
.lumpRefill
1403
{
1404
	cursor:pointer;
1405
	width:48px;
1406
	height:48px;
1407
	position:absolute;
1408
	left:0px;
1409
	top:0px;
1410
	transform:scale(0.5);
1411
	z-index:1000;
1412
	transition:transform 0.05s;
1413
}
1414
.lumpRefill:hover{transform:scale(1);}
1415
.lumpRefill:active{transform:scale(0.4);}
1416

1417

1418
.meterContainer
1419
{
1420
	background:rgba(0,0,0,0.5);
1421
	position:relative;
1422
	border-radius:2px;
1423
	height:8px;
1424
}
1425
.meter
1426
{
1427
	background:url(img/prestigeBar.jpg) 0px 0px;
1428
	position:absolute;
1429
	left:0px;
1430
	/*right:100%;*/
1431
	right:0px;
1432
	top:0px;
1433
	height:100%;
1434
	/*max-width:100%;*/
1435
	transform:translate(0px,0px);
1436
}
1437
.meter:after
1438
{
1439
	height:8px;
1440
	width:8px;
1441
	position:absolute;
1442
	right:-8px;
1443
	top:0px;
1444
	content:'';
1445
	display:block;
1446
	background:url(img/prestigeBarCap.png);
1447
}
1448
#ascendMeterContainer
1449
{
1450
	width:100px;
1451
	right:0px;
1452
	bottom:4px;
1453
	position:absolute;
1454
	overflow:hidden;
1455
}
1456
#ascendMeter
1457
{
1458
	/*right:100px;*/
1459
}
1460

1461
.meter.filling
1462
{
1463
-webkit-animation:fluidMotion 10s infinite linear;
1464
   -moz-animation:fluidMotion 10s infinite linear;
1465
        animation:fluidMotion 10s infinite linear;
1466
	/*-webkit-transition:right 0.5s linear;
1467
	-moz-transition:right 0.5s linear;
1468
	-ms-transition:right 0.5s linear;
1469
	-o-transition:right 0.5s linear;
1470
	transition:right 0.5s linear;*/
1471
}
1472
@-webkit-keyframes fluidMotion{
1473
from {background-position:0px -24px;}
1474
	to {background-position:-128px -24px;}
1475
}
1476
@-moz-keyframes fluidMotion{
1477
from {background-position:0px -24px;}
1478
	to {background-position:-128px -24px;}
1479
}
1480
@keyframes fluidMotion{
1481
from {background-position:0px -24px;}
1482
	to {background-position:-128px -24px;}
1483
}
1484

1485
#game.onMenu #menu{display:block;}
1486
#game.onMenu .row{visibility:hidden;display:none;}
1487
#menu
1488
{
1489
	display:none;
1490
	z-index:1;
1491
	position:absolute;
1492
	left:0px;
1493
	right:0px;
1494
	top:0px;
1495
	bottom:0px;
1496
	/*box-shadow:0px 0px 24px #000 inset;
1497
	background:#000 url(img/darkNoise.jpg);*/
1498
}
1499

1500
#comments
1501
{
1502
	padding:16px;
1503
	text-align:center;
1504
	position:relative;
1505
	padding-bottom:32px;
1506
	font-size:16px;
1507
	height:64px;
1508
	background:url(img/shadedBorders.png);
1509
	background-size:100% 96px;
1510
	/*overflow:hidden;*/
1511
}
1512
.commentsText
1513
{
1514
	padding:16px 0px;
1515
	position:absolute;
1516
	top:0px;
1517
	left:108px;
1518
	right:108px;
1519
	opacity:1;
1520
	text-align:center;
1521
}
1522
.commentsText q
1523
{
1524
	font-style:italic;
1525
}
1526
.commentsText sig
1527
{
1528
	font-size:70%;
1529
	display:block;
1530
	text-align:center;
1531
	opacity:0.7;
1532
}
1533
.commentsText sig:before
1534
{
1535
	content:"-";
1536
	padding-left:64px;
1537
}
1538
.fortune
1539
{
1540
	color:#ade000;
1541
	cursor:pointer;
1542
}
1543
.fortune:hover
1544
{
1545
	color:#d2ff00;
1546
	text-shadow:0px 0px 4px #ade000;
1547
}
1548

1549
#commentsText
1550
{
1551
	z-index:20;
1552
}
1553
#commentsTextBelow
1554
{
1555
	z-index:10;
1556
}
1557

1558
/* let me tell you about vendor prefixes */
1559
.risingAway{
1560
-webkit-animation:riseAway 1s 1 forwards;
1561
   -moz-animation:riseAway 1s 1 forwards;
1562
        animation:riseAway 1s 1 forwards;
1563
}
1564
.risingUp{
1565
-webkit-animation:riseUp 1s 1 forwards;
1566
   -moz-animation:riseUp 1s 1 forwards;
1567
        animation:riseUp 1s 1 forwards;
1568
}
1569
.risingUpLinger{
1570
-webkit-animation:riseUpLinger 4s 1 forwards ease-out;
1571
   -moz-animation:riseUpLinger 4s 1 forwards ease-out;
1572
        animation:riseUpLinger 4s 1 forwards ease-out;
1573
}
1574
@-webkit-keyframes riseAway{
1575
from {top:0px;opacity:1;}
1576
	to {top:-20px;opacity:0;}
1577
}
1578
@-webkit-keyframes riseUp{
1579
from {top:20px;opacity:0;}
1580
	to {top:0px;opacity:1;}
1581
}
1582
@-webkit-keyframes riseUpLinger{
1583
0% {transform:translate(0px,0px);opacity:0;}
1584
1% {transform:translate(0px,0px);opacity:1;}
1585
20% {transform:translate(0px,-32px);opacity:1;}
1586
100% {transform:translate(0px,-32px);opacity:0;}
1587
}
1588
@-moz-keyframes riseAway{
1589
from {top:0px;opacity:1;}
1590
	to {top:-20px;opacity:0;}
1591
}
1592
@-moz-keyframes riseUp{
1593
from {top:20px;opacity:0;}
1594
	to {top:0px;opacity:1;}
1595
}
1596
@-moz-keyframes riseUpLinger{
1597
0% {transform:translate(0px,0px);opacity:0;}
1598
1% {transform:translate(0px,0px);opacity:1;}
1599
20% {transform:translate(0px,-32px);opacity:1;}
1600
100% {transform:translate(0px,-32px);opacity:0;}
1601
}
1602
@keyframes riseAway{
1603
from {top:0px;opacity:1;}
1604
	to {top:-20px;opacity:0;}
1605
}
1606
@keyframes riseUp{
1607
from {top:20px;opacity:0;}
1608
	to {top:0px;opacity:1;}
1609
}
1610
@keyframes riseUpLinger{
1611
0% {transform:translate(0px,0px);opacity:0;}
1612
2% {transform:translate(0px,0px);opacity:1;}
1613
20% {transform:translate(0px,-32px);opacity:1;}
1614
75% {transform:translate(0px,-32px);opacity:1;}
1615
100% {transform:translate(0px,-32px);opacity:0;}
1616
}
1617

1618

1619
@keyframes wobble
1620
{
1621
	0% {transform:scale(0.5,0.5);}
1622
	20% {transform:scale(1.3,0.7);}
1623
	30% {transform:scale(0.7,1.3);}
1624
	50% {transform:scale(1.2,0.8);}
1625
	70% {transform:scale(0.9,1.1);}
1626
	90% {transform:scale(1.1,0.9);}
1627
	100% {transform:scale(1,1);}
1628
}
1629

1630
@keyframes bounce
1631
{
1632
	/* weeeeee */
1633
	0% 		{transform-origin:50% 100%;transform:scale(1,1);}
1634
	10% 	{transform-origin:50% 100%;transform:scale(0.9,1.2);}
1635
	20% 	{transform-origin:50% 100%;transform:scale(1.5,0.5);}
1636
	25% 	{transform-origin:50% 100%;transform:scale(0.75,1.5) translate(0px,-10px);}
1637
	30% 	{transform-origin:50% 100%;transform:scale(0.8,1.2) translate(0px,-20px);}
1638
	60% 	{transform-origin:50% 100%;transform:scale(1,1) translate(0px,-25px);}
1639
	70% 	{transform-origin:50% 100%;transform:scale(2,0.5);}
1640
	80% 	{transform-origin:50% 100%;transform:scale(0.8,1.2);}
1641
	90% 	{transform-origin:50% 100%;transform:scale(1,1);}
1642
	100% 	{transform-origin:50% 100%;transform:scale(1,1);}
1643
}
1644

1645

1646
.comeLeft{animation:comeLeft 0.2s ease-out;}
1647
@keyframes comeLeft
1648
{
1649
	0% {transform:translate(-16px,0px);opacity:0;}
1650
	100% {transform:translate(0px,0px);opacity:1;}
1651
}
1652

1653
.pucker{animation:pucker 0.2s ease-out;}
1654
@keyframes pucker
1655
{
1656
	0% {transform:scale(1,1);}
1657
	10% {transform:scale(1.15,0.85);}
1658
	20% {transform:scale(1.2,0.8);}
1659
	50% {transform:scale(0.75,1.25);}
1660
	70% {transform:scale(1.05,0.95);}
1661
	90% {transform:scale(0.95,1.05);}
1662
	100% {transform:scale(1,1);}
1663
}
1664
.puckerHalf{animation:puckerHalf 0.2s ease-out;}
1665
@keyframes puckerHalf
1666
{
1667
	0% {transform:scale(0.5,0.5);}
1668
	10% {transform:scale(0.575,0.425);}
1669
	20% {transform:scale(0.6,0.4);}
1670
	50% {transform:scale(0.375,0.625);}
1671
	70% {transform:scale(0.525,0.475);}
1672
	90% {transform:scale(0.475,0.525);}
1673
	100% {transform:scale(0.5,0.5);}
1674
}
1675

1676
.flashRed{animation:flashRed 0.2s ease-out;}
1677
@keyframes flashRed
1678
{
1679
	0% 		{background:#f00;}
1680
	100% 	{}
1681
}
1682
.punchDown{animation:punchDown 0.3s ease-out;}
1683
@keyframes punchDown
1684
{
1685
	0% 		{transform:translate(0px,0px);}
1686
	20% 		{transform:translate(0px,4px);}
1687
	100% 		{transform:translate(0px,0px);}
1688
}
1689
.punchUp{animation:punchUp 0.3s ease-out;}
1690
@keyframes punchUp
1691
{
1692
	0% 		{transform:translate(0px,0px);}
1693
	20% 		{transform:translate(0px,-4px);}
1694
	100% 		{transform:translate(0px,0px);}
1695
}
1696

1697
#buildingsMaster
1698
{
1699
	min-height:24px;
1700
	background:#999;
1701
	background:url(img/darkNoise.jpg);
1702
	box-shadow:0px 0px 4px #000 inset;
1703
	position:relative;
1704
	text-align:center;
1705
	color:#fff;
1706
	font-size:12px;
1707
	font-weight:bold;
1708
	font-variant:small-caps;
1709
	text-shadow:0px 1px 0px #000;
1710
	margin-bottom:8px;
1711
	display:none;
1712
}
1713
.extraButtons #buildingsMaster{display:block;}
1714
#game.onMenu #buildingsMaster{display:none;}
1715

1716
.row
1717
{
1718
	position:relative;
1719
	padding-bottom:16px;
1720
	display:none;
1721
	/*overflow:hidden;*/
1722
}
1723
.row.enabled{display:block;}
1724
.row .rowCanvas
1725
{
1726
	width:100%;
1727
	height:128px;
1728
	/*overflow-x:scroll;
1729
	overflow-y:hidden;*/
1730
	background:#000;
1731
	display:block;
1732
}
1733
.row .rowSpecial
1734
{
1735
	min-height:24px;
1736
	z-index:100;
1737
	width:100%;
1738
	top:0px;
1739
	left:0px;
1740
	background:#000 url(img/mapBG.jpg) fixed;
1741
	display:none;
1742
}
1743
.row.onMinigame .rowCanvas{display:none;}
1744
.row.onMinigame .rowSpecial{display:block;}
1745
/*.row.muted .rowCanvas,.row.muted .rowSpecial{display:none;}*/
1746
/*.row.muted .separatorBottom{background:rgba(0,0,0,0.75);box-shadow:1px 1px 0px rgba(255,255,255,0.1) inset,-1px -1px 0px rgba(0,0,0,0.5) inset;}*/
1747
.row.muted{display:none;}
1748

1749
.row .info, #sectionLeft .info
1750
{
1751
	display:none;
1752
	/*visibility:hidden;*/
1753
	-webkit-transition: opacity 0.1s ease-out;
1754
	-moz-transition: opacity 0.1s ease-out;
1755
	-ms-transition: opacity 0.1s ease-out;
1756
	-o-transition: opacity 0.1s ease-out;
1757
	transition: opacity 0.1s ease-out;
1758
	opacity:0;
1759
}
1760
.row .info, #sectionLeft .info
1761
{
1762
	position:absolute;
1763
	top:0px;
1764
	left:0px;
1765
	height:112px;
1766
	padding:8px;
1767
	font-size:12px;
1768
	line-height:125%;
1769
	background:url(img/infoBG.png);
1770
	color:#666;
1771
	z-index:100000;
1772
}
1773
.row .info:after
1774
{
1775
	width:16px;
1776
	height:128px;
1777
	position:absolute;
1778
	right:-16px;
1779
	top:0px;
1780
	background:url(img/infoBGfade.png) repeat-y;
1781
	display:block;
1782
	content:'';
1783
}
1784
#sectionLeft .info
1785
{
1786
	border-radius:16px;
1787
	padding:24px 8px 8px 24px;
1788
	left:-16px;
1789
	top:-16px;
1790
	height:auto;
1791
}
1792
.row:hover .info, #sectionLeft:hover .info
1793
{
1794
	opacity:1;
1795
}
1796
.row .object
1797
{
1798
	position:absolute;
1799
	width:64px;
1800
	height:64px;
1801
}
1802
#sectionLeftInfo
1803
{
1804
	position:absolute;
1805
	left:0px;
1806
	top:0px;
1807
	width:100%;
1808
}
1809

1810
.zoneTitle
1811
{
1812
	text-align:center;
1813
	padding:8px;
1814
	width:100%;
1815
}
1816
#store
1817
{
1818
	position:relative;
1819
}
1820
#store:after
1821
{
1822
	display:block;
1823
	height:64px;
1824
	background:url(img/blackGradientSmallTop.png) repeat-x top;
1825
	content:'';
1826
	pointer-events:none;
1827
	position:absolute;
1828
	left:0px;
1829
	right:0px;
1830
	bottom:-64px;
1831
}
1832
#storeTitle
1833
{
1834
	width:284px;
1835
	background:url(img/blackGradientSmallTop.png) repeat-x top;
1836
}
1837
#buildingsTitle
1838
{
1839
	display:none;
1840
}
1841
.storeSection
1842
{
1843
	height:60px;
1844
	width:300px;
1845
	position:relative;
1846
	overflow-y:hidden;
1847
	background:url(img/panelHorizontal.png?v=2) repeat-x top;
1848
	background:url(img/panelGradientLeft.png) no-repeat top left,url(img/panelGradientRight.png) no-repeat top right,url(img/panelHorizontal.png?v=2) repeat-x;
1849
	padding-top:16px;
1850
}
1851
.storeSection:hover
1852
{
1853
	height:auto;
1854
	min-height:60px;
1855
}
1856
.storeSection:hover:before
1857
{
1858
	display:block;
1859
}
1860
.storeSection:before,.storeSectionAddon
1861
{
1862
	z-index:1000;
1863
	text-shadow:0px 1px 1px #360e00,0px -1px 1px #360e00,1px 0px 1px #360e00,-1px 0px 1px #360e00;
1864
	font-weight:bold;
1865
	color:#f6dab8;
1866
	opacity:1;
1867
	font-variant:small-caps;
1868
}
1869
.storeSection:before
1870
{
1871
	display:none;
1872
	position:absolute;
1873
	content:'';
1874
	left:2px;
1875
	top:0px;
1876
	pointer-events:none;
1877
}
1878
.storeSectionAddon
1879
{
1880
	position:relative;
1881
	line-height:0%;
1882
	text-align:right;
1883
	top:6px;
1884
	right:4px;
1885
}
1886

1887
.trophy
1888
{
1889
	width:48px;height:48px;margin:2px;float:left;
1890
	cursor:pointer;
1891
	filter:drop-shadow(0px 3px 2px #000);
1892
	-webkit-filter:drop-shadow(0px 3px 2px #000);
1893
	position:relative;
1894
}
1895
.trophy:hover
1896
{
1897
	top:-1px;
1898
	/*filter:brightness(125%) drop-shadow(0px 3px 2px #000);
1899
	-webkit-filter:brightness(125%) drop-shadow(0px 3px 2px #000);*/
1900
}
1901

1902
.tag
1903
{
1904
	display:inline-block;
1905
	font-family:Arial;
1906
	font-size:10px;
1907
}
1908

1909
#toggleBox
1910
{
1911
	position:absolute;
1912
	right:318px;
1913
	top:56px;
1914
	width:300px;
1915
	min-height:60px;
1916
	display:none;
1917
	z-index:50000000;
1918
	text-align:center;
1919
}
1920

1921
#upgrades:before{content:'Upgrades';}
1922
#toggleUpgrades:before{content:'Switches';}
1923
#techUpgrades:before{content:'Research';}
1924
/*#vaultUpgrades{height:0px;}*/
1925
/*#vaultUpgrades:hover{height:auto;min-height:60px;}*/
1926
#vaultUpgrades .crate{opacity:0.5;}
1927
#vaultUpgrades .crate{transform:scale(0.5);margin:-9px;}
1928
#vaultUpgrades{height:30px;}
1929
#vaultUpgrades:hover{height:auto;min-height:30px;}
1930
#vaultUpgrades:before{content:'Vault';}
1931
#products:before{content:'Buildings';}
1932
#upgrades
1933
{
1934
}
1935
#upgrades.hasMenu
1936
{
1937
	min-height:82px;
1938
}
1939
#products
1940
{
1941
	height:auto;
1942
	min-height:60px;
1943
}
1944
.crate
1945
{
1946
	width:48px;
1947
	height:48px;
1948
	margin:6px;
1949
	display:inline-block;
1950
	cursor:pointer;
1951
	/*opacity:0.6;*/
1952
	position:relative;
1953
	/*background:#000;*/
1954
	background:rgba(0,0,0,0.25);
1955
	float:left;
1956
}
1957
.crate:before
1958
{
1959
	content:'';
1960
	position:absolute;
1961
	left:-6px;
1962
	top:-6px;
1963
	width:60px;
1964
	height:60px;
1965
	display:block;
1966
	background:url(img/upgradeFrame.png?v=2);
1967
	background-position:0px 0px;
1968
	z-index:10;
1969
}
1970

1971
.crate.noFrame {background-color:transparent!important;margin:2px;}
1972
.crate.noFrame:before {background:transparent;}
1973
.crate.noFrame {opacity:0.3;}
1974
.crate.noFrame.enabled ,.crate.noFrame:hover {opacity:1;}
1975

1976

1977
.crate:before{background-position:120px 0px;}
1978
.crate.enabled:before{background-position:0px 0px;}
1979
.crate.enabled:hover:before,.crate.highlighted:before{background-position:60px 0px;}
1980
/*.crate.enabled:hover:after,.crate.highlighted:after
1981
{
1982
	content:'';
1983
	position:absolute;
1984
	left:-24px;
1985
	top:-24px;
1986
	width:96px;
1987
	height:96px;
1988
	display:block;
1989
	//background:url(img/upgradeHighlight.png);
1990
	background:url(img/upgradeHighlight.jpg);
1991
	mix-blend-mode:screen;
1992
	z-index:100;
1993
	pointer-events:none;
1994
}*/
1995
.crate.shadow:before{background-position:120px 60px;}
1996
.crate.shadow.enabled:before{background-position:0px 60px;}
1997
.crate.shadow.enabled:hover:before{background-position:60px 60px;}
1998

1999
.selectorCorner
2000
{
2001
	position:absolute;
2002
	left:-6px;
2003
	bottom:-6px;
2004
	width:12px;
2005
	height:12px;
2006
	display:block;
2007
	background:url(img/upgradeSelector.png);
2008
	z-index:20;
2009
}
2010

2011
.crate:hover:before
2012
{
2013
	z-index:20;
2014
}
2015

2016
.pieTimer
2017
{
2018
	position:absolute;
2019
	left:0px;
2020
	top:0px;
2021
	width:48px;
2022
	height:48px;
2023
	background:url(img/pieFill.png);
2024
	/*background-size:864px 384px;*/
2025
	/*background-size:864px 384px;*/
2026
	z-index:1000;
2027
	opacity:0.5;
2028
}
2029

2030
.crate.heavenly{opacity:0.8;}
2031
.crate.heavenly:before
2032
{
2033
	left:-20px;
2034
	top:-20px;
2035
	width:88px;
2036
	height:88px;
2037
	background-image:url(img/ascendSlot.png);
2038
	background-position:88px 0px;
2039
}
2040
/*.crate.heavenly:after
2041
{
2042
	content:'';
2043
	position:absolute;
2044
	left:-6px;
2045
	top:-6px;
2046
	width:60px;
2047
	height:60px;
2048
	display:block;
2049
	background:#f00;
2050
	border-radius:30px;
2051
	z-index:-10;
2052
}*/
2053
#menu .crate.heavenly {margin:12px;}
2054
/*#menu .crate.heavenly:nth-child(even) {margin-top:16px;margin-bottom:8px;}
2055
#menu .crate.heavenly:nth-child(3n) {margin-right:16px;margin-left:8px;}*/
2056
.crate.heavenly,.crate.heavenly:hover{background-color:transparent;}
2057
.icon
2058
{
2059
	width:48px;
2060
	height:48px;
2061
	display:inline-block;
2062
	margin:0px 4px;
2063
}
2064
.icon,.crate,.usesIcon
2065
{
2066
	/*background-image:url(img/icons.png?v=20);*/
2067
}
2068
.icon,.crate,.shadowFilter
2069
{
2070
	filter:drop-shadow(0px 3px 2px #000);
2071
	-webkit-filter:drop-shadow(0px 3px 2px #000);
2072
}
2073

2074
/*filter the whole list rather than filtering each individual crate*/
2075
.crateBox .crate,.upgradeBox .crate
2076
{
2077
	filter:none;
2078
	-webkit-filter:none;
2079
}
2080
.crateBox,.upgradeBox
2081
{
2082
	filter:drop-shadow(0px 3px 2px #000);
2083
	-webkit-filter:drop-shadow(0px 3px 2px #000);
2084
}
2085
.listing.crateBox
2086
{
2087
	overflow-y:hidden;
2088
	padding-bottom:12px;
2089
	margin-bottom:-12px;
2090
}
2091

2092
.achievement
2093
{
2094
	/*opacity:0.4;*/
2095
}
2096
.crate.enabled
2097
{
2098
	opacity:1;
2099
}
2100
.crate.heavenly.enabled:before
2101
{
2102
	/*background-position:0px -60px;*/
2103
	background-position:0px 0px;
2104
}
2105
.crate.heavenly:hover:before
2106
{
2107
	background-position:-88px 0px;
2108
}
2109
.crate:hover,.crate.highlighted
2110
{
2111
	/*background-color:#200e0a;*/
2112
	opacity:1;
2113
	top:-1px;
2114
	
2115
	/* for some reason having a filter update on hover makes the cursor confused about which icon it's hovering */
2116
	/*filter:brightness(115%);
2117
	-webkit-filter:brightness(115%);*/
2118
}
2119
.crate.heavenly
2120
{
2121
	transition:left 0.2s ease-out,top 0.2s ease-out;
2122
	z-index:10;
2123
}
2124
.crate.ghosted
2125
{
2126
	background:transparent;
2127
	opacity:0.2;
2128
}
2129
.parentLink
2130
{
2131
	/*background:url(img/linkPulse.png);*/
2132
	background:url(img/linkPulse.gif);
2133
	width:0px;
2134
	height:8px;
2135
	position:absolute;
2136
	-ms-transform-origin:0% 50%;
2137
	-webkit-transform-origin:0% 50%;
2138
	transform-origin:0% 50%;
2139
	opacity:0.5;
2140
	z-index:-10;
2141
	/*
2142
-webkit-animation:parentLinkPulse 1s infinite linear;
2143
   -moz-animation:parentLinkPulse 1s infinite linear;
2144
        animation:parentLinkPulse 1s infinite linear;
2145
	*/
2146
}
2147
@-webkit-keyframes parentLinkPulse{
2148
from {background-position:0px 0px;}
2149
	to {background-position:32px 0px;}
2150
}
2151
@-moz-keyframes parentLinkPulse{
2152
from {background-position:0px 0px;}
2153
	to {background-position:32px 0px;}
2154
}
2155
@keyframes parentLinkPulse{
2156
from {background-position:0px 0px;}
2157
	to {background-position:32px 0px;}
2158
}
2159

2160
.product
2161
{
2162
	width:300px;
2163
	height:64px;
2164
	cursor:pointer;
2165
	opacity:0.6;
2166
	background:url(img/storeTile.jpg);
2167
	position:relative;
2168
	-webkit-transition: opacity 0.25s ease-out, margin-bottom 0.1s ease-out;
2169
	-moz-transition: opacity 0.25s ease-out, margin-bottom 0.1s ease-out;
2170
	-ms-transition: opacity 0.25s ease-out, margin-bottom 0.1s ease-out;
2171
	-o-transition: opacity 0.25s ease-out, margin-bottom 0.1s ease-out;
2172
	transition: opacity 0.25s ease-out, margin-bottom 0.1s ease-out;
2173
}
2174
.product:after
2175
{
2176
	content:'';
2177
	display:block;
2178
	position:absolute;
2179
	left:0px;top:0px;right:0px;bottom:0px;
2180
	z-index:100;
2181
}
2182
.product:nth-child(4n-3) {background-position:0px 64px;}
2183
.product:nth-child(4n-2) {background-position:0px 128px;}
2184
.product:nth-child(4n-1) {background-position:0px 192px;}
2185
.product:hover
2186
{
2187
	box-shadow:0px 0px 16px #fff inset,0px 0px 1px #000;
2188
	z-index:20;
2189
	filter:brightness(115%);
2190
	-webkit-filter:brightness(115%);
2191
}
2192
.product.enabled:active
2193
{
2194
	box-shadow:0px 0px 16px #000 inset;
2195
}
2196
.product.unlocked.enabled
2197
{
2198
	opacity:1;
2199
}
2200
.product.toggledOff
2201
{
2202
	opacity:0;
2203
}
2204
.product .icon
2205
{
2206
	width:64px;
2207
	height:64px;
2208
	position:absolute;
2209
	left:0px;
2210
	top:0px;
2211
	background:url(img/buildings.png?v=4);
2212
	background-repeat:no-repeat;
2213
	margin:0px;
2214
}
2215
.product .content
2216
{
2217
	display:inline-block;
2218
	position:absolute;
2219
	left:64px;
2220
	top:6px;
2221
	right:0px;
2222
	bottom:6px;
2223
	padding:4px;
2224
	text-shadow:0px 0px 6px #000,0px 1px 1px #000;
2225
}
2226
.tinyProductIcon
2227
{
2228
	width:64px;
2229
	height:64px;
2230
	left:0px;
2231
	top:0px;
2232
	background:url(img/buildings.png?v=4);
2233
	background-repeat:no-repeat;
2234
	margin:-16px;
2235
	transform:scale(0.5);
2236
	display:inline-block;
2237
	border-radius:32px;
2238
}
2239
#buildingsMaster .tinyProductIcon
2240
{
2241
	cursor:pointer;
2242
	opacity:0.8;
2243
}
2244
#buildingsMaster .tinyProductIcon:hover
2245
{
2246
	opacity:1;
2247
}
2248

2249

2250
.product .content .owned
2251
{
2252
	position:absolute;
2253
	right:8px;
2254
	bottom:5px;
2255
	font-size:40px;
2256
	opacity:0.2;
2257
	color:#000;
2258
	text-shadow:0px 0px 8px #fff;
2259
	letter-spacing:-2.5px;
2260
}
2261
.product .icon
2262
{
2263
	opacity:0;
2264
}
2265
.product.unlocked .icon
2266
{
2267
	opacity:1;
2268
}
2269
.product .icon.off
2270
{
2271
	z-index:100;
2272
	opacity:1;
2273
	background:url(img/buildings.png?v=4);
2274
	background-repeat:no-repeat;
2275
	-webkit-transition: opacity 2s ease-out;
2276
	-moz-transition: opacity 2s ease-out;
2277
	-ms-transition: opacity 2s ease-out;
2278
	-o-transition: opacity 2s ease-out;
2279
	transition: opacity 2s ease-out;
2280
}
2281
.product.unlocked .icon.off
2282
{
2283
	opacity:0;
2284
}
2285
.product.locked .title {display:none;}
2286
.product .lockedTitle {display:none;}
2287
.product.locked .lockedTitle {display:block;}
2288

2289
.selling .product
2290
{
2291
	box-shadow:0px 0px 16px #c00 inset;
2292
}
2293
.selling .product:hover
2294
{
2295
	box-shadow:0px 0px 16px #f66 inset,0px 0px 1px #000;
2296
}
2297
.selling .product.enabled:active
2298
{
2299
	box-shadow:0px 0px 16px #f99 inset;
2300
}
2301

2302
.productButtons
2303
{
2304
	position:absolute;
2305
	right:-1px;
2306
	bottom:0px;
2307
	overflow:hidden;
2308
	z-index:10;
2309
}
2310
.productButton
2311
{
2312
	background:rgba(0,0,0,0.25);
2313
	box-shadow:-1px -1px 0px rgba(255,255,255,0.25),0px 0px 1px 1px rgba(0,0,0,0.5) inset;
2314
	border-top-left-radius:4px;
2315
	border-top-right-radius:4px;
2316
	padding:4px 8px;
2317
	font-size:11px;
2318
	font-weight:bold;
2319
	color:#ccc;
2320
	text-shadow:1px 1px 0px #000,-1px 1px 0px #000,1px -1px 0px #000,-1px -1px 0px #000;
2321
	cursor:pointer;
2322
	float:right;
2323
	position:relative;
2324
	margin-left:2px;
2325
	margin-top:2px;
2326
	min-height:11px;
2327
}
2328
.productLevel
2329
{
2330
	border-top-right-radius:0px;
2331
}
2332
.productButton:hover
2333
{
2334
	background:rgba(0,0,0,0.5);
2335
	color:#fff;
2336
}
2337
.productLevel
2338
{
2339
	width:65px;
2340
}
2341
.productLevel:after
2342
{
2343
	content:'';
2344
	display:block;
2345
	position:absolute;
2346
	right:8px;
2347
	bottom:0px;
2348
	background:url(img/levelUp.png);
2349
	width:33px;
2350
	height:19px;
2351
	opacity:0.75;
2352
}
2353
.productLevel:hover:after
2354
{
2355
	opacity:1;
2356
}
2357
.productButton.on{background:rgba(255,255,255,0.75);}
2358
.productMute{display:none;}
2359
.extraButtons .productMute{display:inline-block;}
2360

2361

2362
.lumpsOnly{display:none;}
2363
.lumpsOn .lumpsOnly{display:block;}
2364

2365
.storePre
2366
{
2367
	background:#999;
2368
	background:url(img/darkNoise.jpg);
2369
	box-shadow:0px 0px 4px #000 inset;
2370
	width:300px;
2371
	padding:4px 0px;
2372
	position:relative;
2373
	text-align:center;
2374
	font-variant:small-caps;
2375
	color:#fff;
2376
	font-weight:bold;
2377
	font-size:14px;
2378
	text-shadow:0px 1px 0px #000;
2379
}
2380
.storePreButton
2381
{
2382
	opacity:0.5;
2383
	cursor:pointer;
2384
}
2385
.storePreButton:hover,.storePreButton.selected
2386
{
2387
	text-shadow:0px 1px 0px #000,0px 0px 1px #fff,0px 0px 4px #fff;
2388
	opacity:1;
2389
}
2390
#storeBulk
2391
{
2392
	width:240px;
2393
	padding:0px;
2394
	padding-left:60px;
2395
	height:32px;
2396
	overflow:hidden;
2397
}
2398
.storeBulkMode,.storeBulkAmount
2399
{
2400
	float:left;
2401
}
2402
.storeBulkMode:hover,.storeBulkAmount:hover,.storeBulkMode.selected,.storeBulkAmount.selected
2403
{
2404
}
2405
.storeBulkMode
2406
{width:60px;padding:1px 0px;}
2407
#storeBulkBuy
2408
{position:absolute;left:0px;top:0px;}
2409
#storeBulkSell
2410
{position:absolute;left:0px;bottom:1px;}
2411
.storeBulkAmount
2412
{width:60px;padding:9px 0px;}
2413

2414
#buffs
2415
{
2416
	position:absolute;
2417
	top:0px;
2418
	right:0px;
2419
	z-index:100000;
2420
	transform-origin:100% 0%;
2421
	transform:scale(0.75);
2422
}
2423
.buff
2424
{
2425
	margin:12px;
2426
}
2427

2428
#shimmers
2429
{
2430
	position:absolute;
2431
	left:0px;
2432
	top:0px;
2433
	z-index:10000000000;
2434
	filter:drop-shadow(0px 4px 4px rgba(0,0,0,0.75));
2435
	-webkit-filter:drop-shadow(0px 4px 4px rgba(0,0,0,0.75));
2436
}
2437
.shimmer
2438
{
2439
	cursor:pointer;
2440
	position:absolute;
2441
	z-index:10000000000;
2442
	display:none;
2443
}
2444
.shimmer:hover
2445
{
2446
	filter:brightness(125%) drop-shadow(0px 0px 3px rgba(255,255,255,1));
2447
	-webkit-filter:brightness(125%) drop-shadow(0px 0px 3px rgba(255,255,255,1));
2448
}
2449

2450
.goldenCookie,.seasonPopup
2451
{
2452
	cursor:pointer;
2453
	position:absolute;
2454
	z-index:10000000000;
2455
	display:none;
2456
	filter:drop-shadow(0px 4px 4px rgba(0,0,0,0.75));
2457
	-webkit-filter:drop-shadow(0px 4px 4px rgba(0,0,0,0.75));
2458
}
2459

2460
.goldenCookie
2461
{
2462
	width:96px;
2463
	height:96px;
2464
	background:url(img/goldCookie.png);
2465
}
2466

2467
.seasonPopup
2468
{
2469
	width:256px;
2470
	height:256px;
2471
	background:url(img/goldCookie.png) center center no-repeat;
2472
}
2473
.goldenCookie:hover,.seasonPopup:hover
2474
{
2475
	filter:brightness(125%) drop-shadow(0px 3px 4px rgba(0,0,0,0.5));
2476
	-webkit-filter:brightness(125%) drop-shadow(0px 3px 4px rgba(0,0,0,0.5));
2477
}
2478

2479
.sparkles
2480
{
2481
	width:128px;
2482
	height:128px;
2483
	background:url(img/sparkles.jpg);
2484
	position:absolute;
2485
	z-index:10000000000;
2486
	display:none;
2487
	left:0px;
2488
	top:0px;
2489
	mix-blend-mode:screen;
2490
	pointer-events:none;
2491
}
2492

2493
#darken
2494
{
2495
	position:absolute;
2496
	left:0px;
2497
	top:0px;
2498
	right:0px;
2499
	bottom:0px;
2500
	background:rgba(0,0,0,0.5);
2501
	z-index:100000000;
2502
	display:none;
2503
}
2504

2505
#promptAnchor
2506
{
2507
	position:absolute;
2508
	left:50%;
2509
	top:125px;
2510
	z-index:1000000000;
2511
	display:none;
2512
	width:0px;
2513
	height:0px;
2514
}
2515
#prompt
2516
{
2517
	position:relative;
2518
	overflow:hidden;
2519
	width:250px;
2520
	padding:16px;
2521
	margin-left:-18px;
2522
	left:-125px;
2523
	text-align:center;
2524
}
2525
#promptContent{margin-top:-8px;}
2526
#promptContent h3{margin-bottom:6px;}
2527
#prompt h3,.prompt h3,h4,.fancyText
2528
{
2529
	text-align:center;
2530
	font-weight:bold;
2531
	font-size:14px;
2532
	position:relative;
2533
	font-variant:small-caps;
2534
	display:inline-block;
2535
}
2536
#prompt h3,.prompt h3,.fancyText
2537
{
2538
	color:#ece2b6;
2539
	text-shadow:0px 1px 0px #733726,0px 2px 0px #875626,0px 2px 1px #000,0px 2px 3px #000;
2540
	font-family:Georgia,serif;
2541
	font-size:15px;
2542
}
2543
.large .fancyText{font-size:20px;}
2544
#prompt h3:before,#prompt h3:after,.prompt h3:before,.prompt h3:after
2545
{
2546
	content:'';
2547
	display:block;
2548
	width:39px;
2549
	height:23px;
2550
	position:absolute;
2551
	top:-4px;
2552
}
2553
#prompt h3:before,.prompt h3:before
2554
{
2555
	background:url(img/featherLeft.png) no-repeat;
2556
	left:-39px;
2557
}
2558
#prompt h3:after,.prompt h3:after
2559
{
2560
	background:url(img/featherRight.png) no-repeat;
2561
	right:-39px;
2562
}
2563
#prompt textarea,#prompt input
2564
{
2565
	width:100%;
2566
	margin:0px;
2567
	position:relative;
2568
	left:-3px;
2569
}
2570

2571
#prompt.widePrompt
2572
{
2573
	width:500px;
2574
	left:-250px;
2575
}
2576

2577
#prompt.legacyPrompt
2578
{
2579
	width:400px;
2580
	left:-200px;
2581
}
2582

2583
#notes
2584
{
2585
	position:absolute;
2586
	/*left:0px;
2587
	bottom:128px;*/
2588
	left:50%;
2589
	margin-left:-125px;
2590
	bottom:0px;
2591
	z-index:100000000;
2592
}
2593
#notes .remaining {padding:3px;opacity:0.75;text-shadow:0px 0px 2px #000,0px 1px 0px #000;}
2594
.note
2595
{
2596
	position:relative;
2597
	overflow-y:hidden;
2598
	width:250px;
2599
	padding-right:16px;
2600
	padding-bottom:8px;
2601
	left:-18px;
2602
}
2603
.note .icon
2604
{
2605
	float:left;
2606
	margin-left:-4px;
2607
}
2608
.note h3
2609
{
2610
	font-weight:bold;
2611
	font-size:14px;
2612
	/*overflow-y:hidden;*/
2613
}
2614
.note h5
2615
{
2616
	opacity:0.6;
2617
	font-size:12px;
2618
}
2619
.note.haspic h3
2620
{
2621
	margin-top:4px;
2622
}
2623
.note.hasdesc h3
2624
{
2625
	/*border-bottom:1px solid rgba(255,255,255,0.5);
2626
	padding-bottom:2px;*/
2627
}
2628
.note.nodesc h3
2629
{
2630
	text-align:center;
2631
}
2632

2633
p
2634
{
2635
	text-indent:6px;
2636
	padding:2px 0px;
2637
}
2638

2639

2640
#sectionMiddle,#sectionRight,#cookies,#bakeryNameAnchor,#backgroundCanvas,.separatorRight,.separatorLeft
2641
{transition:opacity 1s;}
2642
.ascendIntro #sectionMiddle,.ascendIntro #sectionRight,.ascendIntro #cookies,.ascendIntro #bakeryNameAnchor,.ascendIntro #backgroundCanvas,.ascendIntro .separatorRight,.ascendIntro .separatorLeft,.reincarnating #sectionMiddle,.reincarnating #sectionRight,.reincarnating #cookies,.reincarnating #bakeryNameAnchor,.reincarnating #backgroundCanvas,.reincarnating .separatorRight,.reincarnating .separatorLeft
2643
{opacity:0;}
2644
#game.ascendIntro,#ascend
2645
{
2646
	/*background:url(img/starbg.jpg);
2647
	background-size:1024px 1024px;*/
2648
	/*background:url(img/starbg.jpg),url(img/starbg.jpg);
2649
	background-size:1024px 1024px,2048px 2048px;
2650
	background-blend-mode:hard-light;*/
2651
}/*animation:drift 60s linear 0s infinite;}*/
2652
#game.ascendIntro,#game.reincarnating{background:#000;}
2653

2654
.ascending #sectionMiddle,.ascending #sectionRight,.ascending #sectionLeft,.ascending .separatorLeft,.ascending .separatorRight,.reincarnating  #backgroundCanvas
2655
{display:none;opacity:0;}
2656

2657
#ascend
2658
{
2659
	display:none;
2660
	position:absolute;
2661
	left:0px;
2662
	top:0px;
2663
	right:0px;
2664
	bottom:0px;
2665
	z-index:100000;
2666
	cursor:move;
2667
	/*transition:background-position 0.2s ease-out,background-size 0.1s ease-out;*/
2668
}
2669
#ascendBG
2670
{
2671
	position:absolute;
2672
	left:0px;
2673
	top:0px;
2674
	width:100%;
2675
	height:100%;
2676
	background:url(img/shadedBorders.png);
2677
	background-size:100% 100%;
2678
}
2679
#ascendZoomable
2680
{
2681
	position:absolute;
2682
	left:0px;
2683
	top:0px;
2684
	margin-left:50%;
2685
	margin-top:25%;/* this should be 50%. not sure why it needs to be 25% */
2686
}
2687
.ascending #ascend
2688
{display:block;}
2689
#ascendContent
2690
{
2691
	position:absolute;
2692
	left:0px;
2693
	top:0px;
2694
	/*transition:transform 0.1s ease-out;*/
2695
}
2696
#ascendHelp
2697
{
2698
	position:absolute;
2699
	bottom:40px;
2700
	width:300px;
2701
	left:50%;
2702
	margin-left:-150px;
2703
	font-size:16px;
2704
	text-align:center;
2705
	z-index:100;
2706
}
2707
#ascendHelp a
2708
{
2709
	display:block;
2710
	border-radius:40px;
2711
	font-size:22px;
2712
	opacity:0.5;
2713
	cursor:pointer;
2714
	text-decoration:none;
2715
	background:#000;
2716
	color:#fff;
2717
	padding:8px 4px;
2718
	width:150px;
2719
	margin:5px auto;
2720
}
2721
#ascendHelp a:hover
2722
{
2723
	background:#fff;
2724
	color:#000;
2725
	opacity:0.75;
2726
}
2727
#ascendOverlay
2728
{
2729
	position:absolute;
2730
	top:0px;
2731
	left:50%;
2732
	height:100%;
2733
	z-index:100;
2734
	text-align:center;
2735
	filter:drop-shadow(0px 0px 4px #000);
2736
	/*-webkit-filter:drop-shadow(0px 0px 4px #000);*/
2737
	cursor:auto;
2738
}
2739

2740
#ascendHCs .price
2741
{font-weight:inherit;color:inherit;}
2742

2743
#ascendBox
2744
{
2745
	background:url(img/ascendBox.png);
2746
	width:344px;
2747
	height:162px;
2748
	position:absolute;
2749
	left:-172px;
2750
	top:0px;
2751
	text-align:center;
2752
}
2753
.ascendData
2754
{
2755
	width:60%;
2756
	margin:2px auto;
2757
	padding:6px;
2758
}
2759

2760
#ascendInfo
2761
{
2762
	background:url(img/ascendInfo.png);
2763
	width:308px;
2764
	height:94px;
2765
	position:absolute;
2766
	left:-154px;
2767
	bottom:0px;
2768
	text-align:center;
2769
}
2770

2771
@keyframes drift
2772
{
2773
	from {background-position:0px 0px;}
2774
	to {background-position:2048px -1024px;}
2775
}
2776

2777

2778

2779
.green,b.green{color:#3f0;}.green b{color:inherit;}
2780
.red,b.red{color:#f30;}.red b{color:inherit;}
2781
.gray,b.gray{color:#999;}.gray b{color:inherit;}
2782

2783
#versionNumber
2784
{
2785
	position:absolute;
2786
	left:0px;
2787
	bottom:0px;
2788
	opacity:0.5;
2789
	margin:8px;
2790
	font-size:22px;
2791
	z-index:100000000;
2792
}
2793

2794
#alert
2795
{
2796
	display:none;
2797
	position:fixed;
2798
	bottom:-16px;
2799
	left:-16px;
2800
	z-index:100000000000;
2801
	padding:12px 12px 24px 24px;
2802
	font-size:14px;
2803
	background:#990;
2804
	border-radius:16px;
2805
	color:#fff;
2806
	box-shadow:0px 0px 4px #000, 0px 0px 4px #000 inset;
2807
	text-shadow:0px 0px 2px #000;
2808
	border:4px solid #fff;
2809
}
2810
#alert b {font-weight:bold;}
2811
#alert small {font-size:80%;}
2812

2813
#debug
2814
{
2815
	position:absolute;
2816
	left:0px;
2817
	top:0px;
2818
	z-index:1000000000;
2819
	display:none;
2820
}
2821
#devConsole
2822
{
2823
	position:relative;
2824
	left:-2px;
2825
	top:-2px;
2826
	width:24px;
2827
	height:32px;
2828
	overflow:hidden;
2829
	cursor:pointer;
2830
	opacity:0.5;
2831
	text-align:center;
2832
	transition:opacity 0.4s;
2833
}
2834
#devConsole:hover
2835
{
2836
	width:192px;
2837
	height:auto;
2838
	min-width:192px;
2839
	min-height:48px;
2840
	overflow:auto;
2841
	opacity:1;
2842
}
2843
#devConsole:hover>.icon
2844
{
2845
	display:none;
2846
}
2847
#devConsoleContent
2848
{display:none;cursor:auto;}
2849
#devConsole:hover>#devConsoleContent
2850
{
2851
	display:block;
2852
}
2853

2854
#debugLog
2855
{
2856
	min-width:150px;
2857
	background:rgba(0,0,0,0.5);
2858
	background:linear-gradient(to right,rgba(0,0,0,0.5),rgba(0,0,0,0.5) 90%,rgba(0,0,0,0));
2859
	padding:4px 4px 4px 8px;
2860
	font-size:10px;
2861
	text-shadow:0px 1px 0px #000;
2862
	color:#ccc;
2863
	pointer-events:none;
2864
}
2865

2866
.crisp
2867
{
2868
	image-rendering: optimizeSpeed;             /* Older versions of FF          */
2869
	image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
2870
	image-rendering: -webkit-optimize-contrast; /* Safari                        */
2871
	image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
2872
	image-rendering: pixelated;                 /* Future-browsers				 */
2873
	-ms-interpolation-mode: nearest-neighbor;   /* IE                            */
2874
}
2875

2876
/*show scrollbars in safari*/
2877
::-webkit-scrollbar
2878
{
2879
	-webkit-appearance:none;
2880
	width:17px;
2881
}
2882
::-webkit-scrollbar-track
2883
{
2884
	background-color:#eee;
2885
}
2886
::-webkit-scrollbar-thumb
2887
{
2888
	background-color:#bbb;
2889
	border:2px solid #eee;
2890
	box-shadow:0px 0px 0px 1px #999 inset;
2891
}
2892

2893
/*=====================================================================================
2894
SUPPORT
2895
=======================================================================================*/
2896
#support
2897
{
2898
	width:300px;
2899
	text-align:center;
2900
	margin:16px auto;
2901
}
2902
.supportComment
2903
{
2904
	font-size:10px;
2905
	opacity:0.75;
2906
	text-shadow:0px 0px 2px #000,0px 1px 0px #000;
2907
	padding:8px 0px;
2908
	text-align:center;
2909
}
2910
.supportPlaceholder {width:300px;height:250px;position:absolute;left:0px;top:0px;z-index:10;opacity:0.6;}
2911
.supportPlaceholder>div {margin:20px auto;width:60%;text-align:center;background:#000;color:#fff;font-weight:bold;font-size:80%;border-radius:8px;padding:8px 4px;}
2912
#donateBox
2913
{
2914
	z-index:10000000;
2915
	position:absolute;
2916
	right:12px;
2917
	top:160px;
2918
	padding:8px 4px;
2919
	text-align:center;
2920
	width:120px;
2921
	display:none;
2922
	background:rgba(128,128,255,0.25);
2923
	box-shadow:0px 0px 4px 4px rgba(128,128,255,0.25);
2924
	border-radius:8px;
2925
	transition:box-shadow 0.25s,background 0.25s;
2926
}
2927
#donateBox:hover
2928
{
2929
	background:rgba(128,128,255,0.5);
2930
	box-shadow:0px 0px 4px 4px rgba(128,128,255,0.5);
2931
}
2932
#donateBox.on {display:block;}
2933

2934
#donate
2935
{
2936
	display:inline-block;
2937
}
2938
#donateButton
2939
{
2940
	border:0px;
2941
	display:inline-block;
2942
	border-radius:4px;
2943
	background:#fc6;
2944
	background:linear-gradient(to bottom,#fff 0%,#fc6 45%,#f90 50%,#f66 100%);
2945
	box-shadow:0px 0px 1px #fff inset,0px 0px 0px 1px #f66;
2946
	text-shadow:0px -1px 0px #fc6,0px 1px 0px #f66;
2947
	cursor:pointer;
2948
	font-size:9px;
2949
	font-weight:bold;
2950
	opacity:0.9;
2951
}
2952
#donateButton:hover
2953
{
2954
	border:0px;
2955
	box-shadow:0px 0px 4px #fff inset,0px 0px 0px 1px #f66;
2956
	opacity:1;
2957
}
2958
.highlightHover:hover{filter:brightness(125%);opacity:1;}
2959
.highlightHover:active{filter:brightness(85%);opacity:1;}
2960

2961
#supportSection
2962
{
2963
	font-size:11px;
2964
	margin:4px 0px;
2965
	line-height:110%;
2966
	color:rgba(200,200,255,1);
2967
	background:rgba(128,128,255,0.15);
2968
	box-shadow:0px 0px 4px 4px rgba(128,128,255,0.15);
2969
	transition:box-shadow 0.25s,background 0.25s;
2970
}
2971
#supportSection:hover
2972
{
2973
	background:rgba(128,128,255,0.2);
2974
	box-shadow:0px 0px 4px 4px rgba(128,128,255,0.2);
2975
}
2976

2977
.ifNoAds
2978
{
2979
	display:none;
2980
}
2981
.noAds .ifNoAds{display:block;}
2982
.noAds #support,.noAds #smallSupport,.noAds .supportComment{display:none;}
2983

2984
/*=====================================================================================
2985
NEW AD DISPLAY
2986
=======================================================================================*/
2987
/*
2988
#sectionRight
2989
{
2990
	right:160px;
2991
}
2992
#sectionMiddle
2993
{
2994
	right:478px;
2995
}
2996
#sectionAd
2997
{
2998
	height:100%;
2999
	position:absolute;
3000
	top:0px;
3001
	right:0px;
3002
	overflow-x:hidden;
3003
	width:160px;
3004
	background:url(img/darkNoise.jpg);
3005
}
3006
.separatorRight
3007
{
3008
	right:477px;
3009
}
3010
#sectionAd .supportPlaceholder {width:160px;}
3011
*/
3012

3013
/*=====================================================================================
3014
STOP THE FANCY
3015
=======================================================================================*/
3016
.noFancy *
3017
{
3018
	text-shadow:none!important;
3019
	box-shadow:none!important;
3020
}
3021
.noFancy .price
3022
{
3023
	text-shadow:0px 0px 4px #000,0px 1px 0px #000!important;
3024
}
3025
.noFilters *
3026
{
3027
	filter:none!important;
3028
	-webkit-filter:none!important;
3029
}
3030

3031
/*=====================================================================================
3032
MOBILE
3033
=======================================================================================*/
3034
.mobile #sectionLeft,.mobile #sectionMiddle,.mobile #sectionRight
3035
{
3036
	width:100%;
3037
	position:absolute;
3038
	left:0px;
3039
	top:128px;
3040
	right:0px;
3041
	bottom:64px;
3042
	display:none;
3043
}
3044
.mobile .separatorLeft,.mobile .separatorRight
3045
{display:none;}
3046

3047
.mobile .focusLeft #sectionLeft{display:block;}
3048
.mobile .focusMiddle #sectionMiddle{display:block;}
3049
.mobile .focusRight #sectionRight{display:block;}
3050
.mobile .focusMenu #sectionMiddle{display:block;}
3051
.mobile #sectionMiddle
3052
{
3053
	margin:0px;
3054
	padding:0px;
3055
}
3056
.mobile #storeTitle,.mobile #upgrades,.mobile #toggleUpgrades,.mobile #techUpgrades
3057
{
3058
	width:100%;
3059
}
3060
.mobile .product
3061
{
3062
	width:100%;
3063
	background-size:100% 400%;
3064
}
3065

3066
.mobile #game{top:0px;}
3067
.mobile #topBar,.mobile #versionNumber{display:none;}
3068

3069
#focusButtons
3070
{
3071
	display:none;
3072
	position:fixed;
3073
	left:0px;
3074
	bottom:0px;
3075
	height:64px;
3076
	width:100%;
3077
	background:url(img/darkNoise.jpg);
3078
	z-index:1000000;
3079
	font-size:32px;
3080
}
3081
#focusButtons:before
3082
{
3083
	content:'';
3084
	display:block;
3085
	position:absolute;
3086
	left:0px;
3087
	top:-16px;
3088
	background:url(img/blackGradient.png) repeat-x bottom;
3089
	background-size:100% 100%;
3090
	width:100%;
3091
	height:16px;
3092
	opacity:0.5;
3093
	pointer-events:none;
3094
}
3095
#focusButtons div
3096
{
3097
	width:25%;
3098
	height:50%;
3099
	cursor:pointer;
3100
	float:left;
3101
	background:url(img/buttonTile.jpg);
3102
	background-size:100% 400%;
3103
	padding:16px 0px;
3104
	text-align:center;
3105
	opacity:0.5;
3106
}
3107
#focusButtons div:nth-child(4n-3) {background-position:0px 100%;}
3108
#focusButtons div:nth-child(4n-2) {background-position:0px 200%;}
3109
#focusButtons div:nth-child(4n-1) {background-position:0px 300%;}
3110
#focusButtons div:hover
3111
{
3112
	box-shadow:0px 0px 16px #fff inset,0px 0px 1px #000;
3113
	z-index:20;
3114
}
3115
#focusButtons div:active
3116
{
3117
	box-shadow:0px 0px 16px #000 inset;
3118
}
3119
.focusLeft #focusButtons #focusLeft,.focusMiddle #focusButtons #focusMiddle,.focusRight #focusButtons #focusRight,.focusMenu #focusButtons #focusMenu
3120
{
3121
	opacity:1;
3122
	z-index:20;
3123
	box-shadow:0px 0px 8px #fff;
3124
}
3125

3126
#compactOverlay
3127
{
3128
	display:none;
3129
	position:fixed;
3130
	left:0px;
3131
	top:0px;
3132
	height:128px;
3133
	width:100%;
3134
	background:url(img/darkNoise.jpg);
3135
	z-index:1000000;
3136
	text-align:center;
3137
	font-size:16px;
3138
}
3139
#compactCommentsText
3140
{
3141
	padding:8px 0px;
3142
	opacity:0.8;
3143
	position:absolute;
3144
	width:100%;
3145
	text-align:center;
3146
	bottom:16px;
3147
	left:0px;
3148
}
3149
#compactCookies
3150
{
3151
	padding:8px 0px;
3152
	position:absolute;
3153
	width:100%;
3154
	height:32px;
3155
	top:0px;
3156
	left:0px;
3157
	font-size:24px;
3158
	text-shadow:0px 0px 12px rgba(255,255,255,0.5);
3159
	background:rgba(255,255,255,0.05);
3160
}
3161

3162
.mobile .row {padding-bottom:16px;}
3163

3164
.mobile #comments, .mobile #cookies {display:none;}
3165
.mobile #focusButtons, .mobile #compactOverlay/*, .mobile #buildingsTitle*/
3166
{display:block;}
3167

3168
/**{overflow:hidden!important;}*/
3169