Night Rush Theme

🌌 This is Night Rush. 🌌

It is a dark theme of grays and purples, customized to the needs of an Individual.

It began as a reskin of Sigma-9 and carcinized from there. 🦀

@charset "utf-8";
 
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Squada+One&display=swap');
 
@import url("http://nagiros.wdfiles.com/local--code/userflag-variables/1");
@import url("http://nagiros.wdfiles.com/local--code/secret%3Auserlist/1");
 
/*
    Night Rush Theme
    [2020 Wikidot Theme]
    Created for the Crab Den by Nagiros
    Derived from the Sigma-9 Theme for the SCP Foundation by Aelanna
*/
 
/*--------------------------------------*\
 *              VARIABLES               *
\*--------------------------------------*/
 
:root {
 
  --main-bg: #1a1a1a;
  --main-clr: #ededed;
 
  --white: #fff;
  --vl-gray: #f2f2f2;
  --l-gray: #e6e6e6;
  --reg-gray: #ccc;
  --d-gray: #5c5c5c;
  --vd-gray: #121212;
  --black: #000;
 
  --l-purple: #b19cd9;
  --reg-purple: #5e4391;
  --d-purple: #322a47;
  --l-blue: #8870df;
  --d-blue: #160040;
 
  --link-clr: #9179E7;
  --link-new-clr: #cc9cff;
  --login-clr: #aaa;
  --login-lnk-clr: #ddd;
  --header-clr1: #eee;
  --scroll-track: 255, 255, 255, 0.25;
  --scroll-thumb: #afafaf;
  --blk-shadow: 0,0,0,.8;
  --side-lnk-bg: #4d4d4d;
  --cell-bg: #404040;
  --blue-shadow: 136, 112, 223, 0.4;
  --sec-gray: #2b2b2b;
  --blk-files: #272727;
 
/*  ACS  */
 
  --five-color: 196, 67, 67 !important;   /*  red  */
  --four-color: 255, 141, 54 !important;   /*  orange  */
  --three-color: 255, 226, 82 !important;   /*  yellow  */
  --two-color: 40, 135, 189 !important;   /*  blue  */
  --one-color: 40, 159, 107 !important;   /*  green  */
 
  --white-bar: 207, 207, 207;
  --lg-bar: 118, 118, 130;
  --gray-bg: 66, 66, 72;
 
/*  CLASSIFIED BAR  */
 
  --swatch-text-general: #ededed;
  --swatch-menubg-black-color: 243, 243, 243;
}
 
/*--------------------------------------*\
 *                BASICS                *
\*--------------------------------------*/
 
html {
  scroll-padding-top: 100px;
}
 
body {
  background: var(--main-bg);
  color: var(--main-clr);
  font: 0.9em 'Poppins', sans-serif;
}
 
img,
embed,
video,
object,
iframe,
table {
  max-width: 100%;
}
 
ul {
  list-style: square;
}
 
li,
p {
  line-height: 141%;
}
 
#content-wrap {
  height: auto !important;
  margin: 6em 8em 0 0;
  min-height:1300px;
  position: relative;
}
 
.form-control {   /*  keeps editing window at large width  */
  width: 95%;
}
 
textarea {
  padding: 5px;
}
 
/*  VIEWPORT  */
 
@viewport {
  width: device-width;
  zoom: 1.0;
}
@-webkit-viewport {
  width: device-width;
  zoom: 1.0;
}
 
/*  SCROLLBAR  */
 
::-webkit-scrollbar {
  width: 9px;    /* for vertical scrollbars */
  height: 9px; /* for horizontal scrollbars */
  border: solid 1px rgba(var(--scroll-track));
}
 
::-webkit-scrollbar-track {
  background: rgba(var(--scroll-track));
}
 
::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb);
}
 
/*  INPUTS/BUTTONS  */
 
input,
input.text,
input.button,
div.buttons input,
input.button,
a.button,
button,
input.button:focus,
input.button:hover,
input.text:focus,
input.text:hover,
file,
select,
textarea {
  background-color: var(--blk-files);
  border: 1px solid var(--white);
  border-radius: 0;
  color: var(--vl-gray);
  font-size: 1em;
  outline: 0;
}
 
div.buttons input:hover,
div.buttons input:focus,
input.button:hover,
input.button:focus,
button:hover,
button:focus,
file:hover,
file:focus,
a.button:hover,
a.button:focus {
  background-color: var(--d-gray);
  color: var(--white);
}
 
.new-page-box form input.text {
  border-style: solid;
  border-color: var(--white);
}
 
/*  HEADERS  */
 
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--vl-gray);
  padding: 0 0 0.25em;
  margin: 0 0 0.6em;
  font-weight: normal;
}
h1 {
  margin-top: 0.7em;
  padding: 0;
  font-weight: bold;
}
h2,
h3,
h4,
h5,
h6,
h7 {
  margin: 0.5em 0 0.4em;
  padding: 0;
  letter-spacing: 1px;
}
 
/*  LINKS  */
 
a {
  color: var(--link-clr);
  text-decoration: none;
  background: transparent;
}
a:visited {
  color: var(--link-clr);
}
a.newpage {
  color: var(--link-new-clr);
}
a:hover {
  text-decoration: underline;
  background-color: transparent;
}
 
/*  PRINTUSER  */
 
.printuser img.small {   /*  [[*user ]] adjustment  */
  margin-right: 1px;
}
 
/*--------------------------------------*\
 *              TOP OF PAGE             *
\*--------------------------------------*/
 
#search-top-box {
  display: none;
}
 
@media (min-width: 480px) {
  #top-bar {
    display: none;
  }
}
 
/*  HEADER  */
 
#header {
  align-items: center;
  background-color: #703ead;
  box-shadow: 0 3px 5px rgb(0, 0, 0, .5);
  display: flex;
  height: 60px;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}
 
#header h1 {
  float: left;
  font-size: 150%;
  left: 4em;
  margin-left: 0;
  max-height: 95px;
  padding: 0;
  position: absolute;
  top: .5em;
}
#header h1 a {
  background: transparent;
  color: var(--header-clr1);
  display: block;
  font: 180% 'Squada One', monospace;
  letter-spacing: 0.9px;
  line-height: 100%;
  margin: 0;
  max-height: 0px;
  padding-bottom: 25px;
  text-decoration: none;
  text-shadow: 3px 3px 5px var(--black);
}
#header h1 a span:after {
  content: ' 🦀';
}
#header h2 {
  display: none;
}
 
/*  LOGIN  */
 
#login-status {
  color: var(--login-clr);
  padding: 0 10px 0 15px;
  position: absolute;
  right: 4em;
  top: 1.5em;
  z-index: 30;
}
#login-status a {
  background: transparent;
  color: var(--login-lnk-clr);
}
#login-status ul a {
  background-color: var(--vd-gray);
  color: var(--l-gray);
  border-color: var(--vl-gray);
}
#login-status ul a:hover {
  background-color: var(--d-gray);
  color: var(--l-gray);
  text-decoration: none;
}
#login-status a#account-topbutton {
  border: none;
  font-size: 100%;
}
 
/*-------------------------------------*\
 *               SIDEBAR               *
\*-------------------------------------*/
 
#side-bar {
  background: transparent;
  border: none;
  clear: none;
  display: block;
  float: none;
  left: 6em;
  padding: 0;
  position: absolute;
  top: 0.5em;
  width: 17em;
}
 
#side-bar p {
  margin: 0;
}
 
.side-block {
  border-left: 4px solid var(--l-gray);
  padding: .25em 1em;
}
.side-block.side-first {
  padding-left: 2em;
  font-weight: bold;
  margin-bottom: 2em;
}
.side-block.side-first.no-title {
  display: none;
}
.side-block .side-title {
  font-size: 200%;
  line-height: 120%;
}
 
.side-block .side-label {
  font-weight: bold;
  font-size: 110%;
  margin: 1em 0;
  text-align: center;
}
.side-block .side-label:first-of-type {
  margin-top: 0;
}
 
/*-------------------------------------*\
 *               CONTENT               *
\*-------------------------------------*/
 
#main-content {
  margin: 0 -2em 0 26em;
  padding: 0 1em;
  position: relative;
}
 
#page-content {
  min-height: 720px;
}
 
#page-content div,
#page-content div table {
  max-width: 100%;
}
 
#page-title {
  display: none;
}
 
#breadcrumbs {
  display: none;
}
 
table.wiki-content-table th {
  background-color: var(--cell-bg);
}
 
div#toc {
  background-color: var(--sec-gray);
  border-color: var(--vl-gray);
}
 
hr {
  background-color: var(--vl-gray);
}
 
/*  THEME TOGGLE  */
 
.theme-toggle {
  display: inline-block;
  text-align: center;
  align-items: flex-start;
  background-color: var(--blk-files);
  box-sizing: border-box;
  margin: 5px 0;
  padding: 1px 6px;
  border-width: 2px;
  border-style: outset;
  border-color: var(--white);
}
.theme-toggle p {
  margin: 0;
}
 
/*  RATING MODULES  */
 
.page-rate-widget-box {
  display: inline-block;
  border-radius: 5px;
  box-shadow: 1px 1px 3px rgba(var(--blue-shadow));
  margin-right: 2em;
  background-color: var(--vd-gray);
  border: 2px solid var(--l-blue);
  color: var(--main-clr);
  padding: .1em;
}
.page-rate-widget-box .rate-points,
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown,
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a,
.page-rate-widget-box .cancel a {
  background-color: transparent !important;   /*  clears standard colors  */
  border: 0;   /*  clears standard borders  */
  text-transform: capitalize;
  color: var(--main-clr);
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
  margin: 0 1px;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
  border-left: 2px solid var(--l-blue);
  font-weight: bold;
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
  text-decoration: none;
  color: var(--link-new-clr);
}
.page-rate-widget-box .cancel {
  border-left: 1px solid var(--l-blue);
  border-radius: 0 5px 5px 0;
}
.page-rate-widget-box .cancel {
  border-left: 2px solid var(--l-blue);
}
.page-rate-widget-box .cancel a:hover {
  background-color: transparent;
  color: var(--link-new-clr);
  text-decoration: none;
}
.page-rate-widget-box .cancel a,
.page-rate-widget-box .cancel a:hover {
  border-radius: 0 5px 5px 0;
}
 
/*  INFO MODULES  */
 
.rate-box-with-credit-button {
  background-color: var(--vd-gray);
  border: 2px solid var(--l-blue);
  box-shadow: 1px 1px 3px rgba(var(--blue-shadow));
  padding: .1em;
}
rate-box-with-credit-button .page-rate-widget-box {
  border: 0;
}
.rate-box-with-credit-button .creditButton p a {   /*  "i" border  */
  border-left-color: var(--l-blue);
  border-left-width: 2px;
}
.rate-box-with-credit-button .page-rate-widget-box .cancel {
  border-radius: 0;
}
.rate-box-with-credit-button .page-rate-widget-box .rate-points {
  border-left: 0;
}
 
.modalbox {   /*  credit box customizations  */
  background-color: var(--sec-gray);
  background-image: linear-gradient(var(--main-bg) 51px, var(--sec-gray) 51px, var(--sec-gray)) !important;
  color: var(--main-clr);
  box-shadow: 0 2px 6px rgba(64, 64, 64, 0.4);
}
 
.close-credits,
.credit-back {   /*  "X" coloring in credit box  */
  filter: hue-rotate(260deg) brightness(300%);
}
 
/*  ACS SPACING  */
 
.anom-bar-container .quadrants > div {
  top: 2.25% !important;
  left: 18.5% !important;
}
 
@media (min-width: 480px) {
  .clear-4 .anom-bar > .bottom-box {
    margin-top: -.25rem !important;
  }
  .clear-5 .anom-bar > .bottom-box,
  .clear-6 .anom-bar > .bottom-box {
    margin-top: 0 !important;
  }
  .clear-4 .anom-bar .top-left-box,
  .clear-5 .anom-bar .top-left-box {
    margin-top: .5rem !important;
  }
  .clear-6 .anom-bar .top-left-box {
    margin-top: 1rem !important;
  }
  .clear-4 .anom-bar .top-right-box,
  .clear-5 .anom-bar .top-right-box,
  .clear-6 .anom-bar .top-right-box {
    margin-top: .5rem !important;
  }
}
 
/*  ACS COLORS  */
 
.anom-bar > .bottom-box {   /*  horizontal bar  */
  box-shadow: 0 -0.5rem 0 0 rgb(207, 207, 207) !important;
  -webkit-box-shadow: 0 -0.5rem 0 0 rgb(207, 207, 207) !important;
  -moz-box-shadow: 0 -0.5rem 0 0 rgb(207, 207, 207) !important;
  box-shadow: 0 -0.5rem 0 0 rgb(var(--white-bar, 207, 207, 207)) !important;
  -webkit-box-shadow: 0 -0.5rem 0 0 rgb(var(--white-bar, 207, 207, 207)) !important;
  -moz-box-shadow: 0 -0.5rem 0 0 rgb(var(--white-bar, 207, 207, 207)) !important;
}
.bottom-box > .diamond-part {   /*  vertical bar  */
  box-shadow: -0.5rem 0 0 0 rgb(207, 207, 207) !important;
  -webkit-box-shadow: -0.5rem 0 0 0 rgb(207, 207, 207) !important;
  -moz-box-shadow: -0.5rem 0 0 0 rgb(207, 207, 207) !important;
  box-shadow: -0.5rem 0 0 0 rgb(var(--white-bar, 207, 207, 207)) !important;
  -webkit-box-shadow: -0.5rem 0 0 0 rgb(var(--white-bar, 207, 207, 207)) !important;
  -moz-box-shadow: -0.5rem 0 0 0 rgb(var(--white-bar, 207, 207, 207)) !important;
}
.anom-bar-container.esoteric .text-part .main-class,
.anom-bar-container.explained .text-part .main-class,
.anom-bar-container.neutralized .text-part .main-class,
.anom-bar-container.pending .text-part .main-class {
  background-color: rgba(66, 66, 72, .5) !important;
  background-color: rgba(var(--gray-bg, 66, 66, 72), .5) !important;
  border-left-color: rgb(118, 118, 130) !important;
  border-left-color: rgb(var(--lg-bar, 118, 118, 130)) !important;
}
.danger-diamond > .arrows,
.danger-diamond > .bottom-icon::before {   /*  inverted arrows, esoteric icons  */
  filter: invert(90%) !important;
  -webkit-filter: invert(90%) !important;
}
.danger-diamond > .quadrants > .bottom-quad,
.anom-bar-container.explained .danger-diamond > .quadrants > .top-quad,
.anom-bar-container.neutralized .danger-diamond > .quadrants > .top-quad,
.anom-bar-container.pending .danger-diamond > .quadrants > .top-quad {   /*  "transparent" bottoms/top icon backgrounds  */
  background-color: rgb(26, 26, 26) !important;   /*  body background color  */
}
.danger-diamond > .bottom-icon,
.anom-bar-container.pending .danger-diamond > .top-icon::before {   /*  esoteric, pending icon backgrounds  */
  background-color: rgb(3, 3, 3) !important;
}
 
.acs-hybrid-text-bar > .acs-clear > .clearance-level-text::before,
.acs-hybrid-text-bar > .acs-disrupt .disruption-class-number::before,
.acs-hybrid-text-bar > .acs-risk .risk-class-number::before {   /*  hybrid text fixes  */
  color: rgb(237, 237, 237) !important;   /*  text color  */
}
.acs-hybrid-version.acs-yes .acs-secondary,
.acs-hybrid-version.acs-esoteric .acs-contain,
.acs-hybrid-version.acs-explained .acs-contain,
.acs-hybrid-version.acs-neutralized .acs-contain,
.acs-hybrid-version.acs-pending .acs-contain {   /*  hybrid vertical bars  */
  box-shadow: inset 0.5rem 0 0 0 rgb(118, 118, 130) !important;
  -webkit-box-shadow: inset 0.5rem 0 0 0 rgb(118, 118, 130) !important;
  -moz-box-shadow: inset 0.5rem 0 0 0 rgb(118, 118, 130) !important;
  box-shadow: inset 0.5rem 0 0 0 rgb(var(--lg-bar, 118, 118, 130)) !important;
  -webkit-box-shadow: inset 0.5rem 0 0 0 rgb(var(--lg-bar, 118, 118, 130)) !important;
  -moz-box-shadow: inset 0.5rem 0 0 0 rgb(var(--lg-bar, 118, 118, 130)) !important;
}
.acs-hybrid-version.acs-pending .acs-contain {
  background-color: rgba(66, 66, 72, .5) !important;
  background-color: rgba(var(--gray-bg, 66, 66, 72), .5) !important;
}
 
/*  CLASSIFICATION DECORATION  */
 
.class1 h1,
.item1 h1 {
  color: var(--main-clr) !important;
}
 
/*  CLASSIFIED BAR  */
 
.scale .obj {
  background-color: #5c5c5c !important;
}
 
/*  IMAGES  */
 
.scp-image-block {
  border: solid 1px var(--l-blue);
  width: 300px;
}
.scp-image-block img {
  border: 0;
  width: 300px;
}
.scp-image-block.block-right {
  float: right;
  clear: right;
  margin: 0 2em 1em 2em;
  box-shadow: 1px 1px 2px rgba(var(--blue-shadow));
}
.scp-image-block.block-left {
  float: left;
  clear: left;
  margin: 0 2em 1em 0;
  box-shadow: -1px 1px 2px rgba(var(--blue-shadow));
}
.scp-image-block.block-center {
  margin-right: auto;
  margin-left: auto;
  box-shadow: -1px 1px 2px rgba(var(--blue-shadow));
}
.scp-image-block .scp-image-caption {
  background-color: var(--cell-bg));
  border-top: solid 1px var(--l-blue);
  padding: 2px 0;
  font-size: 80%;
  font-weight: bold;
  text-align: center;
  width: 300px;
}
.scp-image-block > p {
  margin: 0;
  padding: 0 10px;
}
 
/*  YUI-TABS  */
/* some bits taken from Croquembuche's anderson robotics theme, idk it works fine */
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {   /* top bar  */
  border-color: transparent;
  position: relative;
  z-index: 0;
}
 
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected,
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
  margin: .4em .8em .4em 0;
}
.yui-navset li,
.yui-navset li.selected,
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected {
  line-height: normal;
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
  background: none;
  border: none;
  color: #c7c7c7;
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */
.yui-navset .yui-nav .selected a:hover {  /* selected tab background */
   background: none;
   color: #f2f2f2;
}
.yui-navset .yui-nav a:focus,
.yui-navset .yui-nav a:hover {
   background: none;
   text-decoration: none;
}
.yui-navset .yui-nav li a {   /*  tab interior  */
  background-color: #323232;
  border: 0;
  color: #c7c7c7;
  transition: all 0.1s ease-in-out;  /* smooth changes on-click  */
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus,
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {   /*  hover and selected tabs  */
  background-color: var(--reg-purple);
  background-image: none;
  color: var(--vl-gray);
}
 
.yui-navset .yui-nav li a em {   /*  removes top tab border, fixes padding  */
  border: 0;
  padding: 0.35em 0.75em 0.25em;
  font-size: 120%;
}
.yui-navset .yui-nav .selected a em {   /*  active tab  */
  border: 0;
  padding: 0.35em 0.75em 0.25em;
}
 
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {   /*  the stuff in the tabview  */
  background: transparent;
  border-width: 0;
  border-top: 10px solid #b19cd9;
  border-bottom: 10px solid #b19cd9;
  display: flex;
  flex-direction: column;
  margin-top: .2em;
  padding: 10px 0;
  position: relative;
  transform-origin: 0 0;
}
.yui-navset .yui-content > div {
  display: block;
  top: 0;
  overflow: hidden;
  transform-origin: 0 0;
}
.yui-navset .yui-content > div > * {
  transform-origin: 0 0;
}
.yui-navset .yui-content > div[style*="none"] {
  display: block !important;
  flex: 0;
  max-height: 0;
  /* The following transition affects the one that DISAPPEARS */
  transition: flex 0.5s cubic-bezier(.0,1.27,.0,.89) 0s;
  animation: tab-disappear 0.5s ease-in-out 0s 1 both;
}
.yui-navset .yui-content > div[style*="block"] {
  display: block !important;
  flex: 1;
  max-height: 9999rem;
  /* The following transition affects the one that APPEARS */
  transition: flex 0.5s cubic-bezier(.99,.0,.99,.0) 0.5s;
  animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
}
 
@keyframes tab-disappear {
  0% { max-height: 9999rem; }
  1% { max-height: 100vh; }
  100% { max-height: 0; }
}
@keyframes tab-appear {
  0% { max-height: 0; }
  99% { max-height: 100vh; }
  100% { max-height: 9999rem; }
}
 
/*  BLOCKQUOTES  */
 
blockquote,
div.blockquote {
  background-color: var(--sec-gray);
  border-color: var(--vl-gray);
}
 
div.blockquote {
  border: 1px dashed var(--vl-gray);
  padding: 0 1em;
  margin: 1em 40px;
}
@media (max-width: 479px) {
  blockquote,
  div.blockquote {
    margin: 1em 0;
  }
}
@media (min-width: 480px) and (max-width: 580px) {
  blockquote,
  div.blockquote {
    margin: 0.5em;
  }
}
 
/*  COLORS  */
span[style="color: red"] {
  color: #ff4545 !important;
}
span[style="color: blue"] {
  color: #0088ff !important;
}
 
/*  NAGI TABLES  */
.nagi-table {
  background: black;
  width: 100%;
  border-spacing: 4px;
  margin-bottom: 25px;
}
.nagi-table:last-of-type {
  margin-bottom: 0;
}
.nagi-table h1,
.nagi-table h2 {
  margin-top: .6em;
}
.nagi-table h1 a {
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}
.nagi-table h1 a:hover {
  font-size: 150%;
  text-decoration: none;
  text-shadow: 0px 0px 6px black;
}
.nagi-table td {
  text-align: center;
  text-shadow: 0px 0px 4px black;
  padding: 0 10px;
  background: #383838;
}
.nagi-table .square {
  background: #2e2e2e;
  width: 20%;
  font-size: 125%;
}
.nagi-table .emoji {
  font-size: 160%;
}
.nagi-table .web-design {
  font-size: 200%;
}
.nagi-table .tale {
  background: #2e2e2e;
}
 
/*  FOOTNOTES  */
 
.footnoteref,
#page-content > sup {
  position: relative;
  top: -0.5em;
  vertical-align: top;
}
.hovertip {
  width: 20em;
  padding: 0.5em;
  border: 1px solid var(--l-blue) !important;
  border-radius: 0.5em;
  background-color: var(--vd-gray) !important;
  z-index: 100;
}
.hovertip .f-heading {
  color: var(--vl-gray);
}
 
/*  CODE  */
 
.code {
  background-color: var(--sec-gray);
  border: 1px dashed var(--vl-gray);
  font: 1em "Courier", "Courier New", "Roboto Mono", monospace;
}
.code span {
  line-height: 125%;
}
.hl-identifier,
.hl-code,
.hl-brackets {   /* the spaces, out-of-code words, brackets */
  color: var(--vl-gray);
}
.hl-number {   /* individual numbers */
  color: #ff7a7a;
}
.hl-string {   /* in-code words */
  color: #99f;
}
.hl-special {   /* pesudo-class labels */
  color: #ffd86b;
}
.hl-quotes {   /* what it says on the tin */
  color: #494;
}
 
/*  TAGS  */
 
.page-tags {
  margin: 1em 0 0;
  padding: 0;
}
.page-tags span {
  display: inline-block;
  padding: 0;
  max-width: 60%;
  border-top-color: var(--l-purple);
  font-size: 92.5%;
}
.page-tags a {
  display: inline-block;
  white-space: nowrap;
  padding: 0.1em 0.2em;
}
.page-tags a:hover {
  background-color: var(--d-gray);
  text-decoration: none;
}
 
/*  WIKIWALK NAVIGATION  */
 
.footer-wikiwalk-nav {
  font-weight: bold;
  font-size: 75%;
}
 
/*  SPECIAL DIVS  */
 
.hub-panel {
  align-items: center;
  border: 4px solid black;
  background-color: #2e2e2e;
  display: flex;
  font-size: 125%;
  height: 200px;
  justify-content: center;
  margin: 10px 0;
  text-shadow: 2px 2px 4px black;
}
.hub-panel.left-column {
  float: left;
  width: 48%;
}
.hub-panel.right-column {
  float: right;
  width: 48%;
}
@media (min-width: 480px) {
  .hub-panel {
    transition: font-size 0.25s ease-out;
  }
  .hub-panel a:hover {
    text-decoration: none;
  }
  .hub-panel:hover {
    font-size: 175%;
  }
}
 
.edit-wrapper,
.error-block {
  background-color: #2d2d2d;
  border: solid 1px #afafaf;
  border-radius: 20px;
  margin: 20px auto;
  text-align: center;
  padding: 0 10px;
  font-weight: bold;
  max-width: 50% !important;
  font-size: 115%;
  color: var(--main-clr);
}
 
.blurb {
  font-size: 125%;
  text-align: center;
}
.blurb p:first-of-type {
  font-size: 140%;
}
 
/*--------------------------------------*\
 *            BOTTOM OF PAGE            *
\*--------------------------------------*/
 
a#pagerate-button,
a#discuss-button,
a#print-button,
a#edit-sections-button,
a#edit-append-button,
a#watchers-button,
a#page-block-button {
  display: none;
}
 
ins,
del {   /*  new/removed text when comparing revisions  */
  color: var(--black);
}
 
.preview-message {
  display: none;
}
 
#page-tags-input,
#parent-page-name,
#move-new-page-name {
  border-color: var(--reg-gray);
}
 
/* EDITING WINDOWS */
.owindow {
  color: var(--black);
}
.owindow h1,
.owindow h2,
.owindow h3,
.owindow h4,
.owindow h5,
.owindow h6 {
  color: var(--black);
}
.owindow a {
  color: var(--blk-files);
}
 
table.page-files .highlight {
  background-color: var(--blk-files);
}
#lock-info {
  background-color: var(--sec-gray);
  margin: 1em;
}
 
.page-source {
  word-break: break-all;
}
 
#edit-page-comments {
  width: 100%;
}
 
#page-options-container a:hover,
#action-area a:hover {
  background-color: var(--d-gray);
  text-decoration: none;
}
 
#page-tags-input,
#parent-page-name,
#move-new-page-name {   /*  tags, parent, rename fields  */
  border-color: var(--reg-gray);
}
 
#parent-page-name-list {
  color: var(--black);
}
 
.license-area a,
.edit-help-34 a {   /*  bottom bar  */
  color: var(--white);
}
 
/*  EDIT  */
 
#edit-page-title {
  border: 1px solid var(--reg-gray);
  text-align: center;
}
#edit-page-textarea {
  background-color: var(--blk-files);
  border-color: var(--reg-gray);
  color: var(--vl-gray);
}
#edit-page-comments {
  background-color: #2e2e2e;
  border-color: var(--reg-gray);
  color: var(--main-clr);
}
 
input#file-rename-name.text {
  color: var(--black);
}
 
/* EDITING WINDOWS */
 
.owindow,
.owindow h2,
.owindow h3,
.owindow h4,
.owindow h5,
.owindow h6 {
  color: #333;
}
.owindow h1,
.owindow a {
  color: #901;
}
 
/*  FILES  */
 
.page-files a {
  color: var(--white);
}
a#show-upload-button:hover {
  background-color: transparent;
}
table.page-files .highlight {
  background-color: var(--blk-files);
}
#file-comments {
  background-color: #2e2e2e;
  border-color: var(--reg-gray);
  color: var(--main-clr);
}
#file-rename-name {
  border-color: #333;
  color: #333;
}
 
/*  FOOTER  */
 
#footer {
  clear: both;
  font-size: 77%;
  background: #444;
  color: #bbb;
  margin-top: 15px;
  padding: 3px 10px;
}
#footer .options {
  visibility: visible;
  display: block;
  float: right;
  width: 50%;
  font-size: 100%;
  text-align: right;
}
#footer a {
  color: white;
  background: transparent;
}
 
.license-area a,
.page-watch-options a,
.page-options-bottom a,
.edit-help-34 a {
  color: var(--white);
}
 
/*--------------------------------------*\
 *             COMPATIBILITY            *
\*--------------------------------------*/
 
/* basic Query for mobile devices */
 
@media (max-width: 767px) {
  .owindow {
    min-width: 80%;
    max-width: 99%;
  }
 
  .modal-body .table,
  .modal-body .table ~ div {
    float: left;
  }
 
  .owindow .button-bar {
    float: right;
  }
 
  .owindow div a.btn-primary {
    width: 100%;
    float: left;
  }
  #header {
    background-size: 22em;
    background-position: 1em;
  }
}
 
/* Mobile Media Query */
@media (max-width: 479px) {
  #content-wrap {
    margin-left: 0.5em;
    margin-right: 0.5em;
  }
 
  #page-content {
    font-size: 0.9em;
  }
 
  #main-content {
    margin: 0;
  }
 
  #recent-posts-category {
    width: 100%;
  }
 
  #header {
    max-width: 100%;
  }
 
  #header h1 {
    font-size: 250%;
    left: 2.25em;
    top: .35em;
  }
  #login-status {
    color: transparent;
    font-size: 120%;
    right: .25em;
    top: .5em;
  }
  #login-status .printuser,
  #login-status a#my-account,
  #login-status > a[href="https://www.wikidot.com/account/messages"] {
    display: none;
  }
  #login-status a#account-topbutton {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 5px 10px rgba(18, 18, 18, .5);
  }
  #login-status > span,
  #login-status a.login-status-create-account,
  #login-status a.login-status-sign-in {
    display: none;
  }
 
  #side-bar {
    width: 80%;
    position: relative;
  }
 
  .top-bar {
    display:none;
  }
 
  .page-options-bottom a {
    padding: 0 4px;
  }
 
  #header h1 a {
    font-size: 100%;
  }
 
  blockquote,
  div.blockquote {
    margin: 1em 0;
  }
 
  .license-area {
    font-size: 0.8em;
  }
 
  #header {
    background-position: 0 5.5em;
    background-size: 55px 55px;
  }
 
  table.form td,
  table.form th {
    float: left;
  }
 
  td.name {
    width: 15em;
  }
 
  table.form td,
  table.form th {
    padding: 0;
  }
 
  #edit-page-title {
    max-width: 90%;
  }
 
  .hub-panel.left-column,
  .hub-panel.right-column {
    width: 99%;
    float: left;
  }
 
  #page-content div,
  #page-content div table {
    clear: both;
  }
 
  #page-content div.title {
    word-break: keep-all;
  }
 
}
 
/* Note Media Query */
@media (min-width: 480px) and (max-width: 580px) {
 
  #main-content {
    margin: 0 2em 0 2em;
  }
 
  #header {
    max-width: 100%;
  }
 
  #side-bar {
    width: 80%;
    position: relative;
  }
 
  .top-bar {
    display:none;
  }
 
  .page-options-bottom a {
    padding: 0 5px;
  }
 
  #header h1 a {
    font-size: 120%;
  }
 
  blockquote,
  div.blockquote {
    margin: 0.5em;
  }
 
  .license-area {
    font-size: 0.85em;
  }
 
  #header {
    background-position: 0.5em 4.5em;
    background-size: 66px 66px;
  }
 
  #header h1,
  #header h2 {
    margin-left: 80px;
  }
 
  #page-content div.title {
    word-break: keep-all;
  }
 
  td.name {
    width: 15em;
  }
 
  .hub-panel.left-column,
  .hub-panel.right-column  {
    width: 99%;
    float: left;
  }
 
  #page-content div,
  #page-content div table {
    clear: both;
  }
}
 
/* Mini Tablet Media Query */
@media (min-width: 581px) and (max-width: 767px) {
 
  #side-bar {
    width: 80%;
    position: relative;
  }
 
  #main-content {
    margin: 0 3em 0 2em;
  }
 
  #header {
    max-width: 100%;
  }
 
  .top-bar {
    display: none;
  }
 
  .page-options-bottom a {
    padding: 0 6px;
  }
 
  #header h1 a {
    font-size: 140%;
  }
 
  .license-area {
    font-size: 0.9em;
  }
 
  #header {
    background-position: 1em 4em;
    background-size: 77px 77px;
  }
 
  #header h1,
  #header h2 {
    margin-left: 93px;
  }
}
 
/* Tablet Media Query */
@media (min-width: 768px) and (max-width: 979px) {
  #main-content {
    margin: 0 4em 0 24em;
  }
 
  #header,
  #top-bar #side-bar {
    max-width: 100%;
  }
 
  .top-bar li {
    margin: 0;
  }
 
  #top-bar ul li.sfhover ul li a,
  #top-bar ul li:hover ul li a {
    width: 110px;
  }
 
  .page-options-bottom a {
    padding: 0 7px;
  }
 
  #header h1 a {
    font-size: 160%;
  }
 
  .license-area {
    font-size: 0.95em;
  }
 
  #header {
    background-position: 1em 4em;
    background-size: 88px 88px;
  }
 
  #header h1,
  #header h2 {
    margin-left: 106px;
  }
 
  .hub-panel.left-column,
  .hub-panel.right-column  {
    width: 99%;
    float: left;
  }
 
  #page-content div,
  #page-content div table {
    clear: both;
  }
}
 
/* off-canvas */
 
.close-menu {
  display: none;
}
 
@media (max-width: 767px) {
 
  .page-history tbody tr td:last-child {
    width: 35%;
  }
 
  .owindow {
    min-width: 80%;
    max-width: 99%;
  }
 
  .modal-body .table,
  .modal-body .table ~ div {
    float: left;
  }
 
  .owindow .button-bar {
    float: right;
  }
 
  .owindow div .btn-primary {
    width: 100%;
    float: left;
  }
 
  .owindow div .btn-primary ~ div {
    width: 100%;
  }
 
  .yui-navset {
    z-index: 1;
  }
 
  #navi-bar,
  #navi-bar-shadow {
    display: none;
  }
 
  #main-content {
    max-width: 90%;
    margin: 0 5%;
    padding: 0;
    -webkit-transition: 0.5s ease-in-out 0.1s;
    -moz-transition: 0.5s ease-in-out 0.1s;
    -ms-transition: 0.5s ease-in-out 0.1s;
    -o-transition: 0.5s ease-in-out 0.1s;
    transition: 0.5s ease-in-out 0.1s;
  }
 
  #side-bar {
    display: block;
    position: fixed;
    top: 0;
    left: -25em;
    width: 17em;
    height: 100%;
    background-color: var(--main-bg);
    overflow-y: auto;
    z-index: 10;
    padding: 1em 1em 0 1em;
    -webkit-transition: left 0.5s ease-in-out 0.1s;
    -moz-transition: left 0.5s ease-in-out 0.1s;
    -ms-transition: left 0.5s ease-in-out 0.1s;
    -o-transition: left 0.5s ease-in-out 0.1s;
    transition: left 0.5s ease-in-out 0.1s;
  }
 
  #side-bar:after {
    content: "";
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
 
  }
 
  #side-bar:target {
    display: block;
    left: 0;
    width: 17em;
    margin: 0;
    border: 1px solid #dedede;
    z-index: 10;
  }
 
  #side-bar:target + #main-content {
    left: 0;
  }
 
  #top-bar .mobile-button a {
    position: fixed;
    top: .25em;
    left: .25em;
    z-index: 15;
    font-family: 'Nanum Gothic', sans-serif;
    font-size: 35px;
    font-weight: 700;
    width: 30px;
    height: 30px;
    line-height: .7em;
    text-align: center;
    border: .2em solid #888;
    background-color: var(--l-gray);
    color: #888;
    padding-left: 3px;
    box-shadow: 0 0 5px 3px rgba(18, 18, 18, .1);
  }
  #top-bar .mobile-button a:hover {
    text-decoration: none;
    -webkit-box-shadow: 0 0 5px 3px rgba(153, 153, 153, .5);
    -moz-box-shadow: 0 0 5px 3px rgba(153, 153, 153, .5);
    -ms-box-shadow: 0 0 5px 3px rgba(153, 153, 153, .5);
    -o-box-shadow: 0 0 5px 3px rgba(153, 153, 153, .5);
    box-shadow: 0 0 5px 3px rgba(153, 153, 153, .5);
  }
 
  #side-bar:target .close-menu {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.3) 1px 1px repeat;
    z-index: -1;
  }
}
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License