initHEADtrunk

4 files changed, 1226 insertions, 0 deletions

diff --git a/css/cursor.css b/css/cursor.css
new file mode 100644
index 0000000..7eabd15
--- /dev/null
+++ b/css/cursor.css
@@ -0,0 +1,3 @@
+* { cursor: url(/images/cursor/arrow.cur), auto; }
+a:hover { cursor: url(/images/cursor/up.cur), auto; }
+a img:hover { cursor: url(/images/cursor/up.cur), auto; }
diff --git a/css/default.css b/css/default.css
new file mode 100644
index 0000000..7c9882c
--- /dev/null
+++ b/css/default.css
@@ -0,0 +1,2 @@
+:root { --accent: deeppink; --accent-hover: skyblue; }
+@media (prefers-color-scheme: dark) { :root { --accent: pink; --accent-hover: deeppink } }
diff --git a/css/kate.css b/css/kate.css
new file mode 100644
index 0000000..5e7225c
--- /dev/null
+++ b/css/kate.css
@@ -0,0 +1,66 @@
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
+.sourceCode { overflow: visible; }
+code.sourceCode > span { color: inherit; text-decoration: inherit; }
+div.sourceCode { margin: 1em 0; }
+pre.sourceCode { margin: 0; }
+@media screen {
+div.sourceCode { overflow: auto; }
+}
+@media print {
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+}
+pre.numberSource code
+  { counter-reset: source-line 0; }
+pre.numberSource code > span
+  { position: relative; left: -4em; counter-increment: source-line; }
+pre.numberSource code > span > a:first-child::before
+  { content: counter(source-line);
+    position: relative; left: -1em; text-align: right; vertical-align: baseline;
+    border: none; display: inline-block;
+    -webkit-touch-callout: none; -webkit-user-select: none;
+    -khtml-user-select: none; -moz-user-select: none;
+    -ms-user-select: none; user-select: none;
+    padding: 0 4px; width: 4em;
+    background-color: #ffffff;
+    color: #a0a0a0;
+  }
+pre.numberSource { margin-left: 3em; border-left: 1px solid #a0a0a0;  padding-left: 4px; }
+div.sourceCode
+  { color: #1f1c1b; background-color: #ffffff; }
+@media screen {
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+}
+code span { color: #1f1c1b; } /* Normal */
+code span.al { color: #bf0303; background-color: #f7e6e6; font-weight: bold; } /* Alert */
+code span.an { color: #ca60ca; } /* Annotation */
+code span.at { color: #0057ae; } /* Attribute */
+code span.bn { color: #b08000; } /* BaseN */
+code span.bu { color: #644a9b; font-weight: bold; } /* BuiltIn */
+code span.cf { color: #1f1c1b; font-weight: bold; } /* ControlFlow */
+code span.ch { color: #924c9d; } /* Char */
+code span.cn { color: #aa5500; } /* Constant */
+code span.co { color: #898887; } /* Comment */
+code span.cv { color: #0095ff; } /* CommentVar */
+code span.do { color: #607880; } /* Documentation */
+code span.dt { color: #0057ae; } /* DataType */
+code span.dv { color: #b08000; } /* DecVal */
+code span.er { color: #bf0303; text-decoration: underline; } /* Error */
+code span.ex { color: #0095ff; font-weight: bold; } /* Extension */
+code span.fl { color: #b08000; } /* Float */
+code span.fu { color: #644a9b; } /* Function */
+code span.im { color: #ff5500; } /* Import */
+code span.in { color: #b08000; } /* Information */
+code span.kw { color: #1f1c1b; font-weight: bold; } /* Keyword */
+code span.op { color: #1f1c1b; } /* Operator */
+code span.ot { color: #006e28; } /* Other */
+code span.pp { color: #006e28; } /* Preprocessor */
+code span.re { color: #0057ae; background-color: #e0e9f8; } /* RegionMarker */
+code span.sc { color: #3daee9; } /* SpecialChar */
+code span.ss { color: #ff5500; } /* SpecialString */
+code span.st { color: #bf0303; } /* String */
+code span.va { color: #0057ae; } /* Variable */
+code span.vs { color: #bf0303; } /* VerbatimString */
+code span.wa { color: #bf0303; } /* Warning */
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..acbba75
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,1155 @@
+/* PrefaceCSS <https://github.com/cluzier/PrefaceCSS> , Copyright 2019, Conner Luzier */
+/* Imports */
+@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");
+/* Define some variables we will need (colors) */
+/* Do the imports for other scss */
+* {
+  font-family: "Roboto Mono", monospace;
+  font-weight: 400;
+  color: #212121;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  word-wrap: break-word; }
+
+nav {
+  margin: 20px auto;
+  max-width: 960px;
+  width: 95%; }
+  nav label {
+    font-weight: bold; }
+  nav ul {
+    list-style: none;
+    float: right; }
+    nav ul li {
+      margin: 0 15px; }
+  nav * {
+    display: inline-block; }
+  @media screen and (max-width: 640px) {
+    nav {
+      text-align: center; }
+      nav > * {
+        display: block; }
+      nav ul {
+        float: none;
+        margin-top: 15px; } }
+
+.container {
+  max-width: 960px;
+  width: 95%;
+  margin: 0 auto; }
+
+.grid-flex {
+  display: flex; }
+
+.grid-flex-wrap {
+  display: flex;
+  flex-wrap: wrap; }
+
+.row:after {
+  content: '';
+  display: table;
+  clear: both; }
+
+.flex-1 {
+  flex: 1; }
+
+.flex-2 {
+  flex: 2; }
+
+.flex-3 {
+  flex: 3; }
+
+.flex-4 {
+  flex: 4; }
+
+.flex-5 {
+  flex: 5; }
+
+.flex-6 {
+  flex: 6; }
+
+.flex-7 {
+  flex: 7; }
+
+.flex-8 {
+  flex: 8; }
+
+.flex-9 {
+  flex: 9; }
+
+.flex-10 {
+  flex: 10; }
+
+/* Old grid system */
+.one.column, .one.columns {
+  width: 7.33333%;
+  display: inline-block;
+  margin: 0 .5%;
+  float: left; }
+
+.two.columns {
+  width: 15.66667%;
+  display: inline-block;
+  margin: 0 .5%;
+  float: left; }
+
+.three.columns {
+  width: 24%;
+  display: inline-block;
+  margin: 0 .5%;
+  float: left; }
+
+.four.columns {
+  width: 32.33333%;
+  display: inline-block;
+  margin: 0 .5%;
+  float: left; }
+
+.five.columns {
+  width: 40.66667%;
+  display: inline-block;
+  margin: 0 .5%;
+  float: left; }
+
+.six.columns {
+  width: 49%;
+  display: inline-block;
+  margin: 0 .5%;
+  float: left; }
+
+.seven.columns {
+  width: 57.33333%;
+  display: inline-block;
+  margin: 0 .5%;
+  float: left; }
+
+.eight.columns {
+  width: 65.66667%;
+  display: inline-block;
+  margin: 0 .5%;
+  float: left; }
+
+.nine.columns {
+  width: 74%;
+  display: inline-block;
+  margin: 0 .5%;
+  float: left; }
+
+.ten.columns {
+  width: 82.33333%;
+  display: inline-block;
+  margin: 0 .5%;
+  float: left; }
+
+.eleven.columns {
+  width: 90.66667%;
+  display: inline-block;
+  margin: 0 .5%;
+  float: left; }
+
+.twelve.columns {
+  width: 99%;
+  display: inline-block;
+  margin: 0 .5%;
+  float: left; }
+
+@media screen and (max-width: 750px) {
+  .columns.desktop, .column.desktop {
+    display: block !important;
+    width: 99% !important; } }
+
+@media screen and (min-width: 750px) {
+  .columns.mobile, .column.mobile {
+    display: block !important;
+    width: 99% !important; } }
+
+button {
+  display: inline-block;
+  padding: 8px 30px;
+  margin: 5px 0;
+  text-align: center;
+  text-transform: uppercase;
+  border: none;
+  outline: none;
+  border-radius: 2px;
+  color: #413a3a;
+  cursor: pointer;
+  background-color: #212121;
+  transition: 0.2s ease-in-out; }
+  button:hover, button:disabled {
+    background-color: #878787; }
+  button:active {
+    background-color: black; }
+  button.success {
+    background-color: #66cdaa;
+    transition: 0.2s ease-in-out; }
+    button.success:hover, button.success:disabled {
+      background-color: #a0e0ca; }
+    button.success:active {
+      background-color: #39ae86; }
+  button.error {
+    background-color: #f08080;
+    transition: 0.2s ease-in-out; }
+    button.error:hover, button.error:disabled {
+      background-color: #f8c4c4; }
+    button.error:active {
+      background-color: #e83c3c; }
+  button.warning {
+    background-color: #fef65b;
+    transition: 0.2s ease-in-out; }
+    button.warning:hover, button.warning:disabled {
+      background-color: #fefaa7; }
+    button.warning:active {
+      background-color: #fef20f; }
+  button.btn-shadow {
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
+    button.btn-shadow:hover {
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
+    button.btn-shadow:active {
+      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); }
+
+input, textarea, select {
+  display: block;
+  width: 100%;
+  padding: 5px;
+  margin: 5px 0;
+  border: 1px solid #c0c0c0;
+  outline: none;
+  border-radius: 2px;
+  background-color: #ffffff; }
+  input:hover, textarea:hover, select:hover {
+    border-color: #6e6e6e; }
+  input:focus, textarea:focus, select:focus {
+    border-color: #212121; }
+
+textarea {
+  resize: vertical;
+  min-height: 60px; }
+
+b, strong {
+  font-weight: 700; }
+
+a {
+  text-decoration: underline;
+  cursor: pointer; }
+  a:hover {
+    color: #6e6e6e; }
+  a.none {
+    text-decoration: none; }
+
+h1 {
+  font-size: 3rem; }
+
+h2 {
+  font-size: 2.6rem; }
+
+h3 {
+  font-size: 2.2rem; }
+
+h4 {
+  font-size: 1.8rem; }
+
+h5 {
+  font-size: 1.6rem; }
+
+h6 {
+  font-size: 1.4rem; }
+
+h1, h2, h3, h4, h5, h6 {
+  margin-bottom: 10px;
+  font-weight: bold; }
+
+small {
+  font-size: .8rem; }
+
+p {
+  margin: 15px 0; }
+
+.text-left {
+  text-align: left; }
+
+.text-center {
+  text-align: center; }
+
+.text-right {
+  text-align: right; }
+
+.text-muted, .text-muted * {
+  color: #616161; }
+
+.text-success, .text-success * {
+  color: #66cdaa; }
+
+.text-error, .text-error * {
+  color: #f08080; }
+
+.text-warning, .text-warning * {
+  color: #fef65b; }
+
+.text-inverted, .text-inverted * {
+  color: #413a3a; }
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+  margin-top: .5em; }
+  @media screen and (max-width: 750px) {
+    table {
+      overflow-x: auto;
+      display: block; } }
+  table td, table th {
+    padding: 12px 15px;
+    text-align: left;
+    border-bottom: 1px solid #c0c0c0; }
+
+ul ul {
+  margin-left: 15px; }
+
+ul.inner, ul .inner {
+  list-style-position: inside; }
+
+ul.outer, ul .outer {
+  list-style-position: outside; }
+
+/**
+ * Thanks to Chris Bracco for this tooltip from https://codepen.io/cbracco/pen/qzukg
+ */
+/* Add this attribute to the element that needs a tooltip */
+[data-tooltip] {
+  position: relative;
+  z-index: 2;
+  cursor: pointer; }
+
+/* Hide the tooltip content by default */
+[data-tooltip]:before,
+[data-tooltip]:after {
+  visibility: hidden;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  opacity: 0;
+  pointer-events: none; }
+
+/* Position tooltip above the element */
+[data-tooltip]:before {
+  position: absolute;
+  bottom: 150%;
+  left: 50%;
+  margin-bottom: 5px;
+  margin-left: -80px;
+  padding: 7px;
+  width: 160px;
+  border-radius: 3px;
+  background-color: #000;
+  background-color: rgba(51, 51, 51, 0.9);
+  color: #fff;
+  content: attr(data-tooltip);
+  text-align: center;
+  font-size: 14px;
+  line-height: 1.2; }
+
+/* Triangle hack to make tooltip look like a speech bubble */
+[data-tooltip]:after {
+  position: absolute;
+  bottom: 150%;
+  left: 50%;
+  margin-left: -5px;
+  width: 0;
+  border-top: 5px solid #000;
+  border-top: 5px solid rgba(51, 51, 51, 0.9);
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+  content: " ";
+  font-size: 0;
+  line-height: 0; }
+
+/* Show tooltip content on hover */
+[data-tooltip]:hover:before,
+[data-tooltip]:hover:after {
+  visibility: visible;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+  opacity: 1; }
+
+.card {
+  margin: 15px;
+  border-radius: 1px;
+  border: 0.5px solid #c0c0c0; }
+  .card img {
+    width: 100%;
+    display: block;
+    border-radius: 1px 1px 0 0; }
+  .card .content {
+    padding: 10px; }
+  .card .footer {
+    border-top: 1px solid #c0c0c0;
+    padding: 5px 15px;
+    text-align: right; }
+  .card.card-shadow {
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+    border: none; }
+
+hr {
+  border: none;
+  outline: none;
+  height: 1px;
+  width: 60%;
+  background-color: #c0c0c0; }
+
+.bg-success {
+  background-color: #66cdaa; }
+
+.bg-warning {
+  background-color: #fef65b; }
+
+.bg-error {
+  background-color: #f08080; }
+
+.bg-success-bright {
+  background-color: #66cdaa; }
+
+.bg-warning-bright {
+  background-color: #fef65b; }
+
+.bg-error-bright {
+  background-color: #f08080; }
+
+code {
+  background-color: #c0c0c0;
+  display: inline-block;
+  padding: 4px 8px;
+  font-family: monospace;
+  overflow-x: auto; }
+
+pre > code {
+  display: block;
+  white-space: pre; }
+
+.cover {
+  min-height: 60vh;
+  display: flex;
+  align-items: center;
+  justify-content: center; }
+  .cover > div {
+    flex: 1; }
+
+.progress {
+  display: block;
+  width: 100%;
+  height: 3px;
+  margin: 5px;
+  background-color: #c0c0c0; }
+  .progress .bar {
+    transition: width .5s ease-in-out;
+    display: block;
+    height: 100%;
+    width: 100%;
+    max-width: 100%; }
+
+img {
+  display: block;
+  width: 100%; }
+
+.pagination {
+  display: flex;
+  width: 100%;
+  text-align: center;
+  padding: 15px; }
+  .pagination * {
+    text-decoration: none; }
+  .pagination > * {
+    flex: 1;
+    padding: 3px; }
+    .pagination > *:hover {
+      background-color: #cdcdcd;
+      transition: .3s background-color ease-in-out; }
+      .pagination > *:hover, .pagination > *:hover * {
+        color: #212121; }
+  .pagination .action {
+    flex: .5; }
+  .pagination.no-flex {
+    display: block; }
+    .pagination.no-flex > * {
+      display: inline-block;
+      margin: 0 10px; }
+
+.lds-facebook {
+  display: inline-block;
+  position: relative;
+  margin: 25px;
+  width: 64px;
+  height: 64px; }
+
+.lds-facebook div {
+  display: inline-block;
+  position: absolute;
+  left: 6px;
+  width: 13px;
+  background: #413a3a;
+  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite; }
+
+.lds-facebook div:nth-child(1) {
+  left: 6px;
+  animation-delay: -0.24s; }
+
+.lds-facebook div:nth-child(2) {
+  left: 26px;
+  animation-delay: -0.12s; }
+
+.lds-facebook div:nth-child(3) {
+  left: 45px;
+  animation-delay: 0; }
+
+@keyframes lds-facebook {
+  0% {
+    top: 6px;
+    height: 51px; }
+  50%, 100% {
+    top: 19px;
+    height: 26px; } }
+
+.lds-roller {
+  display: inline-block;
+  position: relative;
+  margin: 25px;
+  width: 64px;
+  height: 64px; }
+
+.lds-roller div {
+  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  transform-origin: 32px 32px; }
+
+.lds-roller div:after {
+  content: " ";
+  display: block;
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #413a3a;
+  margin: -3px 0 0 -3px; }
+
+.lds-roller div:nth-child(1) {
+  animation-delay: -0.036s; }
+
+.lds-roller div:nth-child(1):after {
+  top: 50px;
+  left: 50px; }
+
+.lds-roller div:nth-child(2) {
+  animation-delay: -0.072s; }
+
+.lds-roller div:nth-child(2):after {
+  top: 54px;
+  left: 45px; }
+
+.lds-roller div:nth-child(3) {
+  animation-delay: -0.108s; }
+
+.lds-roller div:nth-child(3):after {
+  top: 57px;
+  left: 39px; }
+
+.lds-roller div:nth-child(4) {
+  animation-delay: -0.144s; }
+
+.lds-roller div:nth-child(4):after {
+  top: 58px;
+  left: 32px; }
+
+.lds-roller div:nth-child(5) {
+  animation-delay: -0.18s; }
+
+.lds-roller div:nth-child(5):after {
+  top: 57px;
+  left: 25px; }
+
+.lds-roller div:nth-child(6) {
+  animation-delay: -0.216s; }
+
+.lds-roller div:nth-child(6):after {
+  top: 54px;
+  left: 19px; }
+
+.lds-roller div:nth-child(7) {
+  animation-delay: -0.252s; }
+
+.lds-roller div:nth-child(7):after {
+  top: 50px;
+  left: 14px; }
+
+.lds-roller div:nth-child(8) {
+  animation-delay: -0.288s; }
+
+.lds-roller div:nth-child(8):after {
+  top: 45px;
+  left: 10px; }
+
+@keyframes lds-roller {
+  0% {
+    transform: rotate(0deg); }
+  100% {
+    transform: rotate(360deg); } }
+
+.lds-ripple {
+  display: inline-block;
+  position: relative;
+  margin: 25px;
+  width: 64px;
+  height: 64px; }
+
+.lds-ripple div {
+  position: absolute;
+  border: 4px solid #413a3a;
+  opacity: 1;
+  border-radius: 50%;
+  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; }
+
+.lds-ripple div:nth-child(2) {
+  animation-delay: -0.5s; }
+
+@keyframes lds-ripple {
+  0% {
+    top: 28px;
+    left: 28px;
+    width: 0;
+    height: 0;
+    opacity: 1; }
+  100% {
+    top: -1px;
+    left: -1px;
+    width: 58px;
+    height: 58px;
+    opacity: 0; } }
+
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+  margin: 25px;
+  width: 64px;
+  height: 64px; }
+
+.lds-ellipsis div {
+  position: absolute;
+  top: 27px;
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background: #413a3a;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0); }
+
+.lds-ellipsis div:nth-child(1) {
+  left: 6px;
+  animation: lds-ellipsis1 0.6s infinite; }
+
+.lds-ellipsis div:nth-child(2) {
+  left: 6px;
+  animation: lds-ellipsis2 0.6s infinite; }
+
+.lds-ellipsis div:nth-child(3) {
+  left: 26px;
+  animation: lds-ellipsis2 0.6s infinite; }
+
+.lds-ellipsis div:nth-child(4) {
+  left: 45px;
+  animation: lds-ellipsis3 0.6s infinite; }
+
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0); }
+  100% {
+    transform: scale(1); } }
+
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1); }
+  100% {
+    transform: scale(0); } }
+
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0); }
+  100% {
+    transform: translate(19px, 0); } }
+
+.lds-circle {
+  display: inline-block;
+  margin: 25px;
+  transform: translateZ(1px); }
+
+.lds-circle > div {
+  display: inline-block;
+  width: 51px;
+  height: 51px;
+  margin: 6px;
+  border-radius: 50%;
+  background: #413a3a;
+  animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite; }
+
+@keyframes lds-circle {
+  0%, 100% {
+    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); }
+  0% {
+    transform: rotateY(0deg); }
+  50% {
+    transform: rotateY(1800deg);
+    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); }
+  100% {
+    transform: rotateY(3600deg); } }
+
+.lds-hourglass {
+  display: inline-block;
+  position: relative;
+  margin: 25px;
+  width: 64px;
+  height: 64px; }
+
+.lds-hourglass:after {
+  content: " ";
+  display: block;
+  border-radius: 50%;
+  width: 0;
+  height: 0;
+  margin: 6px;
+  box-sizing: border-box;
+  border: 26px solid #413a3a;
+  border-color: #413a3a transparent #413a3a transparent;
+  animation: lds-hourglass 1.2s infinite; }
+
+@keyframes lds-hourglass {
+  0% {
+    transform: rotate(0);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
+  50% {
+    transform: rotate(900deg);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
+  100% {
+    transform: rotate(1800deg); } }
+
+.spinner {
+  position: relative;
+  display: inline-block;
+  margin: 25px;
+  width: 64px;
+  height: 64px; }
+
+.cube1, .cube2 {
+  background-color: #413a3a;
+  width: 15px;
+  height: 15px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  animation: sk-cubemove 1.8s infinite ease-in-out; }
+
+.cube2 {
+  animation-delay: -0.9s; }
+
+@keyframes sk-cubemove {
+  25% {
+    transform: translateX(42px) rotate(-90deg) scale(0.5);
+    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); }
+  50% {
+    transform: translateX(42px) translateY(42px) rotate(-179deg);
+    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); }
+  50.1% {
+    transform: translateX(42px) translateY(42px) rotate(-180deg);
+    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); }
+  75% {
+    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
+    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); }
+  100% {
+    transform: rotate(-360deg);
+    -webkit-transform: rotate(-360deg); } }
+
+.box-spinner {
+  position: relative;
+  display: inline-block;
+  margin: 25px;
+  width: 64px;
+  height: 64px;
+  background-color: #413a3a;
+  animation: sk-rotateplane 1.2s infinite ease-in-out; }
+
+@keyframes sk-rotateplane {
+  0% {
+    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
+  50% {
+    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
+  100% {
+    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
+
+.sk-cube-grid {
+  position: relative;
+  display: inline-block;
+  margin: 25px;
+  width: 64px;
+  height: 64px; }
+
+.sk-cube-grid .sk-cube {
+  width: 33%;
+  height: 33%;
+  background-color: #413a3a;
+  float: left;
+  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; }
+
+.sk-cube-grid .sk-cube1 {
+  animation-delay: 0.2s; }
+
+.sk-cube-grid .sk-cube2 {
+  animation-delay: 0.3s; }
+
+.sk-cube-grid .sk-cube3 {
+  animation-delay: 0.4s; }
+
+.sk-cube-grid .sk-cube4 {
+  animation-delay: 0.1s; }
+
+.sk-cube-grid .sk-cube5 {
+  animation-delay: 0.2s; }
+
+.sk-cube-grid .sk-cube6 {
+  animation-delay: 0.3s; }
+
+.sk-cube-grid .sk-cube7 {
+  animation-delay: 0s; }
+
+.sk-cube-grid .sk-cube8 {
+  animation-delay: 0.1s; }
+
+.sk-cube-grid .sk-cube9 {
+  animation-delay: 0.2s; }
+
+@keyframes sk-cubeGridScaleDelay {
+  0%, 70%, 100% {
+    transform: scale3D(1, 1, 1); }
+  35% {
+    transform: scale3D(0, 0, 1); } }
+
+.sk-folding-cube {
+  margin: 25px;
+  width: 40px;
+  height: 40px;
+  position: relative;
+  display: inline-block;
+  transform: rotateZ(45deg); }
+
+.sk-folding-cube .sk-cube {
+  float: left;
+  width: 50%;
+  height: 50%;
+  position: relative;
+  transform: scale(1.1); }
+
+.sk-folding-cube .sk-cube:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #413a3a;
+  animation: sk-foldCubeAngle 2.4s infinite linear both;
+  transform-origin: 100% 100%; }
+
+.sk-folding-cube .sk-cube2 {
+  transform: scale(1.1) rotateZ(90deg); }
+
+.sk-folding-cube .sk-cube3 {
+  transform: scale(1.1) rotateZ(180deg); }
+
+.sk-folding-cube .sk-cube4 {
+  transform: scale(1.1) rotateZ(270deg); }
+
+.sk-folding-cube .sk-cube2:before {
+  animation-delay: 0.3s; }
+
+.sk-folding-cube .sk-cube3:before {
+  animation-delay: 0.6s; }
+
+.sk-folding-cube .sk-cube4:before {
+  animation-delay: 0.9s; }
+
+@keyframes sk-foldCubeAngle {
+  0%, 10% {
+    transform: perspective(140px) rotateX(-180deg);
+    opacity: 0; }
+  25%, 75% {
+    transform: perspective(140px) rotateX(0deg);
+    opacity: 1; }
+  90%, 100% {
+    transform: perspective(140px) rotateY(180deg);
+    opacity: 0; } }
+
+.scrollbar {
+  margin-left: 30px;
+  float: left;
+  height: 300px;
+  width: 65px;
+  background: #F5F5F5;
+  overflow-y: scroll;
+  margin-bottom: 25px; }
+
+.force-overflow {
+  min-height: 450px; }
+
+#wrapper {
+  text-align: center;
+  width: 500px;
+  margin: auto; }
+
+/*
+ *  STYLE 1
+ */
+#style-1::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+  background-color: #F5F5F5; }
+
+#style-1::-webkit-scrollbar {
+  width: 12px;
+  background-color: #F5F5F5; }
+
+#style-1::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #555; }
+
+/*
+ *  STYLE 2
+ */
+#style-2::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+  background-color: #F5F5F5; }
+
+#style-2::-webkit-scrollbar {
+  width: 12px;
+  background-color: #F5F5F5; }
+
+#style-2::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #D62929; }
+
+/*
+ *  STYLE 3
+ */
+#style-3::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #F5F5F5; }
+
+#style-3::-webkit-scrollbar {
+  width: 6px;
+  background-color: #F5F5F5; }
+
+#style-3::-webkit-scrollbar-thumb {
+  background-color: #000000; }
+
+/*
+ *  STYLE 4
+ */
+#style-4::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #F5F5F5; }
+
+#style-4::-webkit-scrollbar {
+  width: 10px;
+  background-color: #F5F5F5; }
+
+#style-4::-webkit-scrollbar-thumb {
+  background-color: #000000;
+  border: 2px solid #555555; }
+
+/*
+ *  STYLE 5
+ */
+#style-5::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #F5F5F5; }
+
+#style-5::-webkit-scrollbar {
+  width: 10px;
+  background-color: #F5F5F5; }
+
+#style-5::-webkit-scrollbar-thumb {
+  background-color: #0ae;
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(transparent)); }
+
+/*
+ *  STYLE 6
+ */
+#style-6::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #F5F5F5; }
+
+#style-6::-webkit-scrollbar {
+  width: 10px;
+  background-color: #F5F5F5; }
+
+#style-6::-webkit-scrollbar-thumb {
+  background-color: #F90;
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); }
+
+/*
+ *  STYLE 7
+ */
+#style-7::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #F5F5F5;
+  border-radius: 10px; }
+
+#style-7::-webkit-scrollbar {
+  width: 10px;
+  background-color: #F5F5F5; }
+
+#style-7::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, #7a99d9), color-stop(0.72, #497dbd), color-stop(0.86, #1c3a94)); }
+
+/*
+ *  STYLE 8
+ */
+#style-8::-webkit-scrollbar-track {
+  border: 1px solid black;
+  background-color: #F5F5F5; }
+
+#style-8::-webkit-scrollbar {
+  width: 10px;
+  background-color: #F5F5F5; }
+
+#style-8::-webkit-scrollbar-thumb {
+  background-color: #000000; }
+
+/*
+ *  STYLE 9
+ */
+#style-9::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #F5F5F5; }
+
+#style-9::-webkit-scrollbar {
+  width: 10px;
+  background-color: #F5F5F5; }
+
+#style-9::-webkit-scrollbar-thumb {
+  background-color: #F90;
+  background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); }
+
+/*
+ *  STYLE 10
+ */
+#style-10::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #F5F5F5;
+  border-radius: 10px; }
+
+#style-10::-webkit-scrollbar {
+  width: 10px;
+  background-color: #F5F5F5; }
+
+#style-10::-webkit-scrollbar-thumb {
+  background-color: #AAA;
+  border-radius: 10px;
+  background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.2) 75%, transparent 75%, transparent); }
+
+/*
+ *  STYLE 11
+ */
+#style-11::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #F5F5F5;
+  border-radius: 10px; }
+
+#style-11::-webkit-scrollbar {
+  width: 10px;
+  background-color: #F5F5F5; }
+
+#style-11::-webkit-scrollbar-thumb {
+  background-color: #3366FF;
+  border-radius: 10px;
+  background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent); }
+
+/*
+ *  STYLE 12
+ */
+#style-12::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
+  border-radius: 10px;
+  background-color: #444444; }
+
+#style-12::-webkit-scrollbar {
+  width: 12px;
+  background-color: #F5F5F5; }
+
+#style-12::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #D62929;
+  background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent); }
+
+/*
+ *  STYLE 13
+ */
+#style-13::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
+  border-radius: 10px;
+  background-color: #CCCCCC; }
+
+#style-13::-webkit-scrollbar {
+  width: 12px;
+  background-color: #F5F5F5; }
+
+#style-13::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #D62929;
+  background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent); }
+
+/*
+ *  STYLE 14
+ */
+#style-14::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
+  background-color: #CCCCCC; }
+
+#style-14::-webkit-scrollbar {
+  width: 10px;
+  background-color: #F5F5F5; }
+
+#style-14::-webkit-scrollbar-thumb {
+  background-color: #FFF;
+  background-image: -webkit-linear-gradient(90deg, black 0%, black 25%, transparent 100%, black 75%, transparent); }
+
+/*
+ *  STYLE 15
+ */
+#style-15::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #F5F5F5;
+  border-radius: 10px; }
+
+#style-15::-webkit-scrollbar {
+  width: 10px;
+  background-color: #F5F5F5; }
+
+#style-15::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #FFF;
+  background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4D9C41), to(#19911D), color-stop(0.6, #54DE5D)); }
+
+/*
+ *  STYLE 16
+ */
+#style-16::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #F5F5F5;
+  border-radius: 10px; }
+
+#style-16::-webkit-scrollbar {
+  width: 10px;
+  background-color: #F5F5F5; }
+
+#style-16::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #FFF;
+  background-image: -webkit-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%); }