html, body, iframe, #host {
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
}

/*main*/
#game
{
	text-shadow:1px 1px 0px rgba(0,0,0,0.5);
	background:#555;
	background-size:cover;
	background-position:center;
	color:#fff;
	overflow:hidden;
	font-size:12px;
	line-height:125%;
	display:none;
	font-family:'Roboto Slab',serif;
}
/*#game.filtersOn{filter:url(#bloom);}*/
#game.on{display:block;}
#game.tilingBackground{background-size:auto;}

a{color:#09f;font-weight:bold;}
a:hover{color:#fff;}

#errorWrap
{
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
	background:#000;
}
#noGameData,#error
{
	background:#eee;
	border-radius:8px;
	padding:16px;
	font-size:20px;
	text-align:center;
	color:rgba(0,0,0,0.9);
	text-shadow:0px 1px 0px #fff;
	line-height:125%;
	max-width:640px;
	box-shadow:0px 0px 8px 4px #fff inset,0px 0px 24px rgba(255,255,255,0.5);
}
#error
{
}
.error
{
	font-weight:bold;
	font-size:14px;
	line-height:100%;
	margin:8px 0px;
	color:rgba(255,0,0,0.9);
	text-align:left;
}

#content
{
	width:100%;
	height:100%;
}

#meta-buttons
{
	position:absolute;
	right:0px;
	bottom:0px;
	z-index:100000000000000;
	clear:both;
}

.meta-button
{
	width:32px;
	height:32px;
	margin:8px;
	float:right;
	cursor:pointer;
	transform:scale(0.9);
	opacity:0.75;
	transition:transform 0.15s,opacity 0.15s;
	position:relative;
	background:rgba(0,0,0,0.5);
	box-shadow:0px 0px 4px 2px rgba(0,0,0,0.5);
	border-radius:24px;
}
.meta-button:after
{
	content:'';
	display:block;
	position:absolute;
	width:48px;
	height:48px;
	left:-8px;
	top:-8px;
}
.meta-button:hover
{
	transform:scale(1);
	opacity:1;
}
#meta-button-settings:after{background:url(img/wrench.png);}
#meta-button-info:after{background:url(img/info.png);}

.box
{
	/*box-shadow:0px 0px 8px rgba(255,255,255,0.2),0px 0px 8px rgba(0,0,0,0.2) inset;*/
	padding:4px 8px;
	position:relative;
}

.box-header,.box-footer
{
	padding:8px;
}
.box-bit-content
{
	pointer-events:none;
}

.thing
{
	position:relative;
	display:inline-block;
	padding:0px;
	margin:2px;
	cursor:pointer;
	vertical-align:middle;
	transition:opacity 0.5s;
}
#game .thing.hidden
{
	display:none;
}
.thing-text,.thing-costs
{
	display:inline-block;
	pointer-events:none;
	padding:8px;
	vertical-align:middle;
}
.noText .thing-text{display:none;}
.thing-icon
{
	width:48px;
	height:48px;
	display:inline-block;
	margin:0px;
	pointer-events:none;
	vertical-align:middle;
}
.noIcon .thing-icon{display:none;}


#shinies
{
	position:absolute;
	left:0px;
	top:0px;
	z-index:100000;
}
.shiny
{
	position:absolute;
	left:0px;
	top:0px;
	opacity:0;
	transform:translate(0px,0px);
	transition:none;
	text-align:center;
}
.shiny.noText,.shiny.noText:hover
{
	background:transparent;
	box-shadow:none;
	border:none;
}
#game.filtersOn .thing.shiny,#game.filtersOn .shiny.noText .thing-icon.shiny-icon{filter:none;}
.noClick
{
	pointer-events:none;
}


#particles
{
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	overflow:hidden;
	pointer-events:none;
	z-index:1000000;
}
.particle
{
	width:48px;
	height:48px;
	display:none;
	position:absolute;
	transform:translate(0px,0px);
	padding-top:42px;
	text-shadow:1px 0px 0px #000,0px 1px 0px #000,-1px 0px 0px #000,0px -1px 0px #000;
	color:#fff;
	font-weight:bold;
	will-change:transform,opacity;
}
.particleText
{
	white-space:nowrap;
	line-height:100%;
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	text-align:center;
}


#darken
{
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	z-index:100000000;
	pointer-events:none;
	background:#000;
	opacity:0;
	transition:opacity 0.15s;
}
#darken.on
{
	opacity:0.5;
	pointer-events:auto;
}

#popups
{
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	z-index:10000000;
	pointer-events:none;
	overflow:hidden;
}

.popup
{
	position:absolute;
	pointer-events:auto;
	transition:opacity 0.15s,left 0.15s,top 0.15s;
	opacity:0;
}
.closeButton
{
	position:absolute;
	right:-6px;
	top:-6px;
	border-radius:24px;
	padding:2px 7px 4px 7px;
	font-size:12px;
	font-weight:bold;
	background:rgba(0,0,0,0.8);
	box-shadow:2px 2px 4px rgba(0,0,0,0.5);
	cursor:pointer;
	z-index:1000000000000;
}
.closeButton:hover
{
	background:rgba(128,128,128,0.8);
}

.popup,#tooltip,.toast
{
	background:rgba(0,0,0,0.9);
	text-shadow:1px 1px 0px rgba(0,0,0,0.5);
	color:#fff;
	/*background:url(lib/img/darkNoise.jpg);*/
	border-radius:3px;
	box-shadow:0px 0px 0px 1px #000,0px 0px 0px 2px rgba(255,255,255,0.5),0px 0px 15px 1px rgba(255,255,255,0.15) inset,4px 4px 2px rgba(0,0,0,0.25),4px 4px 20px rgba(0,0,0,0.5);
	box-sizing:border-box;
	padding:8px 8px;
}

.mainPopup
{
	z-index:1000000000;
	max-width:90%;
	max-height:90%;
	display:flex;
	flex-direction:column;
}
.mainPopup>div
{
	flex:1;
}

#toasts
{
	position:absolute;
	left:0px;
	right:0px;
	bottom:0px;
	z-index:100000000;
	pointer-events:none;
}
.toast
{
	width:320px;
	max-width:80%;
	position:relative;
	pointer-events:auto;
	margin:5px auto;
}
.center{text-align:center;}

.listing
{
	padding:4px 0px;
	color:rgba(255,255,255,0.85);
}
.listing.b,.listing b,.desc b{font-weight:bold;color:#fff;}
q
{
	display:block;
	font-style:italic;
	text-align:right;
	font-family:Georgia;
	color:rgba(255,255,255,0.65);
	padding:4px 0px;
}

.systemButton
{
	cursor:pointer;
	display:inline-block;
	font-weight:bold;
	background:#333;
	box-shadow:0px 0px 0px 1px #666,0px 0px 0px 2px #000,2px 2px 2px 2px rgba(0,0,0,0.5);
	padding:4px 6px;
	margin:2px;
	position:relative;
}
.systemButton:hover
{
	background:#555;
	box-shadow:0px 0px 0px 1px #888,0px 0px 0px 2px #000,2px 2px 2px 2px rgba(0,0,0,0.5);
}
.systemButton.red
{
	background:#300;
	box-shadow:0px 0px 0px 1px #600,0px 0px 0px 2px #000,2px 2px 2px 2px rgba(0,0,0,0.5);
}
.systemButton.red:hover
{
	background:#500;
	box-shadow:0px 0px 0px 1px #800,0px 0px 0px 2px #000,2px 2px 2px 2px rgba(0,0,0,0.5);
}

.tickbox,.tickbox:hover
{
	background:initial;
	box-shadow:0px 0px 0px 1px rgba(255,255,255,0.15);
}
.tickbox
{
	color:rgba(255,255,255,0.75);
	font-size:10px;
	border-radius:2px;
	margin:0px;
	margin-right:4px;
	padding:0px 4px;
}
.tickbox:hover
{
	color:rgba(255,255,255,1);
}
.tickbox:before
{
	content:'';
	display:inline-block;
	width:9px;
	height:9px;
	background:#333;
	box-shadow:0px 0px 0px 1px rgba(255,255,255,0.25) inset,2px 2px 6px 1px rgba(0,0,0,0.5) inset,0px 0px 0px 1px #000,2px 2px 2px 1px rgba(0,0,0,0.5);
	vertical-align:middle;
	margin-right:4px;
	margin-top:-2px;
}
.tickbox.on:before
{
	background:#6ff;
	box-shadow:0px 0px 0px 1px rgba(255,255,255,0.25) inset,1px 1px 0px rgba(255,255,255,1) inset,2px 2px 6px 1px rgba(0,0,255,0.5) inset,0px 0px 16px 1px rgba(0,128,255,0.75),0px 0px 0px 1px #000,2px 2px 2px 1px rgba(0,0,0,0.5);
}

#tooltip
{
	position:absolute;
	left:0px;
	top:0px;
	z-index:100000000;
	pointer-events:none;
	display:none;
	
	will-change:width,height,top,left,opacity;
	
	width:320px;
}
.tooltipPoint
{
	position:absolute;
	width:0;
	height:0;
	display:none;
	will-change:top,left;
}
.tooltipPoint:before
{
	content:'';
	position:absolute;
	z-index:-1;
}
#tooltipPU
{
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-bottom:6px solid #000;
}
#tooltipPU:before
{
	top:-1px;left:-6px;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-bottom:6px solid #fff;
}
#tooltipPD
{
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-top:6px solid #000;
}
#tooltipPD:before
{
	bottom:-1px;left:-6px;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-top:6px solid #fff;
}
#tooltipPL
{
	border-top:6px solid transparent;
	border-bottom:6px solid transparent;
	border-right:6px solid #000;
}
#tooltipPL:before
{
	left:-1px;top:-6px;
	border-top:6px solid transparent;
	border-bottom:6px solid transparent;
	border-right:6px solid #fff;
}
#tooltipPR
{
	border-top:6px solid transparent;
	border-bottom:6px solid transparent;
	border-left:6px solid #000;
}
#tooltipPR:before
{
	right:-1px;top:-6px;
	border-top:6px solid transparent;
	border-bottom:6px solid transparent;
	border-left:6px solid #fff;
}

#tooltip .thing-icon,.toast .thing-icon
{
	float:left;
	margin:-16px 2px 2px -16px;
}
#tooltip .costs
{
	float:right;
}
#tooltip .cost
{
	font-weight:bold;
}

.subtitle
{
	opacity:0.65;
	font-size:10px;
	line-height:100%;
}
.title,.sectionTitle
{
	font-size:16px;
	font-weight:bold;
}
.sectionTitle:before,.sectionTitle:after
{
	content:'';
	margin:4px 0px;
	margin-left:-4px;
	display:block;
	width:100%;
	height:1px;
	background:linear-gradient(to right,rgba(255,255,255,0.25) 0%,rgba(255,255,255,0) 50%);
}
.headerTitle,.footerTitle
{
	font-size:18px;
	font-weight:bold;
	text-align:center;
}
.footerTitle{font-size:12px;}
.headerTitle:after,.footerTitle:before
{
	content:'';
	margin:4px 0px;
	display:block;
	width:100%;
	height:1px;
	background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0) 100%);
}
#tooltip .desc
{
	margin-top:8px;
	color:rgba(255,255,2355,0.8);
}
.desc>div
{
	text-indent:8px;
	margin-top:2px;
	margin-bottom:2px;
}

.hoverShine
{
	cursor:pointer;
	color:rgba(255,255,255,0.75);
}
.hoverShine:hover
{
	color:#fff;
}

.cost.hasEnough{color:#3f0;}
.cost.notEnough{color:#f30;}
.costTimeRemaining{font-size:75%;}

.verticalList
{
	float:left;
}
.verticalList .thing
{
	display:block;
}

#game.filtersOn .shadowed
{
	filter:drop-shadow(3px 3px 1px rgba(0,0,0,0.5));
}

.thing.noBackground,.thing.noBackground:hover,.thing.noBackground:active
{
	background:transparent;
	box-shadow:none;
	border:none;
}


.thing.bigButton
{
	position:absolute;
	left:50%;
	top:50%;
	width:256px;
	height:256px;
	margin-left:-128px;
	margin-top:-128px;
	background-color:transparent;
	box-shadow:none;
	border:none;
}
.thing.bigButton:hover{background:transparent;}

.thing.bigButton .thing-icon{transform:scale(1);transition:transform 0.05s ease-out;}
.thing.bigButton:hover .thing-icon{transform:scale(1.02);}
.thing.bigButton:active .thing-icon{transform:scale(0.98);}

.thing.bigButton .thing-icon
{
	position:absolute;
	margin:0px;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}

#box-log
{
	overflow-y:hidden;
	display:flex;
	flex-direction:column;
}
#log
{
	height:100%;
	overflow-x:hidden;
	overflow-y:scroll;
}
#logOuter
{
	display:table;
	width:100%;
	height:100%;
	pointer-events:auto;
}
#logInner
{
	display:table-cell;
	vertical-align:bottom;
}
.message
{
	display:block;
	width:100%;
	position:relative;
}
.messageContent
{
	padding:4px 8px;
	text-align:left;
	line-height:120%;
	overflow:hidden;
	position:relative;
}


/*scrollbars for some browsers*/
::-webkit-scrollbar
{
	-webkit-appearance:none;
	width:17px;
}
::-webkit-scrollbar-track
{
	background:#333;
	box-shadow:
			0px 0px 0px 1px #111 inset,
			0px 0px 0px 3px #444 inset,
			1px 1px 2px 3px #222 inset
	;
}
::-webkit-scrollbar-thumb
{
	background:#ccc;
	box-shadow:
			0px 0px 0px 1px #333 inset,
			0px 0px 0px 3px #999 inset,
			1px 1px 1px 3px #fff inset
	;
}
::-webkit-scrollbar-thumb:hover
{background:#ddd;}
::-webkit-scrollbar-thumb:active
{background:#bbb;}


/*animations*/
.plop
{
	animation:plop 0.2s;
}
@keyframes plop
{
	0% {transform:scale(1.1,0.8);}
	50% {transform:scale(0.9,1.1);}
	100% {transform:scale(1,1);}
}

.wobble
{
	animation:wobble 0.25s;
}
@keyframes wobble
{
	0% {transform:scale(1.1);}
	20% {transform:scale(0.95);}
	40% {transform:scale(1.05);}
	60% {transform:scale(0.975);}
	80% {transform:scale(1.025);}
	100% {transform:scale(1);}
}

.bounce
{
	transform-origin:50% 100%;
	animation-name:bounce;animation-iteration-count:infinite;animation-duration:1.2s;
}
@keyframes bounce
{
	0% 		{transform:scale(1,1);}
	10% 	{transform:scale(0.99,1.01);}
	20% 	{transform:scale(1.05,0.95);}
	25% 	{transform:scale(0.9,1.05) translate(0px,-5px);}
	30% 	{transform:scale(0.95,1.02) translate(0px,-15px);}
	60% 	{transform:scale(1,1) translate(0px,-12px);}
	70% 	{transform:scale(1.2,0.9);}
	80% 	{transform:scale(0.98,1.02);}
	90% 	{transform:scale(1,1);}
	100% 	{transform:scale(1,1);}
}

.glow
{
	animation:glow 0.5s;
}
@keyframes glow
{
	0% {background-color:#fff;box-shadow:0px 0px 4px 2px #fff;}
	100% {}
}

.fadeIn
{
	animation:fadeIn 1s;
}
.fadeInQuick
{
	animation:fadeIn 0.15s;
}
@keyframes fadeIn
{
	0% {opacity:0;}
	100% {opacity:1;}
}

.fadeOut
{
	animation:fadeOut 1s;
}
.fadeOutQuick
{
	animation:fadeOut 0.15s;
}
@keyframes fadeOut
{
	0% {opacity:1;}
	100% {opacity:0;}
}

.stretchIn
{
	animation:stretchIn 0.1s;
}
@keyframes stretchIn
{
	0% {transform:scale(0,1);opacity:0.5;}
	100% {transform:scale(1,1);opacity:1;}
}
.stretchInV
{
	animation:stretchInV 0.1s;
}
@keyframes stretchInV
{
	0% {transform:scale(1,0);opacity:0.5;}
	100% {transform:scale(1,1);opacity:1;}
}

.particlePop
{
	animation:particlePop 1s ease-out;
	opacity:0;
}
@keyframes particlePop
{
	0% {transform:translate(0px,0px);opacity:1;}
	50% {transform:translate(0px,-32px);opacity:1;}
	100% {transform:translate(0px,-32px);opacity:0;}
}

.popInVertical
{
	animation:popInVertical 0.2s;
}
@keyframes popInVertical
{
	0% {transform:scale(1,0);opacity:0;}
	100% {transform:scale(1,1);opacity:1;}
}

.popOutVertical
{
	transform:scale(1,0);
	opacity:0;
	animation:popOutVertical 0.2s;
}
@keyframes popOutVertical
{
	0% {transform:scale(1,1);opacity:1;}
	100% {transform:scale(1,0);opacity:0;}
}

.hasFlares{z-index:0;}
.hasFlares:before,.hasFlares:after
{
	content:'';
	width:150%;
	height:150%;
	position:absolute;
	left:-25%;
	top:-25%;
	background-size:100%;
	display:block;
	z-index:-1;
	animation:spinFade 3s linear infinite;
	pointer-events:none;
}
.hasFlares:after
{
	animation:spinFade2 3s linear infinite;
}

@keyframes spinFade
{
	0% {transform:rotate(0deg) scale(1.5);opacity:0;}
	50% {transform:rotate(45deg) scale(1);opacity:0.75;}
	100% {transform:rotate(90deg) scale(0.5);opacity:0;}
}
@keyframes spinFade2
{
	0% {transform:rotate(225deg) scale(1);opacity:0.75;}
	50% {transform:rotate(270deg) scale(0.5);opacity:0;}
	50.1% {transform:rotate(180deg) scale(1.5);opacity:0;}
	100% {transform:rotate(225deg) scale(1);opacity:0.75;}
}


@media all and (max-width:640px)
{
	#content{}
}