New Site Theme (Deprecated)

What is this?

nu-SCP, a new SCP CSS theme.

How do I get it on my article?

Take a look here: nuscp

---

FAQ

There's been a lot of people asking "Is this going to be the new site theme?" and an equal amount of people saying "This theme is terrible"

This wall of text here is to clear up any questions. If you see anyone else asking, direct them here.

There's a discussion on 05command about potentially replacing the site theme, sigma9, in the future. In order to do so, the site will need to have a new theme created. It does not currently have one.

nu-SCP is a new theme. However, it is not an official theme. It is not sanctioned or endorsed by any SCP Wiki staff in any official capacity. It's just being made by a few people who are tired of the current theme, which we believe is outdated and poorly-accessible to the less able, and we're trying to make a better one that uses more modern web design techniques.

Would we like to eventually propose it as the new site theme? Yes. But that's no guarantee that it's going to become the new site theme. There's competition - at least one other theme is being made, we're not the only ones. Hell, there's no guarantee that the site theme is even going to change. If it does, then we'll present nu-SCP as a candidate for selection.

Does it objectively have improvements over the current site theme, sigma9? Yes. nu-SCP has a lot of stuff going on behind the scenes to make it more accessible to users of any ability. For example, try changing the default font size in your browser settings and watch sigma9 crumble before your very eyes. That should be a thing of the past. (If your first thought on seeing it is "that's not so bad", even on mobile, then please for the love of God raise your standards!)

Is it aesthetically better? That's up to you and your opinion. We think that it is.

Is it the best CSS that's out there? No - that honour will always go to https://motherfuckingwebsite.com.

We've had our say, so now it's your turn. If you think that this theme is awful - and you're well within your right to do so - then speak up! Send a message to djkaktus, Woedenaz or Croquembouche detailing exactly what it is you don't like about the theme and how you feel it can be improved. Remember to keep the criticism policy in mind - we're making a CSS theme, we're always looking for advice and improvements but we don't like being insulted. If you wouldn't say something about a draft on the forums, then keep it to yourself.

Thanks for reading. If you've got any more questions, PM one of us and we'll get back to you when we can.

---

This theme is a work in progress.

The theme on this page is fine if you want to include it on your article. It's definitely workable.

For the latest development version of this theme, check here:

http://scptestwiki.wikidot.com/component:theme

+ show block

---

Examples

Someone upload a sample image please

A horizontal rule can be created with 4 hyphens or more "----" and extends across the whole page if it's not placed inside anything (eg a blockquote).

Titles can be created by putting between one and six plus "+" at the start of the line

[[collapsible show="+ Titles" hide="- Titles"]]

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Tabulator

This is a tab view.

The text you're currently reading is in a tab.

Tabulation

Hey look, more text here.

How quaint.

Long Tab

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

This is a blockquote, created by putting "> " at the start of each line.
More text

---

That's a horizontal rule

Nested blockquotes

This is a	table
You should know	how to make these
already

---

Codebase

@charset "utf-8";
 
@import url(https://kaktuskontainer.wdfiles.com/local--files/component%3Anewscptheme/normalize.css);
@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900,900i|PT+Sans&subset=latin-ext');
 
/*  nu-SCP
    [2019 Wikidot Theme]
    Designed by djkaktus & Woedenaz
    Built by Woedenaz & Aers & Croquembouche ft Rounderhouse
 */
 
/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */
 
/* main.css 1.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
 
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
 
html {
    color: #222;
    font-size: 1em;
    line-height: 1.5;
}
 
/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */
 
::-moz-selection {
    background: #FCB3B3;
    text-shadow: none;
}
 
::selection {
    background: #FCB3B3;
    text-shadow: none;
}
 
/*
 * A better looking default horizontal rule
 */
 
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
 
/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
 
audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}
 
/*
 * Remove default fieldset styles.
 */
 
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
 
/*
 * Allow only vertical resizing of textareas.
 */
 
textarea {
    resize: vertical;
}
 
/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */
 
.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
 
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body {
    background-color: #fcfcfc;
    background-image: linear-gradient(to top, /* creates the red part of the header */
                                      rgb(70, 30, 32) 0%,
                                      rgb(78, 0, 12) 30%,
                                      rgb(100, 3, 15) 100%),
                      linear-gradient(to bottom, /* creates the grey part of the header */
                                      rgba(0,0,0,1) 7.5rem,
                                      rgba(66,66,66,1) calc(7.5rem + 2px),
                                      rgba(66,66,66,1) calc(100% - 2px),
                                      rgba(0,0,0,1) calc(100% - 2px),
                                      rgba(0,0,0,1) 100%);
    background-size: 100% 7.5rem, 100% 9.375rem; /* 120px, 150px */
    background-repeat: no-repeat;
    color: rgb(85,85,85) !important;
}
 
p,
span,
div,
li {
    font-family: 'Lato', sans-serif;
    font-kerning: auto;
    orphans: 2;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-break: break-word;
    text-rendering: optimizeLegibility;
}
 
.code {
    background-color: #f6f6f6;
}
 
.code *,
pre * {
    font-family: 'PT Mono', 'Andale Mono', 'Courier New', Courier, monospace;
    max-width: 90vw;
    white-space: pre-wrap;
}
 
#container {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
 
#content-wrap {
    margin: 2em auto 0;
    width: inherit;
    min-height: 1300px;
    height: 100%;
    position: initial;
    display: flex;
    font-size: inherit;
}
 
h1,
#page-title {
    color: #000000;
    padding: 0 0 0.25em;
    margin: 0 0 0.6em;
    font-weight: 600;
}
 
div#container-wrap {
    background: none;
}
 
sup {
 
    vertical-align: top;
    position: relative;
    top: -0.5em;
}
 
textarea {
    line-height: 1.5;
}
 
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;
}
 
#page-title {
    border-color: #bbb;
}
 
ul {
    /* list-style-image: url(https://d3g0gp89917ko0.cloudfront.net/v--3b8418686296/common--theme/shiny/images/bullet.gif); */
    list-style: square;
}
 
#top-bar ul {
    /* list-style-image: none; /* IE ONLY! IF list-style-image IS SET */
}
 
a {
    color: rgb(218, 13, 13);
    text-decoration: none;
    background: transparent;
}
 
a.newpage {
    color: rgb(163, 204, 199);
    text-decoration: none;
    background: transparent;
}
 
a:hover {
    text-decoration: underline;
    background-color: transparent;
}
 
a:visited {
    color: #2e0000;
}
 
text-area {
    line-height: normal;
}
 
.form-control {
    width: 95%;
}
 
.title.modal-header {
    background-color: #fff;
}
 
.owindow {
    background-color: #fff;
}
 
.page-rate-widget-box {
    overflow: hidden;
    padding: 4px 0 4px 0;
    border-radius: 5px;
    background-color: #590505 !important;
}
 
/* GLOBAL WIDTH */
#header,
#top-bar {
    max-width: 980px;
    margin: 10px auto;
    font-weight: 600;
    background: none;
}
 
#header > h1 > a > span {
    position: relative;
    display: inline-table;
    width: 25rem;
    height: 5.75rem;
    z-index: 9999;
    left: -23rem;
    top: -2rem;
}
 
.mobile-top-bar {
    display: none;
    position: relative;
    left: 1em;
    bottom: 0px;
    z-index: 9999;
}
 
.mobile-top-bar > div > p {
    display: none;
}
 
.info-container .collapsible-block-link,
.info-container:hover .collapsible-block-link {
    line-height: 1.6em;
}
 
body {
    background-color: rgb(252,252,252);
    font-size: 0.90em;
    color: rgb(12,12,12);
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums;
  -moz-font-feature-settings: "onum", "kern", "liga", "clig", "calt";
  -ms-font-feature-settings: "onum", "kern", "liga", "clig", "alt";
  -webkit-font-feature-settings: "onum", "kern", "liga", "clig", "calt";
  font-feature-settings: "onum", "kern", "liga", "clig", "calt";
  text-rendering:auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* line behavior */
  orphans:2;
  -webkit-hyphens:auto;
  -moz-hyphens:auto;
  -ms-hyphens:auto;
  hyphens:auto;
  word-break:break-word;
}
 
/* HEADER */
#header {
    width: 90%;
    height: 70px;
    position: relative;
    z-index: 10;
}
 
#header h1 {
margin-top: 0.7em;
margin-bottom: -0.7em;
}
 
#header h1,
#header h2 {
    font-family: 'Lato', sans-serif !important;
    margin-left: 6.75rem;
    font-weight: 900;
    text-transform: uppercase;
}
 
#header h2 {
    margin-top: 1.5em;
    margin-bottom: -0.5em;
}
 
#header h1 a {
    font-family: 'Lato', sans-serif !important;
}
 
#header-extra-div-2 {
    content: " ";
    position: absolute;
    top: 0;
    background: url(https://kaktuskontainer.wdfiles.com/local--files/component%3Anewscptheme/logo.svg) 10px 40px no-repeat;
    background-position: center left;
    background-clip: border-box;
    background-size: contain;
    z-index: 9999;
    margin-top: 10px;
    height: 80px;
    width: 100%;
    pointer-events: none;
}
 
#search-top-box {
    display: infline-flex;
    position: absolute;
    top: 70%;
    right: -2%;
    width: 250px;
    text-align: center;
}
 
#search-top-box-input {
    border: solid 1px #000000;
    border-radius: 1px;
    color: #fff;
    background-color: #424242 !important;
}
 
#search-top-box-input:hover,
#search-top-box-input:focus {
    border: solid 1px #000;
    border-radius: 1px;
    color: #fff;
    background: #424242 !important;
}
 
#search-top-box-form input[type=submit] {
    border: solid 1px #000;
    padding: 3px 5px 2px;
    border-radius: 1px;
    font-size: 90%;
    color: #fff;
    background: #590505 !important;
    box-shadow: none !important;
    cursor: pointer;
}
 
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
    border: solid 1px #000;
    border-radius: 1px;
    color: #fff;
    text-shadow: 0 0 1px rgba(255, 255, 255, .25);
    background: #590505 !important;
    box-shadow: none !important;
}
 
#login-status {
    color: #fff;
    font-size: 90% !important;
    z-index: 10000;
    right: 1em;
    top: 1em;
}
 
#login-status a {
    background-color: transparent;
    color: #fff;
}
 
#login-status ul a {
    color: #000;
    background-color: transparent;
}
 
#account-topbutton {
    background: #C0C0C0;
    color: #000000;
}
 
.printuser img.small {
    margin-right: 1px;
}
 
#header h1 {
    max-height: 95px;
}
 
#header h1 a {
    display: block;
    content: "The SCP Foundation";
    margin: 0;
    padding: 30px 0px 0px;
    line-height: 0px;
    max-height: 0px;
    color: transparent;
    background: transparent;
    font-size: 100%;
    text-decoration: none;
    text-shadow: none;
    z-index: 9999;
}
 
#header h1 a::before {
    content: "The SCP Foundation";
    color: #fff;
    text-shadow: 1px 1px 1px #000000;
}
 
#header h2 span {
    display: block;
    padding: 30px 0px 0px;
    padding: 19px 0;
    line-height: 0px;
    max-height: 0px;
    font-weight: normal;
    color: transparent;
    text-shadow: none;
}
 
#header h2 span::before {
    content: 'Secure, Contain, Protect';
    color: #fafafa;
    text-shadow: 1px 1px 1px #000000;
    width: 100vw;
}
 
/* TOP MENU */
#top-bar {
    width: 100%;
    margin: 30px 0;
    padding: 0 0 0.25em 0;
    position: initial;
    z-index: 50;
    height: auto;
    line-height: 20px;
    font-size: 90%;
    display: inline-flex;
}
 
#top-bar ul {
    float: right;
}
 
#top-bar li {
    margin: 0;
}
 
#top-bar a {
    color: #fff;
    background: transparent;
}
 
#top-bar ul li {
    border: 0;
    position: relative;
}
 
#top-bar ul li ul {
    border: solid 1px #000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
    border-top: 0;
}
 
#top-bar ul li a {
    border-left: solid 1px rgba(64, 64, 64, .1);
    border-right: solid 1px rgba(64, 64, 64, .1);
    text-decoration: none;
    padding-top: 9px;
    padding-bottom: 10px;
    line-height: 1px;
    max-height: 1px;
    overflow: hidden;
}
 
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
    background: #C0C0C0;
    color: #000;
    border-left: solid 1px rgba(64, 64, 64, 1);
    border-right: solid 1px rgba(64, 64, 64, 1);
}
 
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
    border-width: 0;
    width: 150px;
    border-top: 1px solid #ddd;
    line-height: 160%;
    height: auto;
    max-height: none;
    padding-top: 0;
    padding-bottom: 0;
}
 
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
    background: #dedede;
}
 
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
    background: #C0C0C0;
    text-decoration: none;
}
 
#top-bar ul li ul {
    border-width: 0 1px 1px 1px;
    width: auto;
}
 
#top-bar ul li ul li,
#top-bar ul li ul li.sfhover,
#top-bar ul li ul li,
#top-bar ul li ul li:hover {
    border-width: 0;
}
 
#top-bar ul li ul li a {
    border-width: 0;
}
 
#top-bar ul li ul a,
#top-bar a:hover {
    color: #a01;
}
 
.top-bar ul li:last-of-type ul {
    right: 0;
}
 
/* Woedenaz Flex Boxes */
 
#top-bar .top-bar,
#top-bar .top-bar > ul,
#top-bar .top-bar > ul > li > ul {
    display: flex;
    z-index: 20;
}
 
#top-bar .top-bar {
    align-content: stretch;
    justify-content: space-around;
}
 
#top-bar .top-bar > ul {
    width: 90vw;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    max-width: 61.250rem;
    height: auto;
    z-index: 20;
}
 
#top-bar .top-bar > ul > li > a,
#top-bar .mobile-top-bar > ul > li > a {
    white-space: pre;
    padding-top: 1em;
}
 
#top-bar .top-bar > ul > li,
#top-bar .top-bar > ul > li > a,
#top-bar .mobile-top-bar > ul,
#top-bar .mobile-top-bar > ul > li,
#top-bar .mobile-top-bar > ul > li > a {
    width: auto;
    flex-grow: 2;
    flex-shrink: 2;
}
 
#top-bar .top-bar > ul > li > ul,
#top-bar .mobile-top-bar > ul > li > ul {
    flex-direction: column;
    margin-top: 0;
}
 
#top-bar .top-bar > ul > li > ul > li > a,
#top-bar .mobile-top-bar > ul > li > ul > li > a {
    white-space: pre-wrap;
    line-height: 140%;
    padding: 0.5em 1em !important;
}
 
/* attempt at a menu by woedenaz
 
#top-bar .top-bar > ul > li > ul {
    position: fixed;
    width: 60vw;
    top: 11em;
    left: 20vw;
    right: 0;
    flex-wrap: wrap;
    justify-content: stretch;
    align-items: stretch;
    align-content: stretch;
    font-size: 1.15em;
}
 
#top-bar ul li ul li,
#top-bar ul li ul li.sfhover,
#top-bar ul li ul li,
#top-bar ul li ul li:hover {
    position: initial;
    left: 0;
    height: auto;
    align-self: center;
    border: 1px solid rgba(48, 7, 7, 1);
    box-sizing: border-box;
    display: block;
    padding: 1.5em 1em !important;
    background: #dedede;
    flex-grow: 2;
    cursor: pointer;
}
 
#top-bar ul li.sfhover , #top-bar ul li:hover {
    background: #C0C0C0;
    text-decoration: none;
|
 
#top-bar .top-bar > ul > li > ul > li > a {
    text-align: center;
    border-top: none;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    align-self: center;
    align-items: center;
}
 */
 
/* IE7 HACK */
#top-bar ul > li > ul {
    *margin-top: -4px;
}
 
/* SIDE MENU */
#side-bar {
    clear: none;
    float: none;
    position: initial;
    width: 17em;
    padding: 2.5em 0 0 0;
    margin: 1em 0 0 1em;
    border: none;
    display: flex;
    flex-direction: column;
    background: transparent;
    flex-basis: 13.5rem;
    flex-shrink: 0.1;
}
 
#side-bar img {
    filter: hue-rotate(210deg);
    -webkit-filter: hue-rotate(210deg);
    /* Safari 6.0 - 9.0 */
    filter: brightness(120%);
    -webkit-filter: brightness(120%);
}
 
#side-bar > div:nth-child(3) {
    background-color: rgba(178, 248, 243, 0.25) !important;
}
 
#side-bar > div:nth-child(5) {
    background-color: rgba(118, 97, 80, 0.2) !important;
}
 
#side-bar > div:nth-child(6) {
    background-color: rgba(204, 104, 104, 0.15) !important;
}
 
#side-bar > div:nth-child(7) {
    background-color: rgba(163, 204, 199, 0.25) !important;
}
 
#side-bar div.side-block:nth-child(7) > div:nth-child(1) > div:nth-child(1) img {
    filter: none;
    -webkit-filter: none;
}
 
#side-bar .side-block {
    padding: 10px;
    border: 1px solid #000000;
    border-radius: 0.25vw;
    box-shadow: 0 2px 6px #c0c0c0;
    background: #fff;
    margin-bottom: 15px;
}
 
#side-bar .side-area {
    padding: 10px;
}
 
#side-bar .heading {
    color: #000000;
    border-bottom: solid 1px #000000;
    padding-left: 15px;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 8pt;
    font-weight: bold;
}
 
#side-bar p {
    margin: 0;
}
 
#side-bar div.menu-item {
    margin: 2px 0;
}
 
#side-bar div.menu-item img {
    width: 13px;
    height: 13px;
    border: 0;
    margin-right: 2px;
    position: relative;
    bottom: -2px;
}
 
#side-bar div.menu-item a {
    font-weight: bold;
}
 
#side-bar div.menu-item.inactive img {
    opacity: 0.25;
}
 
#side-bar div.menu-item.inactive a {
    color: #d20000;
}
 
#side-bar div.menu-item .sub-text {
    font-size: 80%;
    color: #d20000;
}
 
#side-bar div.menu-item.sub-item {}
 
#side-bar .collapsible-block-folded {
    background: none;
}
 
#side-bar .collapsible-block-link {
    margin-left: 15px;
    font-weight: bold;
}
 
#side-bar .collapsible-block-unfolded-link {
    border-bottom: solid 1px #000000;
}
 
#side-bar .collapsible-block-unfolded-link .collapsible-block-link {
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 8pt;
    color: #d20000;
}
 
#side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover {
    color: #b01;
    text-decoration: none;
}
 
#side-bar ul {
    list-style-type: none;
    padding: 0 5px 0;
}
 
#side-bar a:visited {
    color: #d20000;
}
 
#side-bar div.side-block:nth-child(7) > div:nth-child(1) > div:nth-child(1) img {
    filter: none;
    -webkit-filter: none;
}
 
/* CONTENT */
#main-content {
    margin: 2.5em 0 0 1em;
    padding: 1em;
    flex-basis: 47.188rem;
    max-width: 47.188rem
}
 
/* ACTUALLY HIDE HIDDEN TAGS */
#main-content .page-tags a[href^="/system:page-tags/tag/_"] {
    display: none;
}
 
#breadcrumbs {
    margin: -1em 0 1em;
    font-weight: 85%;
}
 
/* YUI-TABS */
.yui-navset .yui-content {
    background-color: #f5f5f5;
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background-color: #d8d8d8;
    background-image: url(https://d3g0gp89917ko0.cloudfront.net/v--3b8418686296/common--theme/shiny/images/yuitabs.png);
}
 
.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 {
    /* no hover effect for selected */
    background: #700 url(https://d3g0gp89917ko0.cloudfront.net/v--3b8418686296/common--theme/shiny/images/yuitabs.png) repeat-x left -1400px;
    /* selected tab background */
    color: #fff;
}
 
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background: #d88 url(https://d3g0gp89917ko0.cloudfront.net/v--3b8418686296/common--theme/shiny/images/yuitabs.png) repeat-x left -1300px;
    text-decoration: none;
}
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border-color: #444;
}
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border-color: #444;
}
 
.yui-navset li {
    line-height: normal;
}
 
.footnote-footer {
    padding-bottom: 1em;
}
 
/* 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: #fff;
    background: transparent;
}
 
/* SOME NICE BOXES */
div.sexy-box {
    background: #eee;
    border: 1px solid #ccc;
    padding: 0 10px 12px;
    margin: 7px 4px 12px;
    overflow: hidden;
}
 
div.sexy-box div.image-container img {
    margin: 5px;
    padding: 2px;
    border: 1px solid #999;
}
 
/* Custom page content classes */
#page-content {
    min-height: 720px;
    max-width: 90vw;
}
 
.unmargined > p {
    margin: 0;
    line-height: 100%;
}
 
.content-panel {
    border: solid 1px #888880;
    border-radius: 10px;
    background-color: #999990;
    margin: 10px 0 15px;
    box-shadow: 3px 3px 6px #bbb;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.3), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 30px rgba(0, 0, 0, 0.1);
}
 
.content-panel.standalone {
    background: #fcfdfb;
}
 
.content-panel.series {
    padding: 0 20px;
    margin-bottom: 20px;
}
 
.content-panel.centered {
    text-align: center;
}
 
.content-panel.left-column {
    float: left;
    width: 48%;
}
 
.content-panel.right-column {
    float: right;
    width: 48%;
}
 
.content-panel .panel-heading {
    padding: 2px 10px;
    color: #ffffff;
    font-size: 90%;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .35);
}
 
.content-panel .panel-heading > p,
.content-panel .panel-footer > p {
    margin: 0;
}
 
.content-panel .panel-body {
    padding: 5px 10px;
    background: #C0C0C0;
}
 
.content-panel .panel-footer {
    padding: 1px 10px;
    color: #C0C0C0;
    font-size: 80%;
    font-weight: bold;
    text-align: right;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
}
 
.content-panel .panel-footer a {
    color: #C0C0C0;
}
 
.content-panel .content-toc {
    float: right;
    padding: 0 20px;
    background-color: #C0C0C0;
    border: solid 1px #ccc;
    border-radius: 10px;
    margin: 20px 0 5px 5px;
    white-space: nowrap;
    box-shadow: inset 1px 2px 6px rgba(0, 0, 0, .15)
}
 
.alternate:nth-child(even) {
    background-color: rgba(255, 255, 255, .9);
}
 
/* Page Rating Module Customizations */
.page-rate-widget-box {
    display: inline-block;
    border-radius: 0px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
    margin-bottom: 10px;
    margin-right: 2em;
}
 
.page-rate-widget-box .rate-points {
    background-color: #590505 !important;
    border: solid 1px #000;
    border-right: 0;
    border-radius: 0px;
    color: #fff;
}
 
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: #590505;
    border-top: solid 1px #000;
    border-bottom: solid 1px #000;
    font-weight: bold;
}
 
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    background-color: #590505;
    color: #fff;
    padding: 0 4px;
    margin: 0 1px;
}
 
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
    background-color: #6c1616;
    color: #fff;
    text-decoration: none;
}
 
.page-rate-widget-box .cancel {
    background-color: #590505;
    border: solid 1px #000;
    border-left: 0;
    border-radius: 0px;
}
 
.page-rate-widget-box .cancel a {
    background: transparent;
    text-transform: uppercase;
    color: #fff;
}
 
.page-rate-widget-box .cancel a:hover {
    border-radius: 0 3px 3px 0;
    background-color: #6c1616;
    color: #fff;
    text-decoration: none;
}
 
/* Heritage Collection Rating Module */
.heritage-rating-module {
    display: inline-block;
    background-color: #633;
    padding: 2px 8px 2px 5px;
    border: solid 1px #ccc066;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    margin-right: 2em;
    margin-bottom: 10px;
}
 
.heritage-rating-module .page-rate-widget-box {
    box-shadow: none;
    margin-bottom: 0;
    margin-right: 0;
}
 
.heritage-rating-module .heritage-emblem {
    float: left;
    position: relative;
    top: -2px;
    left: 2px;
    height: 16px;
    width: 16px;
    overflow: visible;
    margin-right: 2px;
}
 
.heritage-rating-module .heritage-emblem img {
    width: 20px;
    height: 20px;
    border: 0;
}
 
/* Fixes for multi-line page tags */
 
#main-content .page-tags {
    margin: 1em 0 0;
    padding: 0;
}
 
#main-content .page-tags span {
    display: inline-block;
    padding: 0;
    max-width: 60%;
}
 
#main-content .page-tags a {
    display: inline-block;
    white-space: nowrap;
}
 
/* Standard Image Block */
.scp-image-block {
    border: solid 1px #000;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
    width: 300px;
}
 
.scp-image-block.block-right {
    float: right;
    clear: right;
    margin: 0 2em 1em 2em;
}
 
.scp-image-block.block-left {
    float: left;
    clear: left;
    margin: 0 2em 1em 0;
}
 
.scp-image-block.block-center {
    margin-right: auto;
    margin-left: auto;
}
 
.scp-image-block img {
    border: 0;
    min-width: 100%
}
 
.scp-image-block {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    min-width: 100%;
}
 
.scp-image-caption {
    min-width: 100%;
}
 
.scp-image-block .scp-image-caption {
    background-color: #C0C0C0;
    border-top: solid 1px #000;
    padding: 2px 0;
    font-size: 80%;
    font-weight: bold;
    text-align: center;
}
 
.scp-image-block > p {
    margin: 0;
}
 
.scp-image-block .scp-image-caption > p {
    margin: 0;
    padding: 0 10px;
}
 
div.block-right,
div.block-left {
    min-width: 20%;
}
 
/* Wikiwalk Navigation */
.footer-wikiwalk-nav {
    font-weight: bold;
    font-size: 75%;
}
 
/* Forum Customizations */
.forum-thread-box .description-block {
    padding: .5em 1em;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .15),
        inset 0 1px 0 rgba(255, 255, 255, .8),
        inset 0 10px 5px rgba(255, 255, 255, .25),
        inset 0 -15px 30px rgba(0, 0, 0, .1)
}
 
.thread-container .post .head {
    padding: 0.5em 1em;
    background-color: #eee;
    background: linear-gradient(to right, #eee, #eeecec);
    box-shadow: inset 2px 3px 6px rgba(0, 0, 0, .15);
    border-radius: 5px 5px 0 0;
}
 
/* Hide Forum Signatures */
.signature {
    display: none !important;
}
 
/* Ruby by Nanimono Demonai */
 
.ruby,
ruby {
    display: inline-table;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
    height: 1em;
    vertical-align: text-bottom;
}
 
.rt,
rt {
    display: table-header-group;
    font-size: 0.6em;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}
 
/* Keycap */
 
.keycap {
    border: 1px solid;
    border-color: #ddd #bbb #bbb #ddd;
    border-bottom-width: 2px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-color: #f9f9f9;
    padding: 1px 3px;
    font-family: inherit;
    font-size: 0.85em;
    white-space: nowrap;
}
 
/* tag style */
 
.tags {
    display: inline-block;
    margin: 0 0 0 5px;
    padding: 3px 5px 3px 0px;
    height: 13px;
    line-height: 13px;
    font-size: 11px;
    background: #666;
    color: #fff;
    text-decoration: none;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
}
 
.tags:before {
    content: "";
    padding: 0px 1px 3px 1px;
    float: left;
    position: relative;
    top: -3px;
    left: -10px;
    width: 0;
    height: 0;
    border-color: transparent #666 transparent transparent;
    border-style: solid;
    border-width: 8px 8px 8px 0px;
}
 
.tags:after {
    content: "";
    position: relative;
    top: 4.5px;
    left: -8px;
    float: left;
    width: 4px;
    height: 4px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background: #fff;
    -moz-box-shadow: -1px -1px 2px #004977;
    -webkit-box-shadow: -1px -1px 2px #333;
    box-shadow: -1px -1px 2px #333;
}
 
/* Display Black Block by Nanimono Demonai */
.bblock {
    color: #000000;
    background-color: #000000;
    transition: 2s;
    text-decoration: none;
}
 
.bblock:hover {
    background-color: #000000;
    color: #006600;
    text-decoration: none;
}
 
.dblock {
    color: #000000;
    background-color: #000000;
    transition: 2s;
    text-decoration: none;
}
 
.dblock:hover {
    background-color: transparent;
    text-decoration: none;
}
 
/*
    2011-11-13 Minobe Hiroyuki @ Marguerite Site
    www.marguerite.jp/Nihongo/WWW/CSSTips/EmphasizeDots-CSS3.html
    Edited for the SCP Foundation by Nanimono_Demonai
*/
 
.emph {
    text-emphasis-style: dot;
    -webkit-text-emphasis-style: dot;
}
 
/* For FireFox */
@-moz-document url-prefix() {
    .emph {
        /* For the environments which comply with CSS3. */
        font-family: monospace;
        font-style: normal;
        font-weight: normal;
        background-image: url(https://kaktuskontainer.wdfiles.com/local--files/component%3Atheme/dot.png), none;
        background-repeat: repeat-x;
        padding: 0.5em 0 0;
        background-color: transparent;
        background-clip: padding-box, content-box;
        background-size: 1em 1.3em, auto;
    }
}
 
/* For IE10 */
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    .emph {
        /* For the environments which comply with CSS3. */
        font-family: monospace;
        font-style: normal;
        font-weight: normal;
        background-image: url(https://kaktuskontainer.wdfiles.com/local--files/component%3Atheme/dot.png), none;
        background-repeat: repeat-x;
        padding: 0.5em 0 0;
        background-color: transparent;
        background-clip: padding-box, content-box;
        background-size: 1em 1.3em, auto;
    }
}
 
/* viewport */
 
@viewport {
    width: device-width;
    zoom: 1.0;
}
 
/* IE viewport */
@-ms-viewport {
    width: device-width;
    zoom: 1.0;
}
 
/* opera viewport */
@-o-viewport {
    width: device-width;
    zoom: 1.0;
}
 
/* chrome viewport - maybe it isn't work... */
@-webkit-viewport {
    width: device-width;
    zoom: 1.0;
}
 
/* firefox viewport - maybe it isn't work too... */
@-moz-viewport {
    width: device-width;
    zoom: 1.0;
}
 
/* webkit scrollbar */
::-webkit-scrollbar {
    width: 9px;
    /* for vertical scrollbars */
    height: 9px;
    /* for horizontal scrollbars */
    border: solid 1px rgba(0, 0, 0, 0.1);
    border-round: 0.5px;
}
 
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}
 
::-webkit-scrollbar-thumb {
    background: rgba(175, 175, 175, 0.4);
}
 
.page-source {
    word-break: break-all;
}
 
/* Responsive Web Design */
img,
embed,
video,
object,
iframe,
table {
    max-width: 100%;
}
 
#page-content div,
#page-content div table {
    max-width: 100%;
}
 
#edit-page-comments {
    width: 100%;
}
 
/* Phones */
 
@media (max-width: 767px)  {
    html {
        overflow-x: hidden;
    }
 
    #search-top-box-input {
        display: none;
    }
 
    #page-content {
        font-size: 0.9em;
    }
 
    #main-content {
        margin: 0;
    }
 
    #recent-posts-category {
        width: 100%;
    }
 
    #header,
    .mobile-top-bar {
        max-width: 90vw;
    }
    #search-top-box {
        display: none;
    }
 
    .top-bar {
        display: none !important;
    }
 
    .mobile-top-bar {
        top: 15px;
        display: flex;
        position: relative;
        padding: 0;
        width: 100vw;
        left: -2vw;
    }
 
    .mobile-top-bar > div > p {
        display: block
    }
 
    .page-options-bottom a {
        padding: 0 4px;
    }
 
    blockquote {
        margin: 1em 0;
    }
 
    .license-area {
        font-size: 0.8em;
    }
 
    .page-history tbody tr td:last-child {
        width: 35%;
        font-side: 1.5rem;
    }
 
    #header h1 {
        font-size: 1.4em;
        margin-top: 1em !important;
        margin-bottom: -1em !important;
    }
 
    #header h1 a::before {
        max-width: 69vw;
    }
    #header h2 {
        margin-top: 1.4em !important;
        margin-bottom: -1.5em !important;
    }
 
    #header h1,
    #header h2 {
        margin-left: 5.75rem;
        max-width: 69vw;
    }
 
    #header h2 span::before {
        display: inline-block;
        width: 69vw;
    }
 
    #header > h1 > a > span {
    top: -3.2rem;
    left: -6rem;
    max-width: 91vw;
    margin-right: -23vw;
    }
 
    #login-status {
        font-size: 70%;
    }
 
    .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;
    }
 
    .open-menu a {
        position: fixed;
        top: 18.5vh;
        left: 88vw;
        z-index: 150;
        font-family: 'Nanum Gothic', san-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888 !important;
        background-color: #fff !important;
        border-radius: 3em;
        color: #888 !important;
    }
 
    .open-menu a:hover {
        text-decoration: none !important;
        -webkit-box-shadow: 0px 0px 20px 3px rgba(153, 153, 153, 1);
        -moz-box-shadow: 0px 0px 20px 3px rgba(153, 153, 153, 1);
        -ms-box-shadow: 0px 0px 20px 3px rgba(153, 153, 153, 1);
        -o-box-shadow: 0px 0px 20px 3px rgba(153, 153, 153, 1);
        box-shadow: 0px 0px 20px 3px rgba(153, 153, 153, 1);
    }
 
    #main-content {
        max-width: 90vw;
        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 {
        width: 80%;
        display: block;
        position: fixed;
        top: 0;
        left: -25em;
        width: 17em;
        height: 100%;
        background-color: rgb(184, 134, 134);
        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;
    }
 
    #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;
    }
 
        #login-status {
            font-size: 70%;
        }
 
        table.form td,
        table.form th {
            float: left;
        }
 
        /*
        td.title {
            width: 30%;
        }
        */
 
        td.name {
            width: 15em;
        }
 
        table.form td,
        table.form th {
            padding: 0;
        }
 
        #edit-page-title {
            max-width: 90%;
        }
 
        .content-panel.left-column,
        .content-panel.right-column {
            width: 99%;
            float: left;
        }
 
        #page-content div,
        #page-content div table {
            clear: both;
        }
 
        #page-content div.title {
            word-break: keep-all;
        }
 
        #content-wrap {
            margin: 3.5em auto 0;
        }
 
}
 
@media (max-width: 450px) {
        div.block-right,
        div.block-left {
                min-width: 100%;
                margin: 0 auto;
        }
}
 
/* ==========================================================================
   Helper classes
   ========================================================================== */
 
/*
 * Hide visually and from screen readers
 */
 
.hidden {
    display: none !important;
}
 
/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
 
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
    /* 1 */
}
 
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
 
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}
 
/*
* Hide visually and from screen readers, but maintain layout
*/
 
.invisible {
    visibility: hidden;
}
 
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/
 
.clearfix:before,
.clearfix:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
}
 
.clearfix:after {
    clear: both;
}
 
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
 
@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}
 
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}
 
/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
 
@media print {
 
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        /* Black prints faster */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
 
    a,
    a:visited {
        text-decoration: underline;
    }
 
    a[href]:after {
        content: " ("attr(href) ")";
    }
 
    abbr[title]:after {
        content: " ("attr(title) ")";
    }
 
    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
 
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }
 
    pre {
        white-space: pre-wrap !important;
    }
 
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
 
    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */
 
    thead {
        display: table-header-group;
    }
 
    tr,
    img {
        page-break-inside: avoid;
    }
 
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }
 
    h2,
    h3 {
        page-break-after: avoid;
    }
}

[[/collapsible]]