spacerpg/wwwroot/css/index.css

html, body {
	color: lightgray;
	background-color: #181818;
	margin: 0px;
	padding: 0px;
	font-family: sans-serif;
	text-align: center;
}

.spacer{
	width: 100%;
	height: 33%;
	display: block;
}

.three-column {
	display: flex;
}

.column {
	flex: 1;
}

.container {
	text-align: center;
}

.container h1 {
	padding: 0px;
	margin: 0px;
}

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer & Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}

.clickable {
	cursor: pointer;
}

.animate-visibility {
	-webkit-transition: opacity 0.5s ease-in;
    -moz-transition: opacity 0.5s ease-in;
    -o-transition: opacity 0.5s ease-in;
    -ms-transition: opacity 0.5s ease-in;
    transition: opacity 0.5s ease-in;
}

.message {
	display: block;
	cursor: pointer;

	-webkit-transition: opacity 0.5s ease-in;
    -moz-transition: opacity 0.5s ease-in;
    -o-transition: opacity 0.5s ease-in;
    -ms-transition: opacity 0.5s ease-in;
    transition: opacity 0.5s ease-in;

	opacity: 0;
}

.error-message {
	color: crimson;
}

#spacerpg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 33%;
	margin-left: auto;
	margin-right: auto;
	background-color: #060606;

   image-rendering: crisp-edges; /* Older versions of FF */
   image-rendering: -moz-crisp-edges; /* FF 6.0+ */
   image-rendering: -webkit-optimize-contrast; /* Safari */
   image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
   /*image-rendering: pixelated;  // Awesome future-browsers */
   image-rendering: optimize-contrast;
   -ms-interpolation-mode: nearest-neighbor; /*IE*/
}

#main--progress progress {
	background-color: transparent;
}

#player-hud {
	text-align: center;
}

#main-container {
	padding-bottom: 8px;
}

#ship-container {

}

#inventory-container{
	padding-bottom: 8px;
}

#navigation-container {
	padding-bottom: 8px;
}

#navigation--system {
	width: 100%;
	min-width: 256px;
	height: 256px;
	background-color: #060606;
	cursor: none;
}

#ship--board {
	display: none;
}

#ship--undock {
	display: none;
}

#crafting-container {
	padding-bottom: 8px;
}

#dialog-container-left {
	/* background-color: rgba(200, 20, 20, 0.5); */
	position: fixed;
	display: block;
	width: 40%;
	height: 30%;
	top: 0;
	left: 0;
	text-align: left;
	padding: 8px;
	overflow: hidden;
}

#dialog-container-right {
	/* background-color: rgba(20, 200, 200, 0.5); */
	position: fixed;
	display: block;
	width: 40%;
	height: 30%;
	top: 0;
	right: 0;
	text-align: right;
	padding: 8px;
	overflow: hidden;
}

@media (max-width: 768px) {
	.three-column {
		flex-direction: column;
	}

	.left-column {
		order: 2;
	}

	.center-column {
		order: 0;
	}

	.right-column {
		order: 1;
	}

	#dialog-container-left {
		width: 100%;
		height: 10%;
		top: 0;
		left: 0;
		padding: 0;
		padding-right: 16px;
		font-size: 12px;
	}

	#dialog-container-right {
		width: 100%;
		height: 10%;
		top: 20%;
		left: 0;
		padding: 0;
		padding-right: 16px;
		font-size: 12px;
	}
}