Tema del Sito (Iota-9)

FERMATI SUBITO

Questa è una pagina template utilizzata dal sito della Fondazione SCP.

PER FAVORE, NON TOCCARE QUESTA PAGINA
SENZA IL PERMESSO DELLO STAFF

---

Questo è Iota-9, il tema del sito.

Iota-9 è mantenuto e aggiornato dal Team dei Codici e dallo staff.

I codici sorgente dei temi su cui è parzialmente basato sono hostati rispettivamente su GitHub (Sigma-9) e sul sito SCP Wiki (Simple Yonder).

---

/*
    SCP Iota 9
    [2023 Wikidot Theme]
    Created and maintained by the Italian Branch's Tech Team and Administration/Moderation Staff
    Based on the 'Sigma 9' theme created for the SCP Foundation by Aelanna and edited for SCP Foundation by Dr Devan
     Header from the Simple Yonder Theme by EstrellaYoshte
     Blockquotes created by Siddartha Alonne
     Logo of the Italian Branch made by Dr Pisy and NoctisNox
*/
 
@charset "utf-8";
 
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
 
@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('https://scpwiki.github.io/sigma/fonts/Inter-roman.var.woff2?v=3.19')
        format('woff2');
}
 
@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('https://scpwiki.github.io/sigma/fonts/Inter-italic.var.woff2?v=3.19')
        format('woff2');
}
 
@font-face {
    font-family: 'Sans Normalcy';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('https://scpwiki.github.io/sigma/fonts/Sans-Normalcy.woff2')
        format('woff2');
}
 
@font-face {
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://scpwiki.github.io/sigma/fonts/NanumGothic-Regular.woff2')
        format('woff2');
}
 
@font-face {
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('https://scpwiki.github.io/sigma/fonts/NanumGothic-Bold.woff2')
        format('woff2');
}
 
/* COMMON */
#content-wrap {
    position: relative;
    margin: 2em auto 0;
    max-width: 1120px;
    min-height: 1300px;
    height: auto !important;
    height: 1500px;
}
 
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: 0.95em;
    color: #333;
    font-family: Noto Sans, InterVariable, RedactRect, Inter, BlinkMacSystemFont,
        'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
        'Helvetica Neue', sans-serif;
    font-feature-settings: 'case', 'ss01', 'ss04';
}
 
#interwiki body {
    background-color: transparent;
}
 
div#container-wrap {
    background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Asimple-yonder/bg3.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://i.postimg.cc/Kj24HzFg/LogoIT.png') 10px 20px no-repeat;
    background-size: 100px;
    background-position: 10px 50%;
}
 
#search-top-box {
    position: absolute;
    top: 79px;
    right: 9px;
    width: 250px;
    text-align: right;
}
 
#search-top-box-input {
    display: none;
}
 
#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-form input[type='submit'] {
    border: solid 1px #999;
    border-radius: 0px;
    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;
   right: 55px;
   top: 15px;
}
 
#login-status a {
   background: transparent;
   color: #ddd;
}
 
#login-status ul a {
   color: #700;
   background: transparent;
}
 
#account-topbutton {
    background: #ccc;
    color: #700;
}
 
#account-options li {
     color: #333;
}
 
.printuser img.small {
    margin-right: 1px;
}
 
#header h1 {
    font-family: 'Sans Normalcy';
    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: 70px 0px 90px;
    line-height: 0px;
    max-height: 0;
    color: #eee;
    background: transparent;
    font-family: 'Sans Normalcy', '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: .12em min(.75vw, 1em);
}
 
#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: 0px;
    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: 18em;
     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 {
     display: block;
     left: 0;
     width: 17em;
     margin: 0;
     border: 1px solid #dedede;
     z-index: 10;
    }
 
    #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: #E9E0D2;
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background-color: #E9E0D2;
    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: #111;
    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('http://fondazionescp.wikidot.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 */
blockquote, div.blockquote, #toc { 
    background: #E9E0D2;
    border: solid 1px #000;
    padding: 1px 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
 
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%;
}
 
#page-content div, #page-content div table {
    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 {
     word-break: break-all;
    }
 
    .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 {
    width: 17em;
    margin-left: -5px;
}
 
iframe.scpnet-interwiki-frame {
    height: 0;
    width: 17em;
    border: none;
}
 
@media (min-width: 768px) {
    iframe.scpnet-interwiki-frame, div.scpnet-interwiki-wrapper {
     width: 18em;
    }
}
 
/* 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;
}
 
/* ---- Variables for the Light/Dark mode and the correspective button ----*/
 
:root {
/* Variables Specific to White Theme  */
--WT-open-themes-border: 2px solid #666;
--WT-open-themes-width:4px;
--WT-open-themes-background: #1d2022;
--WT-open-themes-color: white;
--WT-open-themes-hover-color: #5295e1;
--WT-open-themes-hover-border: solid 2px var(--WT-open-themes-hover-color);
--WT-open-themes-border-radius: 50%;
--WT-open-themes-text-decoration: none;
--WT-misc-1: #c0c0c0;
 
/*Button Position*/
--Button-margin-top: -135px;
--Button-margin-bottom: 122px;
--Button-margin-left: 96.5%;
 
/* Variables Specific to Black Theme */
--BT-open-themes-border: 2px solid #aaa;
--BT-open-themes-width:4px;
--BT-open-themes-background: #fff;
--BT-open-themes-color: #000;
--BT-open-themes-hover-color: #07f;
--BT-open-themes-hover-border: solid 2px #5295e1;
--BT-open-themes-border-radius: 50%;
 
}
 
@media only screen and (max-width: 600px)
{
:root {
--Button-margin-top: -135px!important;
--Button-margin-bottom: 122px!important;
--Button-margin-left: 93%!important;
}
}