/* 1600x900 */

:root {
	--borderStyle: 4px #2A2A2A solid;
}

*::selection  {
	background-color: #940000;
	color: #EEE;
}
h1::selection, h2::selection { color: black; }

* body {
	margin: 0;
	background-color: #EEE;
}

img {
	-webkit-user-drag: none;
	-webkit-user-select: none;
}

.center { text-align: center; }

img.imgCenter {
	display: block;
	margin: 0 auto;
	text-align: center;
}

/* Makes the logo special! */
div.top > .imgCenter { margin-left: 100px; }

div.top {
	background-color: #3E3E3E;
	position: fixed;
	overflow: hidden;
	padding: 6px;
	width: 100%;
	border-top: var(--borderStyle);
	border-bottom: var(--borderStyle);
	box-shadow: 0 1px 8px;
	z-index: 2;
}

img.top_sprite {
	float: right;
	margin-left: 5in;
	display: block;
	position: absolute;
	top: 47px;
	z-index: 15;
}

/* The navigation needs to be STYLISH */
div.nav {
	background-color: #333;
	border-right: var(--borderStyle);
	float: left;
	position: fixed;
	height: 100%;
	padding-top: 1.18in;
	width: 2.4in;
}

div.nav a {
	/* The guidelines for being an anchor! */
	color: white;
	display: block;
	font-family: Helvetica;
	border-left: 2px gray solid;
	padding: 10px 0 10px 25px;
	margin-bottom: 1px;
	font-size: 16pt;
	text-decoration: none;
	transition: border-left-width, background-color, .4s;
}

div.nav a:hover {
	/*
	   Makes the border stick out 
	   when you hover over the link 
	*/
	border-left-width: 4px;
	background-color: #292929;
}

div.nav .current {
	background-color: #1A1A1A;
	border-left: 4px #070707 solid;
	padding: 10px 0 10px 25px;
	transition: none;
	cursor: default;
}

/* Keeps the link with ".current" the same when you hover over it */
div.nav .current:hover { background-color: #1A1A1A; }
/* Makes aTop's top border visible (for that boxy look) */
div.nav .current.aTop { border-top: 4px #222 solid; }
/* When aTop isn't dictated by .current, you'll hafta hover in order to see the border */
div.nav .aTop {
	/* Making it invisible so that the transition doesn't move anything around it */
	border-top: 4px transparent solid; 
	transition: border-top-color, .4s;
}

div.nav .aTop:hover { border-top-color: #222; }

/* .aBtm is the last link in the navigation bar */
/* This makes bottom border stay the same! */

.current.aBtm, .aBtm:hover { border-bottom: 4px #222 solid; }
.aBtm {
	border-bottom: 4px transparent solid;
	transition: border-bottom-color, .4s;
}

div.document {
	margin-left: 3in;
	padding-top: 1.2in;
	font-family: "Trebuchet MS";
}

div.document h1 { font-size: 38pt; }
div.document h2 { font-size: 26pt; }

div.document h1, h2, h3 {
	cursor: default;
	color: black;
	transition: color, text-decoration, .5s;
}

div.document h1:hover, h2:hover, h3:hover { color: #3D3D3D; }
div.spacer { padding: .4in; }
#palette td { padding: 8px; }

/* The credits link is represented by the triple colon */
.credits {
	/* Make it so that it hovers around the bottom */
	border-left: 2px #e14169 solid !important; /* These properties are WAY too stubborn... */
	padding: 4px 6px 3px 8px !important;
	border-radius: 0 4px 4px 0;
	margin-right: 89%;
	position: relative;
	top: 15px;
	background-color: royalblue;
	transition: background-color .4s, border-left .4s, margin-right .4s, margin-top 0s !important;
}

.credits.current, .credits.current:hover {
	background-color: #6DCC2E !important;
	border-left: 4px #3e8427 solid !important;
}

.credits:hover { background-color: #273e84 !important; }

.credits.current, .credits.current:hover, .credits:hover {
	border-left: 4px #3e8427 solid !important;
	margin-right: 88%;
}

img.show {
	position: -webkit-sticky;
	position: sticky;
	top: 4px;
	z-index: 10;
}