Site Theme (SCP-Sigma-9)

NOTICE:

This is a component page used internally by the SCP Wiki. It is intended to be used and included on other pages.

This page has been deprecated and is kept up for reference purpose. To see the latest version of the site theme, see here.

This is the custom theme file for the SCP Wiki.

The source code is hosted on GitHub: https://github.com/scpwiki/sigma9.


Instructions for English Language Sandboxes

For sandboxes or other sites seeking to mimic the styling of SCP-EN, you should not copy your own version of Sigma-9. As updates to the theme occur, your version will drift out of sync with the mainsite theme, and present problems for your users.

Instead you should set up a theme to mirror the theme code here:

  1. Create a page named "component:theme" on your site. You should lock this page.
  2. In the Site Manager for your site, go to Appearances & Behavior, Themes, then select the External tab, and enter "https://your-site-name.wdfiles.com/local--code/component:theme/1".
  3. Copy the Side Bar and/or Top Bar if you wish to use the new format for those. Note that the bullet icons are attached to the side bar page as well.
  4. Copy the Front Page template, including attached files.
  5. To activate the mobile view, go to any page on your wiki and click "+ Options" at the bottom.
  6. Click "Edit Meta"
  7. Click "Add a new meta tag". For name, use "viewport" (without quotes) and for content use "width=device-width, initial-scale=1.0" (again, without quotes).

Contents for your "component:theme" page:

[[code type="css"]]
@import url("https://scp-wiki.wdfiles.com/local--code/component%3Atheme/1");
[[/code]]

Within the code block, you may include custom styling meant for your sandbox, such as a different header image.

See https://scp-sandbox-3.wikidot.com/component:theme as an example for how this is implemented.

Instructions for SCP Translation Sites

To use this theme for your Wikidot site, please follow these instructions:

  1. From the files attached to this page, copy "body_bg.png", "font-bauhaus.css", "logo.png" and "panel-bg-gradient-reverse.png".
  2. Create a page named "component:theme" on your site. You should lock this page.
  3. Upload all copied files to that page.
  4. Copy the code on this page to your "component:theme" page. Rename all "https://scp-wiki.wdfiles.com" instances with the equivalent for your Wikidot site URL.
  5. In the Site Manager for your site, go to Appearances & Behavior, Themes, then select the External tab, and enter "https://your-site-name.wdfiles.com/local--code/component:theme/1".
  6. Copy the Side Bar and/or Top Bar if you wish to use the new format for those. Note that the bullet icons are attached to the side bar page as well.
  7. Copy the Front Page template, including attached files.
  8. To activate the mobile view, go to any page on your wiki and click "+ Options" at the bottom.
  9. Click "Edit Meta"
  10. Click "Add a new meta tag". For name, use "viewport" (without quotes) and for content use "width=device-width, initial-scale=1.0" (again, without quotes).
  11. Profit!

You can now tweak the theme as necessary for your site. Remember to update it with EN Sigma-9 from time to time. If you wish to mirror the code instead, follow the instructions in the "English Language Sandbox" section above.

For more information, see How to create a branch of the SCP-Foundation.


/*
    SCP Sigma 9
    [2014 Wikidot Theme]
    Created for the SCP Foundation by Aelanna
    Edited for SCP Foundation by Dr Devan
*/
 
@charset "utf-8";
 
@import url('https://scp-wiki.wdfiles.com/local--files/component%3Atheme/font-bauhaus.css');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
 
/* COMMON */
#content-wrap {
    position: relative;
    margin: 2em auto 0;
    max-width: 1040px;
    min-height: 1300px;
    height: auto;
}
 
h1, #page-title {
    color: #901;
    padding: 0 0 .25em;
    margin: 0 0 .6em;
    font-weight: normal;
}
 
h1 {
    margin-top: .7em;
    padding: 0;
    font-weight: bold;
}
 
h2, h3, h4, h5, h6 {
    margin: .5em 0 .4em;
    padding: 0;
    letter-spacing: 1px;
}
 
#page-title {
    border-color: #bbb;
}
 
.meta-title {
    border-bottom: solid 1px #bbb;
    color: #901;
    font-weight: normal;
    margin: 0 0 .6em;
    padding: 0 0 .25em;
    font-size: 200%;
}
 
.meta-title p {
    margin: 0;
}
 
ul {
    list-style: square;
}
 
li, p {
    line-height: 141%;
}
 
a {
    color: #b01;
    text-decoration: none;
    background: transparent;
}
 
a:visited {
    color: #824;
}
 
a:hover {
    text-decoration: underline;
    background-color: transparent;
}
 
#side-bar a:visited,
#interwiki a:visited {
    color: #b01;
}
 
a.newpage {
    color: #d61;
    text-decoration: none;
    background: transparent;
}
 
.form-control {
    width: 95%;
}
 
/* GLOBAL WIDTH */
#header, #top-bar {
    width: 90%;
    max-width: 980px;
    margin: 0 auto;
}
 
.mobile-top-bar {
    display: none;
    position: absolute;
    left: 1em;
    bottom: 0;
    z-index: 0;
}
 
body {
    background-color: #fff;
    font-size: .8em;
    color: #333;
}
 
#interwiki body {
    background-color: transparent;
}
 
div#container-wrap {
    background: url('https://scp-wiki.wdfiles.com/local--files/component:theme/body_bg.png') top left repeat-x;
}
 
sup {
    vertical-align: top;
    position: relative;
    top: -.5em;
}
 
/* HEADER */
#header {
    height: 140px;
    position: relative;
    z-index: 10;
    padding-bottom: 22px; /* FOR MENU */
    background: url('https://scp-wiki.wdfiles.com/local--files/component:theme/logo.png') 10px 40px no-repeat;
    background-size: 100px;
    background-position: 10px 64%;
}
 
#search-top-box {
    position: absolute;
    top: 79px;
    right: 9px;
    width: 250px;
    text-align: right;
}
 
/*
 * Commenting out the search box at the top while native
 * Wikidot search remains non-functional.
 *
 
#search-top-box-input {
    border: solid 1px #999;
    border-radius: 5px;
    color: #ccc;
    background-color: #300;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .5);
}
 
#search-top-box-input:hover,
#search-top-box-input:focus {
    border: solid 1px #fff;
    color: #fff;
    background-color: #633;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .8);
}
*/
 
#search-top-box-input {
    display: none;
}
 
#search-top-box-form input[type='submit'] {
    border: solid 1px #999;
    border-radius: 5px;
    padding: 2px 5px;
    font-size: 90%;
    font-weight: bold;
    color: #ccc;
    background-color: #633;
    background-image: linear-gradient(to bottom, #966, #633, #300);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    cursor: pointer;
}
 
#search-top-box-form input[type='submit']:hover,
#search-top-box-form input[type='submit']:focus {
    border: solid 1px #fff;
    color: #fff;
    text-shadow: 0 0 1px rgba(255, 255, 255, .25);
    background-color: #966;
    background-image: linear-gradient(to bottom, #c99, #966, #633);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
 
#login-status {
    color: #aaa;
    font-size: 90%;
    z-index: 30;
}
 
#login-status a {
    background: transparent;
    color: #ddd;
}
 
#login-status ul a {
    color: #700;
    background: transparent;
}
 
#account-topbutton {
    background: #ccc;
    color: #700;
}
 
.printuser img.small {
    margin-right: 1px;
}
 
#header h1 {
    margin-left: 120px;
    padding: 0;
    float: left;
    max-height: 95px;
}
 
#header h2 {
    margin-left: 120px;
    padding: 0;
    clear: left;
    float: left;
    font-size: 105%;
    max-height: 38px;
}
 
#header h1 a {
    display: block;
    margin: 0;
    padding: 80px 0 25px;
    line-height: 0px;
    max-height: 0;
    color: #eee;
    background: transparent;
    font-family: BauhausLTDemi, 'Nanum Gothic', Arial, sans-serif;
    font-size: 180%;
    text-decoration: none;
    text-shadow: 3px 3px 5px #000;
    letter-spacing: .9px;
}
 
#header h2 span {
    display: block;
    margin: 0;
    padding: 19px 0;
    line-height: 0px;
    max-height: 0;
    font-weight: bold;
    color: #f0f0c0;
    text-shadow: 1px 1px 1px #000;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
}
 
/* TOP MENU */
#top-bar {
    position: absolute;
    top: 140px;
    height: 21px;
    width: 100%;
    line-height: 18px;
    padding: 0;
    margin: 0 auto;
    z-index: 20;
    font-size: 90%;
}
 
#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 #666;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
    border-top: 0;
    border-width: 0 1px;
    width: auto;
}
 
#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: 0 min(.75vw, 1em);
    line-height: 21px;
}
 
#top-bar .top-bar > ul > li > a,
#top-bar .mobile-top-bar > ul > li > a {
    font-weight: bold;
}
 
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
    background: #eee;
    color: #a01;
    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:hover,
#top-bar ul li:hover a:hover {
    background: #fff;
    text-decoration: none;
}
 
#top-bar ul li ul li,
#top-bar ul li ul li.sfhover,
#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;
}
 
/* SIDE MENU */
#side-bar {
    clear: none;
    float: none;
    position: absolute;
    top: .5em;
    left: 2em;
    width: 17em;
    padding: 0;
    border: none;
    display: block;
    overscroll-behavior: none;
}
 
#interwiki .side-block {
    margin: 5px;
}
 
#side-bar .side-block,
#interwiki .side-block {
    padding: 10px;
    border: 1px solid #600;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(102, 0, 0, .5);
    background: #fff;
    margin-bottom: 15px;
}
 
#side-bar .side-block.media {
    background: #e5e5ff;
}
 
#side-bar .side-block.resources {
    background: #e7f7e9; /* Changed from #fff0f0 */
}
 
#side-bar .side-area {
    padding: 10px;
}
 
#side-bar .heading,
#interwiki .heading {
    color: #600;
    border-bottom: solid 1px #600;
    padding-left: 15px;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 8pt;
    font-weight: bold;
}
 
#side-bar p,
#interwiki p {
    margin: 0;
}
 
#side-bar .menu-item,
#interwiki .menu-item {
    margin: 2px 0;
}
 
#side-bar .menu-item.small {
    font-size: 90%; /* For sidebar item with smaller text, like SCP series links */
}
 
#side-bar .menu-item img,
#interwiki .menu-item img {
    width: 13px;
    height: 13px;
    border: 0;
    margin-right: 2px;
    position: relative;
    bottom: -2px;
}
 
#side-bar .menu-item a,
#interwiki .menu-item a {
    font-weight: bold;
}
 
#side-bar .menu-item.inactive img {
    opacity: .25;
}
 
#side-bar .menu-item.inactive a {
    color: #999;
}
 
#side-bar .menu-item .sub-text {
    font-size: 80%;
    color: #666;
}
 
#side-bar .collapsible-block-link {
    margin-left: 0;
    font-weight: bold;
}
 
#side-bar .collapsible-block-unfolded-link {
    border-bottom: solid 1px #600;
}
 
#side-bar .collapsible-block-unfolded-link .collapsible-block-link {
    margin-top: 10px;
    margin-bottom: 5px;
    margin-left: 15px;
    font-size: 8pt;
    color: #600;
}
 
#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;
}
 
/* off-canvas */
.close-menu {
    display: none;
}
 
/* side bar mobile query on their own */
@media (max-width: 767px) {
    #top-bar .open-menu a {
        position: fixed;
        top: .5em;
        left: .5em;
        z-index: 15;
        font-family: 'Nanum Gothic', sans-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: .9em;
        text-align: center;
        border: .2em solid #888;
        background-color: #fff;
        border-radius: 3em;
        color: #888;
    }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
        -webkit-box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1);
        box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1);
    }
 
    #side-bar {
        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;
        -webkit-transition: left .5s ease-in-out .1s;
        -o-transition: left .5s ease-in-out .1s;
        transition: left .5s ease-in-out .1s;
    }
 
    #side-bar::after {
        content: '';
        position: absolute;
        top: 0;
        width: 0;
        height: 100%;
        background-color: rgba(0, 0, 0, .2);
    }
 
    #side-bar:target {
        left: 0;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .3) 1px 1px repeat;
        z-index: -1;
    }
}
 
/* CONTENT */
#main-content {
    margin: 0 2em 0 22em;
    padding: 1em;
    position: relative;
}
 
/* ACTUALLY HIDE HIDDEN TAGS */
#main-content .page-tags a[href^='/system:page-tags/tag/_'] {
    display: none;
}
 
#breadcrumbs {
    margin: -1em 0 1em;
}
 
.pseudocrumbs {
    margin: -1em 0 1em;
}
 
/* 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 li {
    line-height: normal;
}
 
/* 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;
}
 
.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, .5),
        inset 0 1px rgba(255, 255, 255, .3),
        inset 0 10px rgba(255, 255, 255, .2),
        inset 0 10px 20px rgba(255, 255, 255, .25),
        inset 0 -15px 30px rgba(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: #fff;
    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: #fff9f0 url('https://scp-wiki.wdfiles.com/local--files/component:theme/panel-bg-gradient-reverse.png') bottom repeat-x;
}
 
.content-panel .panel-footer {
    padding: 1px 10px;
    color: #fffff0;
    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: #fff;
}
 
.content-panel .content-toc {
    float: right;
    padding: 0 20px;
    background-color: #fff;
    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: 5px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
    margin-bottom: 10px;
    margin-right: 2em;
}
 
/* Has increased specificity to override action-area rate's stylesheet */
div.page-rate-widget-box .rate-points {
    background-color: #633;
    border: solid 1px #633;
    border-right: 0;
    border-radius: 5px 0 0 5px;
}
 
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: #fff6f0;
    border-top: solid 1px #633;
    border-bottom: solid 1px #633;
    font-weight: bold;
}
 
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    background: transparent;
    color: #633;
    padding: 0 4px;
    margin: 0 1px;
}
 
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
    background: #633;
    color: #fffff0;
    text-decoration: none;
}
 
.page-rate-widget-box .cancel {
    background-color: #633;
    border: solid 1px #633;
    border-left: 0;
    border-radius: 0 5px 5px 0;
}
 
.page-rate-widget-box .cancel a {
    background: transparent;
    text-transform: uppercase;
    color: #966;
}
 
.page-rate-widget-box .cancel a:hover {
    border-radius: 0 3px 3px 0;
    background: #633;
    color: #fffff0;
    text-decoration: none;
}
 
/* 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 #666;
    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;
}
 
.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;
    width: 300px;
}
 
.scp-image-block .scp-image-caption {
    background-color: #eee;
    border-top: solid 1px #666;
    padding: 2px 0;
    font-size: 80%;
    font-weight: bold;
    text-align: center;
    width: 300px;
}
 
.scp-image-block > p {
    margin: 0;
}
 
.scp-image-block .scp-image-caption > p {
    margin: 0;
    padding: 0 10px;
}
 
/* Collapsible Link */
#page-content a.collapsible-block-link {
    overflow-wrap: anywhere;
}
 
/* Wikiwalk Navigation */
.footer-wikiwalk-nav {
    font-weight: bold;
    font-size: 75%;
}
 
/* Licensebox */
.licensebox .collapsible-block-link {
    margin-left: .25em;
    padding: .25em;
    font-weight: bold;
    opacity: .5;
    color: inherit;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}
 
.licensebox .collapsible-block-link:hover,
.licensebox .collapsible-block-link:active {
    opacity: 1;
}
 
/* 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: .5em 1em;
    background-color: #eee;
    background-image: linear-gradient(to right, #eee, #eeecec);
    box-shadow: inset 2px 3px 6px rgba(0, 0, 0, .15);
    border-radius: 5px 5px 0 0;
}
 
/* Adding Forum Lines */
.post-container .post-container {
    border-left: 2px solid rgba(0, 0, 0, .25);
    padding-left: .75rem;
}
 
/* Hide Forum Signatures */
.signature {
    display: none !important;
}
 
/* Hide Avatar Hover */
#avatar-hover-container {
    display: none;
}
 
/* 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: .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: .85em;
    white-space: nowrap;
}
 
/* tag style */
.tags {
    display: inline-block;
    margin: 0 0 0 5px;
    padding: 3px 5px 3px 0;
    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: 0 1px 3px;
    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 0;
}
 
.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: #000;
    background-color: #000;
    transition: 2s;
    text-decoration: none;
}
 
.bblock:hover {
    background-color: #000;
    color: #060;
    text-decoration: none;
}
 
.dblock {
    color: #000;
    background-color: #000;
    transition: 2s;
    text-decoration: none;
}
 
.dblock:hover {
    background-color: transparent;
    text-decoration: none;
}
 
/* Blockquote Mimic Div */
div.blockquote {
    border: 1px dashed #999;
    background-color: #f4f4f4;
    padding: 0 1em;
    margin: 1em 3em;
}
 
div.curved {
    border-radius: 10px;
    margin: 1em 3em;
}
 
@media (max-width: 479px) {
    blockquote,
    div.blockquote,
    div.curved {
        margin: 1em 0;
    }
}
 
@media (min-width: 480px) and (max-width: 580px) {
    blockquote,
    div.blockquote,
    div.curved {
        margin: .5em;
    }
}
 
/* Fix revision list */
.changes-list-item td.title {
    min-width: 40%;
}
 
.changes-list-item .flags {
    text-align: center;
    width: 2em;
}
 
.changes-list-item .mod-date {
    text-align: center;
}
 
.changes-list-item .mod-by {
    width: 10em;
}
 
@media (max-width: 435px) {
    .changes-list-item .revision-no {
        display: 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;
}
 
/* webkit scrollbar */
::-webkit-scrollbar {
    width: 9px; /* for vertical scrollbars */
    height: 9px; /* for horizontal scrollbars */
    border: solid 1px rgba(0, 0, 0, .1);
}
 
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .1);
}
 
::-webkit-scrollbar-thumb {
    background: rgba(50, 50, 50, .3);
}
 
.page-source {
    word-break: break-all;
}
 
/* Responsive Web Design */
img, embed, video, object, iframe, table {
    max-width: 100%;
}
 
:where(#page-content) div {
    max-width: 100%;
}
 
#edit-page-comments {
    width: 100%;
}
 
@media (max-width: 767px) {
    #main-content {
        max-width: 90%;
        margin: 0 5%;
        padding: 0;
        -webkit-transition: .5s ease-in-out .1s;
        -o-transition: .5s ease-in-out .1s;
        transition: .5s ease-in-out .1s;
    }
 
    span, a {
        overflow-wrap: break-word;
    }
 
    .page-history tbody tr td:last-child {
        width: 35%;
    }
 
    td.name {
        width: 15em;
    }
 
    .yui-navset {
        z-index: 1;
    }
 
    #navi-bar, #navi-bar-shadow {
        display: none;
    }
 
    .page-options-bottom a {
        padding: 0 5px;
    }
 
    .license-area {
        font-size: .9em;
    }
 
    /* owindow */
    .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;
    }
 
    .owindow div .btn-primary ~ div {
        width: 100%;
    }
 
    /* header area and top bar */
    #header {
        max-width: 90%;
        background-size: calc(48px + 5%);
        background-position: 8px 64%;
    }
 
    #header h1, #header h2 {
        margin-left: calc(48px + 8%);
    }
 
    #header h1 a {
        font-size: calc(75% + 2vw);
    }
 
    #search-top-box-input {
        width: 7em;
    }
 
    .top-bar {
        display: none;
    }
 
    .mobile-top-bar {
        display: block;
    }
 
    .mobile-top-bar ul li:last-of-type ul {
        right: 0;
    }
}
 
@media (max-width: 479px) {
    #search-top-box-input {
        display: none;
    }
 
    #page-content {
        font-size: .9em;
    }
 
    #recent-posts-category {
        width: 100%;
    }
 
    .page-options-bottom a {
        padding: 0 4px;
    }
 
    .license-area {
        font-size: .8em;
    }
 
    table.form td, table.form th {
        float: left;
        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;
    }
}
 
div.scpnet-interwiki-wrapper {
    margin: 0 -5px;
}
 
iframe.scpnet-interwiki-frame {
    height: 0;
    border: none;
}
 
/* Content Warning for adult content */
div#u-adult-warning {
    width: fit-content;
    margin: 0 auto 20px;
    padding: .5rem 1rem;
    border: 3px solid #333;
    background: #e4e4e4;
    color: #333;
    text-align: center;
    font-weight: bold;
}
 
div#u-adult-warning > div#u-adult-header {
    font-size: 300%;
    text-shadow: 1px 2px 3px rgba(0, 0, 0, .5);
    color: #901;
}
 
div#u-adult-warning > div#u-adult-header p {
    margin: 0;
}
 
div#u-adult-warning > .error-block {
    color: unset;
    padding: unset;
    margin: unset;
    border: unset;
    margin-bottom: 1em;
}
 
/* Page preview component -- https://scp-wiki.wikidot.com/component:preview */
div.preview {
    display: none;
}
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License