summaryrefslogtreecommitdiff
path: root/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'style.css')
-rw-r--r--style.css2199
1 files changed, 1893 insertions, 306 deletions
diff --git a/style.css b/style.css
index c36eb41..11ecd21 100644
--- a/style.css
+++ b/style.css
@@ -44,6 +44,9 @@ table {
}
+/*=====================================================================================
+BASE
+=======================================================================================*/
html,body
{
width:100%;
@@ -61,11 +64,23 @@ body
user-select: none;
color:#fff;
- background:#000 url(img/darkNoise.png);
+ background:#000 url(img/darkNoise.jpg);
font-family:Tahoma,Arial,sans-serif;
font-size:13px;
}
+#wrapper
+{
+ width:100%;
+ height:100%;
+ position:absolute;
+ left:0px;
+ top:0px;
+ right:0px;
+ bottom:0px;
+ /*min-width:1280px;*/
+}
+
small
{
font-size:80%;
@@ -93,18 +108,42 @@ a:active
/*box-shadow:0px 0px 12px #000 inset;*/
}
-.title,.section
+.titleFont,.title,.section,.lockedTitle
+{
+ font-family: 'Merriweather', Georgia,serif;
+}
+.title,.section,.lockedTitle
{
- font-family: 'Kavoon', Georgia,serif;
font-size:28px;
text-shadow:0px 0px 4px #000;
color:#fff;
}
+
+/*=====================================================================================
+SECTIONS
+=======================================================================================*/
.section
{
- padding:16px;
- width:100%;
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;
+}
+.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
{
@@ -114,10 +153,39 @@ a:active
.subsection div.title
{
font-size:22px;
- padding:8px 16px;
- width:100%;
- border-bottom:1px solid #999;
+ 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
{
@@ -147,23 +215,75 @@ a:active
.listing label
{
font-size:12px;
- border-bottom:1px solid #fff;
+ 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));
}
+
.hidden
{
visibility:hidden;
}
+.toggledOff
+{
+ opacity:0;
+ display:none;
+}
.listing:hover .hidden
{
visibility:visible;
}
+.optionBox
+{
+ text-align:center;
+ clear:both;
+ margin-bottom:-12px;
+}
+.optionBox .option
+{
+}
+a.option.big
+{
+ font-size:30px;
+ margin:auto;
+ padding:8px 16px;
+ width:80%;
+}
+a.option.framed.large 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
{
display:inline-block;
@@ -175,6 +295,7 @@ a.option, .info a
padding:4px 8px;
text-decoration:none;
}
+a.option.off {opacity:0.5;}
a.option:hover, .info a:hover
{
border-color:#fff;
@@ -185,6 +306,11 @@ a.option:active, .info a:active
{
background-color:#333;
}
+.warning, a.option.warning
+{
+ color:#c00;
+ border-color:#c00;
+}
a.option.warning:hover
{
border-color:#f33;
@@ -194,6 +320,21 @@ 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;
@@ -212,12 +353,9 @@ a.option.warning:active
background-color:#999;
}
-.warning, a.option.warning
-{
- color:#c00;
- border-color:#c00;
-}
-
+/*=====================================================================================
+oh forget it this is just a mess
+=======================================================================================*/
#backgroundLayers, #backgroundLayers div
{
width:100%;
@@ -226,16 +364,7 @@ a.option.warning:active
left:0px;
top:0px;
}
-/*
-#backgroundLayer1
-{
- background:url(img/bgBlue.jpg);
-}
-#backgroundLayer2
-{
- background:#000 url(img/darkNoise.png);
-}
-*/
+
#backgroundCanvas,#backgroundLeftCanvas
{
position:absolute;
@@ -250,16 +379,77 @@ a.option.warning:active
top:0px;
width:100%;
height:32px;
- background:url(img/darkNoise.png);
- box-shadow:0px -4px 8px #666 inset;
+ background:url(img/darkNoiseTopBar.jpg) repeat-x bottom;
color:#ccc;
}
-#topBar div
+#topBar>div
{
- margin:6px 8px;
+ 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>#links
+{
+ display:block;
+ position:absolute;
+ right:0px;
+ top:0px;
+ z-index:10000000;
+ float:none;
+}
+
+.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);
+}
+div:hover>.hoverable
+{
+ opacity:1;
+ max-height:400px;
+}
+.hoverable>div
+{
+ padding:8px 12px;
+}
+.hoverable a
+{
+ text-shadow:none;
+ display:block;
+ text-decoration:none;
+ 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);
+}
+
#javascriptError
{
@@ -268,12 +458,86 @@ a.option.warning:active
top:0px;
right:0px;
bottom:0px;
- background:url(img/darkNoise.png);
+ 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:100000000000;
line-height:150%;
font-size:20px;
}
+#loader
+{
+ padding:64px 128px;
+ position:relative;
+ top:120px;
+ animation-name:appear;
+ animation-iteration-count:1;
+ animation-timing-function:ease-out;
+ animation-duration:0.5s;
+}
+@keyframes appear
+{
+ from {opacity:0;top:130px;}
+ to {opacity:1;top:120px;}
+}
+#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;
+}
+@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:-75px;
+ 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
+{
+ from {transform:rotate(0deg);}
+ to {transform:rotate(360deg);}
+}
+
#game
{
position:absolute;
@@ -291,8 +555,9 @@ a.option.warning:active
width:30%;
bottom:0px;
min-width:100px;
- overflow:hidden;
+ /*overflow:hidden;*/
}
+/*#sectionLeftExtra{position:absolute;left:0px;top:0px;}*/
#sectionMiddle
{
position:absolute;
@@ -303,12 +568,24 @@ a.option.warning:active
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 #sectionMiddle
+#game.onMenu #centerArea
{
- background:#000 url(img/darkNoise.png);
+ 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
{
@@ -318,6 +595,8 @@ a.option.warning:active
right:0px;
overflow-x:hidden;
overflow-y:scroll;
+ /*background:url(img/panelBG.png);*/
+ background:rgba(0,0,0,0.5);
}
#sectionLeft .blackGradient
@@ -339,53 +618,312 @@ a.option.warning:active
bottom:0px;
}
-#tooltipAnchor
+
+/* this is a mess */
+.framed,a.option,.sliderBox,.smallFramed
+{
+ border:1px solid #e2dd48;
+ background:#000 url(img/darkNoise.jpg);
+ background-image:url(img/shadedBordersSoft.png),url(img/darkNoise.jpg);
+ background-size: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
{
- position:absolute;
- z-index:1000000000;
- display:none;
+ /*border-color:#dac56e #c07a36 #a44e36 #c07a36;*/
+ /*border:1px solid #e2dd48;*/
+ border-color:#ece2b6 #875526 #733726 #dfbc9a;
}
-#tooltip
+.smallFramed
+{border-radius:8px;}
+a.option,textarea,input[type="text"],.sliderBox
+{
+ 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;
+}
+
+.framed,a.option.framed
{
- position:absolute;
- background:#000 url(img/darkNoise.png);
padding:4px 8px;
margin:4px;
- border:3px ridge #d2e248;
- border-color:#c7cd6e #a48836 #845a36 #a48836;
- border-radius:3px;
+ 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;
- text-shadow:0px 1px 1px #000;
- color:#ccc;
+ -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;
+ 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;
+}
+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;}
-#tooltip b
+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;
}
-#tooltip .name
+.framed .name
{
font-weight:bold;
font-size:110%;
color:#fff;
margin:2px 0px;
+ text-shadow:0px 0px 2px rgba(255,255,255,0.3);
}
-.description
-{
- margin:4px 0px;
-}
-
-#tooltip q
+.framed q
{
display:block;
position:relative;
text-align:right;
margin-top:8px;
font-style:italic;
- opacity:0.7;
- font-size:11px;
+ color:rgba(255,255,255,0.5);
+ font-size:11.5px;
+ 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;
+}
+.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);
+}
+
+.framed .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;
}
+#tooltip .data
+{
+ /*border-top:1px solid rgba(255,255,255,0.25);*/
+ padding:4px 0px;
+ font-size:80%;
+}
+
+.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;
+}
+
q:before
{
display:inline-block;
@@ -405,6 +943,21 @@ q:after
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;
@@ -420,6 +973,14 @@ q:after
width:16px;
height:16px;
}
+.heavenly.price:before
+{
+ background:url(img/heavenlyMoney.png);
+}
+.lump.price:before
+{
+ background:url(img/sugarLump.png);
+}
.price.plain
{
color:#fff;
@@ -448,6 +1009,7 @@ q:after
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;
}
.elderWrath #bigCookie
{
@@ -484,7 +1046,7 @@ q:after
background:url(img/smallCookies.png);
opacity:0;
}
-#particles {position:absolute;left:0px;top:0px;}
+#particles {position:absolute;left:0px;top:0px;z-index:100000000000;}
.particle
{
position:absolute;
@@ -494,16 +1056,17 @@ q:after
width:400px;
z-index:100000000;
text-align:center;
- text-shadow:0px 0px 6px #000;
+ text-shadow:1px 1px 1px #000,0px 0px 6px #000;
font-size:24px;
}
-#cookieShower
+.particle.title
{
- position:absolute;
- width:100%;
- height:100%;
- z-index:2;
+ 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%;
@@ -527,7 +1090,7 @@ q:after
{
position:absolute;
left:0px;
- top:15%;
+ top:10%;
width:100%;
text-align:center;
z-index:200;
@@ -535,12 +1098,69 @@ q:after
background:rgba(0,0,0,0.4);
padding:2px 0px;
}
+.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;
+}
+#bakeryName:hover
+{
+ 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) repeat-y;
+ 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;
@@ -558,7 +1178,8 @@ q:after
{
width:100%;
height:16px;
- background:url(img/panelHorizontal.png) repeat-x;
+ 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;
@@ -566,300 +1187,389 @@ q:after
.button
{
- background:#000 url(img/darkNoise.png);
- box-shadow:0px 0px 3px #666 inset,0px 0px 4px #000;
+ background:url(img/panelMenu3.png);
+ background-position:0px 0px;
position:absolute;
z-index:100;
- width:64px;
- height:24px;
+ width:100px;
+ height:48px;
text-align:center;
font-size:18px;
cursor:pointer;
- -webkit-transition: left 0.1s ease-out,right 0.1s ease-out,box-shadow 0.1s ease-out;
- -moz-transition: left 0.1s ease-out,right 0.1s ease-out,box-shadow 0.1s ease-out;
- -ms-transition: left 0.1s ease-out,right 0.1s ease-out,box-shadow 0.1s ease-out;
- -o-transition: left 0.1s ease-out,right 0.1s ease-out,box-shadow 0.1s ease-out;
- transition: left 0.1s ease-out,right 0.1s ease-out,box-shadow 0.1s ease-out;
+ box-sizing:border-box;
+ padding-top:16px;
+
+ color:#999;
+ text-shadow:0px 1px 0px #444,0px 0px 4px #000;
}
-.button:hover
+.button:hover,.button.selected
{
- box-shadow:0px 0px 12px #ccc inset,0px 0px 4px #000;
z-index:1000;
-}
-#prefsButton:hover,#statsButton:hover{left:-8px;}
-#prefsButton,#statsButton{padding:14px 0px 10px 16px;}
-#prefsButton{top:0px;left:-16px;}
-#statsButton{bottom:16px;left:-16px;}
-#logButton:hover{right:-8px;}
-#logButton{padding:14px 16px 10px 0px;}
-#logButton{bottom:16px;right:-16px;}
+ color:#fff;
+ text-shadow:0px 1px 0px #999,0px 0px 4px #000;
+}
+#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;}
-#game.onMenu #menu{display:block;}
-#game.onMenu .row{display:none;}
-#menu
+.roundedPanel
{
- display:none;
- z-index:1000000;
- position:absolute;
- left:16px;
- right:0px;
- top:112px;
- bottom:0px;
- /*box-shadow:0px 0px 24px #000 inset;
- background:#000 url(img/darkNoise.png);*/
+ background:url(img/roundedPanelBGS.png) repeat-x 0px 0px;
+ position:relative;
+ padding:9px 0px;
+ height:20px;
}
-
-#comments
+.roundedPanel:before,.roundedPanel:after
{
- padding:16px;
- text-align:center;
- position:relative;
- padding-bottom:32px;
- font-size:16px;
- height:64px;
- overflow:hidden;
+ content:'';
+ display:block;height:36px;
+ position:absolute;top:0px;
}
-#commentsText
+.roundedPanel:before
{
- padding:0px 64px;
+ background:url(img/bracketPanelLeftS.png) no-repeat;left:-16px;width:16px;
}
-.commentsText q
+.roundedPanel:after
{
- font-style:italic;
+ background:url(img/bracketPanelRightS.png) no-repeat;right:-18px;width:18px;
}
-.commentsText sig
+/*.roundedPanel
{
- font-size:70%;
- display:block;
- text-align:center;
- opacity:0.7;
+ background:url(img/roundedPanelBG.png) repeat-x 0px 0px;
+ position:relative;
}
-.commentsText sig:before
+.roundedPanel:before,.roundedPanel:after
{
- content:"-";
- padding-left:64px;
+ content:'';
+ display:block;width:17px;height:32px;
+ position:absolute;top:0px;
}
-
-.row
+.roundedPanel:before
{
- height:128px;
- position:relative;
- padding-bottom:32px;
- display:none;
- overflow:hidden;
+ background:url(img/roundedPanelLeft.png) no-repeat;left:-17px;
}
-.row.enabled{display:block;}
-.row .content
+.roundedPanel:after
{
- width:100%;
- height:128px;
+ background:url(img/roundedPanelRight.png) no-repeat;right:-17px;
+}*/
+#ascendNumber
+{
+ display:none;
position:absolute;
- overflow-x:scroll;
- overflow-y:hidden;
- padding-bottom:16px;
+ 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;
}
-.row .background
+#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
{
- background:#999;
+ display:none;
position:absolute;
- left:0px;
- top:0px;
- height:100%;
- z-index:1;
- min-width:100%;
+ right:0px;
+ top:52px;
+ font-family:Tahoma,Arial,sans serif;
+ font-size:11px;
+ width:220px;
+ padding:8px;
+ pointer-events:none;
}
-.row .backgroundLeft,.row .backgroundRight
+#legacyButton:hover>#ascendTooltip
+{display:block;}
+
+#lumps
{
- width:128px;
- height:128px;
+ display:none;
position:absolute;
- top:0px;
+ width:32px;
+ height:32px;
+ position:absolute;
+ z-index:10000;
+ left:-8px;
+ bottom:-12px;
+ z-index:10000;
+ cursor:pointer;
+ filter:drop-shadow(0px 3px 2px #000);
+ -webkit-filter:drop-shadow(0px 3px 2px #000);
}
-.row .backgroundLeft
+#lumps:hover #lumpsIcon,#lumps:hover #lumpsIcon2
+{top:-10px;}
+#lumpsIcon,#lumpsIcon2
{
- left:0px;
+ width:48px;
+ height:48px;
+ position:absolute;
+ left:-8px;
+ top:-8px;
+ pointer-events:none;
}
-.row .backgroundRight
+#lumpsAmount
{
- right:0px;
+ font-size:12px;
+ color:#6cf;
+ position:absolute;
+ left:36px;
+ top:6px;
+ pointer-events:none;
}
-.row .objects
+.lumpsOn #lumps{display:block;}
+
+.meterContainer
{
- position:absolute;
- z-index:10;
+ background:rgba(0,0,0,0.5);
+ position:relative;
+ border-radius:2px;
+ height:8px;
}
-.row .special
+.meter
{
+ background:url(img/prestigeBar.jpg) 0px 0px;
position:absolute;
- z-index:1000000;
- width:100%;
+ left:0px;
+ right:100%;
top:0px;
- bottom:16px;
- background:#000 url(img/mapBG.jpg) fixed;
- display:none;
+ height:100%;
+ max-width:100%;
}
-.row .specialButton
+.meter:after
{
- display:none;
+ height:8px;
+ width:8px;
position:absolute;
+ right:-8px;
top:0px;
- left:0px;
- width:128px;
- height:128px;
- z-index:200000;
-}
-.row .specialButtonPic
-{
+ content:'';
display:block;
- width:100%;
- height:100%;
- background:transparent 0px 8px no-repeat;
+ background:url(img/prestigeBarCap.png);
}
-.row .specialButtonText
+#ascendMeterContainer
{
- display:block;
+ width:100px;
+ right:0px;
+ bottom:4px;
position:absolute;
- left:0px;
- bottom:16px;
- width:100%;
- text-align:center;
- text-shadow:0px 0px 4px #000;
- font-weight:bold;
- font-size:10px;
}
-a.control
+#ascendMeter
{
- position:absolute;
- width:48px;
- height:48px;
- background:url(img/control.png) no-repeat;
- opacity:0.8;
+ right:100px;
}
-a.control:hover{opacity:1;}
-a.control.west{left:0px;top:48px;background-position:0px -48px;}
-a.control.east{left:96px;top:48px;background-position:-96px -48px;}
-a.control.north{left:48px;top:0px;background-position:-48px 0px;}
-a.control.south{left:48px;top:96px;background-position:-48px -96px;}
-a.control.middle{left:48px;top:48px;background-position:-48px -48px;}
-.map
+
+.meter.filling
{
- position:absolute;
- left:0px;
- top:0px;
- overflow:hidden;
- background:#00061b;
+-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;}
}
-.map:after{content:'';pointer-events:none;display:block;position:absolute;left:0px;top:0px;width:144px;height:144px;z-index:100000;background:url(img/dungeonOverlay.png);}
-.map .tile, .map .thing
+@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
{
- width:16px;
- height:16px;
+ 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);*/
}
-.mapContainer
-{
- /* meh. */
- /*
- -webkit-transition: top 0.1s ease-out, left 0.1s ease-out;
- -moz-transition: top 0.1s ease-out, left 0.1s ease-out;
- -ms-transition: top 0.1s ease-out, left 0.1s ease-out;
- -o-transition: top 0.1s ease-out, left 0.1s ease-out;
- transition: top 0.1s ease-out, left 0.1s ease-out;
- */
-}
-.map .tile {background:url(img/dungeonTiles.png) no-repeat;z-index:100;}
-.map .thing {background:url(img/dungeonIcons.png) no-repeat;z-index:200;}
-.dungeonName
+#comments
{
- position:absolute;
- top:24px;
- left:-32px;
- width:256px;
- opacity:0.6;
+ 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;*/
}
-.dungeonLog
+.commentsText
{
+ padding:16px 0px;
position:absolute;
- right:0px;
top:0px;
- width:200px;
- height:100%;
- overflow-y:scroll;
- z-index:100;
+ left:108px;
+ right:108px;
+ opacity:1;
+ text-align:center;
}
-.dungeonLog div
+.commentsText q
{
- font-size:10px;
- padding:3px 2px;
- opacity:0.6;
- text-shadow:0px 1px 0px #000;
+ font-style:italic;
}
-.dungeonLog div.new
+.commentsText sig
{
- opacity:1;
+ font-size:70%;
+ display:block;
+ text-align:center;
+ opacity:0.7;
+}
+.commentsText sig:before
+{
+ content:"-";
+ padding-left:64px;
}
-.dungeonLog div b{font-weight:bold;}
-.mobSlot
+#commentsText
{
- width:96px;
- height:100%;
- position:absolute;
- left:0px;
- bottom:0px;
+ z-index:20;
}
-.mobPic
+#commentsTextBelow
{
- width:96px;
- height:96px;
- background:transparent center bottom no-repeat;
- position:absolute;
- left:0px;
- bottom:32px;
+ 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);}
}
-.mobName
+
+
+.row
{
- position:absolute;
- width:200%;
- left:-50%;
- bottom:16px;
- text-align:center;
- font-size:12px;
+ position:relative;
+ padding-bottom:16px;
+ display:none;
+ /*overflow:hidden;*/
}
-.hpBar
+.row.enabled{display:block;}
+.row .rowCanvas
{
- position:absolute;
width:100%;
- left:0px;
- top:0px;
- height:100%;
- background:url(img/hpBar.png) repeat-x;
- -webkit-transition: width 0.1s ease-out;
- -moz-transition: width 0.1s ease-out;
- -ms-transition: width 0.1s ease-out;
- -o-transition: width 0.1s ease-out;
- transition: width 0.1s ease-out;
+ height:128px;
+ /*overflow-x:scroll;
+ overflow-y:hidden;*/
+ background:#000;
}
-.hpmBar
+.row .rowSpecial
{
- position:absolute;
- width:70%;
- left:15%;
- bottom:4px;
- height:8px;
- background:url(img/hpmBar.png) repeat-x;
- box-shadow:0px 0px 4px #000;
+ min-height:24px;
+ z-index:100;
+ width:100%;
+ top:0px;
+ left:0px;
+ background:#000 url(img/mapBG.jpg) fixed;
+ display:none;
}
-.map .thing .mapInfo{display:none;position:absolute;left:0px;top:0px;z-index:1000000;background:#000;padding:4px 8px;}
-.map .thing:hover .mapInfo{display:block;}
-.special .fighter {position:absolute;width:96px;height:96px;}
-.row .info, #sectionLeft .info, .row .specialButton
+.row .info, #sectionLeft .info
{
+ display:none;
/*visibility:hidden;*/
-webkit-transition: opacity 0.1s ease-out;
-moz-transition: opacity 0.1s ease-out;
@@ -900,7 +1610,7 @@ a.control.middle{left:48px;top:48px;background-position:-48px -48px;}
top:-16px;
height:auto;
}
-.row:hover .info, #sectionLeft:hover .info, .row:hover .specialButton
+.row:hover .info, #sectionLeft:hover .info
{
opacity:1;
}
@@ -924,49 +1634,225 @@ a.control.middle{left:48px;top:48px;background-position:-48px -48px;}
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
{
width:284px;
+ background:url(img/blackGradientSmallTop.png) repeat-x top;
}
#buildingsTitle
{
display:none;
}
-#upgrades
+.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;
}
-#upgrades:hover
+.storeSection:hover
+{
+ height:auto;
+ min-height:60px;
+}
+.storeSection:hover:before
+{
+ display:block;
+}
+.storeSection:before
+{
+ display:none;
+ position:absolute;
+ content:'';
+ left:2px;
+ top:0px;
+ 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;
+ pointer-events:none;
+ font-variant:small-caps;
+}
+
+.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
+{
+ display:inline-block;
+ font-family:Arial;
+ font-size:10px;
+}
+
+#toggleBox
+{
+ position:absolute;
+ right:318px;
+ top:56px;
+ 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';}
+#products:before{content:'Buildings';}
+#upgrades
+{
+}
+#products
{
height:auto;
min-height:60px;
}
.crate
{
- width:60px;
- height:60px;
+ width:48px;
+ height:48px;
+ margin:6px;
display:inline-block;
cursor:pointer;
- opacity:0.6;
+ /*opacity:0.6;*/
position:relative;
- background:#000;
+ /*background:#000;*/
+ background:rgba(0,0,0,0.25);
float:left;
}
.crate:before
{
content:'';
position:absolute;
- left:0px;
- top:0px;
+ left:-6px;
+ top:-6px;
width:60px;
height:60px;
display:block;
- background:url(img/upgradeFrame.png);
+ 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.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;}
+.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;
@@ -974,27 +1860,102 @@ a.control.middle{left:48px;top:48px;background-position:-48px -48px;}
display:inline-block;
margin:0px 4px;
}
-.icon,.crate
+.icon,.crate,.usesIcon
+{
+ background-image:url(img/icons.png?v=17);
+}
+.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
{
- background-image:url(img/icons.png?v=8);
+ overflow-y:hidden;
+ padding-bottom:12px;
+ margin-bottom:-12px;
}
+
.achievement
{
- opacity:0.4;
+ /*opacity:0.4;*/
}
.crate.enabled
{
opacity:1;
}
-.crate:hover:before
+.crate.heavenly.enabled:before
{
- box-shadow:0px 0px 6px #fff inset,0px 0px 1px #000;
- z-index:20;
+ /*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.heavenly
+{
+ transition:left 0.2s ease-out,top 0.2s ease-out;
+ z-index:10;
+}
+.crate.ghosted
+{
+ background:transparent;
+ opacity:0.2;
}
-.crate:hover
+.parentLink
{
- background-color:#200e0a;
+ /*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;
@@ -1003,6 +1964,19 @@ a.control.middle{left:48px;top:48px;background-position:-48px -48px;}
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;
+}
+.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;}
@@ -1011,15 +1985,21 @@ a.control.middle{left:48px;top:48px;background-position:-48px -48px;}
{
box-shadow:0px 0px 16px #fff 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.enabled
+.product.unlocked.enabled
{
opacity:1;
}
+.product.toggledOff
+{
+ opacity:0;
+}
.product .icon
{
width:64px;
@@ -1027,6 +2007,7 @@ a.control.middle{left:48px;top:48px;background-position:-48px -48px;}
position:absolute;
left:0px;
top:0px;
+ background:url(img/buildings.png?v=2);
background-repeat:no-repeat;
margin:0px;
}
@@ -1051,27 +2032,501 @@ a.control.middle{left:48px;top:48px;background-position:-48px -48px;}
color:#000;
text-shadow:0px 0px 8px #fff;
}
+.product .icon
+{
+ opacity:0;
+}
+.product.unlocked .icon
+{
+ opacity:1;
+}
+.product .icon.off
+{
+ z-index:100;
+ opacity:1;
+ background:url(img/buildings.png?v=2);
+ 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;}
-.goldenCookie
+.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
+{
+ display:none;
+ 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;
+ 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;
+}
+.productMinigameButton
+{
+ border-top-right-radius:4px;
+}
+.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;
+}
+.lumpsOn .productButtons{display:block;}
+
+#storeBulk
+{
+ background:#999;
+ background:url(img/darkNoise.jpg);
+ box-shadow:0px 0px 4px #000 inset;
+ overflow:hidden;
+ width:240px;
+ height:32px;
+ position:relative;
+ padding-left:60px;
+}
+.storeBulkMode,.storeBulkAmount
+{
+ float:left;
+ text-align:center;
+ font-variant:small-caps;
+ color:#fff;
+ font-weight:bold;
+ font-size:14px;
+ opacity:0.5;
+ cursor:pointer;
+ text-shadow:0px 1px 0px #000;
+}
+.storeBulkMode:hover,.storeBulkAmount:hover,.storeBulkMode.selected,.storeBulkAmount.selected
+{
+ text-shadow:0px 1px 0px #000,0px 0px 1px #fff,0px 0px 4px #fff;
+ opacity:1;
+}
+.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
{
- width:96px;
- height:96px;
- background:url(img/goldCookie.png);
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;
- cursor:pointer;
+}
+.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;
+}
+#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:12px;
+}
+.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;*/
+}/*animation:drift 60s linear 0s infinite;}*/
+#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;
+ margin-left:50%;
+ margin-top:25%;/* this should be 50%. not sure why it needs to be 25% */
+}
+.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;
+}
+
+@keyframes drift
+{
+ from {background-position:0px 0px;}
+ to {background-position:2048px -1024px;}
}
#versionNumber
@@ -1092,26 +2547,151 @@ a.control.middle{left:48px;top:48px;background-position:-48px -48px;}
bottom:-16px;
left:-16px;
z-index:100000000000;
- padding:8px 8px 24px 24px;
+ padding:12px 12px 24px 24px;
font-size:14px;
background:#990;
border-radius:16px;
color:#fff;
- box-shadow:0px 0px 4px #000;
+ box-shadow:0px 0px 4px #000, 0px 0px 4px #000 inset;
+ text-shadow:0px 0px 2px #000;
+ border:4px solid #fff;
+}
+#alert b {font-weight:bold;}
+#alert small {font-size:80%;}
+
+#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;
+}
+
+/*show scrollbars in safari*/
+::-webkit-scrollbar
+{
+ -webkit-appearance:none;
+ width:17px;
+}
+::-webkit-scrollbar-track
+{
+ background-color:#eee;
+}
+::-webkit-scrollbar-thumb
+{
+ background-color:#bbb;
+ border:2px solid #eee;
+ box-shadow:0px 0px 0px 1px #999 inset;
}
+/*=====================================================================================
+SUPPORT
+=======================================================================================*/
#support
{
width:300px;
text-align:center;
margin:16px auto;
}
-#supportComment
+.supportComment
{
- opacity:0.5;
+ opacity:0.75;
+ text-shadow:0px 0px 2px #000,0px 1px 0px #000;
margin:8px;
+ 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:0px;
+ top:160px;
+ text-align:center;
+ width:120px;
+ display:none;
+}
+#donateBox.on {display:block;}
+
+
+/*=====================================================================================
+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;
@@ -1121,8 +2701,15 @@ a.control.middle{left:48px;top:48px;background-position:-48px -48px;}
{
text-shadow:0px 0px 4px #000,0px 1px 0px #000!important;
}
+.noFilters *
+{
+ filter:none!important;
+ -webkit-filter:none!important;
+}
-/* mobile layout */
+/*=====================================================================================
+MOBILE
+=======================================================================================*/
.mobile #sectionLeft,.mobile #sectionMiddle,.mobile #sectionRight
{
width:100%;
@@ -1145,7 +2732,7 @@ a.control.middle{left:48px;top:48px;background-position:-48px -48px;}
margin:0px;
padding:0px;
}
-.mobile #storeTitle,.mobile #upgrades
+.mobile #storeTitle,.mobile #upgrades,.mobile #toggleUpgrades,.mobile #techUpgrades
{
width:100%;
}
@@ -1166,7 +2753,7 @@ a.control.middle{left:48px;top:48px;background-position:-48px -48px;}
bottom:0px;
height:64px;
width:100%;
- background:url(img/darkNoise.png);
+ background:url(img/darkNoise.jpg);
z-index:1000000;
font-size:32px;
}
@@ -1223,7 +2810,7 @@ a.control.middle{left:48px;top:48px;background-position:-48px -48px;}
top:0px;
height:128px;
width:100%;
- background:url(img/darkNoise.png);
+ background:url(img/darkNoise.jpg);
z-index:1000000;
text-align:center;
font-size:16px;
generated by cgit v1.2.3 (git 2.25.1) at 2026-01-02 17:06:02 +0000