/* CHRYSALIS MK 1.1 by GOODMODE */

@font-face {
	font-family: 'GMWrite';
	src: url('../fonts/GmHandwriting2026.ttf') format("truetype");
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	cursor: url('../img/assets/cursor.png') 9 9, auto;
}


/* SKYBOX */
/* transparent stars */
.starfield {
	position: fixed;
	background-image: url("../img/assets/starbg.png");
	background-repeat: repeat;
	width: 100%;
	height: 100%;
	z-index: -1;
}

/* free space for .cloudcover which isn't declared yet */

/* BULK - DEFAULTS */

body {
	height: 100%;
	width: 100%;
	font-family: "Jura", sans-serif;
	color: #72709A;
	background-color: #2B2234;
	overflow-y: scroll;
	scrollbar-color: #203668 #106452;
	scrollbar-width: thin;
}

/* leaves space for footer */

main {
  min-height: 100vh;
  position: relative;
}

/* LEAVE THIS IN TO FIX THE FOOTER */
.pawpad {
	padding-bottom: 40px;
}

/* outermost div, keeps content pushed out to avoid it hiding behind the menu strip */
.gravityfield {
	margin-left: 170px;
	position: relative;
}

/* take boots off text and links and selections */

p {
	margin: 3px 5px 3px 5px;
}

p.interface {
	font-size: 1.1em;
	text-transform: uppercase;
	background-color: rgba(0, 0, 0, 0.2);
}

p.interfacew {
	font-size: 1.1em;
	text-transform: uppercase;
	color: #e24d4d;
	text-shadow: 0px 0px 5px;
	background-color: rgba(0, 0, 0, 0.2);
}

p.interfacea {
	font-size: 1.1em;
	font-weight: bold;
	text-shadow: 0px 0px 5px;
	background-color: rgba(0, 0, 0, 0.2);
}

p.interface:before, p.interfacew:before {
  content: "\2BC8 \0020";
}

a:link, a:visited {
	text-decoration: none;
	display: inline;
	color: white;
	text-shadow: 0px 0px 3px;
}

ul {
  display: inline-block;
	list-style: none;
	line-height: 1em;
  margin: 0 0 0 15px;
}

li::before {
	content: "\25B8 \00A0";
}

a:active {
	color: white;
}

::selection {
    background: rgba(255, 255, 255, 0.4);
    color: white;
}

img { 
	max-width: 100%;
}

img #badge { 
	width: 73px;
	height: auto;
}

/* --- highlighted spans --- */

/* --- the background that keeps the fancy line headers from looking like a strikethrough. nest the span inside the header --- */

span.schmancyspan {
	position: relative;
	background-color: #000;
	padding: 0 10px;
}

/* decorated header - single line on both sides */

h1.schmancy {
	font-family: 'Jura';
	font-size: 2em;
}

h1.schmancy::before, h4.schmancy::after {
	content: "";
	position: absolute;
	height: 0px;
	border-bottom: 1px solid currentcolor;
	box-shadow: 0 0 5px currentcolor, 0 0 3px currentcolor;
}

h1.schmancy::before {
	right: 0;
	margin: 23px 0 0 0;
	width: 100%;
}

h1.schmancy::after {
	content: normal;
}


/* put heels on headers */
h1, h2, h3, h4, h5, h6 {
	font-family: 'VT323', sans-serif;
	font-weight: normal;
	text-shadow: 0px 0px 6px;
}

h3 {
	font-style: italic;
}

h4 {
	margin: 8px 0px 4px 0px;
}

iframe {
	border: none;
	width: 100%;
	height: 100%;
	margin: 0;
	scrollbar-width: thin;
}

/* HORIZONTAL RULES */

hr {
	border: 0;
	border-top: 1px solid #fff;
	text-align: center;
}
hr:after {
	content: '\2726';
	display: inline-block;
	position: relative;
	top: -16px;
	padding: 0 10px;
	color: #fff;
	font-size: 21px;
	text-shadow: 0px 0px 6px;
}

/* this is the fake hr. it's a div */
.divider {
	max-width: 90%;
	margin: 20px auto 20px auto;
	height: 1px;
	width: 100%;
	color: currentcolor;
	background: currentcolor;
	text-align: center;
	font-family: 'Jura', sans-serif;
}
.divider:after{
	content: '\2726';
	display: inline-block;
	position: relative;
	top: -15px;
	padding: 0 10px;
	font-size: 21px;
	text-shadow: 0px 0px 6px;
}

/*   COMMS PAGE SPECIFICS   */

/* COMMISSIONS PRICING TABLE */

#commtable {
	border-spacing: 0 15px;
}

#commtable th {
	padding: 0 15px 0 15px;
}

#commtable td {
	height: 150px;
	padding: 0 15px 0 15px;
	text-align: center;
	font-size: 2em;
}

#commtable td.price {
	width: 150px;
	font-size: 2em;
	font-weight: bold;
	color: white;
	text-shadow: 0px 0px 5px black, 0px 0px 7px black,  0px 0px 10px black, 0px 0px 15px black, 0px 0px 20px black, 0px 0px 30px black, 0px 0px 40px black, 0px 0px 45px black, 0px 0px 50px black, 0px 0px 60px black;
}

#commtable td.price a:link, #commtable td.price a:visited {
	color: white;
	text-shadow: 0px 0px 5px black, 0px 0px 7px black, 0px 0px 10px black, 0px 0px 15px black, 0px 0px 20px black, 0px 0px 30px black, 0px 0px 40px black, 0px 0px 45px black, 0px 0px 50px black, 0px 0px 60px black;
}

#commtable td.price a:hover {
	text-shadow: 0px 0px 5px white, 0px 0px 7px black, 0px 0px 7px black, 0px 0px 10px black, 0px 0px 10px black, 0px 0px 15px black, 0px 0px 20px red, 0px 0px 30px red, 0px 0px 40px orange, 0px 0px 45px yellow, 0px 0px 50px yellow, 0px 0px 60px orange;
}

#commtable td.type {
	text-align: center;
	font-size: 1.2em;
	font-weight: bold;
}

#commtable td.details {
	max-width: 600px;
	padding: 0 15px 0 15px;
	text-align: center;
	font-size: 1.1em;
}

#commtable p {
	max-width: 100%;
	height: 100%;
	margin: auto;
	line-height: 150px;
}

/*   ART GALLERY PAGE SPECIFICS   */

/* ART GALLERY DIV */

.artgallery {
	display: grid;
	grid-template-areas:
		"artheader artheader artheader"
		"artthumbs artframe artframe"
		"artthumbs artframe artframe";
		grid-template-columns: 1fr 2fr;
		gap: 3px;
}

.artgallery > div.artheader {
	grid-area: artheader;
}

.artgallery > .artthumbs {
	grid-area: artthumbs;
	max-height: 100vh;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	overflow: auto;
}

.artgallery > .artthumbs img {
	max-height: 100px;
}

.artgallery > .artframe {
	grid-area: artframe;
}

.artgallery > .artframe img {
	max-height: 98vh;
}

#galText h1 {
	font-size: 2em;
	color: orange;
}

.artframe p {
	font-size: 1em;
}

/* ART COLLAPSIBLE */

.artgallery .collapsibutton {
	display: block;
	width: 90%;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.2em;
	font-family: 'Jura', sans-serif;
	padding: 15px;
	margin: 10px auto 10px auto;
	border: none;
	background-color: rgba(46, 174, 180,0.5);
	color: cyan;
	outline: 3px solid rgba(46, 174, 180, 0.8);
	padding: 5px 15px 7px 5px;
	border-radius: 20px;
}

.artgallery .collapsibutton:hover {
	background-color: rgba(46, 174, 180,0.9);
	outline: 3px solid cyan;
	color: white;
}

.fandomcategory {
	display: none;
}

/* BOOT UP EFFECTS - currently commented out */

@keyframes wakeUp {
	0% {
		opacity: 1;
		visibility: visible;
	}
	100% {
		opacity: 0;
		visibility: hidden;
	}
}

/* 

@keyframes fadeIn {
	0% {
		opacity: 0;
		visibility: hidden;
	}
	100% {
		opacity: 1;
		visibility: visible;
	}
}

@keyframes fadeInSecond {
	0% {
		opacity: 0;
		visibility: hidden;
	}
	100% {
		opacity: 1;
		visibility: visible;
	}
}

@keyframes bootFadeOut {
	0% {
		opacity: 0.8;
		visibility: visible;
	}
	100% {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes fadeInSkip {
	0% {
		opacity: 0;
		visibility: visible;
	}
	100% {
		opacity: 1;
		visibility: visible;
	}
}

@keyframes antiGrav {
	0% {
		transform: translateY(-3%);
	}
	50% {
		transform: translateY(3%);
	}
	100% {
		transform: translateY(-3%);
	}
}

@keyframes partyfloat {
	0% {
		transform: translateY(-6%) rotate(-4deg);
	}
	50% {
		transform: translateY(6%) rotate(4deg);
	}
	100% {
		transform: translateY(-6%) rotate(-4deg);
	}
}

 */

/* boot message - animation commented out */
.bootupmsg {
/* 	animation: bootFadeOut ease 1s;
	animation-delay: 3s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards; */
	opacity: 0.8;
	position: absolute;
	display: block;
	margin: auto;
	top: 25%;
	width: 100%;
	text-align: center;
	font-family: 'VT323', sans-serif;
	font-size: 5em;
	color: #e24d4d;
	text-transform: uppercase;
	text-shadow: 0px 0px 10px;
}

/* BANNER -- outside of grid */
.banner {
	width: 100%;
	height: 105px;
	text-align: center;
}

/* BASIC SHIP PARTS */

/* IMPORTANT: this is the div that goes inside boxes to enable rounded scrollbar corners - and fade-in-second. fade-in currently commented out */
.holocontent {
/* 	animation: fadeInSecond ease 0.5s;
	opacity: 0;
	animation-delay: 3s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards; */
	overflow: auto;
	border-radius: 8px;
	width: 100%;
	height: 100%;
	scrollbar-width: thin;
}

/* THE GRID, GORDON! */
.windshield {
	margin: 10px auto 100px auto;
	display: flex;
	gap: 5px;
	width: 70%;
	justify-content: center;
	max-height: 400px;
}

.windshield a:hover + #starmaptooltip {
	display: block;
}

/* NAVIGATION */

/* navstrip -- navigation menu. outside of grid */
.navstrip {
/* 	animation: fadeIn ease 3s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	opacity: 0; */
	position: absolute;
	top: 0;
	padding: 10px;
	overflow-x: hidden;
	background-color: black;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	width: 170px;
	height: 100%;
	z-index: 1;
}

.navstrip .header {
	position: relative;
	text-align: center;
}

.navstrip h2 {
	margin: 5px;
	color: #DD9D23;
}

.navstrip h4 {
	display: block;
}

.navstrip span {
	position: relative;
	background-color: #000;
	padding: 0 5px;
}

.navstrip h4::before, .navstrip h4::after {
	content: "";
	position: absolute;
	height: 8px;
	border-bottom: 1px solid #4A486F;
}

.navstrip h4::before {
	right: 0;
	margin: 0;
	width: 100%;
}

.navstrip h4::after {
	content: normal;
}

.navstrip ul {
	margin: 0;
	width: 100%;
	list-style: none;
}

.navstrip li::before {
	content: "";
}

.navstrip a {
	padding: 0;
}

.navstrip a::before {
	position: absolute;
	height: 0;
	width: 0;
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-left: 5px solid white;
	content: "";
	margin: 6px 0px 0px -11px;
	display: none;
	filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, .5));
}

.navstrip a::after {
	position: absolute;
	height: 0;
	width: 0;
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-right: 5px solid white;
	content: "";
	margin: 5px 0px 0px 4px;
	display: none;
	filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, .5));
}

.navstrip a:hover::before, .navstrip a:hover::after {
	display: inline-block;
}

/* STARMAP */

/* new */

.starmapSlot {
	width: 100px;
	height: 100px;
	background: none;
	flex-shrink: 0;
	margin: 0;
	position: relative;
	text-align: center;
}

.starmapSlot img {
	width: 100%;
	height: 100%;
}

.starmapSlot .hoverImg {
  position: absolute;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
  display: none;
}

.starmapSlot:hover .hoverImg {
  display: block;
}

.starmapTooltip {
	display: none;
	position: absolute;
	font-family: 'VT323', sans-serif;
	font-size: 1.6em;
	color: #fff;
	text-shadow: 0px 0px 5px;
	width: 100%;
}

.starmapSlot:hover .starmapTooltip {
  display: block;
}

/* PURE BLACK ROUNDED */

.blackpanel {
	position: relative;
	margin: 0 auto 0 auto;
	background-color: #000;
	box-shadow: 0px 0px 30px #000;
	border-radius: 20px;
	z-index: 1;
	color: rgba(182, 178, 242, 1);
}

/* ORANGE HOLOPANEL - used on front page */

.holopanelOrange {
/* animation: fadeIn ease 3s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	opacity: 0; */
	padding: 15px;
	background-color: rgba(255, 188, 0, 0.4);
	border-radius: 10px;
	outline: 0.2em solid #FF7800;
	outline-offset: -3px; /* keeps outline from bleeding over other divs */
	box-shadow: 0px 0px 30px 10px rgba(255, 120, 0, 0.4) inset;
	color: #FFBC00;
	font-family: "Jura", sans-serif;
	max-height: 370px;
	scrollbar-color: rgba(255, 188, 0, 0.4) rgba(255, 120, 0, 0.4);
	scrollbar-width: thin;
}

.holopanelOrange ::selection {
    background: rgba(255, 188, 0, 0.4);
    color: #FFD521;
}

.holopanelOrange a:link, .holopanelOrange a:visited {
	color: #FFD521;
	text-shadow: 0px 0px 3px;
	transition: .3s;
}

.holopanelOrange a:hover, .holopanelOrange a:active {
	color: #FFF156;
}


/* BLUE HOLOPANEL - used on front page */

.holopanelBlue {
/* animation: fadeIn ease 3s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	opacity: 0; */
	padding: 15px;
	background-color: rgba(46, 174, 180, 0.4);
	border-radius: 10px;
	outline: 0.2em solid #2EAEB4;
	outline-offset: -3px; /* keeps outline from bleeding over other divs */
	box-shadow: 0px 0px 30px 10px rgba(46, 174, 180, 0.4) inset;
	color: #00FFA8;
	font-family: "Jura", sans-serif;
	max-height: 370px;
	scrollbar-color: rgba(0, 255, 168, 0.4) rgba(46, 174, 180, 0.4);
	scrollbar-width: thin;
}

.holopanelBlue ::selection {
    background: rgba(46, 174, 180, 0.4);
    color: #5FFFAC;
}

.holopanelBlue a:link, .holopanelBlue a:visited {
	color: #5FFFAC;
	transition: .3s;
}

.holopanelBlue a:hover, .holopanelBlue a:active {
	color: #B5FFBF;
}

/* hullframe */

.hullframe {
	width: 100%;
	height: 339px;
	float: left;
	margin-top: -339px;
}

.bioshipleft {
	height: 100%;
	width: 300px;
	background-image: url('../img/assets/bioship_left.png');
	background-repeat: no-repeat;
	float: left;
}

.bioshipleftSleep{
	animation: wakeUp ease 6s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	height: 100%;
	width: 300px;
	background-image: url('../img/assets/bioship_left_asleep.png');
	background-repeat: no-repeat;
	float: left;
}

.bioshipright {
	height: 100%;
	width: 300px;
	background-image: url('../img/assets/bioship_right.png');
	background-repeat: no-repeat;
	float: right;
}

.bioshiprightSleep{
	animation: wakeUp ease 6s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	height: 100%;
	width: 300px;
	background-image: url('../img/assets/bioship_right_asleep.png');
	background-repeat: no-repeat;
	float: left;
}

.bioshipmiddle {
	height: 100%;
	background-image: url('../img/assets/bioship_middle.png');
	background-repeat: repeat-x;
}



/* HULLGRID is everything under the starfield */

.hullgrid {
	display: grid;
	width: 100%;
	height: 100%;
	margin: 0;
	justify-items: center;
	background-color: #1D1316;
	background-image: url("../img/assets/bioship_skin.png");
	background-repeat: repeat;
	font-family: 'Permanent Marker', sans-serif;
	padding-bottom: 22px;
}

/* HACKPAD */

.hackpad {
	grid-area: 1 / 1 / span 3 / span 1;
	width: 422px;
	height: 699px;
	padding: 95px 75px 220px 100px;
	left: 0px;
	margin-left: -20px;
	background-image: url("../img/assets/hackpad.png");
	background-repeat: no-repeat;
}

.stickynote1 {
	grid-area: 1 / 2 / span 1 / span 1;
	background: #FFF4B5 linear-gradient(180deg, #FFF4B5, #FFFBE1);
	box-shadow: 0px 10px 10px 5px rgba(0, 0, 0, 0.3);
	outline: 2px solid #D39E4C;
	width: 200px;
	height: 200px;
	overflow-y: scroll;
	scrollbar-color: rgba(223, 208, 120, 0.5) rgba(223, 208, 120, 0);
	scrollbar-width: thin;
	padding: 15px;
	margin: 15px;
	font-family: 'GmHandwriting2026', Verdana;
	color: black;
	font-size: 1.3em;
	text-shadow: 0px 0px 1px;
}

.stickynote1 ::selection {
    background: rgba(227, 255, 54, 0.8);
	color: rgba(0, 0, 0, 0.2);
}

.stickynote1 ul {
	list-style: none;
	margin: none;
	width: 100%;
	line-height: 1em;
}

.stickynote1 li::before {
	content: "\21C0 \00A0";
}

.stickynote2 {
	grid-area: 2 / 2 / span 1 / span 1;
	background: #FFF4B5 linear-gradient(180deg, #FFF4B5, #FFFBE1);
	box-shadow: 0px 10px 10px 5px rgba(0, 0, 0, 0.3);
	outline: 2px solid #D39E4C;
	width: 200px;
	height: 200px;
	overflow-y: scroll;
	scrollbar-color: rgba(223, 208, 120, 0.5) rgba(223, 208, 120, 0);
	scrollbar-width: thin;
	padding: 15px;
	margin: 15px;
	font-family: 'Permanent Marker', sans serif;
	color: black;
	font-size: 1.3em;
	text-shadow: 0px 0px 1px;
}

.stickynote2 ::selection {
    background: rgba(227, 255, 54, 0.8);
	color: rgba(0, 0, 0, 0.2);
}

.stickynote2 ul {
	list-style: none;
	margin: none;
	width: 100%;
	line-height: 1em;
}

.stickynote2 li::before {
	content: "\21C0 \00A0";
}


/* cbox panel */
.cboxpanel {
	grid-area: 1 / 4 / span 2 / span 1;
	background-color: #1F6130;
	background-image: url("../img/assets/organic_green_bg.png");
	background-repeat: repeat;
	border: 20px solid rgba(3,31,33, 0.8);
	border-style: inset;
	border-radius: 50px;
	outline: 5px solid rgba(0,0,0,0.5);
	box-shadow: 30px 30px 30px 5px rgba(0, 0, 0, 0.4) inset;
	padding: 20px;
	scrollbar-width: thin;
	color: rgba(0, 0, 0, 0.8);
	font-family: 'Permanent Marker' sans-serif;
	font-size: 1em;
	text-align: center;
}

.cboxpanel h1, .cboxpanel h2, .cboxpanel h3, .cboxpanel h4, .cboxpanel h5, .cboxpanel h6 {
	font-family: 'Permanent Marker', sans-serif;
}

/* linkback panel */
.linkbackpanel {
	grid-area: 4 / 1 / span 1 / span 4;
	background-color: #1F6130;
	background-image: url("../img/assets/organic_green_bg.png");
	background-repeat: repeat;
	border: 20px solid rgba(3,31,33, 0.8);
	border-style: inset;
	border-radius: 50px;
	outline: 5px solid rgba(0,0,0,0.5);
	box-shadow: 30px 30px 30px 5px rgba(0, 0, 0, 0.4) inset;
	padding: 20px;
	scrollbar-width: thin;
	color: rgba(0, 0, 0, 0.8);
	font-family: 'Permanent Marker' sans-serif;
	font-size: 1em;
	text-align: center;
	margin: 20px;
}

.linkbackpanel h1, .linkbackpanel h2, .linkbackpanel h3, .linkbackpanel h4, .linkbackpanel h5, .linkbackpanel h6 {
	font-family: 'Permanent Marker', sans-serif;
}


.blackscreen {
	background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.1));
	outline: linear-gradient(180deg, #0D0D0E, #19181A);
	height: 100%;
	font-size: 0.7em;
	text-shadow: 0px 0px 2px;
	overflow-y: auto;
	border-radius: 14px;
	scrollbar-color: #fff #000;
	scrollbar-width: thin;
	border-radius: 30px;
	padding: 4px;
}

.shipidentifier {
	grid-area: 5 / 1 / span 1 / span 4;
	font-size: 1.1em;
	font-family: "Courier New", serif;
	font-weight: bold;
	color: #5DBF02;
	text-shadow: 0px 0px 2px;
	text-align: center;
	width: 500px;
}

/* BLACK BOX FOR PLAIN PAGES */

.basepageblack {
	min-width: 310px;
	max-width: 1300px;
	min-height: 500px;
	position: relative;
	left: 50%;
  transform: translateX(-50%);
	padding: 30px;
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 5px;
	outline: 0.2em solid rgba(0, 197, 208, 0.6);
	outline-offset: -2px; /* keeps outline from bleeding over other divs */
	box-shadow: 0 0 30px 10px rgba(0, 197, 208, 0.3) inset;
	color: #A6A9FF;
}

.basepageblack h2, .basepageblack h3 {
	color: #00C5D0;
}

.basepageblack h1 {
	color: #FFBC00;
}

a.unconverted {
	color: #C6C6C6;
	text-shadow: none;
}

a.unconverted:visited {
	color: #C6C6C6;
	text-shadow: none;
}

.backbutton {
	background-color: rgba(46, 174, 180,0.5);
	color: cyan;
	outline: 3px solid rgba(46, 174, 180, 0.8);
	padding: 5px 15px 7px 5px;
	top: 0;
	left: 0;
	width: 100px;
	margin: 0 10px 10px 10px;
	text-align: center;
	position: absolute;
	border-radius: 20px;
	z-index: 1;
}

.backbutton:hover {
	background-color: rgba(46, 174, 180,0.9);
	outline: 3px solid cyan;
	color: white;
}

.backbutton::before {
	content: "◂ HOME";
}


/* IMG HOVER EMPHASIS */

.space img {
	-webkit-transform: rotate(40deg);
		transform: rotate(40deg);
  border-radius: 50%;
  -webkit-transition: -webkit-transform 5s ease-in-out;
          transition: transform 5s ease-in-out;
}

.space img:hover {
	-webkit-transform: rotate(-30deg);
		transform: rotate(-30deg);
}


/* FOOTER */
/* DATE & SITE VERSION, ETC */

.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 3px;
	background-color: #000;
	background-color: rgba(0,	0, 0, 0.5);
	text-transform: uppercase;
	color: #fff;
	font-size: 0.7em;
	text-align: center;
	font-family: "Jura", sans-serif;
	height: 22px;
	margin: 30px 0 0 0;
}

.footer a:link, a:visited {
	color: white;
	transition: .3s;
}

.footer a:hover, a:active {
	color: #2EAEB4;
}

@media only screen and (max-width: 700px) {

  .windshield {
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
  }
  
  .hullgrid {
	width: 100%;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
  }
  
  .bioshipright {
	display: none;
  }
  
  .bioshiprightSleep {
	display: none;
  }
  
  .navstrip {
	position: fixed;
	float: top;
	margin: 0px 0px 0px 0px;
	width: 100%;
	height: 100px;
	padding: 0 0 5px 0;
	overflow: hidden;
	border-radius: 0 0 30px 30px;
	background-color: rgba(0, 0, 0, 0.8);
  }
  
  .holopanelOrange, .holopanelBlue, .greenpanel {
	margin: 0px 0px 0px 0px;
	width: 100%;
  }
  
	.navstrip > div {
	height: 100px;
	padding: 0 0 5px 0;
	scrollbar-color: #000 #fff;
	scrollbar-width: thin;
	overflow-y: auto;
}

.hackpad, .stickynote1, .stickynote2, .cboxpanel, .linkbackpanel, .shipidentifier {
	grid-area: auto;
	width: auto;
}

.blackscreen {
	width: 240px;
}

	.starfield {
	width: 100%;
	}
	
	.footer {
		display: none;
	}

    .backbutton {
        width: 40px;
		height: 40px;
		padding: 0;
    }
	.backbutton::before {
	content: "◂";
	position: absolute;
	font-size: 2em;
	margin: -2px 0 0 -14px;
	}
	.backbutton:hover {
	width: 100px;
	background-color: rgba(46, 174, 180,0.9);
	outline: 3px solid cyan;
	color: white;
	padding: 6px 0 0 8px;
	}
	.backbutton:hover::before {
	content: "◂ HOME";
	position: relative;
	font-size: 1.2em;
	}
	
	#commtable td.price {
	width: 80px;
	font-size: 2em;
	color: white;
	}

	#commtable td.type {
	text-align: center;
	font-size: 1em;
	font-weight: bold;
	}

	#commtable td.details {
	padding: 0 15px 0 15px;
	text-align: center;
	font-size: 0.9em;
	}

}