style.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;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}*/
div,span,h1,h2,h3,h4,h5,h6,p{margin:0;padding:0;}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
button {outline:none;border:none;}
button:focus {outline:1px solid rgba(255,200,100,0.5);outline-offset:-1px;}


/*=====================================================================================
BASE
=======================================================================================*/
html,body
{
	width:100%;
	height:100%;
}

body
{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: -moz-none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	touch-action: manipulation;
	
	color:#fff;
	background:#000 url(img/darkNoise.jpg);
	font-family:Tahoma,Arial,sans-serif;
	font-size:13px;
	
	overflow:hidden;
}
.selectable
{
	-webkit-touch-callout: text;
	-webkit-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

#wrapper
{
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	/*min-width:1280px;*/
	transform-origin:0 0;
}

small
{
	font-size:80%;
}

a,a:visited
{
	text-decoration:underline;
	cursor:pointer;
	color:#ccc;
}
a:hover
{
	text-shadow:0px 0px 3px #fff;
	color:#fff;
}
a:active
{
	opacity:0.8;
	background:transparent;
}

.inset
{
	/*box-shadow:0px 0px 12px #000 inset;*/
}

.titleFont,.title,.section,.lockedTitle,.smallFancyButton
{
	font-family: 'Merriweather', Georgia,serif;
}
.title,.section,.lockedTitle
{
	font-size:28px;
	text-shadow:0px 1px 4px #000;
	color:#fff;
}

/*=====================================================================================
SECTIONS
=======================================================================================*/
.section
{
	font-variant:small-caps;
	text-align:center;
	padding:0px 16px;
	background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0.5),rgba(0,0,0,0),rgba(0,0,0,0));
	margin:12px 0px;
	text-shadow:0px -2px 6px rgba(255,255,200,0.6),0px 1px 0px rgba(100,100,100,1),0px 2px 4px rgba(0,0,0,1);
}
.section:after
{
	content:'';
	display:block;
	background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,0.25),rgba(255,255,255,0),rgba(255,255,255,0));
	height:1px;
	margin:6px 0px;
}
.section:before
{
	content:'';
	display:block;
	background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,0.25),rgba(255,255,255,0),rgba(255,255,255,0));
	height:1px;
	margin:6px 0px;
}
.subsection
{
	padding:8px 0px;
	font-size:14px;
}
.subsection div.title
{
	font-size:22px;
	padding-left:16px;
	margin-bottom:8px;
	background:linear-gradient(to right,rgba(0,0,0,0.5),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0));
}
.subsection div.title:after
{
	content:'';
	display:block;
	background:linear-gradient(to right,rgba(255,255,255,0.25),rgba(255,255,255,0));
	height:1px;
	width:50%;
	margin:6px 0px;
	margin-left:-16px;
}
.subsection div.title:before
{
	content:'';
	display:block;
	background:linear-gradient(to right,rgba(255,255,255,0.25),rgba(255,255,255,0));
	height:1px;
	width:50%;
	margin:6px 0px;
	margin-left:-16px;
}
.update
{
	-webkit-touch-callout: auto;
	-webkit-user-select: auto;
	-khtml-user-select: auto;
	-moz-user-select: auto;
	-moz-user-select: auto;
	-ms-user-select: auto;
	user-select: auto;
}
.update .title
{
	color:#69c;
}
.update.small .title
{
	font-size:16px;
	opacity:0.8;
	color:#fff;
}
.listing
{
	padding:3px 16px;
	font-size:13px;
}
.listing b
{
	font-weight:bold;
	opacity:0.6;
}
.listing small
{
	font-size:11px;
	opacity:0.9;
}
.listing label
{
	/*
	font-size:12px;
	border-bottom:1px solid rgba(255,255,255,0.25);
	border-right:1px solid rgba(255,255,255,0.25);
	opacity:0.5;
	padding-left:16px;
	padding-bottom:2px;
	padding-right:4px;
	position:relative;
	left:-4px;
	top:-2px;
	background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0.5));
	*/
	font-size:11px;
	color:rgba(255,255,255,0.5);
	border-bottom:1px dashed rgba(255,255,255,0.25);
	padding:2px 8px;
}

.hidden
{
	visibility:hidden;
}
.toggledOff
{
	opacity:0;
	display:none;
}
.listing:hover .hidden
{
	visibility:visible;
}

.optionBox
{
	text-align:center;
	clear:both;
	margin-bottom:-12px;
	overflow:hidden;
}
.optionBox .option
{
}
.optionBox .option.focused
{
	text-decoration:underline;
}
a.option.big
{
	font-size:30px;
	margin:auto;
	padding:8px 16px;
	width:80%;
}
a.option.framed.large small,.particle small {font-size:65%;}
a.option.framed.large
{
	font-size:20px;
	margin:4px auto;
	padding:6px 12px;
	background:#058;
	box-shadow:0px 0px 1px 2px rgba(0,0,0,0.5),0px 2px 4px rgba(0,0,0,0.25),0px 1px 1px 1px rgba(0,0,0,0.5) inset,0px 0px 12px 2px #0cf inset;
	text-shadow:0px 1px 2px #000;
}
a.option.framed.large:hover
{
	background:#0cf;
	box-shadow:0px 0px 1px 2px rgba(0,0,0,0.5),0px 2px 4px rgba(0,0,0,0.25),0px 1px 1px 1px rgba(0,0,0,0.5) inset,0px 0px 12px 2px #8ef inset;
	text-shadow:0px 1px 2px #000;
	color:#fff;
}
a.option.framed.large.red
{
	background:#c30;
	box-shadow:0px 0px 1px 2px rgba(0,0,0,0.5),0px 2px 4px rgba(0,0,0,0.25),0px 1px 1px 1px rgba(0,0,0,0.5) inset,0px 0px 12px 2px #f64 inset;
}
a.option.framed.large.red:hover
{
	background:#f64;
	box-shadow:0px 0px 1px 2px rgba(0,0,0,0.5),0px 2px 4px rgba(0,0,0,0.25),0px 1px 1px 1px rgba(0,0,0,0.5) inset,0px 0px 12px 2px #fc7 inset;
}
a.option,.info a,a.smallFancyButton
{
	display:inline-block;
	border:1px solid #ccc;
	background:#000;
	margin:2px 4px 2px 0px;
	color:#ccc;
	font-size:12px;
	padding:4px 8px;
	text-decoration:none;
}
a.option.off {opacity:0.5;}
a.option.disabled {pointer-events:none;filter:grayscale(100%);opacity:0.5;}
a.option:hover,.info a:hover,a.smallFancyButton:hover
{
	border-color:#fff;
	color:#fff;
	text-shadow:none;
}
a.option:active,.info a:active,a.smallFancyButton:active
{
	background-color:#333;
}
.warning,a.option.warning
{
	color:#c00;
	border-color:#c00;
}
a.option.warning:hover
{
	border-color:#f33;
	color:#f33;
}
a.option.warning:active
{
	background-color:#300;
}

.neato,a.option.neato
{
	color:#096;
	border-color:#096;
}
a.option.neato:hover
{
	border-color:#3c9;
	color:#3c9;
}
a.option.neato:active
{
	background-color:#032;
}
.info a
{
	border-color:#666;
	background:#eee;
	color:#666;
	padding:2px 6px;
}
.info a:hover
{
	border-color:#000;
	background-color:#fff;
	color:#000;
}
.info a:active
{
	background-color:#999;
}



#backgroundLayers, #backgroundLayers div
{
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
}

#backgroundCanvas,#backgroundLeftCanvas
{
	position:absolute;
	left:0px;
	top:0px;
}

.offWeb .supportComment,.offWeb .adBanner,.offWeb #support,.offWeb #smallSupport,.offWeb .ad{display:none;}

.offWeb #topBar{display:none;}
.onWeb #topBar{visibility:visible;}

.showCompressed{display:none;}
#topBar.compressed .showCompressed{display:initial;}
#topBar.compressed .hideCompressed{display:none;}

#topBar
{
	visibility:hidden;
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:32px;
	background:url(img/darkNoiseTopBar.jpg) repeat-x bottom;
	color:#ccc;
}
#topBar>div
{
	display:inline-block;
	float:left;
	/*border-right:1px solid #000;
	border-bottom:3px solid transparent;*/
	box-shadow:0px 0px 3px 1px rgba(255,255,255,0.2) inset;
	padding:7px 8px 9px 8px;
}
#topBar a
{color:#fff;}
#topBar a.blueLink
{color:#06c;}
#topBar a.blueLink:hover
{color:#28f;text-shadow:0px 0px 3px #06c;}
#topBar a.lightblueLink
{color:#6ad3ff;}
#topBar a.lightblueLink:hover
{color:#74fffd;text-shadow:0px 0px 3px #6ad3ff;}
a.orangeLink,#topBar a.orangeLink
{color:#f65f4d;}
a.orangeLink:hover,#topBar a.orangeLink:hover
{color:#ff9580;text-shadow:0px 0px 3px #f65f4d;}

#topBar
{
	color:rgba(255,255,255,0.3);
	font-family:"Trebuchet MS";
	font-weight:bold;
	font-size:15px;
	text-shadow:0px 1px 2px #000;
	letter-spacing:-0.35px;
}
#topBar>div
{
	box-shadow:none;
	position:relative;
	z-index:1;
	padding:7px 6px 10px 6px;
	margin-right:1px;
}
#topBar>div:after
{
	content:'';width:13px;height:32px;
	position:absolute;right:-7px;top:0px;
	background:url(img/topbarDiv.png);
	border:none;
	z-index:-1;
	pointer-events:none;
}
#topBar img
{
	position:absolute;left:0px;top:0px;
}
#topBar a,#topBar .hoverheader
{
	/*
	display:inline-block;
	border-radius:2px;padding:5px 2px;
	margin-left:-1px;margin-right:-1px;margin-top:-4px;
	color:#222;
	background:rgba(255,255,255,0.75);
	box-shadow:0px -1px 0px #fff;
	text-shadow:0px 1px 0px #fff;
	opacity:0.3;
	text-decoration:none;
	font-weight:bold;*/
	color:#fff;
	opacity:0.6;
	text-decoration:none;
	transition:opacity 0.1s,text-shadow 0.2s;
}
#topBar a:hover,#topBar .hoverer:hover>.hoverheader{opacity:1;text-shadow:0px 0px 6px currentColor !important;}

.hoverer
{
	position:relative;
	z-index:10000000;
	cursor:pointer;
}
.hoverable
{
	text-align:left;
	opacity:0;
	transition:max-height 0.25s ease-out,opacity 0.25s ease-out;
	position:absolute;
	left:0px;
	top:32px;
	width:100%;
	max-height:0px;
	overflow:hidden;
	box-shadow:0px 0px 0px 1px #000,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);
	border-radius:0px 0px 8px 8px;
}
.hoverer:hover>.hoverheader
{
	color:rgba(255,255,255,0.5);
}
.hoverer:hover>.hoverable
{
	opacity:1;
	max-height:400px;
}
.hoverable>div
{
	box-shadow:1px 1px 0px rgba(255,255,255,0.1) inset,-1px -1px 0px rgba(0,0,0,0.1) inset;
}
.hoverable>div:nth-child(odd)
{
	background:rgba(255,255,255,0.05);
}
.hoverable a
{
	display:inline-block;
	width:100%;
	padding:5px 8px;
}
.hoverable a:hover
{
	text-shadow:none;
	background:rgba(255,255,255,0.2);
}


#offGameMessageWrap
{
	display:table;
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background:#111 url(img/darkNoise.jpg);
	background:url(img/shadedBorders.png) left top/100% 100%,#111 url(img/darkNoise.jpg);
	text-align:center;
	z-index:1000000000;
	line-height:150%;
	font-size:20px;
}
#offGameMessage
{
	display:table-cell;
	vertical-align:middle;
	position:relative;
}
#loader
{
	position:relative;
	padding:32px;
	padding-top:110px;
	animation-name:appear;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-duration:0.5s;
}
@keyframes appear
{
	from {opacity:0;top:20px;}
	to {opacity:1;top:0px;}
}
#loading
{
	text-shadow:0px 0px 3px rgba(255,255,255,0.5),0px 0px 20px #39f;
	animation-name:blink;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in-out;
	animation-duration:0.75s;
}
.blinking{animation-name:blink;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in-out;
	animation-duration:0.75s;}
@keyframes blink
{
	0% {opacity:0.5;}
	50% {opacity:1;}
	100% {opacity:0.5;}
}
#ifIE9{display:none;}
#failedToLoad
{
	text-shadow:0px 0px 3px rgba(255,255,255,0.5),0px 0px 20px #f33;
	animation-name:appearLater;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-duration:15s;
}
@keyframes appearLater
{
	0% {opacity:0;}
	95% {opacity:0;}
	100% {opacity:1;}
}
.spinnyBig,.spinnySmall
{
	display:block;
	width:100px;
	height:100px;
	position:absolute;
	left:50%;
	top:0px;
	margin-left:-50px;
	animation-name:loadSpin;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in-out;
}
.spinnyBig
{
	background:url(img/spinnyBig.png);
	animation-duration:5s;
}
.spinnySmall
{
	background:url(img/spinnySmall.png);
	animation-duration:9s;
}
@keyframes loadSpin
{
	0% {transform:rotate(0deg);}
	100% {transform:rotate(360deg);}
}

.langSelectButton
{
	background:rgba(50,50,50,0.25);
	text-shadow:0px 1px 2px #000;
	box-shadow:0px 1px 0px rgba(255,255,255,0.5) inset, 0px 1px 4px rgba(128,255,255,0.2) inset,0px 2px 2px rgba(0,0,0,1);
	padding:1px 6px;
	margin:2px auto;
	width:200px;
	font-size:14px;
	text-decoration:underline;
	color:rgba(255,255,255,0.8);
	transition:color 0.2s,box-shadow 0.2s;
	cursor:pointer;
	z-index:1;
	position:relative;
	border-radius:3px;
}
.langSelectButton:hover,.langSelectButton.selected
{
	background:rgba(50,50,50,0.5);
	box-shadow:0px 0px 0px 1px rgba(255,255,255,1) inset, 0px 1px 4px 2px rgba(128,255,255,0.6) inset,0px 4px 2px 2px rgba(0,0,0,1);
	z-index:10;
	color:rgba(255,255,255,1);
}
.langSelectButton:hover:before
{
	content:'';
	width:22px;
	height:22px;
	position:absolute;
	left:0px;
	top:0px;
	background:url(img/tinyglobe.gif);
	pointer-events:none;
	display:block;
	transform:scale(0.75);
}

#game
{
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	overflow:hidden;
}
.onWeb #game{top:32px;}
.offWeb #game{top:0px;}
#sectionLeft
{
	position:absolute;
	left:0px;
	top:0px;
	width:30%;
	bottom:0px;
	min-width:100px;
	/*overflow:hidden;*/
}
/*#sectionLeftExtra{position:absolute;left:0px;top:0px;}*/
#sectionMiddle
{
	position:absolute;
	left:30%;
	padding-left:16px;
	margin-right:15px;
	top:0px;
	right:318px;
	bottom:0px;
	min-width:100px;
	overflow:hidden;
}
#centerArea
{
	overflow-x:hidden;
	overflow-y:scroll;
	position:absolute;
	top:112px;
	left:16px;
	bottom:0px;
	right:0px;
}
#game.onMenu #centerArea
{
	background:#000 url(img/darkNoise.jpg);
	background-image:url(img/shadedBorders.png),url(img/darkNoise.jpg);
	background-size:100% 100%,auto;
	background-color:#000;
}
#sectionRight
{
	height:100%;
	position:absolute;
	top:0px;
	right:0px;
	overflow-x:hidden;
	overflow-y:scroll;
	/*background:url(img/panelBG.png);*/
	background:rgba(0,0,0,0.5);
}

#sectionLeft .blackGradient
{
	background:url(img/blackGradient.png) repeat-x bottom;
	position:absolute;
	left:0px;
	right:0px;
	top:300px;
	height:640px;
}
#sectionLeft .blackFiller
{
	background:#000;
	position:absolute;
	left:0px;
	right:0px;
	top:940px;
	bottom:0px;
}


.inner
{
	box-shadow:0px 0px 0px 1px rgba(255,255,255,0.2),0px 2px 4px 2px rgba(0,0,0,0.5);
}
.zebra:nth-child(even)
{
	background:rgba(255,255,255,0.05);
}
.zebra.selected
{
	background:rgba(255,255,255,0.1);
	box-shadow:0px 0px 0px 1px rgba(255,255,255,0.5) inset;
}
.mouseOver{cursor:pointer;}
.mouseOver:hover
{
	filter:brightness(125%);
	background:rgba(255,255,255,0.07);
	text-shadow:0px -1px 6px #fff;
}
.mouseOver:active
{
	filter:brightness(75%);
	background:rgba(0,0,0,0.07);
}
.mouseOverScale
{
	cursor:pointer;
	transition:transform 0.1s;
}
.mouseOverScale:hover
{
	transform:scale(1.1);
	color:#fff;
}
.mouseOverScale:active
{
	transform:scale(1);
}

/* this is a mess */
.framed,a.option,.sliderBox,.smallFramed
{
	border:1px solid #e2dd48;
	background:#000 url(img/darkNoise.jpg);
	background-image:/*linear-gradient(rgba(255,255,255,0.05),rgba(0,0,0,0.4)),*/url(img/shadedBordersSoft.png),url(img/darkNoise.jpg);
	background-size:/*100% 100%,*/100% 100%,auto;
	background-color:#000;
	border-radius:2px;
	box-shadow:0px 0px 1px 2px rgba(0,0,0,0.5),0px 2px 4px rgba(0,0,0,0.25),0px 0px 2px 2px #000 inset,0px 1px 0px 1px rgba(255,255,255,0.5) inset;
	text-shadow:0px 1px 1px #000;
	color:#ccc;
	line-height:100%;
}
.framed,a.option,a.option.framed,a.option.framed:hover,.smallFramed,a.smallFancyButton
{
	/*border-color:#dac56e #c07a36 #a44e36 #c07a36;*/
	/*border:1px solid #e2dd48;*/
	border-color:#ece2b6 #875526 #733726 #dfbc9a;
}
.smallFramed
{border-radius:8px;}
a.option,textarea,input[type="text"],.sliderBox,a.smallFancyButton
{
	border:1px solid #e2dd48;
	border-color:#ece2b6 #875526 #733726 #dfbc9a;
	border-radius:2px;
}
textarea,input[type="text"]
{
	border-radius:4px;
	box-shadow:0px 0px 0px 1px rgba(0,0,0,0.5) inset,0px 1px 2px rgba(0,0,0,0.5) inset;
}
textarea:read-only,input[type="text"]:read-only
{
	background:transparent;
	color:inherit;
	text-shadow:0px 1px 0px #000;
	resize:none;
	border:1px solid rgba(255,255,255,0.25);
}
select,option{font-weight:bold;font-size:11px;margin:2px 4px 2px 0px;}
select{padding:2px;border-radius:4px;}
.smallFancyButton
{
	font-variant:small-caps;
	font-weight:bold;
	font-size:13px;
}
a.option.smallFancyButton
{
	vertical-align:middle;
	width:130px;
	text-align:right;
}

.prefButton{position:relative;}
.prefButton:after{content:'';background:#fff;pointer-events:none;width:3px;height:3px;display:inline-block;border-radius:4px;box-shadow:0px 0px 2px 0px #3cf,0px 0px 6px 1px #33f;position:absolute;right:3px;top:50%;margin-top:-1px;}
.prefButton.off:after{background:rgba(255,255,255,0.15);box-shadow:1px 1px 0px rgba(255,255,255,0.3);}

.tight
{
	box-sizing:border-box;
	overflow:hidden;
	text-align:center;
}
.tight .option
{
	box-sizing:border-box;
	width:100%;clear:both;
	margin:1px 0px;
	font-size:11px;
}
.tight .option.halfLeft
{
	width:50%;
	float:left;clear:left;
}
.tight .option.halfRight
{
	width:50%;
	float:right;clear:right;
}
#prompt .tightInput
{
	margin:4px;
	margin-top:0px;
	padding:4px 8px;
	width:100%;
	box-sizing:border-box;
	font-size:11px;
}

.framed,a.option.framed
{
	padding:4px 8px;
	margin:4px;
	border:3px solid transparent;
	border-image:url(img/frameBorder.png) 3 round;
	border-radius:2px;
	box-shadow:0px 0px 1px 2px rgba(0,0,0,0.5),0px 2px 4px rgba(0,0,0,0.25),0px 0px 6px 1px rgba(0,0,0,0.5) inset;
	-webkit-transition: opacity 0.1s ease-out;
	-moz-transition: opacity 0.1s ease-out;
	-ms-transition: opacity 0.1s ease-out;
	-o-transition: opacity 0.1s ease-out;
	transition: opacity 0.1s ease-out;
}

.sliderBox
{
	padding:4px 8px;
	width:200px;max-width:100%;
	display:inline-block;
	margin-bottom:2px;
	margin-right:2px;
}
.sliderBox>div
{
	margin-bottom:4px;
}
.sliderBox>input
{
	display:block;
	margin:2px auto;
}

/* why, CSS? why? */
input[type=range]
{
	-webkit-appearance:none;
	width:100%;
	height:12px;
	margin:0px 0px;
	border:0px solid #000;
	cursor:pointer;
	background:transparent;
}
input[type=range]:focus{outline:none;}
input[type=range]::-webkit-slider-runnable-track
{
	width:100%;
	height:12px;
	cursor:pointer;
	background:#999;
	border:0px solid #000;
	border-radius:4px;
	box-shadow:0px 0px 4px #000,0px 2px 3px rgba(0,0,0,0.5) inset;
}
input[type=range]::-webkit-slider-thumb
{
	border:0px solid #000;
	height:12px;
	width:12px;
	background:#ccc;
	box-shadow:0px 0px 4px #fff inset,0px 1px 3px 1px rgba(0,0,0,0.5);
	cursor:pointer;
	-webkit-appearance:none;
	margin-top:0px;
	border-radius:4px;
}
input[type=range]:active::-webkit-slider-thumb,input[type=range]:hover::-webkit-slider-thumb {background:#fff;}

input[type=range]::-moz-range-track 
{
	width:100%;
	height:12px;
	cursor:pointer;
	background:#999;
	border:0px solid #000;
	border-radius:4px;
	box-shadow:0px 0px 4px #000,0px 2px 3px rgba(0,0,0,0.5) inset;
}
input[type=range]::-moz-range-thumb
{
	border:0px solid #000;
	height:12px;
	width:12px;
	background:#ccc;
	box-shadow:0px 0px 4px #fff inset,0px 1px 3px 1px rgba(0,0,0,0.5);
	cursor:pointer;
	-webkit-appearance:none;
	margin-top:0px;
	border-radius:4px;
}
input[type=range]:active::-moz-range-thumb,input[type=range]:hover::-moz-range-thumb {background:#fff;}

input[type=range]::-ms-track 
{
	width:100%;
	height:12px;
	cursor:pointer;
	background:#999;
	border:0px solid #000;
	border-radius:4px;
	box-shadow:0px 0px 4px #000,0px 2px 3px rgba(0,0,0,0.5) inset;
}
input[type=range]::-ms-thumb
{
	border:0px solid #000;
	height:12px;
	width:12px;
	background:#ccc;
	box-shadow:0px 0px 4px #fff inset,0px 1px 3px 1px rgba(0,0,0,0.5);
	cursor:pointer;
	-webkit-appearance:none;
	margin-top:0px;
	border-radius:4px;
}
input[type=range]:active::-ms-thumb,input[type=range]:hover::-ms-thumb {background:#fff;}



.framed b
{
	color:#fff;
	font-weight:bold;
}
.framed .name
{
	font-weight:bold;
	font-size:110%;
	color:#fff;
	margin:2px 0px;
	/*text-shadow:0px 0px 2px rgba(255,255,255,0.3);*/
	text-shadow:0px -2px 4px rgba(255,255,200,0.4),0px 1px 0px rgba(100,100,100,1),0px 2px 4px rgba(0,0,0,1);
}
.framed q
{
	display:block;
	position:relative;
	text-align:right;
	margin-top:8px;
	font-style:italic;
	color:rgba(255,255,255,0.5);
	font-size:12px;
	font-family:Georgia;
	line-height:135%;
}
.framed q:before
{
	display:inline-block;
	content:"“";
	font-size:14px;
	font-family:Georgia;
	font-weight:bold;
}
.framed q:after
{
	display:inline-block;
	content:"”";
	font-size:14px;
	font-family:Georgia;
	font-weight:bold;
	margin-top:-2px;
}
.framed .close
{
	position:absolute;
	top:-5px;
	right:0px;
	padding:4px;
}
.close
{
	font-weight:bold;
	font-size:16px;
	text-shadow:0px 0px 2px #000,0px 0px 1px #000;
	cursor:pointer;
	font-family:Comic Sans MS;
	padding:1px 8px 7px 8px;
	z-index:1000;
}
.close:hover
{
	color:#fff;
	text-shadow:0px 0px 2px #fff;
}
.sidenote
{
	position:absolute;
	right:-6px;
	bottom:6px;
}

.menuClose
{
	position:absolute;
	top:0px;
	right:0px;
	border-bottom-left-radius:36px;
	padding:4px 12px 16px 18px;
	font-size:24px;
	box-shadow:-2px 2px 8px #000, 2px -2px 8px rgba(255,255,255,0.1) inset;
}
.menuClose:hover
{
	background:rgba(255,255,255,0.05);
}

.block
{
	padding:8px;
	margin:2px;
	border-radius:4px;
	border:1px solid rgba(255,255,255,0.1);
	box-shadow:0px 0px 1px #000,0px 0px 1px #000 inset;
}


#tooltipAnchor
{
	position:absolute;
	z-index:1000000000;
	display:none;
	//transition:left 0.1s ease-out,right 0.1s ease-out,top 0.1s ease-out,bottom 0.1s ease-out;
}
#tooltip
{
	position:absolute;
	-webkit-transition:none;
	-moz-transition:none;
	-ms-transition:none;
	-o-transition:none;
	transition:none;
	pointer-events:none;
	opacity:1;
}
.noTransition
{
	-webkit-transition:none !important;
	-moz-transition:none !important;
	-ms-transition:none !important;
	-o-transition:none !important;
	transition:none !important;
}
.wobbling
{
	animation:wobble 0.1s ease-out;
}

.line
{
	background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0.25),rgba(255,255,255,0));
	height:1px;
	width:90%;
	margin:6px auto;
	position:relative;
}
.line:before,.line:after
{
	content:'';
	display:block;
	background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0.25),rgba(0,0,0,0));
	height:1px;
	width:90%;
	position:absolute;
	left:0px;
	bottom:1px;
}
.line:after
{
	bottom:-1px;
}
.description
{
	/*border-top:1px solid rgba(255,255,255,0.25);*/
	margin:4px 0px;
}
.descriptionBlock
{
	border-radius:6px;
	background:rgba(255,255,255,0.1);
	padding:2px 6px;
	margin:3px 0px;
	position:relative;
	font-size:85%;
	text-shadow:0px 1px 0px #000;
}
.descriptionBlock:before
{
	position:absolute;
	display:block;
	content:"\2022";
	left:-4px;
	top:2px;
	font-size:16px;
}

q:before
{
	display:inline-block;
	content:"\"";
}
q:after
{
	display:inline-block;
	content:"\"";
}


.price
{
	font-weight:bold;
	color:#6f6;
	padding-left:18px;
	position:relative;
}
.priceMult
{
	font-weight:bold;
	color:#ffc;
}
.price .tinyCookie
{
	display:block;
	position:absolute;
	left:0px;
	top:0px;
	width:16px;
	height:16px;
	cursor:pointer;
}
.price.disabled, .disabled .price
{
	color:#f66;
}
.price:before
{
	content:'';
	display:block;
	position:absolute;
	left:0px;
	top:2px;
	background:url(img/money.png);
	width:16px;
	height:16px;
}
.hasTinyCookie
{
	position:relative;
	padding-left:18px;
}
.hasTinyCookie:before
{
	content:'';
	display:block;
	position:absolute;
	left:0px;
	top:0px;
	background:url(img/money.png);
	width:16px;
	height:16px;
}
.heavenly.price:before
{
	background:url(img/heavenlyMoney.png);
}
.lump.price:before
{
	background:url(img/sugarLump.png);
}
.price.plain
{
	color:#fff;
	display:inline-block;
}
.price.plain:before
{
	top:0px;
}

#cookieAnchor
{
	position:absolute;
	left:50%;
	top:40%;
}
#bigCookie
{
	width:256px;
	height:256px;
	position:absolute;
	left:-128px;
	top:-128px;
	/*background:url(img/perfectCookie.png);
	background-size:256px 256px;*/
	background:url(img/empty.png);/* somehow necessary; an empty div with no background seems to be click-through */
	cursor:pointer;
	z-index:10000;
	border-radius:128px;
	border:none;
	overflow:hidden;
	outline:none;
}
.elderWrath #bigCookie
{
	background:url(img/imperfectCookie.png);
	background-size:256px 256px;
}
#cookieNumbers{position:absolute;top:-80px;}
.cookieNumber
{
	position:absolute;
	pointer-events:none;
	left:-100px;
	top:0px;
	width:200px;
	z-index:100;
	text-align:center;
	text-shadow:none;
}
#cookieCursors{position:absolute;z-index:5;}
.cursor
{
	width:32px;
	height:32px;
	position:absolute;
	background:url(img/cursor.png);
}
.cookieParticle
{
	width:64px;
	height:64px;
	margin-left:-32px;
	margin-top:-32px;
	position:absolute;
	background:url(img/smallCookies.png);
	opacity:0;
}
#particles {position:absolute;left:0px;top:0px;z-index:100000000000;}
.particle
{
	position:absolute;
	pointer-events:none;
	left:-200px;
	bottom:0px;
	width:400px;
	z-index:100000000;
	text-align:center;
	text-shadow:1px 1px 1px #000,0px 0px 6px #000;
	font-size:24px;
}
.particle.title
{
	background:rgba(0,0,0,0.5);
	box-shadow:0px 0px 8px 8px rgba(0,0,0,0.5);
	border-radius:16px;
	display:none;
}

#milk
{
	width:100%;
	height:0%;
	position:absolute;
	left:0px;
	bottom:0px;
	z-index:100;
	opacity:0.9;
}
.milkLayer
{
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
	background-repeat:repeat-x;
}
#cookies
{
	position:absolute;
	left:0px;
	top:10%;
	width:100%;
	text-align:center;
	z-index:200;
	background:#000;
	background:rgba(0,0,0,0.4);
	padding:2px 0px;
	pointer-events:none;
	text-shadow:1px 0px 0px #000,-1px 0px 0px #000,0px 1px 0px #000,0px -1px 0px #000,0px 1px 4px #000;
}
#cookiesPerSecond
{
	font-size:50%;
}
#cookiesPerSecond.wrinkled
{
	color:#f00;
}
.monospace
{
	font-family:Courier,monospace;
	font-weight:bold;
}
#bakeryNameAnchor
{
	position:absolute;
	left:0px;
	top:10%;
	width:100%;
	z-index:200;
}
#bakeryName
{
	position:absolute;
	left:0px;
	bottom:8px;
	left:12.5%;
	width:75%;
	text-align:center;
	font-size:20px;
	background:#000;
	background:rgba(0,0,0,0.4);
	border-radius:12px;
	padding:4px 0px;
	cursor:pointer;
	color:rgba(255,255,255,0.8);
}
#bakeryName:hover
{
	color:#fff;
	text-shadow:0px 0px 8px #fff;
}

#specialPopup
{
	position:absolute;
	left:50%;
	margin-left:-185px;
	bottom:32px;
	width:350px;
	min-height:8px;
	z-index:20000;
	transition:bottom 0.2s ease-out,opacity 0.1s ease-out;
	text-align:center;
}
#specialPopup.onScreen
{
	bottom:32px;
	opacity:1;
}
#specialPopup.offScreen
{
	bottom:-32px;
	pointer-events:none;
	opacity:0;
}

.separatorLeft, .separatorRight
{
	width:16px;
	height:100%;
	background:url(img/panelVertical.png?v=2) repeat-y;
	background:url(img/panelGradientTop.png) no-repeat top left,url(img/panelGradientBottom.png) no-repeat bottom left,url(img/panelVertical.png?v=2) repeat-y;
	position:absolute;
	top:0px;
	bottom:0px;
	z-index:100;
}
.separatorLeft
{
	left:30%;
}
.separatorRight
{
	right:317px;
}
.separatorBottom
{
	width:100%;
	height:16px;
	background:url(img/panelHorizontal.png?v=2) repeat-x;
	background:url(img/panelGradientLeft.png) no-repeat top left,url(img/panelGradientRight.png) no-repeat top right,url(img/panelHorizontal.png?v=2) repeat-x;
	position:absolute;
	left:0px;
	bottom:0px;
}

.panelButton
{
	background:url(img/panelMenu3.png);
	background-position:0px 0px;
	position:absolute;
	z-index:100;
	width:100px;
	height:48px;
	text-align:center;
	font-size:18px;
	cursor:pointer;
	
	box-sizing:border-box;
	padding-top:16px;
	
	color:#999;
	text-shadow:0px 1px 0px #444,0px 0px 4px #000;
}
.panelButton:hover,.panelButton.selected
{
	z-index:1000;
	color:#fff;
	text-shadow:0px 1px 0px #999,0px 0px 4px #000;
}
.panelButton>div:first-child{display:inline-block;}
#prefsButton{top:0px;left:0px;		padding-top:16px;		padding-right:2px;		background-position:0px 0px;}
#statsButton{bottom:16px;left:0px;	padding-top:14px;		padding-right:2px;		background-position:0px -48px;}
#logButton{top:0px;right:0px;		padding-top:16px;		padding-left:2px;		background-position:-100px 0px;}
#legacyButton{bottom:16px;right:0px;padding-top:14px;		padding-left:2px;		background-position:-100px -48px;}
/*#prefsButton:hover,#prefsButton.selected{					background-position:0px -96px;}*/
#statsButton:hover,#statsButton.selected{					background-position:0px -144px;}
#logButton:hover,#logButton.selected{						background-position:-100px -96px;}
/*#legacyButton:hover,#legacyButton.selected{					background-position:-100px -144px;}*/

.subButton
{
	border-radius:5px;
	box-shadow:0px 1px 0px rgba(250,180,150,0.75) inset,0px 0px 0px 1px rgba(0,0,0,0.75),0px 2px 3px rgba(250,180,150,0.5) inset,0px 1px 0px 1px rgba(250,180,150,0.25);
	padding:6px 12px;
	font-size:14px;
	position:relative;
	top:-4px;
}
#prefsButton:hover>.subButton{box-shadow:0px 1px 0px rgba(250,180,150,1) inset,0px 0px 0px 1px rgba(0,0,0,0.75),0px 2px 3px rgba(250,180,150,0.75) inset,0px 1px 0px 1px rgba(250,180,150,0.25);}

#logButton.hasUpdate {color:#fff;}
#logButton.hasUpdate>div:first-child {position:relative;top:-8px;}
#logButton.hasUpdate:before
{
	content:'';
	display:block;
	position:absolute;
	left:-40px;
	top:10px;
	width:48px;
	height:38px;
	background:url(img/pointGlow.gif);
	animation:pointGlowBump 0.6s infinite ease-in-out;
}
@keyframes pointGlowBump{
	0% {transform:translate(0px,0px) scale(0.8,1.2);}
	20% {transform:translate(-8px,0px);}
	50% {transform:translate(-10px,0px);}
	80% {transform:translate(-8px,0px);}
	100% {transform:translate(0px,0px);}
}
#checkForUpdate
{
	display:none;
	font-size:10px;
	position:absolute;bottom:8px;left:0px;right:0px;
	animation:rainbowCycle 0.5s infinite ease-in-out;
}
@keyframes rainbowCycle{
	0% {color:#ff1d87;}
	16% {color:#a071ff;}
	33% {color:#40b9ff;}
	50% {color:#15ff57;}
	66% {color:#ffed29;}
	83% {color:#ff5f2e;}
	100% {color:#ff1d87;}
}
@keyframes rainbowCycleBG{
	0% {background-color:#ff1d87;}
	16% {background-color:#a071ff;}
	33% {background-color:#40b9ff;}
	50% {background-color:#15ff57;}
	66% {background-color:#ffed29;}
	83% {background-color:#ff5f2e;}
	100% {background-color:#ff1d87;}
}
#logButton.hasUpdate #checkForUpdate {display:block;}


.roundedPanel
{
	background:url(img/roundedPanelBGS.png) repeat-x 0px 0px;
	position:relative;
	padding:9px 0px;
	height:20px;
}
.roundedPanel:before,.roundedPanel:after
{
	content:'';
	display:block;height:36px;
	position:absolute;top:0px;
}
.roundedPanel:before
{
	background:url(img/bracketPanelLeftS.png) no-repeat;left:-16px;width:16px;
}
.roundedPanel:after
{
	background:url(img/bracketPanelRightS.png) no-repeat;right:-18px;width:18px;
}
/*.roundedPanel
{
	background:url(img/roundedPanelBG.png) repeat-x 0px 0px;
	position:relative;
}
.roundedPanel:before,.roundedPanel:after
{
	content:'';
	display:block;width:17px;height:32px;
	position:absolute;top:0px;
}
.roundedPanel:before
{
	background:url(img/roundedPanelLeft.png) no-repeat;left:-17px;
}
.roundedPanel:after
{
	background:url(img/roundedPanelRight.png) no-repeat;right:-17px;
}*/
#ascendNumber
{
	display:none;
	position:absolute;
	right:115px;
	top:22px;
	font-size:14px;
	font-weight:bold;
	font-family:Georgia;
	color:#fff;
	text-shadow:0px -1px 1px #09f,0px 1px 1px #f04;
}
#legacyButton:hover>#ascendNumber
{text-shadow:0px -1px 1px #09f,0px 1px 1px #f04,0px -1px 1px #09f,0px 1px 1px #f04,0px 0px 4px #fff;}

#ascendTooltip
{
	display:none;
	position:absolute;
	right:0px;
	top:52px;
	font-family:Tahoma,Arial,sans serif;
	font-size:11px;
	width:220px;
	padding:8px;
	pointer-events:none;
	z-index:100000000;
}
#legacyButton:hover>#ascendTooltip
{display:block;}


#lumps
{
	display:none;
	position:absolute;
	width:32px;
	height:32px;
	left:-8px;
	bottom:-12px;
	z-index:10000;
	cursor:pointer;
	filter:drop-shadow(0px 3px 2px #000);
	-webkit-filter:drop-shadow(0px 3px 2px #000);
}
#lumps:hover #lumpsIcon,#lumps:hover #lumpsIcon2
{top:-10px;}
#lumpsIcon,#lumpsIcon2
{
	width:48px;
	height:48px;
	position:absolute;
	left:-8px;
	top:-8px;
	pointer-events:none;
}
#lumpsAmount
{
	font-size:12px;
	color:#6cf;
    position:absolute;
    left:36px;
    top:6px;
	pointer-events:none;
	text-align:left;
	width:200px;
}
.lumpsOn #lumps{display:block;}


.lumpRefill
{
	cursor:pointer;
	width:48px;
	height:48px;
	position:absolute;
	left:0px;
	top:0px;
	transform:scale(0.5);
	z-index:1000;
	transition:transform 0.05s;
}
.lumpRefill:hover{transform:scale(1);}
.lumpRefill:active{transform:scale(0.4);}


.meterContainer
{
	background:rgba(0,0,0,0.5);
	position:relative;
	border-radius:2px;
	height:8px;
}
.meter
{
	background:url(img/prestigeBar.jpg) 0px 0px;
	position:absolute;
	left:0px;
	/*right:100%;*/
	right:0px;
	top:0px;
	height:100%;
	/*max-width:100%;*/
	transform:translate(0px,0px);
}
.meter:after
{
	height:8px;
	width:8px;
	position:absolute;
	right:-8px;
	top:0px;
	content:'';
	display:block;
	background:url(img/prestigeBarCap.png);
}
#ascendMeterContainer
{
	width:100px;
	right:0px;
	bottom:4px;
	position:absolute;
	overflow:hidden;
}
#ascendMeter
{
	/*right:100px;*/
}

.meter.filling
{
/* this tiny thing is actually an enormous resource hog */
-/*webkit-animation:fluidMotion 10s infinite linear;
   -moz-animation:fluidMotion 10s infinite linear;
        animation:fluidMotion 10s infinite linear;*/
	/*-webkit-transition:right 0.5s linear;
	-moz-transition:right 0.5s linear;
	-ms-transition:right 0.5s linear;
	-o-transition:right 0.5s linear;
	transition:right 0.5s linear;*/
}
@-webkit-keyframes fluidMotion{
from {background-position:0px -24px;}
	to {background-position:-128px -24px;}
}
@-moz-keyframes fluidMotion{
from {background-position:0px -24px;}
	to {background-position:-128px -24px;}
}
@keyframes fluidMotion{
from {background-position:0px -24px;}
	to {background-position:-128px -24px;}
}

#game.onMenu #menu{display:block;}
#game.onMenu .row{visibility:hidden;display:none;}
#menu
{
	display:none;
	z-index:1;
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	/*box-shadow:0px 0px 24px #000 inset;
	background:#000 url(img/darkNoise.jpg);*/
}

#comments
{
	padding:16px;
	text-align:center;
	position:relative;
	padding-bottom:32px;
	font-size:16px;
	height:64px;
	background:url(img/shadedBorders.png);
	background-size:100% 96px;
	/*overflow:hidden;*/
}
#commentsText
{
	position:absolute;
	top:0px;
	left:108px;
	right:108px;
	bottom:16px;
	overflow:hidden;
	z-index:1;
}
#commentsText:hover
{
	overflow:visible;
	z-index:1000;
}
.commentsText
{
	padding:16px 0px;
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	opacity:1;
	text-align:center;
	transition:text-shadow 0.25s,background 0.25s;
	border-radius:8px;
}
#commentsText:hover>.commentsText
{
	text-shadow:0px 1px 1px #000,0px 2px 2px #000,0px 2px 8px #000,0px 2px 16px #000,0px 2px 20px #000;
	/*background:rgba(0,0,0,0.2);*/
}
.commentsText q
{
	font-style:italic;
}
.commentsText sig
{
	font-size:70%;
	display:block;
	text-align:center;
	opacity:0.7;
}
.commentsText sig:before
{
	content:"-";
	padding-left:64px;
}
.fortune
{
	color:#ade000;
	cursor:pointer;
}
.fortune:hover
{
	color:#d2ff00;
	text-shadow:0px 0px 4px #ade000 !important;
}

#commentsText1
{
	z-index:20;
}
#commentsText2
{
	z-index:10;
}

/* let me tell you about vendor prefixes */
.risingAway{
-webkit-animation:riseAway 1s 1 forwards;
   -moz-animation:riseAway 1s 1 forwards;
        animation:riseAway 1s 1 forwards;
}
.risingUp{
-webkit-animation:riseUp 1s 1 forwards;
   -moz-animation:riseUp 1s 1 forwards;
        animation:riseUp 1s 1 forwards;
}
.risingUpLinger{
-webkit-animation:riseUpLinger 4s 1 forwards ease-out;
   -moz-animation:riseUpLinger 4s 1 forwards ease-out;
        animation:riseUpLinger 4s 1 forwards ease-out;
}
@-webkit-keyframes riseAway{
from {top:0px;opacity:1;}
	to {top:-20px;opacity:0;}
}
@-webkit-keyframes riseUp{
from {top:20px;opacity:0;}
	to {top:0px;opacity:1;}
}
@-webkit-keyframes riseUpLinger{
0% {transform:translate(0px,0px);opacity:0;}
1% {transform:translate(0px,0px);opacity:1;}
20% {transform:translate(0px,-32px);opacity:1;}
100% {transform:translate(0px,-32px);opacity:0;}
}
@-moz-keyframes riseAway{
from {top:0px;opacity:1;}
	to {top:-20px;opacity:0;}
}
@-moz-keyframes riseUp{
from {top:20px;opacity:0;}
	to {top:0px;opacity:1;}
}
@-moz-keyframes riseUpLinger{
0% {transform:translate(0px,0px);opacity:0;}
1% {transform:translate(0px,0px);opacity:1;}
20% {transform:translate(0px,-32px);opacity:1;}
100% {transform:translate(0px,-32px);opacity:0;}
}
@keyframes riseAway{
from {top:0px;opacity:1;}
	to {top:-20px;opacity:0;}
}
@keyframes riseUp{
from {top:20px;opacity:0;}
	to {top:0px;opacity:1;}
}
@keyframes riseUpLinger{
0% {transform:translate(0px,0px);opacity:0;}
2% {transform:translate(0px,0px);opacity:1;}
20% {transform:translate(0px,-32px);opacity:1;}
75% {transform:translate(0px,-32px);opacity:1;}
100% {transform:translate(0px,-32px);opacity:0;}
}


@keyframes wobble
{
	0% {transform:scale(0.5,0.5);}
	20% {transform:scale(1.3,0.7);}
	30% {transform:scale(0.7,1.3);}
	50% {transform:scale(1.2,0.8);}
	70% {transform:scale(0.9,1.1);}
	90% {transform:scale(1.1,0.9);}
	100% {transform:scale(1,1);}
}

@keyframes bounce
{
	/* weeeeee */
	0% 		{transform-origin:50% 100%;transform:scale(1,1);}
	10% 	{transform-origin:50% 100%;transform:scale(0.9,1.2);}
	20% 	{transform-origin:50% 100%;transform:scale(1.5,0.5);}
	25% 	{transform-origin:50% 100%;transform:scale(0.75,1.5) translate(0px,-10px);}
	30% 	{transform-origin:50% 100%;transform:scale(0.8,1.2) translate(0px,-20px);}
	60% 	{transform-origin:50% 100%;transform:scale(1,1) translate(0px,-25px);}
	70% 	{transform-origin:50% 100%;transform:scale(2,0.5);}
	80% 	{transform-origin:50% 100%;transform:scale(0.8,1.2);}
	90% 	{transform-origin:50% 100%;transform:scale(1,1);}
	100% 	{transform-origin:50% 100%;transform:scale(1,1);}
}


.comeLeft{animation:comeLeft 0.2s ease-out;}
@keyframes comeLeft
{
	0% {transform:translate(-16px,0px);opacity:0;}
	100% {transform:translate(0px,0px);opacity:1;}
}

.pucker{animation:pucker 0.2s ease-out;}
@keyframes pucker
{
	0% {transform:scale(1,1);}
	10% {transform:scale(1.15,0.85);}
	20% {transform:scale(1.2,0.8);}
	50% {transform:scale(0.75,1.25);}
	70% {transform:scale(1.05,0.95);}
	90% {transform:scale(0.95,1.05);}
	100% {transform:scale(1,1);}
}
.puckerHalf{animation:puckerHalf 0.2s ease-out;}
@keyframes puckerHalf
{
	0% {transform:scale(0.5,0.5);}
	10% {transform:scale(0.575,0.425);}
	20% {transform:scale(0.6,0.4);}
	50% {transform:scale(0.375,0.625);}
	70% {transform:scale(0.525,0.475);}
	90% {transform:scale(0.475,0.525);}
	100% {transform:scale(0.5,0.5);}
}

.flashRed{animation:flashRed 0.2s ease-out;}
@keyframes flashRed
{
	0% 		{background:#f00;}
	100% 	{}
}


#buildingsMaster
{
	min-height:24px;
	background:#999;
	background:url(img/darkNoise.jpg);
	box-shadow:0px 0px 4px #000 inset;
	position:relative;
	text-align:center;
	color:#fff;
	font-size:12px;
	font-weight:bold;
	font-variant:small-caps;
	text-shadow:0px 1px 0px #000;
	margin-bottom:8px;
	display:none;
}
.extraButtons #buildingsMaster{display:block;}
#game.onMenu #buildingsMaster{display:none;}

.row
{
	position:relative;
	padding-bottom:16px;
	display:none;
	/*overflow:hidden;*/
}
.row.enabled{display:block;}
.row .rowCanvas
{
	width:100%;
	height:128px;
	/*overflow-x:scroll;
	overflow-y:hidden;*/
	background:#000;
	display:block;
}
.row .rowSpecial
{
	min-height:24px;
	z-index:100;
	width:100%;
	top:0px;
	left:0px;
	background:#000 url(img/mapBG.jpg) fixed;
	display:none;
}
.row.onMinigame .rowCanvas,.row.onMinigame .onlyOnCanvas{display:none;}
.row.onMinigame .rowSpecial{display:block;}
/*.row.muted .rowCanvas,.row.muted .rowSpecial{display:none;}*/
/*.row.muted .separatorBottom{background:rgba(0,0,0,0.75);box-shadow:1px 1px 0px rgba(255,255,255,0.1) inset,-1px -1px 0px rgba(0,0,0,0.5) inset;}*/
.row.muted{display:none;}

.row .info, #sectionLeft .info
{
	display:none;
	/*visibility:hidden;*/
	-webkit-transition: opacity 0.1s ease-out;
	-moz-transition: opacity 0.1s ease-out;
	-ms-transition: opacity 0.1s ease-out;
	-o-transition: opacity 0.1s ease-out;
	transition: opacity 0.1s ease-out;
	opacity:0;
}
.row .info, #sectionLeft .info
{
	position:absolute;
	top:0px;
	left:0px;
	height:112px;
	padding:8px;
	font-size:12px;
	line-height:125%;
	background:url(img/infoBG.png);
	color:#666;
	z-index:100000;
}
.row .info:after
{
	width:16px;
	height:128px;
	position:absolute;
	right:-16px;
	top:0px;
	background:url(img/infoBGfade.png) repeat-y;
	display:block;
	content:'';
}
#sectionLeft .info
{
	border-radius:16px;
	padding:24px 8px 8px 24px;
	left:-16px;
	top:-16px;
	height:auto;
}
.row:hover .info, #sectionLeft:hover .info
{
	opacity:1;
}
.row .object
{
	position:absolute;
	width:64px;
	height:64px;
}
#sectionLeftInfo
{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
}

.zoneTitle
{
	text-align:center;
	padding:8px;
	width:100%;
}
#store
{
	position:relative;
}
#store:after
{
	display:block;
	height:64px;
	background:url(img/blackGradientSmallTop.png) repeat-x top;
	content:'';
	pointer-events:none;
	position:absolute;
	left:0px;
	right:0px;
	bottom:-64px;
}
#storeTitle
{
	position:relative;
	width:284px;
	background:url(img/blackGradientSmallTop.png) repeat-x top;
}
#buildingsTitle
{
	display:none;
}
.storeSection
{
	height:60px;
	width:300px;
	position:relative;
	overflow-y:hidden;
	background:url(img/panelHorizontal.png?v=2) repeat-x top;
	background:url(img/panelGradientLeft.png) no-repeat top left,url(img/panelGradientRight.png) no-repeat top right,url(img/panelHorizontal.png?v=2) repeat-x;
	padding-top:16px;
}
.storeSection:hover
{
	height:auto;
	min-height:60px;
}
.storeSection:hover:before
{
	display:block;
}
.storeSection:before,.storeSectionAddon
{
	z-index:1000;
	text-shadow:0px 1px 1px #360e00,0px -1px 1px #360e00,1px 0px 1px #360e00,-1px 0px 1px #360e00;
	font-weight:bold;
	color:#f6dab8;
	opacity:1;
	font-variant:small-caps;
}
.storeSection:before
{
	display:none;
	position:absolute;
	content:'';
	left:2px;
	top:0px;
	pointer-events:none;
}
.storeSectionAddon
{
	position:relative;
	line-height:0%;
	text-align:right;
	top:6px;
	right:4px;
}

.trophy
{
	width:48px;height:48px;margin:2px;float:left;
	cursor:pointer;
	filter:drop-shadow(0px 3px 2px #000);
	-webkit-filter:drop-shadow(0px 3px 2px #000);
	position:relative;
}
.trophy:hover
{
	top:-1px;
	/*filter:brightness(125%) drop-shadow(0px 3px 2px #000);
	-webkit-filter:brightness(125%) drop-shadow(0px 3px 2px #000);*/
}

.tag
{
	background-color:#ccc;
	background-image:linear-gradient(to bottom,rgba(0,0,0,0.3),transparent); 
	display:inline-block;
	font-family:Arial;
	font-size:10px;
	color:#000;
	text-shadow:0px 1px 0px rgba(255,255,255,0.25);
	border-radius:3px;
	opacity:0.85;
	padding:0px 3px;
	margin:1px 2px 0px 0px;
	font-weight:bold;
}

#toggleBox
{
	position:absolute;
	right:318px;
	top:100px;
	width:300px;
	min-height:60px;
	display:none;
	z-index:50000000;
	text-align:center;
}

#upgrades:before{content:'Upgrades';}
#toggleUpgrades:before{content:'Switches';}
#techUpgrades:before{content:'Research';}
/*#vaultUpgrades{height:0px;}*/
/*#vaultUpgrades:hover{height:auto;min-height:60px;}*/
#vaultUpgrades .crate{opacity:0.5;}
#vaultUpgrades .crate{transform:scale(0.5);margin:-9px;}
#vaultUpgrades{height:30px;}
#vaultUpgrades:hover{height:auto;min-height:30px;}
#vaultUpgrades:before{content:'Vault';}
#products:before{content:'Buildings';}
#upgrades
{
}
#upgrades.hasMenu
{
	min-height:82px;
}
#products
{
	height:auto;
	min-height:60px;
}
.crate
{
	width:48px;
	height:48px;
	margin:6px;
	display:inline-block;
	cursor:pointer;
	/*opacity:0.6;*/
	position:relative;
	/*background:#000;*/
	background:rgba(0,0,0,0.25);
	float:left;
	border:none;
}
#menu .crate{outline:none !important;}
.crate:before
{
	content:'';
	position:absolute;
	left:-6px;
	top:-6px;
	width:60px;
	height:60px;
	display:block;
	background:url(img/upgradeFrame.png?v=2);
	background-position:0px 0px;
	z-index:10;
}

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


.crate:before{background-position:120px 0px;}
.crate.enabled:before{background-position:0px 0px;}
.crate.enabled:hover:before,.crate.highlighted:before{background-position:60px 0px;}
.crate.noFrame.highlighted{z-index:100;box-shadow:0px 0px 12px -4px rgba(255,255,255,1) inset,0px 0px 0px 1px rgba(255,255,255,0.65);}
/*.crate.enabled:hover:after,.crate.highlighted:after
{
	content:'';
	position:absolute;
	left:-24px;
	top:-24px;
	width:96px;
	height:96px;
	display:block;
	//background:url(img/upgradeHighlight.png);
	background:url(img/upgradeHighlight.jpg);
	mix-blend-mode:screen;
	z-index:100;
	pointer-events:none;
}*/
.crate.shadow:before{background-position:120px 60px;}
.crate.shadow.enabled:before{background-position:0px 60px;}
.crate.shadow.enabled:hover:before{background-position:60px 60px;}

.selectorCorner
{
	position:absolute;
	left:-6px;
	bottom:-6px;
	width:12px;
	height:12px;
	display:block;
	background:url(img/upgradeSelector.png);
	z-index:20;
}

.crate:hover:before
{
	z-index:20;
}

.pieTimer
{
	position:absolute;
	left:0px;
	top:0px;
	width:48px;
	height:48px;
	background:url(img/pieFill.png);
	/*background-size:864px 384px;*/
	/*background-size:864px 384px;*/
	z-index:1000;
	opacity:0.5;
}

.crate.heavenly{opacity:0.8;z-index:10;}
.crate.heavenly:before
{
	left:-20px;
	top:-20px;
	width:88px;
	height:88px;
	background-image:url(img/ascendSlot.png);
	background-position:88px 0px;
}
/*.crate.heavenly:after
{
	content:'';
	position:absolute;
	left:-6px;
	top:-6px;
	width:60px;
	height:60px;
	display:block;
	background:#f00;
	border-radius:30px;
	z-index:-10;
}*/
#menu .crate.heavenly {margin:12px;}
/*#menu .crate.heavenly:nth-child(even) {margin-top:16px;margin-bottom:8px;}
#menu .crate.heavenly:nth-child(3n) {margin-right:16px;margin-left:8px;}*/
.crate.heavenly,.crate.heavenly:hover{background-color:transparent;}
.icon
{
	width:48px;
	height:48px;
	display:inline-block;
	margin:0px 4px;
}
.icon,.crate,.usesIcon
{
	/*background-image:url(img/icons.png?v=20);*/
}
.icon,.crate,.shadowFilter
{
	filter:drop-shadow(0px 3px 2px #000);
	-webkit-filter:drop-shadow(0px 3px 2px #000);
}

/*filter the whole list rather than filtering each individual crate*/
.crateBox .crate,.upgradeBox .crate
{
	filter:none;
	-webkit-filter:none;
}
.crateBox,.upgradeBox
{
	filter:drop-shadow(0px 3px 2px #000);
	-webkit-filter:drop-shadow(0px 3px 2px #000);
}
.listing.crateBox
{
	overflow-y:hidden;
	padding-bottom:12px;
	margin-bottom:-12px;
}

.achievement
{
	/*opacity:0.4;*/
}
.crate.enabled
{
	opacity:1;
}
.crate.heavenly.enabled:before
{
	/*background-position:0px -60px;*/
	background-position:0px 0px;
}
.crate.heavenly:hover:before
{
	background-position:-88px 0px;
}
.crate:hover,.crate.highlighted
{
	/*background-color:#200e0a;*/
	opacity:1;
	top:-1px;
	
	/* for some reason having a filter update on hover makes the cursor confused about which icon it's hovering */
	/*filter:brightness(115%);
	-webkit-filter:brightness(115%);*/
}
.crate.ghosted
{
	background:transparent;
	opacity:0.2;
}
.parentLink
{
	/*background:url(img/linkPulse.png);*/
	background:url(img/linkPulse.gif);
	width:0px;
	height:8px;
	position:absolute;
	-ms-transform-origin:0% 50%;
	-webkit-transform-origin:0% 50%;
	transform-origin:0% 50%;
	opacity:0.5;
	z-index:-10;
	/*
-webkit-animation:parentLinkPulse 1s infinite linear;
   -moz-animation:parentLinkPulse 1s infinite linear;
        animation:parentLinkPulse 1s infinite linear;
	*/
}
@-webkit-keyframes parentLinkPulse{
from {background-position:0px 0px;}
	to {background-position:32px 0px;}
}
@-moz-keyframes parentLinkPulse{
from {background-position:0px 0px;}
	to {background-position:32px 0px;}
}
@keyframes parentLinkPulse{
from {background-position:0px 0px;}
	to {background-position:32px 0px;}
}

.product
{
	width:300px;
	height:64px;
	cursor:pointer;
	opacity:0.6;
	background:url(img/storeTile.jpg);
	position:relative;
	-webkit-transition: opacity 0.25s ease-out, margin-bottom 0.1s ease-out;
	-moz-transition: opacity 0.25s ease-out, margin-bottom 0.1s ease-out;
	-ms-transition: opacity 0.25s ease-out, margin-bottom 0.1s ease-out;
	-o-transition: opacity 0.25s ease-out, margin-bottom 0.1s ease-out;
	transition: opacity 0.25s ease-out, margin-bottom 0.1s ease-out;
	border:none;
	text-align:left;
	line-height:inherit;
}
.product:after
{
	content:'';
	display:block;
	position:absolute;
	left:0px;top:0px;right:0px;bottom:0px;
	z-index:100;
}
.product:nth-child(4n-3) {background-position:0px 64px;}
.product:nth-child(4n-2) {background-position:0px 128px;}
.product:nth-child(4n-1) {background-position:0px 192px;}
.product:hover
{
	box-shadow:0px 0px 16px #fed inset,0px 0px 1px #000;
	z-index:20;
	filter:brightness(115%);
	-webkit-filter:brightness(115%);
}
.product.enabled:active
{
	box-shadow:0px 0px 16px #000 inset;
}
.product.unlocked.enabled
{
	opacity:1;
}
.product.toggledOff
{
	opacity:0;
}
.productName
{
	font-weight:bold;
	letter-spacing:-1px;
	font-size:28px;
}
.longProductName
{
	line-height:90%;
	font-size:17px;
	padding-right:50px;
}
.product .icon
{
	width:64px;
	height:64px;
	position:absolute;
	left:0px;
	top:0px;
	background-repeat:no-repeat;
	margin:0px;
}
.product .content
{
	display:inline-block;
	position:absolute;
	left:64px;
	top:6px;
	right:0px;
	bottom:6px;
	padding:4px;
	text-shadow:0px 2px 6px #000,0px 1px 1px #000;
}
.tinyProductIcon
{
	width:64px;
	height:64px;
	left:0px;
	top:0px;
	background-repeat:no-repeat;
	margin:-16px;
	transform:scale(0.5);
	display:inline-block;
	border-radius:32px;
}
#buildingsMaster .tinyProductIcon
{
	cursor:pointer;
	opacity:0.8;
}
#buildingsMaster .tinyProductIcon:hover
{
	opacity:1;
}


.product .content .owned
{
	position:absolute;
	right:8px;
	bottom:5px;
	font-size:40px;
	opacity:0.2;
	color:#000;
	text-shadow:0px 0px 8px #fff;
	letter-spacing:-2.5px;
}
.product .icon
{
	opacity:0;
}
.product.unlocked .icon
{
	opacity:1;
}
.product .icon.off
{
	z-index:100;
	opacity:1;
	background-repeat:no-repeat;
	-webkit-transition: opacity 2s ease-out;
	-moz-transition: opacity 2s ease-out;
	-ms-transition: opacity 2s ease-out;
	-o-transition: opacity 2s ease-out;
	transition: opacity 2s ease-out;
}
.product.unlocked .icon.off
{
	opacity:0;
}
.product.locked .title {display:none;}
.product .lockedTitle {display:none;}
.product.locked .lockedTitle {display:block;}

.selling .product
{
	box-shadow:0px 0px 16px #c00 inset;
}
.selling .product:hover
{
	box-shadow:0px 0px 16px #f66 inset,0px 0px 1px #000;
}
.selling .product.enabled:active
{
	box-shadow:0px 0px 16px #f99 inset;
}

.productButtons
{
	position:absolute;
	right:-1px;
	bottom:0px;
	overflow:hidden;
	z-index:10;
}
.productButton
{
	background:rgba(0,0,0,0.25);
	box-shadow:-1px -1px 0px rgba(255,255,255,0.25),0px 0px 1px 1px rgba(0,0,0,0.5) inset;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
	padding:4px 8px;
	font-size:11px;
	font-weight:bold;
	color:#ccc;
	text-shadow:1px 1px 0px #000,-1px 1px 0px #000,1px -1px 0px #000,-1px -1px 0px #000;
	cursor:pointer;
	float:right;
	position:relative;
	margin-left:2px;
	margin-top:2px;
	min-height:11px;
}
.productLevel
{
	border-top-right-radius:0px;
}
.productButton:hover
{
	background:rgba(0,0,0,0.5);
	color:#fff;
}
.productLevel
{
	width:65px;
}
.productLevel:after
{
	content:'';
	display:block;
	position:absolute;
	right:8px;
	bottom:0px;
	background:url(img/levelUp.png);
	width:33px;
	height:19px;
	opacity:0.75;
}
.productLevel:hover:after
{
	opacity:1;
}
.productButton.on{background:rgba(255,255,255,0.75);}
.productMute{display:none;}
.extraButtons .productMute{display:inline-block;}


.lumpsOnly{display:none;}
.lumpsOn .lumpsOnly{display:block;}

.storePre
{
	background:#999;
	background:url(img/darkNoise.jpg);
	box-shadow:0px 0px 4px #000 inset;
	width:300px;
	padding:4px 0px;
	position:relative;
	text-align:center;
	font-variant:small-caps;
	color:#fff;
	font-weight:bold;
	font-size:14px;
	text-shadow:0px 1px 0px #000;
}
.storePreButton
{
	opacity:0.5;
	cursor:pointer;
}
.storePreButton:hover,.storePreButton.selected
{
	text-shadow:0px 1px 0px #000,0px 0px 1px #fff,0px 0px 4px #fff;
	opacity:1;
}
#storeBulk
{
	width:240px;
	padding:0px;
	padding-left:60px;
	height:32px;
	overflow:hidden;
}
.storeBulkMode,.storeBulkAmount
{
	float:left;
}
.storeBulkMode:hover,.storeBulkAmount:hover,.storeBulkMode.selected,.storeBulkAmount.selected
{
}
.storeBulkMode
{width:60px;padding:1px 0px;}
#storeBulkBuy
{position:absolute;left:0px;top:0px;}
#storeBulkSell
{position:absolute;left:0px;bottom:1px;}
.storeBulkAmount
{width:60px;padding:9px 0px;}

#buffs
{
	position:absolute;
	top:0px;
	right:0px;
	z-index:100000;
	transform-origin:100% 0%;
	transform:scale(0.75);
}
.buff
{
	margin:12px;
}

#shimmers
{
	position:absolute;
	left:0px;
	top:0px;
	z-index:10000000000;
	filter:drop-shadow(0px 4px 4px rgba(0,0,0,0.75));
	-webkit-filter:drop-shadow(0px 4px 4px rgba(0,0,0,0.75));
}
.shimmer
{
	cursor:pointer;
	position:absolute;
	z-index:10000000000;
	display:none;
}
.shimmer:hover
{
	filter:brightness(125%) drop-shadow(0px 0px 3px rgba(255,255,255,1));
	-webkit-filter:brightness(125%) drop-shadow(0px 0px 3px rgba(255,255,255,1));
}

.goldenCookie,.seasonPopup
{
	cursor:pointer;
	position:absolute;
	z-index:10000000000;
	display:none;
	filter:drop-shadow(0px 4px 4px rgba(0,0,0,0.75));
	-webkit-filter:drop-shadow(0px 4px 4px rgba(0,0,0,0.75));
}

.goldenCookie
{
	width:96px;
	height:96px;
	background:url(img/goldCookie.png);
}

.seasonPopup
{
	width:256px;
	height:256px;
	background:url(img/goldCookie.png) center center no-repeat;
}
.goldenCookie:hover,.seasonPopup:hover
{
	filter:brightness(125%) drop-shadow(0px 3px 4px rgba(0,0,0,0.5));
	-webkit-filter:brightness(125%) drop-shadow(0px 3px 4px rgba(0,0,0,0.5));
}

.sparkles
{
	width:128px;
	height:128px;
	background:url(img/sparkles.jpg);
	position:absolute;
	z-index:10000000000;
	display:none;
	left:0px;
	top:0px;
	mix-blend-mode:screen;
	pointer-events:none;
}

#darken
{
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	background:rgba(0,0,0,0.5);
	z-index:100000000;
	display:none;
}

#promptAnchor
{
	position:absolute;
	left:50%;
	top:125px;
	z-index:1000000000;
	display:none;
	width:0px;
	height:0px;
}
#prompt
{
	position:relative;
	overflow:hidden;
	width:250px;
	padding:16px;
	margin-left:-18px;
	left:-125px;
	text-align:center;
	/*animation:pucker 0.2s;*/
}
#promptContent{margin-top:-8px;}
#promptContent h3{margin-bottom:6px;}
#prompt h3,.prompt h3,h4,.fancyText
{
	text-align:center;
	font-weight:bold;
	font-size:14px;
	position:relative;
	font-variant:small-caps;
	display:inline-block;
}
#prompt h3,.prompt h3,.fancyText
{
	color:#ece2b6;
	text-shadow:0px 1px 0px #733726,0px 2px 0px #875626,0px 2px 1px #000,0px 2px 3px #000;
	font-family:Georgia,serif;
	font-size:15px;
}
.large .fancyText{font-size:20px;}
#prompt h3:before,#prompt h3:after,.prompt h3:before,.prompt h3:after,.winged:before,.winged:after
{
	content:'';
	display:block;
	width:39px;
	height:23px;
	position:absolute;
	top:-4px;
}
#prompt h3:before,.prompt h3:before,.winged:before
{
	background:url(img/featherLeft.png) no-repeat;
	left:-39px;
}
#prompt h3:after,.prompt h3:after,.winged:after
{
	background:url(img/featherRight.png) no-repeat;
	right:-39px;
}
#prompt textarea,#prompt input
{
	width:100%;
	margin:0px;
	position:relative;
	left:-3px;
}

#prompt.widePrompt
{
	width:500px;
	left:-250px;
}

#prompt.legacyPrompt
{
	width:400px;
	left:-200px;
}

#notes
{
	position:absolute;
	/*left:0px;
	bottom:128px;*/
	left:50%;
	margin-left:-125px;
	bottom:0px;
	z-index:100000000;
}
#notes .remaining {padding:3px;opacity:0.75;text-shadow:0px 0px 2px #000,0px 1px 0px #000;}
.note
{
	position:relative;
	overflow-y:hidden;
	width:250px;
	padding-right:16px;
	padding-bottom:8px;
	left:-18px;
}
.note .icon
{
	float:left;
	margin-left:-4px;
}
.note h3
{
	font-weight:bold;
	font-size:14px;
	/*overflow-y:hidden;*/
}
.note h5
{
	opacity:0.6;
	font-size:11px;
}
.note.haspic h3
{
	margin-top:4px;
}
.note.hasdesc h3
{
	/*border-bottom:1px solid rgba(255,255,255,0.5);
	padding-bottom:2px;*/
}
.note.nodesc h3
{
	text-align:center;
}

p
{
	text-indent:6px;
	padding:2px 0px;
}


#sectionMiddle,#sectionRight,#cookies,#bakeryNameAnchor,#backgroundCanvas,.separatorRight,.separatorLeft
{transition:opacity 1s;}
.ascendIntro #sectionMiddle,.ascendIntro #sectionRight,.ascendIntro #cookies,.ascendIntro #bakeryNameAnchor,.ascendIntro #backgroundCanvas,.ascendIntro .separatorRight,.ascendIntro .separatorLeft,.reincarnating #sectionMiddle,.reincarnating #sectionRight,.reincarnating #cookies,.reincarnating #bakeryNameAnchor,.reincarnating #backgroundCanvas,.reincarnating .separatorRight,.reincarnating .separatorLeft
{opacity:0;}
#game.ascendIntro,#ascend
{
	/*background:url(img/starbg.jpg);
	background-size:1024px 1024px;*/
	/*background:url(img/starbg.jpg),url(img/starbg.jpg);
	background-size:1024px 1024px,2048px 2048px;
	background-blend-mode:hard-light;*/
}
#game.ascendIntro,#game.reincarnating{background:#000;}

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

#ascend
{
	display:none;
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	z-index:100000;
	cursor:move;
	/*transition:background-position 0.2s ease-out,background-size 0.1s ease-out;*/
}
#ascendBG
{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background:url(img/shadedBorders.png);
	background-size:100% 100%;
}
#ascendZoomable
{
	position:absolute;
	left:0px;
	top:0px;
}
.ascending #ascend
{display:block;}
#ascendContent
{
	position:absolute;
	left:0px;
	top:0px;
	/*transition:transform 0.1s ease-out;*/
}
#ascendHelp
{
	position:absolute;
	bottom:40px;
	width:300px;
	left:50%;
	margin-left:-150px;
	font-size:16px;
	text-align:center;
	z-index:100;
}
#ascendHelp a
{
	display:block;
	border-radius:40px;
	font-size:22px;
	opacity:0.5;
	cursor:pointer;
	text-decoration:none;
	background:#000;
	color:#fff;
	padding:8px 4px;
	width:150px;
	margin:5px auto;
}
#ascendHelp a:hover
{
	background:#fff;
	color:#000;
	opacity:0.75;
}
#ascendOverlay
{
	position:absolute;
	top:0px;
	left:50%;
	height:100%;
	z-index:100;
	text-align:center;
	filter:drop-shadow(0px 0px 4px #000);
	/*-webkit-filter:drop-shadow(0px 0px 4px #000);*/
	cursor:auto;
}

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

#ascendBox
{
	background:url(img/ascendBox.png);
	width:344px;
	height:162px;
	position:absolute;
	left:-172px;
	top:0px;
	text-align:center;
}
.ascendData
{
	width:60%;
	margin:2px auto;
	padding:6px;
}

#ascendInfo
{
	background:url(img/ascendInfo.png);
	width:308px;
	height:94px;
	position:absolute;
	left:-154px;
	bottom:0px;
	text-align:center;
}


/* todo! */
/* note: also change min game size ie. w/Math.max(800,w) to 400 and account for window resizing triggers */
/*
#sectionLeft
{width:100%;}
#sectionMiddle,#sectionRight,#leftBeam,#rightBeam
{display:none;}
#cookies,#bakeryName
{background:transparent;}
*/


.green,b.green{color:#73fa0c;}.green b{color:inherit;}/* #3f0 */
.red,b.red{color:#fc0d25;}.red b{color:inherit;}/* #f30 */
.gray,b.gray{color:#999;}.gray b{color:inherit;}

#versionNumber
{
	position:absolute;
	left:0px;
	bottom:0px;
	opacity:0.5;
	margin:8px;
	font-size:22px;
	z-index:1000000001;
}

#alert
{
	display:none;
	position:fixed;
	bottom:-16px;
	left:-16px;
	z-index:100000000000;
	padding:12px 12px 24px 24px;
	font-size:14px;
	background:#333;
	border-radius:12px;
	color:#fff;
	box-shadow:0px 0px 4px #000, 0px 0px 4px #000 inset;
	text-shadow:1px 1px 0px #000,0px 0px 2px #000;
	border:4px solid #fff;
	animation:rainbowCycleBG 15s infinite ease-in-out;
}
#alert b {font-weight:bold;}
#alert small {font-size:80%;}

a.smallBlackButton,a.smallOrangeButton,a.smallWhiteButton
{
	background:#222;
	box-shadow:0px 0px 0px 1px #000 inset,0px 2px 0px #444 inset,0px 2px 3px rgba(0,0,0,0.4);
	text-shadow:0px -1px 0px #444,0px 1px 0px #000;
	text-decoration:none;
	color:#fff;
	font-weight:bold;
	padding:4px 5px;
}
a.smallOrangeButton
{
	background:#f86754;
	box-shadow:0px 0px 0px 1px #c52921 inset,0px 2px 0px #ff966d inset,0px 2px 3px rgba(0,0,0,0.4);
	text-shadow:0px -1px 0px #ff966d,0px 1px 0px #c52921;
}
a.smallWhiteButton
{
	color:#222;
	background:#ccc;
	box-shadow:0px 0px 0px 1px #666 inset,0px 2px 0px #fff inset,0px 2px 3px rgba(0,0,0,0.4);
	text-shadow:0px -1px 0px #eee,0px 1px 0px #999;
}

#debug
{
	position:absolute;
	left:0px;
	top:0px;
	z-index:1000000000;
	display:none;
}
#devConsole
{
	position:relative;
	left:-2px;
	top:-2px;
	width:24px;
	height:32px;
	overflow:hidden;
	cursor:pointer;
	opacity:0.5;
	text-align:center;
	transition:opacity 0.4s;
}
#devConsole:hover
{
	width:192px;
	height:auto;
	min-width:192px;
	min-height:48px;
	overflow:auto;
	opacity:1;
}
#devConsole:hover>.icon
{
	display:none;
}
#devConsoleContent
{display:none;cursor:auto;}
#devConsole:hover>#devConsoleContent
{
	display:block;
}

#debugLog
{
	min-width:150px;
	background:rgba(0,0,0,0.5);
	background:linear-gradient(to right,rgba(0,0,0,0.5),rgba(0,0,0,0.5) 90%,rgba(0,0,0,0));
	padding:4px 4px 4px 8px;
	font-size:10px;
	text-shadow:0px 1px 0px #000;
	color:#ccc;
	pointer-events:none;
}

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


body{scrollbar-color:#bbb #111;}

/*show scrollbars in safari*/
::-webkit-scrollbar
{
	-webkit-appearance:none;
	width:17px;
}
::-webkit-scrollbar-track
{
	background-color:#111;
}
::-webkit-scrollbar-thumb
{
	background-color:#bbb;
	border:2px solid #111;
	box-shadow:0px 0px 0px 1px #eee inset;
}

/*=====================================================================================
SUPPORT
=======================================================================================*/
#support
{
	width:300px;
	text-align:center;
	margin:16px auto;
}
.supportComment
{
	font-size:10px;
	opacity:0.75;
	text-shadow:0px 0px 2px #000,0px 1px 0px #000;
	padding:8px 0px;
	text-align:center;
}
.supportPlaceholder {width:300px;height:250px;position:absolute;left:0px;top:0px;z-index:10;opacity:0.6;}
.supportPlaceholder>div {margin:20px auto;width:60%;text-align:center;background:#000;color:#fff;font-weight:bold;font-size:80%;border-radius:8px;padding:8px 4px;}
#donateBox
{
	z-index:10000000;
	position:absolute;
	right:12px;
	top:160px;
	padding:8px 4px;
	text-align:center;
	width:120px;
	display:none;
	background:rgba(128,128,255,0.25);
	box-shadow:0px 0px 4px 4px rgba(128,128,255,0.25);
	border-radius:8px;
	transition:box-shadow 0.25s,background 0.25s;
}
#donateBox:hover
{
	background:rgba(128,128,255,0.5);
	box-shadow:0px 0px 4px 4px rgba(128,128,255,0.5);
}
#donateBox.on {display:block;}

#donate
{
	display:inline-block;
}
#donateButton
{
	border:0px;
	display:inline-block;
	border-radius:4px;
	background:#fc6;
	background:linear-gradient(to bottom,#fff 0%,#fc6 45%,#f90 50%,#f66 100%);
	box-shadow:0px 0px 1px #fff inset,0px 0px 0px 1px #f66;
	text-shadow:0px -1px 0px #fc6,0px 1px 0px #f66;
	cursor:pointer;
	font-size:9px;
	font-weight:bold;
	opacity:0.9;
}
#donateButton:hover
{
	border:0px;
	box-shadow:0px 0px 4px #fff inset,0px 0px 0px 1px #f66;
	opacity:1;
}
.highlightHover:hover{filter:brightness(125%);opacity:1;}
.highlightHover:active{filter:brightness(85%);opacity:1;}

.ifNoAds
{
	display:none;
}
.noAds .ifNoAds{display:block;}
.noAds #support,.noAds #smallSupport,.noAds .supportComment{display:none;}


.srOnly
{
	/* screen-readers only; intended to replicate information in tooltips */
	position:absolute !important;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	overflow:hidden;
	color:transparent !important;
	text-shadow:none !important;
	border:none !important;
	outline:none !important;
	box-shadow:none !important;
	/*pointer-events:none;*/
	cursor:pointer;
	z-index:10000000;
	font-size:30px !important;
}

#cf_alert_div{z-index:1000000 !important;}

/*=====================================================================================
NEW AD DISPLAY
=======================================================================================*/
/*
#sectionRight
{
	right:160px;
}
#sectionMiddle
{
	right:478px;
}
#sectionAd
{
	height:100%;
	position:absolute;
	top:0px;
	right:0px;
	overflow-x:hidden;
	width:160px;
	background:url(img/darkNoise.jpg);
}
.separatorRight
{
	right:477px;
}
#sectionAd .supportPlaceholder {width:160px;}
*/

/*=====================================================================================
STOP THE FANCY
=======================================================================================*/
.noFancy *
{
	text-shadow:none!important;
	box-shadow:none!important;
}
.noFancy .price
{
	text-shadow:0px 0px 4px #000,0px 1px 0px #000!important;
}
.noFilters *
{
	filter:none!important;
	-webkit-filter:none!important;
}


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