/**
 * Main wrapper CSS
 */

/* primary blocks */
header, main, footer {
	display: block;
}

/* enable legacy tags */
b { font-weight: bold; }
i:not(.fa) { font-weight: italic; }
u { text-decoration: underline; }

/* general links */
a {
	color: rgb(0,100,200);
	text-decoration: none;
}
	a:hover {
		color: rgb(0,50,150);
		text-decoration: none;
	}

/* header as sidebar */
header {
	position: fixed;
	z-index: 100;

	top: 0px;
	left: 0px;
	width: 175px;
	height: 100vh;
	background-color: rgb(68,68,68);
}

	/* header logo container */
	header > h1 {
		position: relative;
		width: 100%;
		height: 180px;
		margin: 15px 0px 15px 0px;
		text-align: center;

		font-family: 'Rubik Light';
		font-size: 10px;
		color: rgba(255,255,255,.65);
		line-height: 1.5;
		text-shadow: 1px 1px 0px rgba(0,0,0,.5);

		cursor: pointer;
	}
		header > h1:hover {
			opacity: .9;
		}

		/* logo image */
		header > h1 > img {
			position: relative;
			margin-bottom: 15px;
			width: 75%;
			height: auto;

			transition: all 0.1s ease 0s;
		}

			/* logo image during loading animation */
			header > h1 > img.activitySpin {
				animation: rotation 2.5s infinite linear;
				opacity: 0.25;
			}

	/* header nav container */
	header > nav {
		/* hide by default */
		display: none;
	}
		/* header nav container */
		header > nav.show {
			display: block;
			overflow-y: auto;
			height: calc( 100vh - 210px );
			/* hide scrollbar */
			-ms-overflow-style: none;
  			scrollbar-width: none;
		}

		/* hide scrollbar */
		header > nav.show::-webkit-scrollbar {
			display: none;
		}


		/* nav heading */
		header > nav > h2 {
			display: block;
			padding: 4px 10px 2px 10px;
			text-align: left;
			margin-bottom: 2px;

			font-family: 'Rubik Light';
			font-weight: bold;
			font-size: 12px;
			color: white;
			line-height: 1.5;
			text-transform: uppercase;

			text-shadow: 1px 1px 0px rgba(0,0,0,1);
			background-color: rgba(0,0,0,.5);
		}
			header > nav > h2:not(:first-of-type) {
				margin-top: 10px;
			}

		/* main nav buttons */
		header > nav > button {
			display: block;
			position: relative;
			padding: 4px 5px 4px 10px;
			width: 100%;

			text-align: left;
			border: 0px;
			background: transparent;
		}
			/* vertically spaced button */
			header > nav > button.separate {
				margin-top: 12px;
			}

			/* button when selected */
			header > nav > button.selected {
				background: rgb(235,235,235);
			}
				/* button when selected */
				header > nav > button.selected > label {
					color: rgb(0,0,50);
					text-shadow: 1px 1px 0px rgba(0,0,0,.1);
				}
				/* button when selected */
				header > nav > button.selected > .fa {
					color: rgba(0,0,50,.75);
					text-shadow: 1px 1px 0px rgba(0,0,0,.1);
				}

			/* main nav button label text */
			header > nav > button > label {
				display: inline-block;
				width: 130px;
				vertical-align: top;

				font-family: 'Nimbus Sans';
				font-size: 15px;
				color: rgba(255,255,255,.85);
				text-shadow: 1px 1px 0px black;
				cursor: pointer;
			}

			/* font-awesome icon in button */
			header > nav > button > .fa {
				display: inline-block;
				vertical-align: bottom;
				width: 20px;
				text-align: center;

				font-size: 14px;
				color: rgba(255,255,255,.5);
				text-shadow: 1px 1px 0px black;
			}

			/* hover main nav button */
			header > nav > button:hover {
				cursor: pointer;
				background-color: rgba(255,255,255,.2);
			}
				/* label and icon while hovering on button */
				header > nav > button:hover > label,
				header > nav > button:hover > .fa {
					color: white;
				}

			/* svg icon in button (assume icon is black filled) */
			header > nav > button > img[src$=".svg"] {
				float: left;
				width: 14px;
				height: 14px;
				margin: 1px 7px -1px 3px;

				filter: invert(100%);
				opacity: .5;
			}
				/* hovered button svg icon */
				header > nav > button:hover > img[src$=".svg"] {
					opacity: 1;
					filter: invert(100%) !important;
				}
				/* selected button svg icon */
				header > nav > button.selected > img[src$=".svg"] {
					filter: none;
					opacity: .9;
				}

/* main view container */
main {
	position: fixed;
	top: 0px;
	left: 175px;
	width: calc( 100vw - 175px );
	height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
}

	/* content container */
	main > .container {
		position: relative;
		width: 100%;
		margin-top: 35px;
		height: auto;
		text-align: center;
	}

	/* left-align containers that are forms */
	main > form.container {
		text-align: left;
		margin-top: 50px;
	}

	/* form in sidebarUI */
	#sidebarUI > form.container {
		margin-top: 50px;
	}