/* CSS RESET - http://meyerweb.com/eric/tools/css/reset/  */
/*
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;
	}
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;
	}
*/

h1,h2, h3, h4, h5, h6 { 
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}
	
/* FONTS */
@font-face {
	font-family: 'ethnocentric';
	src: url('../fonts/ethnocen.ttf')  format('truetype');
	}
@font-face {
	font-family: 'lcars';
	src: url('../fonts/Okuda.otf')  format('truetype');
	}
@font-face {
	font-family: 'lcars_bold';
	src: url('../fonts/Okuda Bold.otf')  format('truetype');
	}

/*

We also link to Google Fonts:
	'Roboto Condensed' (regular and bold)
	'Teko' (regular and bold)
	
*/
	
	
	
	
	
	
/* ANIMATIONS */

@keyframes alert {
	0% { background: rgba(240,0,0,0); }
	50% { background: rgba(240,0,0,1); }
	100% { background: rgba(240,0,0,0); }
}
@keyframes skewIn {
	from { transform: skewX(-89deg) scaleX(3.0); opacity: 0.0; }
}
@keyframes fadeIn {
	0% {  opacity: 0.0; }
	100% {  opacity: 1.0; }
}
@keyframes fadeOut {
	0% {  opacity: 1.0; }
	100% {  opacity: 0.0; }
}
@keyframes fadeRepeat {
	0% {  opacity: 1.0; }
	50% {  opacity: 0.1; }
	100% {  opacity: 1.0; }
}
@keyframes normalIn {
	from { transform: scale3d(1,1,1) rotate3d(0,0,0,0) translate3d(0,0,0) }
}
@keyframes flipInLeft {
	from { transform: scale(1.0) translateZ(-1000px) rotateY(-90deg); opacity: 0.0; }
}
	
@keyframes blendInAliens {
	from { color: rgba(0,0,0,0); text-shadow: #6CE 0 0 8em; }
}
@keyframes slideInLeft {
	from { transform: translateX(-2000px); opacity: 0.0; }
}
@keyframes slideInRight {
	from { transform: scaleX(0.01); opacity: 1.0; }
}
@keyframes trekIn {
	0% { transform: scaleX(0.01) scaleY(0.02); opacity: 1.0; background-color: #FFF; }
	50% { transform: scaleX(1.0) scaleY(0.02); opacity: 1.0;  }
}
@keyframes trekOut {
	0% { transform: scaleX(1.0) scaleY(1.0); opacity: 1.0; }
	50% { transform: scaleX(1.0) scaleY(0.02); opacity: 1.0; }
	99% { transform: scaleX(0.01) scaleY(0.02); opacity: 1.0; background-color: #6CE;}
	100% { transform: scaleX(0.00) scaleY(0.00); opacity: 0.0; background-color: #6CE; }
}
@keyframes blink2 {
	0% { opacity: 1; }
	39% { opacity: 1; }
	40% { opacity: 0; }
	59% { opacity: 0; }
	60% { opacity: 1; }
	99% { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes blink3 {
	0% { opacity: 1; }
	24% { opacity: 1; }
	25% { opacity: 0; }
	36% { opacity: 0; }
	37% { opacity: 1; }
	61% { opacity: 1; }
	62% { opacity: 0; }
	74% { opacity: 0; }
	75% { opacity: 1; }
	99% { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes fuzz {
	0% { opacity: 0; }
	5% { opacity: 0.25; }
	10% { opacity: 0; }
	15% { opacity: 0.75; }
	20% { opacity: 0.1; }
	25% { opacity: 0.3; }
	30% { opacity: 0.9; }
	35% { opacity: 0.4; }
	40% { opacity: 0.0; }
	45% { opacity: 0.5; }
	50% { opacity: 0.95; }
	55% { opacity: 0.7; }
	60% { opacity: 0.2; }
	65% { opacity: 0.0; }
	70% { opacity: 0.6; }
	75% { opacity: 1.0; }
	80% { opacity: 0.4; }
	85% { opacity: 0.7; }
	90% { opacity: 0.3; }
	95% { opacity: 0.9; }
	100% { opacity: 1.0; }
	}
	
@keyframes rotation {
    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);}
}

.flipInLeft {
	transform-origin: 50% 50%;
	animation: flipInLeft .5s both ease-out;
}
.slideInLeft {
	transform-origin: 50% 50%;
	animation: slideInLeft .3s both ease-out;
}
.slideInRight {
	transform-origin: 100% 50%;
	animation: slideInRight .3s both ease-out;
}
.trekIn {
	transform-origin: 50% 50%;
	animation: trekIn .25s both ease-out;
}
.trekOut {
	transform-origin: 50% 50%;
	animation: trekOut .25s both ease-in;
	opacity:0;
}
.fadeIn {
	animation: fadeIn .5s both ease-out;
	opacity: 0.01;
}
.fadeInSlow {
	animation: fadeIn 2s both ease-out;
	opacity: 0.01; 
}
.fadeOut {
	animation: fadeOut .5s both ease-in;
	opacity:0;
}
.fadeRepeat {
	animation: fadeRepeat 1.5s both ease-in-out infinite;
	opacity:0;
}
.fuzzIn {
	transform-origin: 50% 50%;
	animation: blink3 .4s both ease-in;
	opacity:1;
}

#spa_wrapper .nofx * {
	transition: none !important;
	animation: none !important;
	}

/* LAYOUT */

body,html {
	height:100%;
	width: 100%;
	max-height: 100%;
	max-width: 100%;
	background-color: #000;
	overflow:hidden;
	/* prevent text selections */
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */  
	}

	
/* prevents tablets from changing text size on orientation */
@media only screen and (max-device-width: 1028px) {
    html {
        -webkit-text-size-adjust : none;
        text-size-adjust         : none;
    }
}

/* bottom layer - contains nebula graphic background */
#layout_pagewrap {
	height:100%;
	width:100%;
	max-height: 100%;
	max-width: 100%;
	min-height:480px;
	min-width:640px;
	/* default bg img - JS may override when app starts */
	background-color: #000;
	background-image: url(../img/map/bg/spacebg_031.jpg);
	background-repeat: repeat;
	background-size: 125% auto;
	background-position: 50% 50%;
	z-index: 100;
	overflow:hidden;
	}

/* map background layer */
#layout_viewport { 
	position:absolute; 
	padding:0; 
	margin:0; 
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	z-index: 200;
	color: #FFF;	
	transition:  background-color 0.75s ; /* for extreme zoom transition */
	overflow:hidden;
	}

/* darkening effect in strategic view */
.xtreme_zoom #layout_viewport {
	background-color: rgba(0,0,0,0.65) !important;
	}
	
/* map container */
#layout_map {
	background: none;
	position:absolute;  
	top:0;
	left:0;
	height: 2000px; 
	width: 2000px;  
	margin: 0;
	padding: 0;
	transform: scale(1.0);
	}
#layout_map.smooth_move {
	transition: transform 0.5s;
	transition-timing-function: linear;
	}
#layout_map.sectors {
	background: url(../img/map/sectors.png) top left repeat; 
	}
	
#layout_map #range_layer {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -10;
	opacity: 0.08;
	pointer-events: none;
	}
#layout_map #range_layer DIV {
	position: absolute;
	background: #FFF;
	border-radius: 50%;
	}
	
/* UI layer */	
#layout_ui { 
	position:absolute; 
	padding:0; 
/* 	margin: 0; */
	margin:0 0 0 auto; 
	right:0;
	top:0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 300;
	display: flex;
	flex-flow: row nowrap;
	
	/* allows click-though to map space when child elements are hidden */
	pointer-events: none;

/* 	transition: all 0.20s; */
/* 	display: none; */
	}
	
#layout_ui_main { 
	order: 10;
	flex: 70;
/* 	background: rgba(0,0,0,0.85); */
/* 	visibility:hidden; */
	padding:0;
	margin:0;
	overflow:auto;
	
	display: flex;
	flex-flow: column nowrap;
	
	/* allows click-though to map space when child elements are hidden */
	pointer-events: none;
	}
	
#layout_ui_visor {
	box-sizing:border-box;
	overflow: auto;
	background-color: rgba(0,0,0,0.65);
	color: #FFF;
	text-shadow: 1px 1px 1px #000;
	padding: 0.3em 1.5em 0.3em 0.5em ;
	pointer-events: auto; /* capture click events */
	}
#layout_ui_footer {
	box-sizing:border-box;
	overflow: auto;
	background-color: rgba(1,1,1,0.3);
	color: #FFF;
	text-shadow: 1px 1px 1px #000;
	padding: 0.3em 1.5em 0.3em 0.5em ;
	line-height: 1.2em; /* fixes problems with unicode / emojis */
	pointer-events: auto; /* capture click events */
	}
#layout_ui_footer BUTTON {
	min-width: 2.25em;
	margin: 2px 1px 0 0;
	}
#layout_ui_footer BUTTON.active {
	background-color: #54B848;
	}
#layout_ui_center {
	position:relative;
	flex: 85;
	overflow: hidden;
	display:flex;
	flex-flow: row nowrap;
	/* allows click-though to map space when child elements are hidden */
	pointer-events: none;
	}
#layout_ui_news {
	flex: 30;
	overflow: auto;
/* 	background: #181; */
	box-sizing:border-box;
	padding: 1em;
	max-width: 30em;
	min-width: 300px;
	overflow: hidden; /* scrollbars are ugly */
	/* allows click-though to map space when child elements are hidden */
	pointer-events: none;
	}
.layout_ai_headsup { 
	display: block; 
	text-align: right; 
	position: absolute; 
	top: 1em; 
	color: #28a028; 
	font-size: 8px; 
	font-family: monospace;
	}
#layout_ai_headsup { text-align: right; right: 1em; }
#layout_ai_headsup2 { text-align: left; left: 1em; }
#layout_ai_headsup3 { text-align: left; left: 38em; right:30em; }
.layout_ai_headsup .hilite { 
	color: #000;
	background-color: #28a028;
	}
 
#layout_ui_content {
	flex: 70;
	overflow: auto;
/* 	background: #311; */
	box-sizing:border-box;
	/* allows click-though to map space when child elements are hidden */
	pointer-events: none;
	}
/* we need this to get around a firefox bug where 
   scrollbars do not respond to pointer events */
#layout_ui_content.active { 
	pointer-events: auto; 
	}
.pane {
	background: #000; /* override if you want transparency */
	}
	
#layout_ui_visor SPAN { margin-right: 1em; }
#layout_ui_visor SPAN SPAN { margin-right: 0em; }
#layout_ui_visor .turn { color: #FFF; }
#layout_ui_visor .pop { color: #FF2; }
#layout_ui_visor .income { color: #AEA; }
#layout_ui_visor .treasury { color: #7C7; }
#layout_ui_visor .sci { color: #3CF; }
#layout_ui_visor .planets { color: #C92; }

#layout_ui_visor .critical { 
	border: 3px solid #D11; 
	border-width: 0 0 3px 0;
}
#layout_ui_visor .warning { 
	border: 3px solid rgb(255, 255, 0); 
	border-width: 0 0 3px 0;
	}

#layout_ui_main.hidden { visibility:hidden; }
#layout_ui_main.visible { visibility:visible; }
#layout_ui_main.setup { 
	visibility:visible;
	background: #000 url(../img/map/bg/spacebg_044.jpg) 50% 50% no-repeat;
	pointer-events: auto; /* capture click events */
	background-size: cover;
	}
@keyframes scrollbg {
	0% { background-position: 0% 50%; }
	100% {  background-position: 200% 50%; }
	}	
#layout_ui_main .pane {
	box-sizing: border-box;
	padding: 1em; 	
	pointer-events: auto; /* capture click events */
	min-height: 100%;
	}
/* 
flex panes are designed to have wrappers to 
evenly space headers and body elements
+----- .pane.flex -----+
| <==== <header> ====> |
| +----- <main> -----+ |
| | [ DIV  ][  DIV ] | |
| +------------------+ |
+----------------------|
*/

#layout_ui_main .pane.flex {
	display:flex;
	flex-flow: column nowrap;
	overflow: hidden;
	height:100%;
	max-height: 100%;
	box-sizing: border-box;
	padding-bottom: 0;
	margin-bottom: 0;
	}
#layout_ui_main .pane.flex HEADER {
	flex: 1;
	padding-bottom: 1em;
	}
#layout_ui_main .pane.flex MAIN {
	flex: 20;
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
	max-height: 100%;
	overflow: hidden;
	padding-bottom: 1em;
	}
#layout_ui_main .pane.flex MAIN > * {
	margin: 0 0 0 1em;
	overflow-y: auto;
	flex: 1 1 45%;
	max-height: 100%;
	}
#layout_ui_main .pane.flex MAIN > *:first-child {
	margin-left: 0;
	}
#layout_ui_main .pane.flex MAIN > * > *:first-child {
	/* margin-top: 0; */
	}
#layout_ui_main .pane.flex MAIN > .fill {
	flex: 1 1 100%;
	margin-left: 0;
	margin-top: 1em;
	}
	
/* 
ICONLISTS

Use these if you need a column of items
where each item has an icon and some text data.

+----- .iconlist ------+
| +----- .item ------+ |
| |IMG +-- .info ----+ |
| |    + <P>         + |
| |    + <P.subtext> + |
| |    +-------------+ |
| +------------------+ |
+----------------------|
*/
.iconlist {
	display: flex;
	flex-flow: column nowrap;
	padding: 0;
	}
.iconlist .item { 
	display: flex;
	flex-flow: row nowrap;
	vertical-align: middle;
	}	
.iconlist .item > .icon { 
	box-sizing: border-box;
	min-height: 3em;
	min-width: 3em;
	flex: 1 1 3em;
	margin: 0;
	padding: 0;
	}
.iconlist .item IMG { 
	box-sizing: border-box;
	min-height: 3em;
	min-width: 3em;
	max-height: 5em;
	flex: 1 1 3em;
	margin: 0;
	padding: 0.25em;
	object-fit: contain;
	}
.iconlist .item IMG.right {
	order: 2;
	} 
.iconlist .item > .info { 
	box-sizing: border-box;
	flex: 7;
	margin: 0;
	padding: 0.5em;
	}
.iconlist .item P { 
	font-size: 150%;
	margin: 0 0 0.25em 0;
	padding: 0;
	}
.iconlist .item .subtext {
	font-size: 1rem;
	color:  #3C96BA;
	}	
.iconlist .item.selected { 
	background: #3C96BA;
	}		
.iconlist .item:hover { 
	background: #54B848;
	}		
.iconlist .item.selected .subtext {
	color: #11436b;
	}
	


	
#layout_ui_side { 
	order: 20;
	flex: 30;
	width: 405px; /* 30% */
	min-width: 405px; /* 300px */
	max-width: 405px;
	background: rgba(0,0,0,1);
	color:#FFF;
	box-sizing:border-box;
	margin:0 -1px 0 0;
	transform-style: preserve-3d;
	transform: translate3d(0, 0, 0);
	/* overflow-y: auto; */
	overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
	pointer-events: auto; /* capture click events */
/* 	visibility:hidden; */
	}
#layout_ui_side::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}
#layout_ui_side > DIV { padding: 1em;  }

#layout_ui_nav { 
	margin:0;
	order: 30;
	flex: 1;
	display: flex;
	flex-flow: column nowrap;
	background: #000;
	padding: 3px;
	transition: all 0.30s;
	pointer-events: auto; /* allow clicks */
/* 	visibility:hidden; */
	}
	
/* hides all UI elements including nav bar if exclusive UI is turned on */
.exclusive_ui #layout_ui_nav {
	display:none;
	}	
	
/* modal dialog layer */
#layout_modal {
	position:absolute; 
	padding:0; 
	margin:0; 
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 400;	
	background: rgba(0,0,0,0.75);
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	}
	
#layout_modal .dialog {	
	font-size: 150%;
	color: #FFF;
	padding: 2em;
	min-height: 12em;
	max-height: 90%;
	min-width: 30%;
	max-width: 45em;
	margin: auto;
	box-sizing: border-box;
	background: #000;
	background-image: radial-gradient(circle closest-corner at 50% 50% , transparent 0%, transparent 50%, #3C96BA 100%);
	border: #777 outset 1px;
	border-radius: 0.5em;
	overflow-y: auto;
	/* animations*/
	transform-origin: 50% 50%;
	animation: trekIn 0.25s linear;
	}
	
#layout_modal .event_text {
	margin: 1em 0;
	}
	
#layout_modal .event_option {
	padding: 0.5em; 
	margin: 0.75em 0;
	border-radius: 0.5em;
	border: 1px outset #347490;
/* 	background: #4BA5CC; */
/* 	background: rgba(75,165,205,0.7); */
	background: #347490;
	cursor:pointer;
	clear:right;
	}
#layout_modal .event_option:hover {
	background: #54B848;
	}
#layout_modal .event_option > *:first-child {
	margin-top: 0;
	margin-bottom: 0.25em;
	padding-top: 0;
	font-weight: bold;
	}

	

	
	
/* SIDE PANEL ANNOUNCEMENTS */
#layout_ui_news > DIV  {
	box-sizing: border-box;
	border-radius: 1em;
	padding: 0.5em 1em 0.5em 4em;
	margin: 0 0 1em 0;
	background: 
		url(../img/layout/notice_good.png) no-repeat 8px 8px,
		linear-gradient( to right, #218a2d 0, #218a2d 48px, rgba(0,0,0,0.78) 48px, rgba(0,0,0,0.78) 100%)
		;	
	color: #FFF;
	min-height: 3em;
	border: 1px solid #218A2D;
	}

#layout_ui_news > * {	
	pointer-events: auto;
	cursor:pointer;
	}
	
#layout_ui_news .x {
	display: block;
	float:right;
	line-height: 1em;
	width: auto;
	background-color: rgba(255,25,25,0.50);
	color: #FFF;
	border-radius: 0.25em;
	text-align:center;
	padding: 0.1em;
	text-decoration: none;
	font-size:85%;
	margin: 0 0 1em 1em;
	padding: 0.35em 0.9em 0.45em 0.9em;
	color: #FAA;
	font-weight: bold;
	}
	
#layout_ui_news P {
	margin: 0 0 0.5em 0;
	}
#layout_ui_news H3 {
	font-size: 80%;
	margin-bottom: 0.5em;
	}
#layout_ui_news > DIV.good {	
	background: 
		url(../img/layout/notice_good.png) no-repeat 8px 8px, 
		linear-gradient( to right, #218a2d 0, #218a2d 48px, rgba(0,0,0,0.78) 48px, rgba(0,0,0,0.78) 100%) no-repeat top left
		;
	border-color: #218A2D;
	}
#layout_ui_news > DIV.good H3 {
	color: #218A2D;
	}
#layout_ui_news > DIV.bad {	
	background: 
		url(../img/layout/notice_bad.png) no-repeat 8px 8px, 
		linear-gradient( to right, #D11 0, #D11 48px, rgba(0,0,0,0.78) 48px, rgba(0,0,0,0.78) 100%) no-repeat top left
		;
	border-color: #D11;
	}
#layout_ui_news > DIV.bad H3 {
	color: #D11;
	}
#layout_ui_news > DIV.neutral {	
	background: 
		url(../img/layout/notice_neutral.png) no-repeat 9px 4px,
		linear-gradient( to right, #3B5A9A 0, #3B5A9A 48px, rgba(0,0,0,0.78) 48px, rgba(0,0,0,0.78) 100%) no-repeat top left
		;
	border-color: #3B5A9A;
	}
#layout_ui_news > DIV.neutral H3 {
	color: #6091D1;
	}
#layout_ui_news > DIV.info {	
	background: 
		url(../img/layout/notice_neutral.png) no-repeat 9px 4px,
		linear-gradient( to right, #808080 0, #808080 48px, rgba(0,0,0,0.78) 48px, rgba(0,0,0,0.78) 100%) no-repeat top left
		;
	border-color: #808080;
	}
#layout_ui_news > DIV.info H3 {
	color: #808080;
	}
	
	
	
	
	
/* BASIC STYLES */	
	
I,EM { font-style: italic; }

BODY {
	font-family: 'Roboto Condensed', sans-serif;
	color: #FFF;
	}
	
h1,h2,h3 {
	font-family: 'ethnocentric';
	color: #FFF;
	}
h1 { font-size: 300%; }
h2 { font-size: 150%; }
h3 { font-size: 135%; }

@media screen and (max-width: 1025px) {
	h1 { font-size: 225%; }
}

A {color:white;}

TD,TH { padding: 0.2em; text-align:left; }
TD.center, TH.center { text-align:center; }
TD.right, TH.right { text-align:right; }
TD.left, TH.left { text-align:left; }

TABLE {
	margin: 1em 0;
	border-spacing: 0.25em;
    border-collapse: collapse;
}

TABLE.full {
	width:100%;
	}
TABLE.separate { 
    border-spacing: 0 0.35em;
    border-collapse: separate;
}	
TABLE.tight TD, TABLE.tight TH { padding: 0.15em; border-spacing: 0.15em; }
TABLE.wide TD, TABLE.wide TH { padding-right: 0.5em; padding-left: 0.5em; border-spacing: 0.5em; }
	
TABLE.borderless, TABLE.borderless TD, TABLE.borderless TH {
	border:none;
	}
TABLE.centered {
	width: auto;
	margin-left: auto;
	margin-right: auto;
	}

TABLE.headers_right TH {
	text-align:right;
}
TABLE.env TD {
	background-color: #000;
	border:#666 1px solid;	
}


TABLE.env TD.livable {
	background-color: #888;
}

TABLE.env TD.ideal {
	background-color: #CCC;
	border-color: #FFF;
}

.good { color: #AEA; }
.bad { color: #f55c5c; } /* formerly D21 */
.alert { color: #FCF742; }
.zero { color: #666; }
.dim { color: #888; }

.topless {margin-top: 0 !important;}
.bottomless {margin-bottom: 0 !important;}
.marginless {margin: 0 !important;}
.unpadded {padding: 0 !important;}
.clickable { cursor: pointer; pointer-events: auto; }

.bold { font-weight:bold; }
.strike, .strikeout { text-decoration: line-through; }
.small { font-size: 80%; }
.big { font-size: 120%; }
.bigger { font-size: 150%; }
.biggest { font-size: 200%; }
.biggester { font-size: 300%; }

.pretty TD { color: #4BA5CC; }


TABLE.hover_rows TR:hover {
	background: rgba(75, 165, 204, 0.65);
	}
TABLE.clickable {
	cursor: pointer;
	}

/* ICONS */


BODY, SVG {
  fill: currentColor;
}
.icon {
	display: block;
	width: 1em;
	height: 1em;
}

#layout_ui_nav A {
	display:block;
	color:#FFF;
	text-decoration:none;
	margin:0;
	flex: 0 0 0;
	margin: 3px;
	border: 1px solid #AAA;
	border-radius:0.15em;
/* 	background-color:#000; */
/* 	text-shadow: #6CE 0 0 0.3em; */
}


#layout_ui_nav .icon {
	font-size: 32px;
	line-height: 32px;
	padding: 0.1em;
}

#layout_ui_nav A:hover {
	 /* does nothing ??? */
	 background-color: #666 !important;
}

/* A#nav_button_turn { margin-top:auto; } */
A#nav_button_auto_turn { margin-top:auto; }



p {
    margin-top: 1em;
    margin-bottom: 1em;
}
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
P.centered, DIV.centered {
	text-align:center;
	}


/* BUTTONS */	
button, .button_rack A, A.button {
	display: inline-block;
	color: #FFF;
	background-color: #4BA5CC;
/* 	background-color: #347490; */
	border-radius: 0.25em;
	border:none;
	margin-right: 0.25em;
	padding: 0.25em 0.5em;
	text-decoration:none;
	}
button:hover, .button_rack A:hover, A.button:hover {
	background-color: #6cbee0;
	}
button:hover:active, .button_rack A:hover:active, A.button:hover:active, button.active, A.button.active {
	background-color: #2f6c86;
	}
button.alt, A.button.alt, .button_rack A.alt,
button.good, A.button.good, .button_rack A.good {
	background-color: #54B848;
	color: #FFF;
	}
button.alt:hover, A.button.alt:hover, .button_rack A.alt:hover,
button.good:hover, A.button.good:hover, .button_rack A.good:hover {
	background-color: #59cf4c;
	}
button.alt:hover:active, A.button.alt:hover:active, .button_rack A.alt:hover:active, button.alt.active, A.button.alt.active,
button.good:hover:active, A.button.good:hover:active, .button_rack A.good:hover:active, button.good.active, A.good.button.active {
	background-color: #2d7924;
	}
button.bad, A.button.bad, .button_rack A.bad {
	background-color: #c74d67;
	color: #FFF;
	}
button.bad:hover, A.button.bad:hover, .button_rack A.bad:hover {
	background-color: #e4718a;
	}
button.bad:hover:active, A.button.bad:hover:active, .button_rack A.bad:hover:active, button.bad.active, a.button.bad.active {
	background-color: #9b2a43;
	}
button.cool, .button_rack A.cool, A.button.cool {
	background-color: #999;
	color: #FFF;
	}
button.cool:hover, .button_rack A.cool:hover, A.button.cool:hover {
	background-color: #BBB;
	}
button.cool:hover:active, .button_rack A.cool:hover:active, A.button.cool:hover:active, button.cool.active, a.button.cool.active {
	background-color: #444;
	}
button.ghost, .button_rack A.ghost, A.button.ghost, .ghost {
	opacity: 0.24;
	pointer-events:none;
	cursor: default;
	}
button.big, .button_rack.big A, .button_rack A.big, A.button.big, .button_rack.big button {
	font-size: 150%;
	}
button.small, .button_rack.small A, .button_rack A.small, A.button.small, .button_rack.small button {
	font-size: 80%; 
	}
	
.button_rack.button_rack_fill,
.button_rack.fill {
	display:flex;
	flex-flow: row wrap;
	margin-left: -0.125em;
	margin-right: -0.125em;
	}
.button_rack.button_rack_fill > *,
.button_rack.fill > * {
	flex: 1;
	margin: 0.125em;
	}
.button_rack.fill.halves > * {
	flex: 1 1 46%;
}
.button_rack.fill.thirds > * {
	flex: 1 1 30%;
}
.button_rack.fill.quarters > * {
	flex: 1 1 22%;
}
.button_rack.fill.fifths > * {
	flex: 1 1 18%;
}
	
button.right { float: right; margin: 0 0 1em 1em; }	

button:last-child, A.button:last-child { margin-right: 0; }
	
/* OFFSET BOXES */
DIV.offset {
	box-sizing: border-box;
	border: 5px #11436B outset;
	border-radius: 1.0em;
	padding: 1.5em;
	margin: 1em;
	flex: 1 1;
	background: rgb( 17, 67, 107);
	/* background: rgba( 17, 67, 107, 0.95); */
/* 	background: rgba( 0,0,0, 0.65); */
	}
DIV.offset.hilite {
	border-color: #346b97;
	background: #346b97;
	}
DIV.offset.transp {	
	background: rgba(0,0,0,0.6);
	border: 1px #222 outset;
	border-radius: 1em;
	padding: 2em;
	margin: 1em 0;
	}	
	
	
/*A#nav_button_map {color: #FFF; border-color: #FFF; }
A#nav_button_galaxy {color: #C4E; border-color: #C4E; }
A#nav_button_planets {color: #F44; border-color: #F44; }
A#nav_button_econ  {color: #8F8; border-color: #8F8; }
A#nav_button_gov {color: #DD3; border-color: #DD3; }
A#nav_button_spy {color: #77B; border-color: #77B; }
A#nav_button_tech  {color: #393; border-color: #393; }
A#nav_button_diplo {color: #FFF; border-color: #FFF; }
A#nav_button_shipdes {color: #E62; border-color: #E62; }
A#nav_button_victory {color: #F99; border-color: #F99; }
A#nav_button_opt {color: #888; border-color: #888; }
A#nav_button_help {color: #888;  border-color: #888; }
A#nav_button_turn {color: #FFF; border-color: #FFF; margin-top:auto; }*/
	
	
	
/* FORMS */

INPUT, SELECT, OPTION { color: #333; }
progress[value] {
	position: relative;
	margin: 0;
	padding: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
		appearance: none;
	border: none;
	width: 100%;
	height: 1.25em;
	/* FF container defaults */
	border-radius: 3px;
	background-color: #172936;	  
	}
progress[value]::-webkit-progress-bar {
	border-radius: 3px;
	background-color: #172936;
	}
progress[value]::-webkit-progress-value {
	background-image: linear-gradient( to bottom, #45708F 0%, #6693B3 33%, #6693B3 66%, #45708F 100%);
	position: relative;
	border-radius:3px;
	}
progress[value]::-moz-progress-bar {
	background-image: linear-gradient( to bottom, #45708F 0%, #6693B3 33%, #6693B3 66%, #45708F 100%);
	border-radius:3px;
	}
progress::-moz-progress-bar,
progress::-webkit-progress-value {
	transition : width 0.5s ease-out; /* NOTE: doesn't seem to work :-( */
	}

/* colors */ 
progress.good[value]::-webkit-progress-value,
progress.good[value]::-moz-progress-bar,
progress.full[value]::-webkit-progress-value,
progress.full[value]::-moz-progress-bar {
	background-image: linear-gradient( to bottom, #54B848 0%, #00DC00 33%, #00DC00 66%, #54B848 100%);
	}
progress.bad[value]::-webkit-progress-value,
progress.bad[value]::-moz-progress-bar {
	background-image: linear-gradient( to bottom, #a72626 0%, #d15353 33%, #d15353 66%, #a72626 100%);
	}
progress.warning[value]::-webkit-progress-value,
progress.warning[value]::-moz-progress-bar {
	background-image: linear-gradient( to bottom, #dfa527 0%, #f0bc2d 33%, #f0bc2d 66%, #dfa527 100%);
	}
progress.neutral[value]::-webkit-progress-value,
progress.neutral[value]::-moz-progress-bar {
	background-image: linear-gradient( to bottom, #45708F 0%, #6693B3 33%, #6693B3 66%, #45708F 100%);
	}
	
/* sizes */
progress.short {
	height:0.5em;
	}
progress.skinny {
	height:0.25em;
	}




INPUT.ghost, INPUT.disabled {
	pointer-events: none; 
	opacity: 0.24;
	}	

OUTPUT.random { font-style: italic; } 



/* pretty sliders */
input[type=range].pretty {
  -webkit-appearance: none;
/*   width: 100%; */
  margin: 0 0;
  height: 12px;
  padding: 0;

}
input[type=range].pretty:focus {
  outline: none;
}
input[type=range].pretty::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 25px;
  border: 0px solid #010101;
}
input[type=range].pretty::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1.5px solid #000000;
  height: 12px;
  width: 16px;
  border-radius: 16px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -4px;
}
input[type=range].pretty:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range].pretty::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 25px;
  border: 0px solid #010101;
}
input[type=range].pretty::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1.5px solid #000000;
  height: 12px;
  width: 16px;
  border-radius: 16px;
  background: #ffffff;
  cursor: pointer;
}

/* custom select boxes - https://www.filamentgroup.com/lab/select-css.html */
SELECT {
	display: block;
/* 	font-size: 16px; */
	font-family: sans-serif;
/* 	font-weight: 700; */
	color: #444;
/* 	line-height: 1.3; */
	padding: .6em 1.4em .5em .8em;
/* 	width: 100%; */
	max-width: 2em; 
	max-width: 100%; 
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .25em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
SELECT::-ms-expand {
	display: none;
}
SELECT:hover {
	border-color: #888;
}
SELECT:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
SELECT option {
	font-weight:normal;
}
/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] SELECT, :root:lang(ar) SELECT, :root:lang(iw) SELECT {
	background-position: left .7em top 50%, 0 0;
	padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
SELECT:disabled, SELECT[aria-disabled=true] {
	color: graytext;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}
SELECT:disabled:hover, SELECT[aria-disabled=true] {
	border-color: #aaa;
}


/* WIDGETS / CUSTOM ELEMENTS */
.versus-widget .versus-bar {
	height: 1em;
	background-color: #333;
	border-radius: 0.25em;
	padding:0;
	margin: 0 0 0.75em 0;
}



/* MAP */

#flash_caret {
	width: 1200px;
	height: 1200px;
	position:absolute;
	background: rgba(0,255,50,0.15);
	border: rgba(0,255,50,0.75) solid 50px;
	animation: blink3 2.0s both linear;
	z-index:-5;
	}
.xtreme_zoom #flash_caret {	
	animation: none;
	}
	
/* map screen planet containers */
.mapobj_container {
	position:absolute;
	height:150px;
	width:150px;
	margin-left: -75px;
	margin-top: -75px;
	border:10px solid rgba(255,255,255,0.0);
	border-radius:50%;
	box-sizing: border-box;
	background: /* url(../img/map/air_collect_base.png) 50% 50% no-repeat, */url(../img/map/air_collect_sparkle.png) 50% 50% no-repeat;
	background-size: 50% 50%;
	text-align:center;
/* 	transition: 0.25s all; */
	/* turn on background-size if you want maximum bling. its hard on older machines */
	transition: /*background-size 0.75s,*/ border 0.25s, opacity 0.75s, visibility 0.75s;
	opacity: 1.0;
	z-index: 10;
}
.mapobj_container.star_red, .star.star_red {
	background-image: url(../img/map/air_collect_sparkle_red.png);
}
.mapobj_container.star_orange, .star.star_orange {
	background-image: url(../img/map/air_collect_sparkle_orange.png);
}
.mapobj_container.star_yellow, .star.star_yellow {
	background-image: url(../img/map/air_collect_sparkle_yellow.png);
}
.mapobj_container.star_green, .star.star_green {
	background-image: url(../img/map/air_collect_sparkle_green.png);
}
.mapobj_container.star_blue, .star.star_blue {
	background-image: url(../img/map/air_collect_sparkle_blue_dark.png);
}
.mapobj_container.star_cyan, .star.star_cyan {
	background-image: url(../img/map/air_collect_sparkle_cyan.png);
}
.mapobj_container.star_purple, .star.star_purple {
	background-image: url(../img/map/air_collect_sparkle_purple.png);
}
.mapobj_container.star_white, .star.star_white {
	background-image: url(../img/map/air_collect_sparkle_white.png);
}
.mapobj_container.star_black, .star.star_black {
	background-image: url(../img/map/air_collect_sparkle_black.png);
}
.mapobj_container.anom_normal {
	background-image: url(../img/map/3dbox_64px_transp.png);
	background-size: 25% 25%;
}


.mapobj_container.in_range:hover/*, .mapobj_container.hilite*/ {
	border-color:rgba(255,255,255,0.55);
	border-width:10px;
	}
/*.mapobj_container.out_range {
	pointer-events: none;
	cursor: not-allowed;
	}*/
.mapobj_container H2,
.mapobj_container H3 {
	color: #FFF;
	padding:5px 0 2px 0;
	margin:-22px 0 0 0;
	width:200%;
	margin-left:-50%;
	font-size:25px;
	white-space: nowrap;
	text-align:center;
	}
.mapobj_container H3 {
	margin-top: 15px;
	font-size: 16px;
	}

.mapobj_container .planet_list {
	color: rgba(255,255,255,0.45);
	margin: 0px 0 8px 0;
	text-align:center;
	width: 150%;
	margin-left:-25%;
}
.mapobj_container .fleet_list {
	position:absolute;
	top: 92px;
	height: 6em; /* allows for overflow parking in crazy situations */
	text-align:center;
	margin: auto;
	width: 150%;
	margin-left:-25%;
}
.mapobj_container .fleet_list A,
.mapobj_container .planet_list A {	
	width: 24px;
	height: 24px;
	font-size: 24px;
	line-height: 24px;
	padding: 0.1em;
	display:inline-block;
	flex:1;
	margin: 0 2px;
	text-decoration:none;
/* 	box-sizing:border-box; */
/* 	border-width: 1px; */
/* 	border: 1px solid white; */
	border-radius: 0.35em;
	}
.mapobj_container .fleet_list A:hover,
.mapobj_container .planet_list A:hover {	
	background: rgba(255,255,255,0.35);
	}
.mapobj_container.unexplored .planet_list,	
.mapobj_container.unexplored .fleet_list A {	
	pointer-events: none;
	cursor: default;
	}
.mapobj_container .fleet_list .icon,
.mapobj_container .planet_list .icon {	
	width: 20px;
	height: 20px;
	display:inline-block;
	font-size: 20px;
	line-height: 20px;
	padding: 0.1em;
	}
.mapobj_container .planet_list A.settled .icon,
.mapobj_container .fleet_list .icon {	
	filter: drop-shadow( 1px 1px 0 rgba(255,255,255,0.85) );
	}
	
#the_caret {	
	width: 200px;
	height: 200px;
	position:absolute;
	margin-left:-100px;
	margin-top:-100px;
	top: 0;
	left: 0;
	background: url(../img/map/caret.png) 50% 50% no-repeat;
	background-size: cover;
	animation: rotation 7s infinite linear;
	z-index:-1;
	opacity: 0.5;
	}
/*#the_caret.fleet,
#the_caret.fleet_follow {
	background-image: url(../img/map/caret2.png);
	}*/
#the_caret.fleet_follow {
	/* makes fleets scootch on next-turn-button */
	transition: top 0.7s ease-out 0s, left 0.7s ease-out 0s;	
	}
.nofx #the_caret,
.xtreme_zoom #the_caret {
	box-sizing: border-box;
	width: 250px;
	height: 250px;
	margin-left:-125px;
	margin-top:-125px;
	position:absolute;
	border: 10px solid #15FF00;
	border-radius: 2em;
	background: none;
	animation: none;
	transition:none;
	opacity: 1;
	display:block !important;
	}	
	
.ai_caret {	
	width: 300px;
	height: 300px;
	position:absolute;
	transform-origin: 50% 50% 0; 
	transform: translateX(-50%) translateY(-50%);
	top: 0;
	left: 0;
	border: 10px solid #FFF;
	border-radius: 100%;
	z-index:-5;
	opacity: 0.3;
	padding: 0;
	box-sizing: border-box;
	pointer-events: none;
	}
.ai_caret.small {	
	width: 150px;
	height: 150px;
	}
.ai_caret.good {	border-color: #3F3; }
.ai_caret.bad {	border-color: #D11; }
.ai_caret.neutral {	border-color: #39F; }
.ai_caret.shared {	border-style: dashed; }
.ai_caret.threat {	
	border-radius: 0;
	border-style: double;
	border-color: #F90;
	opacity: 0.75;
	padding: 5px;
	box-sizing: content-box;
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
	}
.ai_caret.threat.system {
	padding: 25px;
	}
.xtreme_zoom .ai_caret.threat {
	padding: 20px;
	opacity: 1;
	}
.xtreme_zoom .ai_caret.threat.system {
	padding: 50px;
	opacity: 1;
	}
.ai_caret.staging_pt { 
	width: 400px;
	height: 400px;
	transform: translateX(-50%) translateY(-47.6%);
	font-size: 400px; 
	text-align:center; 
	vertical-align:middle;
	line-height: 400px; 
	opacity: 0.15;
	border:none;
	}	
.ai_caret.staging_pt:before { content: '✜'; } 
	
.empire_box {
	position:absolute;
	box-sizing: border-box;
	border: 2px dashed #FFF;
	z-index: -10;
	}

/* 
Exploration and range status determine which parts are displayed 
hidden: star is completely invisible on the map
unexplored: can't see name, fleets, planets
in_range: can see name, fleets, planets
explored: brighter nametag, planets are clickable
settled
*/
.mapobj_container.unexplored H2,
.mapobj_container.unexplored H3,
.mapobj_container.unexplored .planet_list,
.mapobj_container.unexplored .fleet_list {
	visibility: hidden;
	}
.mapobj_container.in_range.unexplored H2,
.mapobj_container.in_range.unexplored .planet_list,
.mapobj_container.in_range.unexplored .fleet_list {
	visibility: visible;
	}
.mapobj_container.in_range H2 {
	animation: fadeIn 0.7s linear;
	color: rgba(255,255,255,0.18);   
	}	

/* .mapobj_container.explored H3, */
.mapobj_container.explored H2 {
/* 	visibility: visible; */
	animation: fadeIn 0.7s linear;
 	color: rgba(255,255,255,0.80); 
	}
.mapobj_container.settled H3,
.mapobj_container.settled H2 {
	text-shadow: 2px 2px 1px #000;
	color: #FFF;
	}
.mapobj_container.settled.unexplored H3,
.mapobj_container.settled.unexplored H2 {
	text-shadow: none;
	color: rgba(0,0,0,0.18);
	}
.mapobj_container.hidden {
	display:none;
	}

/* anomaly titles have a simpler visibility scheme:
invisible when unexplored, dim when explored */
.mapobj_container.explored H3 {
	visibility: visible;
	animation: fadeIn 0.7s linear;
	color: rgba(255,255,255,0.32); 
	}

.xtreme_zoom .mapobj_container {
	background-size:120% 120%;
	}
.xtreme_zoom .mapobj_container.anom {
	background-size:55% 55% !important;
	}
.xtreme_zoom .hide_xtreme_anoms .mapobj_container.anom {
	display:none;
	}
/* turn this on if you want maximum bling. its hard on older machines */
/*.mapobj_container > * { 
	transition: opacity 0.5s;
	}*/
.xtreme_zoom .mapobj_container.unexplored { 
	background-size:65% 65%;
	}
.xtreme_zoom .option_dim_unexplored .mapobj_container.unexplored { 
	opacity: 0.25; 
	background-size: 120% 120%;
	}
.xtreme_zoom .option_dim_unexplored .mapobj_container.unexplored.in_range { 
	opacity: 1; 
	}
.xtreme_zoom .mapobj_container > * { 
	display:none;
	opacity: 0; /* if you want transition fx, you cant use display:none */
	}
/* now we're just being abusive */
.xtreme_zoom .mapobj_container.settled > H2 {
	display:block;
	opacity: 1;
	padding:0;
	margin: 0;
	width:100%;
	height:100%;
	color: rgba(1,1,1,0);
	border-radius: 10%;
	background-size: 150% 150%;
	background-position: 50% 50%;
	text-shadow:none;
	}	

	
/* FLEETS EN ROUTE */
.fleet_en_route {
	z-index: 10; 
	position:absolute;
	border: 2px solid #FFF;
	border-radius: 0.3em;
	width: 26px;
	height: 26px;
	display:inline-block;
	/* left and top are set dynamically */
	margin-top: -16px;
	margin-left: -16px;	
	top:0;
	left:0;
	background: #000;
/* 	box-shadow: 1px 1px 1px #FFF; */
	/* makes fleets scootch on next-turn-button */
	transition: top 0.7s ease-out 0s, left 0.7s ease-out 0s;
	}
.fleet_en_route .icon {
	width: 22px;
	height: 22px;
	display:inline-block;
	font-size: 22px;
	line-height: 22px;
	padding: 2px;
	text-align:center;
	vertical-align:middle;
/* 	filter: drop-shadow( 1px 1px 1px rgba(255,255,255,1) ); */
	}
.dest_line {
	position:absolute;
	height: 2px; 
	margin-top:-1px;
	transform-origin: 0% 0%; 
	background-color: #999;
	z-index:5; /* changing this to 9 has weird graphical jank in FF 57 */
	/* makes fleets scootch on next-turn-button */
	transition: top 0.7s ease-out 0s, left 0.7s ease-out 0s, width 0.7s ease-out ;
	}
/* [!]OPTIMIZE possibly consider hiding these if there are lot; kills framerates */
.xtreme_zoom .dest_line {
/* 	background-color: #FFF; */
/* 	height: 4px;  */
	display: none;
	}
.xtreme_zoom .fleet_en_route,
.xtreme_zoom .fleet_en_route .icon,
.xtreme_zoom .fleet_en_route A,
.xtreme_zoom .dest_line {
	transition: none !important; /* prevent browser from exploding */
	text-decoration:none;
	}	
.xtreme_zoom .fleet_en_route .icon {
	display:none;
	}
.xtreme_zoom .fleet_en_route {
	border:none;
	background: none;
	border-radius: 0;
	}
.xtreme_zoom .fleet_en_route:before {
	content:'\25A0\FE0E'; /* ◼ */
	font-size:40px;
	text-decoration:none;
	}
	
	
	
/* PLANET SIDEBAR */
#layout_ui_side > .planet {
	margin-top:-1em;
/* 	background-image: url(../img/planets/planet_00.png) ; */
	background-position: calc(100% + 100px) -100px ;
	background-repeat: no-repeat;
	min-height: 400px; /* make room for planet image */
	/* if you want LCARS titles to be in the border 
	with negative margins, you cant use overflow-auto! 
	*/
	/* overflow:auto; */
	}
	
.wrapper {
	padding: 0.5em;
	margin: 1em 0 1em 0;
	background-color: rgba(255,255,255,0.10);
	border-radius: 8px;
	}
		
#layout_ui_side > .planet NAV {
	display:block;
	width: 100%;
	margin: 0 0 0.5em 0;
	padding: 0;
	}
	
#layout_ui_side > .planet NAV .button {
	display:inline-block;
	background-color: rgba(0,0,0,0.75);
	border: 1px solid #555;
	color: #999;
/* 	width: 15%; */
	box-sizing: border-box;
	margin: 0 0 0 0;
	padding: 0.2em 0.65em;
	font-size: 70%;
	text-align:center;
	text-decoration:none;
	font-weight:bold;
	letter-spacing: 0.2em;
	}
#layout_ui_side > .planet NAV .right {
	margin: 0;
	border-bottom-right-radius: 2em;
	border-right:none;
	padding-right: 2em;
	}
#layout_ui_side > .planet NAV .left {
	border-bottom-left-radius: 2em;
	border-left:none;
	padding-left: 2em;
	}
	
	
#layout_ui_side > .planet H2 {
	text-shadow: #000 2px 2px 2px;
	margin-bottom: 0.25em; 
	padding: 0.2em; 
	text-align:center;
/*	background-image: linear-gradient( to right, 
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,1) 25%,
		rgba(255,255,255,1) 75%,
		rgba(255,255,255,0) 100%
		);*/
	}

.planet .throttle_meter { 
	height: 2px;
	background-color: #222;
	margin: 0.5em;
	padding: 0;
	overflow: show;
	position:relative;
	width: 80%; /* helps align with selector buttons */
	margin-left: 10%;
	}
.planet .throttle_meter .at {
	position: absolute;
	background-color: #666;
	margin: 0;
	padding: 0;
	height: 0.5em;
	width: 0.5em;
	transform: rotate(45deg) translateX(-0.25em) translateY(-0.125em);;
	z-index: 3;
}	
.planet .throttle_meter .target {
	position: absolute;
	background-color: #4BA5CC;
	margin: 0;
	padding: 0;
	height: 0.5em;
	width: 0.5em;
	transform: rotate(45deg) translateX(-0.25em) translateY(-0.125em);;
	z-index: 4;
}	
.planet .throttle_meter .range {
	position: absolute;
	background-color: #666;
	margin: 0;
	padding: 0;
	height: 0.125em;
	transform: translateY(-0.0625em);
	z-index: 2;
	/* width: auto; */
}	
	
.planet .cost > SPAN { margin-right: 0.55em; }
.wrapper .resources > SPAN { margin-right: 0.55em; }

#layout_ui_side > .planet > IMG {
	float:right;
	height: 30px;
	max-width: 70px;
	}		
#layout_ui_side .phys {
	text-shadow: #000 2px 2px 1px;
	background-image: linear-gradient( to right, rgba(0,0,0,0) 10%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0) 90% ); 
	padding: 0.5em 1em; 
	margin: 0.5em -1em;
	text-align:center;
/* 	clear:right; */
	}

#layout_ui_side > .star {
	overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
	}
#layout_ui_side > .star::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
	}

#layout_ui_side .star .phys {
	text-align:left;
	margin-top: -0.25em;
	}
.phys P {
	margin: 0 0 0.25em 0;
	}
.phys svg.icon {
	display:inline;
	}
.phys .goodies SPAN {
	margin: 0.25em;
	display: inline-block;
	}
.phys P.env_label {
	margin: 0 0 0.20em 0;
	padding-top:0;
/* 	text-align:right; */
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight:bold;
/* 	font-size:100%; */
	}
.phys P.env_stats {
	color: #999;
	font-size: 80%;
/* 	padding-top: 0.25em; */
/* 	text-align:right; */
/* 	clear:both; */
	}
.phys DIV.size {
	font-size: 200%;
	font-weight: bold;
	color: #FFF;
	}
.phys DIV.size SPAN {
	display: inline-block;
	line-height: 0.4;
	}
.phys DIV.size SPAN {
	margin-top: 0.25em;
	margin-right: 0.26em
	}
.phys DIV.size SPAN > SPAN {
	font-size: 0.8rem;
	line-height: 1.5em;
	font-weight: normal;
	text-shadow: #000 1px 1px 1px;
	}
.star .phys {
	padding: 0;
	margin: 0.5em 0 0.5em 0;
	text-align:left;
	}
.star .phys > DIV.size {
	font-size: 130%;
	padding-top: 0.35em;
	}
/*#layout_ui_side .star .phys DIV.size SPAN > SPAN {
 	display:none; 
	}*/
.phys DIV.size DIV { 
	box-shadow: 2px 2px 2px rgba(0,0,0,0.75); 
	background-color: #FFF; 
	border-radius:2px;
	height: 3px; 
	width: 100%;
	margin: 3px 1em 3px 0; 
	clear:left;
	}
.phys .pop { color: #FAA; }
.phys .inf { color: #FF3; }
.phys .size { color: #29F; }
.phys .mine { color: #E68200; }
.phys .en { color: #FF59FC; }

.phys P.special {
	font-style:italic;
	}

.env_box {
	width: 92px;
	height: 92px;
/* 	background: rgba(0,0,0,0.55); */
	border: 1px solid #999;
	border-radius: 0.5em;
	overflow:hidden;
/* 	margin-left: auto; */
	box-shadow: 3px 3px 2px black;
	position:relative;
	}
.env_box .target {
	position:absolute;
	width: 20%;
	height: 20%;
	border: 1px solid #FFF;
	margin-left: 0;
	margin-top: 0;
	box-sizing: border-box; 
	border-radius: 2px;
	z-index: 2;
	border-color: #AEA;
	}
.env_box .hab {
	position:absolute;
	width: 100%;
	height: 100%;
	line-height: 92px;
	text-align: center;
	font-size: 4em;
	font-weight: bold;
	opacity: 0.35;
	color: #AEA;
	}
.grav1 .env_box .target { border-width: 3px; }
.grav2 .env_box .target { border-width: 5px; }
.grav3 .env_box .target { border-width: 7px; }
.grav4 .env_box .target { border-width: 10px; }
.atm0.tmp0 .env_box .target { margin-left: 0%; margin-top: 0%; }
.atm1.tmp0 .env_box .target { margin-left: 20%; margin-top: 0%; }
.atm2.tmp0 .env_box .target { margin-left: 40%; margin-top: 0%; }
.atm3.tmp0 .env_box .target { margin-left: 60%; margin-top: 0%; }
.atm4.tmp0 .env_box .target { margin-left: 80%; margin-top: 0%; }
.atm0.tmp1 .env_box .target { margin-left: 0%; margin-top: 20%; }
.atm1.tmp1 .env_box .target { margin-left: 20%; margin-top: 20%; }
.atm2.tmp1 .env_box .target { margin-left: 40%; margin-top: 20%; }
.atm3.tmp1 .env_box .target { margin-left: 60%; margin-top: 20%; }
.atm4.tmp1 .env_box .target { margin-left: 80%; margin-top: 20%; }
.atm0.tmp2 .env_box .target { margin-left: 0%; margin-top: 40%; }
.atm1.tmp2 .env_box .target { margin-left: 20%; margin-top: 40%; }
.atm2.tmp2 .env_box .target { margin-left: 40%; margin-top: 40%; }
.atm3.tmp2 .env_box .target { margin-left: 60%; margin-top: 40%; }
.atm4.tmp2 .env_box .target { margin-left: 80%; margin-top: 40%; }
.atm0.tmp3 .env_box .target { margin-left: 0%; margin-top: 60%; }
.atm1.tmp3 .env_box .target { margin-left: 20%; margin-top: 60%; }
.atm2.tmp3 .env_box .target { margin-left: 40%; margin-top: 60%; }
.atm3.tmp3 .env_box .target { margin-left: 60%; margin-top: 60%; }
.atm4.tmp3 .env_box .target { margin-left: 80%; margin-top: 60%; }
.atm0.tmp4 .env_box .target { margin-left: 0%; margin-top: 80%; }
.atm1.tmp4 .env_box .target { margin-left: 20%; margin-top: 80%; }
.atm2.tmp4 .env_box .target { margin-left: 40%; margin-top: 80%; }
.atm3.tmp4 .env_box .target { margin-left: 60%; margin-top: 80%; }
.atm4.tmp4 .env_box .target { margin-left: 80%; margin-top: 80%; }

.atm0.tmp0 .env_label { color: #666666; }
.atm1.tmp0 .env_label { color: #888888; }
.atm2.tmp0 .env_label { color: #DDDDDD; }
.atm3.tmp0 .env_label { color: #90C8F5; }
.atm4.tmp0 .env_label { color: #3976A8; }
.atm0.tmp1 .env_label { color: #CCA9A9; }
.atm1.tmp1 .env_label { color: #E9A8FF; }
.atm2.tmp1 .env_label { color: #9E6F3E; }
.atm3.tmp1 .env_label { color: #9FE5FC; }
.atm4.tmp1 .env_label { color: #BAD9DB; }
.atm0.tmp2 .env_label { color: #F5B3B3; }
.atm1.tmp2 .env_label { color: #B0B870; }
.atm2.tmp2 .env_label { color: #2CA10B; }
.atm3.tmp2 .env_label { color: #79D938; }
.atm4.tmp2 .env_label { color: #57BCFA; }
.atm0.tmp3 .env_label { color: #CF4242; }
.atm1.tmp3 .env_label { color: #E8DD97; }
.atm2.tmp3 .env_label { color: #F0D871; }
.atm3.tmp3 .env_label { color: #A7EB21; }
.atm4.tmp3 .env_label { color: #E4F2B1; }
.atm0.tmp4 .env_label { color: #DD0000; }
.atm1.tmp4 .env_label { color: #DD4444; }
.atm2.tmp4 .env_label { color: #EE8888; }
.atm3.tmp4 .env_label { color: #FFBBBB; }
.atm4.tmp4 .env_label { color: #FFFF00; }

DIV.planet.atm0.tmp0 { background-image: url(../img/planets/planet_20.png); }
DIV.planet.atm1.tmp0 { background-image: url(../img/planets/planet_19.png); }
DIV.planet.atm2.tmp0 { background-image: url(../img/planets/planet_24.png); } 
DIV.planet.atm3.tmp0 { background-image: url(../img/planets/planet_15.png); }
DIV.planet.atm4.tmp0 { background-image: url(../img/planets/planet_33.png); }
DIV.planet.atm0.tmp1 { background-image: url(../img/planets/planet_16.png); }
DIV.planet.atm1.tmp1 { background-image: url(../img/planets/planet_11.png); }
DIV.planet.atm2.tmp1 { background-image: url(../img/planets/planet_00.png); } 
DIV.planet.atm3.tmp1 { background-image: url(../img/planets/planet_17.png); }
DIV.planet.atm4.tmp1 { background-image: url(../img/planets/planet_23.png); } 
DIV.planet.atm0.tmp2 { background-image: url(../img/planets/planet_01.png); }
DIV.planet.atm1.tmp2 { background-image: url(../img/planets/planet_08.png); }
DIV.planet.atm2.tmp2 { background-image: url(../img/planets/planet_31.png); }
DIV.planet.atm3.tmp2 { background-image: url(../img/planets/planet_21.png); }
DIV.planet.atm4.tmp2 { background-image: url(../img/planets/planet_35.png); }
DIV.planet.atm0.tmp3 { background-image: url(../img/planets/planet_03.png); }
DIV.planet.atm1.tmp3 { background-image: url(../img/planets/planet_27.png); }
DIV.planet.atm2.tmp3 { background-image: url(../img/planets/planet_26.png); }
DIV.planet.atm3.tmp3 { background-image: url(../img/planets/planet_36.png); }
DIV.planet.atm4.tmp3 { background-image: url(../img/planets/planet_02.png); }
DIV.planet.atm0.tmp4 { background-image: url(../img/planets/planet_06.png); }
DIV.planet.atm1.tmp4 { background-image: url(../img/planets/planet_04.png); }
DIV.planet.atm2.tmp4 { background-image: url(../img/planets/planet_10.png); }
DIV.planet.atm3.tmp4 { background-image: url(../img/planets/planet_12.png); }
DIV.planet.atm4.tmp4 { background-image: url(../img/planets/planet_22.png); }

.smallplanetbg .planet.atm0.tmp0 { background-image: url(../img/planets/planet_20s.png); }
.smallplanetbg .planet.atm1.tmp0 { background-image: url(../img/planets/planet_19s.png); }
.smallplanetbg .planet.atm2.tmp0 { background-image: url(../img/planets/planet_24s.png); }
.smallplanetbg .planet.atm3.tmp0 { background-image: url(../img/planets/planet_15s.png); }
.smallplanetbg .planet.atm4.tmp0 { background-image: url(../img/planets/planet_33s.png); }
.smallplanetbg .planet.atm0.tmp1 { background-image: url(../img/planets/planet_16s.png); }
.smallplanetbg .planet.atm1.tmp1 { background-image: url(../img/planets/planet_11s.png); }
.smallplanetbg .planet.atm2.tmp1 { background-image: url(../img/planets/planet_00s.png); }
.smallplanetbg .planet.atm3.tmp1 { background-image: url(../img/planets/planet_17s.png); }
.smallplanetbg .planet.atm4.tmp1 { background-image: url(../img/planets/planet_23s.png); }
.smallplanetbg .planet.atm0.tmp2 { background-image: url(../img/planets/planet_01s.png); }
.smallplanetbg .planet.atm1.tmp2 { background-image: url(../img/planets/planet_08s.png); }
.smallplanetbg .planet.atm2.tmp2 { background-image: url(../img/planets/planet_31s.png); }
.smallplanetbg .planet.atm3.tmp2 { background-image: url(../img/planets/planet_21s.png); }
.smallplanetbg .planet.atm4.tmp2 { background-image: url(../img/planets/planet_35s.png); }
.smallplanetbg .planet.atm0.tmp3 { background-image: url(../img/planets/planet_03s.png); }
.smallplanetbg .planet.atm1.tmp3 { background-image: url(../img/planets/planet_27s.png); }
.smallplanetbg .planet.atm2.tmp3 { background-image: url(../img/planets/planet_26s.png); }
.smallplanetbg .planet.atm3.tmp3 { background-image: url(../img/planets/planet_36s.png); }
.smallplanetbg .planet.atm4.tmp3 { background-image: url(../img/planets/planet_02s.png); }
.smallplanetbg .planet.atm0.tmp4 { background-image: url(../img/planets/planet_06s.png); }
.smallplanetbg .planet.atm1.tmp4 { background-image: url(../img/planets/planet_04s.png); }
.smallplanetbg .planet.atm2.tmp4 { background-image: url(../img/planets/planet_10s.png); }
.smallplanetbg .planet.atm3.tmp4 { background-image: url(../img/planets/planet_12s.png); }
.smallplanetbg .planet.atm4.tmp4 { background-image: url(../img/planets/planet_22s.png); }

.planet { 
	background-repeat: no-repeat; 
	background-position: 50% 50%; 
	}


/* resource colors */
.resources .o { color:#AA7449; }
.resources .s { color:#666666; }
.resources .m { color:#DDDDDD; }
.resources .r { color:#DD1111; }
.resources .g { color:#00FF33; }
.resources .b { color:#0033FF; }
.resources .c { color:#11EEFF; }
.resources .v { color:#EE11FF; }
.resources .y { color:#FFFF00; }
.resources .cash { color:rgb(129, 204, 69); }
.resources .labor { color:rgb(228, 119, 18); }
.resources .ship { color:rgb(196, 28, 28); }
.resources .def { color:rgb(133, 104, 77); }
.resources .res { color:rgb(18, 102, 228); }
.resources .hou { color:rgb(18, 168, 228); }

/* fun symbols we might use later: ◼ ● ◆ ▲ ▰ ⬣ ⬢ ⊕ ⏣ ✪ ▮ */
.resources .o:before { content:'⬢'; }
.resources .s:before { content:'⬢'; }
.resources .m:before { content:'⬢'; }
.resources .r:before { content:'⬢'; }
.resources .g:before { content:'⬢'; }
.resources .b:before { content:'⬢'; }
.resources .c:before { content:'⬢'; }
.resources .v:before { content:'⬢'; }
.resources .y:before { content:'⬢'; }
.resources .cash:before { content:'$'; }

/* pseudo-resources for zone outputs use tagicon styles found later */
/* .resources .labor:before,
.resources .ship:before,
.resources .def:before,
.resources .res:before,
.resources .esp:before,
.resources .gov:before,
.resources .hou:before {
	content: '';
	display: inline-block;
	background: url(../img/icons/svg/boxwire.svg) 50% 50% no-repeat;
	background-size:0.85em 0.85em !important;
	height: 1.25em;
	width: 1.25em;
	margin: 0 0.25em 0 0 ;
	padding: 0.2em;
	vertical-align: middle;
	background-color: rgb(18, 168, 228);
	border-radius: 0.25em;
	box-sizing:border-box;
	}  */
/* .resources .esp:before { content:'🔨'; } */
/* .resources .gov:before { content:'🔨'; } */

/* hivis letters for helping the color blind */
.colorblind .resources .o:before { content:'O'; }
.colorblind .resources .s:before { content:'S'; }
.colorblind .resources .m:before { content:'M'; }
.colorblind .resources .r:before { content:'R'; }
.colorblind .resources .g:before { content:'G'; }
.colorblind .resources .b:before { content:'B'; }
.colorblind .resources .c:before { content:'C'; }
.colorblind .resources .v:before { content:'V'; }
.colorblind .resources .y:before { content:'Y'; }

/* zoning */
.planet .zones {
	display: flex;
	flex-flow: row wrap;
	margin: 1em 0 1em 0;
	}
.planet .zones DIV {
	flex: 1 0 auto;
	height: 43px;
	max-width: 43px;
	min-width:43px;
	width: 43px;
	border: 0px outset #666; 
	border-radius:5px; 
	margin:0px 3px 3px 0px;
	box-sizing: border-box;
	position: relative;
	background-color: #222;
	background-size: 22px 22px !important;
	cursor: help;
	overflow:hidden;
	font-size: 8px;
	padding-left: 2px;
	}
.planet .zones DIV SPAN {
	opacity: 0.7;
	position:relative;
	z-index:2;
	}
.planet .zone.empty {
	border: 1px solid #666;
	background: none;
	cursor: cell;
	}
.star .planet .zone.empty {
	cursor: inherit;
	}
.planet .zone.mining {
	background:#fa9a30 url(../img/icons/svg/cube01.svg) 50% 50% no-repeat; 
	border-color: #fa9a30;
	}
.planet .zone.stardock {
	background:#D11 url(../img/icons/svg/transport.svg) 50% 50% no-repeat; 
	border-color: #D11;
	}
.planet .zone.research {
	background:#14A url(../img/icons/svg/tool.svg) 50% 50% no-repeat; 
	border-color: #14A;
	}
.planet .zone.government {
	background:#666 url(../img/icons/svg/building.svg) 50% 50% no-repeat; 
	border-color: #666;
	}
.planet .zone.housing {
	background:#4cb0e9 url(../img/icons/svg/home.svg) 50% 50% no-repeat; 
	border-color: #4cb0e9;
	}
.planet .zone.economy {
	background:#296 url(../img/icons/svg/coins-1.svg) 50% 50% no-repeat; 
	border-color: #296;
	}
.planet .zone.espionage {
	background:#6c13b3 url(../img/icons/svg/medical.svg) 50% 50% no-repeat; 
	border-color: #6c13b3;
	}
.planet .zone.military {
	background: #98543D url(../img/icons/svg/game.svg) 50% 50% no-repeat; 
	border-color: #98543D;
	}
.planet .zone.special {
	background: #AA509F url(../img/icons/svg/decoration.svg) 50% 50% no-repeat; 
	border-color: #AA509F;
	}
	
/* 
specialized zone images for higher techs
if this gets too fiddly, we could also put the svg filename
right in the zone data and use Aurelia css="background-image: ${zone.img}"
*/
.planet .zone.CIVCAPITOL { background-image: url(../img/icons/svg/building22.svg); }
.planet .zone.PLANETCAPITOL { background-image: url(../img/icons/svg/capitol01.svg); }
/* .planet .zone.HOUSING0A { background-image: url(../img/icons/svg/city.svg); } */
.planet .zone.HOUSING0B { background-image: url(../img/icons/svg/city.svg); }
.planet .zone.HOUSING1A { background-image: url(../img/icons/svg/city.svg); }
.planet .zone.HOUSING1B { background-image: url(../img/icons/svg/city.svg); }
.planet .zone.HOUSING2A { background-image: url(../img/icons/svg/city08.svg); }
.planet .zone.HOUSING2B { background-image: url(../img/icons/svg/city08.svg); }
.planet .zone.HOUSING3A { background-image: url(../img/icons/svg/city02.svg); }
.planet .zone.HOUSING3B { background-image: url(../img/icons/svg/city02.svg); }
.planet .zone.HOUSING4A { background-image: url(../img/icons/svg/city03.svg); }
.planet .zone.SHIP0 { background-image: url(../img/icons/svg/rocket.svg); }
.planet .zone.SHIP1 { background-image: url(../img/icons/svg/transport.svg); }
.planet .zone.SHIP2 { background-image: url(../img/icons/svg/stardock01.svg); }
.planet .zone.SHIP3 { background-image: url(../img/icons/svg/stardock02.svg); }
.planet .zone.SHIP4 { background-image: url(../img/icons/svg/moon.svg); }
.planet .zone.MINE0A { background-image: url(../img/icons/svg/cube01.svg); }
.planet .zone.MINE0B { background-image: url(../img/icons/svg/cube01.svg); }
.planet .zone.MINE0C { background-image: url(../img/icons/svg/cube01.svg); }
.planet .zone.MINE1A { background-image: url(../img/icons/svg/hexagons2.svg); }
.planet .zone.MINE1B { background-image: url(../img/icons/svg/hexagons2.svg); }
.planet .zone.MINE1C { background-image: url(../img/icons/svg/hexagons2.svg); }
.planet .zone.MINE2A { background-image: url(../img/icons/svg/boxwire.svg); }
.planet .zone.MINE2B { background-image: url(../img/icons/svg/boxwire.svg); }
.planet .zone.MINE2C { background-image: url(../img/icons/svg/boxwire.svg); }
.planet .zone.RES0 { background-image: url(../img/icons/svg/tool.svg); }
.planet .zone.RES1 { background-image: url(../img/icons/svg/atom02.svg); }
.planet .zone.RES2 { background-image: url(../img/icons/svg/molecule10.svg); }
.planet .zone.RES3 { background-image: url(../img/icons/svg/prism02.svg); }
				
				
				
				
.planet .zones .start, 
.planet .zones .mid { 
	border-right-width:0 !important; 
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	max-width: 46px;
	min-width: 46px;
	width: 46px;
	margin-right: 0;
	}
.planet .zones .end, 
.planet .zones .mid { 
	border-left-width:0 !important; 
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	background-image:none !important;
	}
	
/* pips / counters */
.planet .zone.only:before, 
.planet .zone.start:before { 
	white-space: pre-wrap;
	display:block;
	font-size: 8pt;
	line-height: 0.8em;
	color: #FFF;
	font-weight: bold;
	text-align:center;
/* 	margin: -0.25em 0 0 0; */
	padding:0;
	}

.planet .zone.L10.start:before,
.planet .zone.L10.only:before { 
	content: '▪▪▪▪▪▪▪▪▪▪';
	}
.planet .zone.L9.start:before,
.planet .zone.L9.only:before { 
	content: '▪▪▪▪▪▪▪▪▪';
	}
.planet .zone.L8.start:before,
.planet .zone.L8.only:before { 
	content: '▪▪▪▪▪▪▪▪';
	}
.planet .zone.L7.start:before,
.planet .zone.L7.only:before { 
	content: '▪▪▪▪▪▪▪';
	}
.planet .zone.L6.start:before,
.planet .zone.L6.only:before { 
	content: '▪▪▪▪▪▪';
	}
.planet .zone.L5.start:before,
.planet .zone.L5.only:before { 
	content: '▪▪▪▪▪';
	}
.planet .zone.L4.start:before,
.planet .zone.L4.only:before { 
	content: '▪▪▪▪';
	}
.planet .zone.L3.start:before,
.planet .zone.L3.only:before { 
	content: '▪▪▪';
	}
.planet .zone.L2.start:before,
.planet .zone.L2.only:before { 
	content: '▪▪';
	}
.planet .zone.L1.start:before,
.planet .zone.L1.only:before { 
	content: '▪';
	}
	
.planet .zone.mid:nth-child(8), 
.planet .zone.start:nth-child(8) {
	max-width: 43px;
	min-width: 43px;
	width: 43px;
	}
	
/* big mode - get rid of this if not useful */
.planet .zones.fat DIV {
	height: 58px;
	max-width: 58px;
	min-width:58px;
	width: 58px;
	background-size: 26px 26px !important;	
	}
.planet .zones.fat .zone.mid:nth-child(8), 
.planet .zones.fat .zone.start:nth-child(8) {
	max-width: 58px;
	min-width: 58px;
	width: 58px;
	}
.planet .zones.fat .start, 
.planet .zones.fat .mid { 
	max-width: 61px;
	min-width: 61px;
	width: 61px;
	}
	
/* little mode - get rid of this if not useful */
.planet .zones.mini {
	margin: 0.5em 0 0.5em 0;
	}
.planet .zones.mini .zone {
	height: 19px;
	max-width: 19px;
	min-width:19px;
	width: 19px;
	background-size: 10px 10px !important;	
	border-radius: 0;
	}
.planet .zones.mini .start, 
.planet .zones.mini .mid { 
	max-width: 22px;
	min-width: 22px;
	width: 22px;
	}
	
.planet .zones.mini .zone.mid:nth-child(8), 
.planet .zones.mini .zone.start:nth-child(8) {	
	max-width: 19px;
	min-width: 19px;
	width: 19px;
	}
.planet .zones.mini DIV:after,
.planet .zones.mini DIV:before {
	content:none !important;
	}

.planet .zones.micro {
	margin: 0.5em 0 0.5em 0;
	}
.planet .zones.micro DIV {
	cursor: inherit;
	}
.planet .zones.micro .zone {
	height: 10px;
	max-width: 6px;
	min-width:6px;
	width: 6px;
	border-radius: 0;
	background-image: none;
	}
.planet .zones.micro .start, 
.planet .zones.micro .mid { 
	max-width: 9px;
	min-width: 9px;
	width: 9px;
	}
	
.planet .zones.micro .zone.mid:nth-child(8), 
.planet .zones.micro .zone.start:nth-child(8) {	
	max-width: 6px;
	min-width: 6px;
	width: 6px;
	}
.planet .zones.micro DIV:after,
.planet .zones.micro DIV:before {
	content:none !important;
	}
	
@keyframes insufzone {
    0% { border-color: #ff0c0c; }
    15% { border-color: #cc2424; }
    35% { border-color: #a31818; }
    50% { border-color: #690808; }
    65% { border-color: #a31818; }
    85% { border-color: #cc2424; }
    100% { border-color: #ff0c0c; }
}
.planet .zones .insuf {
	border: 3px solid #E33;
	/* This effect is nice but eats up CPU - maybe save for high-specs setting */
	/* animation: insufzone 2s infinite alternate; */
	}

.planet .zones .hilite {
	border: 3px solid #2F8;
	}
	
/* progress bar */
/* .planet .zones DIV:before { 
	content: '';
	display:block;
	width:100%;
	left: 0;
	right: 0;
	bottom: 0;
	top: 100%;
	background-color: rgba(255,255,255,0.35);
	position:absolute;
	}	
.planet .zone.pct0, 
.planet .zone.pct00 { opacity: 0.5; }
.planet .zone.pct0:before, 
.planet .zone.pct00:before { top: 100%; }
.planet .zone.pct10:before { top: 90%; }
.planet .zone.pct20:before { top: 80%; }
.planet .zone.pct30:before { top: 70%; }
.planet .zone.pct40:before { top: 60%; }
.planet .zone.pct50:before { top: 50%; }
.planet .zone.pct60:before { top: 40%; }
.planet .zone.pct70:before { top: 30%; }
.planet .zone.pct80:before { top: 20%; }
.planet .zone.pct90:before { top: 10%; }
.planet .zone.pct100:before { top: 100%; } */

	
.planet .zones DIV:before { 
	content: '';
	display:block;
	width:100%;
	left: 0;
	right: 0;
	bottom: 0%;
	top: 0%;
	background-color: rgba(0,0,0,0.35);
	position:absolute;
	}	
.planet .zone.pct0:before { bottom: 0%; }
.planet .zone.pct00:before { bottom: 0%; }
.planet .zone.pct10:before { bottom: 10%; }
.planet .zone.pct20:before { bottom: 20%; }
.planet .zone.pct30:before { bottom: 30%; }
.planet .zone.pct40:before { bottom: 40%; }
.planet .zone.pct50:before { bottom: 50%; }
.planet .zone.pct60:before { bottom: 60%; }
.planet .zone.pct70:before { bottom: 70%; }
.planet .zone.pct80:before { bottom: 80%; }
.planet .zone.pct90:before { bottom: 90%; }	
.planet .zone.pct100:before { display:none; }
	
.planet .zone_detail {
	display: flex;
	flex-flow: row nowrap;
	margin: 1em 0 1em 0;
	}	
.planet .zone_detail > DIV:first-child {
	flex: 6 1 auto;
	}
.planet .zone_detail > DIV:last-child {
	flex: 1 1 auto;
	max-width: 92px;
	}
.planet .zone_detail .zone {
	height: 92px;
	width: 92px;
	border-radius:10px; 
	margin:0 0 0.5em 0;
	background-size: 48px 48px !important;
	}	
.planet .zone_detail P {
	margin: 0 0.5rem 0.4rem 0;
	}
.planet .zone_detail .stats B,
.planet .zone_detail .desc {
	color: #4BA5CC;
	}
.planet .zone_detail .type {
	color: #888;
	font-size: 0.65rem;
	font-weight:bold;
	margin-top: -0.75em;
	text-transform:uppercase;
	letter-spacing:0.25em; 
	font-family: monospace;
	}
.planet .zone_detail .type:first-child { 
	margin-top:0;
	}
.planet .zone_detail .name {
	font-size: 1.25rem;
	}
.planet .zone_detail.unavailable {
	opacity: 0.35;
	pointer-events:none;
	}
	

	
	
	
#layout_ui_side .planet .data SPAN {
	flex:1;
	flex-basis: auto;
	width: 33%;
	font-size: 85%;
	margin: 0.3em auto;
	}
#layout_ui_side > .planet TABLE.prod_queue TD:first-child {
	padding-left: 0;
	text-align:left;
	}
#layout_ui_side > .planet TABLE.prod_queue TD:last-child {
	padding-right: 0;
	text-align:right;
	}
#layout_ui_side > .planet TABLE.prod_queue {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
	}
#layout_ui_side > .planet TABLE.prod_queue SELECT {
	border-width: 0;
	height: 1.25em;
	padding: 0;
	margin: 0;
/* 	line-height: 1.25em; */
	}
#layout_ui_side > .planet TABLE.prod_queue OPTION {
	height: 1.45em;
	}
#layout_ui_side > .planet TABLE.prod_queue BUTTON {
	font-weight:bold;
	}
#layout_ui_side > .planet TABLE.prod_queue BUTTON.bad {
	width: 2em;
	}
#layout_ui_side > .planet TABLE.prod_queue TD {
	padding: 0 0.25em;
	position: relative;
	vertical-align: middle;
	}
#layout_ui_side > .planet TABLE.prod_queue P {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	line-height: 1.45em;
	height: 1.45em;
	padding: 0em 0.2em 0em 0.25em;
	margin: 0.25em 0.5em 0 0;
	overflow:hidden;
	white-space: nowrap;
	width: 100%;
	}
#layout_ui_side > .planet TABLE.prod_queue IMG {
	vertical-align:middle;
	max-height: 1.25em;
	max-width: 1em;
	/* filter: brightness(0) invert(1); */
	}
#layout_ui_side > .planet TABLE.prod_queue SPAN.turns_left {
	color: #7be96f;
	font-weight: bold;
	}
#layout_ui_side > .planet TABLE.prod_queue progress[value] {
	position: relative;
	margin: 4px 0 0 0;
	padding: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
		appearance: none;
	border: none;
	width: 195px;
	height: 1.45em;
	line-height: 1.45em;
	/* FF container defaults */
	border-radius: 3px;
	background-color: #172936;
	}
#layout_ui_side > .planet TABLE.prod_queue progress[value]::-webkit-progress-bar {
	border-radius: 3px;
	background-color: #172936;
	}
#layout_ui_side > .planet TABLE.prod_queue progress[value]::-webkit-progress-value {
	background-image: linear-gradient( to bottom, #45708F 0%, #6693B3 33%, #6693B3 66%, #45708F 100%);
	position: relative;
	border-radius:3px;
	}
#layout_ui_side > .planet TABLE.prod_queue progress[value]::-moz-progress-bar {
	background-image: linear-gradient( to bottom, #45708F 0%, #6693B3 33%, #6693B3 66%, #45708F 100%);
	border-radius:3px;
	}

.planet .sectors {
	display:flex;
	flex-flow: row wrap;
	}
.planet .sectors DIV {
	flex: 0 1 auto;
	height: 32px;
	min-width: 32px;
	border: 1px outset #666;
	border-radius: 0.2em;
	margin: 0 2px 2px 0;
	}
 .planet .sectors .mine {
 	background-color: #E68200;
 	border-color: #E68200;
 	}
 .planet .sectors .prod {
 	background-color: #C40000;
 	border-color: #C40000;
 	}
 .planet .sectors .sci {
 	background-color: #335ED4;
 	border-color: #335ED4;
 	}
 .planet .sectors .gov {
 	background-color: #666;
 	border-color: #666;
 	}
 .planet .sectors .esp {
 	background-color: #963DBF;
 	border-color: #963DBF;
 	}
 .planet .sectors .biz {
 	background-color: #00AD23;
 	border-color: #00AD23;
 	}
 .planet .sectors .def {
 	background-color: #D6CAB4;
 	border-color: #D6CAB4;
 	}
 .planet .sectors .civ {
 	background-color: #FCF742;
 	border-color: #FCF742;
 	}
 .planet .sectors .diplo {
 	background-color: #6ACDF7;
 	border-color: #6ACDF7;
 	}
 
  
  
  
  
#layout_ui_side > .planet > P.alert {
	color: #FFF;
	text-transform: uppercase;
	margin: 0.25em 0;
	padding: 0.25em;
	font-weight: bold;
	font-size: 125%;
	clear:right;
	background-color: rgba(255,0,0,0.75);
	background: linear-gradient(to right, rgba(204,0,0,1) 36%,rgba(204,0,0,0) 78%,rgba(204,0,0,0) 100%);
	/* animation: alert 3.5s infinite ease-out; */
	/* border: 1px solid #FFF; */
	/* border-radius: 0.25em; */
	}



/* 
	this stuff controls the slider styles 
*/
#layout_ui_side > .planet input[type=range] {
	-webkit-appearance: none;
	width: 100%;
	margin: 0;
	background: none;
	}
#layout_ui_side > .planet input[type=range]:focus {
	outline: none;
	}
#layout_ui_side > .planet input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	background: #bcbcbc;
	border-radius: 25px;
	border: 0;
	}
#layout_ui_side > .planet input[type=range]::-webkit-slider-thumb {
	box-shadow: 2px 2px 1px #000000, 0px 0px 2px #0d0d0d;
	border: none;
	height: 15px;
	width: 15px;
	border-radius: 50px;
	background: #6da6ff;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -5px;
	}
#layout_ui_side > .planet input[type=range]:focus::-webkit-slider-runnable-track {
	background: #d3d3d3;
	}
#layout_ui_side > .planet input[type=range]::-moz-range-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	background: #bcbcbc;
	border-radius: 25px;
	border: 0;
	}
#layout_ui_side > .planet input[type=range]::-moz-range-thumb {
	box-shadow: 2px 2px 1px #000000, 0px 0px 2px #0d0d0d;
	border: none;
	height: 15px;
	width: 15px;
	border-radius: 50px;
	background: #6da6ff;
	cursor: pointer;
	}
#layout_ui_side > .planet input[type=range]::-ms-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	color: transparent;
	}
#layout_ui_side > .planet input[type=range]::-ms-fill-lower {
	background: #a5a5a5;
	border: 0;
	border-radius: 50px;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	}
#layout_ui_side > .planet input[type=range]::-ms-fill-upper {
	background: #bcbcbc;
	border: 0;
	border-radius: 50px;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	}
#layout_ui_side > .planet input[type=range]::-ms-thumb {
	box-shadow: 2px 2px 1px #000000, 0px 0px 2px #0d0d0d;
	border: none;
	height: 15px;
	width: 15px;
	border-radius: 50px;
	background: #6da6ff;
	cursor: pointer;
	height: 4px;
	}
#layout_ui_side > .planet input[type=range]:focus::-ms-fill-lower {
	background: #bcbcbc;
	}
#layout_ui_side > .planet input[type=range]:focus::-ms-fill-upper {
	background: #d3d3d3;
	}

#layout_ui_side > .planet .m input[type=range]::-webkit-slider-runnable-track 		{ background: #F5C07A; }
#layout_ui_side > .planet .m input[type=range]::-webkit-slider-thumb 				{ background: #E68200; }
#layout_ui_side > .planet .m input[type=range]:focus::-webkit-slider-runnable-track	{ background: #F5C07A; }
#layout_ui_side > .planet .m input[type=range]::-moz-range-track 				{ background: #F5C07A; }
#layout_ui_side > .planet .m input[type=range]::-moz-range-thumb 				{ background: #E68200; }
#layout_ui_side > .planet .m input[type=range]::-ms-fill-lower 					{ background: #F5C07A; }
#layout_ui_side > .planet .m input[type=range]::-ms-fill-upper 					{ background: #F5C07A; }
#layout_ui_side > .planet .m input[type=range]::-ms-thumb 						{ background: #E68200; }
	
#layout_ui_side > .planet .p input[type=range]::-webkit-slider-runnable-track 		{ background: #FAC8C8; }
#layout_ui_side > .planet .p input[type=range]::-webkit-slider-thumb 				{ background: #C40000; }
#layout_ui_side > .planet .p input[type=range]:focus::-webkit-slider-runnable-track	{ background: #FAC8C8; }
#layout_ui_side > .planet .p input[type=range]::-moz-range-track 				{ background: #FAC8C8; }
#layout_ui_side > .planet .p input[type=range]::-moz-range-thumb 				{ background: #C40000; }
#layout_ui_side > .planet .p input[type=range]::-ms-fill-lower 					{ background: #FAC8C8; }
#layout_ui_side > .planet .p input[type=range]::-ms-fill-upper 					{ background: #FAC8C8; }
#layout_ui_side > .planet .p input[type=range]::-ms-thumb 						{ background: #C40000; }
	
#layout_ui_side > .planet .e input[type=range]::-webkit-slider-runnable-track 		{ background: #FFFDAD; }
#layout_ui_side > .planet .e input[type=range]::-webkit-slider-thumb 				{ background: #FCF742; }
#layout_ui_side > .planet .e input[type=range]:focus::-webkit-slider-runnable-track	{ background: #FFFDAD; }
#layout_ui_side > .planet .e input[type=range]::-moz-range-track 				{ background: #FFFDAD; }
#layout_ui_side > .planet .e input[type=range]::-moz-range-thumb 				{ background: #FCF742; }
#layout_ui_side > .planet .e input[type=range]::-ms-fill-lower 					{ background: #FFFDAD; }
#layout_ui_side > .planet .e input[type=range]::-ms-fill-upper 					{ background: #FFFDAD; }
#layout_ui_side > .planet .e input[type=range]::-ms-thumb 						{ background: #FCF742; }
	
#layout_ui_side > .planet .s input[type=range]::-webkit-slider-runnable-track 		{ background: #B8E0C0; }
#layout_ui_side > .planet .s input[type=range]::-webkit-slider-thumb 				{ background: #00AD23; }
#layout_ui_side > .planet .s input[type=range]:focus::-webkit-slider-runnable-track	{ background: #B8E0C0; }
#layout_ui_side > .planet .s input[type=range]::-moz-range-track 				{ background: #B8E0C0; }
#layout_ui_side > .planet .s input[type=range]::-moz-range-thumb 				{ background: #00AD23; }
#layout_ui_side > .planet .s input[type=range]::-ms-fill-lower 					{ background: #B8E0C0; }
#layout_ui_side > .planet .s input[type=range]::-ms-fill-upper 					{ background: #B8E0C0; }
#layout_ui_side > .planet .s input[type=range]::-ms-thumb 						{ background: #00AD23; }
	
#layout_ui_side > .planet .g input[type=range]::-webkit-slider-runnable-track 		{ background: #BED7F7; }
#layout_ui_side > .planet .g input[type=range]::-webkit-slider-thumb 				{ background: #498ADE; }
#layout_ui_side > .planet .g input[type=range]:focus::-webkit-slider-runnable-track	{ background: #BED7F7; }
#layout_ui_side > .planet .g input[type=range]::-moz-range-track 				{ background: #BED7F7; }
#layout_ui_side > .planet .g input[type=range]::-moz-range-thumb 				{ background: #498ADE; }
#layout_ui_side > .planet .g input[type=range]::-ms-fill-lower 					{ background: #BED7F7; }
#layout_ui_side > .planet .g input[type=range]::-ms-fill-upper 					{ background: #BED7F7; }
#layout_ui_side > .planet .g input[type=range]::-ms-thumb 						{ background: #498ADE; }
	
#layout_ui_side > .planet .d input[type=range]::-webkit-slider-runnable-track 		{ background: #F2D3F0; }
#layout_ui_side > .planet .d input[type=range]::-webkit-slider-thumb 				{ background: #DE49D4; }
#layout_ui_side > .planet .d input[type=range]:focus::-webkit-slider-runnable-track	{ background: #F2D3F0; }
#layout_ui_side > .planet .d input[type=range]::-moz-range-track 				{ background: #F2D3F0; }
#layout_ui_side > .planet .d input[type=range]::-moz-range-thumb 				{ background: #DE49D4; }
#layout_ui_side > .planet .d input[type=range]::-ms-fill-lower 					{ background: #F2D3F0; }
#layout_ui_side > .planet .d input[type=range]::-ms-fill-upper 					{ background: #F2D3F0; }
#layout_ui_side > .planet .d input[type=range]::-ms-thumb 						{ background: #DE49D4; }
	
#layout_ui_side > .planet .t input[type=range]::-webkit-slider-runnable-track 		{ background: #999999; }
#layout_ui_side > .planet .t input[type=range]::-webkit-slider-thumb 				{ background: #888888; }
#layout_ui_side > .planet .t input[type=range]:focus::-webkit-slider-runnable-track	{ background: #999999; }
#layout_ui_side > .planet .t input[type=range]::-moz-range-track 				{ background: #999999; }
#layout_ui_side > .planet .t input[type=range]::-moz-range-thumb 				{ background: #888888; }
#layout_ui_side > .planet .t input[type=range]::-ms-fill-lower 					{ background: #999999; }
#layout_ui_side > .planet .t input[type=range]::-ms-fill-upper 					{ background: #999999; }
#layout_ui_side > .planet .t input[type=range]::-ms-thumb 						{ background: #888888; }
	
#layout_ui_side > .planet .th input[type=range]::-webkit-slider-runnable-track 		{ background: #CCCCCC; }
#layout_ui_side > .planet .th input[type=range]::-webkit-slider-thumb 			{ background: #FFFFFF; }
#layout_ui_side > .planet .th input[type=range]:focus::-webkit-slider-runnable-track	{ background: #CCCCCC; }
#layout_ui_side > .planet .th input[type=range]::-moz-range-track 				{ background: #CCCCCC; }
#layout_ui_side > .planet .th input[type=range]::-moz-range-thumb 				{ background: #FFFFFF; }
#layout_ui_side > .planet .th input[type=range]::-ms-fill-lower 					{ background: #CCCCCC; }
#layout_ui_side > .planet .th input[type=range]::-ms-fill-upper 			{ background: #CCCCCC; }
#layout_ui_side > .planet .th input[type=range]::-ms-thumb 						{ background: #FFFFFF; }
	
	
	

/* STAR SIDEBAR */
#layout_ui_side > .star {
	background-position: calc(100% + 325px) calc(100% + 425px) ;
	background-repeat: no-repeat;
	background-size: 200% auto;
	height: 100%;
	max-height: 100%;
	box-sizing: border-box;
	}
#layout_ui_side > .star H2 {
	text-align:center;
	margin-bottom: 1em;
	}
	
#layout_ui_side > .star .hilite_wrapper {
	margin: 0.5em -1rem;
	padding: 0.5em 1em;
	border-radius: 0.5em;
	cursor: pointer;
	}
#layout_ui_side > .star .hilite_wrapper.selected,
#layout_ui_side > .star .hilite_wrapper:hover {
	background-image: radial-gradient(circle closest-corner at 50% 50% , transparent 0%, transparent 50%, #3C96BA 100%);
	}
	
#layout_ui_side > .star .planet {
	background-color:none;
	padding-left: 85px;
	clear:both;
	min-height: 75px;
	}

#layout_ui_side > .star H3 {
	font-size: 100%;
	}
#layout_ui_side > .star .planet IMG.flag {
	max-height: 1.0em;
	float:left;
	margin: 0 0 0.25em -2.5em;
	}

#layout_ui_side > .star P.exp {
	font-size: 100%;
	color: yellow;
	margin: 0.5em 0 2em 0;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	}
#layout_ui_side > .star P.desc {
	font-size: 200%;
	line-height: 1.5em;
	}

#layout_ui_side > .star .planet P.physattr {
	font-style: italic;
	}

#layout_ui_side > .star .planet SPAN.env_label {
	margin-right: 0.75em;
	}

#layout_ui_side .star .planet P.env_label {
	float:right;
	clear: right;
	font-size: 100%;
	line-height: 1em;
	margin: 0;
	text-align:right;
	text-transform: uppercase;
	font-weight:bold;
	}
#layout_ui_side .star .planet P.env_label SPAN {
	margin: 0;
	display:inline;
	padding: 0;
	}
#layout_ui_side HR {	
	border: 1px solid #333;
	}
	
	
	
	
	
	
	
/* PLANETS PANE */
#planets_pane TABLE TD, #planets_pane TABLE TH {
	padding: 0.5em;
	text-align:left;
	}
#planets_pane TABLE TH {
	font-weight:bold;
	}
#planets_pane TR.known {
	cursor: pointer;
}
#planets_pane TR.known:hover {
	background: rgba(75, 165, 204, 0.65);
}
#planets_pane TR.unknown:hover  {
	background: rgba(128,128,128,0.35);
}
#planets_pane TR.known .name {
	font-weight:bold;
	text-decoration: underline;
}

/* hide stuff by default and reveal only what player should be allowed to see */
#planets_pane TABLE TR.foreign TD { opacity:0; }
#planets_pane TABLE TR.unknown TD { opacity:0; }
#planets_pane TABLE TR.known TD.energy,
#planets_pane TABLE TR.known TD.resources,
#planets_pane TABLE TR.unknown TD.image,
#planets_pane TABLE TR.unknown TD.name,
#planets_pane TABLE TR.foreign.known TD.image,
#planets_pane TABLE TR.foreign.known TD.name,
#planets_pane TABLE TR.foreign.known TD.size,
#planets_pane TABLE TR.foreign.known TD.hab,
#planets_pane TABLE TR.foreign.known TD.owner
{ opacity:1; }

#planets_pane .planet {
	display: inline-block;
	vertical-align:middle;
	background-size: cover;
	height: 45px;
	width: 45px;
	margin: -0.25em 0 -0.25em -0.25em;
	}

#planets_pane TH .tagicon:before { margin-right: 0; }


	
	
	
/* PLANETINFO PANE */
#planetinfo_pane {
	background: url(../img/bg/scene-planet001.jpg) 50% 50% no-repeat;
	background-size: cover;
	background-attachment:fixed;
	height: 100%;
	box-sizing: border-box;
	padding: 3em;
	}

#planetinfo_pane > .flexwrap {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: stretch;
	clear:right;
	}
	
#planetinfo_pane .content {
	background-color: rgba(0,0,0,0.75);
	border-radius: 0.5em;
	padding: 1em;
	box-sizing: border-box;
	margin: 1.5em;
	flex: 1;
	}
	
#planetinfo_pane .resources > SPAN { margin-right: 0.55em; }

	
#zone_pane MAIN > DIV {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: flex-start;
	margin: 0 0 0 -0.5em !important;
	}
	
#zone_pane .wrapper {
	background: #141414;
	border-radius: 0.5em;
	padding: 0.5em 1em;
	flex: 1 1 25%;
	box-sizing: border-box;
	margin: 0.5em;
	min-width: 300px;
	}
#zone_pane .wrapper:hover {
	background: #333;
	cursor: cell;
	}
#zone_pane .wrapper.disabled {
	opacity: 0.25;
	cursor: not-allowed;
	}
#zone_pane .wrapper.disabled:hover {
	background: #141414;
	cursor: not-allowed;
	pointer-events: none;
	}

/* this actually targets the build-project pane */
#zone_pane .item {
	border-radius: 0.5em;
	padding: 0.5em 1em;
	flex: 1 1 35%;
	box-sizing: border-box;
	margin: 0.5em;
	min-width: 380px;
	}
#zone_pane IMG {
	max-width: 6em;
	max-height: 9em;
	min-width: 4em;
	object-position: top;
	object-fit:contain;
	float: right;
	margin: 1em 0 1em 1em;
	}
#zone_pane .item H2 SPAN {
	color: #AEA;
	}
#zone_pane .subtext { line-height: 1em; margin: 0; padding: 0; }
#zone_pane .subtext SPAN { margin-right:0.75em; }
#zone_pane .item:hover {
	background: #115a96;
	cursor: pointer;
	}
	
#zone_pane .ship H2 { color: #4BA5CC; }	
#zone_pane .groundunit H2 { color: #f3ac29; }	
#zone_pane .makework H2 { color: #AEA; }	
	
	

#fleet_pane MAIN > DIV {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: flex-start;
	margin: 0 0 0 -0.5em !important;
	box-sizing: border-box;
	}
	
#fleet_pane .item {
	/* background: #141414; */
	border: 5px #11436B outset;
	background: #103F65;
	border-radius: 0.5em;
	padding: 0.5em 1em;
	flex: 1 1 35%;
	box-sizing: border-box;
	margin: 0.5em;
	min-width: 380px;
	}
#fleet_pane IMG {
	max-width: 8em;
	max-height: 12em;
	object-position: top;
	object-fit:contain;
	float: right;
	margin: 1em 0 1em 1em;
	}
#fleet_pane .item H2 SPAN {
	color: #AEA;
	}
#fleet_pane .subtext { line-height: 1em; margin: 0; padding: 0; }
#fleet_pane .subtext SPAN { margin-right:0.75em; }
#fleet_pane .item:hover {
	background: #115a96;
	cursor: pointer;
	}		
		
		
/* FLEET SIDEBAR */
#layout_ui_side .fleet {
	height: 100%;
	box-sizing: border-box;
	padding: 1.5em;
	}

.shipgrid {
	display: flex;
	flex-flow: row wrap;
	clear:right;
	padding-bottom: 2em;
	margin-bottom: -10000px; /* prevents extra bottom spacing when scaling with dynamic packing */
	}

.shipgrid.pack_2x {
	transform: scale(0.66666666);
	transform-origin: 0 0 ;
	width: 150%;
	}
.shipgrid.pack_4x {
	transform: scale(0.5);
	transform-origin: 0 0 ;
	width: 200%;
	}
.shipgrid.pack_9x {
	transform: scale(0.3333333);
	transform-origin: 0 0 ;
	width: 300%;
	}
.shipgrid.pack_16x {
	transform: scale(0.25);
	transform-origin: 0 0 ;
	width: 400%;
	}
.shipgrid.pack_25x {
	transform: scale(0.2);
	transform-origin: 0 0 ;
	width: 500%;
	}
.shipgrid.pack_36x {
	transform: scale(0.1666666666);
	transform-origin: 0 0 ;
	width: 600%;
	}
/* .shipgrid.pack_2x .ship > P, */
.shipgrid.pack_4x .ship SPAN,
.shipgrid.pack_9x .ship SPAN,
.shipgrid.pack_16x .ship SPAN,
.shipgrid.pack_25x .ship SPAN,
.shipgrid.pack_36x .ship SPAN,
.shipgrid.pack_4x .ship P,
.shipgrid.pack_9x .ship P,
.shipgrid.pack_16x .ship P,
.shipgrid.pack_25x .ship P,
.shipgrid.pack_36x .ship P {
	display: none;
	}
	
/* always display the top */
.shipgrid .ship .top *, 
.shipgrid .ship .top { display:flex !important; }	

.shipgrid .ship {
	border: 1px solid transparent;
	border-radius: 0.5em;
	padding: 0.25em;
	box-sizing: border-box;
	margin: 0.25em;
	flex: 1;
	text-align:center;
	/* the data inside each box is also controlled by flexbox */
/*	display: flex;
	flex-flow: row wrap;*/
	}
	
.shipgrid .ship.selected {
	background-image: radial-gradient(circle closest-corner at 50% 50% , transparent 0%, transparent 50%, #3C96BA 100%);
	border: #777 outset 1px;
	}
.shipgrid .ship.hilite {
	background-image: radial-gradient(circle closest-corner at 50% 50% , transparent 0%, transparent 50%, #AEA 100%);
	border: #AEA solid 1px;
	}
.shipgrid .ship.retreat {
	background: #000;
	opacity: 0.35;
	transition: opacity 0.8s;
	}
.shipgrid .ship.retreat IMG {
	opacity: 0;
	transform: translateY(-300px);
	transition: transform 0.8s ease-out, opacity 0.8s ease-out;
	}


.shipgrid .ship > * {
	padding: 0;
	margin: 0;
	font-size: 80%;
	line-height: 1.0em;
/* 	border: 1px solid red; */
/* 	width: 100%; */
	}
.shipgrid .ship > .top {
	text-align: left;
	}	
.shipgrid .ship > .infobar {
	text-align: right;
	width: 100%;
	margin: 0.1em 0 -0.7em 0;
	padding: 0;
	display: flex;
	}	
.shipgrid .ship > .infobar > * {
	flex: 1;
	text-align:left;	
	color: yellow;
	}
.shipgrid .ship > .infobar > *:last-child {
	text-align:right;
	color: cyan;
	}
.shipgrid .ship > .size {
	text-align: left;
	width: 40%;
	display: inline-block;
	}	
.shipgrid .ship > .decor {
	text-align: right;
	width: 40%;
	display: inline-block;
	}	
.shipgrid .ship > .exp {
	text-align: left;
	width: 40%;
	display: inline-block;
	}	
.shipgrid .ship > .name {
	text-align: center;
	margin-top: 0.2em
	}	
.shipgrid .ship IMG {
	height: 70px;
	width: 60px;
	object-fit: contain;
	margin: 0 auto;
	}
	
/* dynamic image sizing based on ship size class */
.shipgrid.dynasize .ship IMG {
	height: 300px;
	width: 300px;
	}
.shipgrid.dynasize .ship.size_A IMG {
	height: 70px;
	width: 35px;
	}
.shipgrid.dynasize .ship.size_B IMG {
	height: 70px;
	width: 55px;
	}
.shipgrid.dynasize .ship.size_C IMG {
	height: 100px;
	width: 85px;
	}
.shipgrid.dynasize .ship.size_D IMG {
	height: 125px;
	width: 105px;
	}
.shipgrid.dynasize .ship.size_E IMG {
	height: 175px;
	width: 150px;
	}
.shipgrid.dynasize .ship.size_F IMG {
	height: 225px;
	width: 200px;
	}
	
.shipgrid .ship progress[value] {
	position: relative;
	margin: 0;
	padding: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
		appearance: none;
	border: none;
	width: 100%;
	height: 6px;
	border-radius: 2px;
	background-color: #385441;
	}
.shipgrid .ship progress[value]::-webkit-progress-bar {
	border-radius: 2px;
	background-color: #385441;
	}
.shipgrid .ship progress[value]::-webkit-progress-value {
	background-image: linear-gradient( to bottom, #29994D 0%, #42C76C 33%, #42C76C 66%, #29994D 100%);
	position: relative;
	border-radius:2px;
	}
.shipgrid .ship progress[value]::-moz-progress-bar {
	background-image: linear-gradient( to bottom, #29994D 0%, #42C76C 33%, #42C76C 66%, #29994D 100%);
	border-radius:2px;
	}
.shipgrid .ship.health_m progress[value]::-webkit-progress-value {
	background-image: linear-gradient( to bottom, #C9C72A 0%, #FAF619 33%, #FAF619 66%, #C9C72A 100%);
	}
.shipgrid .ship.health_m progress[value]::-moz-progress-bar {
	background-image: linear-gradient( to bottom, #C9C72A 0%, #FAF619 33%, #FAF619 66%, #C9C72A 100%);
	}
.shipgrid .ship.health_l progress[value]::-webkit-progress-value {
	background-image: linear-gradient( to bottom, #BF3A37 0%, #FF6B69 33%, #FF6B69 66%, #BF3A37 100%);
	}
.shipgrid .ship.health_l progress[value]::-moz-progress-bar {
	background-image: linear-gradient( to bottom, #BF3A37 0%, #FF6B69 33%, #FF6B69 66%, #BF3A37 100%);
	}
.shipgrid .ship.health_a progress[value]::-webkit-progress-value {
	background-image: linear-gradient( to bottom, #0872CF 0%, #50ABFA 33%, #50ABFA 66%, #0872CF 100%);
	}
.shipgrid .ship.health_a progress[value]::-moz-progress-bar {
	background-image: linear-gradient( to bottom, #0872CF 0%, #50ABFA 33%, #50ABFA 66%, #0872CF 100%);
	}
.shipgrid .ship.health_d {
	background-image: radial-gradient(circle closest-corner at 50% 50% , #E11 0%, transparent 50%, transparent 100%);
	opacity: 0.4;
	}	
	
	
	
	
	
	
/* COLONIZATION PANE */
#colonize_pane {
	position:relative;
	height: 100%;
	overflow: hidden;
	margin:0;
	padding: 0;
	background: 
		url(../img/map/air_collect_sparkle_white.png) 45% 20% no-repeat,
		url(../img/map/bg/stars.jpg) 50% 50% no-repeat
		;
	background-size: 30%, cover;
	}
#colonize_pane .planet {
	position: absolute;
	height: 100%;
	width: 40%;
	background-position: 0% 35%;
	background-repeat: no-repeat;
	background-size: 80%;
	transform: rotate(180deg);
	z-index: 1;
	}
#colonize_pane .content {
	float: right;
	right: 100%;
	margin: 2em 3em;
	padding: 2em;
	width:32%;
	min-width: 300px; 
	max-width: 700px; 
	z-index: 2;
	}
#colonize_pane .content P {
	font-size: 150%;
	line-height: 1.7em;
	}
#colonize_pane .env_label { text-transform: uppercase; font-weight: bold; }
#colonize_pane .content SPAN.size { color: #29F; }
#colonize_pane .content SPAN.mine { color: #E68200; }
#colonize_pane .content SPAN.en { color: #FF59FC; }


#colonize_pane INPUT[type='text'] {
	font-family: 'ethnocentric';
	color: #A8FFCD;
	font-size: 150%;
	background: none;
	border: 1px solid #999;
	padding: 0.3em 0;
	border-width: 0 0 1px 0;
	width: 90%;
	margin: 0;
	}

	

/* DIPLOMACY PANE */
#civ_list {
	display: flex;
	flex-flow: row wrap;
	margin: 1em -1em;
	}
#civ_list > DIV {
	box-sizing: border-box;
	border: 5px solid #FFF;
	border-radius: 1.0em;
	padding: 1em;
	margin: 1em;
	flex: 1 1 30%;
	/* overflow: hidden; */
	min-width: 430px;
	/* max-width: 800px; */
	}
#civ_list > DIV.ghost {
	pointer-events:none; 
	opacity:0.24;
	}
#civ_list > DIV IMG.diplo_img {
	width: 100%;
	max-width: 100%;
	display: block;
	margin: 0.25em 0 0 0;
	cursor:pointer;
	border-radius: 0.5em;
	/* border-top-left-radius:0.5em;  */
	/* border-top-right-radius:0.5em; */
	}
#civ_list > DIV IMG.diplo_img.nocomm {
	filter: saturate(0) brightness(0.35);
	}
#civ_list > DIV IMG.flag {
	/* display:none; */
	max-height: 26px;
	float: right;
	margin: -0.75rem 0rem 0 0;
	}
#civ_list H2 {
	margin: -1rem -1rem 1rem -1rem;
	padding: 0.25em 1rem 0.25em 1rem;
	text-shadow: 1px 1px 1px #000;
	z-index: 2;
}
#civ_list .divider {
	display: flex;
	margin: -0.5rem -0.5rem;
	/* width: 100%; */
}
#civ_list .divider > DIV {
	flex: 1 1 50%;
	margin: 0 0.5em 0 0.5em;
}
#civ_list .divider > DIV:first-child {
	max-width: 300px;
	min-width: 200px;
}
#civ_list > DIV P {
	margin: 0.5em 0;
	}
#civ_list DIV.love_nub {
	margin-top: 0; 
	border-top-left-radius:0; 
	border-top-right-radius:0;
}
#civ_list .desc EM, #audience_them .desc EM {
	color: #AEA;
	font-weight:bold;
	font-style: normal;
}


#civ_list.compact > DIV {
	min-width: none;
	flex: 1 0 12%;
}
#civ_list.compact .flag,
#civ_list.compact .button_rack,
#civ_list.compact H2 {
	display:none;
}
#civ_list.compact .divider > DIV:first-child {
	max-width: none;
	min-width: none;
}
.compact .statboxes > DIV {
	flex: 1 1 100%;
	text-align: left;
	padding: 0.1rem;
	margin: 0.1rem;
	/* background: none; */
}
.compact .statboxes OUTPUT {
	font-size: 100%;
	display:inline-block;
	margin-right: 1em;
	width:3em;
	text-align:right;
}
.compact .statboxes SPAN {
	display: inline;
	font-size: 1rem;
	text-transform: none;
	white-space: nowrap;
	/* color: #CCC; */
}





.statboxes {
	display: flex;
	flex-flow: row wrap;
	margin-left: -0.25rem;
	margin-right: -0.25rem;
}
.statboxes > DIV {
	flex: 1 1 auto;
	background: rgba( 255, 255, 255, 0.1 );
	border-radius: 0.5rem;
	text-align: center;
	padding: 0.5rem ;
	margin: 0.25rem;
}
.statboxes.dark > DIV {
	background: rgba( 0, 0, 0, 0.35 );
}
.statboxes.transp > DIV {
	background: none;
}
.statboxes OUTPUT {
	font-size: 200%;
	display:block;
	font-weight:bold;
}
.statboxes SPAN {
	text-transform: uppercase;
	display:block;
	font-size: 0.8rem;
	color: #AAA;
}
.statboxes > DIV.bad {
	background: rgb(122, 14, 14);
}
.statboxes > DIV.good {
	background: rgb(9, 97, 23);
}








DIV.love_nub, DIV.annoyometer {
	box-sizing:border-box;
	background: linear-gradient(to right, rgba(209,37,37,1) 1%,rgba(255,251,135,1) 50%,rgba(63,186,85,1) 100%);
	border-radius: 0.5em;
	margin: 0.5em 0;
	padding: 1px 0;
	}
DIV.annoyometer {
	background: linear-gradient(to right, rgb(30,30,30) 1%,rgb(230,230,230) 100%);
	}
DIV.love_nub .nub,
DIV.annoyometer .nub {
	box-sizing:border-box;
	background: rgba(1,1,1,0.5);
/* 	border: 2px solid #FFF; */
	border-radius: 0.5em;
	margin: 0;
	width:6em;
	height: 100%;
	box-sizing:border-box;
	padding: 0.2em 0;
	text-align: center;
	font-weight: bold;
	color: #FFF;
	}
.love_nub .nub { 
	transition: margin-left 0.5s ease-out;
}
		
	


	
/* AUDIENCE PANE */
#audience_pane {
	box-sizing: border-box;
	display: flex;
	flex-flow: row wrap;
	height:100%;
	max-height: 100%;
	padding: 1em; 
	}
#audience_pane > DIV {
	box-sizing: border-box;
	border: 5px solid #666;
	border-radius: 1.0em;
	padding: 1em;
	margin: 0;
	flex: 1 1;
	overflow: auto;
	height:100%;
	max-height: 100%;
	}
#audience_pane DIV.diplo_img_wrapper {
	box-sizing: border-box;
	margin: 0.5em auto;
/* 	padding: 1em; */
	width: 100%;
	max-width: 40em;;
	margin: 0 auto 1em auto;
	border: 2px solid #000;
	box-shadow: 0.5em 0.5em 1em rgba(0,0,0,0.75);
	border-radius: 1.0em;
	overflow:hidden;
	background: #000;
	}
#audience_pane #audience_them {
	max-width: 40em;
	margin-right: 1em;
	}
#audience_pane #speech_them,
#audience_pane #speech_us {
	font-size: 200%;
	margin-bottom: 3em;
	}
#audience_pane #speech_them P,
#audience_pane #speech_them Q,
#audience_pane #speech_them DIV,
#audience_pane #speech_them LI {
	color:inherit;
	}
#audience_pane DIV.diplo_img {
/* 	background-image: none; */
/* 	background-image: url(/cc/x/img/fx/staticsnow.gif); */
	background-color: #000;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: 50% 0%;
	padding-bottom: 66.6666%; /* 3:2 aspect ratio */
	transition: all 300ms ease-in-out;
	}
#audience_pane DIV.diplo_img.mad {
	filter: brightness(90%) sepia(0.7) saturate(3) hue-rotate(-40deg);
	background-size: 125% 125%;
	background-position: 50% 0%;
	}
#audience_pane DIV.diplo_img.happy {
	filter: brightness(100%) sepia(0.7) saturate(2.2) hue-rotate(40deg);
	}
#audience_pane DIV.diplo_img.away {
	filter: saturate(0);
	opacity: 0.5;
	}
#audience_pane DIV IMG.flag {
	max-height: 22px;
	margin: 0 0 0.5em 0;
	vertical-align:top;
	}
#audience_pane DIV H2 {
	margin-top: 0;
	}
#audience_pane #audience_us OL, 	
#audience_pane #audience_us UL {	
	margin: 0.5em 0 0.5em 1.5em; ;
	}
#audience_pane #audience_us LI {	
	list-style-type: disc;
	margin: 0.3em 0;
	}
#audience_pane #audience_us OL LI {	
	list-style-type: decimal;
	}


#audience_pane .createoffer {
	display: flex; 
	flex-flow: column nowrap; 
	}
#audience_pane .createoffer > * {
	flex: 1 1;
	margin-bottom: 1em;
	}
#audience_pane .divide {
	display: flex; 
	flex-flow: row nowrap; 
	justify-content: space-between;
	}
#audience_pane .divide > DIV {
	flex: 1 1;
	border: 5px solid #666;
	border-radius: 1em;
	display: flex; 
	flex-flow: column nowrap; 
	padding: 1em;
	}
#audience_pane .divide > DIV:first-child {
	margin-right: 1em;
	}
	
#audience_pane .avail_items {
	flex: 12 1; 
	overflow-y: auto;
	}
#audience_pane .avail_items > DIV .head {
	flex: 1 1;
	}
#audience_pane .avail_items > DIV .body {
	flex: 20 1;
	overflow: auto;
	}
#audience_pane .tabled_items {
	flex: 4 1;
	}
#audience_pane .tabled_items > DIV:before { 
	content: '▼';
	text-align:center; 
	margin:-1em 0 0 0; 
	font-size:500%; 
	text-shadow: 2px 2px 2px #666;
	display: block;
	}
#audience_pane .trade_item_list DIV {
	padding: 0.15em 0;
	margin: 0;
	cursor:pointer;
	}
#audience_pane .trade_item_list DIV:before { 
	content: '•'; 
	display: inline-block;
	width: 1.5em;
	text-align:left;
	}
#audience_pane .trade_item_list DIV.ghost { opacity: 0.35; pointer-events:none; cursor:default; }
#audience_pane .trade_item_list DIV.cash:before { content: '⛁'; }
#audience_pane .trade_item_list DIV.cash { color: #54B848; }
#audience_pane .trade_item_list DIV.planet { color: #D33; }
#audience_pane .trade_item_list DIV.planet:before { content: '⦿'; }
#audience_pane .trade_item_list DIV.technode { color: #4BA5CC; }
#audience_pane .trade_item_list DIV.technode:before { content: '⚙'; }
#audience_pane .trade_item_list DIV.treaty { color: #E92; }
#audience_pane .trade_item_list DIV.treaty:before { content: '⚑'; }
#audience_pane .trade_item_list DIV.resource { color: #A6F; }
#audience_pane .trade_item_list DIV.resource:before { content: '⬢'; }
	
	

/* TECHNOLOGY PANE */

#tech_pane DIV H2 {
	margin-top: 0;
	margin-bottom: 1rem;
	}
#tech_pane  OL, 	
#tech_pane  UL {	
	margin: 0.5em 0 0.5em 0.5em; ;
	}
#tech_pane  LI {	
	list-style-type: disc;
	margin: 0.3em 0;
	}
#tech_pane  OL LI {	
	list-style-type: decimal;
	}
#tech_pane .techlist > DIV {
	box-sizing: border-box;
	margin: 0 -1.5rem;
	padding: 0.5rem 1.5rem;
	cursor:pointer;
	}
#tech_pane .techlist P:first-of-type {
	font-size: 150%;
	margin: 0;
	vertical-align:middle;
	margin-left: 4rem;
	}
#tech_pane .techlist .subtext {
	display: block;
	font-size: 1rem;
	color:  #3C96BA;
	margin: 0; 
	padding: 0;
	margin-left: 4rem;
	}
#tech_pane .techlist .hilite { 
	background: #3C96BA;
	}
#tech_pane .techlist .focus { 
	background: #3C96BA;
	}
#tech_pane .techlist .hilite .subtext { 
	color: #11436b;
	}
#tech_pane .techlist PROGRESS {
	width: 100%;
	display: block;
	height: 0.6em;
	margin-top: 0.25em;
	}
#tech_pane #featured .desc {
	font-size: 150%;
	}
#tech_pane #featured IMG {
	max-width: 100%; 
	max-height: 10em;
	margin: 0 auto 1em auto;
	}

#tech_pane .techlist .tagicons {
	font-size: 2.25rem;
	float:left;
	clear:left;
	height:1em;
	width: 1em;
	margin: 0 0.25em 0.25em 0;
	padding:0;
}
#tech_pane .techlist .button_rack {
	float:right;
	clear:right;
	/* font-size: 2.25rem; */
	/* height:1em; */
	/* width: 1em; */
	margin: 0 0 0.25em 0.25em;
	padding:0;
	display:none;
}
#tech_pane .techlist .hilite .button_rack {
/* #tech_pane .techlist > DIV:hover .button_rack { */
	display:block;
}

#tech_pane #featured .tagicons { font-size: 1.5rem; }
#tech_pane #completed.techlist .tagicons { font-size: 1.25rem; }
#tech_pane #completed.techlist P { margin-left: 2rem; }

.tagicon::before,
.tagicons SPAN::before,
.resources .labor:before,
.resources .ship:before,
.resources .def:before,
.resources .res:before,
.resources .esp:before,
.resources .gov:before,
.resources .hou:before {
	content: '';
	display: inline-block;
	background: url(../img/icons/svg/boxwire.svg) 50% 50% no-repeat;
	background-size:0.85em 0.85em !important;
	height: 1.25em;
	width: 1.25em;
	margin: 0 0.25em 0 0 ;
	padding: 0.2em;
	vertical-align: middle;
	background-color: #666;
	/* border: rgba(255,255,255,0.4) 1px solid; */
	border-radius: 0.25em;
	box-sizing:border-box;
}

.resources .hou:before,
.tagicon.housing::before {
	background-color: #4cb0e9;
	background-image: url(../img/icons/svg/city.svg);
	}
.tagicon.mining::before {
	background-color: #fa9a30;
	background-image: url(../img/icons/svg/cube01.svg);
	}
.tagicon.stardock::before {
	background-color: #D11;
	background-image: url(../img/icons/svg/stardock01.svg);
	}
.tagicon.research::before {
	background-color: #14A;
	background-image: url(../img/icons/svg/tool.svg);
	}
.resources .def:before,
.tagicon.military::before {
	background-color: #98543D;
	background-image: url(../img/icons/svg/game.svg);
	}
.tagicon.economic::before {
	background-color: #296;
	background-image: url(../img/icons/svg/coins-1.svg);
	}
.tagicon.propulsion::before {
	background-color: #c263c2;
	background-image: url(../img/icons/svg/rocket.svg);
	}
.tagicon.biology::before {
	background-color: #40ac45;
	background-image: url(../img/icons/svg/leaf.svg);
	}
.tagicon.socialogy::before {
	background-color: #968270;
	background-image: url(../img/icons/svg/talkbubble.svg);
	}
.resources .esp:before,
.tagicon.espionage::before {
	background-color: #6c13b3;
	background-image: url(../img/icons/svg/medical.svg);
	}
.tagicon.engineering::before {
	background-color: #854102;
	background-image: url(../img/icons/svg/transport.svg);
	}
.tagicon.weapons::before {
	background-color: #000;
	background-image: url(../img/icons/svg/target.svg);
	}
.tagicon.physics::before {
	background-color: #d1d40b;
	background-image: url(../img/icons/svg/atom02.svg);
	}
.tagicon.defense::before {
	background-color: #00b9b9;
	background-image: url(../img/icons/svg/shield.svg);
	}
.tagicon.special::before {
	background-color: #AA509F;
	background-image: url(../img/icons/svg/decoration.svg);
	}
.tagicon.beam::before {
	background-color: #cf0080;
	background-image: url(../img/icons/svg/prism02.svg);
	}
.tagicon.beammod::before {
	background-color: #cf0080;
	background-image: url(../img/icons/svg/prism02.svg);
	}
.tagicon.missile::before {
	background-color: #DDBB00;
	background-image: url(../img/icons/svg/rocket.svg);
	}
.tagicon.missilemod::before {
	background-color: #DDBB00;
	background-image: url(../img/icons/svg/rocket.svg);
	}
.tagicon.kinetic::before {
	background-color: #3e5ec7;
	background-image: url(../img/icons/svg/geoshape05.svg);
	}
.tagicon.kineticmod::before {
	background-color: #3e5ec7;
	background-image: url(../img/icons/svg/geoshape05.svg);
	}
.tagicon.cluster::before {
	background-color: #AA509F;
	background-image: url(../img/icons/svg/geoshape03.svg);
	}
.tagicon.engine::before {
	background-color: #e278cb;
	background-image: url(../img/icons/svg/rocket.svg);
	}
.tagicon.armor::before {
	background-color: #b1572d;
	background-image: url(../img/icons/svg/shield.svg);
	}
.tagicon.shield::before {
	background-color: #64da59;
	background-image: url(../img/icons/svg/spinner4.svg);
	}
.tagicon.colony::before {
	background-color: #588a61;
	background-image: url(../img/icons/svg/planet01.svg);
	}
.tagicon.troop::before {
	background-color: #86674d;
	background-image: url(../img/icons/svg/circle01.svg);
	}
.resources .res:before,
.tagicon.research::before {
	background-color: #126eb9;
	background-image: url(../img/icons/svg/tool.svg);
	}
.tagicon.thrusters::before {
	background-color: #AA509F;
	background-image: url(../img/icons/svg/star.svg);
	}
.tagicon.cloak::before {
	background-color: #1ee0e0;
	background-image: url(../img/icons/svg/hexstar3.svg);
	}
.tagicon.targetting::before {
	background-color: #5a5a5a;
	background-image: url(../img/icons/svg/focus.svg);
	}
.tagicon.attack::before {
	background-color: #b41b1b;
	background-image: url(../img/icons/svg/star.svg);
	}
.tagicon.planet::before,
.tagicon.colonize::before {
	background-color: #158b0b;
	background-image: url(../img/icons/svg/planet01.svg);
	}
.tagicon.invade::before {
	background-color: #e97c00;
	background-image: url(../img/icons/svg/robot.svg);
	}
.resources .labor:before,
.tagicon.labor::before {
	background-color: #e97c00;
	background-image: url(../img/icons/svg/hammer.svg);
	}
.resources .gov:before,
.tagicon.gov::before,
.tagicon.government::before {
	background-color: #e97c00;
	background-image: url(../img/icons/svg/building.svg);
	}
.resources .ship::before,
.tagicon.ship::before {
	background-color: #D11;
	background-image: url(../img/icons/svg/rocket.svg);
	}	
	
.tagicon.health::before {
	background-color: #0f7e21;
	background-image: url(../img/icons/svg/heart.svg);
	}	
.tagicon.ammo::before {
	background-color: #DA0;
	background-image: url(../img/icons/svg/circle01.svg);
	}	


	
/* SHIP DESIGN PANE */
#ship_des_pane {
	height:100%;
	max-height: 100%;
	background: #000 url(../img/bg/technic1.png) repeat;
	}
#ship_des_pane #bp_list { 
	flex: 1 1 20em;
	min-width: 20em;
	max-width: 20em;
	overflow-y: auto;
	}
#ship_des_pane INPUT[name='shipname'] {
	box-sizing: border-box;
	font-family: 'ethnocentric';
	color: #FFF; /* #A8FFCD; */
	font-size: 120%;
	background: none;
	border: 1px solid #999;
	padding: 0.3em;
	width: 100%;
	margin: 0;
	border-radius: 0.25em;
	}	
#ship_des_pane P.subtext,
#ship_des_pane #newbp P,
#ship_des_pane #bp_detail P { 
	margin: 0.2em 0;
	}
#ship_des_pane #newbp H3,
#ship_des_pane #bp_detail H3 { 
	margin: 1em 0 0.65em 0;
	}
#ship_des_pane TABLE TD {
	vertical-align:top;
	}
#ship_des_pane .resources SPAN { margin-right:0.65em; }
#ship_des_pane TD P.subtext { color: #AAA; }
#ship_des_pane P.subtext SPAN { margin-right:1em; }




	
	
/* SHIP COMBAT PANE */
#combat_pane {
	height:100%;
	background: url(../img/map/bg/stars.jpg) 50% 50% no-repeat;
	background-size: cover;
	display: flex;
	flex-flow: row nowrap;
	position:relative; /* needed for absolutely positioned FX */
	overflow: hidden;
	}
#combat_pane .ui {
	z-index: 10; /* lets us put FX behind the panels */
	}	
#combat_pane > * {
	flex: 2;
	display:flex;
	flex-flow: column nowrap;
	margin: 1em;
	order: 3;
	}
#combat_pane #center-column {
	flex: 3;
	padding: 0 1em;
	order: 2;
	}
/* whichever column is the player goes first */
#combat_pane #defender-column.is_player,
#combat_pane #attacker-column.is_player {
	order: 1 !important;
	}
#combat_pane #defender-column,
#combat_pane #attacker-column {
	border: 1px solid transparent;
	}
	
#combat_pane .column-header {
	flex: 1 1 content;
	text-align: center;
	}
#combat_pane .fleet-container {
	flex: 30 2;
	overflow-y: auto;
	}
#combat_pane .controlpanel {
	flex: 3 1 30%;
	text-align:center;
	}
#combat_pane .log {
	flex: 30 1 70%; /* silly spacing prevents jitter on ship detail hover */
	overflow-y: auto;
	text-align:center;
	}
#combat_pane .statsbox {
	flex: 2 2 20%;
	overflow-y: auto;
	min-height: 12em;
	text-align:center;
	}
#combat_pane .statsbox TD:first-child {
	text-align:right;
	}
#combat_pane .statsbox TH {
	text-align:center;
	padding-right: 2em;
	padding-left: 2em;
	}
#combat_pane > .winner {
	background-color: rgba( 10, 230, 100, 0.2 );
/* 	background-image: radial-gradient(circle closest-corner at 50% 50% , transparent 0%, transparent 50%, rgba( 10, 230, 100, 0.25 ) 100%); */
	border-radius: 1em;
	border-color: rgba( 10, 255, 180, 0.5 ) !important;
	transition: border-color 0.75s ease-in, background-color 0.75s ease-in;
	}
#combat_pane > .winner H2 {
	color: #FFF !important;
	transition: color 0.75s ease-in;
	}
/* planet background */
#combat_pane .planet {
	position: absolute;
	height: 100%;
	width: 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 30%;
	transform: rotate(180deg);
	z-index: 1;
	margin: 0;
	padding: 0;
	flex:none;
	}
	
	
	
	
/* GROUND COMBAT PANE */
#combat_pane.groundcombat {
	background: url(../img/bg/scene-planet001.jpg) 50% 50% no-repeat;
	background-size: cover;
	}
	
	
	
	
/* SETUP PANE */
#setup_pane {
	padding: 3em;
	}
	
#setup_pane .window {	
	background: rgba(0,0,0,0.6);
	border: 1px #222 outset;
	border-radius: 1em;
	padding: 2em;
	margin: 1em 0;
	}
#setup_pane SELECT {
	font-size: 1.5rem;
	}
#setup_pane .option {
	font-size: 150%;
	margin: 1em 0;
	display: flex;
	flex-flow: row nowrap;
	}
	
#setup_pane LABEL {
	flex: 1;
	max-width: 25%;
	text-align: right;
	margin-right: 1em;
	font-weight: bold;
	}
#setup_pane OUTPUT {
	flex: 1;
	max-width: 30%;
	text-align: left;
	margin-left: 1em;
	font-weight: bold;
	}
#setup_pane .option > INPUT {
	width: 30%;
	flex: 1;
	text-align: left;
	}
#setup_pane .option > DIV {
	width: 30%;
	flex: 2;
	}
#setup_pane .option > DIV P:first-child {
	margin-top: 0;
	}
#setup_pane .option .disabled {
	opacity: 0.35;
	}
#setup_pane .option > INPUT[type="checkbox"]:first-child {
	max-width: 10%;
	margin: auto 0;
	}	
.env_box {
	background: 
		linear-gradient( to right, 
			rgba( 0, 0, 0, 1 ) 0%,
			rgba( 0, 0, 0, 0 ) 50%,
			rgba( 255, 255, 255, 0 ) 50%,
			rgba( 255, 255, 255, 0.7 ) 100%
			),
		linear-gradient( to bottom, 
			rgba( 0, 40, 200, 1.0 ) 0%,
			rgba( 240, 240, 180, 1.0 ) 50%,
			rgba( 200, 40, 10, 1.0 ) 100%
			)
		;
	}
.planet .env_box .target { border-width: 0 !important; }
.planet .env_box .target .grav {
	position:absolute;
	width: 100%;
	height: 100%;
	border: 1px ridge #666;
	margin-left: 0;
	margin-top: 0;
	box-sizing: border-box; 
	border-radius: 2px;
	z-index: 5;
	}
.planet.grav0 .env_box .target .grav { border-width: 2px; }
.planet.grav1 .env_box .target .grav { border-width: 6px; }
.planet.grav2 .env_box .target .grav { border-width: 10px; }
.planet.grav3 .env_box .target .grav { border-width: 15px; }
.planet.grav4 .env_box .target .grav { border-width: 20px; }

.env_box .a { 
	box-sizing: border-box; 
	background: rgba(50,200,50,0.35);
	border-radius: 0.1em;
	position: absolute;
	width: 100%;
	height: 100%;
	margin-left: 0;
	margin-top: 0;
	z-index: 2;
	border: 1px solid #090;
}
.adapt2 .env_box .a1 {
	margin-left: -100%;
	width: 300%;
}
.adapt2 .env_box .a2 {
	margin-top: -100%;
	height: 300%;
}
.adapt3 .env_box .a1 {
	margin-left: -200%;
	width: 500%;
}
.adapt3 .env_box .a2 {
	margin-top: -200%;
	height: 500%;
}
.adapt3 .env_box .a3 {
	margin-top: -100%;
	margin-left: -100%;
	width: 300%;
	height: 300%;
}
	
/* VICTORY PANE */	
#victory_pane #recipes > .desc {
	font-style:italic;
	color: #AAA;
}
#victory_pane #recipes UL { 
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}
#victory_pane #recipes LI {
	margin-left: 2.7em;
	opacity: 0.35;
	margin-bottom: 0.5em;
}
#victory_pane #recipes LI:before {
	content:'☐';
	font-size: 2.5em;
	line-height: 1em;
	margin-left: -1.1em;
	float:left;
}
#victory_pane #recipes LI .name { 
	font-weight: bold; 
	font-size: 120%;
	margin: 0;
}
#victory_pane #recipes LI .desc { 
	margin: 0;
}
#victory_pane #recipes LI.gotcha {
	color: #82e277;
	opacity: 1.0;
}
#victory_pane #recipes LI.gotcha:before {
	content:'\2611\FE0E';
}

#victory_pane #ranks TABLE TD:first-child {
	color:#FFF; 
	text-shadow: 1px 1px 1px #000; 
	border-radius: 0.25em;
	font-weight:bold;
	text-align:center;
}
#victory_pane #ranks TABLE TD:last-child {
	width:95%;
	text-align:right;
	padding-right:0;
}
#victory_pane #ranks TABLE TD:last-child DIV {
	height:1em; 
	width: 0; 
	background-color: #4BA5CC;
	border-radius: 0.25em;
	margin:0;
	padding:0;
}
#victory_pane #ranks TR.is_player TD:last-child DIV {
	background-color: #82e277;
}
#victory_pane #ranks TR.is_player TD:nth-child(2) {
	color: #82e277;
}


	
#layout_ui_main.title_screen {
	background-size: cover;
	}
#layout_ui_main.title_screen .content {
	margin-top: 5em;
	text-align:center;
	position:relative;
	}
#layout_ui_main.title_screen P {
	margin-top: 3em;
	}
#layout_ui_main.title_screen .content * {
	text-align:center;
	}
#layout_ui_main.title_screen #games_list {
	max-width: 40em; 
	margin: 2em auto; 
	}
#layout_ui_main.title_screen #games_list DIV {
	padding: 1em;
	position:relative;
	}
#layout_ui_main.title_screen #games_list DIV .button_rack {
	position:absolute; 
	top: 0; 
	right: 0;
	margin: 0; 
	padding: 0;
	}
#layout_ui_main.title_screen #games_list DIV .button_rack:first-child {
	left: 0;
	right: auto;
	}
#layout_ui_main.title_screen #games_list DIV.clickable:hover {
	background-color: #4BA5CC;
	}
#layout_ui_main.title_screen #games_list DIV.clickable:hover .dim {
	color: #11436b;
	}
#layout_ui_main.title_screen .disclaimer {
	position: absolute;
	bottom: 2em;
	text-align:center;
	width: 100%;
	color: #AAA;
	}
#layout_ui_main.title_screen .disclaimer A {
	color: #AAA;
	}

#layout_ui_content.active #fleets_pane {
	background: rgba(0,0,0,0.7);
	}
#layout_ui_content.active #fleet_pane {
	background: rgba(0,0,0,0.7);
	}
	
	
/* overkill title intro */
#layout_ui_main.title_screen H1 SPAN { opacity: 0.001; }
#layout_ui_main.title_screen H1 SPAN:nth-child(1) { opacity: 1; animation: fadeIn 2s both ease-out 0s; }
#layout_ui_main.title_screen H1 SPAN:nth-child(2) { opacity: 1; animation: fadeIn 2s both ease-out 1s; }
#layout_ui_main.title_screen H1 SPAN:nth-child(3) { opacity: 1; animation: fadeIn 2s both ease-out 0.5s; }
#layout_ui_main.title_screen H1 SPAN:nth-child(4) { opacity: 1; animation: fadeIn 2s both ease-out 0.15s; }
#layout_ui_main.title_screen H1 SPAN:nth-child(5) { opacity: 1; animation: fadeIn 2s both ease-out 0.1s; }
#layout_ui_main.title_screen H1 SPAN:nth-child(6) { opacity: 1; animation: fadeIn 2s both ease-out 0.85s; }
#layout_ui_main.title_screen H1 SPAN:nth-child(7) { opacity: 1; animation: fadeIn 2s both ease-out 1.1s; }
#layout_ui_main.title_screen H1 SPAN:nth-child(8) { opacity: 1; animation: fadeIn 2s both ease-out 0.65s; }
#layout_ui_main.title_screen H1 SPAN:nth-child(9) { opacity: 1; animation: fadeIn 2s both ease-out 1.7s; }
#layout_ui_main.title_screen H1 SPAN:nth-child(10) { opacity: 1; animation: fadeIn 2s both ease-out 0.1s; }
#layout_ui_main.title_screen H1 SPAN:nth-child(11) { opacity: 1; animation: fadeIn 2s both ease-out 0.6s; }
#layout_ui_main.title_screen H1 SPAN:nth-child(12) { opacity: 1; animation: fadeIn 2s both ease-out 2s; }
#layout_ui_main.title_screen H1 SPAN:nth-child(13) { opacity: 1; animation: fadeIn 2s both ease-out 1.6s; }
#layout_ui_main.title_screen H1 SPAN:nth-child(14) { opacity: 1; animation: fadeIn 2s both ease-out 1.2s; }
#layout_ui_main.title_screen H1 SPAN:nth-child(15) { opacity: 1; animation: fadeIn 2s both ease-out 1.44s; }
#layout_ui_main.title_screen H1 SPAN:nth-child(16) { opacity: 1; animation: fadeIn 2s both ease-out 0.9s; }
#layout_ui_main.title_screen H1 SPAN:nth-child(17) { opacity: 1; animation: fadeIn 2s both ease-out 0.2s; }
#layout_ui_main.title_screen H1 SPAN:nth-child(18) { opacity: 1; animation: fadeIn 2s both ease-out 0.8s; }
#layout_ui_main.title_screen H1 SPAN:nth-child(19) { opacity: 1; animation: fadeIn 2s both ease-out 1.4s; }
#layout_ui_main.title_screen H1 SPAN:nth-child(20) { opacity: 1; animation: fadeIn 2s both ease-out 0.95s; }
#layout_ui_main.title_screen H1 SPAN:nth-child(21) { opacity: 1; animation: fadeIn 2s both ease-out 0.44s; }	
	
	

#layout_ui_main #gameover_pane {
	padding: 6em 2em;
}
#gameover_pane P {
	font-size: 200%;
	padding: 0.35em 20%;
}	
#gameover_pane P.button_rack {
	margin-top: 3em;
}	
#gameover_pane H1 {
	font-size: 600%;
}	
#gameover_pane H1,
#gameover_pane P,
#gameover_pane {
	text-align:center;
}	
#gameover_pane.victory {
	background: url(../img/map/bg/spacebg_035.jpg) 50% 50% no-repeat;
	background-size: cover;
}
#gameover_pane.defeat {
	background: url(../img/map/bg/spacebg_047.jpg) 50% 50% no-repeat;
	background-size: cover;
}
	
	
	
	
.explosion {
	background-image: url(../img/anim/explosion_128px_sheet_row.png);
	mix-blend-mode: screen;
	height: 128px;
	width: 128px;
	margin: 0 !important;
	padding: 0 !important;
	animation: explosion 0.5s steps(16);	
	transform-origin: 50% 50% 0; 
	transform: translateX(-64px) translateY(-64px);
	}
@keyframes explosion {
   from { background-position:    0px; transform: translateX(-64px) translateY(-64px) rotate(0deg);}
     to { background-position: -2048px; transform: translateX(-64px) translateY(-64px) rotate(60deg);}
	}

.shipcombat_hit_stat {
	height: 30px;
	width: 150px;
	color: #FFA;
	box-sizing: border-box; 
	margin: 0 !important;
	padding: 0 !important;
	font-weight:bold;
	text-align:center;
	font-size: 150%;
	text-shadow: 1px 1px 0px #000;
	animation: shipcombat_hit_stat 1s ease-out;	
	transform: translateX(-75px);
	transform-origin: 50% 50% 0; 
	}
.shipcombat_hit_stat.hull { color: #FFA; } 
.shipcombat_hit_stat.armor { color: #3BF; } 
.shipcombat_hit_stat.missed { color: rgba(255,255,255,0.6); text-shadow: none;} 
.shipcombat_hit_stat.killed { color: #F22; background: linear-gradient( to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1.0) 30%, rgba(255,255,255,1.0) 70%, rgba(255,255,255,0) 100%); } 
@keyframes shipcombat_hit_stat {
   from { transform: translateX(-75px) translateY(0px); opacity: 1.0;}
     to { transform: translateX(-75px) translateY(-100px); opacity: 0.5; }
	}



.spaceship {
	opacity: 0;
	background: url(../img/anim/ship_rear_mock.png) 50% 50% no-repeat;
	background-size: cover;
	height: 384px;
	width: 636px;
	animation: xplay 7s cubic-bezier(0.23, 1, 0.32, 1);
	position: absolute;
	left: 0;
	top: 0;
	z-index: 50;
	pointer-events: none;
	}
@keyframes xplay {
   from { transform: translateX(2200px) translateY(600px) rotate(20deg) scale(3.0, 3.0); opacity: 1; }
     70% { opacity: 1.0; }
     100% { transform: translateX(0) translateY(0) rotate(0) scale(0.01, 0.01); opacity: 0; }
}