CoCalc -- style.css

GitHub Repository: titaniumnetwork-dev/Incognito-old
Path: blob/main/static/src/gs/public/cookie/style.css
¹³²⁴ views
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
.heavenly.price:before
995
{
996
	background:url(img/heavenlyMoney.png);
997
}
998
.lump.price:before
999
{
1000
	background:url(img/sugarLump.png);
1001
}
1002
.price.plain
1003
{
1004
	color:#fff;
1005
	display:inline-block;
1006
}
1007
.price.plain:before
1008
{
1009
	top:0px;
1010
}
1011

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

1088
#milk
1089
{
1090
	width:100%;
1091
	height:0%;
1092
	position:absolute;
1093
	left:0px;
1094
	bottom:0px;
1095
	z-index:100;
1096
	opacity:0.9;
1097
}
1098
.milkLayer
1099
{
1100
	width:100%;
1101
	height:100%;
1102
	position:absolute;
1103
	left:0px;
1104
	top:0px;
1105
	background-repeat:repeat-x;
1106
}
1107
#cookies
1108
{
1109
	position:absolute;
1110
	left:0px;
1111
	top:10%;
1112
	width:100%;
1113
	text-align:center;
1114
	z-index:200;
1115
	background:#000;
1116
	background:rgba(0,0,0,0.4);
1117
	padding:2px 0px;
1118
	pointer-events:none;
1119
}
1120
.monospace
1121
{
1122
	font-family:Courier,monospace;
1123
	font-weight:bold;
1124
}
1125
#bakeryNameAnchor
1126
{
1127
	position:absolute;
1128
	left:0px;
1129
	top:10%;
1130
	width:100%;
1131
	z-index:200;
1132
}
1133
#bakeryName
1134
{
1135
	position:absolute;
1136
	left:0px;
1137
	bottom:8px;
1138
	left:12.5%;
1139
	width:75%;
1140
	text-align:center;
1141
	font-size:20px;
1142
	background:#000;
1143
	background:rgba(0,0,0,0.4);
1144
	border-radius:12px;
1145
	padding:4px 0px;
1146
	cursor:pointer;
1147
}
1148
#bakeryName:hover
1149
{
1150
	text-shadow:0px 0px 8px #fff;
1151
}
1152

1153
#specialPopup
1154
{
1155
	position:absolute;
1156
	left:50%;
1157
	margin-left:-185px;
1158
	bottom:32px;
1159
	width:350px;
1160
	min-height:8px;
1161
	z-index:20000;
1162
	transition:bottom 0.2s ease-out,opacity 0.1s ease-out;
1163
	text-align:center;
1164
}
1165
#specialPopup.onScreen
1166
{
1167
	bottom:32px;
1168
	opacity:1;
1169
}
1170
#specialPopup.offScreen
1171
{
1172
	bottom:-32px;
1173
	pointer-events:none;
1174
	opacity:0;
1175
}
1176

1177
.separatorLeft, .separatorRight
1178
{
1179
	width:16px;
1180
	height:100%;
1181
	background:url(img/panelVertical.png?v=2) repeat-y;
1182
	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;
1183
	position:absolute;
1184
	top:0px;
1185
	bottom:0px;
1186
	z-index:100;
1187
}
1188
.separatorLeft
1189
{
1190
	left:30%;
1191
}
1192
.separatorRight
1193
{
1194
	right:317px;
1195
}
1196
.separatorBottom
1197
{
1198
	width:100%;
1199
	height:16px;
1200
	background:url(img/panelHorizontal.png?v=2) repeat-x;
1201
	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;
1202
	position:absolute;
1203
	left:0px;
1204
	bottom:0px;
1205
}
1206

1207
.button
1208
{
1209
	background:url(img/panelMenu3.png);
1210
	background-position:0px 0px;
1211
	position:absolute;
1212
	z-index:100;
1213
	width:100px;
1214
	height:48px;
1215
	text-align:center;
1216
	font-size:18px;
1217
	cursor:pointer;
1218
	
1219
	box-sizing:border-box;
1220
	padding-top:16px;
1221
	
1222
	color:#999;
1223
	text-shadow:0px 1px 0px #444,0px 0px 4px #000;
1224
}
1225
.button:hover,.button.selected
1226
{
1227
	z-index:1000;
1228
	color:#fff;
1229
	text-shadow:0px 1px 0px #999,0px 0px 4px #000;
1230
}
1231
#prefsButton{top:0px;left:0px;		padding-top:16px;		padding-right:2px;		background-position:0px 0px;}
1232
#statsButton{bottom:16px;left:0px;	padding-top:14px;		padding-right:2px;		background-position:0px -48px;}
1233
#logButton{top:0px;right:0px;		padding-top:16px;		padding-left:2px;		background-position:-100px 0px;}
1234
#legacyButton{bottom:16px;right:0px;padding-top:14px;		padding-left:2px;		background-position:-100px -48px;}
1235
#prefsButton:hover,#prefsButton.selected{					background-position:0px -96px;}
1236
#statsButton:hover,#statsButton.selected{					background-position:0px -144px;}
1237
#logButton:hover,#logButton.selected{						background-position:-100px -96px;}
1238
#legacyButton:hover,#legacyButton.selected{					background-position:-100px -144px;}
1239

1240
#logButton.hasUpdate
1241
{
1242
	color:#ffc;
1243
}
1244
#logButton.hasUpdate:before
1245
{
1246
	content:'';
1247
	display:block;
1248
	position:absolute;
1249
	left:-60px;
1250
	top:0px;
1251
	width:60px;
1252
	height:56px;
1253
	background:url(img/pointyLad.png);
1254
	animation:pointLadBump 0.5s infinite ease-in-out;
1255
}
1256
@keyframes pointLadBump{
1257
	0% {transform:translate(0px,0px);}
1258
	20% {transform:translate(-15px,0px);}
1259
	50% {transform:translate(-20px,0px);}
1260
	80% {transform:translate(-15px,0px);}
1261
	100% {transform:translate(0px,0px);}
1262
}
1263
#checkForUpdate
1264
{
1265
	display:none;
1266
	font-size:10px;
1267
	margin-top:-8px;
1268
	animation:checkForUpdateFlash 0.5s infinite ease-in-out;
1269
}
1270
@keyframes checkForUpdateFlash{
1271
	0% {color:#999;}
1272
	50% {color:#ffc;}
1273
	100% {color:#999;}
1274
}
1275
#logButton.hasUpdate #checkForUpdate {display:block;}
1276

1277

1278
.roundedPanel
1279
{
1280
	background:url(img/roundedPanelBGS.png) repeat-x 0px 0px;
1281
	position:relative;
1282
	padding:9px 0px;
1283
	height:20px;
1284
}
1285
.roundedPanel:before,.roundedPanel:after
1286
{
1287
	content:'';
1288
	display:block;height:36px;
1289
	position:absolute;top:0px;
1290
}
1291
.roundedPanel:before
1292
{
1293
	background:url(img/bracketPanelLeftS.png) no-repeat;left:-16px;width:16px;
1294
}
1295
.roundedPanel:after
1296
{
1297
	background:url(img/bracketPanelRightS.png) no-repeat;right:-18px;width:18px;
1298
}
1299
/*.roundedPanel
1300
{
1301
	background:url(img/roundedPanelBG.png) repeat-x 0px 0px;
1302
	position:relative;
1303
}
1304
.roundedPanel:before,.roundedPanel:after
1305
{
1306
	content:'';
1307
	display:block;width:17px;height:32px;
1308
	position:absolute;top:0px;
1309
}
1310
.roundedPanel:before
1311
{
1312
	background:url(img/roundedPanelLeft.png) no-repeat;left:-17px;
1313
}
1314
.roundedPanel:after
1315
{
1316
	background:url(img/roundedPanelRight.png) no-repeat;right:-17px;
1317
}*/
1318
#ascendNumber
1319
{
1320
	display:none;
1321
	position:absolute;
1322
	right:115px;
1323
	top:22px;
1324
	font-size:14px;
1325
	font-weight:bold;
1326
	font-family:Georgia;
1327
	color:#fff;
1328
	text-shadow:0px -1px 1px #09f,0px 1px 1px #f04;
1329
}
1330
#legacyButton:hover>#ascendNumber
1331
{text-shadow:0px -1px 1px #09f,0px 1px 1px #f04,0px -1px 1px #09f,0px 1px 1px #f04,0px 0px 4px #fff;}
1332

1333
#ascendTooltip
1334
{
1335
	display:none;
1336
	position:absolute;
1337
	right:0px;
1338
	top:52px;
1339
	font-family:Tahoma,Arial,sans serif;
1340
	font-size:11px;
1341
	width:220px;
1342
	padding:8px;
1343
	pointer-events:none;
1344
}
1345
#legacyButton:hover>#ascendTooltip
1346
{display:block;}
1347

1348
#lumps
1349
{
1350
	display:none;
1351
	position:absolute;
1352
	width:32px;
1353
	height:32px;
1354
	position:absolute;
1355
	z-index:10000;
1356
	left:-8px;
1357
	bottom:-12px;
1358
	z-index:10000;
1359
	cursor:pointer;
1360
	filter:drop-shadow(0px 3px 2px #000);
1361
	-webkit-filter:drop-shadow(0px 3px 2px #000);
1362
}
1363
#lumps:hover #lumpsIcon,#lumps:hover #lumpsIcon2
1364
{top:-10px;}
1365
#lumpsIcon,#lumpsIcon2
1366
{
1367
	width:48px;
1368
	height:48px;
1369
	position:absolute;
1370
	left:-8px;
1371
	top:-8px;
1372
	pointer-events:none;
1373
}
1374
#lumpsAmount
1375
{
1376
	font-size:12px;
1377
	color:#6cf;
1378
    position:absolute;
1379
    left:36px;
1380
    top:6px;
1381
	pointer-events:none;
1382
}
1383
.lumpsOn #lumps{display:block;}
1384

1385

1386
.lumpRefill
1387
{
1388
	cursor:pointer;
1389
	width:48px;
1390
	height:48px;
1391
	position:absolute;
1392
	left:0px;
1393
	top:0px;
1394
	transform:scale(0.5);
1395
	z-index:1000;
1396
	transition:transform 0.05s;
1397
}
1398
.lumpRefill:hover{transform:scale(1);}
1399
.lumpRefill:active{transform:scale(0.4);}
1400

1401

1402
.meterContainer
1403
{
1404
	background:rgba(0,0,0,0.5);
1405
	position:relative;
1406
	border-radius:2px;
1407
	height:8px;
1408
}
1409
.meter
1410
{
1411
	background:url(img/prestigeBar.jpg) 0px 0px;
1412
	position:absolute;
1413
	left:0px;
1414
	right:100%;
1415
	top:0px;
1416
	height:100%;
1417
	max-width:100%;
1418
}
1419
.meter:after
1420
{
1421
	height:8px;
1422
	width:8px;
1423
	position:absolute;
1424
	right:-8px;
1425
	top:0px;
1426
	content:'';
1427
	display:block;
1428
	background:url(img/prestigeBarCap.png);
1429
}
1430
#ascendMeterContainer
1431
{
1432
	width:100px;
1433
	right:0px;
1434
	bottom:4px;
1435
	position:absolute;
1436
}
1437
#ascendMeter
1438
{
1439
	right:100px;
1440
}
1441

1442
.meter.filling
1443
{
1444
-webkit-animation:fluidMotion 10s infinite linear;
1445
   -moz-animation:fluidMotion 10s infinite linear;
1446
        animation:fluidMotion 10s infinite linear;
1447
	/*-webkit-transition:right 0.5s linear;
1448
	-moz-transition:right 0.5s linear;
1449
	-ms-transition:right 0.5s linear;
1450
	-o-transition:right 0.5s linear;
1451
	transition:right 0.5s linear;*/
1452
}
1453
@-webkit-keyframes fluidMotion{
1454
from {background-position:0px -24px;}
1455
	to {background-position:-128px -24px;}
1456
}
1457
@-moz-keyframes fluidMotion{
1458
from {background-position:0px -24px;}
1459
	to {background-position:-128px -24px;}
1460
}
1461
@keyframes fluidMotion{
1462
from {background-position:0px -24px;}
1463
	to {background-position:-128px -24px;}
1464
}
1465

1466
#game.onMenu #menu{display:block;}
1467
#game.onMenu .row{visibility:hidden;display:none;}
1468
#menu
1469
{
1470
	display:none;
1471
	z-index:1;
1472
	position:absolute;
1473
	left:0px;
1474
	right:0px;
1475
	top:0px;
1476
	bottom:0px;
1477
	/*box-shadow:0px 0px 24px #000 inset;
1478
	background:#000 url(img/darkNoise.jpg);*/
1479
}
1480

1481
#comments
1482
{
1483
	padding:16px;
1484
	text-align:center;
1485
	position:relative;
1486
	padding-bottom:32px;
1487
	font-size:16px;
1488
	height:64px;
1489
	background:url(img/shadedBorders.png);
1490
	background-size:100% 96px;
1491
	/*overflow:hidden;*/
1492
}
1493
.commentsText
1494
{
1495
	padding:16px 0px;
1496
	position:absolute;
1497
	top:0px;
1498
	left:108px;
1499
	right:108px;
1500
	opacity:1;
1501
	text-align:center;
1502
}
1503
.commentsText q
1504
{
1505
	font-style:italic;
1506
}
1507
.commentsText sig
1508
{
1509
	font-size:70%;
1510
	display:block;
1511
	text-align:center;
1512
	opacity:0.7;
1513
}
1514
.commentsText sig:before
1515
{
1516
	content:"-";
1517
	padding-left:64px;
1518
}
1519
.fortune
1520
{
1521
	color:#ade000;
1522
	cursor:pointer;
1523
}
1524
.fortune:hover
1525
{
1526
	color:#d2ff00;
1527
	text-shadow:0px 0px 4px #ade000;
1528
}
1529

1530
#commentsText
1531
{
1532
	z-index:20;
1533
}
1534
#commentsTextBelow
1535
{
1536
	z-index:10;
1537
}
1538

1539
/* let me tell you about vendor prefixes */
1540
.risingAway{
1541
-webkit-animation:riseAway 1s 1 forwards;
1542
   -moz-animation:riseAway 1s 1 forwards;
1543
        animation:riseAway 1s 1 forwards;
1544
}
1545
.risingUp{
1546
-webkit-animation:riseUp 1s 1 forwards;
1547
   -moz-animation:riseUp 1s 1 forwards;
1548
        animation:riseUp 1s 1 forwards;
1549
}
1550
.risingUpLinger{
1551
-webkit-animation:riseUpLinger 4s 1 forwards ease-out;
1552
   -moz-animation:riseUpLinger 4s 1 forwards ease-out;
1553
        animation:riseUpLinger 4s 1 forwards ease-out;
1554
}
1555
@-webkit-keyframes riseAway{
1556
from {top:0px;opacity:1;}
1557
	to {top:-20px;opacity:0;}
1558
}
1559
@-webkit-keyframes riseUp{
1560
from {top:20px;opacity:0;}
1561
	to {top:0px;opacity:1;}
1562
}
1563
@-webkit-keyframes riseUpLinger{
1564
0% {transform:translate(0px,0px);opacity:0;}
1565
1% {transform:translate(0px,0px);opacity:1;}
1566
20% {transform:translate(0px,-32px);opacity:1;}
1567
100% {transform:translate(0px,-32px);opacity:0;}
1568
}
1569
@-moz-keyframes riseAway{
1570
from {top:0px;opacity:1;}
1571
	to {top:-20px;opacity:0;}
1572
}
1573
@-moz-keyframes riseUp{
1574
from {top:20px;opacity:0;}
1575
	to {top:0px;opacity:1;}
1576
}
1577
@-moz-keyframes riseUpLinger{
1578
0% {transform:translate(0px,0px);opacity:0;}
1579
1% {transform:translate(0px,0px);opacity:1;}
1580
20% {transform:translate(0px,-32px);opacity:1;}
1581
100% {transform:translate(0px,-32px);opacity:0;}
1582
}
1583
@keyframes riseAway{
1584
from {top:0px;opacity:1;}
1585
	to {top:-20px;opacity:0;}
1586
}
1587
@keyframes riseUp{
1588
from {top:20px;opacity:0;}
1589
	to {top:0px;opacity:1;}
1590
}
1591
@keyframes riseUpLinger{
1592
0% {transform:translate(0px,0px);opacity:0;}
1593
2% {transform:translate(0px,0px);opacity:1;}
1594
20% {transform:translate(0px,-32px);opacity:1;}
1595
75% {transform:translate(0px,-32px);opacity:1;}
1596
100% {transform:translate(0px,-32px);opacity:0;}
1597
}
1598

1599

1600
@keyframes wobble
1601
{
1602
	0% {transform:scale(0.5,0.5);}
1603
	20% {transform:scale(1.3,0.7);}
1604
	30% {transform:scale(0.7,1.3);}
1605
	50% {transform:scale(1.2,0.8);}
1606
	70% {transform:scale(0.9,1.1);}
1607
	90% {transform:scale(1.1,0.9);}
1608
	100% {transform:scale(1,1);}
1609
}
1610

1611
@keyframes bounce
1612
{
1613
	/* weeeeee */
1614
	0% 		{transform-origin:50% 100%;transform:scale(1,1);}
1615
	10% 	{transform-origin:50% 100%;transform:scale(0.9,1.2);}
1616
	20% 	{transform-origin:50% 100%;transform:scale(1.5,0.5);}
1617
	25% 	{transform-origin:50% 100%;transform:scale(0.75,1.5) translate(0px,-10px);}
1618
	30% 	{transform-origin:50% 100%;transform:scale(0.8,1.2) translate(0px,-20px);}
1619
	60% 	{transform-origin:50% 100%;transform:scale(1,1) translate(0px,-25px);}
1620
	70% 	{transform-origin:50% 100%;transform:scale(2,0.5);}
1621
	80% 	{transform-origin:50% 100%;transform:scale(0.8,1.2);}
1622
	90% 	{transform-origin:50% 100%;transform:scale(1,1);}
1623
	100% 	{transform-origin:50% 100%;transform:scale(1,1);}
1624
}
1625

1626

1627
.comeLeft{animation:comeLeft 0.2s ease-out;}
1628
@keyframes comeLeft
1629
{
1630
	0% {transform:translate(-16px,0px);opacity:0;}
1631
	100% {transform:translate(0px,0px);opacity:1;}
1632
}
1633

1634
.pucker{animation:pucker 0.2s ease-out;}
1635
@keyframes pucker
1636
{
1637
	0% {transform:scale(1,1);}
1638
	10% {transform:scale(1.15,0.85);}
1639
	20% {transform:scale(1.2,0.8);}
1640
	50% {transform:scale(0.75,1.25);}
1641
	70% {transform:scale(1.05,0.95);}
1642
	90% {transform:scale(0.95,1.05);}
1643
	100% {transform:scale(1,1);}
1644
}
1645
.puckerHalf{animation:puckerHalf 0.2s ease-out;}
1646
@keyframes puckerHalf
1647
{
1648
	0% {transform:scale(0.5,0.5);}
1649
	10% {transform:scale(0.575,0.425);}
1650
	20% {transform:scale(0.6,0.4);}
1651
	50% {transform:scale(0.375,0.625);}
1652
	70% {transform:scale(0.525,0.475);}
1653
	90% {transform:scale(0.475,0.525);}
1654
	100% {transform:scale(0.5,0.5);}
1655
}
1656

1657
.flashRed{animation:flashRed 0.2s ease-out;}
1658
@keyframes flashRed
1659
{
1660
	0% 		{background:#f00;}
1661
	100% 	{}
1662
}
1663
.punchDown{animation:punchDown 0.3s ease-out;}
1664
@keyframes punchDown
1665
{
1666
	0% 		{transform:translate(0px,0px);}
1667
	20% 		{transform:translate(0px,4px);}
1668
	100% 		{transform:translate(0px,0px);}
1669
}
1670
.punchUp{animation:punchUp 0.3s ease-out;}
1671
@keyframes punchUp
1672
{
1673
	0% 		{transform:translate(0px,0px);}
1674
	20% 		{transform:translate(0px,-4px);}
1675
	100% 		{transform:translate(0px,0px);}
1676
}
1677

1678
#buildingsMaster
1679
{
1680
	min-height:24px;
1681
	background:#999;
1682
	background:url(img/darkNoise.jpg);
1683
	box-shadow:0px 0px 4px #000 inset;
1684
	position:relative;
1685
	text-align:center;
1686
	color:#fff;
1687
	font-size:12px;
1688
	font-weight:bold;
1689
	font-variant:small-caps;
1690
	text-shadow:0px 1px 0px #000;
1691
	margin-bottom:8px;
1692
	display:none;
1693
}
1694
.extraButtons #buildingsMaster{display:block;}
1695
#game.onMenu #buildingsMaster{display:none;}
1696

1697
.row
1698
{
1699
	position:relative;
1700
	padding-bottom:16px;
1701
	display:none;
1702
	/*overflow:hidden;*/
1703
}
1704
.row.enabled{display:block;}
1705
.row .rowCanvas
1706
{
1707
	width:100%;
1708
	height:128px;
1709
	/*overflow-x:scroll;
1710
	overflow-y:hidden;*/
1711
	background:#000;
1712
	display:block;
1713
}
1714
.row .rowSpecial
1715
{
1716
	min-height:24px;
1717
	z-index:100;
1718
	width:100%;
1719
	top:0px;
1720
	left:0px;
1721
	background:#000 url(img/mapBG.jpg) fixed;
1722
	display:none;
1723
}
1724
.row.onMinigame .rowCanvas{display:none;}
1725
.row.onMinigame .rowSpecial{display:block;}
1726
/*.row.muted .rowCanvas,.row.muted .rowSpecial{display:none;}*/
1727
/*.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;}*/
1728
.row.muted{display:none;}
1729

1730
.row .info, #sectionLeft .info
1731
{
1732
	display:none;
1733
	/*visibility:hidden;*/
1734
	-webkit-transition: opacity 0.1s ease-out;
1735
	-moz-transition: opacity 0.1s ease-out;
1736
	-ms-transition: opacity 0.1s ease-out;
1737
	-o-transition: opacity 0.1s ease-out;
1738
	transition: opacity 0.1s ease-out;
1739
	opacity:0;
1740
}
1741
.row .info, #sectionLeft .info
1742
{
1743
	position:absolute;
1744
	top:0px;
1745
	left:0px;
1746
	height:112px;
1747
	padding:8px;
1748
	font-size:12px;
1749
	line-height:125%;
1750
	background:url(img/infoBG.png);
1751
	color:#666;
1752
	z-index:100000;
1753
}
1754
.row .info:after
1755
{
1756
	width:16px;
1757
	height:128px;
1758
	position:absolute;
1759
	right:-16px;
1760
	top:0px;
1761
	background:url(img/infoBGfade.png) repeat-y;
1762
	display:block;
1763
	content:'';
1764
}
1765
#sectionLeft .info
1766
{
1767
	border-radius:16px;
1768
	padding:24px 8px 8px 24px;
1769
	left:-16px;
1770
	top:-16px;
1771
	height:auto;
1772
}
1773
.row:hover .info, #sectionLeft:hover .info
1774
{
1775
	opacity:1;
1776
}
1777
.row .object
1778
{
1779
	position:absolute;
1780
	width:64px;
1781
	height:64px;
1782
}
1783
#sectionLeftInfo
1784
{
1785
	position:absolute;
1786
	left:0px;
1787
	top:0px;
1788
	width:100%;
1789
}
1790

1791
.zoneTitle
1792
{
1793
	text-align:center;
1794
	padding:8px;
1795
	width:100%;
1796
}
1797
#store
1798
{
1799
	position:relative;
1800
}
1801
#store:after
1802
{
1803
	display:block;
1804
	height:64px;
1805
	background:url(img/blackGradientSmallTop.png) repeat-x top;
1806
	content:'';
1807
	pointer-events:none;
1808
	position:absolute;
1809
	left:0px;
1810
	right:0px;
1811
	bottom:-64px;
1812
}
1813
#storeTitle
1814
{
1815
	width:284px;
1816
	background:url(img/blackGradientSmallTop.png) repeat-x top;
1817
}
1818
#buildingsTitle
1819
{
1820
	display:none;
1821
}
1822
.storeSection
1823
{
1824
	height:60px;
1825
	width:300px;
1826
	position:relative;
1827
	overflow-y:hidden;
1828
	background:url(img/panelHorizontal.png?v=2) repeat-x top;
1829
	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;
1830
	padding-top:16px;
1831
}
1832
.storeSection:hover
1833
{
1834
	height:auto;
1835
	min-height:60px;
1836
}
1837
.storeSection:hover:before
1838
{
1839
	display:block;
1840
}
1841
.storeSection:before,.storeSectionAddon
1842
{
1843
	z-index:1000;
1844
	text-shadow:0px 1px 1px #360e00,0px -1px 1px #360e00,1px 0px 1px #360e00,-1px 0px 1px #360e00;
1845
	font-weight:bold;
1846
	color:#f6dab8;
1847
	opacity:1;
1848
	font-variant:small-caps;
1849
}
1850
.storeSection:before
1851
{
1852
	display:none;
1853
	position:absolute;
1854
	content:'';
1855
	left:2px;
1856
	top:0px;
1857
	pointer-events:none;
1858
}
1859
.storeSectionAddon
1860
{
1861
	position:relative;
1862
	line-height:0%;
1863
	text-align:right;
1864
	top:6px;
1865
	right:4px;
1866
}
1867

1868
.trophy
1869
{
1870
	width:48px;height:48px;margin:2px;float:left;
1871
	cursor:pointer;
1872
	filter:drop-shadow(0px 3px 2px #000);
1873
	-webkit-filter:drop-shadow(0px 3px 2px #000);
1874
	position:relative;
1875
}
1876
.trophy:hover
1877
{
1878
	top:-1px;
1879
	/*filter:brightness(125%) drop-shadow(0px 3px 2px #000);
1880
	-webkit-filter:brightness(125%) drop-shadow(0px 3px 2px #000);*/
1881
}
1882

1883
.tag
1884
{
1885
	display:inline-block;
1886
	font-family:Arial;
1887
	font-size:10px;
1888
}
1889

1890
#toggleBox
1891
{
1892
	position:absolute;
1893
	right:318px;
1894
	top:56px;
1895
	width:300px;
1896
	min-height:60px;
1897
	display:none;
1898
	z-index:50000000;
1899
	text-align:center;
1900
}
1901

1902
#upgrades:before{content:'Upgrades';}
1903
#toggleUpgrades:before{content:'Switches';}
1904
#techUpgrades:before{content:'Research';}
1905
/*#vaultUpgrades{height:0px;}*/
1906
/*#vaultUpgrades:hover{height:auto;min-height:60px;}*/
1907
#vaultUpgrades .crate{opacity:0.5;}
1908
#vaultUpgrades .crate{transform:scale(0.5);margin:-9px;}
1909
#vaultUpgrades{height:30px;}
1910
#vaultUpgrades:hover{height:auto;min-height:30px;}
1911
#vaultUpgrades:before{content:'Vault';}
1912
#products:before{content:'Buildings';}
1913
#upgrades
1914
{
1915
}
1916
#upgrades.hasMenu
1917
{
1918
	min-height:82px;
1919
}
1920
#products
1921
{
1922
	height:auto;
1923
	min-height:60px;
1924
}
1925
.crate
1926
{
1927
	width:48px;
1928
	height:48px;
1929
	margin:6px;
1930
	display:inline-block;
1931
	cursor:pointer;
1932
	/*opacity:0.6;*/
1933
	position:relative;
1934
	/*background:#000;*/
1935
	background:rgba(0,0,0,0.25);
1936
	float:left;
1937
}
1938
.crate:before
1939
{
1940
	content:'';
1941
	position:absolute;
1942
	left:-6px;
1943
	top:-6px;
1944
	width:60px;
1945
	height:60px;
1946
	display:block;
1947
	background:url(img/upgradeFrame.png?v=2);
1948
	background-position:0px 0px;
1949
	z-index:10;
1950
}
1951

1952
.crate.noFrame {background-color:transparent!important;margin:2px;}
1953
.crate.noFrame:before {background:transparent;}
1954
.crate.noFrame {opacity:0.3;}
1955
.crate.noFrame.enabled ,.crate.noFrame:hover {opacity:1;}
1956

1957

1958
.crate:before{background-position:120px 0px;}
1959
.crate.enabled:before{background-position:0px 0px;}
1960
.crate.enabled:hover:before,.crate.highlighted:before{background-position:60px 0px;}
1961
/*.crate.enabled:hover:after,.crate.highlighted:after
1962
{
1963
	content:'';
1964
	position:absolute;
1965
	left:-24px;
1966
	top:-24px;
1967
	width:96px;
1968
	height:96px;
1969
	display:block;
1970
	//background:url(img/upgradeHighlight.png);
1971
	background:url(img/upgradeHighlight.jpg);
1972
	mix-blend-mode:screen;
1973
	z-index:100;
1974
	pointer-events:none;
1975
}*/
1976
.crate.shadow:before{background-position:120px 60px;}
1977
.crate.shadow.enabled:before{background-position:0px 60px;}
1978
.crate.shadow.enabled:hover:before{background-position:60px 60px;}
1979

1980
.selectorCorner
1981
{
1982
	position:absolute;
1983
	left:-6px;
1984
	bottom:-6px;
1985
	width:12px;
1986
	height:12px;
1987
	display:block;
1988
	background:url(img/upgradeSelector.png);
1989
	z-index:20;
1990
}
1991

1992
.crate:hover:before
1993
{
1994
	z-index:20;
1995
}
1996

1997
.pieTimer
1998
{
1999
	position:absolute;
2000
	left:0px;
2001
	top:0px;
2002
	width:48px;
2003
	height:48px;
2004
	background:url(img/pieFill.png);
2005
	/*background-size:864px 384px;*/
2006
	/*background-size:864px 384px;*/
2007
	z-index:1000;
2008
	opacity:0.5;
2009
}
2010

2011
.crate.heavenly{opacity:0.8;}
2012
.crate.heavenly:before
2013
{
2014
	left:-20px;
2015
	top:-20px;
2016
	width:88px;
2017
	height:88px;
2018
	background-image:url(img/ascendSlot.png);
2019
	background-position:88px 0px;
2020
}
2021
/*.crate.heavenly:after
2022
{
2023
	content:'';
2024
	position:absolute;
2025
	left:-6px;
2026
	top:-6px;
2027
	width:60px;
2028
	height:60px;
2029
	display:block;
2030
	background:#f00;
2031
	border-radius:30px;
2032
	z-index:-10;
2033
}*/
2034
#menu .crate.heavenly {margin:12px;}
2035
/*#menu .crate.heavenly:nth-child(even) {margin-top:16px;margin-bottom:8px;}
2036
#menu .crate.heavenly:nth-child(3n) {margin-right:16px;margin-left:8px;}*/
2037
.crate.heavenly,.crate.heavenly:hover{background-color:transparent;}
2038
.icon
2039
{
2040
	width:48px;
2041
	height:48px;
2042
	display:inline-block;
2043
	margin:0px 4px;
2044
}
2045
.icon,.crate,.usesIcon
2046
{
2047
	/*background-image:url(img/icons.png?v=20);*/
2048
}
2049
.icon,.crate,.shadowFilter
2050
{
2051
	filter:drop-shadow(0px 3px 2px #000);
2052
	-webkit-filter:drop-shadow(0px 3px 2px #000);
2053
}
2054

2055
/*filter the whole list rather than filtering each individual crate*/
2056
.crateBox .crate,.upgradeBox .crate
2057
{
2058
	filter:none;
2059
	-webkit-filter:none;
2060
}
2061
.crateBox,.upgradeBox
2062
{
2063
	filter:drop-shadow(0px 3px 2px #000);
2064
	-webkit-filter:drop-shadow(0px 3px 2px #000);
2065
}
2066
.listing.crateBox
2067
{
2068
	overflow-y:hidden;
2069
	padding-bottom:12px;
2070
	margin-bottom:-12px;
2071
}
2072

2073
.achievement
2074
{
2075
	/*opacity:0.4;*/
2076
}
2077
.crate.enabled
2078
{
2079
	opacity:1;
2080
}
2081
.crate.heavenly.enabled:before
2082
{
2083
	/*background-position:0px -60px;*/
2084
	background-position:0px 0px;
2085
}
2086
.crate.heavenly:hover:before
2087
{
2088
	background-position:-88px 0px;
2089
}
2090
.crate:hover,.crate.highlighted
2091
{
2092
	/*background-color:#200e0a;*/
2093
	opacity:1;
2094
	top:-1px;
2095
	
2096
	/* for some reason having a filter update on hover makes the cursor confused about which icon it's hovering */
2097
	/*filter:brightness(115%);
2098
	-webkit-filter:brightness(115%);*/
2099
}
2100
.crate.heavenly
2101
{
2102
	transition:left 0.2s ease-out,top 0.2s ease-out;
2103
	z-index:10;
2104
}
2105
.crate.ghosted
2106
{
2107
	background:transparent;
2108
	opacity:0.2;
2109
}
2110
.parentLink
2111
{
2112
	/*background:url(img/linkPulse.png);*/
2113
	background:url(img/linkPulse.gif);
2114
	width:0px;
2115
	height:8px;
2116
	position:absolute;
2117
	-ms-transform-origin:0% 50%;
2118
	-webkit-transform-origin:0% 50%;
2119
	transform-origin:0% 50%;
2120
	opacity:0.5;
2121
	z-index:-10;
2122
	/*
2123
-webkit-animation:parentLinkPulse 1s infinite linear;
2124
   -moz-animation:parentLinkPulse 1s infinite linear;
2125
        animation:parentLinkPulse 1s infinite linear;
2126
	*/
2127
}
2128
@-webkit-keyframes parentLinkPulse{
2129
from {background-position:0px 0px;}
2130
	to {background-position:32px 0px;}
2131
}
2132
@-moz-keyframes parentLinkPulse{
2133
from {background-position:0px 0px;}
2134
	to {background-position:32px 0px;}
2135
}
2136
@keyframes parentLinkPulse{
2137
from {background-position:0px 0px;}
2138
	to {background-position:32px 0px;}
2139
}
2140

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

2230

2231
.product .content .owned
2232
{
2233
	position:absolute;
2234
	right:12px;
2235
	top:6px;
2236
	font-size:40px;
2237
	opacity:0.2;
2238
	color:#000;
2239
	text-shadow:0px 0px 8px #fff;
2240
}
2241
.product .icon
2242
{
2243
	opacity:0;
2244
}
2245
.product.unlocked .icon
2246
{
2247
	opacity:1;
2248
}
2249
.product .icon.off
2250
{
2251
	z-index:100;
2252
	opacity:1;
2253
	background:url(img/buildings.png?v=4);
2254
	background-repeat:no-repeat;
2255
	-webkit-transition: opacity 2s ease-out;
2256
	-moz-transition: opacity 2s ease-out;
2257
	-ms-transition: opacity 2s ease-out;
2258
	-o-transition: opacity 2s ease-out;
2259
	transition: opacity 2s ease-out;
2260
}
2261
.product.unlocked .icon.off
2262
{
2263
	opacity:0;
2264
}
2265
.product.locked .title {display:none;}
2266
.product .lockedTitle {display:none;}
2267
.product.locked .lockedTitle {display:block;}
2268

2269
.selling .product
2270
{
2271
	box-shadow:0px 0px 16px #c00 inset;
2272
}
2273
.selling .product:hover
2274
{
2275
	box-shadow:0px 0px 16px #f66 inset,0px 0px 1px #000;
2276
}
2277
.selling .product.enabled:active
2278
{
2279
	box-shadow:0px 0px 16px #f99 inset;
2280
}
2281

2282
.productButtons
2283
{
2284
	position:absolute;
2285
	right:-1px;
2286
	bottom:0px;
2287
	overflow:hidden;
2288
	z-index:10;
2289
}
2290
.productButton
2291
{
2292
	background:rgba(0,0,0,0.25);
2293
	box-shadow:-1px -1px 0px rgba(255,255,255,0.25),0px 0px 1px 1px rgba(0,0,0,0.5) inset;
2294
	border-top-left-radius:4px;
2295
	border-top-right-radius:4px;
2296
	padding:4px 8px;
2297
	font-size:11px;
2298
	font-weight:bold;
2299
	color:#ccc;
2300
	text-shadow:1px 1px 0px #000,-1px 1px 0px #000,1px -1px 0px #000,-1px -1px 0px #000;
2301
	cursor:pointer;
2302
	float:right;
2303
	position:relative;
2304
	margin-left:2px;
2305
	margin-top:2px;
2306
	min-height:11px;
2307
}
2308
.productLevel
2309
{
2310
	border-top-right-radius:0px;
2311
}
2312
.productButton:hover
2313
{
2314
	background:rgba(0,0,0,0.5);
2315
	color:#fff;
2316
}
2317
.productLevel
2318
{
2319
	width:65px;
2320
}
2321
.productLevel:after
2322
{
2323
	content:'';
2324
	display:block;
2325
	position:absolute;
2326
	right:8px;
2327
	bottom:0px;
2328
	background:url(img/levelUp.png);
2329
	width:33px;
2330
	height:19px;
2331
	opacity:0.75;
2332
}
2333
.productLevel:hover:after
2334
{
2335
	opacity:1;
2336
}
2337
.productButton.on{background:rgba(255,255,255,0.75);}
2338
.productMute{display:none;}
2339
.extraButtons .productMute{display:inline-block;}
2340

2341

2342
.lumpsOnly{display:none;}
2343
.lumpsOn .lumpsOnly{display:block;}
2344

2345
.storePre
2346
{
2347
	background:#999;
2348
	background:url(img/darkNoise.jpg);
2349
	box-shadow:0px 0px 4px #000 inset;
2350
	width:300px;
2351
	padding:4px 0px;
2352
	position:relative;
2353
	text-align:center;
2354
	font-variant:small-caps;
2355
	color:#fff;
2356
	font-weight:bold;
2357
	font-size:14px;
2358
	text-shadow:0px 1px 0px #000;
2359
}
2360
.storePreButton
2361
{
2362
	opacity:0.5;
2363
	cursor:pointer;
2364
}
2365
.storePreButton:hover,.storePreButton.selected
2366
{
2367
	text-shadow:0px 1px 0px #000,0px 0px 1px #fff,0px 0px 4px #fff;
2368
	opacity:1;
2369
}
2370
#storeBulk
2371
{
2372
	width:240px;
2373
	padding:0px;
2374
	padding-left:60px;
2375
	height:32px;
2376
	overflow:hidden;
2377
}
2378
.storeBulkMode,.storeBulkAmount
2379
{
2380
	float:left;
2381
}
2382
.storeBulkMode:hover,.storeBulkAmount:hover,.storeBulkMode.selected,.storeBulkAmount.selected
2383
{
2384
}
2385
.storeBulkMode
2386
{width:60px;padding:1px 0px;}
2387
#storeBulkBuy
2388
{position:absolute;left:0px;top:0px;}
2389
#storeBulkSell
2390
{position:absolute;left:0px;bottom:1px;}
2391
.storeBulkAmount
2392
{width:60px;padding:9px 0px;}
2393

2394
#buffs
2395
{
2396
	position:absolute;
2397
	top:0px;
2398
	right:0px;
2399
	z-index:100000;
2400
	transform-origin:100% 0%;
2401
	transform:scale(0.75);
2402
}
2403
.buff
2404
{
2405
	margin:12px;
2406
}
2407

2408
#shimmers
2409
{
2410
	position:absolute;
2411
	left:0px;
2412
	top:0px;
2413
	z-index:10000000000;
2414
	filter:drop-shadow(0px 4px 4px rgba(0,0,0,0.75));
2415
	-webkit-filter:drop-shadow(0px 4px 4px rgba(0,0,0,0.75));
2416
}
2417
.shimmer
2418
{
2419
	cursor:pointer;
2420
	position:absolute;
2421
	z-index:10000000000;
2422
	display:none;
2423
}
2424
.shimmer:hover
2425
{
2426
	filter:brightness(125%) drop-shadow(0px 0px 3px rgba(255,255,255,1));
2427
	-webkit-filter:brightness(125%) drop-shadow(0px 0px 3px rgba(255,255,255,1));
2428
}
2429

2430
.goldenCookie,.seasonPopup
2431
{
2432
	cursor:pointer;
2433
	position:absolute;
2434
	z-index:10000000000;
2435
	display:none;
2436
	filter:drop-shadow(0px 4px 4px rgba(0,0,0,0.75));
2437
	-webkit-filter:drop-shadow(0px 4px 4px rgba(0,0,0,0.75));
2438
}
2439

2440
.goldenCookie
2441
{
2442
	width:96px;
2443
	height:96px;
2444
	background:url(img/goldCookie.png);
2445
}
2446

2447
.seasonPopup
2448
{
2449
	width:256px;
2450
	height:256px;
2451
	background:url(img/goldCookie.png) center center no-repeat;
2452
}
2453
.goldenCookie:hover,.seasonPopup:hover
2454
{
2455
	filter:brightness(125%) drop-shadow(0px 3px 4px rgba(0,0,0,0.5));
2456
	-webkit-filter:brightness(125%) drop-shadow(0px 3px 4px rgba(0,0,0,0.5));
2457
}
2458

2459
.sparkles
2460
{
2461
	width:128px;
2462
	height:128px;
2463
	background:url(img/sparkles.jpg);
2464
	position:absolute;
2465
	z-index:10000000000;
2466
	display:none;
2467
	left:0px;
2468
	top:0px;
2469
	mix-blend-mode:screen;
2470
	pointer-events:none;
2471
}
2472

2473
#darken
2474
{
2475
	position:absolute;
2476
	left:0px;
2477
	top:0px;
2478
	right:0px;
2479
	bottom:0px;
2480
	background:rgba(0,0,0,0.5);
2481
	z-index:100000000;
2482
	display:none;
2483
}
2484

2485
#promptAnchor
2486
{
2487
	position:absolute;
2488
	left:50%;
2489
	top:125px;
2490
	z-index:1000000000;
2491
	display:none;
2492
	width:0px;
2493
	height:0px;
2494
}
2495
#prompt
2496
{
2497
	position:relative;
2498
	overflow:hidden;
2499
	width:250px;
2500
	padding:16px;
2501
	margin-left:-18px;
2502
	left:-125px;
2503
	text-align:center;
2504
}
2505
#promptContent{margin-top:-8px;}
2506
#promptContent h3{margin-bottom:6px;}
2507
#prompt h3,.prompt h3,h4,.fancyText
2508
{
2509
	text-align:center;
2510
	font-weight:bold;
2511
	font-size:14px;
2512
	position:relative;
2513
	font-variant:small-caps;
2514
	display:inline-block;
2515
}
2516
#prompt h3,.prompt h3,.fancyText
2517
{
2518
	color:#ece2b6;
2519
	text-shadow:0px 1px 0px #733726,0px 2px 0px #875626,0px 2px 1px #000,0px 2px 3px #000;
2520
	font-family:Georgia,serif;
2521
	font-size:15px;
2522
}
2523
.large .fancyText{font-size:20px;}
2524
#prompt h3:before,#prompt h3:after,.prompt h3:before,.prompt h3:after
2525
{
2526
	content:'';
2527
	display:block;
2528
	width:39px;
2529
	height:23px;
2530
	position:absolute;
2531
	top:-4px;
2532
}
2533
#prompt h3:before,.prompt h3:before
2534
{
2535
	background:url(img/featherLeft.png) no-repeat;
2536
	left:-39px;
2537
}
2538
#prompt h3:after,.prompt h3:after
2539
{
2540
	background:url(img/featherRight.png) no-repeat;
2541
	right:-39px;
2542
}
2543
#prompt textarea,#prompt input
2544
{
2545
	width:100%;
2546
	margin:0px;
2547
	position:relative;
2548
	left:-3px;
2549
}
2550

2551
#prompt.widePrompt
2552
{
2553
	width:500px;
2554
	left:-250px;
2555
}
2556

2557
#prompt.legacyPrompt
2558
{
2559
	width:400px;
2560
	left:-200px;
2561
}
2562

2563
#notes
2564
{
2565
	position:absolute;
2566
	/*left:0px;
2567
	bottom:128px;*/
2568
	left:50%;
2569
	margin-left:-125px;
2570
	bottom:0px;
2571
	z-index:100000000;
2572
}
2573
#notes .remaining {padding:3px;opacity:0.75;text-shadow:0px 0px 2px #000,0px 1px 0px #000;}
2574
.note
2575
{
2576
	position:relative;
2577
	overflow-y:hidden;
2578
	width:250px;
2579
	padding-right:16px;
2580
	padding-bottom:8px;
2581
	left:-18px;
2582
}
2583
.note .icon
2584
{
2585
	float:left;
2586
	margin-left:-4px;
2587
}
2588
.note h3
2589
{
2590
	font-weight:bold;
2591
	font-size:14px;
2592
	/*overflow-y:hidden;*/
2593
}
2594
.note h5
2595
{
2596
	opacity:0.6;
2597
	font-size:12px;
2598
}
2599
.note.haspic h3
2600
{
2601
	margin-top:4px;
2602
}
2603
.note.hasdesc h3
2604
{
2605
	/*border-bottom:1px solid rgba(255,255,255,0.5);
2606
	padding-bottom:2px;*/
2607
}
2608
.note.nodesc h3
2609
{
2610
	text-align:center;
2611
}
2612

2613
p
2614
{
2615
	text-indent:6px;
2616
	padding:2px 0px;
2617
}
2618

2619

2620
#sectionMiddle,#sectionRight,#cookies,#bakeryNameAnchor,#backgroundCanvas,.separatorRight,.separatorLeft
2621
{transition:opacity 1s;}
2622
.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
2623
{opacity:0;}
2624
#game.ascendIntro,#ascend
2625
{
2626
	/*background:url(img/starbg.jpg);
2627
	background-size:1024px 1024px;*/
2628
	/*background:url(img/starbg.jpg),url(img/starbg.jpg);
2629
	background-size:1024px 1024px,2048px 2048px;
2630
	background-blend-mode:hard-light;*/
2631
}/*animation:drift 60s linear 0s infinite;}*/
2632
#game.ascendIntro,#game.reincarnating{background:#000;}
2633

2634
.ascending #sectionMiddle,.ascending #sectionRight,.ascending #sectionLeft,.ascending .separatorLeft,.ascending .separatorRight,.reincarnating  #backgroundCanvas
2635
{display:none;opacity:0;}
2636

2637
#ascend
2638
{
2639
	display:none;
2640
	position:absolute;
2641
	left:0px;
2642
	top:0px;
2643
	right:0px;
2644
	bottom:0px;
2645
	z-index:100000;
2646
	cursor:move;
2647
	/*transition:background-position 0.2s ease-out,background-size 0.1s ease-out;*/
2648
}
2649
#ascendBG
2650
{
2651
	position:absolute;
2652
	left:0px;
2653
	top:0px;
2654
	width:100%;
2655
	height:100%;
2656
	background:url(img/shadedBorders.png);
2657
	background-size:100% 100%;
2658
}
2659
#ascendZoomable
2660
{
2661
	position:absolute;
2662
	left:0px;
2663
	top:0px;
2664
	margin-left:50%;
2665
	margin-top:25%;/* this should be 50%. not sure why it needs to be 25% */
2666
}
2667
.ascending #ascend
2668
{display:block;}
2669
#ascendContent
2670
{
2671
	position:absolute;
2672
	left:0px;
2673
	top:0px;
2674
	/*transition:transform 0.1s ease-out;*/
2675
}
2676
#ascendHelp
2677
{
2678
	position:absolute;
2679
	bottom:40px;
2680
	width:300px;
2681
	left:50%;
2682
	margin-left:-150px;
2683
	font-size:16px;
2684
	text-align:center;
2685
	z-index:100;
2686
}
2687
#ascendHelp a
2688
{
2689
	display:block;
2690
	border-radius:40px;
2691
	font-size:22px;
2692
	opacity:0.5;
2693
	cursor:pointer;
2694
	text-decoration:none;
2695
	background:#000;
2696
	color:#fff;
2697
	padding:8px 4px;
2698
	width:150px;
2699
	margin:5px auto;
2700
}
2701
#ascendHelp a:hover
2702
{
2703
	background:#fff;
2704
	color:#000;
2705
	opacity:0.75;
2706
}
2707
#ascendOverlay
2708
{
2709
	position:absolute;
2710
	top:0px;
2711
	left:50%;
2712
	height:100%;
2713
	z-index:100;
2714
	text-align:center;
2715
	filter:drop-shadow(0px 0px 4px #000);
2716
	/*-webkit-filter:drop-shadow(0px 0px 4px #000);*/
2717
	cursor:auto;
2718
}
2719

2720
#ascendHCs .price
2721
{font-weight:inherit;color:inherit;}
2722

2723
#ascendBox
2724
{
2725
	background:url(img/ascendBox.png);
2726
	width:344px;
2727
	height:162px;
2728
	position:absolute;
2729
	left:-172px;
2730
	top:0px;
2731
	text-align:center;
2732
}
2733
.ascendData
2734
{
2735
	width:60%;
2736
	margin:2px auto;
2737
	padding:6px;
2738
}
2739

2740
#ascendInfo
2741
{
2742
	background:url(img/ascendInfo.png);
2743
	width:308px;
2744
	height:94px;
2745
	position:absolute;
2746
	left:-154px;
2747
	bottom:0px;
2748
	text-align:center;
2749
}
2750

2751
@keyframes drift
2752
{
2753
	from {background-position:0px 0px;}
2754
	to {background-position:2048px -1024px;}
2755
}
2756

2757

2758

2759
.green{color:#3f0;}.green b{color:inherit;}
2760
.red{color:#f30;}.red b{color:inherit;}
2761
.gray{color:#999;}.gray b{color:inherit;}
2762

2763
#versionNumber
2764
{
2765
	position:absolute;
2766
	left:0px;
2767
	bottom:0px;
2768
	opacity:0.5;
2769
	margin:8px;
2770
	font-size:22px;
2771
	z-index:100000000;
2772
}
2773

2774
#alert
2775
{
2776
	display:none;
2777
	position:fixed;
2778
	bottom:-16px;
2779
	left:-16px;
2780
	z-index:100000000000;
2781
	padding:12px 12px 24px 24px;
2782
	font-size:14px;
2783
	background:#990;
2784
	border-radius:16px;
2785
	color:#fff;
2786
	box-shadow:0px 0px 4px #000, 0px 0px 4px #000 inset;
2787
	text-shadow:0px 0px 2px #000;
2788
	border:4px solid #fff;
2789
}
2790
#alert b {font-weight:bold;}
2791
#alert small {font-size:80%;}
2792

2793
#debug
2794
{
2795
	position:absolute;
2796
	left:0px;
2797
	top:0px;
2798
	z-index:1000000000;
2799
	display:none;
2800
}
2801
#devConsole
2802
{
2803
	position:relative;
2804
	left:-2px;
2805
	top:-2px;
2806
	width:24px;
2807
	height:32px;
2808
	overflow:hidden;
2809
	cursor:pointer;
2810
	opacity:0.5;
2811
	text-align:center;
2812
	transition:opacity 0.4s;
2813
}
2814
#devConsole:hover
2815
{
2816
	width:192px;
2817
	height:auto;
2818
	min-width:192px;
2819
	min-height:48px;
2820
	overflow:auto;
2821
	opacity:1;
2822
}
2823
#devConsole:hover>.icon
2824
{
2825
	display:none;
2826
}
2827
#devConsoleContent
2828
{display:none;cursor:auto;}
2829
#devConsole:hover>#devConsoleContent
2830
{
2831
	display:block;
2832
}
2833

2834
#debugLog
2835
{
2836
	min-width:150px;
2837
	background:rgba(0,0,0,0.5);
2838
	background:linear-gradient(to right,rgba(0,0,0,0.5),rgba(0,0,0,0.5) 90%,rgba(0,0,0,0));
2839
	padding:4px 4px 4px 8px;
2840
	font-size:10px;
2841
	text-shadow:0px 1px 0px #000;
2842
	color:#ccc;
2843
	pointer-events:none;
2844
}
2845

2846
.crisp
2847
{
2848
	image-rendering: optimizeSpeed;             /* Older versions of FF          */
2849
	image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
2850
	image-rendering: -webkit-optimize-contrast; /* Safari                        */
2851
	image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
2852
	image-rendering: pixelated;                 /* Future-browsers				 */
2853
	-ms-interpolation-mode: nearest-neighbor;   /* IE                            */
2854
}
2855

2856
/*show scrollbars in safari*/
2857
::-webkit-scrollbar
2858
{
2859
	-webkit-appearance:none;
2860
	width:17px;
2861
}
2862
::-webkit-scrollbar-track
2863
{
2864
	background-color:#eee;
2865
}
2866
::-webkit-scrollbar-thumb
2867
{
2868
	background-color:#bbb;
2869
	border:2px solid #eee;
2870
	box-shadow:0px 0px 0px 1px #999 inset;
2871
}
2872

2873
/*=====================================================================================
2874
SUPPORT
2875
=======================================================================================*/
2876
#support
2877
{
2878
	width:300px;
2879
	text-align:center;
2880
	margin:16px auto;
2881
}
2882
.supportComment
2883
{
2884
	font-size:10px;
2885
	opacity:0.75;
2886
	text-shadow:0px 0px 2px #000,0px 1px 0px #000;
2887
	padding:8px 0px;
2888
	text-align:center;
2889
}
2890
.supportPlaceholder {width:300px;height:250px;position:absolute;left:0px;top:0px;z-index:10;opacity:0.6;}
2891
.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;}
2892
#donateBox
2893
{
2894
	z-index:10000000;
2895
	position:absolute;
2896
	right:12px;
2897
	top:160px;
2898
	padding:8px 4px;
2899
	text-align:center;
2900
	width:120px;
2901
	display:none;
2902
	background:rgba(128,128,255,0.25);
2903
	box-shadow:0px 0px 4px 4px rgba(128,128,255,0.25);
2904
	border-radius:8px;
2905
	transition:box-shadow 0.25s,background 0.25s;
2906
}
2907
#donateBox:hover
2908
{
2909
	background:rgba(128,128,255,0.5);
2910
	box-shadow:0px 0px 4px 4px rgba(128,128,255,0.5);
2911
}
2912
#donateBox.on {display:block;}
2913

2914
#donate
2915
{
2916
	display:inline-block;
2917
}
2918
#donateButton
2919
{
2920
	border:0px;
2921
	display:inline-block;
2922
	border-radius:4px;
2923
	background:#fc6;
2924
	background:linear-gradient(to bottom,#fff 0%,#fc6 45%,#f90 50%,#f66 100%);
2925
	box-shadow:0px 0px 1px #fff inset,0px 0px 0px 1px #f66;
2926
	text-shadow:0px -1px 0px #fc6,0px 1px 0px #f66;
2927
	cursor:pointer;
2928
	font-size:9px;
2929
	font-weight:bold;
2930
	opacity:0.9;
2931
}
2932
#donateButton:hover
2933
{
2934
	border:0px;
2935
	box-shadow:0px 0px 4px #fff inset,0px 0px 0px 1px #f66;
2936
	opacity:1;
2937
}
2938
.highlightHover:hover{filter:brightness(125%);opacity:1;}
2939
.highlightHover:active{filter:brightness(85%);opacity:1;}
2940

2941
#supportSection
2942
{
2943
	font-size:11px;
2944
	margin:4px 0px;
2945
	line-height:110%;
2946
	color:rgba(200,200,255,1);
2947
	background:rgba(128,128,255,0.15);
2948
	box-shadow:0px 0px 4px 4px rgba(128,128,255,0.15);
2949
	transition:box-shadow 0.25s,background 0.25s;
2950
}
2951
#supportSection:hover
2952
{
2953
	background:rgba(128,128,255,0.2);
2954
	box-shadow:0px 0px 4px 4px rgba(128,128,255,0.2);
2955
}
2956

2957
.ifNoAds
2958
{
2959
	display:none;
2960
}
2961
.noAds .ifNoAds{display:block;}
2962
.noAds #support,.noAds #smallSupport,.noAds .supportComment{display:none;}
2963

2964
/*=====================================================================================
2965
NEW AD DISPLAY
2966
=======================================================================================*/
2967
/*
2968
#sectionRight
2969
{
2970
	right:160px;
2971
}
2972
#sectionMiddle
2973
{
2974
	right:478px;
2975
}
2976
#sectionAd
2977
{
2978
	height:100%;
2979
	position:absolute;
2980
	top:0px;
2981
	right:0px;
2982
	overflow-x:hidden;
2983
	width:160px;
2984
	background:url(img/darkNoise.jpg);
2985
}
2986
.separatorRight
2987
{
2988
	right:477px;
2989
}
2990
#sectionAd .supportPlaceholder {width:160px;}
2991
*/
2992

2993
/*=====================================================================================
2994
STOP THE FANCY
2995
=======================================================================================*/
2996
.noFancy *
2997
{
2998
	text-shadow:none!important;
2999
	box-shadow:none!important;
3000
}
3001
.noFancy .price
3002
{
3003
	text-shadow:0px 0px 4px #000,0px 1px 0px #000!important;
3004
}
3005
.noFilters *
3006
{
3007
	filter:none!important;
3008
	-webkit-filter:none!important;
3009
}
3010

3011
/*=====================================================================================
3012
MOBILE
3013
=======================================================================================*/
3014
.mobile #sectionLeft,.mobile #sectionMiddle,.mobile #sectionRight
3015
{
3016
	width:100%;
3017
	position:absolute;
3018
	left:0px;
3019
	top:128px;
3020
	right:0px;
3021
	bottom:64px;
3022
	display:none;
3023
}
3024
.mobile .separatorLeft,.mobile .separatorRight
3025
{display:none;}
3026

3027
.mobile .focusLeft #sectionLeft{display:block;}
3028
.mobile .focusMiddle #sectionMiddle{display:block;}
3029
.mobile .focusRight #sectionRight{display:block;}
3030
.mobile .focusMenu #sectionMiddle{display:block;}
3031
.mobile #sectionMiddle
3032
{
3033
	margin:0px;
3034
	padding:0px;
3035
}
3036
.mobile #storeTitle,.mobile #upgrades,.mobile #toggleUpgrades,.mobile #techUpgrades
3037
{
3038
	width:100%;
3039
}
3040
.mobile .product
3041
{
3042
	width:100%;
3043
	background-size:100% 400%;
3044
}
3045

3046
.mobile #game{top:0px;}
3047
.mobile #topBar,.mobile #versionNumber{display:none;}
3048

3049
#focusButtons
3050
{
3051
	display:none;
3052
	position:fixed;
3053
	left:0px;
3054
	bottom:0px;
3055
	height:64px;
3056
	width:100%;
3057
	background:url(img/darkNoise.jpg);
3058
	z-index:1000000;
3059
	font-size:32px;
3060
}
3061
#focusButtons:before
3062
{
3063
	content:'';
3064
	display:block;
3065
	position:absolute;
3066
	left:0px;
3067
	top:-16px;
3068
	background:url(img/blackGradient.png) repeat-x bottom;
3069
	background-size:100% 100%;
3070
	width:100%;
3071
	height:16px;
3072
	opacity:0.5;
3073
	pointer-events:none;
3074
}
3075
#focusButtons div
3076
{
3077
	width:25%;
3078
	height:50%;
3079
	cursor:pointer;
3080
	float:left;
3081
	background:url(img/buttonTile.jpg);
3082
	background-size:100% 400%;
3083
	padding:16px 0px;
3084
	text-align:center;
3085
	opacity:0.5;
3086
}
3087
#focusButtons div:nth-child(4n-3) {background-position:0px 100%;}
3088
#focusButtons div:nth-child(4n-2) {background-position:0px 200%;}
3089
#focusButtons div:nth-child(4n-1) {background-position:0px 300%;}
3090
#focusButtons div:hover
3091
{
3092
	box-shadow:0px 0px 16px #fff inset,0px 0px 1px #000;
3093
	z-index:20;
3094
}
3095
#focusButtons div:active
3096
{
3097
	box-shadow:0px 0px 16px #000 inset;
3098
}
3099
.focusLeft #focusButtons #focusLeft,.focusMiddle #focusButtons #focusMiddle,.focusRight #focusButtons #focusRight,.focusMenu #focusButtons #focusMenu
3100
{
3101
	opacity:1;
3102
	z-index:20;
3103
	box-shadow:0px 0px 8px #fff;
3104
}
3105

3106
#compactOverlay
3107
{
3108
	display:none;
3109
	position:fixed;
3110
	left:0px;
3111
	top:0px;
3112
	height:128px;
3113
	width:100%;
3114
	background:url(img/darkNoise.jpg);
3115
	z-index:1000000;
3116
	text-align:center;
3117
	font-size:16px;
3118
}
3119
#compactCommentsText
3120
{
3121
	padding:8px 0px;
3122
	opacity:0.8;
3123
	position:absolute;
3124
	width:100%;
3125
	text-align:center;
3126
	bottom:16px;
3127
	left:0px;
3128
}
3129
#compactCookies
3130
{
3131
	padding:8px 0px;
3132
	position:absolute;
3133
	width:100%;
3134
	height:32px;
3135
	top:0px;
3136
	left:0px;
3137
	font-size:24px;
3138
	text-shadow:0px 0px 12px rgba(255,255,255,0.5);
3139
	background:rgba(255,255,255,0.05);
3140
}
3141

3142
.mobile .row {padding-bottom:16px;}
3143

3144
.mobile #comments, .mobile #cookies {display:none;}
3145
.mobile #focusButtons, .mobile #compactOverlay/*, .mobile #buildingsTitle*/
3146
{display:block;}
3147

3148
/**{overflow:hidden!important;}*/
3149

3150
Product

Resources

Company
