/* CSS */

html, body {
	height: 100%;
	overflow: hidden !important; 
}

.game-table .head,
.game-table .body-scroll,
.system-table > .tbody {
	display: block;
	position: absolute;
	left: 0;
	box-sizing: border-box;
}

.game-table .head {
	height: 27px;
	right: 20px;
}

.game-table .body-scroll {
	padding-bottom: 10px;
	top: 34px;
	right: 3px;
	bottom: 20px;
}

.system-table {
	position: absolute;
	top: 138px;
	right: 20px;
	bottom: 20px;
	left: 20px;
	overflow: hidden;
}

.system-table > .tbody {
	background: #000;
	top: 0;
	right: 0;
	bottom: 0;
}

.system-table > .tbody > .tr, 
.system-table > .tbody > .tr > .td {
	height: 100%;
	position: relative;
	display: block !important;
}

.system-table > .tbody > .tr > .td {
	width: 10%;
	float: left;
}

.system-table > .tbody > .tr > .td.prev,
.system-table > .tbody > .tr > .td.next {
	width: 5%;
	vertical-align: middle;
}

.td.prev a,
.td.next a {
	width: 100%;
	height: 100%;
	display: block;
	vertical-align: middle;
}

.td.prev a span,
.td.next a span {
	width: 100%;
	margin: -8px 0 0 0;
	position: absolute;
	top: 50%;
	left: 0;
	text-align: center;
}

.system-table > .tbody > .tr > .td.star:hover,
.system-table > .tbody > .tr > .td.orbit:hover {
	background: #080808;
	box-shadow: inset 0 0 30px #000;
}

.system-table > .tbody > .tr > .td.star,
.system-table > .tbody > .tr > .td.outer {
	width: 20%;
}

.system-table > .tbody > .tr > .td.star > span,
.system-table > .tbody > .tr > .td.planet > span {
	height: 0;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;

	border-radius: 100%;
}

.system-table > .tbody > .tr > .td.star > span {
	width: 80%;
	margin: -40% 0 0 -40%;
	padding-top: 80%;
}

.tr {
	display: table-row;
}

.th, .td {
	display: table-cell;
	text-align: center; 
}






.system-table > .tbody > .tr > .td.planet > span {
	z-index: 500;
}

.system-table .planet.size-1 > span {
	width: 40%;
	margin: -20% 0 0 -20%;
	padding-top: 40%;
}

.system-table .planet.size-2 > span {
	width: 50%;
	margin: -25% 0 0 -25%;
	padding-top: 50%;
}

.system-table .planet.size-3 > span {
	width: 60%;
	margin: -30% 0 0 -30%;
	padding-top: 60%;
}

.system-table .planet.size-4 > span {
	width: 70%;
	margin: -35% 0 0 -35%;
	padding-top: 70%;
}

.system-table .planet.size-5 > span {
	width: 80%;
	margin: -40% 0 0 -40%;
	padding-top: 80%;
}





#celestial-plane,
#celestial-plane div {
	height: 0;
	position: absolute; 
	display: block;
	box-sizing: border-box;
}

#celestial-plane {
	top: 50%;
	right: 10%;
	left: 10%;
}

#celestial-plane div {
	width: 100%;
	border-top: 1px dashed #222;
}





h1,
h2,
h3 {
	font-family: 'Orbitron', sans-serif; 
	font-weight: normal; 
}

h1 {
	border-bottom: 1px solid #333;
	color: #eee; 
}

#main > h1 {
	height: 20px;
}

#menustate h1 {
	margin: 0;
	padding: 10px 0;
	font-size: 1.63em;
}

#gamestate h1 {
	margin: 10px 0 20px 0;
	padding: 0 5px 10px 5px; 
	font-size: 1.25em;
}

#login h1 {
	margin: 0 0 10px 0;
	padding: 10px;
	font-size: 1.25em;
}

h2 {
	color: #ccc;
}

#main > h2 {
	margin: 10px;
	font-size: 1em;
}

#main .header > h2 {
	margin: 10px 0;
	display: inline-block;
	font-size: 1em;
}

h3 {
	color: #ccc;
	font-size: 0.88em;
}





#star-system .planet > .tooltip {
	width: 100%;
	height: 35%;
	margin: 0 auto;
	word-wrap: break-word;
	position: absolute;
	top: 65%;
	z-index: 501;
}

#star-system .planet > .tooltip span {
	position: relative;
	color: #666;
	padding: 2px 0;
	font-size: 0.75em;
	font-family: Tahoma, sans-serif;
	text-transform: uppercase;
}




#login-form {
	background: rgba( 12, 17, 20, 0.6 ); 
	width: 200px;
	height: 200px;
	margin: -110px 0 0 -110px;
	border: 1px solid #2985cc;
	padding: 10px;
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;

	/* CSS3 */
	border-radius: 2px;
}

#login-form > * {
	display: block;
}

#login-form label {
	color: #666;
	font-size: 0.69em;
	font-family: Tahoma, sans-serif;
	text-transform: uppercase;
}

#login-form input[type='email'],
#login-form input[type='password'] {
	background: #000;
	width: 100%;
	border: 1px solid #222;
	padding: 2px 5px;
	color: #CCC;
	font-size: 0.88em;
	box-sizing: border-box;

	/* CSS3 */
	border-radius: 2px;
}

#login button {
	background: none;
	margin: 5px;
	border: 0;
	padding: 2px;
	color: #0091ff;
	font-size: 0.75em;
	font-weight: bold;
	font-family: Tahoma, sans-serif;
}





#start-menu {
	width: 240px;
	height: 360px; 
	margin: -180px 0 0 -120px;
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
}

#start-menu span {
	margin: 10px 0 20px 0;
	display: block;
	position: relative;
	color: #0091ff;
	font-size: 0.69em;
	font-family: Tahoma, sans-serif;
	text-transform: uppercase;
}

#nav-start > ul > li > a {
	background: rgba( 8,11,13,0.4 );
	border-bottom: 1px solid #333; 
	padding: 20px 30px; 
	display: block;
	position: relative;
	color: #333;
	font-family: 'Orbitron', sans-serif;
}

#nav-start > ul > li > a[href] {
	color: #eee !important;

	/* CSS3 */
	text-shadow: 0 0 5px #309bbf; 
	box-shadow: inset 0 0 5px #111;
}

#nav-start > ul > li > a[href]:hover,
#nav-start > ul > li > a.active {
	background: rgba( 12, 17, 20, 0.6 ); 
	box-shadow: inset 0 0 5px #222;
	border-bottom: 1px solid #2985cc;
}

#nav-start > a {
	padding: 10px;
	display: block;
	position: relative;
	font-size: 0.75em;
	font-family: Tahoma, sans-serif;
	text-transform: uppercase;
}





#content {
	/*
	width: 100%;
	height: 100%;
	display: inline-block;
	position: relative; */

	width: auto;
	height: auto;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}





#inner-wrap {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}




#space-grid {
	display: table;
	border: 1px dotted #333;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	z-index: 100;
	border-collapse: collapse;
	border-spacing: 0;
}

#space-grid > div {
	display: table-row;
	width: 100%;
	height: 10%;
	float: left;
	box-sizing: border-box;
}

#space-grid > div > div {
	width: 10%;
	height: 100%;
	float: left;
	display: table-cell;
	box-sizing: border-box;
}

#space-grid > div:not(:first-child) {
	border-top: 1px dotted  #222;
}

#space-grid > div > div:not(:first-child) {
	border-left: 1px dotted #222;
}





#star-grid {
	width: 100%;
	height: 100%;
	padding: 80px;
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	z-index: 200;
	/*
    height:100vm; width:100vm; /* IE9 fallback */ /*
    width: 100vmin; 
    height: 100vmin;   
    position: absolute;
    top:0;bottom:0;
    left:0;right:0;
    margin: auto;
    */
}

#star-grid .star {
	width: 100px;
	height: 12px;
	margin: -5px 0 0 -51px;
	padding: 16px 0 0 0;
	position: absolute;
	display: inline-block;
	z-index: 250;
	text-align: center;

	font-size: 0.75em;
	text-transform: uppercase;
	font-family: Tahoma, sans-serif;
}

#star-grid .blackhole {
	width: 100px;
	height: 12px;
	margin: -5px 0 0 -51px;
	padding: 16px 0 0 0;
	position: absolute;
	display: inline-block;
	z-index: 250;
	text-align: center;
	color: #333;

	font-size: 0.75em;
	text-transform: uppercase;
	font-family: Tahoma, sans-serif;
}

#star-grid .void {
	width: 20%;
	height: 20%;
	margin: -10% 0 0 -10%;
	position: absolute;
	display: inline-block;
	z-index: 250;
	text-align: center;

	color: #444;
	font-size: 1.25em;
	font-style: italic;
	text-transform: uppercase;
	font-family: "Times New Roman", Times, serif;

	/* CSS3 */
	border-radius: 100%;
	box-shadow: 0 0 64px 4px #111, inset 0 0 96px 8px #000;
	vertical-align: middle;
}

#star-grid .star span {
	width: 8px;
	height: 8px;
	margin: 0 0 0 -4px;
	border-radius: 100%;
	text-align: center; 
	position: absolute;
	top: 0;
	left: 50%;
}

#star-grid .blackhole span {
	background: #000;
	width: 8px;
	height: 8px;
	margin: 0 0 0 -4px;
	text-align: center; 
	position: absolute;
	top: 0;
	left: 50%;

	/* CSS3 */
	border-radius: 100%;
	box-shadow: 0 0 32px 4px #9db4ff,  0 0 16px 2px purple, 0 0 8px orange;
}

.void span {
	width: 200px;
	height: 16px;
	margin: -12px 0 0 -100px;
	padding: 4px 0;
	position: absolute;
	top: 50%;
	left: 50%;

	/* CSS3 */
	text-shadow: 0 0 48px #666, 0 0 24px #333, 0 0 12px #222; 
}

#star-system .star > span {
	z-index: 500;
}

.star.O-class > span {
	background: #9db4ff;
}

#star-grid .star.O-class > span {
	/* CSS3 */
	box-shadow: 0 0 16px 2px #9db4ff, inset 0 0 1px #FFF;
}

#star-system .star.O-class > span {
	/* CSS3 */
	box-shadow: 0 0 24px 3px #9db4ff, inset 0 0 36px #FFF;
}


.star.B-class > span {
	background: #afc3ff;
}

#star-grid .star.B-class > span {
	/* CSS3 */
	box-shadow: 0 0 16px 2px #afc3ff, inset 0 0 1px #FFF;
}

#star-system .star.B-class > span {
	/* CSS3 */
	box-shadow: 0 0 24px 3px #afc3ff, inset 0 0 36px #FFF;
}


.star.A-class > span {
	background: #cad8ff;
}

#star-grid .star.A-class > span{
	/* CSS3 */
	box-shadow: 0 0 16px 2px #cad8ff, inset 0 0 1px #FFF;
}

#star-system .star.A-class > span{
	/* CSS3 */
	box-shadow: 0 0 24px 3px #cad8ff, inset 0 0 36px #FFF;
}


.star.F-class > span {
	background: #fff9f9;
}

#star-grid .star.F-class > span {
	/* CSS3 */
	box-shadow: 0 0 16px 2px #fff9f9, inset 0 0 1px #FFF;
}

#star-system .star.F-class > span {
	/* CSS3 */
	box-shadow: 0 0 24px 3px #fff9f9, inset 0 0 36px #FFF;
}


.star.G-class > span {
	background: #fff1df;
}

#star-grid .star.G-class > span {
	/* CSS3 */
	box-shadow: 0 0 16px 2px #fff1df, inset 0 0 1px #FFF;
}

#star-system .star.G-class > span {
	/* CSS3 */
	box-shadow: 0 0 24px 3px #fff1df, inset 0 0 36px #FFF;
}


.star.K-class > span {
	background: #ffc690;
}

#star-grid .star.K-class > span {
	/* CSS3 */
	box-shadow: 0 0 16px 2px #ffc690, inset 0 0 1px #FFF;
}

#star-system .star.K-class > span {
	/* CSS3 */
	box-shadow: 0 0 24px 3px #ffc690, inset 0 0 36px #FFF;
}

.star.M-class > span {
	background: #ffbb7b;
}

#star-grid .star.M-class > span {
	/* CSS3 */
	box-shadow: 0 0 16px 2px #ffbb7b, inset 0 0 1px #FFF;
}

#star-system .star.M-class > span {
	/* CSS3 */
	box-shadow: 0 0 24px 3px #ffbb7b, inset 0 0 36px #FFF;
}

.star.N-class {

}
.star.D-class {

}

a.star:hover {
	color: #66bdff !important;
}

.star div {
	width: 16px;
	height: 16px;
	margin: -5px 0 0 -9px;
	border: 1px dotted #36434d;
	border-radius: 100%;
	text-align: center; 
	position: absolute;
	top: 0;
	left: 50%;
	display: none;	
}

a.star:hover div {
	display: block;
}




.planet.barren > span {
	background: #999;

	/* CSS3 */
	background-image:
		linear-gradient(
			to right,
			#999, #000 60%
		);
	box-shadow: inset -8px 0 16px 4px #000, inset 0 0 24px #737373;
}

.planet.arid > span {
	background: #807773;

	/* CSS3 */
	background-image:
		linear-gradient(
			to right,
			#807773, #000 60%
		);
	box-shadow: inset -8px 0 16px 4px #000, 0 0 2px #595350, inset 0 0 24px #595350;
}

.planet.tundra > span {
	background: #c2c7cc;

	/* CSS3 */
	background-image:
		linear-gradient(
			to right,
			#c2c7cc, #000 60%
		);
	box-shadow: inset -8px 0 16px 4px #000, inset 0 0 24px #6b8299;
}

.planet.swamp > span {
	background: #7f8073;

	/* CSS3 */
	background-image:
		linear-gradient(
			to right,
			#7f8073, #000 60%
		);
	box-shadow: inset -8px 0 16px 4px #000, 0 0 2px #595950, inset 0 0 24px #595950;
}

.planet.ocean > span {
	background: #737980;

	/* CSS3 */
	background-image:
		linear-gradient(
			to right,
			#737980, #000 60%
		);
	box-shadow: inset -8px 0 16px 4px #000, 0 0 4px #505559, inset 0 0 24px #505559;
}

.planet.terra > span {
	background: #778073;

	/* CSS3 */
	background-image:
		linear-gradient(
			to right,
			#778073, #000 60%
		);
	box-shadow: inset -8px 0 16px 4px #000, 0 0 8px #6b8299, inset 0 0 24px #6b8299;
}

.planet.gaia > span {
	background: #8c998a;

	/* CSS3 */
	background-image:
		linear-gradient(
			to right,
			#8c998a, #000 60%
		);
	box-shadow: inset -8px 0 16px 4px #000, 0 0 16px #556652, inset 0 0 16px #556652;
}

.planet.eden > span {
	background: #8c998a;

	/* CSS3 */
	background-image:
		linear-gradient(
			to right,
			#8c998a, #000 60%
		);
	box-shadow: inset -8px 0 16px 4px #000, 0 0 16px #583d66, inset 0 0 16px #583d66;
}

.planet.toxic > span {
	background: #807366;

	/* CSS3 */
	background-image:
		linear-gradient(
			to right,
			#807366, #000 60%
		);
	box-shadow: inset -8px 0 16px 4px #000, 0 0 16px #995c3d, inset 0 0 16px #995c3d;
}

.planet.radiated > span {
	background: #99665c;

	/* CSS3 */
	background-image:
		linear-gradient(
			to right,
			#99665c, #000 60%
		);
	box-shadow: inset -8px 0 16px 4px #000, 0 0 8px #662929, inset 0 0 16px #662929;
}

.planet.gas > span {
	background: #99734c;

	/* CSS3 */
	background-image:
		linear-gradient(
			to right,
			#99734c, #000 60%
		);
	box-shadow: inset -8px 0 16px 4px #000, 0 0 8px #664e3d, inset 0 0 16px #664e3d;
}





#main, #system {
	background: rgba( 12, 17, 20, 0.6 );
	border: 1px solid #2985cc;
	padding: 20px; 
	box-sizing: border-box;
	overflow: hidden;
	position: absolute;
	z-index: 1000;

	/* CSS3 */
	box-shadow: inset 0 0 5px #222;
}

#main .header, #system .header {
	background: #000;
	padding: 10px; 
	height: 36px;
}





@media (orientation: landscape) {

	#inner {
		width: 100%;
		margin: 80px 0;
		padding: 100% 0 0 0;
		position: relative;
		box-sizing: border-box;
	}

}





@media (orientation: portrait) {

	#inner {
		height: 100%;
		margin: 80px 0;
		position: relative;
		box-sizing: border-box;
	}

	#inner-ratio {
		height: 100%;
	}

}





@media all and (min-width: 980px) { /* DESKTOP */

	#system {
		width: 960px;
		height: 480px;
		margin: -240px 0 0 -480px;
	}

}





@media all and (min-width: 768px) and (max-width: 979px) { /* PORTRAIT, TABLET */

}





@media screen and (min-width: 768px) { /* DESKTOP, PORTRAIT OR TABLET */

	#main {
		top: 155px; 
		right: 20px;
		bottom: 40px;
		left: 20px;
	}





	#system {
		top: 50%;
		left: 50%;
	}





	.game-table {
		box-sizing: border-box;
		position: absolute;
		right: 0;
		bottom: 2px;
		left: 20px;
		overflow: hidden;
		display: block;
	}

	.game-table .thead,
	.game-table .tbody {
		border-spacing: 1px;
		display: table;
		width: 100%;
	}

	#empire-establishments, #planets {
		top: 155px;
	}

	.game-table .body-scroll {
		overflow-y: scroll;
	}

	.game-table .tr {
		clear: left;
		position: relative;
	}

	.tbody .tr {
		display: table-row;
	}

	.tbody .td {
		display: table-cell;
	}

	.game-table .th,
	.game-table .td {
		width: 100%;
		min-height: 27px;
		position: relative;
	}

	.game-table .tbody .tr:hover > div {
		background: #070707;
	}

	.game-table .tr > .th,
	.game-table .tr > .td {
		min-width: 80px; 
		width: 100%;
		padding: 10px;
		font-family: Tahoma, sans-serif;
		text-transform: uppercase; 
		box-sizing: border-box;
	}

	.game-table .thead .tr > .th {
		background: #000;
		color: #EEE;
		font-size: 0.69em;
	}

	.game-table .tbody .tr > .td {
		background: #060606;
		min-height: 40px;
		vertical-align: middle;
	}


	.planet-sizes, 
	.planet-climates {
		color: #2985cc;
		font-size: 0.69em;
	}



	.establishment-name,
	.establishment-location,
	.establishment-population,
	.establishment-agriculture,
	.establishment-industry,
	.establishment-research,
	.establishment-production {
		color: #2985cc;
		font-size: 0.69em;
	}

	.establishment-type {
		color: #999;
		font-size: 0.56em;
	}

	.establishment-name,
	.establishment-type {
		display: block;
	}

	.population-bar {
		background: #000;
		height: 11px; 
		width: 100%;
		display: block;
		position: relative;
	}

	.population-progress {
		background: url(../images/gradient-bar_blue-1x11.jpg);
		height: 11px;
		position: relative;
		float: left; 
	}

	.establishment-pop-max {
		color: #999;
		float: right;
	}

	.establishment-agriculture,
	.establishment-industry,
	.establishment-research {
		text-align: center;
	}

	.table-cell.establishment-agriculture {

	}

	.table-cell.establishment-industry {

	}

	.table-cell.establishment-research {

	}

	.establishment-population,
	.establishment-colonist {
	}

	#planets.game-table .th,
	#planets.game-table .td {
		width: 25%;
		box-sizing: border-box;
	}

	#empire-establishments .th, 
	#empire-establishments .td {
		width: 12.5%;
		box-sizing: border-box;
	}

}





@media screen and (max-width: 767px), all and (max-device-width: 767px) { /* MOBILE, SMARTPHONE, IPHONE */

}





@media all and (min-width: 480px) and (max-width: 767px) { /* MEDIUM RESOLUTION MOBILE */

}