mirror of https://github.com/ozh/cookieclicker
3337 lines
63 KiB
CSS
3337 lines
63 KiB
CSS
/* reset CSS */
|
|
html, body, div, span, applet, object, iframe,
|
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
a, abbr, acronym, address, big, cite, code,
|
|
del, dfn, em, img, ins, kbd, q, s, samp,
|
|
small, strike, strong, sub, sup, tt, var,
|
|
b, u, i, center,
|
|
dl, dt, dd, ol, ul, li,
|
|
fieldset, form, label, legend,
|
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
article, aside, canvas, details, embed,
|
|
figure, figcaption, footer, header, hgroup,
|
|
menu, nav, output, ruby, section, summary,
|
|
time, mark, audio, video {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
font-size: 100%;
|
|
font: inherit;
|
|
vertical-align: baseline;
|
|
}
|
|
/* HTML5 display-role reset for older browsers */
|
|
article, aside, details, figcaption, figure,
|
|
footer, header, hgroup, menu, nav, section {
|
|
display: block;
|
|
}
|
|
body {
|
|
line-height: 1;
|
|
}
|
|
ol, ul {
|
|
list-style: none;
|
|
}
|
|
blockquote, q {
|
|
quotes: none;
|
|
}
|
|
blockquote:before, blockquote:after,
|
|
q:before, q:after {
|
|
content: '';
|
|
content: none;
|
|
}
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
button {outline:none;border:none;}
|
|
button:focus {outline:1px solid rgba(255,200,100,0.5);outline-offset:-1px;}
|
|
|
|
|
|
/*=====================================================================================
|
|
BASE
|
|
=======================================================================================*/
|
|
html,body
|
|
{
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
|
|
body
|
|
{
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: -moz-none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
touch-action: manipulation;
|
|
|
|
color:#fff;
|
|
background:#000 url(img/darkNoise.jpg);
|
|
font-family:Tahoma,Arial,sans-serif;
|
|
font-size:13px;
|
|
|
|
overflow:hidden;
|
|
}
|
|
.selectable
|
|
{
|
|
-webkit-touch-callout: text;
|
|
-webkit-user-select: text;
|
|
-khtml-user-select: text;
|
|
-moz-user-select: text;
|
|
-ms-user-select: text;
|
|
user-select: text;
|
|
}
|
|
|
|
#wrapper
|
|
{
|
|
width:100%;
|
|
height:100%;
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
right:0px;
|
|
bottom:0px;
|
|
/*min-width:1280px;*/
|
|
transform-origin:0 0;
|
|
}
|
|
|
|
small
|
|
{
|
|
font-size:80%;
|
|
}
|
|
|
|
a,a:visited
|
|
{
|
|
text-decoration:underline;
|
|
cursor:pointer;
|
|
color:#ccc;
|
|
}
|
|
a:hover
|
|
{
|
|
text-shadow:0px 0px 3px #fff;
|
|
color:#fff;
|
|
}
|
|
a:active
|
|
{
|
|
opacity:0.8;
|
|
background:transparent;
|
|
}
|
|
|
|
.inset
|
|
{
|
|
/*box-shadow:0px 0px 12px #000 inset;*/
|
|
}
|
|
|
|
.titleFont,.title,.section,.lockedTitle,.smallFancyButton
|
|
{
|
|
font-family: 'Merriweather', Georgia,serif;
|
|
}
|
|
.title,.section,.lockedTitle
|
|
{
|
|
font-size:28px;
|
|
text-shadow:0px 1px 4px #000;
|
|
color:#fff;
|
|
}
|
|
|
|
/*=====================================================================================
|
|
SECTIONS
|
|
=======================================================================================*/
|
|
.section
|
|
{
|
|
font-variant:small-caps;
|
|
text-align:center;
|
|
padding:0px 16px;
|
|
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));
|
|
margin:12px 0px;
|
|
text-shadow:0px -2px 6px rgba(255,255,200,0.6),0px 1px 0px rgba(100,100,100,1),0px 2px 4px rgba(0,0,0,1);
|
|
}
|
|
.section:after
|
|
{
|
|
content:'';
|
|
display:block;
|
|
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));
|
|
height:1px;
|
|
margin:6px 0px;
|
|
}
|
|
.section:before
|
|
{
|
|
content:'';
|
|
display:block;
|
|
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));
|
|
height:1px;
|
|
margin:6px 0px;
|
|
}
|
|
.subsection
|
|
{
|
|
padding:8px 0px;
|
|
font-size:14px;
|
|
}
|
|
.subsection div.title
|
|
{
|
|
font-size:22px;
|
|
padding-left:16px;
|
|
margin-bottom:8px;
|
|
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));
|
|
}
|
|
.subsection div.title:after
|
|
{
|
|
content:'';
|
|
display:block;
|
|
background:linear-gradient(to right,rgba(255,255,255,0.25),rgba(255,255,255,0));
|
|
height:1px;
|
|
width:50%;
|
|
margin:6px 0px;
|
|
margin-left:-16px;
|
|
}
|
|
.subsection div.title:before
|
|
{
|
|
content:'';
|
|
display:block;
|
|
background:linear-gradient(to right,rgba(255,255,255,0.25),rgba(255,255,255,0));
|
|
height:1px;
|
|
width:50%;
|
|
margin:6px 0px;
|
|
margin-left:-16px;
|
|
}
|
|
.update
|
|
{
|
|
-webkit-touch-callout: auto;
|
|
-webkit-user-select: auto;
|
|
-khtml-user-select: auto;
|
|
-moz-user-select: auto;
|
|
-moz-user-select: auto;
|
|
-ms-user-select: auto;
|
|
user-select: auto;
|
|
}
|
|
.update .title
|
|
{
|
|
color:#69c;
|
|
}
|
|
.update.small .title
|
|
{
|
|
font-size:16px;
|
|
opacity:0.8;
|
|
color:#fff;
|
|
}
|
|
.listing
|
|
{
|
|
padding:3px 16px;
|
|
font-size:13px;
|
|
}
|
|
.listing b
|
|
{
|
|
font-weight:bold;
|
|
opacity:0.6;
|
|
}
|
|
.listing small
|
|
{
|
|
font-size:11px;
|
|
opacity:0.9;
|
|
}
|
|
.listing label
|
|
{
|
|
/*
|
|
font-size:12px;
|
|
border-bottom:1px solid rgba(255,255,255,0.25);
|
|
border-right:1px solid rgba(255,255,255,0.25);
|
|
opacity:0.5;
|
|
padding-left:16px;
|
|
padding-bottom:2px;
|
|
padding-right:4px;
|
|
position:relative;
|
|
left:-4px;
|
|
top:-2px;
|
|
background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0.5));
|
|
*/
|
|
font-size:11px;
|
|
color:rgba(255,255,255,0.5);
|
|
border-bottom:1px dashed rgba(255,255,255,0.25);
|
|
padding:2px 8px;
|
|
}
|
|
|
|
.hidden
|
|
{
|
|
visibility:hidden;
|
|
}
|
|
.toggledOff
|
|
{
|
|
opacity:0;
|
|
display:none;
|
|
}
|
|
.listing:hover .hidden
|
|
{
|
|
visibility:visible;
|
|
}
|
|
|
|
.optionBox
|
|
{
|
|
text-align:center;
|
|
clear:both;
|
|
margin-bottom:-12px;
|
|
overflow:hidden;
|
|
}
|
|
.optionBox .option
|
|
{
|
|
}
|
|
.optionBox .option.focused
|
|
{
|
|
text-decoration:underline;
|
|
}
|
|
a.option.big
|
|
{
|
|
font-size:30px;
|
|
margin:auto;
|
|
padding:8px 16px;
|
|
width:80%;
|
|
}
|
|
a.option.framed.large small,.particle small {font-size:65%;}
|
|
a.option.framed.large
|
|
{
|
|
font-size:20px;
|
|
margin:4px auto;
|
|
padding:6px 12px;
|
|
background:#058;
|
|
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;
|
|
text-shadow:0px 1px 2px #000;
|
|
}
|
|
a.option.framed.large:hover
|
|
{
|
|
background:#0cf;
|
|
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;
|
|
text-shadow:0px 1px 2px #000;
|
|
color:#fff;
|
|
}
|
|
a.option.framed.large.red
|
|
{
|
|
background:#c30;
|
|
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;
|
|
}
|
|
a.option.framed.large.red:hover
|
|
{
|
|
background:#f64;
|
|
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;
|
|
}
|
|
a.option,.info a,a.smallFancyButton
|
|
{
|
|
display:inline-block;
|
|
border:1px solid #ccc;
|
|
background:#000;
|
|
margin:2px 4px 2px 0px;
|
|
color:#ccc;
|
|
font-size:12px;
|
|
padding:4px 8px;
|
|
text-decoration:none;
|
|
}
|
|
a.option.off {opacity:0.5;}
|
|
a.option.disabled {pointer-events:none;filter:grayscale(100%);opacity:0.5;}
|
|
a.option:hover,.info a:hover,a.smallFancyButton:hover
|
|
{
|
|
border-color:#fff;
|
|
color:#fff;
|
|
text-shadow:none;
|
|
}
|
|
a.option:active,.info a:active,a.smallFancyButton:active
|
|
{
|
|
background-color:#333;
|
|
}
|
|
.warning,a.option.warning
|
|
{
|
|
color:#c00;
|
|
border-color:#c00;
|
|
}
|
|
a.option.warning:hover
|
|
{
|
|
border-color:#f33;
|
|
color:#f33;
|
|
}
|
|
a.option.warning:active
|
|
{
|
|
background-color:#300;
|
|
}
|
|
|
|
.neato,a.option.neato
|
|
{
|
|
color:#096;
|
|
border-color:#096;
|
|
}
|
|
a.option.neato:hover
|
|
{
|
|
border-color:#3c9;
|
|
color:#3c9;
|
|
}
|
|
a.option.neato:active
|
|
{
|
|
background-color:#032;
|
|
}
|
|
.info a
|
|
{
|
|
border-color:#666;
|
|
background:#eee;
|
|
color:#666;
|
|
padding:2px 6px;
|
|
}
|
|
.info a:hover
|
|
{
|
|
border-color:#000;
|
|
background-color:#fff;
|
|
color:#000;
|
|
}
|
|
.info a:active
|
|
{
|
|
background-color:#999;
|
|
}
|
|
|
|
/*=====================================================================================
|
|
oh forget it this is just a mess
|
|
=======================================================================================*/
|
|
#backgroundLayers, #backgroundLayers div
|
|
{
|
|
width:100%;
|
|
height:100%;
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
}
|
|
|
|
#backgroundCanvas,#backgroundLeftCanvas
|
|
{
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
}
|
|
|
|
.offWeb .supportComment,.offWeb .adBanner,.offWeb #support,.offWeb #smallSupport,.offWeb .ad{display:none;}
|
|
|
|
.offWeb #topBar{display:none;}
|
|
.onWeb #topBar{visibility:visible;}
|
|
#topBar
|
|
{
|
|
visibility:hidden;
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
width:100%;
|
|
height:32px;
|
|
background:url(img/darkNoiseTopBar.jpg) repeat-x bottom;
|
|
color:#ccc;
|
|
}
|
|
#topBar>div
|
|
{
|
|
display:inline-block;
|
|
float:left;
|
|
border-right:1px solid #000;
|
|
box-shadow:0px 0px 3px 1px rgba(255,255,255,0.2) inset;
|
|
padding:7px 8px 9px 8px;
|
|
}
|
|
#topBar a
|
|
{color:#fff;}
|
|
#topBar a.blueLink
|
|
{color:#06c;}
|
|
#topBar a.blueLink:hover
|
|
{color:#28f;text-shadow:0px 0px 3px #06c;}
|
|
#topBar a.lightblueLink
|
|
{color:#6ad3ff;}
|
|
#topBar a.lightblueLink:hover
|
|
{color:#74fffd;text-shadow:0px 0px 3px #6ad3ff;}
|
|
a.orangeLink,#topBar a.orangeLink
|
|
{color:#f65f4d;}
|
|
a.orangeLink:hover,#topBar a.orangeLink:hover
|
|
{color:#ff9580;text-shadow:0px 0px 3px #f65f4d;}
|
|
|
|
#topBar>#links
|
|
{
|
|
position:relative;
|
|
z-index:10000000;
|
|
float:right;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.hoverable
|
|
{
|
|
text-align:left;
|
|
opacity:0;
|
|
transition:max-height 0.25s ease-out,opacity 0.25s ease-out;
|
|
position:absolute;
|
|
left:0px;
|
|
top:32px;
|
|
padding-right:1px;
|
|
width:100%;
|
|
max-height:0px;
|
|
overflow:hidden;
|
|
color:#fff;
|
|
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);
|
|
background:url(img/darkNoise.jpg);
|
|
}
|
|
.hoverer:hover>.hoverable
|
|
{
|
|
opacity:1;
|
|
max-height:400px;
|
|
}
|
|
.hoverable>div
|
|
{
|
|
padding:8px 12px;
|
|
}
|
|
.hoverable a
|
|
{
|
|
text-shadow:none;
|
|
display:block;
|
|
padding:5px 8px 7px 8px;
|
|
}
|
|
.hoverable a:nth-child(odd)
|
|
{
|
|
background:rgba(255,255,255,0.05);
|
|
}
|
|
.hoverable a:hover
|
|
{
|
|
text-shadow:none;
|
|
background:rgba(255,255,255,0.2);
|
|
box-shadow:0px 0px 4px rgba(255,255,255,0.2) inset,0px 0px 2px 1px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
|
|
#offGameMessageWrap
|
|
{
|
|
display:table;
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
height:100%;
|
|
width:100%;
|
|
background:#111 url(img/darkNoise.jpg);
|
|
background:url(img/shadedBorders.png) left top/100% 100%,#111 url(img/darkNoise.jpg);
|
|
text-align:center;
|
|
z-index:1000000000;
|
|
line-height:150%;
|
|
font-size:20px;
|
|
}
|
|
#offGameMessage
|
|
{
|
|
display:table-cell;
|
|
vertical-align:middle;
|
|
position:relative;
|
|
}
|
|
#loader
|
|
{
|
|
position:relative;
|
|
padding:32px;
|
|
padding-top:110px;
|
|
animation-name:appear;
|
|
animation-iteration-count:1;
|
|
animation-timing-function:ease-out;
|
|
animation-duration:0.5s;
|
|
}
|
|
@keyframes appear
|
|
{
|
|
from {opacity:0;top:20px;}
|
|
to {opacity:1;top:0px;}
|
|
}
|
|
#loading
|
|
{
|
|
text-shadow:0px 0px 3px rgba(255,255,255,0.5),0px 0px 20px #39f;
|
|
animation-name:blink;
|
|
animation-iteration-count:infinite;
|
|
animation-timing-function:ease-in-out;
|
|
animation-duration:0.75s;
|
|
}
|
|
.blinking{animation-name:blink;
|
|
animation-iteration-count:infinite;
|
|
animation-timing-function:ease-in-out;
|
|
animation-duration:0.75s;}
|
|
@keyframes blink
|
|
{
|
|
0% {opacity:0.5;}
|
|
50% {opacity:1;}
|
|
100% {opacity:0.5;}
|
|
}
|
|
#ifIE9{display:none;}
|
|
#failedToLoad
|
|
{
|
|
text-shadow:0px 0px 3px rgba(255,255,255,0.5),0px 0px 20px #f33;
|
|
animation-name:appearLater;
|
|
animation-iteration-count:1;
|
|
animation-timing-function:ease-out;
|
|
animation-duration:15s;
|
|
}
|
|
@keyframes appearLater
|
|
{
|
|
0% {opacity:0;}
|
|
95% {opacity:0;}
|
|
100% {opacity:1;}
|
|
}
|
|
.spinnyBig,.spinnySmall
|
|
{
|
|
display:block;
|
|
width:100px;
|
|
height:100px;
|
|
position:absolute;
|
|
left:50%;
|
|
top:0px;
|
|
margin-left:-50px;
|
|
animation-name:loadSpin;
|
|
animation-iteration-count:infinite;
|
|
animation-timing-function:ease-in-out;
|
|
}
|
|
.spinnyBig
|
|
{
|
|
background:url(img/spinnyBig.png);
|
|
animation-duration:5s;
|
|
}
|
|
.spinnySmall
|
|
{
|
|
background:url(img/spinnySmall.png);
|
|
animation-duration:9s;
|
|
}
|
|
@keyframes loadSpin
|
|
{
|
|
0% {transform:rotate(0deg);}
|
|
100% {transform:rotate(360deg);}
|
|
}
|
|
|
|
.langSelectButton
|
|
{
|
|
background:rgba(50,50,50,0.25);
|
|
text-shadow:0px 1px 2px #000;
|
|
box-shadow:0px 1px 0px rgba(255,255,255,0.5) inset, 0px 1px 4px rgba(128,255,255,0.2) inset,0px 2px 2px rgba(0,0,0,1);
|
|
padding:1px 6px;
|
|
margin:2px auto;
|
|
width:200px;
|
|
font-size:14px;
|
|
text-decoration:underline;
|
|
color:rgba(255,255,255,0.8);
|
|
transition:color 0.2s,box-shadow 0.2s;
|
|
cursor:pointer;
|
|
z-index:1;
|
|
position:relative;
|
|
border-radius:3px;
|
|
}
|
|
.langSelectButton:hover,.langSelectButton.selected
|
|
{
|
|
background:rgba(50,50,50,0.5);
|
|
box-shadow:0px 0px 0px 1px rgba(255,255,255,1) inset, 0px 1px 4px 2px rgba(128,255,255,0.6) inset,0px 4px 2px 2px rgba(0,0,0,1);
|
|
z-index:10;
|
|
color:rgba(255,255,255,1);
|
|
}
|
|
.langSelectButton:hover:before
|
|
{
|
|
content:'';
|
|
width:22px;
|
|
height:22px;
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
background:url(img/tinyglobe.gif);
|
|
pointer-events:none;
|
|
display:block;
|
|
transform:scale(0.75);
|
|
}
|
|
|
|
#game
|
|
{
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
right:0px;
|
|
bottom:0px;
|
|
overflow:hidden;
|
|
}
|
|
.onWeb #game{top:32px;}
|
|
.offWeb #game{top:0px;}
|
|
#sectionLeft
|
|
{
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
width:30%;
|
|
bottom:0px;
|
|
min-width:100px;
|
|
/*overflow:hidden;*/
|
|
}
|
|
/*#sectionLeftExtra{position:absolute;left:0px;top:0px;}*/
|
|
#sectionMiddle
|
|
{
|
|
position:absolute;
|
|
left:30%;
|
|
padding-left:16px;
|
|
margin-right:15px;
|
|
top:0px;
|
|
right:318px;
|
|
bottom:0px;
|
|
min-width:100px;
|
|
overflow:hidden;
|
|
}
|
|
#centerArea
|
|
{
|
|
overflow-x:hidden;
|
|
overflow-y:scroll;
|
|
position:absolute;
|
|
top:112px;
|
|
left:16px;
|
|
bottom:0px;
|
|
right:0px;
|
|
}
|
|
#game.onMenu #centerArea
|
|
{
|
|
background:#000 url(img/darkNoise.jpg);
|
|
background-image:url(img/shadedBorders.png),url(img/darkNoise.jpg);
|
|
background-size:100% 100%,auto;
|
|
background-color:#000;
|
|
}
|
|
#sectionRight
|
|
{
|
|
height:100%;
|
|
position:absolute;
|
|
top:0px;
|
|
right:0px;
|
|
overflow-x:hidden;
|
|
overflow-y:scroll;
|
|
/*background:url(img/panelBG.png);*/
|
|
background:rgba(0,0,0,0.5);
|
|
}
|
|
|
|
#sectionLeft .blackGradient
|
|
{
|
|
background:url(img/blackGradient.png) repeat-x bottom;
|
|
position:absolute;
|
|
left:0px;
|
|
right:0px;
|
|
top:300px;
|
|
height:640px;
|
|
}
|
|
#sectionLeft .blackFiller
|
|
{
|
|
background:#000;
|
|
position:absolute;
|
|
left:0px;
|
|
right:0px;
|
|
top:940px;
|
|
bottom:0px;
|
|
}
|
|
|
|
|
|
.inner
|
|
{
|
|
box-shadow:0px 0px 0px 1px rgba(255,255,255,0.2),0px 2px 4px 2px rgba(0,0,0,0.5);
|
|
}
|
|
.zebra:nth-child(even)
|
|
{
|
|
background:rgba(255,255,255,0.05);
|
|
}
|
|
.zebra.selected
|
|
{
|
|
background:rgba(255,255,255,0.1);
|
|
box-shadow:0px 0px 0px 1px rgba(255,255,255,0.5) inset;
|
|
}
|
|
.mouseOver{cursor:pointer;}
|
|
.mouseOver:hover
|
|
{
|
|
filter:brightness(125%);
|
|
background:rgba(255,255,255,0.07);
|
|
text-shadow:0px -1px 6px #fff;
|
|
}
|
|
.mouseOver:active
|
|
{
|
|
filter:brightness(75%);
|
|
background:rgba(0,0,0,0.07);
|
|
}
|
|
.mouseOverScale
|
|
{
|
|
cursor:pointer;
|
|
transition:transform 0.1s;
|
|
}
|
|
.mouseOverScale:hover
|
|
{
|
|
transform:scale(1.1);
|
|
color:#fff;
|
|
}
|
|
.mouseOverScale:active
|
|
{
|
|
transform:scale(1);
|
|
}
|
|
|
|
/* this is a mess */
|
|
.framed,a.option,.sliderBox,.smallFramed
|
|
{
|
|
border:1px solid #e2dd48;
|
|
background:#000 url(img/darkNoise.jpg);
|
|
background-image:/*linear-gradient(rgba(255,255,255,0.05),rgba(0,0,0,0.4)),*/url(img/shadedBordersSoft.png),url(img/darkNoise.jpg);
|
|
background-size:/*100% 100%,*/100% 100%,auto;
|
|
background-color:#000;
|
|
border-radius:2px;
|
|
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;
|
|
text-shadow:0px 1px 1px #000;
|
|
color:#ccc;
|
|
line-height:100%;
|
|
}
|
|
.framed,a.option,a.option.framed,a.option.framed:hover,.smallFramed,a.smallFancyButton
|
|
{
|
|
/*border-color:#dac56e #c07a36 #a44e36 #c07a36;*/
|
|
/*border:1px solid #e2dd48;*/
|
|
border-color:#ece2b6 #875526 #733726 #dfbc9a;
|
|
}
|
|
.smallFramed
|
|
{border-radius:8px;}
|
|
a.option,textarea,input[type="text"],.sliderBox,a.smallFancyButton
|
|
{
|
|
border:1px solid #e2dd48;
|
|
border-color:#ece2b6 #875526 #733726 #dfbc9a;
|
|
border-radius:2px;
|
|
}
|
|
textarea,input[type="text"]
|
|
{
|
|
border-radius:4px;
|
|
box-shadow:0px 0px 0px 1px rgba(0,0,0,0.5) inset,0px 1px 2px rgba(0,0,0,0.5) inset;
|
|
}
|
|
textarea:read-only,input[type="text"]:read-only
|
|
{
|
|
background:transparent;
|
|
color:inherit;
|
|
text-shadow:0px 1px 0px #000;
|
|
resize:none;
|
|
border:1px solid rgba(255,255,255,0.25);
|
|
}
|
|
select,option{font-weight:bold;font-size:11px;margin:2px 4px 2px 0px;}
|
|
select{padding:2px;border-radius:4px;}
|
|
.smallFancyButton
|
|
{
|
|
font-variant:small-caps;
|
|
font-weight:bold;
|
|
font-size:13px;
|
|
}
|
|
a.option.smallFancyButton
|
|
{
|
|
vertical-align:middle;
|
|
width:130px;
|
|
text-align:right;
|
|
}
|
|
|
|
.prefButton{position:relative;}
|
|
.prefButton:after{content:'';background:#fff;pointer-events:none;width:3px;height:3px;display:inline-block;border-radius:4px;box-shadow:0px 0px 2px 0px #3cf,0px 0px 6px 1px #33f;position:absolute;right:3px;top:50%;margin-top:-1px;}
|
|
.prefButton.off:after{background:rgba(255,255,255,0.15);box-shadow:1px 1px 0px rgba(255,255,255,0.3);}
|
|
|
|
.tight
|
|
{
|
|
box-sizing:border-box;
|
|
overflow:hidden;
|
|
text-align:center;
|
|
}
|
|
.tight .option
|
|
{
|
|
box-sizing:border-box;
|
|
width:100%;clear:both;
|
|
margin:1px 0px;
|
|
font-size:11px;
|
|
}
|
|
.tight .option.halfLeft
|
|
{
|
|
width:50%;
|
|
float:left;clear:left;
|
|
}
|
|
.tight .option.halfRight
|
|
{
|
|
width:50%;
|
|
float:right;clear:right;
|
|
}
|
|
#prompt .tightInput
|
|
{
|
|
margin:4px;
|
|
margin-top:0px;
|
|
padding:4px 8px;
|
|
width:100%;
|
|
box-sizing:border-box;
|
|
font-size:11px;
|
|
}
|
|
|
|
.framed,a.option.framed
|
|
{
|
|
padding:4px 8px;
|
|
margin:4px;
|
|
border:3px solid transparent;
|
|
border-image:url(img/frameBorder.png) 3 round;
|
|
border-radius:2px;
|
|
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;
|
|
-webkit-transition: opacity 0.1s ease-out;
|
|
-moz-transition: opacity 0.1s ease-out;
|
|
-ms-transition: opacity 0.1s ease-out;
|
|
-o-transition: opacity 0.1s ease-out;
|
|
transition: opacity 0.1s ease-out;
|
|
}
|
|
|
|
.sliderBox
|
|
{
|
|
padding:4px 8px;
|
|
width:200px;max-width:100%;
|
|
display:inline-block;
|
|
margin-bottom:2px;
|
|
margin-right:2px;
|
|
}
|
|
.sliderBox>div
|
|
{
|
|
margin-bottom:4px;
|
|
}
|
|
.sliderBox>input
|
|
{
|
|
display:block;
|
|
margin:2px auto;
|
|
}
|
|
|
|
/* why, CSS? why? */
|
|
input[type=range]
|
|
{
|
|
-webkit-appearance:none;
|
|
width:100%;
|
|
height:12px;
|
|
margin:0px 0px;
|
|
border:0px solid #000;
|
|
cursor:pointer;
|
|
background:transparent;
|
|
}
|
|
input[type=range]:focus{outline:none;}
|
|
input[type=range]::-webkit-slider-runnable-track
|
|
{
|
|
width:100%;
|
|
height:12px;
|
|
cursor:pointer;
|
|
background:#999;
|
|
border:0px solid #000;
|
|
border-radius:4px;
|
|
box-shadow:0px 0px 4px #000,0px 2px 3px rgba(0,0,0,0.5) inset;
|
|
}
|
|
input[type=range]::-webkit-slider-thumb
|
|
{
|
|
border:0px solid #000;
|
|
height:12px;
|
|
width:12px;
|
|
background:#ccc;
|
|
box-shadow:0px 0px 4px #fff inset,0px 1px 3px 1px rgba(0,0,0,0.5);
|
|
cursor:pointer;
|
|
-webkit-appearance:none;
|
|
margin-top:0px;
|
|
border-radius:4px;
|
|
}
|
|
input[type=range]:active::-webkit-slider-thumb,input[type=range]:hover::-webkit-slider-thumb {background:#fff;}
|
|
|
|
input[type=range]::-moz-range-track
|
|
{
|
|
width:100%;
|
|
height:12px;
|
|
cursor:pointer;
|
|
background:#999;
|
|
border:0px solid #000;
|
|
border-radius:4px;
|
|
box-shadow:0px 0px 4px #000,0px 2px 3px rgba(0,0,0,0.5) inset;
|
|
}
|
|
input[type=range]::-moz-range-thumb
|
|
{
|
|
border:0px solid #000;
|
|
height:12px;
|
|
width:12px;
|
|
background:#ccc;
|
|
box-shadow:0px 0px 4px #fff inset,0px 1px 3px 1px rgba(0,0,0,0.5);
|
|
cursor:pointer;
|
|
-webkit-appearance:none;
|
|
margin-top:0px;
|
|
border-radius:4px;
|
|
}
|
|
input[type=range]:active::-moz-range-thumb,input[type=range]:hover::-moz-range-thumb {background:#fff;}
|
|
|
|
input[type=range]::-ms-track
|
|
{
|
|
width:100%;
|
|
height:12px;
|
|
cursor:pointer;
|
|
background:#999;
|
|
border:0px solid #000;
|
|
border-radius:4px;
|
|
box-shadow:0px 0px 4px #000,0px 2px 3px rgba(0,0,0,0.5) inset;
|
|
}
|
|
input[type=range]::-ms-thumb
|
|
{
|
|
border:0px solid #000;
|
|
height:12px;
|
|
width:12px;
|
|
background:#ccc;
|
|
box-shadow:0px 0px 4px #fff inset,0px 1px 3px 1px rgba(0,0,0,0.5);
|
|
cursor:pointer;
|
|
-webkit-appearance:none;
|
|
margin-top:0px;
|
|
border-radius:4px;
|
|
}
|
|
input[type=range]:active::-ms-thumb,input[type=range]:hover::-ms-thumb {background:#fff;}
|
|
|
|
|
|
|
|
.framed b
|
|
{
|
|
color:#fff;
|
|
font-weight:bold;
|
|
}
|
|
.framed .name
|
|
{
|
|
font-weight:bold;
|
|
font-size:110%;
|
|
color:#fff;
|
|
margin:2px 0px;
|
|
/*text-shadow:0px 0px 2px rgba(255,255,255,0.3);*/
|
|
text-shadow:0px -2px 4px rgba(255,255,200,0.4),0px 1px 0px rgba(100,100,100,1),0px 2px 4px rgba(0,0,0,1);
|
|
}
|
|
.framed q
|
|
{
|
|
display:block;
|
|
position:relative;
|
|
text-align:right;
|
|
margin-top:8px;
|
|
font-style:italic;
|
|
color:rgba(255,255,255,0.5);
|
|
font-size:12px;
|
|
font-family:Georgia;
|
|
line-height:135%;
|
|
}
|
|
.framed q:before
|
|
{
|
|
display:inline-block;
|
|
content:"“";
|
|
font-size:14px;
|
|
font-family:Georgia;
|
|
font-weight:bold;
|
|
}
|
|
.framed q:after
|
|
{
|
|
display:inline-block;
|
|
content:"”";
|
|
font-size:14px;
|
|
font-family:Georgia;
|
|
font-weight:bold;
|
|
margin-top:-2px;
|
|
}
|
|
.framed .close
|
|
{
|
|
position:absolute;
|
|
top:-5px;
|
|
right:0px;
|
|
padding:4px;
|
|
}
|
|
.close
|
|
{
|
|
font-weight:bold;
|
|
font-size:16px;
|
|
text-shadow:0px 0px 2px #000,0px 0px 1px #000;
|
|
cursor:pointer;
|
|
font-family:Comic Sans MS;
|
|
padding:1px 8px 7px 8px;
|
|
z-index:1000;
|
|
}
|
|
.close:hover
|
|
{
|
|
color:#fff;
|
|
text-shadow:0px 0px 2px #fff;
|
|
}
|
|
.sidenote
|
|
{
|
|
position:absolute;
|
|
right:-6px;
|
|
bottom:6px;
|
|
}
|
|
|
|
.menuClose
|
|
{
|
|
position:absolute;
|
|
top:0px;
|
|
right:0px;
|
|
border-bottom-left-radius:36px;
|
|
padding:4px 12px 16px 18px;
|
|
font-size:24px;
|
|
box-shadow:-2px 2px 8px #000, 2px -2px 8px rgba(255,255,255,0.1) inset;
|
|
}
|
|
.menuClose:hover
|
|
{
|
|
background:rgba(255,255,255,0.05);
|
|
}
|
|
|
|
.block
|
|
{
|
|
padding:8px;
|
|
margin:2px;
|
|
border-radius:4px;
|
|
border:1px solid rgba(255,255,255,0.1);
|
|
box-shadow:0px 0px 1px #000,0px 0px 1px #000 inset;
|
|
}
|
|
|
|
|
|
#tooltipAnchor
|
|
{
|
|
position:absolute;
|
|
z-index:1000000000;
|
|
display:none;
|
|
//transition:left 0.1s ease-out,right 0.1s ease-out,top 0.1s ease-out,bottom 0.1s ease-out;
|
|
}
|
|
#tooltip
|
|
{
|
|
position:absolute;
|
|
-webkit-transition:none;
|
|
-moz-transition:none;
|
|
-ms-transition:none;
|
|
-o-transition:none;
|
|
transition:none;
|
|
pointer-events:none;
|
|
opacity:1;
|
|
}
|
|
.wobbling
|
|
{
|
|
animation:wobble 0.1s ease-out;
|
|
}
|
|
|
|
.line
|
|
{
|
|
background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0.25),rgba(255,255,255,0));
|
|
height:1px;
|
|
width:90%;
|
|
margin:6px auto;
|
|
position:relative;
|
|
}
|
|
.line:before,.line:after
|
|
{
|
|
content:'';
|
|
display:block;
|
|
background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0.25),rgba(0,0,0,0));
|
|
height:1px;
|
|
width:90%;
|
|
position:absolute;
|
|
left:0px;
|
|
bottom:1px;
|
|
}
|
|
.line:after
|
|
{
|
|
bottom:-1px;
|
|
}
|
|
.description
|
|
{
|
|
/*border-top:1px solid rgba(255,255,255,0.25);*/
|
|
margin:4px 0px;
|
|
}
|
|
.descriptionBlock
|
|
{
|
|
border-radius:6px;
|
|
background:rgba(255,255,255,0.1);
|
|
padding:2px 6px;
|
|
margin:3px 0px;
|
|
position:relative;
|
|
font-size:85%;
|
|
text-shadow:0px 1px 0px #000;
|
|
}
|
|
.descriptionBlock:before
|
|
{
|
|
position:absolute;
|
|
display:block;
|
|
content:"\2022";
|
|
left:-4px;
|
|
top:2px;
|
|
font-size:16px;
|
|
}
|
|
|
|
q:before
|
|
{
|
|
display:inline-block;
|
|
content:"\"";
|
|
}
|
|
q:after
|
|
{
|
|
display:inline-block;
|
|
content:"\"";
|
|
}
|
|
|
|
|
|
.price
|
|
{
|
|
font-weight:bold;
|
|
color:#6f6;
|
|
padding-left:18px;
|
|
position:relative;
|
|
}
|
|
.priceMult
|
|
{
|
|
font-weight:bold;
|
|
color:#ffc;
|
|
}
|
|
.price .tinyCookie
|
|
{
|
|
display:block;
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
width:16px;
|
|
height:16px;
|
|
cursor:pointer;
|
|
}
|
|
.price.disabled, .disabled .price
|
|
{
|
|
color:#f66;
|
|
}
|
|
.price:before
|
|
{
|
|
content:'';
|
|
display:block;
|
|
position:absolute;
|
|
left:0px;
|
|
top:2px;
|
|
background:url(img/money.png);
|
|
width:16px;
|
|
height:16px;
|
|
}
|
|
.hasTinyCookie
|
|
{
|
|
position:relative;
|
|
padding-left:18px;
|
|
}
|
|
.hasTinyCookie:before
|
|
{
|
|
content:'';
|
|
display:block;
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
background:url(img/money.png);
|
|
width:16px;
|
|
height:16px;
|
|
}
|
|
.heavenly.price:before
|
|
{
|
|
background:url(img/heavenlyMoney.png);
|
|
}
|
|
.lump.price:before
|
|
{
|
|
background:url(img/sugarLump.png);
|
|
}
|
|
.price.plain
|
|
{
|
|
color:#fff;
|
|
display:inline-block;
|
|
}
|
|
.price.plain:before
|
|
{
|
|
top:0px;
|
|
}
|
|
|
|
#cookieAnchor
|
|
{
|
|
position:absolute;
|
|
left:50%;
|
|
top:40%;
|
|
}
|
|
#bigCookie
|
|
{
|
|
width:256px;
|
|
height:256px;
|
|
position:absolute;
|
|
left:-128px;
|
|
top:-128px;
|
|
/*background:url(img/perfectCookie.png);
|
|
background-size:256px 256px;*/
|
|
background:url(img/empty.png);/* somehow necessary; an empty div with no background seems to be click-through */
|
|
cursor:pointer;
|
|
z-index:10000;
|
|
border-radius:128px;
|
|
border:none;
|
|
overflow:hidden;
|
|
outline:none;
|
|
}
|
|
.elderWrath #bigCookie
|
|
{
|
|
background:url(img/imperfectCookie.png);
|
|
background-size:256px 256px;
|
|
}
|
|
#cookieNumbers{position:absolute;top:-80px;}
|
|
.cookieNumber
|
|
{
|
|
position:absolute;
|
|
pointer-events:none;
|
|
left:-100px;
|
|
top:0px;
|
|
width:200px;
|
|
z-index:100;
|
|
text-align:center;
|
|
text-shadow:none;
|
|
}
|
|
#cookieCursors{position:absolute;z-index:5;}
|
|
.cursor
|
|
{
|
|
width:32px;
|
|
height:32px;
|
|
position:absolute;
|
|
background:url(img/cursor.png);
|
|
}
|
|
.cookieParticle
|
|
{
|
|
width:64px;
|
|
height:64px;
|
|
margin-left:-32px;
|
|
margin-top:-32px;
|
|
position:absolute;
|
|
background:url(img/smallCookies.png);
|
|
opacity:0;
|
|
}
|
|
#particles {position:absolute;left:0px;top:0px;z-index:100000000000;}
|
|
.particle
|
|
{
|
|
position:absolute;
|
|
pointer-events:none;
|
|
left:-200px;
|
|
bottom:0px;
|
|
width:400px;
|
|
z-index:100000000;
|
|
text-align:center;
|
|
text-shadow:1px 1px 1px #000,0px 0px 6px #000;
|
|
font-size:24px;
|
|
}
|
|
.particle.title
|
|
{
|
|
background:rgba(0,0,0,0.5);
|
|
box-shadow:0px 0px 8px 8px rgba(0,0,0,0.5);
|
|
border-radius:16px;
|
|
display:none;
|
|
}
|
|
|
|
#milk
|
|
{
|
|
width:100%;
|
|
height:0%;
|
|
position:absolute;
|
|
left:0px;
|
|
bottom:0px;
|
|
z-index:100;
|
|
opacity:0.9;
|
|
}
|
|
.milkLayer
|
|
{
|
|
width:100%;
|
|
height:100%;
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
background-repeat:repeat-x;
|
|
}
|
|
#cookies
|
|
{
|
|
position:absolute;
|
|
left:0px;
|
|
top:10%;
|
|
width:100%;
|
|
text-align:center;
|
|
z-index:200;
|
|
background:#000;
|
|
background:rgba(0,0,0,0.4);
|
|
padding:2px 0px;
|
|
pointer-events:none;
|
|
text-shadow:1px 0px 0px #000,-1px 0px 0px #000,0px 1px 0px #000,0px -1px 0px #000,0px 1px 4px #000;
|
|
}
|
|
#cookiesPerSecond
|
|
{
|
|
font-size:50%;
|
|
}
|
|
#cookiesPerSecond.wrinkled
|
|
{
|
|
color:#f00;
|
|
}
|
|
.monospace
|
|
{
|
|
font-family:Courier,monospace;
|
|
font-weight:bold;
|
|
}
|
|
#bakeryNameAnchor
|
|
{
|
|
position:absolute;
|
|
left:0px;
|
|
top:10%;
|
|
width:100%;
|
|
z-index:200;
|
|
}
|
|
#bakeryName
|
|
{
|
|
position:absolute;
|
|
left:0px;
|
|
bottom:8px;
|
|
left:12.5%;
|
|
width:75%;
|
|
text-align:center;
|
|
font-size:20px;
|
|
background:#000;
|
|
background:rgba(0,0,0,0.4);
|
|
border-radius:12px;
|
|
padding:4px 0px;
|
|
cursor:pointer;
|
|
color:rgba(255,255,255,0.8);
|
|
}
|
|
#bakeryName:hover
|
|
{
|
|
color:#fff;
|
|
text-shadow:0px 0px 8px #fff;
|
|
}
|
|
|
|
#specialPopup
|
|
{
|
|
position:absolute;
|
|
left:50%;
|
|
margin-left:-185px;
|
|
bottom:32px;
|
|
width:350px;
|
|
min-height:8px;
|
|
z-index:20000;
|
|
transition:bottom 0.2s ease-out,opacity 0.1s ease-out;
|
|
text-align:center;
|
|
}
|
|
#specialPopup.onScreen
|
|
{
|
|
bottom:32px;
|
|
opacity:1;
|
|
}
|
|
#specialPopup.offScreen
|
|
{
|
|
bottom:-32px;
|
|
pointer-events:none;
|
|
opacity:0;
|
|
}
|
|
|
|
.separatorLeft, .separatorRight
|
|
{
|
|
width:16px;
|
|
height:100%;
|
|
background:url(img/panelVertical.png?v=2) repeat-y;
|
|
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;
|
|
position:absolute;
|
|
top:0px;
|
|
bottom:0px;
|
|
z-index:100;
|
|
}
|
|
.separatorLeft
|
|
{
|
|
left:30%;
|
|
}
|
|
.separatorRight
|
|
{
|
|
right:317px;
|
|
}
|
|
.separatorBottom
|
|
{
|
|
width:100%;
|
|
height:16px;
|
|
background:url(img/panelHorizontal.png?v=2) repeat-x;
|
|
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;
|
|
position:absolute;
|
|
left:0px;
|
|
bottom:0px;
|
|
}
|
|
|
|
.panelButton
|
|
{
|
|
background:url(img/panelMenu3.png);
|
|
background-position:0px 0px;
|
|
position:absolute;
|
|
z-index:100;
|
|
width:100px;
|
|
height:48px;
|
|
text-align:center;
|
|
font-size:18px;
|
|
cursor:pointer;
|
|
|
|
box-sizing:border-box;
|
|
padding-top:16px;
|
|
|
|
color:#999;
|
|
text-shadow:0px 1px 0px #444,0px 0px 4px #000;
|
|
}
|
|
.panelButton:hover,.panelButton.selected
|
|
{
|
|
z-index:1000;
|
|
color:#fff;
|
|
text-shadow:0px 1px 0px #999,0px 0px 4px #000;
|
|
}
|
|
.panelButton>div:first-child{display:inline-block;}
|
|
#prefsButton{top:0px;left:0px; padding-top:16px; padding-right:2px; background-position:0px 0px;}
|
|
#statsButton{bottom:16px;left:0px; padding-top:14px; padding-right:2px; background-position:0px -48px;}
|
|
#logButton{top:0px;right:0px; padding-top:16px; padding-left:2px; background-position:-100px 0px;}
|
|
#legacyButton{bottom:16px;right:0px;padding-top:14px; padding-left:2px; background-position:-100px -48px;}
|
|
/*#prefsButton:hover,#prefsButton.selected{ background-position:0px -96px;}*/
|
|
#statsButton:hover,#statsButton.selected{ background-position:0px -144px;}
|
|
#logButton:hover,#logButton.selected{ background-position:-100px -96px;}
|
|
/*#legacyButton:hover,#legacyButton.selected{ background-position:-100px -144px;}*/
|
|
|
|
.subButton
|
|
{
|
|
border-radius:5px;
|
|
box-shadow:0px 1px 0px rgba(250,180,150,0.75) inset,0px 0px 0px 1px rgba(0,0,0,0.75),0px 2px 3px rgba(250,180,150,0.5) inset,0px 1px 0px 1px rgba(250,180,150,0.25);
|
|
padding:6px 12px;
|
|
font-size:14px;
|
|
position:relative;
|
|
top:-4px;
|
|
}
|
|
#prefsButton:hover>.subButton{box-shadow:0px 1px 0px rgba(250,180,150,1) inset,0px 0px 0px 1px rgba(0,0,0,0.75),0px 2px 3px rgba(250,180,150,0.75) inset,0px 1px 0px 1px rgba(250,180,150,0.25);}
|
|
|
|
#logButton.hasUpdate {color:#fff;}
|
|
#logButton.hasUpdate>div:first-child {position:relative;top:-8px;}
|
|
#logButton.hasUpdate:before
|
|
{
|
|
content:'';
|
|
display:block;
|
|
position:absolute;
|
|
left:-40px;
|
|
top:10px;
|
|
width:48px;
|
|
height:38px;
|
|
background:url(img/pointGlow.gif);
|
|
animation:pointGlowBump 0.6s infinite ease-in-out;
|
|
}
|
|
@keyframes pointGlowBump{
|
|
0% {transform:translate(0px,0px) scale(0.8,1.2);}
|
|
20% {transform:translate(-8px,0px);}
|
|
50% {transform:translate(-10px,0px);}
|
|
80% {transform:translate(-8px,0px);}
|
|
100% {transform:translate(0px,0px);}
|
|
}
|
|
#checkForUpdate
|
|
{
|
|
display:none;
|
|
font-size:10px;
|
|
position:absolute;bottom:8px;left:0px;right:0px;
|
|
animation:rainbowCycle 0.5s infinite ease-in-out;
|
|
}
|
|
@keyframes rainbowCycle{
|
|
0% {color:#ff1d87;}
|
|
16% {color:#a071ff;}
|
|
33% {color:#40b9ff;}
|
|
50% {color:#15ff57;}
|
|
66% {color:#ffed29;}
|
|
83% {color:#ff5f2e;}
|
|
100% {color:#ff1d87;}
|
|
}
|
|
@keyframes rainbowCycleBG{
|
|
0% {background-color:#ff1d87;}
|
|
16% {background-color:#a071ff;}
|
|
33% {background-color:#40b9ff;}
|
|
50% {background-color:#15ff57;}
|
|
66% {background-color:#ffed29;}
|
|
83% {background-color:#ff5f2e;}
|
|
100% {background-color:#ff1d87;}
|
|
}
|
|
#logButton.hasUpdate #checkForUpdate {display:block;}
|
|
|
|
|
|
.roundedPanel
|
|
{
|
|
background:url(img/roundedPanelBGS.png) repeat-x 0px 0px;
|
|
position:relative;
|
|
padding:9px 0px;
|
|
height:20px;
|
|
}
|
|
.roundedPanel:before,.roundedPanel:after
|
|
{
|
|
content:'';
|
|
display:block;height:36px;
|
|
position:absolute;top:0px;
|
|
}
|
|
.roundedPanel:before
|
|
{
|
|
background:url(img/bracketPanelLeftS.png) no-repeat;left:-16px;width:16px;
|
|
}
|
|
.roundedPanel:after
|
|
{
|
|
background:url(img/bracketPanelRightS.png) no-repeat;right:-18px;width:18px;
|
|
}
|
|
/*.roundedPanel
|
|
{
|
|
background:url(img/roundedPanelBG.png) repeat-x 0px 0px;
|
|
position:relative;
|
|
}
|
|
.roundedPanel:before,.roundedPanel:after
|
|
{
|
|
content:'';
|
|
display:block;width:17px;height:32px;
|
|
position:absolute;top:0px;
|
|
}
|
|
.roundedPanel:before
|
|
{
|
|
background:url(img/roundedPanelLeft.png) no-repeat;left:-17px;
|
|
}
|
|
.roundedPanel:after
|
|
{
|
|
background:url(img/roundedPanelRight.png) no-repeat;right:-17px;
|
|
}*/
|
|
#ascendNumber
|
|
{
|
|
display:none;
|
|
position:absolute;
|
|
right:115px;
|
|
top:22px;
|
|
font-size:14px;
|
|
font-weight:bold;
|
|
font-family:Georgia;
|
|
color:#fff;
|
|
text-shadow:0px -1px 1px #09f,0px 1px 1px #f04;
|
|
}
|
|
#legacyButton:hover>#ascendNumber
|
|
{text-shadow:0px -1px 1px #09f,0px 1px 1px #f04,0px -1px 1px #09f,0px 1px 1px #f04,0px 0px 4px #fff;}
|
|
|
|
#ascendTooltip
|
|
{
|
|
display:none;
|
|
position:absolute;
|
|
right:0px;
|
|
top:52px;
|
|
font-family:Tahoma,Arial,sans serif;
|
|
font-size:11px;
|
|
width:220px;
|
|
padding:8px;
|
|
pointer-events:none;
|
|
}
|
|
#legacyButton:hover>#ascendTooltip
|
|
{display:block;}
|
|
|
|
|
|
#lumps
|
|
{
|
|
display:none;
|
|
position:absolute;
|
|
width:32px;
|
|
height:32px;
|
|
left:-8px;
|
|
bottom:-12px;
|
|
z-index:10000;
|
|
cursor:pointer;
|
|
filter:drop-shadow(0px 3px 2px #000);
|
|
-webkit-filter:drop-shadow(0px 3px 2px #000);
|
|
}
|
|
#lumps:hover #lumpsIcon,#lumps:hover #lumpsIcon2
|
|
{top:-10px;}
|
|
#lumpsIcon,#lumpsIcon2
|
|
{
|
|
width:48px;
|
|
height:48px;
|
|
position:absolute;
|
|
left:-8px;
|
|
top:-8px;
|
|
pointer-events:none;
|
|
}
|
|
#lumpsAmount
|
|
{
|
|
font-size:12px;
|
|
color:#6cf;
|
|
position:absolute;
|
|
left:36px;
|
|
top:6px;
|
|
pointer-events:none;
|
|
text-align:left;
|
|
width:200px;
|
|
}
|
|
.lumpsOn #lumps{display:block;}
|
|
|
|
|
|
.lumpRefill
|
|
{
|
|
cursor:pointer;
|
|
width:48px;
|
|
height:48px;
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
transform:scale(0.5);
|
|
z-index:1000;
|
|
transition:transform 0.05s;
|
|
}
|
|
.lumpRefill:hover{transform:scale(1);}
|
|
.lumpRefill:active{transform:scale(0.4);}
|
|
|
|
|
|
.meterContainer
|
|
{
|
|
background:rgba(0,0,0,0.5);
|
|
position:relative;
|
|
border-radius:2px;
|
|
height:8px;
|
|
}
|
|
.meter
|
|
{
|
|
background:url(img/prestigeBar.jpg) 0px 0px;
|
|
position:absolute;
|
|
left:0px;
|
|
/*right:100%;*/
|
|
right:0px;
|
|
top:0px;
|
|
height:100%;
|
|
/*max-width:100%;*/
|
|
transform:translate(0px,0px);
|
|
}
|
|
.meter:after
|
|
{
|
|
height:8px;
|
|
width:8px;
|
|
position:absolute;
|
|
right:-8px;
|
|
top:0px;
|
|
content:'';
|
|
display:block;
|
|
background:url(img/prestigeBarCap.png);
|
|
}
|
|
#ascendMeterContainer
|
|
{
|
|
width:100px;
|
|
right:0px;
|
|
bottom:4px;
|
|
position:absolute;
|
|
overflow:hidden;
|
|
}
|
|
#ascendMeter
|
|
{
|
|
/*right:100px;*/
|
|
}
|
|
|
|
.meter.filling
|
|
{
|
|
/* this tiny thing is actually an enormous resource hog */
|
|
-/*webkit-animation:fluidMotion 10s infinite linear;
|
|
-moz-animation:fluidMotion 10s infinite linear;
|
|
animation:fluidMotion 10s infinite linear;*/
|
|
/*-webkit-transition:right 0.5s linear;
|
|
-moz-transition:right 0.5s linear;
|
|
-ms-transition:right 0.5s linear;
|
|
-o-transition:right 0.5s linear;
|
|
transition:right 0.5s linear;*/
|
|
}
|
|
@-webkit-keyframes fluidMotion{
|
|
from {background-position:0px -24px;}
|
|
to {background-position:-128px -24px;}
|
|
}
|
|
@-moz-keyframes fluidMotion{
|
|
from {background-position:0px -24px;}
|
|
to {background-position:-128px -24px;}
|
|
}
|
|
@keyframes fluidMotion{
|
|
from {background-position:0px -24px;}
|
|
to {background-position:-128px -24px;}
|
|
}
|
|
|
|
#game.onMenu #menu{display:block;}
|
|
#game.onMenu .row{visibility:hidden;display:none;}
|
|
#menu
|
|
{
|
|
display:none;
|
|
z-index:1;
|
|
position:absolute;
|
|
left:0px;
|
|
right:0px;
|
|
top:0px;
|
|
bottom:0px;
|
|
/*box-shadow:0px 0px 24px #000 inset;
|
|
background:#000 url(img/darkNoise.jpg);*/
|
|
}
|
|
|
|
#comments
|
|
{
|
|
padding:16px;
|
|
text-align:center;
|
|
position:relative;
|
|
padding-bottom:32px;
|
|
font-size:16px;
|
|
height:64px;
|
|
background:url(img/shadedBorders.png);
|
|
background-size:100% 96px;
|
|
/*overflow:hidden;*/
|
|
}
|
|
#commentsText
|
|
{
|
|
position:absolute;
|
|
top:0px;
|
|
left:108px;
|
|
right:108px;
|
|
bottom:16px;
|
|
overflow:hidden;
|
|
z-index:1;
|
|
}
|
|
#commentsText:hover
|
|
{
|
|
overflow:visible;
|
|
z-index:1000;
|
|
}
|
|
.commentsText
|
|
{
|
|
padding:16px 0px;
|
|
position:absolute;
|
|
top:0px;
|
|
left:0px;
|
|
right:0px;
|
|
opacity:1;
|
|
text-align:center;
|
|
transition:text-shadow 0.25s,background 0.25s;
|
|
border-radius:8px;
|
|
}
|
|
#commentsText:hover>.commentsText
|
|
{
|
|
text-shadow:0px 1px 1px #000,0px 2px 2px #000,0px 2px 8px #000,0px 2px 16px #000,0px 2px 20px #000;
|
|
/*background:rgba(0,0,0,0.2);*/
|
|
}
|
|
.commentsText q
|
|
{
|
|
font-style:italic;
|
|
}
|
|
.commentsText sig
|
|
{
|
|
font-size:70%;
|
|
display:block;
|
|
text-align:center;
|
|
opacity:0.7;
|
|
}
|
|
.commentsText sig:before
|
|
{
|
|
content:"-";
|
|
padding-left:64px;
|
|
}
|
|
.fortune
|
|
{
|
|
color:#ade000;
|
|
cursor:pointer;
|
|
}
|
|
.fortune:hover
|
|
{
|
|
color:#d2ff00;
|
|
text-shadow:0px 0px 4px #ade000 !important;
|
|
}
|
|
|
|
#commentsText1
|
|
{
|
|
z-index:20;
|
|
}
|
|
#commentsText2
|
|
{
|
|
z-index:10;
|
|
}
|
|
|
|
/* let me tell you about vendor prefixes */
|
|
.risingAway{
|
|
-webkit-animation:riseAway 1s 1 forwards;
|
|
-moz-animation:riseAway 1s 1 forwards;
|
|
animation:riseAway 1s 1 forwards;
|
|
}
|
|
.risingUp{
|
|
-webkit-animation:riseUp 1s 1 forwards;
|
|
-moz-animation:riseUp 1s 1 forwards;
|
|
animation:riseUp 1s 1 forwards;
|
|
}
|
|
.risingUpLinger{
|
|
-webkit-animation:riseUpLinger 4s 1 forwards ease-out;
|
|
-moz-animation:riseUpLinger 4s 1 forwards ease-out;
|
|
animation:riseUpLinger 4s 1 forwards ease-out;
|
|
}
|
|
@-webkit-keyframes riseAway{
|
|
from {top:0px;opacity:1;}
|
|
to {top:-20px;opacity:0;}
|
|
}
|
|
@-webkit-keyframes riseUp{
|
|
from {top:20px;opacity:0;}
|
|
to {top:0px;opacity:1;}
|
|
}
|
|
@-webkit-keyframes riseUpLinger{
|
|
0% {transform:translate(0px,0px);opacity:0;}
|
|
1% {transform:translate(0px,0px);opacity:1;}
|
|
20% {transform:translate(0px,-32px);opacity:1;}
|
|
100% {transform:translate(0px,-32px);opacity:0;}
|
|
}
|
|
@-moz-keyframes riseAway{
|
|
from {top:0px;opacity:1;}
|
|
to {top:-20px;opacity:0;}
|
|
}
|
|
@-moz-keyframes riseUp{
|
|
from {top:20px;opacity:0;}
|
|
to {top:0px;opacity:1;}
|
|
}
|
|
@-moz-keyframes riseUpLinger{
|
|
0% {transform:translate(0px,0px);opacity:0;}
|
|
1% {transform:translate(0px,0px);opacity:1;}
|
|
20% {transform:translate(0px,-32px);opacity:1;}
|
|
100% {transform:translate(0px,-32px);opacity:0;}
|
|
}
|
|
@keyframes riseAway{
|
|
from {top:0px;opacity:1;}
|
|
to {top:-20px;opacity:0;}
|
|
}
|
|
@keyframes riseUp{
|
|
from {top:20px;opacity:0;}
|
|
to {top:0px;opacity:1;}
|
|
}
|
|
@keyframes riseUpLinger{
|
|
0% {transform:translate(0px,0px);opacity:0;}
|
|
2% {transform:translate(0px,0px);opacity:1;}
|
|
20% {transform:translate(0px,-32px);opacity:1;}
|
|
75% {transform:translate(0px,-32px);opacity:1;}
|
|
100% {transform:translate(0px,-32px);opacity:0;}
|
|
}
|
|
|
|
|
|
@keyframes wobble
|
|
{
|
|
0% {transform:scale(0.5,0.5);}
|
|
20% {transform:scale(1.3,0.7);}
|
|
30% {transform:scale(0.7,1.3);}
|
|
50% {transform:scale(1.2,0.8);}
|
|
70% {transform:scale(0.9,1.1);}
|
|
90% {transform:scale(1.1,0.9);}
|
|
100% {transform:scale(1,1);}
|
|
}
|
|
|
|
@keyframes bounce
|
|
{
|
|
/* weeeeee */
|
|
0% {transform-origin:50% 100%;transform:scale(1,1);}
|
|
10% {transform-origin:50% 100%;transform:scale(0.9,1.2);}
|
|
20% {transform-origin:50% 100%;transform:scale(1.5,0.5);}
|
|
25% {transform-origin:50% 100%;transform:scale(0.75,1.5) translate(0px,-10px);}
|
|
30% {transform-origin:50% 100%;transform:scale(0.8,1.2) translate(0px,-20px);}
|
|
60% {transform-origin:50% 100%;transform:scale(1,1) translate(0px,-25px);}
|
|
70% {transform-origin:50% 100%;transform:scale(2,0.5);}
|
|
80% {transform-origin:50% 100%;transform:scale(0.8,1.2);}
|
|
90% {transform-origin:50% 100%;transform:scale(1,1);}
|
|
100% {transform-origin:50% 100%;transform:scale(1,1);}
|
|
}
|
|
|
|
|
|
.comeLeft{animation:comeLeft 0.2s ease-out;}
|
|
@keyframes comeLeft
|
|
{
|
|
0% {transform:translate(-16px,0px);opacity:0;}
|
|
100% {transform:translate(0px,0px);opacity:1;}
|
|
}
|
|
|
|
.pucker{animation:pucker 0.2s ease-out;}
|
|
@keyframes pucker
|
|
{
|
|
0% {transform:scale(1,1);}
|
|
10% {transform:scale(1.15,0.85);}
|
|
20% {transform:scale(1.2,0.8);}
|
|
50% {transform:scale(0.75,1.25);}
|
|
70% {transform:scale(1.05,0.95);}
|
|
90% {transform:scale(0.95,1.05);}
|
|
100% {transform:scale(1,1);}
|
|
}
|
|
.puckerHalf{animation:puckerHalf 0.2s ease-out;}
|
|
@keyframes puckerHalf
|
|
{
|
|
0% {transform:scale(0.5,0.5);}
|
|
10% {transform:scale(0.575,0.425);}
|
|
20% {transform:scale(0.6,0.4);}
|
|
50% {transform:scale(0.375,0.625);}
|
|
70% {transform:scale(0.525,0.475);}
|
|
90% {transform:scale(0.475,0.525);}
|
|
100% {transform:scale(0.5,0.5);}
|
|
}
|
|
|
|
.flashRed{animation:flashRed 0.2s ease-out;}
|
|
@keyframes flashRed
|
|
{
|
|
0% {background:#f00;}
|
|
100% {}
|
|
}
|
|
.punchDown{animation:punchDown 0.3s ease-out;}
|
|
@keyframes punchDown
|
|
{
|
|
0% {transform:translate(0px,0px);}
|
|
20% {transform:translate(0px,4px);}
|
|
100% {transform:translate(0px,0px);}
|
|
}
|
|
.punchUp{animation:punchUp 0.3s ease-out;}
|
|
@keyframes punchUp
|
|
{
|
|
0% {transform:translate(0px,0px);}
|
|
20% {transform:translate(0px,-4px);}
|
|
100% {transform:translate(0px,0px);}
|
|
}
|
|
|
|
#buildingsMaster
|
|
{
|
|
min-height:24px;
|
|
background:#999;
|
|
background:url(img/darkNoise.jpg);
|
|
box-shadow:0px 0px 4px #000 inset;
|
|
position:relative;
|
|
text-align:center;
|
|
color:#fff;
|
|
font-size:12px;
|
|
font-weight:bold;
|
|
font-variant:small-caps;
|
|
text-shadow:0px 1px 0px #000;
|
|
margin-bottom:8px;
|
|
display:none;
|
|
}
|
|
.extraButtons #buildingsMaster{display:block;}
|
|
#game.onMenu #buildingsMaster{display:none;}
|
|
|
|
.row
|
|
{
|
|
position:relative;
|
|
padding-bottom:16px;
|
|
display:none;
|
|
/*overflow:hidden;*/
|
|
}
|
|
.row.enabled{display:block;}
|
|
.row .rowCanvas
|
|
{
|
|
width:100%;
|
|
height:128px;
|
|
/*overflow-x:scroll;
|
|
overflow-y:hidden;*/
|
|
background:#000;
|
|
display:block;
|
|
}
|
|
.row .rowSpecial
|
|
{
|
|
min-height:24px;
|
|
z-index:100;
|
|
width:100%;
|
|
top:0px;
|
|
left:0px;
|
|
background:#000 url(img/mapBG.jpg) fixed;
|
|
display:none;
|
|
}
|
|
.row.onMinigame .rowCanvas,.row.onMinigame .onlyOnCanvas{display:none;}
|
|
.row.onMinigame .rowSpecial{display:block;}
|
|
/*.row.muted .rowCanvas,.row.muted .rowSpecial{display:none;}*/
|
|
/*.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;}*/
|
|
.row.muted{display:none;}
|
|
|
|
.row .info, #sectionLeft .info
|
|
{
|
|
display:none;
|
|
/*visibility:hidden;*/
|
|
-webkit-transition: opacity 0.1s ease-out;
|
|
-moz-transition: opacity 0.1s ease-out;
|
|
-ms-transition: opacity 0.1s ease-out;
|
|
-o-transition: opacity 0.1s ease-out;
|
|
transition: opacity 0.1s ease-out;
|
|
opacity:0;
|
|
}
|
|
.row .info, #sectionLeft .info
|
|
{
|
|
position:absolute;
|
|
top:0px;
|
|
left:0px;
|
|
height:112px;
|
|
padding:8px;
|
|
font-size:12px;
|
|
line-height:125%;
|
|
background:url(img/infoBG.png);
|
|
color:#666;
|
|
z-index:100000;
|
|
}
|
|
.row .info:after
|
|
{
|
|
width:16px;
|
|
height:128px;
|
|
position:absolute;
|
|
right:-16px;
|
|
top:0px;
|
|
background:url(img/infoBGfade.png) repeat-y;
|
|
display:block;
|
|
content:'';
|
|
}
|
|
#sectionLeft .info
|
|
{
|
|
border-radius:16px;
|
|
padding:24px 8px 8px 24px;
|
|
left:-16px;
|
|
top:-16px;
|
|
height:auto;
|
|
}
|
|
.row:hover .info, #sectionLeft:hover .info
|
|
{
|
|
opacity:1;
|
|
}
|
|
.row .object
|
|
{
|
|
position:absolute;
|
|
width:64px;
|
|
height:64px;
|
|
}
|
|
#sectionLeftInfo
|
|
{
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
width:100%;
|
|
}
|
|
|
|
.zoneTitle
|
|
{
|
|
text-align:center;
|
|
padding:8px;
|
|
width:100%;
|
|
}
|
|
#store
|
|
{
|
|
position:relative;
|
|
}
|
|
#store:after
|
|
{
|
|
display:block;
|
|
height:64px;
|
|
background:url(img/blackGradientSmallTop.png) repeat-x top;
|
|
content:'';
|
|
pointer-events:none;
|
|
position:absolute;
|
|
left:0px;
|
|
right:0px;
|
|
bottom:-64px;
|
|
}
|
|
#storeTitle
|
|
{
|
|
position:relative;
|
|
width:284px;
|
|
background:url(img/blackGradientSmallTop.png) repeat-x top;
|
|
}
|
|
#buildingsTitle
|
|
{
|
|
display:none;
|
|
}
|
|
.storeSection
|
|
{
|
|
height:60px;
|
|
width:300px;
|
|
position:relative;
|
|
overflow-y:hidden;
|
|
background:url(img/panelHorizontal.png?v=2) repeat-x top;
|
|
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;
|
|
padding-top:16px;
|
|
}
|
|
.storeSection:hover
|
|
{
|
|
height:auto;
|
|
min-height:60px;
|
|
}
|
|
.storeSection:hover:before
|
|
{
|
|
display:block;
|
|
}
|
|
.storeSection:before,.storeSectionAddon
|
|
{
|
|
z-index:1000;
|
|
text-shadow:0px 1px 1px #360e00,0px -1px 1px #360e00,1px 0px 1px #360e00,-1px 0px 1px #360e00;
|
|
font-weight:bold;
|
|
color:#f6dab8;
|
|
opacity:1;
|
|
font-variant:small-caps;
|
|
}
|
|
.storeSection:before
|
|
{
|
|
display:none;
|
|
position:absolute;
|
|
content:'';
|
|
left:2px;
|
|
top:0px;
|
|
pointer-events:none;
|
|
}
|
|
.storeSectionAddon
|
|
{
|
|
position:relative;
|
|
line-height:0%;
|
|
text-align:right;
|
|
top:6px;
|
|
right:4px;
|
|
}
|
|
|
|
.trophy
|
|
{
|
|
width:48px;height:48px;margin:2px;float:left;
|
|
cursor:pointer;
|
|
filter:drop-shadow(0px 3px 2px #000);
|
|
-webkit-filter:drop-shadow(0px 3px 2px #000);
|
|
position:relative;
|
|
}
|
|
.trophy:hover
|
|
{
|
|
top:-1px;
|
|
/*filter:brightness(125%) drop-shadow(0px 3px 2px #000);
|
|
-webkit-filter:brightness(125%) drop-shadow(0px 3px 2px #000);*/
|
|
}
|
|
|
|
.tag
|
|
{
|
|
background-color:#ccc;
|
|
background-image:linear-gradient(to bottom,rgba(0,0,0,0.3),transparent);
|
|
display:inline-block;
|
|
font-family:Arial;
|
|
font-size:10px;
|
|
color:#000;
|
|
text-shadow:0px 1px 0px rgba(255,255,255,0.25);
|
|
border-radius:3px;
|
|
opacity:0.85;
|
|
padding:0px 3px;
|
|
margin:1px 2px 0px 0px;
|
|
font-weight:bold;
|
|
}
|
|
|
|
#toggleBox
|
|
{
|
|
position:absolute;
|
|
right:318px;
|
|
top:100px;
|
|
width:300px;
|
|
min-height:60px;
|
|
display:none;
|
|
z-index:50000000;
|
|
text-align:center;
|
|
}
|
|
|
|
#upgrades:before{content:'Upgrades';}
|
|
#toggleUpgrades:before{content:'Switches';}
|
|
#techUpgrades:before{content:'Research';}
|
|
/*#vaultUpgrades{height:0px;}*/
|
|
/*#vaultUpgrades:hover{height:auto;min-height:60px;}*/
|
|
#vaultUpgrades .crate{opacity:0.5;}
|
|
#vaultUpgrades .crate{transform:scale(0.5);margin:-9px;}
|
|
#vaultUpgrades{height:30px;}
|
|
#vaultUpgrades:hover{height:auto;min-height:30px;}
|
|
#vaultUpgrades:before{content:'Vault';}
|
|
#products:before{content:'Buildings';}
|
|
#upgrades
|
|
{
|
|
}
|
|
#upgrades.hasMenu
|
|
{
|
|
min-height:82px;
|
|
}
|
|
#products
|
|
{
|
|
height:auto;
|
|
min-height:60px;
|
|
}
|
|
.crate
|
|
{
|
|
width:48px;
|
|
height:48px;
|
|
margin:6px;
|
|
display:inline-block;
|
|
cursor:pointer;
|
|
/*opacity:0.6;*/
|
|
position:relative;
|
|
/*background:#000;*/
|
|
background:rgba(0,0,0,0.25);
|
|
float:left;
|
|
border:none;
|
|
}
|
|
#menu .crate{outline:none !important;}
|
|
.crate:before
|
|
{
|
|
content:'';
|
|
position:absolute;
|
|
left:-6px;
|
|
top:-6px;
|
|
width:60px;
|
|
height:60px;
|
|
display:block;
|
|
background:url(img/upgradeFrame.png?v=2);
|
|
background-position:0px 0px;
|
|
z-index:10;
|
|
}
|
|
|
|
.crate.noFrame {background-color:transparent!important;margin:2px;}
|
|
.crate.noFrame:before {background:transparent;}
|
|
.crate.noFrame {opacity:0.3;}
|
|
.crate.noFrame.enabled ,.crate.noFrame:hover {opacity:1;}
|
|
|
|
|
|
.crate:before{background-position:120px 0px;}
|
|
.crate.enabled:before{background-position:0px 0px;}
|
|
.crate.enabled:hover:before,.crate.highlighted:before{background-position:60px 0px;}
|
|
.crate.noFrame.highlighted{z-index:100;box-shadow:0px 0px 12px -4px rgba(255,255,255,1) inset,0px 0px 0px 1px rgba(255,255,255,0.65);}
|
|
/*.crate.enabled:hover:after,.crate.highlighted:after
|
|
{
|
|
content:'';
|
|
position:absolute;
|
|
left:-24px;
|
|
top:-24px;
|
|
width:96px;
|
|
height:96px;
|
|
display:block;
|
|
//background:url(img/upgradeHighlight.png);
|
|
background:url(img/upgradeHighlight.jpg);
|
|
mix-blend-mode:screen;
|
|
z-index:100;
|
|
pointer-events:none;
|
|
}*/
|
|
.crate.shadow:before{background-position:120px 60px;}
|
|
.crate.shadow.enabled:before{background-position:0px 60px;}
|
|
.crate.shadow.enabled:hover:before{background-position:60px 60px;}
|
|
|
|
.selectorCorner
|
|
{
|
|
position:absolute;
|
|
left:-6px;
|
|
bottom:-6px;
|
|
width:12px;
|
|
height:12px;
|
|
display:block;
|
|
background:url(img/upgradeSelector.png);
|
|
z-index:20;
|
|
}
|
|
|
|
.crate:hover:before
|
|
{
|
|
z-index:20;
|
|
}
|
|
|
|
.pieTimer
|
|
{
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
width:48px;
|
|
height:48px;
|
|
background:url(img/pieFill.png);
|
|
/*background-size:864px 384px;*/
|
|
/*background-size:864px 384px;*/
|
|
z-index:1000;
|
|
opacity:0.5;
|
|
}
|
|
|
|
.crate.heavenly{opacity:0.8;z-index:10;}
|
|
.crate.heavenly:before
|
|
{
|
|
left:-20px;
|
|
top:-20px;
|
|
width:88px;
|
|
height:88px;
|
|
background-image:url(img/ascendSlot.png);
|
|
background-position:88px 0px;
|
|
}
|
|
/*.crate.heavenly:after
|
|
{
|
|
content:'';
|
|
position:absolute;
|
|
left:-6px;
|
|
top:-6px;
|
|
width:60px;
|
|
height:60px;
|
|
display:block;
|
|
background:#f00;
|
|
border-radius:30px;
|
|
z-index:-10;
|
|
}*/
|
|
#menu .crate.heavenly {margin:12px;}
|
|
/*#menu .crate.heavenly:nth-child(even) {margin-top:16px;margin-bottom:8px;}
|
|
#menu .crate.heavenly:nth-child(3n) {margin-right:16px;margin-left:8px;}*/
|
|
.crate.heavenly,.crate.heavenly:hover{background-color:transparent;}
|
|
.icon
|
|
{
|
|
width:48px;
|
|
height:48px;
|
|
display:inline-block;
|
|
margin:0px 4px;
|
|
}
|
|
.icon,.crate,.usesIcon
|
|
{
|
|
/*background-image:url(img/icons.png?v=20);*/
|
|
}
|
|
.icon,.crate,.shadowFilter
|
|
{
|
|
filter:drop-shadow(0px 3px 2px #000);
|
|
-webkit-filter:drop-shadow(0px 3px 2px #000);
|
|
}
|
|
|
|
/*filter the whole list rather than filtering each individual crate*/
|
|
.crateBox .crate,.upgradeBox .crate
|
|
{
|
|
filter:none;
|
|
-webkit-filter:none;
|
|
}
|
|
.crateBox,.upgradeBox
|
|
{
|
|
filter:drop-shadow(0px 3px 2px #000);
|
|
-webkit-filter:drop-shadow(0px 3px 2px #000);
|
|
}
|
|
.listing.crateBox
|
|
{
|
|
overflow-y:hidden;
|
|
padding-bottom:12px;
|
|
margin-bottom:-12px;
|
|
}
|
|
|
|
.achievement
|
|
{
|
|
/*opacity:0.4;*/
|
|
}
|
|
.crate.enabled
|
|
{
|
|
opacity:1;
|
|
}
|
|
.crate.heavenly.enabled:before
|
|
{
|
|
/*background-position:0px -60px;*/
|
|
background-position:0px 0px;
|
|
}
|
|
.crate.heavenly:hover:before
|
|
{
|
|
background-position:-88px 0px;
|
|
}
|
|
.crate:hover,.crate.highlighted
|
|
{
|
|
/*background-color:#200e0a;*/
|
|
opacity:1;
|
|
top:-1px;
|
|
|
|
/* for some reason having a filter update on hover makes the cursor confused about which icon it's hovering */
|
|
/*filter:brightness(115%);
|
|
-webkit-filter:brightness(115%);*/
|
|
}
|
|
.crate.ghosted
|
|
{
|
|
background:transparent;
|
|
opacity:0.2;
|
|
}
|
|
.parentLink
|
|
{
|
|
/*background:url(img/linkPulse.png);*/
|
|
background:url(img/linkPulse.gif);
|
|
width:0px;
|
|
height:8px;
|
|
position:absolute;
|
|
-ms-transform-origin:0% 50%;
|
|
-webkit-transform-origin:0% 50%;
|
|
transform-origin:0% 50%;
|
|
opacity:0.5;
|
|
z-index:-10;
|
|
/*
|
|
-webkit-animation:parentLinkPulse 1s infinite linear;
|
|
-moz-animation:parentLinkPulse 1s infinite linear;
|
|
animation:parentLinkPulse 1s infinite linear;
|
|
*/
|
|
}
|
|
@-webkit-keyframes parentLinkPulse{
|
|
from {background-position:0px 0px;}
|
|
to {background-position:32px 0px;}
|
|
}
|
|
@-moz-keyframes parentLinkPulse{
|
|
from {background-position:0px 0px;}
|
|
to {background-position:32px 0px;}
|
|
}
|
|
@keyframes parentLinkPulse{
|
|
from {background-position:0px 0px;}
|
|
to {background-position:32px 0px;}
|
|
}
|
|
|
|
.product
|
|
{
|
|
width:300px;
|
|
height:64px;
|
|
cursor:pointer;
|
|
opacity:0.6;
|
|
background:url(img/storeTile.jpg);
|
|
position:relative;
|
|
-webkit-transition: opacity 0.25s ease-out, margin-bottom 0.1s ease-out;
|
|
-moz-transition: opacity 0.25s ease-out, margin-bottom 0.1s ease-out;
|
|
-ms-transition: opacity 0.25s ease-out, margin-bottom 0.1s ease-out;
|
|
-o-transition: opacity 0.25s ease-out, margin-bottom 0.1s ease-out;
|
|
transition: opacity 0.25s ease-out, margin-bottom 0.1s ease-out;
|
|
border:none;
|
|
text-align:left;
|
|
line-height:inherit;
|
|
}
|
|
.product:after
|
|
{
|
|
content:'';
|
|
display:block;
|
|
position:absolute;
|
|
left:0px;top:0px;right:0px;bottom:0px;
|
|
z-index:100;
|
|
}
|
|
.product:nth-child(4n-3) {background-position:0px 64px;}
|
|
.product:nth-child(4n-2) {background-position:0px 128px;}
|
|
.product:nth-child(4n-1) {background-position:0px 192px;}
|
|
.product:hover
|
|
{
|
|
box-shadow:0px 0px 16px #fed inset,0px 0px 1px #000;
|
|
z-index:20;
|
|
filter:brightness(115%);
|
|
-webkit-filter:brightness(115%);
|
|
}
|
|
.product.enabled:active
|
|
{
|
|
box-shadow:0px 0px 16px #000 inset;
|
|
}
|
|
.product.unlocked.enabled
|
|
{
|
|
opacity:1;
|
|
}
|
|
.product.toggledOff
|
|
{
|
|
opacity:0;
|
|
}
|
|
.productName
|
|
{
|
|
font-weight:bold;
|
|
letter-spacing:-1px;
|
|
font-size:28px;
|
|
}
|
|
.longProductName
|
|
{
|
|
line-height:90%;
|
|
font-size:17px;
|
|
padding-right:50px;
|
|
}
|
|
.product .icon
|
|
{
|
|
width:64px;
|
|
height:64px;
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
background-repeat:no-repeat;
|
|
margin:0px;
|
|
}
|
|
.product .content
|
|
{
|
|
display:inline-block;
|
|
position:absolute;
|
|
left:64px;
|
|
top:6px;
|
|
right:0px;
|
|
bottom:6px;
|
|
padding:4px;
|
|
text-shadow:0px 2px 6px #000,0px 1px 1px #000;
|
|
}
|
|
.tinyProductIcon
|
|
{
|
|
width:64px;
|
|
height:64px;
|
|
left:0px;
|
|
top:0px;
|
|
background-repeat:no-repeat;
|
|
margin:-16px;
|
|
transform:scale(0.5);
|
|
display:inline-block;
|
|
border-radius:32px;
|
|
}
|
|
#buildingsMaster .tinyProductIcon
|
|
{
|
|
cursor:pointer;
|
|
opacity:0.8;
|
|
}
|
|
#buildingsMaster .tinyProductIcon:hover
|
|
{
|
|
opacity:1;
|
|
}
|
|
|
|
|
|
.product .content .owned
|
|
{
|
|
position:absolute;
|
|
right:8px;
|
|
bottom:5px;
|
|
font-size:40px;
|
|
opacity:0.2;
|
|
color:#000;
|
|
text-shadow:0px 0px 8px #fff;
|
|
letter-spacing:-2.5px;
|
|
}
|
|
.product .icon
|
|
{
|
|
opacity:0;
|
|
}
|
|
.product.unlocked .icon
|
|
{
|
|
opacity:1;
|
|
}
|
|
.product .icon.off
|
|
{
|
|
z-index:100;
|
|
opacity:1;
|
|
background-repeat:no-repeat;
|
|
-webkit-transition: opacity 2s ease-out;
|
|
-moz-transition: opacity 2s ease-out;
|
|
-ms-transition: opacity 2s ease-out;
|
|
-o-transition: opacity 2s ease-out;
|
|
transition: opacity 2s ease-out;
|
|
}
|
|
.product.unlocked .icon.off
|
|
{
|
|
opacity:0;
|
|
}
|
|
.product.locked .title {display:none;}
|
|
.product .lockedTitle {display:none;}
|
|
.product.locked .lockedTitle {display:block;}
|
|
|
|
.selling .product
|
|
{
|
|
box-shadow:0px 0px 16px #c00 inset;
|
|
}
|
|
.selling .product:hover
|
|
{
|
|
box-shadow:0px 0px 16px #f66 inset,0px 0px 1px #000;
|
|
}
|
|
.selling .product.enabled:active
|
|
{
|
|
box-shadow:0px 0px 16px #f99 inset;
|
|
}
|
|
|
|
.productButtons
|
|
{
|
|
position:absolute;
|
|
right:-1px;
|
|
bottom:0px;
|
|
overflow:hidden;
|
|
z-index:10;
|
|
}
|
|
.productButton
|
|
{
|
|
background:rgba(0,0,0,0.25);
|
|
box-shadow:-1px -1px 0px rgba(255,255,255,0.25),0px 0px 1px 1px rgba(0,0,0,0.5) inset;
|
|
border-top-left-radius:4px;
|
|
border-top-right-radius:4px;
|
|
padding:4px 8px;
|
|
font-size:11px;
|
|
font-weight:bold;
|
|
color:#ccc;
|
|
text-shadow:1px 1px 0px #000,-1px 1px 0px #000,1px -1px 0px #000,-1px -1px 0px #000;
|
|
cursor:pointer;
|
|
float:right;
|
|
position:relative;
|
|
margin-left:2px;
|
|
margin-top:2px;
|
|
min-height:11px;
|
|
}
|
|
.productLevel
|
|
{
|
|
border-top-right-radius:0px;
|
|
}
|
|
.productButton:hover
|
|
{
|
|
background:rgba(0,0,0,0.5);
|
|
color:#fff;
|
|
}
|
|
.productLevel
|
|
{
|
|
width:65px;
|
|
}
|
|
.productLevel:after
|
|
{
|
|
content:'';
|
|
display:block;
|
|
position:absolute;
|
|
right:8px;
|
|
bottom:0px;
|
|
background:url(img/levelUp.png);
|
|
width:33px;
|
|
height:19px;
|
|
opacity:0.75;
|
|
}
|
|
.productLevel:hover:after
|
|
{
|
|
opacity:1;
|
|
}
|
|
.productButton.on{background:rgba(255,255,255,0.75);}
|
|
.productMute{display:none;}
|
|
.extraButtons .productMute{display:inline-block;}
|
|
|
|
|
|
.lumpsOnly{display:none;}
|
|
.lumpsOn .lumpsOnly{display:block;}
|
|
|
|
.storePre
|
|
{
|
|
background:#999;
|
|
background:url(img/darkNoise.jpg);
|
|
box-shadow:0px 0px 4px #000 inset;
|
|
width:300px;
|
|
padding:4px 0px;
|
|
position:relative;
|
|
text-align:center;
|
|
font-variant:small-caps;
|
|
color:#fff;
|
|
font-weight:bold;
|
|
font-size:14px;
|
|
text-shadow:0px 1px 0px #000;
|
|
}
|
|
.storePreButton
|
|
{
|
|
opacity:0.5;
|
|
cursor:pointer;
|
|
}
|
|
.storePreButton:hover,.storePreButton.selected
|
|
{
|
|
text-shadow:0px 1px 0px #000,0px 0px 1px #fff,0px 0px 4px #fff;
|
|
opacity:1;
|
|
}
|
|
#storeBulk
|
|
{
|
|
width:240px;
|
|
padding:0px;
|
|
padding-left:60px;
|
|
height:32px;
|
|
overflow:hidden;
|
|
}
|
|
.storeBulkMode,.storeBulkAmount
|
|
{
|
|
float:left;
|
|
}
|
|
.storeBulkMode:hover,.storeBulkAmount:hover,.storeBulkMode.selected,.storeBulkAmount.selected
|
|
{
|
|
}
|
|
.storeBulkMode
|
|
{width:60px;padding:1px 0px;}
|
|
#storeBulkBuy
|
|
{position:absolute;left:0px;top:0px;}
|
|
#storeBulkSell
|
|
{position:absolute;left:0px;bottom:1px;}
|
|
.storeBulkAmount
|
|
{width:60px;padding:9px 0px;}
|
|
|
|
#buffs
|
|
{
|
|
position:absolute;
|
|
top:0px;
|
|
right:0px;
|
|
z-index:100000;
|
|
transform-origin:100% 0%;
|
|
transform:scale(0.75);
|
|
}
|
|
.buff
|
|
{
|
|
margin:12px;
|
|
}
|
|
|
|
#shimmers
|
|
{
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
z-index:10000000000;
|
|
filter:drop-shadow(0px 4px 4px rgba(0,0,0,0.75));
|
|
-webkit-filter:drop-shadow(0px 4px 4px rgba(0,0,0,0.75));
|
|
}
|
|
.shimmer
|
|
{
|
|
cursor:pointer;
|
|
position:absolute;
|
|
z-index:10000000000;
|
|
display:none;
|
|
}
|
|
.shimmer:hover
|
|
{
|
|
filter:brightness(125%) drop-shadow(0px 0px 3px rgba(255,255,255,1));
|
|
-webkit-filter:brightness(125%) drop-shadow(0px 0px 3px rgba(255,255,255,1));
|
|
}
|
|
|
|
.goldenCookie,.seasonPopup
|
|
{
|
|
cursor:pointer;
|
|
position:absolute;
|
|
z-index:10000000000;
|
|
display:none;
|
|
filter:drop-shadow(0px 4px 4px rgba(0,0,0,0.75));
|
|
-webkit-filter:drop-shadow(0px 4px 4px rgba(0,0,0,0.75));
|
|
}
|
|
|
|
.goldenCookie
|
|
{
|
|
width:96px;
|
|
height:96px;
|
|
background:url(img/goldCookie.png);
|
|
}
|
|
|
|
.seasonPopup
|
|
{
|
|
width:256px;
|
|
height:256px;
|
|
background:url(img/goldCookie.png) center center no-repeat;
|
|
}
|
|
.goldenCookie:hover,.seasonPopup:hover
|
|
{
|
|
filter:brightness(125%) drop-shadow(0px 3px 4px rgba(0,0,0,0.5));
|
|
-webkit-filter:brightness(125%) drop-shadow(0px 3px 4px rgba(0,0,0,0.5));
|
|
}
|
|
|
|
.sparkles
|
|
{
|
|
width:128px;
|
|
height:128px;
|
|
background:url(img/sparkles.jpg);
|
|
position:absolute;
|
|
z-index:10000000000;
|
|
display:none;
|
|
left:0px;
|
|
top:0px;
|
|
mix-blend-mode:screen;
|
|
pointer-events:none;
|
|
}
|
|
|
|
#darken
|
|
{
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
right:0px;
|
|
bottom:0px;
|
|
background:rgba(0,0,0,0.5);
|
|
z-index:100000000;
|
|
display:none;
|
|
}
|
|
|
|
#promptAnchor
|
|
{
|
|
position:absolute;
|
|
left:50%;
|
|
top:125px;
|
|
z-index:1000000000;
|
|
display:none;
|
|
width:0px;
|
|
height:0px;
|
|
}
|
|
#prompt
|
|
{
|
|
position:relative;
|
|
overflow:hidden;
|
|
width:250px;
|
|
padding:16px;
|
|
margin-left:-18px;
|
|
left:-125px;
|
|
text-align:center;
|
|
/*animation:pucker 0.2s;*/
|
|
}
|
|
#promptContent{margin-top:-8px;}
|
|
#promptContent h3{margin-bottom:6px;}
|
|
#prompt h3,.prompt h3,h4,.fancyText
|
|
{
|
|
text-align:center;
|
|
font-weight:bold;
|
|
font-size:14px;
|
|
position:relative;
|
|
font-variant:small-caps;
|
|
display:inline-block;
|
|
}
|
|
#prompt h3,.prompt h3,.fancyText
|
|
{
|
|
color:#ece2b6;
|
|
text-shadow:0px 1px 0px #733726,0px 2px 0px #875626,0px 2px 1px #000,0px 2px 3px #000;
|
|
font-family:Georgia,serif;
|
|
font-size:15px;
|
|
}
|
|
.large .fancyText{font-size:20px;}
|
|
#prompt h3:before,#prompt h3:after,.prompt h3:before,.prompt h3:after
|
|
{
|
|
content:'';
|
|
display:block;
|
|
width:39px;
|
|
height:23px;
|
|
position:absolute;
|
|
top:-4px;
|
|
}
|
|
#prompt h3:before,.prompt h3:before
|
|
{
|
|
background:url(img/featherLeft.png) no-repeat;
|
|
left:-39px;
|
|
}
|
|
#prompt h3:after,.prompt h3:after
|
|
{
|
|
background:url(img/featherRight.png) no-repeat;
|
|
right:-39px;
|
|
}
|
|
#prompt textarea,#prompt input
|
|
{
|
|
width:100%;
|
|
margin:0px;
|
|
position:relative;
|
|
left:-3px;
|
|
}
|
|
|
|
#prompt.widePrompt
|
|
{
|
|
width:500px;
|
|
left:-250px;
|
|
}
|
|
|
|
#prompt.legacyPrompt
|
|
{
|
|
width:400px;
|
|
left:-200px;
|
|
}
|
|
|
|
#notes
|
|
{
|
|
position:absolute;
|
|
/*left:0px;
|
|
bottom:128px;*/
|
|
left:50%;
|
|
margin-left:-125px;
|
|
bottom:0px;
|
|
z-index:100000000;
|
|
}
|
|
#notes .remaining {padding:3px;opacity:0.75;text-shadow:0px 0px 2px #000,0px 1px 0px #000;}
|
|
.note
|
|
{
|
|
position:relative;
|
|
overflow-y:hidden;
|
|
width:250px;
|
|
padding-right:16px;
|
|
padding-bottom:8px;
|
|
left:-18px;
|
|
}
|
|
.note .icon
|
|
{
|
|
float:left;
|
|
margin-left:-4px;
|
|
}
|
|
.note h3
|
|
{
|
|
font-weight:bold;
|
|
font-size:14px;
|
|
/*overflow-y:hidden;*/
|
|
}
|
|
.note h5
|
|
{
|
|
opacity:0.6;
|
|
font-size:11px;
|
|
}
|
|
.note.haspic h3
|
|
{
|
|
margin-top:4px;
|
|
}
|
|
.note.hasdesc h3
|
|
{
|
|
/*border-bottom:1px solid rgba(255,255,255,0.5);
|
|
padding-bottom:2px;*/
|
|
}
|
|
.note.nodesc h3
|
|
{
|
|
text-align:center;
|
|
}
|
|
|
|
p
|
|
{
|
|
text-indent:6px;
|
|
padding:2px 0px;
|
|
}
|
|
|
|
|
|
#sectionMiddle,#sectionRight,#cookies,#bakeryNameAnchor,#backgroundCanvas,.separatorRight,.separatorLeft
|
|
{transition:opacity 1s;}
|
|
.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
|
|
{opacity:0;}
|
|
#game.ascendIntro,#ascend
|
|
{
|
|
/*background:url(img/starbg.jpg);
|
|
background-size:1024px 1024px;*/
|
|
/*background:url(img/starbg.jpg),url(img/starbg.jpg);
|
|
background-size:1024px 1024px,2048px 2048px;
|
|
background-blend-mode:hard-light;*/
|
|
}
|
|
#game.ascendIntro,#game.reincarnating{background:#000;}
|
|
|
|
.ascending #sectionMiddle,.ascending #sectionRight,.ascending #sectionLeft,.ascending .separatorLeft,.ascending .separatorRight,.reincarnating #backgroundCanvas
|
|
{display:none;opacity:0;}
|
|
|
|
#ascend
|
|
{
|
|
display:none;
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
right:0px;
|
|
bottom:0px;
|
|
z-index:100000;
|
|
cursor:move;
|
|
/*transition:background-position 0.2s ease-out,background-size 0.1s ease-out;*/
|
|
}
|
|
#ascendBG
|
|
{
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
width:100%;
|
|
height:100%;
|
|
background:url(img/shadedBorders.png);
|
|
background-size:100% 100%;
|
|
}
|
|
#ascendZoomable
|
|
{
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
}
|
|
.ascending #ascend
|
|
{display:block;}
|
|
#ascendContent
|
|
{
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
/*transition:transform 0.1s ease-out;*/
|
|
}
|
|
#ascendHelp
|
|
{
|
|
position:absolute;
|
|
bottom:40px;
|
|
width:300px;
|
|
left:50%;
|
|
margin-left:-150px;
|
|
font-size:16px;
|
|
text-align:center;
|
|
z-index:100;
|
|
}
|
|
#ascendHelp a
|
|
{
|
|
display:block;
|
|
border-radius:40px;
|
|
font-size:22px;
|
|
opacity:0.5;
|
|
cursor:pointer;
|
|
text-decoration:none;
|
|
background:#000;
|
|
color:#fff;
|
|
padding:8px 4px;
|
|
width:150px;
|
|
margin:5px auto;
|
|
}
|
|
#ascendHelp a:hover
|
|
{
|
|
background:#fff;
|
|
color:#000;
|
|
opacity:0.75;
|
|
}
|
|
#ascendOverlay
|
|
{
|
|
position:absolute;
|
|
top:0px;
|
|
left:50%;
|
|
height:100%;
|
|
z-index:100;
|
|
text-align:center;
|
|
filter:drop-shadow(0px 0px 4px #000);
|
|
/*-webkit-filter:drop-shadow(0px 0px 4px #000);*/
|
|
cursor:auto;
|
|
}
|
|
|
|
#ascendHCs .price
|
|
{font-weight:inherit;color:inherit;}
|
|
|
|
#ascendBox
|
|
{
|
|
background:url(img/ascendBox.png);
|
|
width:344px;
|
|
height:162px;
|
|
position:absolute;
|
|
left:-172px;
|
|
top:0px;
|
|
text-align:center;
|
|
}
|
|
.ascendData
|
|
{
|
|
width:60%;
|
|
margin:2px auto;
|
|
padding:6px;
|
|
}
|
|
|
|
#ascendInfo
|
|
{
|
|
background:url(img/ascendInfo.png);
|
|
width:308px;
|
|
height:94px;
|
|
position:absolute;
|
|
left:-154px;
|
|
bottom:0px;
|
|
text-align:center;
|
|
}
|
|
|
|
|
|
/* todo! */
|
|
/* note: also change min game size ie. w/Math.max(800,w) to 400 and account for window resizing triggers */
|
|
/*
|
|
#sectionLeft
|
|
{width:100%;}
|
|
#sectionMiddle,#sectionRight,#leftBeam,#rightBeam
|
|
{display:none;}
|
|
#cookies,#bakeryName
|
|
{background:transparent;}
|
|
*/
|
|
|
|
|
|
.green,b.green{color:#3f0;}.green b{color:inherit;}
|
|
.red,b.red{color:#f30;}.red b{color:inherit;}
|
|
.gray,b.gray{color:#999;}.gray b{color:inherit;}
|
|
|
|
#versionNumber
|
|
{
|
|
position:absolute;
|
|
left:0px;
|
|
bottom:0px;
|
|
opacity:0.5;
|
|
margin:8px;
|
|
font-size:22px;
|
|
z-index:1000000001;
|
|
}
|
|
|
|
#alert
|
|
{
|
|
display:none;
|
|
position:fixed;
|
|
bottom:-16px;
|
|
left:-16px;
|
|
z-index:100000000000;
|
|
padding:12px 12px 24px 24px;
|
|
font-size:14px;
|
|
background:#333;
|
|
border-radius:12px;
|
|
color:#fff;
|
|
box-shadow:0px 0px 4px #000, 0px 0px 4px #000 inset;
|
|
text-shadow:1px 1px 0px #000,0px 0px 2px #000;
|
|
border:4px solid #fff;
|
|
animation:rainbowCycleBG 15s infinite ease-in-out;
|
|
}
|
|
#alert b {font-weight:bold;}
|
|
#alert small {font-size:80%;}
|
|
|
|
a.smallBlackButton,a.smallOrangeButton,a.smallWhiteButton
|
|
{
|
|
background:#222;
|
|
box-shadow:0px 0px 0px 1px #000 inset,0px 2px 0px #444 inset,0px 2px 3px rgba(0,0,0,0.4);
|
|
text-shadow:0px -1px 0px #444,0px 1px 0px #000;
|
|
text-decoration:none;
|
|
color:#fff;
|
|
font-weight:bold;
|
|
padding:4px 5px;
|
|
}
|
|
a.smallOrangeButton
|
|
{
|
|
background:#f86754;
|
|
box-shadow:0px 0px 0px 1px #c52921 inset,0px 2px 0px #ff966d inset,0px 2px 3px rgba(0,0,0,0.4);
|
|
text-shadow:0px -1px 0px #ff966d,0px 1px 0px #c52921;
|
|
}
|
|
a.smallWhiteButton
|
|
{
|
|
color:#222;
|
|
background:#ccc;
|
|
box-shadow:0px 0px 0px 1px #666 inset,0px 2px 0px #fff inset,0px 2px 3px rgba(0,0,0,0.4);
|
|
text-shadow:0px -1px 0px #eee,0px 1px 0px #999;
|
|
}
|
|
|
|
#debug
|
|
{
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
z-index:1000000000;
|
|
display:none;
|
|
}
|
|
#devConsole
|
|
{
|
|
position:relative;
|
|
left:-2px;
|
|
top:-2px;
|
|
width:24px;
|
|
height:32px;
|
|
overflow:hidden;
|
|
cursor:pointer;
|
|
opacity:0.5;
|
|
text-align:center;
|
|
transition:opacity 0.4s;
|
|
}
|
|
#devConsole:hover
|
|
{
|
|
width:192px;
|
|
height:auto;
|
|
min-width:192px;
|
|
min-height:48px;
|
|
overflow:auto;
|
|
opacity:1;
|
|
}
|
|
#devConsole:hover>.icon
|
|
{
|
|
display:none;
|
|
}
|
|
#devConsoleContent
|
|
{display:none;cursor:auto;}
|
|
#devConsole:hover>#devConsoleContent
|
|
{
|
|
display:block;
|
|
}
|
|
|
|
#debugLog
|
|
{
|
|
min-width:150px;
|
|
background:rgba(0,0,0,0.5);
|
|
background:linear-gradient(to right,rgba(0,0,0,0.5),rgba(0,0,0,0.5) 90%,rgba(0,0,0,0));
|
|
padding:4px 4px 4px 8px;
|
|
font-size:10px;
|
|
text-shadow:0px 1px 0px #000;
|
|
color:#ccc;
|
|
pointer-events:none;
|
|
}
|
|
|
|
.crisp
|
|
{
|
|
image-rendering: optimizeSpeed; /* Older versions of FF */
|
|
image-rendering: -moz-crisp-edges; /* FF 6.0+ */
|
|
image-rendering: -webkit-optimize-contrast; /* Safari */
|
|
image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
|
|
image-rendering: pixelated; /* Future-browsers */
|
|
-ms-interpolation-mode: nearest-neighbor; /* IE */
|
|
}
|
|
|
|
|
|
body{scrollbar-color:#bbb #111;}
|
|
|
|
/*show scrollbars in safari*/
|
|
::-webkit-scrollbar
|
|
{
|
|
-webkit-appearance:none;
|
|
width:17px;
|
|
}
|
|
::-webkit-scrollbar-track
|
|
{
|
|
background-color:#111;
|
|
}
|
|
::-webkit-scrollbar-thumb
|
|
{
|
|
background-color:#bbb;
|
|
border:2px solid #111;
|
|
box-shadow:0px 0px 0px 1px #eee inset;
|
|
}
|
|
|
|
/*=====================================================================================
|
|
SUPPORT
|
|
=======================================================================================*/
|
|
#support
|
|
{
|
|
width:300px;
|
|
text-align:center;
|
|
margin:16px auto;
|
|
}
|
|
.supportComment
|
|
{
|
|
font-size:10px;
|
|
opacity:0.75;
|
|
text-shadow:0px 0px 2px #000,0px 1px 0px #000;
|
|
padding:8px 0px;
|
|
text-align:center;
|
|
}
|
|
.supportPlaceholder {width:300px;height:250px;position:absolute;left:0px;top:0px;z-index:10;opacity:0.6;}
|
|
.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;}
|
|
#donateBox
|
|
{
|
|
z-index:10000000;
|
|
position:absolute;
|
|
right:12px;
|
|
top:160px;
|
|
padding:8px 4px;
|
|
text-align:center;
|
|
width:120px;
|
|
display:none;
|
|
background:rgba(128,128,255,0.25);
|
|
box-shadow:0px 0px 4px 4px rgba(128,128,255,0.25);
|
|
border-radius:8px;
|
|
transition:box-shadow 0.25s,background 0.25s;
|
|
}
|
|
#donateBox:hover
|
|
{
|
|
background:rgba(128,128,255,0.5);
|
|
box-shadow:0px 0px 4px 4px rgba(128,128,255,0.5);
|
|
}
|
|
#donateBox.on {display:block;}
|
|
|
|
#donate
|
|
{
|
|
display:inline-block;
|
|
}
|
|
#donateButton
|
|
{
|
|
border:0px;
|
|
display:inline-block;
|
|
border-radius:4px;
|
|
background:#fc6;
|
|
background:linear-gradient(to bottom,#fff 0%,#fc6 45%,#f90 50%,#f66 100%);
|
|
box-shadow:0px 0px 1px #fff inset,0px 0px 0px 1px #f66;
|
|
text-shadow:0px -1px 0px #fc6,0px 1px 0px #f66;
|
|
cursor:pointer;
|
|
font-size:9px;
|
|
font-weight:bold;
|
|
opacity:0.9;
|
|
}
|
|
#donateButton:hover
|
|
{
|
|
border:0px;
|
|
box-shadow:0px 0px 4px #fff inset,0px 0px 0px 1px #f66;
|
|
opacity:1;
|
|
}
|
|
.highlightHover:hover{filter:brightness(125%);opacity:1;}
|
|
.highlightHover:active{filter:brightness(85%);opacity:1;}
|
|
|
|
.ifNoAds
|
|
{
|
|
display:none;
|
|
}
|
|
.noAds .ifNoAds{display:block;}
|
|
.noAds #support,.noAds #smallSupport,.noAds .supportComment{display:none;}
|
|
|
|
|
|
.srOnly
|
|
{
|
|
/* screen-readers only; intended to replicate information in tooltips */
|
|
position:absolute !important;
|
|
top:0px;
|
|
left:0px;
|
|
width:100%;
|
|
height:100%;
|
|
overflow:hidden;
|
|
color:transparent !important;
|
|
text-shadow:none !important;
|
|
border:none !important;
|
|
outline:none !important;
|
|
box-shadow:none !important;
|
|
/*pointer-events:none;*/
|
|
cursor:pointer;
|
|
z-index:10000000;
|
|
font-size:30px !important;
|
|
}
|
|
|
|
/*=====================================================================================
|
|
NEW AD DISPLAY
|
|
=======================================================================================*/
|
|
/*
|
|
#sectionRight
|
|
{
|
|
right:160px;
|
|
}
|
|
#sectionMiddle
|
|
{
|
|
right:478px;
|
|
}
|
|
#sectionAd
|
|
{
|
|
height:100%;
|
|
position:absolute;
|
|
top:0px;
|
|
right:0px;
|
|
overflow-x:hidden;
|
|
width:160px;
|
|
background:url(img/darkNoise.jpg);
|
|
}
|
|
.separatorRight
|
|
{
|
|
right:477px;
|
|
}
|
|
#sectionAd .supportPlaceholder {width:160px;}
|
|
*/
|
|
|
|
/*=====================================================================================
|
|
STOP THE FANCY
|
|
=======================================================================================*/
|
|
.noFancy *
|
|
{
|
|
text-shadow:none!important;
|
|
box-shadow:none!important;
|
|
}
|
|
.noFancy .price
|
|
{
|
|
text-shadow:0px 0px 4px #000,0px 1px 0px #000!important;
|
|
}
|
|
.noFilters *
|
|
{
|
|
filter:none!important;
|
|
-webkit-filter:none!important;
|
|
}
|
|
|
|
|
|
/**{overflow:hidden!important;}*/ |