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


html,body
{
	width:100%;
	height:100%;
	box-sizing:content-box;
	-moz-box-sizing:content-box;
}

body
{
	color:rgba(0,0,0,0.8);
	background:#fff url(whiteNoise.jpg);
	font-family:Tahoma,Arial,sans-serif;
	font-size:13px;
}

.button
{
	-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;
}

small
{
	font-size:80%;
}

a,a:visited
{
	text-decoration:underline;
	cursor:pointer;
	color:#333;
	text-shadow:0px 0px 3px rgba(0,0,0,0.2);
}
a:hover
{
	text-shadow:0px 0px 3px rgba(0,0,0,0.5);
	color:#000;
}
a:active
{
	opacity:0.8;
	background:transparent;
}

#wrapper
{
	overflow:hidden;
	height:100%;
}

#topBar
{
	background:#000 url(blackNoise.jpg);
	color:#ccc;
	font-size:10px;
	text-shadow:0px 1px 1px #000;
	border-bottom:2px solid #000;
	height:26px;
}
#topBar>div
{
	display:inline-block;
	box-shadow:0px 0px 1px rgba(255,255,255,0.4) inset,0px -2px 4px rgba(255,255,255,0.1) inset;
	padding:8px;
	margin-right:1px;
}
#topBar a.neat{color:#99f;}
#topBar a{color:#fff;text-shadow:0px 0px 3px rgba(255,255,255,0.5);}
#topBar a:hover{color:#fff;text-shadow:0px 0px 3px rgba(255,255,255,1);}
#topBar a:active{color:#fff;text-shadow:none;}

.button
{
	display:inline-block;
	cursor:pointer;
	margin:4px;
	border:1px solid #000;
	box-shadow:0px 1px 0px #fff inset,0px -1px 0px rgba(0,0,0,0.25) inset,0px 0px 6px rgba(255,255,255,0.2) inset,0px 0px 6px rgba(0,0,0,0.2);
	padding:4px 6px;
}
.button:hover
{
	background:rgba(255,255,255,0.5);
}
.button:active
{
	background:rgba(0,0,0,0.1);
	box-shadow:0px 0px 6px rgba(0,0,0,0.2) inset,0px 0px 0px 1px rgba(255,255,255,0.5),0px 0px 6px rgba(0,0,0,0.2);
}


.hidden,.abstract
{
	display:none;
}

#gameWrapper
{
	/*height:100%;
	width:100%;
	position:relative;*/
	position:absolute;
	left:0px;
	right:0px;
	bottom:0px;
	top:28px;
	/*box-shadow:0px 0px 16px #000 inset;*/
	background:url(shadedBorders.png);
	background-position:center center;
	background-origin:padding-box;
	background-size:100% 100%;
}
#game
{
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	overflow:hidden;
	text-shadow:0px 1px 0px rgba(255,255,255,0.2),0px 0px 2px rgba(0,0,0,0.2);
}

.block
{
	float:left;
	position:relative;
}

.box
{
	border:3px double rgba(0,0,0,0.5);
	box-shadow:0px 0px 0px 1px rgba(255,255,255,0.5) inset,0px 0px 6px rgba(255,255,255,0.2) inset,0px 0px 6px rgba(0,0,0,0.2);
	margin:2px 4px;
	padding:4px 6px;
	min-width:200px;
	float:left;
	overflow:hidden;
}

.thing.disabled
{
	opacity:0.75;
}
.cost.disabled
{
	color:#900;
}
.upgrade.bought
{
	background:rgba(255,255,255,0.2);
}

.haspic.clickable>div{display:none;}
.haspic.clickable
{
	border:none;
	padding:0px;
	background:transparent;
	box-shadow:none;
	/*
	-webkit-transition: opacity 0.05s ease-out,-webkit-transform 0.05s ease-out;
	-moz-transition: opacity 0.05s ease-out,-moz-transform 0.05s ease-out;
	-ms-transition: opacity 0.05s ease-out,-ms-transform 0.05s ease-out;
	-o-transition: opacity 0.05s ease-out,-o-transform 0.05s ease-out;
	transition: opacity 0.05s ease-out,transform 0.05s ease-out;
	*/
}
.haspic.clickable:hover
{
	background:transparent;
	box-shadow:none;
	/*
	-webkit-transform:scale(1.05,1.05);opacity:0.9;
	-moz-transform:scale(1.05,1.05);opacity:0.9;
	-ms-transform:scale(1.05,1.05);opacity:0.9;
	-o-transform:scale(1.05,1.05);opacity:0.9;
	transform:scale(1.05,1.05);opacity:0.9;
	*/
}
.haspic.clickable:active
{
	background:transparent;
	box-shadow:none;
	/*
	-webkit-transform:scale(0.98,0.98);opacity:1;
	-moz-transform:scale(0.98,0.98);opacity:1;
	-ms-transform:scale(0.98,0.98);opacity:1;
	-o-transform:scale(0.98,0.98);opacity:1;
	transform:scale(0.98,0.98);opacity:1;
	*/
}
.building
{
	width:100%;
	position:relative;
	left:-8px;
	margin:-1px;
}
.building>div
{
	float:left;
}
.building>img
{
	float:right;
}

#upgrades
{
	min-height:64px;
	height:64px;
}
#upgrades:hover
{
	height:auto;
}
#log
{
	opacity:0.75;
	font-size:80%;
	position:absolute;
	left:0px;
	bottom:0px;
	overflow:hidden;
	width:100px;
	height:30px;
}
#log:hover
{
	width:auto;
	height:auto;
}

.main
{
	height:100%;
	position:absolute;
	top:0px;
	right:300px;
	left:0px;
	overflow-x:hidden;
	overflow-y:hidden;
}
.store
{
	width:300px;
	height:100%;
	position:absolute;
	top:0px;
	right:0px;
	overflow-x:hidden;
	overflow-y:scroll;
	background:rgba(0,0,0,0.1);
}
.stats
{
	position:absolute;
	left:0px;
	bottom:100px;
	overflow:hidden;
	width:100px;
	height:30px;
}
.stats:hover
{
	width:auto;
	height:auto;
}

#title,.title,.label
{
	font-weight:bold;
	/*font-family:Georgia;*/
}
#title
{
	font-size:20px;
	color:#fff;
	text-shadow:0px 2px 8px #000;
}
#title>.gameAuthor:before{content:' by ';}


#tooltipAnchor
{
	position:absolute;
	z-index:1000000000;
	display:none;
}
#tooltip
{
	position:absolute;
	background:#000 url(blackNoise.jpg);
	padding:4px 8px;
	margin:4px;
	border:3px ridge #999;
	border-color:#ccc #aaa #888 #aaa;
	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;
	font-size:12px;
	line-height:125%;
	pointer-events:none;
}
#tooltip b,.popup b
{
	color:#fff;
	font-weight:bold;
}
#tooltip i,.popup i
{
	font-style:italic;
}
#tooltip .name
{
	font-weight:bold;
	font-size:110%;
	color:#fff;
	margin:4px 0px;
}

#popups
{
	position:absolute;
	left:0px;
	bottom:0px;
	z-index:100000000;
}
.popup
{
	position:relative;
	left:-3px;
	background:#000 url(blackNoise.jpg);
	padding:4px 8px;
	padding-top:8px;
	margin:2px;
	margin-left:0px;
	border:3px ridge #999;
	border-color:#ccc #aaa #888 #aaa;
	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;
	font-size:12px;
	line-height:125%;
	width:250px;
}
.popup .close
{
	position:absolute;
	top:-5px;
	right:0px;
	padding:4px;
	font-weight:bold;
	font-size:16px;
	text-shadow:0px 0px 2px #000,0px 0px 1px #000;
	cursor:pointer;
	font-family:Comic Sans MS;
}
.popup .close:hover
{
	color:#fff;
	text-shadow:0px 0px 2px #fff;
}

#particles
{
	position:absolute;
	left:0px;
	top:0px;
}
.particle
{
	position:absolute;
	left:0px;
	top:0px;
	margin-top:0px;
	margin-left:0px;
	z-index:10000;
	width:150px;
	text-align:center;
	font-size:14px;
	font-weight:bold;
	pointer-events:none;
}

#clickable-makeburger
{
	position:absolute;
	animation:waddle 1s ease-in-out 0s infinite alternate,bob 0.5s ease-in-out 0.25s infinite alternate;
	left:0px;
	top:0px;
	margin-left:50%;
	margin-top:10%;
}
#clickable-makeburger:before,#clickable-makeburger:after
{
	z-index:-10;
	position:absolute;
	left:-25%;
	top:-25%;
	content:'';
	width:150%;
	height:150%;
	background:url(http://orteil.dashnet.org/cookieclicker/img/shine.png) no-repeat;
	background-size:100%;
	opacity:0.5;
	display:block;
}
#clickable-makeburger:hover:before,#clickable-makeburger:hover:after
{
	opacity:0.75;
}
#clickable-makeburger:before
{
	animation:spin 10s linear 0s infinite;
}
#clickable-makeburger:after
{
	transform:rotate(180deg);
	animation:reversespin 10s linear 0s infinite;
}

/* animations */

@keyframes waddle
{
	from {transform:rotate(-5deg);}
	to {transform:rotate(5deg);}
}
@keyframes bob
{
	from {top:-2px;}
	to {top:2px;}
}
@keyframes spin
{
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}
@keyframes reversespin
{
	from {transform:rotate(360deg);}
	to {transform:rotate(0deg);}
}

@keyframes rise
{
	from {top:0px;opacity:1;}
	to {top:-50px;opacity:0;}
}


/* speed things up by stripping off fancy stuff */
#body.nofancy
{
	text-shadow:none !important;
	box-shadow:none !important;
	border-radius:0;
	animation:none;
}