:root { 
	--grey: hsl(0,0%,90%);
	--black: #252729;
	--black-shadow:   rgba(37, 39, 41, 0.7);
	--black-shadow-m: rgba(37, 39, 41, 0.5);

	--ztotn-bg2: hsl(330,10%,95%);
	--ztotn-bg1: hsl(330,24%,90%);
	--ztotn-l2: hsl(330,24%,70%);
	--ztotn-l1: hsl(330,24%,60%);
	--ztotn-m:  hsl(330,24%,50%);
	--ztotn-d1: hsl(330,24%,40%);
	--ztotn-d2: hsl(330,24%,30%);

	--zfs-bg2: hsl(241,10%,95%);
	--zfs-bg1: hsl(241,24%,90%);
	--zfs-l2: hsl(241,24%,70%);
	--zfs-l1: hsl(241,24%,60%);
	--zfs-m:  hsl(241,24%,50%);
	--zfs-d1: hsl(241,24%,40%);
	--zfs-d2: hsl(241,24%,30%);

	--hardware-bg2: hsl(150,10%,95%);
	--hardware-bg1: hsl(150,24%,90%);
	--hardware-l2: hsl(150,24%,70%);
	--hardware-l1: hsl(150,24%,60%);
	--hardware-m:  hsl(150,24%,50%);
	--hardware-d1: hsl(150,24%,40%);
	--hardware-d2: hsl(150,24%,30%);

	--sharing-bg2: hsl(61,10%,95%);
	--sharing-bg1: hsl(61,24%,90%);
	--sharing-l2: hsl(61,24%,70%);
	--sharing-l1: hsl(61,24%,60%);
	--sharing-m:  hsl(61,24%,50%);
	--sharing-d1: hsl(61,24%,40%);
	--sharing-d2: hsl(61,24%,30%);

	--capacity-l2: 		hsl(240,5%,60%);
	--capacity-l1: 		hsl(240,5%,50%);
	--r2c2-l2: 			hsl(240,5%,55%);
	--r2c2-l1: 			hsl(240,5%,45%);
	--overhead-l2: 		hsl(240,5%,50%);
	--overhead-l1: 		hsl(240,5%,40%);
	--performance-l2: 	hsl(240,5%,45%);
	--performance-l1: 	hsl(240,5%,35%);
}

body {
	font-family: Arial, sans-serif;
	background-color: var(--grey);
	margin: 0;
	position: relative;
}

/*
	Top Menu
*/
div.title_main {
	font-family: "Trebuchet MS";
	text-align: center;
	background-color: var(--black);
	text-shadow: 2px 1px 1px rgba(251, 12, 12, 1), 0px -1px 2px rgba(12, 79, 251,.5), -2px 0px 1px rgba(52, 251, 12, 1);
	position:absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	height: 650px;
}
div.title_main#home {
	box-shadow: 0 10px 10px var(--black-shadow);
}
div.title_main h2 {
	color: var(--grey);
	font-size: 100px;
	font-weight: 900;
	margin-left: auto;
	margin-right: auto;
	margin-top: 150px;
	margin-bottom: auto;
	width: 750px;
	text-align: center;
}
h2#home {
	letter-spacing: -2px;
}
h2#ztotn {
	letter-spacing: -2px;
}
h2#zfs {
	letter-spacing: 7px;
}
h2#hardware {
	letter-spacing: 0px;
}
h2#sharing{

}
small {
	color: var(--grey);
	text-shadow: 1px 1px 1px rgba(251, 12, 12, 1), 0px -1px 1px rgba(12, 79, 251,.5), -1px 0px 1px rgba(52, 251, 12, 1);
	width: 750px;
	text-align: center;
}
small#home {
	font-size: 25px;
	letter-spacing: 2px;
}
small#ztotn {
	font-size: 55px;
	letter-spacing: 2px;
}
small#zfs {
	font-size: 35px;
	letter-spacing: -1px;
}
small#hardware {
	font-size: 35px;
	letter-spacing: 0px;
}
small#sharing{

}
div.title_prompt {
	text-align: left;
	padding-left: 100px;
	padding-top: 30px;
}
div.title_prompt h3 {
	font-family: Courier;
	color: var(--grey);
	text-shadow: 1px 1px 1px rgba(251, 12, 12, 1), 0px -1px 1px rgba(12, 79, 251,.5), -1px 0px 1px rgba(52, 251, 12, 1);
	font-size: 25px;
}
h3 a {
	color: var(--grey);
	text-decoration: none;
}

blink {
	animation: blink-animation 2s steps(2, start) infinite;
	-webkit-animation: blink-animation 2s steps(2, start) infinite;
}
@keyframes blink-animation {
	to {
		visibility: hidden;
	}
}
@-webkit-keyframes blink-animation {
	to {
		visibility: hidden;
	}
}

/* Accent Bar on sub-pages */
div.accent {
	position:absolute;
	left: 0px;
	right: 0px;
	top: 650px;
	height: 10px;
	background: #7e4e66;
	background: linear-gradient(90deg, rgba(78,78,126,1) 0%, rgba(160,160,197,1) 100%);
}
div.accent#ztotn {
	background: var(--ztotn-m);
	background: linear-gradient(90deg, var(--ztotn-d2) 0%, var(--ztotn-l2) 100%);
}
div.accent#zfs {
	background: var(--zfs-m);
	background: linear-gradient(90deg, var(--zfs-d2) 0%, var(--zfs-l2) 100%);
}
div.accent#hardware {
	background: var(--hardware-m);
	background: linear-gradient(90deg, var(--hardware-d2) 0%, var(--hardware-l2) 100%);
}
div.accent#sharing {
	background: var(--sharing-m);
	background: linear-gradient(90deg, var(--sharing-d2) 0%, var(--sharing-l2) 100%);
}

/* Home page link grid */
p.sect_descript {
	color: var(--grey);
}
div.section_links_grid {
	margin-top: 50px;
	margin-bottom: 50px;
	margin-left: 20px;
	margin-right: 20px;
	max-width: 960px;
	display: grid;
	grid-template-columns: auto auto;
	grid-auto-rows: 225px;
	gap: 30px;
}
div.section_link {
	position: relative;
	display: inline-block;
	max-width: 570px;
	height: 190px;
	padding: 20px;
	border-radius: 20px;
	text-align: center;
	box-shadow: 0px 5px 15px rgba(0,0,0,0.35);
	transition: all 0.15s ease-in-out;
	-webkit-transition: all 0.15s ease-in-out;
}
div.section_link::after {
	content: '';
	position: absolute;	
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	opacity: 0;
	box-shadow: 0 5px 15px rgba(0,0,0,0.5);
	transition: opacity 0.15s ease-in-out;
	-webkit-transition: opacity 0.15s ease-in-out;
}
div.section_link:hover {
	-webkit-transform: scale(1.08, 1.08);
	transform: scale(1.08, 1.08);
}
div.section_link:hover::after {
	opacity: 1;
}
hr.section_link {
	color: var(--grey);
	margin-left: 20px;
	margin-right: 20px;
	box-shadow: 1px 2px 1px rgba(0,0,0,0.1);
}
div.section_links_grid#alt {
	margin-top: 50px;
	margin-bottom: 50px;
	max-width: 1000px;
	display: grid;
	grid-template-columns: auto;
	grid-auto-rows: 110px;
	gap: 30px;
}
div.section_link_alt {
	position: relative;
	display: inline-block;
	max-width: 960px;
	margin-left: 20px;
	margin-right: 20px;
	height: 100px;
	padding: 10px;
	border-radius: 20px;
	text-align: center;
	box-shadow: 0px 5px 15px rgba(0,0,0,0.35);
	transition: all 0.15s ease-in-out;
	-webkit-transition: all 0.15s ease-in-out;
}
div.section_link_alt::after {
	content: '';
	position: absolute;	
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	opacity: 0;
	box-shadow: 0 5px 15px rgba(0,0,0,0.5);
	transition: opacity 0.15s ease-in-out;
	-webkit-transition: opacity 0.15s ease-in-out;
}
div.section_link_alt:hover {
	-webkit-transform: scale(1.08, 1.08);
	transform: scale(1.08, 1.08);
}
div.section_link_alt:hover::after {
	opacity: 1;
}
div.section_link_title {
	float: left;
	width: 250px;
	margin-right: -50px;
	margin-top: 10px;
	text-align: center;
	display: block;
}
hr.section_link#alt {
	-webkit-transform:rotate(90deg);
	width: 80px;
	margin-top: 50px;
	margin-left: 0px;
	margin-right: 0px;
	display: block;
}
div.section_link_content {
	padding-left: 260px;
	margin-top: -50px;
	display: block;
	
}
b.section_link_title {
	text-shadow: 1px 2px 1px rgba(0,0,0,0.3);
}
div.section_link#zero_to_tn {
	background: linear-gradient(135deg, var(--ztotn-m) 0%, var(--ztotn-l1) 100%);
}
div.section_link#openzfs {
	background: linear-gradient(225deg, var(--zfs-m) 0%, var(--zfs-l1) 100%);
}
div.section_link#hardware {
	background: linear-gradient(45deg, var(--hardware-m) 0%, var(--hardware-l1) 100%);
}
div.section_link#sharing {
	background: linear-gradient(315deg, var(--sharing-m) 0%, var(--sharing-l1) 100%);
}
div.section_link_alt#capacity {
	background: linear-gradient(135deg, var(--capacity-l1) 0%, var(--capacity-l2) 100%);
}
div.section_link_alt#r2c2 {
	background: linear-gradient(135deg, var(--r2c2-l1) 0%, var(--r2c2-l2) 100%);
}
div.section_link_alt#overhead {
	background: linear-gradient(135deg, var(--overhead-l1) 0%, var(--overhead-l2) 100%);
}
div.section_link_alt#performance {
	background: linear-gradient(135deg, var(--performance-l1) 0%, var(--performance-l2) 100%);
}
h2.mid_home {
	margin-top: 40px;
	text-align: center;
}

/*
	Main Body Text
*/
div#text_body {
	padding-top: 725px;
	margin: 0 auto 200px auto;
	max-width: 1000px;
}
p {
	font-size: 20px;
	color: var(--black);
	margin-left: 30px;
	margin-right: 30px;
}
p.tex {
	margin: 0;
}
p.quote {
	font-size: 18px;
	color: var(--black);
	padding-left: 40px;
	margin-left: 50px;
	margin-right: 30px;
	border-left: 5px solid hsl(241,24%,60%);
}
h1 {
	font-family: "Trebuchet MS";
	font-size: 40px;
	text-shadow: 1px 2px 1px rgba(0,0,0,0.3);
	max-width: 1000px;
	text-align: center;
	margin-top: 75px;
	margin-bottom: 5px;
}
h2 {
	font-size: 25px;
	margin-top: 40px;
	margin-left: 20px;
}
h3 {
	font-size: 22px;
	margin-left: 25px;
}
pre {
	font-size: 17px;
	margin-left: 50px;
}
ol {
	margin-left: 50px;
	margin-right: 50px;
}
ul {
	margin-left: 50px;
	margin-right: 50px;
}
li {
	font-size: 20px;
	color: var(--black);
	margin-bottom: 10px;
}
div.pdf {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
code {
	font-size: Courier;
	font-size: 19px;
	font-weight: bold;
}
hr {
	max-width: 950px;
}

/*
	Data Tables
*/
table.general {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
tr.general:nth-child(odd) {
	background-color: #d0d0e2;
}
tr.general:nth-child(1) {
	font-size: 20px;
}
td.general {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 20px;
	padding-right: 20px;
	min-width: 200px;
}

/*
	Images
*/
img {
	border-color: white;
	border-width: 50px;
	border-style: solid;
	border-radius: 10px;
}
div.img {
	margin: 40px auto;
	text-align: center;
	border-width: 20px;
	border-style: solid;
	border-radius: 20px;
	width: fit-content;
}
div.img#ztotn {
	background-color: var(--ztotn-l2);;
	border-color: var(--ztotn-l2);
}
div.img#zfs {
	background-color: var(--zfs-l2);
	border-color: var(--zfs-l2);
}
div.img#hardware {
	background-color: var(--hardware-l2);
	border-color: var(--hardware-l2);
}
div.img#sharing {
	background-color: var(--sharing-l2);
	border-color: var(--sharing-l2);
}

/* 
	Page Footer
*/
div#footer {
	position: relative;
	bottom: 0px;
	height: 120px;
	left: 0px;
	right: 0px;
	padding: 5px;
	background: var(--black);
	box-shadow: 0 -10px 10px var(--black-shadow-m);
}
div#footer h2 {
	text-shadow: 1px 1px 1px rgba(251, 12, 12, 1), 0px -1px 1px rgba(12, 79, 251,.5), -1px 0px 1px rgba(52, 251, 12, 1);
	color: var(--grey);
	text-align: center;
	font-family: Courier;
}
div#footer p {
	font-size: 12px;
	color: var(--grey);
	text-align: center;
}
div#footer a {
	color: var(--grey);
	text-decoration: none;
}

/*
	Side Menu
*/
div.menu_wrapper {
	position: absolute;
	left: 0px;
	height: calc(100% - 750px);
	padding-top: 750px;
}
div.menu_wrapper div {
	position: -webkit-sticky;
	position: sticky;
	float: left;
	top: 20px;
	left: 0px;
	width: 390px;
	border-radius: 0 20px 20px 0;
	border-width: 5px 5px 5px 0;
	border-style: solid;
	color: var(--black);
}
div.menu_wrapper div#ztotn {
	background: var(--ztotn-bg1);
	border-color: var(--ztotn-m);
}
div.menu_wrapper div#zfs {
	background: var(--zfs-bg1);
	border-color: var(--zfs-m);
}
div.menu_wrapper div#hardware {
	background: var(--hardware-bg1);
	border-color: var(--hardware-m);
}
div.menu_wrapper div#sharing {
	background: var(--sharing-bg1);
	border-color: var(--sharing-m);
}
div.menu_wrapper div.menu_full {
	width: 390px;
}
div.menu_wrapper div.menu_collapsed {
	width: 10px;
	cursor: pointer;
	transition: all 0.15s ease-in-out;
	-webkit-transition: all 0.15s ease-in-out;
}
div.menu_wrapper div.menu_collapsed::after {
	content: '';
	position: absolute;	
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	opacity: 0;
	box-shadow: 0 5px 15px rgba(0,0,0,0.5);
	transition: opacity 0.15s ease-in-out;
	-webkit-transition: opacity 0.15s ease-in-out;
}
div.menu_wrapper div.menu_collapsed:hover {
	-webkit-transform: scale(1.2, 1.2);
	transform: scale(1.2, 1.2);
}
div.menu_wrapper div.menu_collapsed:hover::after {
	opacity: 1;
}
div.menu_full p {
	font-family: Trebuchet MS;
	font-weight: bold;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 20px;
	margin-left: 0px;
	padding-left: 0px;
	cursor: pointer;
}
div.menu_full hr {
	max-width: 310px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 15px;
}
div.menu_full p a {
	color: var(--black);
	text-decoration: none;
}
div.menu_full p#collapse {
	font-family: Trebuchet MS;
	position: absolute;
	right: 0;
	top: 0;
	font-weight: bold;
	text-align: center;
	color: var(--black);
	margin-left: 0px;
	padding-left: 0px;
	font-size: 20px;
	cursor: pointer;
}
div.menu_collapsed p {
	font-family: courier;
	font-weight: bold;
	text-align: center;
	margin-top: 50px;
	margin-bottom: 50px;
	margin-left: 0px;
	padding-left: 0px;
	font-size: 13px;
}
li.menu {
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 16px;
	margin-left: 0px;
	padding-left: 0px;
}
li.menu a {
	color: var(--black);
	text-decoration: none;
}
ul.menu {
	margin-left: 0px;
	margin-right: 0px;
}

/*
	dRAID
*/

div.draid-grid-container {
	display: grid;
	margin-left: 30px;
	margin-top: 30px;
	grid-column-gap: 1px;
	grid-row-gap: 1px;
}

div.draid-slice-container {
	display: grid;
	grid-template-columns: "1fr";
	float: right;
	grid-column-gap: 1px;
	grid-row-gap: 1px;
}

div.draid-sub {
	float: left;
	width: 30px;
	height: 20px;
	border: 1px solid black;
	text-align: center;
	padding: 10px 0;
	position: relative;
	font-family: courier;
	font-weight: bold;
}

div#draid-empty {
	border: 0px solid white;
	margin-left: 10px;
	height: 40px;
}

div#draid-head {
	background-color: hsl(241,24%,80%);
	font-weight: bold;
	border-radius: 10px;
	margin-bottom: 10px
}

div.draid-slice {
	float: left;
	width: 30px;
	text-align: center;
	padding: 10px 0;
	position: relative;
	font-family: courier;
	border-right: 3px solid black;
	border-top: 3px solid black;
	border-bottom: 3px solid black;
	font-weight: bold;
	margin-left: 10px;
	background-color: hsl(0, 0%, 60%);
	color: white;
}

div#draid-slice1{
	margin-top: 84px;
}

button.draid-button {
	margin: 30px 10px;
	width: 190px;
	height: 40px;
	font-size: 20px;
}
button#draid-update {
	margin-left: 70px;
}

input.draid-settings {
	height: 40px;
	font-family: courier;
	font-size: 30px;
	text-align: center;
	border-radius: 5px;
	border: 0px solid white;
	background-color: hsl(0, 0%, 95%);
	margin: auto;
	float: left;
	position: relative;
}

input#draid-parity {
	width: 35px;
}
input#draid-spares {
	width: 35px;
}
input#draid-children {
	width: 75px;
}
input#draid-data {
	width: 75px;
}

div.draid-label {
	font-family: courier;
	font-size: 30px;
	float: left;
	margin-top: 2px;
	font-weight: bold;
	position: relative;
	padding-left: 2px;
	padding-right: 2px;
}

div#draid-rows-label {
	font-family: courier;
	font-size: 30px;
	float: left;
	font-weight: bold;
	position: relative;
	padding-left: 240px;
	padding-right: 2px;
	padding-top: 2px;
	margin-top: -40px;
}
input#draid-rows {
	width: 100px;
	margin-top: -40px;
	margin-left: 480px;
}

div.draid-label-grid {
	height: 40px;
	margin: 20px 50px;
}

div#draid-notes {
	margin: auto;
	font-size: 20px;
	width: 450px;
	height: 30px;
	text-align: center;
}

div#draid-sub-notes {
	margin-left: 30px;
	margin-right: 30px;
	font-size: 20px;
	width: 1000px;
}

div#draid-ex-disk {
	background-color: hsl(241,24%,80%);
	font-weight: bold;
	border-radius: 10px;
}
div#draid-ex-parity {
	background-color: hsl(0, 65%, 60%);
	color: hsl(180, 100%, 60%);
}
div#draid-ex-data {
	background-color: hsl(0, 50%, 60%);
	color: hsl(180, 100%, 60%);
}
div#draid-ex-spare {
	background-color: hsl(0, 0%, 95%);
	color: "black";
}
div.draid-ex-slice {
	float: left;
	width: 30px;
	text-align: center;
	padding: 10px 0;
	position: relative;
	font-family: courier;
	font-weight: bold;
	background-color: hsl(0, 0%, 60%);
	color: white;
	height: 20px;
	border-right: 3px solid black;
	border-top: 3px solid black;
	border-bottom: 3px solid black;
}

div.draid-legend-container {
	width: 300px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 20px;
	margin-top: -90px;
	grid-row-gap: 5px;
	float: left;
}
div.draid-leg-label {
	width: 250px;
	margin: 0 auto;
	float: left;
	padding-top: 11px;
	font-family: courier;
	font-weight: bold;
}

div#draid-imbalance-ratio {
	margin-top: 20px;
	margin-left: 50px;
	font-size: 20px;
	width: 800px;
	font-family: courier;
	font-weight: bold;
}

div#draid-box-size {
	margin-top: 20px;
	margin-left: 50px;
	font-size: 20px;
	width: 800px;
	font-family: courier;
	font-weight: bold;
}

table.draid-big-grid {
	margin-bottom: 30px;
	margin-top: 30px;
	margin-left: 140px;
}