1626 lines
27 KiB
CSS
1626 lines
27 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;
|
|
}
|
|
|
|
|
|
/*=====================================================================================
|
|
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;
|
|
|
|
color:#fff;
|
|
background:#000 url(img/darkNoise.png);
|
|
font-family:Tahoma,Arial,sans-serif;
|
|
font-size:13px;
|
|
}
|
|
|
|
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
|
|
{
|
|
font-family: 'Kavoon', 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;
|
|
}
|
|
.subsection
|
|
{
|
|
padding:8px 0px;
|
|
font-size:14px;
|
|
}
|
|
.subsection div.title
|
|
{
|
|
font-size:22px;
|
|
padding:8px 16px;
|
|
width:100%;
|
|
border-bottom:1px solid #999;
|
|
margin-bottom:8px;
|
|
}
|
|
.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 #fff;
|
|
opacity:0.5;
|
|
padding-left:16px;
|
|
padding-bottom:2px;
|
|
position:relative;
|
|
left:-4px;
|
|
top:-2px;
|
|
}
|
|
.hidden
|
|
{
|
|
visibility:hidden;
|
|
}
|
|
.toggledOff
|
|
{
|
|
opacity:0;
|
|
display:none;
|
|
}
|
|
.listing:hover .hidden
|
|
{
|
|
visibility:visible;
|
|
}
|
|
|
|
.optionBox
|
|
{
|
|
text-align:center;
|
|
}
|
|
.optionBox .option
|
|
{
|
|
}
|
|
a.option.big
|
|
{
|
|
font-size:30px;
|
|
margin:auto;
|
|
padding:8px 16px;
|
|
width:80%;
|
|
}
|
|
a.option, .info a
|
|
{
|
|
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:hover, .info a:hover
|
|
{
|
|
border-color:#fff;
|
|
color:#fff;
|
|
text-shadow:none;
|
|
}
|
|
a.option:active, .info a:active
|
|
{
|
|
background-color:#333;
|
|
}
|
|
a.option.warning:hover
|
|
{
|
|
border-color:#f33;
|
|
color:#f33;
|
|
}
|
|
a.option.warning:active
|
|
{
|
|
background-color:#300;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
.warning, a.option.warning
|
|
{
|
|
color:#c00;
|
|
border-color:#c00;
|
|
}
|
|
|
|
/*=====================================================================================
|
|
oh forget it this is just a mess
|
|
=======================================================================================*/
|
|
#backgroundLayers, #backgroundLayers div
|
|
{
|
|
width:100%;
|
|
height:100%;
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
}
|
|
/*
|
|
#backgroundLayer1
|
|
{
|
|
background:url(img/bgBlue.jpg);
|
|
}
|
|
#backgroundLayer2
|
|
{
|
|
background:#000 url(img/darkNoise.png);
|
|
}
|
|
*/
|
|
#backgroundCanvas,#backgroundLeftCanvas
|
|
{
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
}
|
|
|
|
#topBar
|
|
{
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
width:100%;
|
|
height:32px;
|
|
background:url(img/darkNoise.png);
|
|
box-shadow:0px -2px 4px #666 inset;
|
|
color:#ccc;
|
|
}
|
|
#topBar div
|
|
{
|
|
margin:6px 8px;
|
|
}
|
|
#topBar a
|
|
{color:#fff;}
|
|
|
|
#javascriptError
|
|
{
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
right:0px;
|
|
bottom:0px;
|
|
background:url(img/darkNoise.png);
|
|
text-align:center;
|
|
z-index:100000000000;
|
|
line-height:150%;
|
|
font-size:20px;
|
|
}
|
|
#game
|
|
{
|
|
position:absolute;
|
|
left:0px;
|
|
top:32px;
|
|
right:0px;
|
|
bottom:0px;
|
|
overflow:hidden;
|
|
}
|
|
#sectionLeft
|
|
{
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
width:30%;
|
|
bottom:0px;
|
|
min-width:100px;
|
|
overflow:hidden;
|
|
}
|
|
#sectionMiddle
|
|
{
|
|
position:absolute;
|
|
left:30%;
|
|
padding-left:16px;
|
|
margin-right:15px;
|
|
top:0px;
|
|
right:318px;
|
|
bottom:0px;
|
|
min-width:100px;
|
|
overflow-x:hidden;
|
|
overflow-y:scroll;
|
|
}
|
|
#game.onMenu #sectionMiddle
|
|
{
|
|
background:#000 url(img/darkNoise.png);
|
|
}
|
|
#sectionRight
|
|
{
|
|
height:100%;
|
|
position:absolute;
|
|
top:0px;
|
|
right:0px;
|
|
overflow-x:hidden;
|
|
overflow-y:scroll;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
|
|
|
|
.framed
|
|
{
|
|
background:#000 url(img/darkNoise.png);
|
|
padding:4px 8px;
|
|
margin:4px;
|
|
border:3px ridge #d2e248;
|
|
border-color:#c7cd6e #a48836 #845a36 #a48836;
|
|
border-radius:3px;
|
|
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;
|
|
}
|
|
.framed b
|
|
{
|
|
color:#fff;
|
|
font-weight:bold;
|
|
}
|
|
.framed .name
|
|
{
|
|
font-weight:bold;
|
|
font-size:110%;
|
|
color:#fff;
|
|
margin:2px 0px;
|
|
}
|
|
.framed q
|
|
{
|
|
display:block;
|
|
position:relative;
|
|
text-align:right;
|
|
margin-top:8px;
|
|
font-style:italic;
|
|
opacity:0.7;
|
|
font-size:11px;
|
|
}
|
|
.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;
|
|
}
|
|
.close:hover
|
|
{
|
|
color:#fff;
|
|
text-shadow:0px 0px 2px #fff;
|
|
}
|
|
.framed .block
|
|
{
|
|
padding:8px;
|
|
margin:2px;
|
|
border-radius:4px;
|
|
border:1px solid rgba(255,255,255,0.25);
|
|
box-shadow:0px 0px 1px #000,0px 0px 1px #000 inset;
|
|
}
|
|
|
|
#tooltipAnchor
|
|
{
|
|
position:absolute;
|
|
z-index:1000000000;
|
|
display:none;
|
|
}
|
|
#tooltip
|
|
{
|
|
position:absolute;
|
|
opacity:0;
|
|
}
|
|
#tooltip .data
|
|
{
|
|
border-top:1px solid rgba(255,255,255,0.25);
|
|
margin-top:8px;
|
|
padding:4px 0px;
|
|
font-size:80%;
|
|
}
|
|
|
|
.description
|
|
{
|
|
border-top:1px solid rgba(255,255,255,0.25);
|
|
padding-top:2px;
|
|
margin:4px 0px;
|
|
}
|
|
|
|
q:before
|
|
{
|
|
display:inline-block;
|
|
content:"\"";
|
|
}
|
|
q:after
|
|
{
|
|
display:inline-block;
|
|
content:"\"";
|
|
}
|
|
|
|
|
|
.price
|
|
{
|
|
font-weight:bold;
|
|
color:#6f6;
|
|
padding-left:18px;
|
|
position:relative;
|
|
}
|
|
.price .tinyCookie
|
|
{
|
|
display:block;
|
|
position:absolute;
|
|
left:0px;
|
|
top:2px;
|
|
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;
|
|
}
|
|
.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;
|
|
}
|
|
.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;}
|
|
.particle
|
|
{
|
|
position:absolute;
|
|
pointer-events:none;
|
|
left:-200px;
|
|
bottom:0px;
|
|
width:400px;
|
|
z-index:100000000;
|
|
text-align:center;
|
|
text-shadow:0px 0px 6px #000;
|
|
font-size:24px;
|
|
}
|
|
#cookieShower
|
|
{
|
|
position:absolute;
|
|
width:100%;
|
|
height:100%;
|
|
z-index:2;
|
|
}
|
|
#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;
|
|
}
|
|
#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;
|
|
}
|
|
|
|
.separatorLeft, .separatorRight
|
|
{
|
|
width:16px;
|
|
height:100%;
|
|
background:url(img/panelVertical.png) 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) repeat-x;
|
|
position:absolute;
|
|
left:0px;
|
|
bottom:0px;
|
|
}
|
|
|
|
.button
|
|
{
|
|
background:#000 url(img/darkNoise.png);
|
|
box-shadow:0px 0px 3px #666 inset,0px 0px 4px #000;
|
|
position:absolute;
|
|
z-index:100;
|
|
width:64px;
|
|
height:24px;
|
|
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;
|
|
}
|
|
.button:hover
|
|
{
|
|
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;}
|
|
|
|
#game.onMenu #menu{display:block;}
|
|
#game.onMenu .row{visibility:hidden;}
|
|
#menu
|
|
{
|
|
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);*/
|
|
}
|
|
|
|
#comments
|
|
{
|
|
padding:16px;
|
|
text-align:center;
|
|
position:relative;
|
|
padding-bottom:32px;
|
|
font-size:16px;
|
|
height:64px;
|
|
overflow:hidden;
|
|
}
|
|
#commentsText
|
|
{
|
|
padding:0px 64px;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
.row
|
|
{
|
|
height:128px;
|
|
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;
|
|
}
|
|
.row .special
|
|
{
|
|
position:absolute;
|
|
z-index:1000000;
|
|
width:100%;
|
|
top:0px;
|
|
bottom:16px;
|
|
background:#000 url(img/mapBG.jpg) fixed;
|
|
display:none;
|
|
}
|
|
.row .specialButton
|
|
{
|
|
display:none;
|
|
position:absolute;
|
|
top:0px;
|
|
left:0px;
|
|
width:128px;
|
|
height:128px;
|
|
z-index:200000;
|
|
}
|
|
.row .specialButtonPic
|
|
{
|
|
display:block;
|
|
width:100%;
|
|
height:100%;
|
|
background:transparent 0px 8px no-repeat;
|
|
}
|
|
.row .specialButtonText
|
|
{
|
|
display:block;
|
|
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
|
|
{
|
|
position:absolute;
|
|
width:48px;
|
|
height:48px;
|
|
background:url(img/control.png) no-repeat;
|
|
opacity:0.8;
|
|
}
|
|
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
|
|
{
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
overflow:hidden;
|
|
background:#00061b;
|
|
}
|
|
.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
|
|
{
|
|
width:16px;
|
|
height:16px;
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
}
|
|
.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
|
|
{
|
|
position:absolute;
|
|
top:24px;
|
|
left:-32px;
|
|
width:256px;
|
|
opacity:0.6;
|
|
}
|
|
.dungeonLog
|
|
{
|
|
position:absolute;
|
|
right:0px;
|
|
top:0px;
|
|
width:200px;
|
|
height:100%;
|
|
overflow-y:scroll;
|
|
z-index:100;
|
|
}
|
|
.dungeonLog div
|
|
{
|
|
font-size:10px;
|
|
padding:3px 2px;
|
|
opacity:0.6;
|
|
text-shadow:0px 1px 0px #000;
|
|
}
|
|
.dungeonLog div.new
|
|
{
|
|
opacity:1;
|
|
}
|
|
.dungeonLog div b{font-weight:bold;}
|
|
|
|
.mobSlot
|
|
{
|
|
width:96px;
|
|
height:100%;
|
|
position:absolute;
|
|
left:0px;
|
|
bottom:0px;
|
|
}
|
|
.mobPic
|
|
{
|
|
width:96px;
|
|
height:96px;
|
|
background:transparent center bottom no-repeat;
|
|
position:absolute;
|
|
left:0px;
|
|
bottom:32px;
|
|
}
|
|
.mobName
|
|
{
|
|
position:absolute;
|
|
width:200%;
|
|
left:-50%;
|
|
bottom:16px;
|
|
text-align:center;
|
|
font-size:12px;
|
|
}
|
|
.hpBar
|
|
{
|
|
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;
|
|
}
|
|
.hpmBar
|
|
{
|
|
position:absolute;
|
|
width:70%;
|
|
left:15%;
|
|
bottom:4px;
|
|
height:8px;
|
|
background:url(img/hpmBar.png) repeat-x;
|
|
box-shadow:0px 0px 4px #000;
|
|
}
|
|
|
|
.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
|
|
{
|
|
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, .row:hover .specialButton
|
|
{
|
|
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%;
|
|
}
|
|
#storeTitle
|
|
{
|
|
width:284px;
|
|
}
|
|
#buildingsTitle
|
|
{
|
|
display:none;
|
|
}
|
|
.storeSection
|
|
{
|
|
height:60px;
|
|
width:300px;
|
|
position:relative;
|
|
overflow-y:hidden;
|
|
background:url(img/panelHorizontal.png) repeat-x top;
|
|
padding-top:16px;
|
|
}
|
|
.storeSection:hover
|
|
{
|
|
height:auto;
|
|
min-height:60px;
|
|
}
|
|
#upgrades
|
|
{
|
|
}
|
|
#products
|
|
{
|
|
height:auto;
|
|
min-height:60px;
|
|
}
|
|
.crate
|
|
{
|
|
width:60px;
|
|
height:60px;
|
|
display:inline-block;
|
|
cursor:pointer;
|
|
opacity:0.6;
|
|
position:relative;
|
|
background:#000;
|
|
float:left;
|
|
}
|
|
.crate:before
|
|
{
|
|
content:'';
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
width:60px;
|
|
height:60px;
|
|
display:block;
|
|
background:url(img/upgradeFrame.png);
|
|
z-index:10;
|
|
}
|
|
.icon
|
|
{
|
|
width:48px;
|
|
height:48px;
|
|
display:inline-block;
|
|
margin:0px 4px;
|
|
}
|
|
.icon,.crate
|
|
{
|
|
background-image:url(img/icons.png?v=12);
|
|
}
|
|
.achievement
|
|
{
|
|
opacity:0.4;
|
|
}
|
|
.crate.enabled
|
|
{
|
|
opacity:1;
|
|
}
|
|
.crate:hover:before
|
|
{
|
|
box-shadow:0px 0px 6px #fff inset,0px 0px 1px #000;
|
|
z-index:20;
|
|
}
|
|
.crate:hover
|
|
{
|
|
background-color:#200e0a;
|
|
}
|
|
.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;
|
|
}
|
|
.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 #fff inset,0px 0px 1px #000;
|
|
z-index:20;
|
|
}
|
|
.product.enabled:active
|
|
{
|
|
box-shadow:0px 0px 16px #000 inset;
|
|
}
|
|
.product.unlocked.enabled
|
|
{
|
|
opacity:1;
|
|
}
|
|
.product.toggledOff
|
|
{
|
|
opacity:0;
|
|
}
|
|
.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 0px 6px #000,0px 1px 1px #000;
|
|
}
|
|
.product .content .owned
|
|
{
|
|
position:absolute;
|
|
right:12px;
|
|
top:6px;
|
|
font-size:40px;
|
|
opacity:0.2;
|
|
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;
|
|
-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;}
|
|
|
|
.product.unlocked:hover{margin-bottom:24px;}
|
|
.product.unlocked .buySell{display:block;}
|
|
.product.unlocked:hover .buySell{opacity:1;height:24px;}
|
|
.buySell
|
|
{
|
|
position:absolute;
|
|
bottom:-24px;
|
|
height:0px;
|
|
left:0px;
|
|
width:300px;
|
|
background:#999;
|
|
display:none;
|
|
opacity:0;
|
|
overflow-x: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;
|
|
background:url(img/darkNoise.png);
|
|
box-shadow:0px 0px 4px #000 inset;
|
|
z-index:1000;
|
|
}
|
|
.buySell>div
|
|
{
|
|
position:absolute;
|
|
bottom:0px;
|
|
left:0px;
|
|
width:100px;
|
|
padding:4px 0px;
|
|
text-align:center;
|
|
font-variant:small-caps;
|
|
color:#fff;
|
|
font-weight:bold;
|
|
font-size:14px;
|
|
opacity:0.5;
|
|
}
|
|
.buySell>div:hover
|
|
{
|
|
opacity:1;
|
|
text-shadow:0px 0px 4px #fff;
|
|
}
|
|
.buySell>div:active
|
|
{
|
|
text-shadow:none;
|
|
}
|
|
|
|
.goldenCookie
|
|
{
|
|
width:96px;
|
|
height:96px;
|
|
background:url(img/goldCookie.png);
|
|
cursor:pointer;
|
|
position:absolute;
|
|
z-index:10000000000;
|
|
display:none;
|
|
}
|
|
|
|
.seasonPopup
|
|
{
|
|
width:256px;
|
|
height:256px;
|
|
background:url(img/goldCookie.png) center center no-repeat;
|
|
cursor:pointer;
|
|
position:absolute;
|
|
z-index:10000000000;
|
|
display: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%;
|
|
margin-left:-125px;
|
|
top:125px;
|
|
z-index:1000000000;
|
|
display:none;
|
|
}
|
|
#prompt
|
|
{
|
|
position:relative;
|
|
overflow-y:hidden;
|
|
width:250px;
|
|
padding:16px;
|
|
left:-28px;
|
|
}
|
|
#prompt h3
|
|
{
|
|
width:100%;
|
|
text-align:center;
|
|
font-weight:bold;
|
|
font-size:14px;
|
|
position:relative;
|
|
top:-8px;
|
|
}
|
|
#prompt textarea,#prompt input
|
|
{
|
|
width:100%;
|
|
margin:0px;
|
|
position:relative;
|
|
left:-3px;
|
|
}
|
|
|
|
|
|
#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;
|
|
left:-28px;
|
|
}
|
|
.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;
|
|
}
|
|
.sidenote
|
|
{
|
|
position:absolute;
|
|
right:0px;
|
|
bottom:0px;
|
|
border-radius:16px;
|
|
}
|
|
|
|
|
|
#timers
|
|
{
|
|
width:100%;
|
|
position:absolute;
|
|
left:0px;
|
|
right:0px;
|
|
bottom:0px;
|
|
z-index:100000000;
|
|
pointer-events:none;
|
|
}
|
|
#timers>div
|
|
{
|
|
background:#000;
|
|
width:100%;
|
|
height:8px;
|
|
background:url(img/timerBars.png) 0px 0px;
|
|
box-shadow:-30px 0px 15px -15px #fff inset;
|
|
}
|
|
#timers>div#timer-frenzy{background-position:0px 0px;}
|
|
#timers>div#timer-elderFrenzy{background-position:48px -8px;}
|
|
#timers>div#timer-clot{background-position:16px -16px;}
|
|
#timers>div#timer-clickFrenzy{background-position:64px -24px;}
|
|
|
|
#versionNumber
|
|
{
|
|
position:absolute;
|
|
left:0px;
|
|
bottom:0px;
|
|
opacity:0.5;
|
|
margin:8px;
|
|
font-size:22px;
|
|
z-index:100000000;
|
|
}
|
|
|
|
#alert
|
|
{
|
|
display:none;
|
|
position:fixed;
|
|
bottom:-16px;
|
|
left:-16px;
|
|
z-index:100000000000;
|
|
padding:12px 12px 24px 24px;
|
|
font-size:14px;
|
|
background:#990;
|
|
border-radius:16px;
|
|
color:#fff;
|
|
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%;}
|
|
|
|
/*=====================================================================================
|
|
SUPPORT
|
|
=======================================================================================*/
|
|
#support
|
|
{
|
|
width:300px;
|
|
text-align:center;
|
|
margin:16px auto;
|
|
}
|
|
.supportComment
|
|
{
|
|
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:240px;
|
|
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.png);
|
|
}
|
|
.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;
|
|
}
|
|
|
|
|
|
/*=====================================================================================
|
|
MOBILE
|
|
=======================================================================================*/
|
|
.mobile #sectionLeft,.mobile #sectionMiddle,.mobile #sectionRight
|
|
{
|
|
width:100%;
|
|
position:absolute;
|
|
left:0px;
|
|
top:128px;
|
|
right:0px;
|
|
bottom:64px;
|
|
display:none;
|
|
}
|
|
.mobile .separatorLeft,.mobile .separatorRight
|
|
{display:none;}
|
|
|
|
.mobile .focusLeft #sectionLeft{display:block;}
|
|
.mobile .focusMiddle #sectionMiddle{display:block;}
|
|
.mobile .focusRight #sectionRight{display:block;}
|
|
.mobile .focusMenu #sectionMiddle{display:block;}
|
|
.mobile #sectionMiddle
|
|
{
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
.mobile #storeTitle,.mobile #upgrades
|
|
{
|
|
width:100%;
|
|
}
|
|
.mobile .product
|
|
{
|
|
width:100%;
|
|
background-size:100% 400%;
|
|
}
|
|
|
|
.mobile #game{top:0px;}
|
|
.mobile #topBar,.mobile #versionNumber{display:none;}
|
|
|
|
#focusButtons
|
|
{
|
|
display:none;
|
|
position:fixed;
|
|
left:0px;
|
|
bottom:0px;
|
|
height:64px;
|
|
width:100%;
|
|
background:url(img/darkNoise.png);
|
|
z-index:1000000;
|
|
font-size:32px;
|
|
}
|
|
#focusButtons:before
|
|
{
|
|
content:'';
|
|
display:block;
|
|
position:absolute;
|
|
left:0px;
|
|
top:-16px;
|
|
background:url(img/blackGradient.png) repeat-x bottom;
|
|
background-size:100% 100%;
|
|
width:100%;
|
|
height:16px;
|
|
opacity:0.5;
|
|
pointer-events:none;
|
|
}
|
|
#focusButtons div
|
|
{
|
|
width:25%;
|
|
height:50%;
|
|
cursor:pointer;
|
|
float:left;
|
|
background:url(img/buttonTile.jpg);
|
|
background-size:100% 400%;
|
|
padding:16px 0px;
|
|
text-align:center;
|
|
opacity:0.5;
|
|
}
|
|
#focusButtons div:nth-child(4n-3) {background-position:0px 100%;}
|
|
#focusButtons div:nth-child(4n-2) {background-position:0px 200%;}
|
|
#focusButtons div:nth-child(4n-1) {background-position:0px 300%;}
|
|
#focusButtons div:hover
|
|
{
|
|
box-shadow:0px 0px 16px #fff inset,0px 0px 1px #000;
|
|
z-index:20;
|
|
}
|
|
#focusButtons div:active
|
|
{
|
|
box-shadow:0px 0px 16px #000 inset;
|
|
}
|
|
.focusLeft #focusButtons #focusLeft,.focusMiddle #focusButtons #focusMiddle,.focusRight #focusButtons #focusRight,.focusMenu #focusButtons #focusMenu
|
|
{
|
|
opacity:1;
|
|
z-index:20;
|
|
box-shadow:0px 0px 8px #fff;
|
|
}
|
|
|
|
#compactOverlay
|
|
{
|
|
display:none;
|
|
position:fixed;
|
|
left:0px;
|
|
top:0px;
|
|
height:128px;
|
|
width:100%;
|
|
background:url(img/darkNoise.png);
|
|
z-index:1000000;
|
|
text-align:center;
|
|
font-size:16px;
|
|
}
|
|
#compactCommentsText
|
|
{
|
|
padding:8px 0px;
|
|
opacity:0.8;
|
|
position:absolute;
|
|
width:100%;
|
|
text-align:center;
|
|
bottom:16px;
|
|
left:0px;
|
|
}
|
|
#compactCookies
|
|
{
|
|
padding:8px 0px;
|
|
position:absolute;
|
|
width:100%;
|
|
height:32px;
|
|
top:0px;
|
|
left:0px;
|
|
font-size:24px;
|
|
text-shadow:0px 0px 12px rgba(255,255,255,0.5);
|
|
background:rgba(255,255,255,0.05);
|
|
}
|
|
|
|
.mobile .row {padding-bottom:16px;}
|
|
|
|
.mobile #comments, .mobile #cookies {display:none;}
|
|
.mobile #focusButtons, .mobile #compactOverlay/*, .mobile #buildingsTitle*/
|
|
{display:block;}
|
|
|
|
/**{overflow:hidden!important;}*/ |