:root {
	--bg-color:#FFF;
	--text-color:#000;
	--secondary-color:#777;
	
	--button-hover-color:#8B8;
	
	--inspector-border-color:#DDD;
	
	--table-alt-color:#EAEAEA;
	--table-header-color:#CCC;
	--table-header-hover-color:#AAA;
	
	--tab-button-color:EAEAEA;
	--tab-button-edge-color:#AAA;
	--tab-button-hover-color:#CCC;
	--tab-button-visible-color:#EEE;
	
	--hexmap-grid-color:#CCC;
	--hexmap-xxyy-color:#CCC;
	--hexmap-selection-color:#EAEAEA;
	--hexmap-system-name-color:#333;
	--hexmap-system-marker-color:#555;
	--hexmap-planet-name-color:#555;
}


:root {
	--bg-color:#112;
	--text-color:#BBC;
	--text2-color:667;
	
	--button-hover-color:#FFFFFF;
	
	--inspector-border-color:#334;
	
	--table-alt-color:#223;
	--table-header-color:#445;
	--table-header-hover-color:#667;
	
	--tab-button-color:#223;
	--tab-button-edge-color:#667;
	--tab-button-hover-color:#445;
	--tab-button-visible-color:#112;
	
	--hexmap-grid-color:#223;
	--hexmap-xxyy-color:#223;
	--hexmap-selection-color:#181828;
	--hexmap-system-name-color:#667;
	--hexmap-system-marker-color:#AAB;
	--hexmap-planet-name-color:#667;
}


input, select, textarea {
	background-color:var(--table-alt-color);
	color:var(--text2-color);
	border:none;
	font:inherit;
}

body {
	font-family:"Verdana", "Segoe UI";
	font-size:12px;
	color:var(--text-color);
	background-color:var(--bg-color);
}

.secondary {
	color:var(--secondary-color);
}

h1 {
	font-size: 24px;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 5px;
}

h3 {
	font-size: 20px;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 5px;
}

h2,.sector-name {
	font-weight:bold;
	font-size: 36px;
	margin-top: 10px;
	margin-bottom:10px;
}

#generator-container {
	width:100%;
	max-width:600px;
	margin-left:auto;
	margin-right:auto;
}

#back-button {
	text-decoration: underline;
	cursor: pointer;
}

.hide-section {
	display: none;
}

#map-container {
	vertical-align: top;
	white-space: nowrap;
}

#hexmap {
	display:inline-block;
}

#inspector {
	min-width: 200px;
	width:25%;
	border-right: 4px solid var(--inspector-border-color);
	margin-right: 5px;
	padding-right: 5px;
	padding-left: 5px;
	
	max-height:765px;
	overflow-y:auto;
	
	vertical-align: top;
	
	white-space: normal;
	
	display:inline-block;
}

#inspector table {
	border-spacing:0px;
}

#inspector td:nth-child(1) {
	vertical-align:top;
	padding-right:5px;
	text-align:right;
}

#inspector td:nth-child(2) {
	color:var(--secondary-color);
}

#inspector hr {
	border: none;
	border-bottom: 2px solid var(--inspector-border-color);
}

.inspector-system-name {
	font-size: 24px;
	font-weight: bold;
}

.inspector-object-name {
	font-size: 16px;
	font-weight: bold;	
}

.inspector-object-header {
}

.inspector-tag-body {
	padding-left:15px;
}

#inspector p {
	margin-bottom: 5px;
	margin-top: 5px;
}

.url-export {
	width:100%;
	max-width: 300px;
}

.textbutton {
	cursor:pointer;
	text-decoration: underline;
	
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;	
}

.no-edit .edit-zone {
	display:none;
}

.textbutton:hover {
	color:var(--button-hover-color);
}

/* ========================================================================== */

.dynmodal-background {
	position: absolute;
	top: 0px;
	left: 0px;

	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
}

#modal-background.hide {
	display:none;
}

.dynmodal-container {
	/*width: 50%;
	max-width: 500px;*/
	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	
	padding: 20px;
	
	background-color:var(--bg-color);
	border: 1px solid var(--tab-button-edge-color);
	
	box-shadow: 5px 5px 10px black;
}

/* ========================================================================== */

.dyntable td {
	padding-left:10px;
	padding-right:10px;
	border-collapse:collapse;
	/*text-align:center;*/
	border: 0;
}

.dyntable {
	border-spacing:0px;
}

.dyntable tr:nth-child(2n) {
	background-color:var(--table-alt-color);
}

.dyntable thead {
	background-color:var(--table-header-color);
	border-bottom: 2px solid;
	font-weight:bold;
	cursor:pointer;
}

.dyntable thead td:hover {
	background-color:var(--table-header-hover-color);
}

.dyntable .dyntable-hidden, .no-edit .dyntable .edit-cell {
	display:none;
}

/* ========================================================================== */

button.dyntab-button {
	background-color:var(--tab-button-color);
	color:var(--text-color);
	font-size: 14px;
	
	padding:2px;
	min-width: 125px;
	
	border: 1px solid var(--tab-button-edge-color);
	border-bottom: none;
	
	cursor:pointer;
	margin: 2px;
}

button.dyntab-hidden:hover {
	background-color:var(--tab-button-hover-color);
}

button.dyntab-visible {
	background-color:var(--tab-button-visible-color);
	font-weight:bold;
}

div.dyntab-hidden {
	display:none;
}

/* ========================================================================== */

.dynspoiler-header {
	cursor:pointer;
}

.dynspoiler-header:hover {
	text-decoration: underline;	
}

.dynspoiler-header::after {
	font-size:75%;
	text-decoration: none;

  content: " (hide detail) ▽";
}

.dynspoiler-header.dynspoiler-hidden::after {
	font-size:75%;
  content: " (show detail) ▷";
}

.dynspoiler-body.dynspoiler-hidden {
	display:none;
}


/* ========================================================================== */

.dynedit-title {
	font-size: 16px;
	font-weight: bold;		
}

.dynedit td {
	vertical-align:middle !important;
}

.dynedit select, .dynedit input, .dynedit textarea {
	width: 100%;
	padding-top:3px;
	padding-bottom:3px;
}

.dynedit-randomize {
	cursor:pointer;
	font-size:200%;
	line-height:100%;
	
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
	
	margin-left:5px;
}

.dynedit-randomize:hover {
	color:var(--button-hover-color);
}