/* 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;}*/