/* 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;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
/* 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%;
}
.button,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;
}
body
{	
	color:#000;
	background:#999;
	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;
}


#topBar
{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:32px;
	background:#000;
	box-shadow:0px -2px 4px #666 inset;
	color:#ccc;
}
#topBar div
{
	margin:6px 8px;
}
#topBar a
{color:#fff;}


#game
{
	position:absolute;
	left:0px;
	top:32px;
	right:0px;
	bottom:0px;
	overflow:hidden;
	font-family:'MS PGothic',Verdana,Arial,sans-serif;
	/*font-family:Arial,sans-serif;*/
	font-size:12px;
	color:#fff;
	background:#000;
	text-shadow:1px 1px 0px rgba(0,0,0,0.5);
}

.fancy
{
	font-size:14px;
}
.fancy,h3
{
	font-family:Garamond,Georgia;
	font-weight:bold;
}
.engraved
{
	color:#210300;
	text-shadow:0px 0px 2px rgba(255,255,255,0.25),0px 1px 0px rgba(255,255,255,0.25);
}
h3
{
	font-size:20px;
	text-align:center;
	color:#fff;
	font-variant:small-caps;
}
.framed h3,.framed .fancy {text-shadow:0px 0px 8px #fff;}
.caption
{
	font-size:9px;
	text-align:center;
	color:rgba(255,255,255,0.5);
}
.line
{
	width:50%;
	border-bottom:1px solid rgba(255,255,255,0.2);
	margin:auto;
	padding-bottom:4px;
	margin-bottom:4px;
}
.framed
{
	background:#111;
	padding:16px;
	box-shadow:0px 1px 6px #000 inset,0px 0px 0px 2px #b8b283,0px 0px 0px 3px #7e6b43,0px 0px 0px 4px #b8b283,0px 2px 6px 5px #000;
	border-radius:6px;
	font-family:Verdana,sans-serif;
	font-size:10px;
}
.framed .close
{
	position:absolute;
	top:-8px;
	right:0px;
}
.framed.left .close
{
	right:auto;
	left:0px;
}
.close
{
	font-weight:bold;
	font-size:24px;
	text-shadow:0px 0px 2px #000,0px 0px 1px #000;
	cursor:pointer;
	font-family:Comic Sans MS;
	padding:6px;
}
.close:hover
{
	color:#fff;
	text-shadow:0px 0px 6px #fff;
}

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

.section
{
	position:absolute;
	overflow:hidden;
	top:0px;
	bottom:0px;
}
/*
#middle:before,#middle:after
{
	content:'';
	background:#ccc;
	width:4px;
	position:absolute;
	top:0px;
	bottom:0px;
	box-shadow:1px 0px 0px #fff inset,-1px 0px 0px #999 inset,0px 0px 0px 1px #000;
	z-index:100;
}
#middle:before
{
	left:1px;
}
#middle:after
{
	right:1px;
}
*/

#top
{
	top:0px;
	left:0px;
	right:160px;
	height:64px;
	margin:0px;
	padding:0px;
	position:absolute;
	background:url(bgbar.jpg) repeat-x;
	background-position:left bottom;
}

#left
{
	left:0px;
	width:35%;
	top:64px;
	padding:16px;
	background:url(shadedborders.png),url(bgdarker.jpg);
	background-size:100% 100%,auto;
}
#middle
{
	left:35%;
	right:160px;
	top:64px;
	background:url(shadedborders.png),url(bgdark.jpg);
	background-size:100% 100%,auto;
}
#support
{
	right:0px;
	width:160px;
	background:url(shadedborders.png),url(bgdarker.jpg);
	background-size:100% 100%,auto;
}


.res.hidden,.block.hidden,.button.hidden{display:none;opacity:0;}
.block
{
	display:inline-block;
	text-align:center;
	position:relative;
	padding:8px 12px;
	margin:2px;
	background:#522;
	background:url(shadedborders.png),url(bglight.jpg) fixed;
	background-size:100% 100%,auto;
	box-shadow:1px 1px 2px 1px rgba(0,0,0,0.5);
	border:3px double #b8b283;
	border-top-color:#fff;
	border-left-color:#fff;
}
.button
{
	cursor:pointer;
	padding:4px;
	position:relative;
	text-align:center;
	color:#000;
	display:inline-block;
	
	background:url(shadedborders.png),url(bglight.jpg) fixed;
	background-size:100% 100%,auto;
	box-shadow:1px 1px 0px #fff inset,-1px -1px 0px #b8b283 inset,0px 0px 0px 1px #000,1px 1px 2px 1px rgba(0,0,0,0.5);
	text-shadow:1px 1px 0px #b8b283;
}
.button.off,.button.disabled
{
	opacity:0.5;
}
.tech.disabled{display:none;}
.button:hover
{
	background:url(bglighter.jpg) fixed;
	background-size:auto;
	text-shadow:1px 1px 2px #fff;
	opacity:1;
}

.owned
{
	background:url(shadedborders.png),url(bglighter.jpg) fixed;
	background-size:100% 100%,auto;
}

#date
{
	padding:4px 8px;
}


.icon
{
	background:url(icons.png) no-repeat;
	background-position:0px 0px;
	width:48px;
	height:48px;
}
.icon.inline
{
/*
	width:24px;
	height:24px;
	background-size:50% 50%;*/
	margin:-16px -12px;
	transform:scale(0.5);
	display:inline-block;
	vertical-align:middle;
}
.icon.unit
{
	background:url(units.png) no-repeat;
	background-position:0px 0px;
	width:96px;
	height:96px;
}
.icon.unit.inline
{
	margin:-40px -36px;
	transform:scale(0.25);
}

.tooltipDesc .icon.inline
{
	margin:-30px -16px;
	transform:scale(0.35) translate(0px,-2px);
	display:inline-block;
	vertical-align:middle;
}

#resources
{
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:30%;
	padding:8px;
	margin-bottom:5px;
	transition:opacity 0.5s linear;
	overflow-x:hidden;
	overflow-y:scroll;
}
#mainResources
{
	padding-bottom:16px;
	border-bottom:1px solid rgba(255,255,255,0.25);
	margin-bottom:16px;
}
.resourceClass{text-align:center;padding-top:8px;padding-bottom:8px;}
.res
{
	display:inline-block;
	text-align:center;
	position:relative;
	width:48px;
	height:48px;
	z-index:10;
	font-size:11px;
	cursor:pointer;
	background:url(shineblack.png);
	background-repeat:no-repeat;
	background-size:100%;
	transition:opacity 0.5s linear;
}
.res.off{opacity:0.25;}
.res .name
{
	display:none;
}
.res .icon
{
	position:absolute;
	left:0px;
	top:0px;
	z-index:10;
}
.res .amount
{
	text-shadow:0px -1px 0px #000;
	position:absolute;
	left:0px;
	right:0px;
	bottom:-4px;
	text-align:center;
	font-size:8px;
	font-family:Verdana;
}


.unit
{
	width:192px;
	height:96px;
	padding-left:96px;
}
.unit .icon
{
	position:absolute;
	left:0px;
	top:0px;
	background:url(units.png) no-repeat;
	background-position:0px 0px;
	width:96px;
	height:96px;
	z-index:10;
}

#log
{
	position:absolute;
	left:0px;
	right:0px;
	bottom:0px;
	height:30%;
	transition:height 500ms cubic-bezier(.6,1.3,.4,1);
	background:url(shadedborders.png),url(bglight.jpg) fixed;
	background-size:100% 100%,auto;
}
#left.expandLog #log{height:100%;}
#left.expandLog #logContent{padding-top:20px;}
#left.expandLog #resources{opacity:0;}
#logContent
{
	overflow-x:hidden;
	overflow-y:scroll;
	padding:4px 0px;
	height:100%;
}
#logContent .logItem
{
	margin:2px 0px;
	position:relative;
}
.logTimestamp
{
	position:absolute;
	left:0px;
	top:0px;
	height:100%;
	padding:4px;
	width:36px;
	text-align:right;
	text-decoration:underline;
	font-size:10px;
	background:rgba(0,0,0,0.3);
}
.logText
{
	background:rgba(0,0,0,0.3);
	margin-left:38px;
	padding:4px;
}
.logText.important
{
	background:rgba(255,255,255,0.3);
	color:#000;
	text-shadow:1px 1px 0px rgba(255,255,255,0.5);
	box-shadow:0px 1px 0px #fff inset;
}
.logText.bad
{
	background:rgba(128,0,0,0.3);
	box-shadow:0px 1px 0px #f00 inset;
}
.logText.good
{
	background:rgba(0,64,128,0.3);
	box-shadow:0px 1px 0px #09f inset;
}
#logExpand
{
	width:96px;
	height:16px;
	position:absolute;
	top:-22px;
	left:0px;
	width:100%;
	cursor:pointer;
}
#left.expandLog #logExpand{top:0px;}
#logExpand:before{content:'▲';display:block;color:#fff;width:100%;margin-top:4px;text-align:center;}
#left.expandLog #logExpand:before{content:'▼';}

#log:before
{
	content:'';
	background:#ccc;
	height:4px;
	position:absolute;
	left:0px;
	right:0px;
	top:-5px;
	box-shadow:0px 1px 0px #fff inset,0px -1px 0px #999 inset,0px 0px 0px 1px #000;
	z-index:100;
}

/*.amount
{
	font-weight:bold;
	background:#fff;
	box-shadow:1px 1px 0px #999 inset;
	padding:2px 4px;
	font-family:Courier;
}
.amount.increasing{color:#0c3;}
.amount.decreasing{color:#c30;}
*/
.amount
{
	font-weight:bold;
	font-size:10px;
	position:absolute;
	right:3px;
	bottom:1px;
	pointer-events:none;
	z-index:100;
	transition: color 0.2s linear;
}
.amount.increasing{color:#6f9;}
.amount.decreasing{color:#f93;}


#tabs
{
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	height:28px;
}
#tabs-left
{
	position:absolute;
	left:0px;
	width:100%;
	padding-right:155px;
	z-index:10;
}
#tabs-right
{
	position:absolute;
	right:0px;
	width:155px;
	text-align:right;
	z-index:20;
}
#menus
{
	position:absolute;
	left:0px;
	right:0px;
	top:32px;
	bottom:0px;
	overflow-y:auto;
}
.tab
{
	text-align:center;
	display:inline-block;
	positon:relative;
	border-bottom-left-radius:8px;
	border-bottom-right-radius:8px;
	margin:0px;
	padding:6px 10px;
	font-weight:bold;
}
.menu
{
	padding:16px;
}
.menu.off
{
	display:none;
}


#units,#buildings
{
	position:absolute;
}
#units
{
	left:0px;
	right:50%;
}
#buildings
{
	right:0px;
	left:50%;
}

#unitsInfo,#buildingsInfo
{
	position:absolute;
	top:0px;
	bottom:0px;
	z-index:10000;
	display:none;
	margin:8px;
}
#buildingsInfo
{
	left:0px;
	right:50%;
}
#unitsInfo
{
	right:0px;
	left:50%;
}
.onUnits #unitsInfo {display:block;}
.onBuildings #buildingsInfo {display:block;}
#unitsInfoContent,#buildingsInfoContent
{
	width:100%;
	height:100%;
	overflow-x:hidden;
	overflow-y:auto;
}

#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;
}



#tooltipAnchor
{
	position:absolute;
	left:0px;
	top:0px;
	z-index:1000000000;
	display:none;
}
#tooltipAnchor.on
{
	display:block;
}
#tooltip
{
	position:relative;
	width:200px;
	height:250px;
	top:0px;
	left:0px;
	pointer-events:none;
}
#tooltipArrow
{
	position:absolute;
	left:50%;
	margin-left:-12px;
	top:-12px;
	width:24px;
	height:24px;
	background:#b8b283;
	box-shadow:0px 0px 0px 2px #b8b283,0px 0px 0px 3px #7e6b43,0px 0px 0px 4px #b8b283,0px 2px 6px 5px #000;
	border-radius:6px;
	pointer-events:none;
	z-index:-10;
	transform:rotate(45deg);
}

.tooltipAmount
{
	font-size:15px;
	text-align:center;
	color:#fff;
}
.tooltipDesc
{
	/*text-align:justify;*/
	padding-top:4px;
	margin-top:4px;
}
.tooltipIcon
{
	margin:-4px auto;
}



/*animation:waddle 1s ease-in-out 0s infinite alternate,bob 0.5s ease-in-out 0.25s infinite alternate;*/

.res:before,.res:after
{
	content:'';
	display:block;
	width:64px;
	height:64px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-32px;
	margin-top:-32px;
	background:url(shinewhite.png);
	background-repeat:no-repeat;
	background-size:100%;
	z-index:-1;
	opacity:0;
	transition:opacity 1s linear;
	pointer-events:none;
}
.res:before
{
	animation:spin 10s linear 0s infinite;
}
.res:after
{
	transform:rotate(180deg);
	animation:reversespin 10s linear 0s infinite;
}
.res.shine:before,.res.shine:after{opacity:0.5;}
.res.shineGreen:before,.res.shineGreen:after{background:url(shinegreen.png);}
.res.shineRed:before,.res.shineRed:after{background:url(shinered.png);}


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

@keyframes fade-off
{
	from {opacity:1;}
	to {opacity:0;}
}


.noFancy *,.noFancy *:before,.noFancy *:after
{
	text-shadow:none!important;
	box-shadow:none!important;
	animation:none!important;
	transition:none!important;
}