@charset "utf-8";
/* CSS Document */

h1
{
 color:orange;
 text-align:center;
}

table
{
	width:100%;
	border:4px solid gray;
	border-collapse:collapse;
	table-layout:fixed;
}

body
{
	font-family:Arial;
	background-color: #62626a;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.noSelect
{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


.neg
{color:#ee0006;}


.gameTitle
{
	font-size:56px;
	font-weight:bold;
	font-style:normal;
	color:#e7e7e7;
}

.en 
{
	width:20px;
	height:20px;
	-webkit-border-top-left-radius:4px;
	-moz-border-radius-topleft:4px;	
	border-top-left-radius:4px;	-webkit-border-top-right-radius:4px;
	-moz-border-radius-topright:4px;	border-top-right-radius:4px;
	-webkit-border-bottom-right-radius:4px;	-moz-border-radius-bottomright:4px;
	border-bottom-right-radius:4px;	-webkit-border-bottom-left-radius:4px;
	-moz-border-radius-bottomleft:4px; border-bottom-left-radius:4px;
	display:inline-block;
	vertical-align:middle;
}

.roundedTotal
{
	width:200px;
	-webkit-border-top-left-radius:4px;
	-moz-border-radius-topleft:4px;	
	border-top-left-radius:4px;	-webkit-border-top-right-radius:4px;
	-moz-border-radius-topright:4px;	border-top-right-radius:4px;
	-webkit-border-bottom-right-radius:4px;	-moz-border-radius-bottomright:4px;
	border-bottom-right-radius:4px;	-webkit-border-bottom-left-radius:4px;
	-moz-border-radius-bottomleft:4px; border-bottom-left-radius:4px;
	vertical-align:middle;
}

.enBig
{
	width:45px;
	height:45px;
	-webkit-border-top-left-radius:4px;
	-moz-border-radius-topleft:4px;	
	border-top-left-radius:4px;	-webkit-border-top-right-radius:4px;
	-moz-border-radius-topright:4px;	border-top-right-radius:4px;
	-webkit-border-bottom-right-radius:4px;	-moz-border-radius-bottomright:4px;
	border-bottom-right-radius:4px;	-webkit-border-bottom-left-radius:4px;
	-moz-border-radius-bottomleft:4px; border-bottom-left-radius:4px;
	display:inline-block;
	vertical-align:middle;
}

.perSecond
{
	width:45px;
	height:20px;
	background-size:40px 20px;
	-webkit-border-top-left-radius:4px;
	-moz-border-radius-topleft:4px;	
	border-top-left-radius:4px;	-webkit-border-top-right-radius:4px;
	-moz-border-radius-topright:4px;	border-top-right-radius:4px;
	-webkit-border-bottom-right-radius:4px;	-moz-border-radius-bottomright:4px;
	border-bottom-right-radius:4px;	-webkit-border-bottom-left-radius:4px;
	-moz-border-radius-bottomleft:4px; border-bottom-left-radius:4px;
	display:inline-block;
	vertical-align:middle;
}


.perSecondImg
{
	width:20px;
	height:20px;
}

.perSecondBig
{
	width:67px;
	height:40px;
	margin-bottom:23px;
	background-size:40px 20px;
	-webkit-border-top-left-radius:4px;
	-moz-border-radius-topleft:4px;	
	border-top-left-radius:4px;	-webkit-border-top-right-radius:4px;
	-moz-border-radius-topright:4px;	border-top-right-radius:4px;
	-webkit-border-bottom-right-radius:4px;	-moz-border-radius-bottomright:4px;
	border-bottom-right-radius:4px;	-webkit-border-bottom-left-radius:4px;
	-moz-border-radius-bottomleft:4px; border-bottom-left-radius:4px;
	display:inline-block;
	vertical-align:middle;	
}

.perSecondBigImg
{
	width:40px;
	height:40px;
}


.power 
{
	position: relative;
	bottom: 1ex; 
	font-size: 80%;
}

.colorEnergy
{background-color:#ffe70b; border:2px solid  #a18e00; color:#5c5300;}
.colorWater
{background-color:#0bdbff; border:2px solid  #008da2; color:#00505b;}
.colorOxygen
{background-color:#fe9d0c; border:2px solid  #a26500; color:#5b2e00;}
.colorFood
{background-color:#29ff0b; border:2px solid  #09a200; color:#005b00;}
.colorResearch
{background-color:#d50bff; border:2px solid  #8500a2; color:#4b005b;}
.colorHuman
{background-color:#afb1b0; border:2px solid  #3f3f3f; color:#3d3d3d;}

/* ----------------------------------------------------------------------------- */
/* ------------------------  MAIN CLICKING BUTTONS ----------------------------- */
/* ----------------------------------------------------------------------------- */

.clickButton 
{-webkit-border-top-left-radius:6px;	-moz-border-radius-topleft:6px;	border-top-left-radius:6px;	-webkit-border-top-right-radius:6px;	-moz-border-radius-topright:6px;	border-top-right-radius:6px;	-webkit-border-bottom-right-radius:6px;	-moz-border-radius-bottomright:6px;	border-bottom-right-radius:6px;	-webkit-border-bottom-left-radius:6px;	-moz-border-radius-bottomleft:6px; border-bottom-left-radius:6px;
	text-indent:0;display:inline-block;font-family:Arial;font-size:15px;font-weight:bold;font-style:normal;height:100px;line-height:100px;width:100px;text-decoration:none;text-align:center;}
.clickButton:active 
{position:relative;top:2px;color:#ffffff;border:3px solid #ffffff;}

.clickEnergy
{background-color:#ffe70b; border:3px solid #a18e00; color:#5c5300;}
.clickEnergy:hover
{background-color:#ffec40; border:3px solid #e1c600;}

.clickWater
{background-color:#0bdbff; border:3px solid #008da2; color:#00505b;}
.clickWater:hover
{background-color:#91eeff; border:3px solid #00c6e1;}

.clickOxygen
{background-color:#fe9d0c; border:3px solid #a26500; color:#5b2e00;}
.clickOxygen:hover
{background-color:#ffbc40; border:3px solid #e19800;}

.clickFood
{background-color:#29ff0b; border:3px solid #09a200; color:#005b00;}
.clickFood:hover
{background-color:#83ff71; border:3px solid #16e100;}

.clickResearch
{background-color:#d50bff; border:3px solid #8500a2; color:#4b005b;}
.clickResearch:hover
{background-color:#ec91ff; border:3px solid #ba00e1;}

/* ----------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------- */
/* ---------------------------- BUYING BUTTONS --------------------------------- */
/* ----------------------------------------------------------------------------- */
.buyButton
{
	-webkit-border-top-left-radius:6px;	-webkit-border-top-right-radius:6px; -webkit-border-bottom-right-radius:6px;
	-moz-border-radius-topleft:6px;	-moz-border-radius-topright:6px; -moz-border-radius-bottomright:6px;
	border-top-left-radius:6px;	border-top-right-radius:6px; border-bottom-left-radius:6px; border-bottom-right-radius:6px;
	text-indent:0; line-height:40px;
	display:inline-block; 
	font-family:Arial; font-size:15px; font-weight:bold; font-style:normal;
	height:90px; width:90px;
	text-decoration:none; text-align:center;	
}

.buyButton:active
{
	position:relative;
	top:2px;
	color:#ffffff;
	border:3px solid #ffffff;	
}

.buyButtonDisabled 
{
	background-color:#c2c2c2;
	-webkit-border-top-left-radius:6px;	-moz-border-radius-topleft:6px;	border-top-left-radius:6px;	-webkit-border-top-right-radius:6px;
	-moz-border-radius-topright:6px;	border-top-right-radius:6px;
	-webkit-border-bottom-right-radius:6px;	-moz-border-radius-bottomright:6px;	border-bottom-right-radius:6px;	-webkit-border-bottom-left-radius:6px;	-moz-border-radius-bottomleft:6px;
	border-bottom-left-radius:6px;
	text-indent:0;
	border:3px solid #919191;
	display:inline-block;
	color:#919191;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:90px;
	line-height:40px;
	width:90px;
	text-decoration:none;
	text-align:center;
}


/* Power Button Coloring */
.powerButton
{background-color:#ffe70b;color:#5c5300; border:3px solid #a18e00;}
.powerButton:hover
{background-color:#ffec40; border:3px solid #e1c600;}

/* Water Button Coloring */
.waterButton
{background-color:#0bdbff;color:#00505b; border:3px solid #008da2;}
.waterButton:hover
{background-color:#91eeff; border:3px solid #00c6e1;}

/* Oxygen Button Coloring */
.oxygenButton
{background-color:#fe9d0c;color:#5b2e00; border:3px solid #a26500;}
.oxygenButton:hover
{background-color:#ffbc40; border:3px solid #e19800;}

/* Food Button Coloring */
.foodButton
{background-color:#29ff0b;color:#005b00; border:3px solid #09a200;}
.foodButton:hover
{background-color:#83ff71; border:3px solid #16e100;}

/* Research Button Coloring */
.researchButton
{background-color:#d50bff;color:#4b005b; border:3px solid #8500a2;}
.researchButton:hover
{background-color:#ec91ff; border:3px solid #ba00e1;}

/* Population Button Coloring */
.populationButton
{background-color:#f0f0f0;color:#515151; border:3px solid #d5cc24;}
.populationButton:hover
{background-color:#f9f9f9; border:3px solid #c0c0c0;}

/* ----------------------------------------------------------------------------- */




.buyPopulationButton 
{
	background-color:#29ff0b;
	-webkit-border-top-left-radius:6px;	-moz-border-radius-topleft:6px;	border-top-left-radius:6px;	-webkit-border-top-right-radius:6px;	-moz-border-radius-topright:6px;	border-top-right-radius:6px;	-webkit-border-bottom-right-radius:6px;	-moz-border-radius-bottomright:6px;	border-bottom-right-radius:6px;	-webkit-border-bottom-left-radius:6px;	-moz-border-radius-bottomleft:6px;	border-bottom-left-radius:6px;
	text-indent:0;
	border:3px solid #09a200;
	display:inline-block;
	color:#005b00;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:40px;
	line-height:40px;
	width:200px;
	text-decoration:none;
	text-align:center;
}
.buyPopulationButton:hover 
{
	background-color:#83ff71;
	border:3px solid #16e100;
}
.buyPopulationButton:active {
	position:relative;
	top:1px;
	color:#ffffff;
	border:3px solid #ffffff;
}





img.middle
{
	vertical-align:middle;
}







.outerProg
{
    border-style: solid;
	-webkit-border-top-left-radius:6px;	-moz-border-radius-topleft:6px;	border-top-left-radius:6px;	-webkit-border-top-right-radius:6px;
	-moz-border-radius-topright:6px;	border-top-right-radius:6px; 
	-webkit-border-bottom-right-radius:6px;	-moz-border-radius-bottomright:6px;	border-bottom-right-radius:6px;	-webkit-border-bottom-left-radius:6px;	-moz-border-radius-bottomleft:6px; 	border-bottom-left-radius:6px; 
    border-width: 3px;
    width: 200px;
    height:40px;
    position:relative;
    margin-left:auto;
	margin-right:auto;
}
.innerProg
{
    width: 50%;
    height: 40px;
}


.energyOuter{background-color: #ffffff;border-color: #a18e00;}
.energyInner{background-color: #ffe70b;}

.waterOuter{background-color: #ffffff;border-color: #008da2;}
.waterInner{background-color: #0bdbff;}

.oxygenOuter{background-color: #ffffff;border-color: #a26500;}
.oxygenInner{background-color: #fe9d0c;}

.foodOuter{background-color: #ffffff;border-color: #09a200;}
.foodInner{background-color: #29ff0b;}

.researchOuter{background-color: #ffffff;border-color: #8500a2;}
.researchInner{background-color: #d50bff;}


.progText
{
    position: absolute;
    top: 12px;
    left: 0px;
    z-index: 2;
    text-align: center;
    width: 100%;	
}


.researchLevel1
{
	 visibility:hidden;
}

.researchLevel2
{
	/* visibility:hidden;  */
	display:none;
}


.hidden
{
	display:none;
}





#tabs { list-style-type: none; margin: 30px 3px 0 0; padding: 0 0 0.3em 0; }
#tabs li { display: inline; }
#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
#tabs li a:hover { background-color: #f1f0ee; }
#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }


div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; height:710px; }
div.tabContent.hide { display: none; }




.bubble 
{
position: relative;
font-family:"Courier New", Courier, monospace;
font-size:small;
font-weight:bold;
width: 270px;
height: 120px;
padding: 5px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: #7F7F7F solid 3px;
}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 34px 11px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
bottom: -34px;
left: 57px;
}

.bubble:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 36px 13px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 0;
bottom: -39px;
left: 55px;
}












.bobbing
{
position:relative;
animation:droidbob 20s infinite;
-webkit-animation:droidbob 20s infinite; /* Safari and Chrome */
-moz-animation:droidbob 20s infinite; /* Mozilla */
animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari and Chrome */
-moz-animation-direction:alternate; /* Mozilla */
}


@keyframes droidbob
{
0%   {left:0px; top:0px;}
16%  {left:80px; top:25px;}
32%  {left:-40px; top:30px;}
48%  {left:10px; top:-40px;}
64%  {left:-60px; top:-25px;}
80%  {left:-40px; top:30px;}
100%  {left:20px; top:50px;}
}

@-webkit-keyframes droidbob /* Safari and Chrome */
{
0%   {left:0px; top:0px;}
16%  {left:80px; top: 25px;}
32%  {left:-40px; top:30px;}
48%  {left:10px; top:-40px;}
64%  {left:-60px; top:-25px;}
80%  {left:-40px; top:30px;}
100%  {left:20px; top:50px;}
}



.techTreeButton
{
	width:90px;
	height:90px;
	background:#61345f;
	display:inline-block;
	vertical-align:middle;
	position:absolute;
	-webkit-border-top-left-radius:6px;
	-moz-border-radius-topleft:6px;	
	border-top-left-radius:6px;	-webkit-border-top-right-radius:6px;
	-moz-border-radius-topright:6px;	border-top-right-radius:6px;
	-webkit-border-bottom-right-radius:6px;	-moz-border-radius-bottomright:6px;
	border-bottom-right-radius:6px;	-webkit-border-bottom-left-radius:6px;
	-moz-border-radius-bottomleft:6px; border-bottom-left-radius:6px;
	border:3px solid #4b005b;
	/*text-align:center;*/
}

.techTreeButtonSelected
{border-color:#ffffff;}

.techTreeButtonLocked
{background:#454545;}

.techTreeButtonBuyable
{background:#8a3399;}

.techTreeButtonInProgress
{background:#bc38d3;}

.techTreeButtonComplete
{background:#ffff0d;}

.techTreeButtonCompleteENERGY
{background:#ffff0d;}
.techTreeButtonCompleteWATER
{background:#0bdbff;}
.techTreeButtonCompleteOXYGEN
{background:#fe9d0c;}
.techTreeButtonCompleteFOOD
{background:#29ff0b;}
.techTreeButtonCompleteRESEARCH
{background:#d50bff;}
.techTreeButtonCompleteHUMAN
{background:#afb1b0;}


.techTreeProgOuter
{
    border-style: solid;   
    width: 80px;
    height:12px;
    position:relative;
    margin-left:auto;
	margin-right:auto;
	top:71px;
	-webkit-border-top-left-radius:6px;	-moz-border-radius-topleft:6px;	border-top-left-radius:6px;	-webkit-border-top-right-radius:6px;
	-moz-border-radius-topright:6px;	border-top-right-radius:6px;
	-webkit-border-bottom-right-radius:6px;	-moz-border-radius-bottomright:6px;	border-bottom-right-radius:6px;	-webkit-border-bottom-left-radius:6px;	-moz-border-radius-bottomleft:6px; 	border-bottom-left-radius:6px; 
    border-width: 3px;
    border-color:#4b005b;
    background:#422747;
}

.techTreeProgInner
{
	width: 0;
    height: 12px;
    background:#d50bff;
}

.techTreeProgText
{
    position: absolute;
    top:0px;
    z-index: 2;
    text-align: center;
    width: 100%;
    font-size:x-small;
    color:#ffffff; 
}

.tinyIcon 
{
	width:20px;
	height:20px;
	-webkit-border-top-left-radius:4px;
	-moz-border-radius-topleft:4px;	
	border-top-left-radius:4px;	-webkit-border-top-right-radius:4px;
	-moz-border-radius-topright:4px;	border-top-right-radius:4px;
	-webkit-border-bottom-right-radius:4px;	-moz-border-radius-bottomright:4px;
	border-bottom-right-radius:4px;	-webkit-border-bottom-left-radius:4px;
	-moz-border-radius-bottomleft:4px; border-bottom-left-radius:4px;
	display:inline-block;
	vertical-align:middle;
}

.rotateTextTitle
{
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	
	width:128px; 
	position:absolute;
	vertical-align:middle; 
	font-weight:bold;
}



.line
{
	-ms-transform-origin: 0 50%;
	-webkit-transform-origin: 0 50%;
	-moz-transform-origin: 0 50%;
 	-o-transform-origin: 0 50%;
	transform-origin: 0 50%;
	height: 8px; /* Line width of 3 */
	position:absolute;
}

.lineOn
{
		background:#c0c0c0;
}

.lineOff
{
	background:#522e51;
}

.costText
{
	color:#c0c0c0;
}


.saveText
{
	opacity:0;
	transition: opacity 1s; 
}

.fade
{
	opacity:1;
}