Common Theme

Current version: 1.3.7

Sandbox Edition: 1.0

---

Key Features:

• Bugfixes
• Support of a variety of modifications
• Support of CSS variables
• Easy to use and modify
• Regular updates in one place

Changelog:

• 1.3.7: Added new classes: hyphens, justify, indent, no-indent, also several bugfixes
• 1.3.6: Added a missing shadow.
• 1.3.5: Added a missing variable.
• 1.3.4: Fixed a bug in the mobile topbar.
• 1.3.3: Fixed a bug in the header-text-scaling.
• 1.3.2: Fixed a bug of the image-box.
• 1.3.1: Fixed a bug of the social-media link icons in the sidebar.
• 1.3: Added all bugfixes and support for all modifications
• 1.1/1.2: Changed the height of the interwiki module, as it got a new line.
• 1.0: Initial release, basically a copy of EN's theme Rev. 78 from 2019-04-11.

Users of the Common Theme
If you use the Common Theme, please add your wiki here.

• INT: Wiki, Sandbox
• DE: Wiki, Sandbox
• PT-BR: Wiki, Sandbox

See also: Common Theme Beta, where all custom classes that already existed in the theme or were added now, can also be found.

The actual code

+ Show code

The code is just for display.
Only import one of the minified css files attached to this page.

@charset "utf-8";
 
@import url('/local--files/component:theme/font-bauhaus.css');
@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
 
 /*
    SCP Sigma 9 - Common Theme 1.3.7
    [2020 Wikidot Theme - CC BY-SA 3.0]
    Created for the SCP Foundation by Aelanna
    Edited for SCP Foundation by Crayne, Dr Devan, anqxyr, DrMagnus, psdnbluesoul
 
    Extensions:
    - Font Awesome 4.3.0 by @davegandy under SIL OFL 1.1 (Font) and MIT License (CSS)
    - Common Theme, bugfixes, top- and sidebar-mods by Dr_Grom
    - Support for Asian languages by Nanimono Demonai
    - Interwiki-module by Resure
    - Credit-module by C-take, physicslike, sinazugawa Nanimono Demonai, improved by Dr Devan and Boyu12, and adapted Dr_Grom
    - Colmod by Boyu12
*/
 
/* ++++++++++++++++ #0 Contents ++++++++++++++++
#0 Variables
#1 Common Settings
#2.0 Header
    #2.1 Account menu
    #2.2 Search box
    #2.3 Topbar
    #2.4 Sidebar
#3.0 Footer
#4.0 Content area 
    #4.1 Rating module
    #4.2 Standard image block
    #4.3 Tabview (YUI-Tabs) 
    #4.4 Forum
    #4.5 Content Panel (Custom class)
    #4.6 Other page elements
    #4.7 Colmod
    #4.8 Assorted fixes
#5.0 Extended support for asian writing systems
#6.0 Advanced settings
#7.0 Responsive Web Design
    #7.1 Basic Query for mobile devices (Up to 767px device width)
    #7.2 Note Media Query (Up to 580px device width)
    #7.3 Mobile Media Query (Up to 479px device width)
    #7.4 Very narrow Media Query (Up to 400px device width)
    #7.5 Mini Tablet Media Query (581px - 767px device width)
    #7.6 Tablet Media Query (768px - 979px device width)
#8.0 Interwiki-module
*/
 
/* ++++++++++++++++ #0 Variables ++++++++++++++++ 
 
Legend:
    _bg_ = Background [color or URL]
    _brd_ = Border
    _cnt_ = Content 
    _col_ = Color [only color values]
    _dim_ = Dimension
    _fnt_ = Font family
    _fns_ = Font size
    _shd_ = Shadow
    _m_ = For mobile
*/ 
 
:root {
    /* 1 Common */
    --ct_bg_body: #fff;
    --ct_col_body-txt: #333;
    --ct_col_h1-txt: #901;
    --ct_col_link: #b01;
    --ct_col_link-visited: #824;
    --ct_col_link-newpage: #d61;
 
    /* 2 Header */
    --ct_bg_header-image: url('/local--files/component:theme/body_bg.png');
    --ct_bg_header-logo: url('/local--files/component:theme/logo.png'); 
    --ct_fnt_header-txt: BauhausLTDemi, Arial, sans-serif;
    --ct_col_header-txt: #eee;
    --ct_col_slogan-txt: #f0f0c0;
    --ct_shd_header-txt: 3px 3px 5px #000;
    --ct_shd_slogan-txt: 1px 1px 1px rgba(0,0,0,.8);
    --ct_fns_header-txt: 180%;
    --ct_fns_slogan-txt: 100%;    
 
    /* 2 Account menu */
    --ct_col_account-menu-txt: #aaa;
    --ct_col_account-menu-link: #ddd;
    --ct_col_account-submenu-link: #700;
 
    /* 2 Search box */
    --ct_col_searchbox-txt: #ccc;
    --ct_brd_searchbox-border: solid 1px #999;
    --ct_col_searchbox-highlight: #fff;
    --ct_brd_searchbox-highlight: solid 1px var(--ct_col_searchbox-highlight);
    --ct_col_searchbox-gradient-1: #300;
    --ct_col_searchbox-gradient-2: #633;
    --ct_col_searchbox-gradient-3: #966;
    --ct_col_searchbox-gradient-4: #c99;
    --ct_dim_searchbox-border-radius: 5px;
 
    /* 2 Topbar */
    --ct_col_topbar-txt: #fff;
    --ct_col_topbar-link: #a01;
    --ct_bg_topbar-item: #eee;
    --ct_bg_topbar-item-highlight: #fff;
    --ct_brd_topbar-menu: solid 1px #666;
    --ct_brd_topbar-menu-hover: solid 1px #ddd;
    --ct_brd_topbar-item: solid 1px rgba(64,64,64,.1);
    --ct_brd_topbar-item-hover: solid 1px rgba(64,64,64,1);
    --ct_bg_topbar-home: url('/local--files/component:theme/home_fff.png');
    --ct_bg_topbar-home-hover: url('/local--files/nav:side/home.png');
 
    /* 2 Sidebar */
    --ct_col_sidebar-elements: #600;
    --ct_brd_sidebar-elements: 1px solid var(--ct_col_sidebar-elements);
    --ct_bg_sidebar-default: #fff;
    --ct_col_sidebar-subtext: #666;
    --ct_dim_sidebar-border-radius: 10px;
    --ct_bg_sidebar-expand: url('/local--files/nav:side/expand.png');
    --ct_bg_sidebar-collapse: url('/local--files/component:theme/collapse.png');
    --ct_dim_sidebar-link-images: 30px;
 
    /* 3 Footer */
    --ct_bg_footer: #444;
    --ct_col_footer-txt: #bbb;
    --ct_col_footer-link: #fff;
 
    /* 4 Content area */
    --ct_col_page-title: var(--ct_col_h1-txt);
    --ct_col_page-title-border: #bbb;
 
    /* 4 Rating-module */
    --ct_col_rate-primary: #633;
    --ct_brd_rate-primary: solid 1px var(--ct_col_rate-primary);
    --ct_col_rate-secondary: #fff6f0;
    --ct_col_rate-cancel: #966;
    --ct_col_rate-link-hover: #fffff0;
    --ct_col_rate-border-heritage: #ccc066;
    --ct_dim_rate-border-radius: 5px;
        --ct_dim_rate-cancel-border-radius: -moz-calc(var(--ct_dim_rate-border-radius) - 2px);
        --ct_dim_rate-cancel-border-radius: -webkit-calc(var(--ct_dim_rate-border-radius) - 2px);
    --ct_dim_rate-cancel-border-radius: calc(var(--ct_dim_rate-border-radius) - 2px);
        --ct_dim_rate-heritage-border-radius: -moz-calc(var(--ct_dim_rate-border-radius) + 3px);
        --ct_dim_rate-heritage-border-radius: -webkit-calc(var(--ct_dim_rate-border-radius) + 3px);
    --ct_dim_rate-heritage-border-radius: calc(var(--ct_dim_rate-border-radius) + 3px);
 
    /* 4 Standard image block */
    --ct_brd_image-block: solid 1px #666;
    --ct_col_image-block-contrast: #eee;
 
    /* 4 Tabview (YUI-Tabs) */
    --ct_col_tab-bg: #f5f5f5;
    --ct_col_tab-menu-bg-selected-txt: #fff;
    --ct_col_tab-menu-border: #444;
    --ct_col_tab-menu-bg: #d8d8d8 url('http://d3g0gp89917ko0.cloudfront.net/v--3b8418686296/common--theme/shiny/images/yuitabs.png');
    --ct_col_tab-menu-bg-hover: #d88 url('http://d3g0gp89917ko0.cloudfront.net/v--3b8418686296/common--theme/shiny/images/yuitabs.png') repeat-x left -1300px;
    --ct_col_tab-menu-bg-selected: #700 url('http://d3g0gp89917ko0.cloudfront.net/v--3b8418686296/common--theme/shiny/images/yuitabs.png') repeat-x left -1400px;
 
    /* 4 Other page elements */
    --ct_col_blockquote-bg: #f4f4f4;
    --ct_brd_blockquote: 1px dashed #999;
    --ct_col_code-bg: #f7f7f7;
    --ct_col_code-border: #ddd;
 
    /* 7 Responsive Web Design */
    --ct_col_m_sidebar-bg: #b88686;
    --ct_brd_m_sidebar: 1px solid #dedede;
    --ct_brd_m_sidebar-right: 1px solid #936b6b;
    --ct_col_m_sidebar-button-bg: #fff;
    --ct_col_m_sidebar-button-txt: #888;
    --ct_brd_m_sidebar-button: 0.2em solid var(--ct_col_m_sidebar-button-txt);
    --ct_shd_m_sidebar-button: 0px 0px 20px 3px rgba(153,153,153,1);
 
    /* Added by new versions */
    --ct_dim_text-indent: 2em;
}
 
/* ++++++++++++++++ #1 Common Settings ++++++++++++++++*/
 
body {
    background: #fff;
    background: var(--ct_bg_body);
    color: #333;
    color: var(--ct_col_body-txt);
    font-size: 0.80em;
}
h1 {
    color: #901;
    color: var(--ct_col_h1-txt);
    font-weight: bold;
    margin: 0.7em 0 0.6em;
    padding: 0;
}
h2, h3, h4, h5, h6, h7 {
    letter-spacing: 1px;
    margin: 0.5em 0 0.4em;
    padding: 0;
}
a {
    background: transparent;
    color: #b01;
    color: var(--ct_col_link);
    text-decoration: none;
}
a:hover {
    background-color: transparent;
    text-decoration: underline;
}
a:visited {
    color: #824;
    color: var(--ct_col_link-visited);
}
a.newpage {
    background: transparent;
    color: #d61;
    color: var(--ct_col_link-newpage);
    text-decoration: none;
}
ul {
    list-style: square;
}
li, p {
    line-height: 141%;
}
.footnoteref,
#page-content > sup {
    position: relative;
    top: -0.2em;
    vertical-align: top;
}
div#container-wrap {
    /* This is the header background image */
    background: url('/local--files/component:theme/body_bg.png') top left repeat-x;
    background-image: var(--ct_bg_header-image); 
}
 
/* ++++++++++++++++ #2.0 Header ++++++++++++++++ */
 
#header {
    /* This is the logo in the header */
    background: url('/local--files/component:theme/logo.png') 10px 40px no-repeat;
    background-image: var(--ct_bg_header-logo);
    height: 140px;
    margin: 0 auto;
    max-width: 980px; /* Setting maximum width of all page content (980px) */
    padding-bottom: 22px; /* Room for topbar */
    position: relative;
    width: 90%;
    z-index: 10;
}
#header h1 {
    float: left;
    margin-left: 120px;
    max-height: 95px;
    padding: 0;
}
#header h1 a {
    background: transparent;
    color: #eee;
    color: var(--ct_col_header-txt);
    display: block;
    font-family: BauhausLTDemi, Arial, sans-serif;
    font-family: var(--ct_fnt_header-txt);
    font-size: 180%;
    font-size: var(--ct_fns_header-txt);
    letter-spacing: 0.9px;
    line-height: 0px;
    margin: 0;
    max-height: 0px;
    padding: 80px 0 25px;
    text-decoration: none;
    text-shadow: 3px 3px 5px #000;
    text-shadow: var(--ct_shd_header-txt);
}
#header h1 a::before {
    color: var(--ct_col_alt-header-txt);
    content: var(--ct_cnt_alt-header-txt);
    font-size: var(--ct_fns_alt-header-txt);
}
#header h2 {
    clear: left;
    float: left;
    font-size: 105%;
    margin-left: 120px;
    max-height: 38px;
    padding: 0;
}
#header h2 span {
    color: #f0f0c0;
    color: var(--ct_col_slogan-txt);
    display: block;
    font-size: 100%;
    font-size: var(--ct_fns_slogan-txt);
    font-weight: bold;
    line-height: 0px;
    margin: 0;
    max-height: 0px;
    padding: 19px 0;
    text-shadow: 1px 1px 1px rgba(0,0,0,.8);
    text-shadow: var(--ct_shd_slogan-txt);
}
#header h2 span::before {
    color: var(--ct_col_alt-slogan-txt);
    content: var(--ct_cnt_alt-slogan-txt);
    font-size: var(--ct_fns_alt-slogan-txt);
}
 
/* ---------------- #2.1 Account menu ---------------- */
#login-status {
    color: #aaa;
    color: var(--ct_col_account-menu-txt);
    font-size: 90%;
    z-index: 30;
}
#login-status a {
    background: transparent;
    color: #ddd;
    color: var(--ct_col_account-menu-link);
}
#account-options {
        -webkit-box-shadow: 0 2px 6px rgba(0,0,0,.5);
        -moz-box-shadow: 0 2px 6px rgba(0,0,0,.5);
    box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
#account-options li a {
    background: transparent;
    color: #700;
    color: var(--ct_col_account-submenu-link);
}
.printuser img.small {
    margin-right: 1px;
}
 
/* ---------------- #2.2 Search box ---------------- */
#search-top-box {
    position: absolute;
    right: 9px;
    text-align: right;
    top: 79px;
    width: 250px;
}
#search-top-box-input {
    background-color: #300;
    background-color: var(--ct_col_searchbox-gradient-1);
    border: solid 1px #999;
    border: var(--ct_brd_searchbox-border);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    border-radius: 5px;
    border-radius: var(--ct_dim_searchbox-border-radius);
        -webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,.5);
        -moz-box-shadow: inset 1px 1px 3px rgba(0,0,0,.5);
    box-shadow: inset 1px 1px 3px rgba(0,0,0,.5);
    color: #ccc;
    color: var(--ct_col_searchbox-txt);
}
#search-top-box-input:hover,
#search-top-box-input:focus {
    background-color: #633;
    background-color: var(--ct_col_searchbox-gradient-2);
    border: solid 1px #fff;
    border: solid 1px var(--ct_col_searchbox-highlight);
        -webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,.8);
        -moz-box-shadow: inset 1px 1px 3px rgba(0,0,0,.8);
    box-shadow: inset 1px 1px 3px rgba(0,0,0,.8);
    color: #fff;
    color: var(--ct_col_searchbox-highlight);
}
#search-top-box-form input[type=submit] {
    background-color: #633;
    background-color: var(--ct_col_searchbox-gradient-2);
        background: -webkit-gradient(linear, left top, left bottom, from(#966),color-stop(#633),to(#300));
        background: -webkit-linear-gradient(top, #966,#633,#300);
        background: -moz-linear-gradient(top, #966,#633,#300);
        background: -o-linear-gradient(top, #966,#633,#300);
    background: linear-gradient(to bottom, #966,#633,#300);
    background: linear-gradient(to bottom, var(--ct_col_searchbox-gradient-3),var(--ct_col_searchbox-gradient-2),var(--ct_col_searchbox-gradient-1));
    border: solid 1px #999;
    border: var(--ct_brd_searchbox-border);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    border-radius: 5px;
    border-radius: var(--ct_dim_searchbox-border-radius);
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.5);
        -moz-box-shadow: 0 1px 3px rgba(0,0,0,.5);
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
    color: #ccc;
    color: var(--ct_col_searchbox-txt);
    cursor: pointer;
    font-size: 90%;
    font-weight: bold;
    padding: 2px 5px;
}
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
    background-color: #966;
    background-color: var(--ct_col_searchbox-gradient-3);
        background: -webkit-gradient(linear, left top, left bottom, from(#c99),color-stop(#966),to(#633));
        background: -webkit-linear-gradient(top, #c99,#966,#633);
        background: -moz-linear-gradient(top, #c99,#966,#633);
        background: -o-linear-gradient(top, #c99,#966,#633);
    background: linear-gradient(to bottom, #c99,#966,#633);
    background: linear-gradient(to bottom, var(--ct_col_searchbox-gradient-4),var(--ct_col_searchbox-gradient-3),var(--ct_col_searchbox-gradient-2));
    border: solid 1px #fff;
    border: var(--ct_brd_searchbox-highlight);
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.8);
        -moz-box-shadow: 0 1px 3px rgba(0,0,0,.8);
    box-shadow: 0 1px 3px rgba(0,0,0,.8);
    color: #fff;
    color: var(--ct_col_searchbox-highlight);
    text-shadow: 0 0 1px rgba(255,255,255,.25)
}
 
/* ---------------- #2.3 Topbar ---------------- */
#top-bar {
    font-size: 90%;
    height: 21px;
    line-height: 18px;
    margin: 0 auto;
    max-width: 980px;
    padding: 0;
    position: absolute;
    top: 140px;
    width: 100%;
    z-index: 20;
}
#top-bar a {
    background: transparent;
    color: #fff;
    color: var(--ct_col_topbar-txt);
}
#top-bar ul {
    float: right;
    /* list-style-image: none; /* IE ONLY! IF list-style-image IS SET */
}
#top-bar li {
    margin: 0;
}
#top-bar ul li {
    border: 0;
    position: relative;
}
#top-bar ul li a {
    border-left: solid 1px rgba(64,64,64,.1);
    border-right: solid 1px rgba(64,64,64,.1);
    border-left: var(--ct_brd_topbar-item);
    border-right: var(--ct_brd_topbar-item);
    line-height: 1px;
    max-height: 1px;
    overflow: hidden;
    padding-bottom: 10px;
    padding-top: 10px;
    text-decoration: none;
}
#top-bar ul li ul {
    border: solid 1px #666;
    border: var(--ct_brd_topbar-menu);
    border-top: 0;
    border-width: 0 1px 1px 1px;
        -webkit-box-shadow: 0 2px 6px rgba(0,0,0,.5);
        -moz-box-shadow: 0 2px 6px rgba(0,0,0,.5);
    box-shadow: 0 2px 6px rgba(0,0,0,.5);
    width: auto;
}
#top-bar ul > li > ul {
    *margin-top: -4px; /* IE7 HACK */
}
#top-bar ul li ul a,
#top-bar a:hover {
    color: #a01;
    color: var(--ct_col_topbar-link);
}
#top-bar ul li ul li.sfhover,
#top-bar ul li ul li:hover {
    background: #fff;
    background: var(--ct_bg_topbar-item-highlight);
}
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
    background: #eee;
    background: var(--ct_bg_topbar-item);
    border-left: solid 1px rgba(64,64,64,1);
    border-right: solid 1px rgba(64,64,64,1);
    border-left: var(--ct_brd_topbar-item-hover);
    border-right: var(--ct_brd_topbar-item-hover);
    color: #a01;
    color: var(--ct_col_topbar-link);
}
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
    background: #fff;
    background: var(--ct_bg_topbar-item-highlight);
    text-decoration: none;
}
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
    border-width: 0;
    border-top: 1px solid #ddd;
    border-top: var(--ct_brd_topbar-menu-hover);
    height: auto;
    line-height: 160%;
    max-height: none;
    padding-top: 0;
    padding-bottom: 0;
    width: 150px;
}
#top-bar ul li ul li,
#top-bar ul li ul li.sfhover,
#top-bar ul li ul li:hover,
#top-bar ul li ul li a {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
    align-items: center;
    min-width: 150px;
    width: 100% !important;
}
#top-bar ul li:last-of-type ul {
    right: 0;
}
.open-menu {
    display: none;
}
.mobile-top-bar {
    bottom: 0px;
    display: none;
    position: absolute;
    right: 0;
    z-index: 0;
}
 
/* Homebutton in Topbar */
#top-bar ul li a.homebutton {
   background: url('/local--files/component:theme/home_fff.png') center 5px no-repeat;
   background-image: var(--ct_bg_topbar-home);
   color: transparent;
   padding: 10px 8px;
}
#top-bar ul li a.homebutton:hover {
   background: url('/local--files/nav:side/home.png') center 5px no-repeat, #eee;
   background-color: var(--ct_bg_topbar-item-highlight);
   background-image: var(--ct_bg_topbar-home-hover);
   color: transparent;
}
 
/* Nested Topbar */
#top-bar ul li ul li ul {
    border: solid 1px #666;
    border: var(--ct_brd_topbar-menu);
    left: 173px;
    top: 0;
        width: -webkit-min-content;
        width: -moz-min-content;
    width: min-content;
}
#top-bar div.mobile-top-bar ul li ul li ul {
    left: 50px;
    top: 19px;
}
#top-bar div > ul > li > ul > li > ul {
    visibility: hidden !important;
    z-index: 1;
}
#top-bar div > ul > li > ul > li:hover > ul {
    visibility: visible !important;
}
#top-bar div > ul > li > ul > li:sfhover > ul {
    visibility: visible !important;
}
.topbar_arrow {
    color: #a01;
    color: var(--ct_col_topbar-link);
    position: absolute;
    right: 3px;
    top: 1px;
}
 
/* Images in Topbar */
#top-bar li ul li {
        display: -webkit-inline-box;
        display: -webkit-inline-flex;
        display: -moz-inline-box;
        display: -ms-inline-flexbox;
    display: inline-flex;
}
#top-bar li ul li img {
        height: -webkit-max-content;
        height: -moz-max-content;
    height: max-content;
    max-height: 16px;
    max-width: 16px;
    padding-left: 1em;
    position: absolute;
}
#top-bar ul li ul li img + a {
    padding-left: 3em;
    width: 160px !important;
}
 
/* ---------------- #2.4 Sidebar ---------------- */
#side-bar {
    border: none;
    clear: none;
    display: block;
    float: none;
    left: 2em;
    padding: 0;
    position: absolute;
    top: 0.5em;
    width: 17em;
}
#side-bar .side-block {
    background: #fff;
    background: var(--ct_bg_sidebar-default);
    border: 1px solid #600;
    border: var(--ct_brd_sidebar-elements);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
    border-radius: 10px;
    border-radius: var(--ct_dim_sidebar-border-radius);
        -webkit-box-shadow: 0 2px 6px rgba(102,0,0,.5);
        -moz-box-shadow: 0 2px 6px rgba(102,0,0,.5);
    box-shadow: 0 2px 6px rgba(102,0,0,.5);
    margin-bottom: 15px;
    padding: 10px;
}
#side-bar .side-area {
    padding: 10px;
}
#side-bar .heading {
    border-bottom: solid 1px #600;
    border-bottom: var(--ct_brd_sidebar-elements);
    color: #600;
    color: var(--ct_col_sidebar-elements);
    font-size: 8pt;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
    padding-left: 15px;
}
#side-bar p {
    margin: 0;
}
#side-bar div.menu-item {
    margin: 2px 0;
    padding-left: 15px;
}
#side-bar div.menu-item img {
    bottom: -2px;
    border: 0;
    height: 13px;
    margin-left: -15px;
    margin-right: 2px;
    position: relative;
    width: 13px;
}
#side-bar div.menu-item a {
    font-weight: bold;
}
#side-bar div.menu-item a img {
    padding: 0 7px;
}
#side-bar div.menu-item.inactive img {
    opacity: 0.25;
}
#side-bar div.menu-item.inactive a {
    color: #999;
}
#side-bar div.menu-item .sub-txt {
    color: #666;
    color: var(--ct_col_sidebar-subtext);
    font-size: 80%;
}
#side-bar a:visited { 
    color: #b01;
    color: var(--ct_col_link-visited);
}
#side-bar ul{
    list-style-type: none;
    padding: 0 5px 0;
}
#side-bar .collapsible-block-link {
    margin-left: 15px;
    font-weight: bold;
    text-align: left;
}
#side-bar .collapsible-block-unfolded-link {
    border-bottom: solid 1px #600;
    border-bottom: var(--ct_brd_sidebar-elements);
    text-align: left;
}
#side-bar .collapsible-block-unfolded-link .collapsible-block-link {
    font-size: 8pt;
    margin-top: 10px;
    margin-bottom: 5px;
    text-align: left;
}
#side-bar .collapsible-block-folded {
    text-align: left;
}
.close-menu {
    display: none;
}
 
/* Set social media icon size at once */
#side-bar .side-links {
    padding-top: 12px;
    text-align: center;
}
#side-bar .side-links img {
    height: 30px;
    height: var(--ct_dim_sidebar-link-images);
    padding: 0 1px;
    width: 30px;
    width: var(--ct_dim_sidebar-link-images);
}
 
/* Collapsible sidebar */
#side-bar div.heading:first-child {
    margin-top: 0;
}
#side-bar .collapsible-block {
    margin-top: 10px;
}
#side-bar .collapsible-block:first-child {
    margin: 0;
}
#side-bar .collapsible-block-folded {
    background: url('/local--files/nav:side/expand.png') 0 1px no-repeat;
    background-image: var(--ct_bg_sidebar-expand);
}
#side-bar .collapsible-block-unfolded {
    background: url('/local--files/component:theme/collapse.png') 0 1px no-repeat;
    background-image: var(--ct_bg_sidebar-collapse);
}
#side-bar .collapsible-block-link,
#side-bar .collapsible-block-unfolded-link .collapsible-block-link {
    color: #600;
    color: var(--ct_col_sidebar-elements);
    font-size: 9pt;
}
#side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover,
#side-bar .collapsible-block-link:hover {
    color: #b01;
    color: var(--ct_col_link);
    text-decoration: none;
}
 
/* Colmod in the sidebar */
#side-bar .colmod-block ul {
    margin-top: 10px;
    padding: 0;
}
#side-bar .colmod-link-top a {
    color: #600;
    color: var(--ct_col_sidebar-elements);
    font-size: 9pt;
    font-weight: bold;
    padding-left: 15px;
}
#side-bar .colmod-link-top a:hover {
    color: #b01;
    color: var(--ct_col_link);
    text-decoration: none;
}
#side-bar .colmod-content {
    border-top: solid 1px #600;
    border-top: var(--ct_brd_sidebar-elements);
}
#side-bar .colmod-link-top a:first-child {
    background: url('/local--files/nav:side/expand.png') 0 1px no-repeat border-box;
    background-image: var(--ct_bg_sidebar-expand);
}
#side-bar .colmod-link-top a:last-child {
    background: url('/local--files/component:theme/collapse.png') 0 1px no-repeat border-box;
    background-image: var(--ct_bg_sidebar-collapse);
}
 
/* ++++++++++++++++ #3.0 Footer ++++++++++++++++ */
#footer {
    background: #444;
    background: var(--ct_bg_footer);
    clear: both;
    color: #bbb;
    color: var(--ct_col_footer-txt);
    font-size: 77%;
    margin-top: 15px;
    padding: 3px 10px;
}
#footer .options {
    display: block;
    float: right;
    font-size: 100%;
    text-align: right;
    visibility: visible;
    width: 50%;
}
#footer a {
    background: transparent;
    color: #fff;
    color: var(--ct_col_footer-link);
}
 
/* ++++++++++++++++ #4.0 Content area ++++++++++++++++ */
 
/* Above the content */
#content-wrap {
    height: auto !important;
    height: 1500px;
    margin: 2em auto 0;
    max-width: 1040px;
    min-height:1300px;
    position: relative;
}
#main-content {
    margin: 0 2em 0 22em;
    padding: 1em;
    position: relative;
}
#page-content {
    min-height: 720px;
} 
#page-title {
    border-color: #bbb;
    border-color: var(--ct_col_page-title-border);
    color: #901;
    color: var(--ct_col_page-title);
    font-weight: normal;
    margin: 0 0 0.6em;
    padding: 0 0 0.25em;
}
#breadcrumbs {
    font-weight: 800;
    margin: -1em 0 1em;
}
 
/* Below the content */
#main-content .page-tags a[href^="/system:page-tags/tag/_"] {
    display: none; /* Hide hidden tags */
}
#main-content .page-tags {
    margin: 1em 0 0;
    padding: 0;
}
#main-content .page-tags span {
    display: inline-block;
    max-width: 60%;
    padding: 0;
}
#main-content .page-tags a {
    display: inline-block;
    white-space: nowrap;
}
 
.page-source {
    word-break: break-all;
}
 
/* ---------------- #4.1 Rating module ---------------- */
.page-rate-widget-box {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    border-radius: 5px;
    border-radius: var(--ct_dim_rate-border-radius);
        -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,.5);
        -moz-box-shadow: 1px 1px 3px rgba(0,0,0,.5);
    box-shadow: 1px 1px 3px rgba(0,0,0,.5);
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 2em;
}
.page-rate-widget-box .rate-points {
    background: #633 !important;
    background: var(--ct_col_rate-primary) !important;
    border: solid 1px #633;
    border: var(--ct_brd_rate-primary);
        -webkit-border-radius: 5px 0 0 5px;
        -moz-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
    border-radius: var(--ct_dim_rate-border-radius) 0 0 var(--ct_dim_rate-border-radius);
    border-right: 0;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background: #fff6f0;
    background: var(--ct_col_rate-secondary);
    border-bottom: solid 1px #633;
    border-bottom: var(--ct_brd_rate-primary);
    border-top: solid 1px #633;
    border-top: var(--ct_brd_rate-primary);
    font-weight: bold;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    background: transparent;
    color: #633;
    color: var(--ct_col_rate-primary);
    margin: 0 1px;
    padding: 0 4px;
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
    background: #633;
    background: var(--ct_col_rate-primary);
    color: #fffff0;
    color: var(--ct_col_rate-link-hover);
    text-decoration: none;
}
.page-rate-widget-box .cancel {
    background: #633;
    background: var(--ct_col_rate-primary);
    border: solid 1px #633;
    border: solid 1px var(--ct_col_rate-primary);
    border-left: 0;
        -webkit-border-radius: 0 5px 5px 0;
        -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    border-radius: 0 var(--ct_dim_rate-border-radius) var(--ct_dim_rate-border-radius) 0;
}
.page-rate-widget-box .cancel a {
    background: transparent;
    color: #966;
    color: var(--ct_col_rate-cancel);
    text-transform: uppercase;
}
.page-rate-widget-box .cancel a:hover {
    background: #633;
    background: var(--ct_col_rate-primary);
        -webkit-border-radius: 0 3px 3px 0;
        -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
    border-radius: 0 var(--ct_dim_rate-cancel-border-radius) var(--ct_dim_rate-cancel-border-radius) 0;
    color: var(--ct_col_rate-link-hover);
    text-decoration: none;
}
 
/* Heritage Rating module */
.heritage-rating-module {
    background: #633;
    background: var(--ct_col_rate-primary);
    border: solid 1px #ccc066;
    border: solid 1px var(--ct_col_rate-border-heritage);
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
    border-radius: 8px;
    border-radius: var(--ct_dim_rate-heritage-border-radius);
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25);
        -moz-box-shadow: 0 1px 3px rgba(0,0,0,.25);
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    display: inline-block;
    margin-right: 2em;
    margin-bottom: 10px;
    padding: 2px 8px 2px 5px;
}
.heritage-rating-module .page-rate-widget-box {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
    box-shadow: none;
    margin-bottom: 0;
    margin-right: 0;
}
.heritage-rating-module .heritage-emblem {
    float: left;
    height: 16px;
    left: 2px;
    margin-right: 2px;
    overflow: visible;
    position: relative;
    top: -2px;
    width: 16px;
}
.heritage-rating-module .heritage-emblem img {
    border: 0;
    height: 20px;
    max-width: 20px;
    width: 20px;
}
 
/* ---------------- #4.2 Standard image block ---------------- */
.scp-image-block {
    border: solid 1px #666;
    border: var(--ct_brd_image-block);
        -moz-box-shadow: 0 1px 6px rgba(0,0,0,.25);
        -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.25);
    box-shadow: 0 1px 6px rgba(0,0,0,.25);
    width: 300px;
}
.scp-image-block img {
    border: 0;
    width: 300px;
}
 
.scp-image-block > p {
    margin: 0;
}
.scp-image-block.block-right {
    clear: right;
    float: right;
    margin: 0 2em 1em 2em;
}
.scp-image-block.block-left {
    clear: left;
    float: left;
    margin: 0 2em 1em 0;
}
.scp-image-block.block-center {
    margin-left: auto;
    margin-right: auto;
}
.scp-image-block .scp-image-caption {
    background: #eee;
    background: var(--ct_col_image-block-contrast);
    border-top: solid 1px #666;
    border-top: var(--ct_brd_image-block);
    font-size: 80%;
    font-weight: bold;
    text-align: center;
    padding: 2px 0;
    width: 300px;
}
.scp-image-block .scp-image-caption > p {
    margin: 0;
    padding: 0 10px;
}
 
/* ---------------- #4.3 Tabview (YUI-Tabs) ---------------- */
.yui-navset .yui-content{
    background: #f5f5f5;
    background: var(--ct_col_tab-bg);
}
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background: #d8d8d8 url('http://d3g0gp89917ko0.cloudfront.net/v--3b8418686296/common--theme/shiny/images/yuitabs.png');
    background: var(--ct_col_tab-menu-bg);
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover { 
    background: #700 url('http://d3g0gp89917ko0.cloudfront.net/v--3b8418686296/common--theme/shiny/images/yuitabs.png') repeat-x left -1400px; 
    background: var(--ct_col_tab-menu-bg-selected); 
    color: #fff;
    color: var(--ct_col_tab-menu-bg-selected-txt);
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background: #d88 url('http://d3g0gp89917ko0.cloudfront.net/v--3b8418686296/common--theme/shiny/images/yuitabs.png') repeat-x left -1300px;
    background: var(--ct_col_tab-menu-bg-hover);
    text-decoration: none;
}
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border-color: #444;
    border-color: var(--ct_col_tab-menu-border);
}
.yui-navset li {
    line-height: normal;
}
/* Invert colors of code-boxes in tabs*/
.yui-content blockquote,
.yui-content .code {
    background: #fff;
    background: var(--ct_bg_body);
    border-color: #999;
    border-color: var(--ct_brd_blockquote);
}
 
/* Borderless tabs */
.borderless-tabs .yui-navset .yui-content {
    background: transparent;
    border: 0;
    border-top: solid 3px #444;
    border-top: solid 3px var(--ct_col_tab-menu-border);
    padding: 0.25em 0;
}
.borderless-tabs .yui-navset .yui-navset-top .yui-content {
    padding: 0.25em 0;
}
.borderless-tabs .yui-navset .yui-nav,
.borderless-tabs .yui-navset .yui-navset-top .yui-nav {
    border: 0;
}
.borderless-tabs .yui-content li {
    margin: 0.4em 0;
}
.borderless-tabs .yui-content .code {
    background: #f7f7f7;
    background: var(--ct_col_code-bg);
    border-color: #ddd;
    border-color: var(--ct_col_code-border);
}
 
/* ---------------- #4.4 Forum ---------------- */
.forum-thread-box .description-block {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
    border-radius: 10px;
        -webkit-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);
        -moz-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);
    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);
    padding: .5em 1em;
}
.thread-container .post .head {
    background-color: #eee;
    background: linear-gradient(to right, #eee, #eeecec);
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
        -moz-box-shadow: inset 2px 3px 6px rgba(0,0,0,.15);
        -webkit-box-shadow: inset 2px 3px 6px rgba(0,0,0,.15);
    box-shadow: inset 2px 3px 6px rgba(0,0,0,.15);
    padding: 0.5em 1em;
}
 
.signature {
    display:none !important; /* Hide Forum Signatures */
}
 
/* ---------------- #4.5 Content Panel (Custom class) ---------------- */
.content-panel {
    background-color: #999990;
    border: solid 1px #888880;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
    border-radius: 10px;
        -moz-box-shadow: 3px 3px 6px #bbb;
        -webkit-box-shadow: 3px 3px 6px #bbb;
    box-shadow: 3px 3px 6px #bbb;
        -webkit-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);
        -moz-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);
    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);
    margin: 10px 0 15px;
}
.content-panel.standalone {
    background: #fcfdfb;
}
.content-panel.series {
    margin-bottom: 20px;
    padding: 0 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 {
    background: #fff9f0 url('/local--files/component:theme/panel-bg-gradient-reverse.png') bottom repeat-x;
    padding: 5px 10px;
}
.content-panel .panel-footer {
    color: #fffff0;
    font-size: 80%;
    font-weight: bold;
    padding: 1px 10px;
    text-align: right;
    text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}
.content-panel .panel-footer a {
    color: #fff;
}
.content-panel .content-toc {
        -moz-box-shadow: inset 1px 2px 6px rgba(0,0,0,.15);
        -webkit-box-shadow: inset 1px 2px 6px rgba(0,0,0,.15);
    box-shadow: inset 1px 2px 6px rgba(0,0,0,.15);
    background-color: #fff;
    border: solid 1px #ccc;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
    border-radius: 10px;
    float: right;
    margin: 20px 0 5px 5px;
    padding: 0 20px;
    white-space: nowrap;
}
.unmargined > p {
    margin: 0;
    line-height: 100%;
}
.alternate:nth-child(even) {
    background-color: rgba(255,255,255,.9);
}
 
/* ---------------- #4.6 Other page elements ---------------- */
 
/* Blockquotes and fake Blockquotes */
blockquote,
div.blockquote,
.borderless-tabs .yui-content blockquote {
    border: 1px dashed #999;
    border: var(--ct_brd_blockquote);
    background-color: #f4f4f4;
    background-color: var(--ct_col_blockquote-bg);
    padding: 0 1em;
    margin: 1em 3em;
}
 
.form-control {
    width: 95%;
}
 
/* Wikiwalk Navigation */
.footer-wikiwalk-nav {
    font-size: 75%;
    font-weight: bold;
}
 
/* Sexy-Box */
div.sexy-box {
    background: #eee;
    border: 1px solid #ccc;
    margin: 7px 4px 12px;
    overflow: hidden;
    padding: 0 10px 12px;
}
div.sexy-box div.image-container img {
    border: 1px solid #999;
    margin: 5px;
    padding: 2px;
}
 
/* Keycap */
.keycap {
    background-color: #f9f9f9;
    border: 1px solid;
    border-bottom-width: 2px;
    border-color: #ddd #bbb #bbb #ddd;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
    border-radius: 3px;
    font-family: inherit;
    font-size: 0.85em;
    padding: 1px 3px;
    white-space: nowrap;
}
 
/* tag style */
.tags {
    background: #666;
        -webkit-border-bottom-right-radius: 4px;
        -moz-border-radius-bottomright: 4px;
    border-bottom-right-radius: 4px;
        -webkit-border-top-right-radius: 4px;
        -moz-border-radius-topright: 4px;
    border-top-right-radius: 4px;
    color: #fff;
    display: inline-block;
    font-size: 11px;
    height: 13px;
    line-height: 13px;
    margin: 0 0 0 5px;
    padding: 3px 5px 3px 0px;
    text-decoration: none;
}
.tags:before {
    border-color: transparent #666 transparent transparent;
    border-style: solid;
    border-width: 8px 8px 8px 0px;
    content: "";
    float: left;
    height: 0;
    left: -10px;
    padding: 0px 1px 3px 1px;
    position: relative;
    top: -3px;
    width: 0;
}
.tags:after {
    background: #fff;
        -webkit-box-shadow: -1px -1px 2px #333;
        -moz-box-shadow: -1px -1px 2px #333;
    box-shadow: -1px -1px 2px #333;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
    border-radius: 2px;
    content: "";
    float: left;
    left: -8px;
    height: 4px;
    position: relative;
    top: 4.5px;
    width: 4px;
}
 
/* Blackbox (by Nanimono Demonai) */
/* http://www.scp-wiki.net/scp-style-resource#toc11 */
.bblock {
    background-color:#000000;
    color: #000000;
    text-decoration: none;
        -webkit-transition: 2s;
        -o-transition: 2s;
        -moz-transition: 2s;
    transition: 2s;
}
.bblock:hover {
    background-color:#000000;
    color: #006600;
    text-decoration: none;
}
.dblock {
    background-color:#000000;
    color:#000000;
    text-decoration: none;
        -webkit-transition: 2s;
        -o-transition: 2s;
        -moz-transition: 2s;
    transition: 2s;
}
.dblock:hover {
    background-color:transparent;
    text-decoration: none;
}
 
/* Extended formating classes */
.justify {
    text-align: justify;
}
.hyphens {
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -khtml-hyphens: auto;
    hyphens: auto;
}
.indent, .indent p {
    text-indent: 2em;
    text-indent: var(--ct_dim_text-indent);
}
.no-indent, .no-indent p {
    text-indent: 0;
}
 
/* ---------------- #4.7 Colmod ---------------- */
.colmod-block > ul,
.colmod-block > ul > li {
    display:block;
    line-height:normal;
    list-style:none;
    margin:0;
    padding:0;
}
.colmod-block > ul > li > ul,
li.folded > .colmod-link-top a + a,
li.folded > .colmod-content,
li.folded > .colmod-link-end a,
li.unfolded > .colmod-link-top a:first-child {
    display:none;
}
.colmod-content {
        -webkit-animation:colmod-fade-in 0.2s ease-in-out;
        -moz-animation:colmod-fade-in 0.2s ease-in-out;
        -o-animation:colmod-fade-in 0.2s ease-in-out;
    animation:colmod-fade-in 0.2s ease-in-out;
        -webkit-animation-timing-function:cubic-bezier(0.3649610494,0,0.6350389506,1);
        -moz-animation-timing-function:cubic-bezier(0.3649610494,0,0.6350389506,1);
        -o-animation-timing-function:cubic-bezier(0.3649610494,0,0.6350389506,1);
    animation-timing-function:cubic-bezier(0.3649610494,0,0.6350389506,1);
}
li.folded > .colmod-content {
        -webkit-animation-name:none;
        -moz-animation-name:none;
        -o-animation-name:none;
    animation-name:none;
}
@-webkit-keyframes colmod-fade-in { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes colmod-fade-in { from { opacity:0; } to { opacity:1; } }
@-o-keyframes colmod-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes colmod-fade-in { from { opacity:0; } to { opacity:1; } }
[class|="colmod-link"] div.foldable-list-container {
    display:inline;
}
.colmod-collapsiblealt > [class|="colmod-link"],
.collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] {
    margin:0.5em 0;
    text-align:center;
}
.colmod-collapsiblealt > [class|="colmod-link"] a,
.collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] a {
    background-color:#F4F4F4;
    border:1px solid #AAA;
    color:#000;
    padding:0.1em 0.5em;
    text-decoration:none;
}
.colmod-collapsiblealt > [class|="colmod-link"] a:hover,
.colmod-collapsiblealt > [class|="colmod-link"] a:active,
.collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] a:hover,
.collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] a:active {
    background:#DDD;
    text-decoration:none;
}
 
/* ---------------- #4.8 Assorted fixes ---------------- */
 
.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;
}
 
/* ++++++++++++++++ #5.0 Extended support for asian writing systems ++++++++++++++++ */
 
/* Ruby (by Nanimono Demonai) */
.ruby, ruby {
    display:inline-table;
    height:1em;
    line-height:1;
    text-align:center;
    vertical-align:text-bottom;
    white-space:nowrap;
}
.rt, rt {
    display:table-header-group;
    font-size:0.6em;
    line-height:1.1;
    text-align:center;
    white-space:nowrap;
}
 
/*
    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 {
    -webkit-txt-emphasis-style: dot ;
    text-emphasis-style: dot ;
}
 
/* For FireFox */
@-moz-document url-prefix() {
    .emph {
        background-repeat: repeat-x;
        background-color:transparent;
        background-clip: padding-box, content-box;
        background-image: none;
            -moz-background-size: 1em 1.3em, auto;
        background-size: 1em 1.3em, auto;
        font-family: monospace;
        font-style: normal;
        font-weight: normal;
        padding: 0.5em 0 0;
    }
}
 
/* For IE10 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .emph {
        background-repeat: repeat-x;
        background-color:transparent;
        background-clip: padding-box, content-box;
        background-image: none;
            -webkit-background-size: 1em 1.3em, auto;
            -moz-background-size: 1em 1.3em, auto;
        background-size: 1em 1.3em, auto;
        font-family: monospace;
        font-style: normal;
        font-weight: normal;
        padding: 0.5em 0 0;
    }
}
 
/* ++++++++++++++++ #6.0 Advanced settings ++++++++++++++++ */
 
@-webkit-viewport {
    width: device-width;
    zoom: 1.0;
}
@-moz-viewport {
    width: device-width;
    zoom: 1.0;
}
@-ms-viewport {
    width: device-width;
    zoom: 1.0;
}
@-o-viewport {
    width: device-width;
    zoom: 1.0;
}
@viewport {
    width: device-width;
    zoom: 1.0;
}
 
::-webkit-scrollbar {
    border: solid 1px rgba(0, 0, 0, 0.1);
        -webkit-border-radius: 0.5px;
    border-radius: 0.5px;
    height: 9px; /* for horizontal scrollbars */
    width: 9px; /* for vertical scrollbars */
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb {
    background: rgba(50, 50, 50, 0.3);
}
 
/* ++++++++++++++++ #7.0 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%;
}
 
/* ---------------- #7.1 Basic Query for mobile devices (Up to 767px) ---------------- */
@media (max-width: 767px) {
    span, a {
            -ms-hyphens: auto;
            -moz-hyphens: auto;
            -webkit-hyphens: auto;
            -khtml-hyphens: auto;
        hyphens: auto;
    }
    #main-content {
        margin: 0 5%;
        max-width: 90%;
        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 {
        background-color: #b88686;
        background-color: var(--ct_col_m_sidebar-bg);
        border: none;
        display: block;
        height: 100%;
        left: -25em;
        max-width: 80%;
        overflow-y: inherit;
        padding: 0;
        position: fixed;
            -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;
        top: 0;
        width: 17em;
        z-index: 10;
    }
    #side-bar:after {
        background-color: rgba(0, 0, 0, 0.2);
        content: "";
        height: 100%;
        position: absolute;
        top: 0;        
        width: 0;
    }
    #side-bar:target {
        border: 1px solid #dedede;
        border: var(--ct_brd_m_sidebar);
        display: block;
        left: 0;
        margin: 0;
        width: 17em;
        z-index: 10;
    }
    #side-bar:target + #main-content {
        left: 0;
    }
    #side-bar:target .close-menu {
        background: rgba(0,0,0,0.3) 1px 1px repeat;
        display: block;
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: -1;
    }
    .side-bar-container {
        background-color: #b88686;
        background-color: var(--ct_col_m_sidebar-bg);
        border-right: 1px solid #936b6b;
        border-right: var(--ct_brd_m_sidebar-right);
        height: 100%;
        margin-top: -1px;
        overflow-y: auto;
            -ms-scroll-chaining: none;
        overscroll-behavior: contain;
        padding: 1em 1em 0 1em;
        width: 100%;
    }
    .side-block {
            width: -moz-calc(16.25em - 22px);
            width: -webkit-calc(16.25em - 22px);
        width: calc(16.25em - 22px);
    }
    .open-menu {
        display:block;
    }
    .open-menu a {
        background-color: #fff !important;
        background-color: var(--ct_col_m_sidebar-button-bg) !important;
        border: 0.2em solid #888 !important;
        border: var(--ct_brd_m_sidebar-button) !important;
            -webkit-border-radius: 3em;
            -moz-border-radius: 3em;
        border-radius: 3em;
        color: #888 !important;
        color: var(--ct_col_m_sidebar-button-txt) !important;
        display:block;
        font-family: Tahoma, sans-serif;
        font-size: 30px;
        height: 30px;
        left: 0.5em;
        line-height: 0.85em;
        position: fixed;
        text-align: center;
        top: 0.5em;
        width: 30px;
        z-index: 15;
    }
    .open-menu a:hover {
            -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);
        box-shadow: var(--ct_shd_m_sidebar-button);
        text-decoration: none !important;
    }
    .page-history tbody tr td:last-child {
        width: 35%;
    }
    .modal-body .table, .modal-body .table ~ div {
        float: left;
    }
    .owindow {
        max-width: 99%;
        min-width: 80%;
    }
    .owindow .button-bar {
        float: right;
    }
    .owindow div .btn-primary {
        float: left;
        width: 100%;
    }
    .owindow div .btn-primary ~ div {
        width: 100%;
    }
    .yui-navset {
        z-index: 1;
    }
    #navi-bar, #navi-bar-shadow {
        display: none;
    }
    td.name {
        width: 40%;
    }
    td.title {
        width: 30%;
    }
}
 
/* ---------------- #7.2 Note Media Query (Up to 580px device width) ---------------- */
@media (max-width: 580px) {
    :root {
        --ct_fns_header-txt: 120%;
    }
    blockquote,
    div.blockquote    {
        margin: 0.5em;
    }
    #header {
        background-position: 0.5em 4.5em;
            -webkit-background-size: 66px 66px;
            -moz-background-size: 66px 66px;
        background-size: 66px 66px;
    }
    #header h1, #header h2 {
        margin-left: 80px;
    }
    #header h1 a {
        font-size: 120%;
        font-size: var(--ct_fns_header-txt);
    }
    #header,
    .mobile-top-bar {
        max-width: 90%;
    }
    .top-bar {
        display:none;
    }
    .mobile-top-bar {
        display: block;
    }
    #search-top-box {
        top: 104px;
    }
    #search-top-box-input {
        width: 7em;
    }
    #side-bar {
        max-width: 80%;
    }
    #main-content {
        margin: 0 2em 0 2em;
    }
    #page-content div, #page-content div table {
        clear: both;
    }
    #page-content div.title {
        word-break: keep-all;
    }
    .content-panel.left-column, .content-panel.right-column  {
        float: left;
        width: 99%;
    }
    .page-options-bottom a {
        padding: 0 5px;
    }
    .license-area {
        font-size: 0.85em;
    }
}
 
/* ---------------- #7.3 Mobile Media Query (Up to 479px device width) ---------------- */
@media (max-width: 479px) {
    :root {
        --ct_fns_header-txt: 100%;
    }
    table.form td, table.form th {
        float: left;
        padding: 0;
    }
    blockquote,
    div.blockquote {
        margin: 1em 0;
    }
    #header {
        background-position: 0 5.5em;
            -webkit-background-size: 55px 55px;
            -moz-background-size: 55px 55px;
        background-size: 55px 55px;
    }
    #header h1, #header h2 {
        margin-left: 66px;
    }
    #header h1 a {
        font-size: 100%;
        font-size: var(--ct_fns_header-txt);
    }
    .mobile-top-bar {
        padding: 0;
    }
    #search-top-box-input {
        display: none;
    } 
    #main-content {
        margin: 0 1em 0 1em;
    }
    #page-content {
        font-size: 0.9em;
    }
    .changes-list-item .revision-no {
        display: none;
    }
    #recent-posts-category {
        width: 100%;
    }
    .page-options-bottom a {
        padding: 0 4px;
    }
    #edit-page-title {
        max-width: 90%;
    }
    .license-area {
        font-size: 0.8em;
    }
}
 
/* ---------------- #7.4 Very narrow Media Query (Up to 400px device width) ---------------- */
 
@media (max-width: 400px) {
    #toc {
        display: block;
        float: none !important;
        margin: 1em 0 !important;
    }
    .scp-image-block {
        float: none !important;
        margin: 0 auto 1em auto !important;
    }
}
 
/* ---------------- #7.5 Mini Tablet Media Query (581px - 767px device width) ---------------- */
@media (min-width: 581px) and (max-width: 767px) {
    :root {
        --ct_fns_header-txt: 140%;
    }
    #header {
        background-position: 1em 4em;
            -webkit-background-size: 77px 77px;
            -moz-background-size: 77px 77px;
        background-size: 77px 77px;
    }
    #header h1, #header h2 {
        margin-left: 93px;
    }
    #header h1 a {
        font-size: 140%;
        font-size: var(--ct_fns_header-txt);
    }
    #header, .mobile-top-bar {
        max-width: 90%;
    }
    .top-bar {
        display: block;
    }
    .mobile-top-bar {
        display: none;
    }
    #search-top-box-input {
        width: 8em;
    }
    #side-bar {
        max-width: 80%;
    }
    #main-content {
        margin: 0 3em 0 2em;
    }
    .page-options-bottom a {
        padding: 0 6px;
    }
    .license-area {
        font-size: 0.9em;
    }
}
 
/* ---------------- #7.6 Tablet Media Query (768px - 979px device width) ---------------- */
@media (min-width: 768px) and (max-width: 979px) {
    :root {
        --ct_fns_header-txt: 160%;
    }
    #header {
        background-position: 1em 4em;
            -webkit-background-size: 88px 88px;
            -moz-background-size: 88px 88px;
        background-size: 88px 88px;
    }
    #header, #top-bar, #side-bar {
        max-width: 100%;
    }
    #header h1, #header h2 {
        margin-left: 106px;
    }
    #header h1 a {
        font-size: 160%;
        font-size: var(--ct_fns_header-txt);
    }
    #top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a {
        width: 150px;
    }
    .top-bar li {
        margin: 0;
    }
    #main-content {
        margin: 0 4em 0 20em;
    }
    #page-content div, #page-content div table {
        clear: both;
    }
    .content-panel.left-column, .content-panel.right-column  {
        float: left;
        width: 99%;
    }
    .page-options-bottom a {
        padding: 0 7px;
    }
    .license-area {
        font-size: 0.95em;
    }
    td.name {
        width: 40%;
    }
    td.title {
        width: 30%;
    }
}
 
/* ++++++++++++++++ 8.0 Interwiki-module ++++++++++++++++ */
div.scpnet-interwiki-wrapper {
    margin-left: -5px;
    width: 17em;
}
iframe.scpnet-interwiki-frame {
    border: none;
    height: 325px;
    width: 17em;
}
@media (min-width: 768px) {
    iframe.scpnet-interwiki-frame {
        height: 325px;
        width: 18em;
    }
    div.scpnet-interwiki-wrapper {
        width: 18em;
    }
}

Installation of the Common Theme

This theme contains all bugfixes and support for all mods, that can be applied without compatibility issues.

If after installing this theme you encounter any error or problem, ask Dr_Grom to help you fix the issue or create a compatibility-fix, in case something on your wiki is incompatible with the Common-Theme. Even if you fix the problem yourself, please inform Dr_Grom.

How to install:

• Go to the "Required changes" menu and follow the instructions.
• Go to the "Optional Mods" menu and follow the instructions to activate the optional mods you want.
• Go to the "Custom Themes" menu and follow the instructions in the "Sandbox Theme" tab. The other tabs you may or may not find there are optional.
• Add yourself to the list of wikis using the Common Theme. You can add a contact responsible for your theme. This is to make sure that you will receive update-notices and will be asked for approval of new features.
• It is recommended to use the Black Highlighter Theme Compatibilizer to make the BHL-Theme (former nuTheme) compatible with the modifications of the Common Theme.

Visible changes (without mods):

• The mobile topbar is right-aligned
• The search box no longer overlaps with the header text on narrow screens (unless your sub-header text is very wide)
• Sidebar-elements with line-breaks are now indenting
• On resolutions between 580px and 768px the normal topbar is still shown. The mobile topbar is only shown below 580px.
  • If your normal topbar is too wide for this you need the additional-topbar-variant mod.
• Removed the font "Nanum Gothic", which was only used for the three lines-icon that opens the mobile sidebar.
• Reduced overlapping of elements on very narrow screens.
• Codeboxes and Blockquotes (this grey boxes) now have a white background in tabs.
• The left row of the forum is a bit wider on screens < 979px width. (Copied from CN)

Known Issues:

• You must still import the Credit-Module CSS of your preference separately, as there are at least two versions in circulation that are not compatible to each other.
• Using the side- and topbar mods (or maybe using the Common Theme as such) may lead to issues with the Black Highlighter Theme (formerly known as nu-Theme) and its variants. A fix is in the making.
• There should be no real issues with Sigma-9 variants, however they might need an update.

GDPR Info:
This Theme imports FontAwesome 4.3.0 from https://www.bootstrapcdn.com/ / their Privacy Policy. Due to some restrictions of Wikdiot, I have not yet been able to transfer to and load it from Wikidot's file servers.

Required changes

Required changes

Theme

Changes in your Theme (component:theme)

• Make a backup-copy of your original theme, or at least name the Revision accordingly
• Delete the content of component:theme
• Replace it with the following:

[[code type="css"]]
@import url('http://o5command-int.wdfiles.com/local--files/tech-team:common-theme/Sigma-9-Common-Theme-1.3.7.min.css');
@import url('http://scp-int.wdfiles.com/local--code/credit:style/1');
 
/*
    SCP Sigma 9 - Common Theme 1.3.7
    [2020 Wikidot Theme - CC BY-SA 3.0]
    Created for the SCP Foundation by Aelanna
    Edited for SCP Foundation by Crayne, Dr Devan, anqxyr, DrMagnus, psdnbluesoul
 
    Extensions:
    - Font Awesome 4.3.0 by @davegandy under SIL OFL 1.1 (Font) and MIT License (CSS)
    - Common Theme, bugfixes, top- and sidebar-mods by Dr_Grom
    - Support for Asian languages by Nanimono Demonai
    - Interwiki-module by Resure
    - Credit-module by C-take, physicslike, sinazugawa Nanimono Demonai, improved by Dr Devan and Boyu12, and adapted Dr_Grom
    - Colmod by Boyu12
    ... Extend as you see fit ...
*/
 
[[/code]]

• Add your custom changes below the */
• The @import line imports the Common Theme and the Credit-Module-CSS to your wiki, you can change and extend everything else, just make sure nothing is above @import.
• Make sure to import the correct Credit-Module-CSS, unless you are already using the version of SCP-INT. The INT-Version currently is visually bugged.
  • Change the …scp-int… part in the URL accordingly, so the path looks somewhat like this: http://scp-wiki-de.wdfiles.com/local--code/credit:style/1

Autoupdates: If you do not want to update to the latest version manually after an update, you can replace the first @import line with this:
@import url('http://o5command-int.wdfiles.com/local--code/tech-team:common-theme/1');
However, this is not recommended, as you give up version control and get updates immediately. While minor updates and bugfixes should pose no problem, you should test updates before implementing them. It is suggested to test the Beta version before a major update is rolled out. Add yourself to the list on top to be explicitly informed before an update.

Note: This theme is not loaded from a file generated by a code block, but as a real css file with a minified code (no comments, no empty lines). You can copy the file and upload it elsewhere if you like. Each version will be rolled out in an own file, so in case of compatibility issues after an update, you can easily roll back until a fix is available. However, that means you will not receive automatic updates. You will receive instructions with every update.
You can load the previous version by replacing the "Sigma-9-Common-Theme-1…min.css" with "Sigma-9-Common-Theme-1.2.min.css" in the first line.

Sidebar

Changes in your Sidebar (nav:side)

• Find the first line: [[div class="side-block"]] from the top.
• Above add:
  • [[div class="side-bar-container"]]
• Find the line: [[a href="#" class="close-menu"]] at the bottom.
• Above add:
  • [[/div]]
• It is crucial you place these right!

Credit-Module and Colmod

Installing the Credit-Module and the Colmod

It is not necessarily required, but strongly recommended to install these, if you have not done so already.

• Follow the copy instructions here and here.

Changes in your Credit-Module-Startmodules (credit:start and credit:start-standalone)

• Above you import the Credit-Module-CSS. You can remove these lines from the Startmodules:

[[module css]]
@import url('http://scp-int.wdfiles.com/local--code/credit:style/1');
[[/module]]

Changes in your Coltop-Startmodule (component:coltop)

• This theme contains the Coltop-CSS-Code and above you import the Credit-Module-CSS. You can remove these lines from the Coltop-Startmodule:

[[module css]]
@import url('http://scp-int.wikidot.com/component:colstyle/code/1');
[[/module]]

Optional Mods

Topbar mods

When making changes to your topbar menus, remember to make the changes to all variants - normal and mobile topbar (at least if you want them in both)

Homebutton

Changes in your Topbar (nav:top)

• Upload this file to your component:theme page.
• Add (preferably as the first menu item) to your topbar:
  • * [[a href="/" title="Frontpage" class="homebutton"]]x[[/a]]
• Translate "Frontpage"

Nested Topbar

Changes in your Topbar (nav:top)

• Add nested menus like this:

* Top-Level shown directly in the topbar
 * [[[Links in the normal topbar]]]
 * Nested menu title[[span class="topbar_arrow"]]►[[/span]]
  * [[[Nested menu link]]]
  * [[[Notice this level has two spaces in front of it]]]
  * [[[If you really feel like adding even more levels, ask Dr_Grom for assistance]]]

• ► is a symbol of your choice; I suggest ▼ for the mobile topbar variants, as the nested menus open to the bottom instead of the right.
• It is recommended to not nest the right-most menu(s).

Images in Topbar

Changes in your Topbar (nav:top)

• Add images to the topbar like this:

* Branches
 * [[image http://scp-wiki-de.wdfiles.com/local--files/main/int.png]] [http://scp-int.wikidot.com Translation Archive (INT)]
 * [[image http://scp-wiki-de.wdfiles.com/local--files/main/us.png]] [http://www.scp-wiki.net English (EN)]

• If your menu with images is overlapping with the display border, you are free to ask Dr_Grom for a fix.

More topbar variants

Adds more device-width-depending variants of the topbar. If you stumble across problems during this, feel free to ask for assistance.

Changes in your Topbar (nav:top)

• Find the code:

[[div class="open-menu"]]
[#side-bar ≡]
[[/div]]

• Move it above the line [[div class="mobile-top-bar"]]

• Add a new topbar-variant like this:

[[div class="mini-top-bar"]]
* Menu items
* ...
[[/div]]

• Wherein mini-top-bar is the class of this example, you can change it to whatever you like. This class is needed for the CSS part in the theme.

Changes in your Theme (component:theme)

This modification shall be customized for your wiki and depending on the amount of topbar menu items you want in each device widths. The following code is an example of how to add a new variant called mini-top-bar that is displayed on resolutions below 412px and contains even fewer menu items than the mobile topbar.

#top-bar .mini-top-bar {
    display: none;
    position: absolute;
    right: 1em;
    bottom: 0px;
    z-index: 0;
}
#top-bar div.mini-top-bar ul li ul li ul {
    left: 50px;
    top: 19px;
}
@media (max-width: 412px) {
    #top-bar .top-bar, #top-bar .mobile-top-bar {
        display: none;
    }
    #top-bar .mini-top-bar {
        display: block;
    }
}

• .mini-top-bar is the class of the new topbar, that you have set in nav:top. This must be the same in the topbar as well as the theme. In the CSS the "." is also required, but not in the topbar.
• Change 412px to whatever you like.
• In case you want the new topbar to be displayed e.g. between 420px and 760px, the line would be:
  • @media (min-width: 420px) and (max-width: 760px) {
• If you want to add more than one additional topbar, you need to adjust also the line #top-bar .top-bar, #top-bar .mobile-top-bar { and add a new entry {{#top-bar .your-topbar-class. Make sure to separate the entries with a ","

Sidebar mods

Social media icon size

Set size for social media icons in CSS

Changes in your Sidebar (nav:side)

• Go to the social-media-block in your sidebar and remove all style="width:30px; height:30px;" expressions from all icons.
• Find the line [[div class="side-block" style="background-color: #e5e5ff;"]]
• Add the class side-links so it looks similar to:
  • [[div class="side-block side-links" style="background-color: #e5e5ff;"]]
• Remove the following expressions above and below the links and images:

[[div class="menu-item"]]
[[=]]

[[/=]]
[[/div]]

Changes in your Theme (component:theme)

• This is optional! Use if the default value of 30px does not fit well for your wiki. You can enlarge or downsize them.
• Add to your theme:

#side-bar .side-links img {
    height: 30px;
    width: 30px;
}

• Change 30px (the default value) to any dimension that fits well, depending on the amount of social media icons you have. Always set both dimensions to the same value.

Collapsibles in the sidebar

Changes in your Sidebar (nav:side)

• Collapsibles do not work different here than elsewhere, in other words, just put the menu in a collapsible:

[[collapsible show="Collapsible title" hide="Collapsible title" folded="yes"]]
[[div class="menu-item"]]
[[image series.png]][[[Link]]]
[[/div]]
...
[[/collapsible]]

• You can set folded="yes" to no to load the collapsible opened.
• Shall not contain [[div class="heading"]] elements.

Changes in your Theme (component:theme)

• Add the following line to make normal menu headings the same size as that of collapsibles.
  • It is not advised to lower the size of the collapsible headings instead.

#side-bar .heading {
    font-size: 9pt;
}

Colmod in the sidebar

• The Colmod does not work different here than elsewhere:

[[include component:coltop show=Colmod title|hide=Colmod title|folded=true]]
[[div class="menu-item"]]
[[image main.png]][[[Link]]]
[[/div]]
…

[[include component:coltop show=Show more...|hide=Show more...]]
[[div class="menu-item"]]
[[image default.png]][[[Link]]]
[[/div]]
…
[[include component:colend |nohide=true]]
[[include component:colend |nohide=true]]

Custom Themes

Custom Themes

The Common Theme has a major advantage over the older Sigma-9 theme regarding customization: Variables. They can easily be changed without programming knowledge and can be named as desired. You could even create a translation table for your wiki so your users can find your variables easier (ask Grom for more details).

The only disadvantage: Variables are not compatible with very old browsers and the Internet Explorer; the amount of users using these should be very low though.

Sandbox Theme v.1.0

Your Sandbox should have the exact same features that your main Wiki has, so users can try their code properly. Therefore you need to import your theme, then make some adjustments like another logo and header background. As your Sandbox must be functioning for everybody, the variables are not enough and the original values are required. You can find an explanation in the using variables tab.

It is suggested to adopt the CSS-policy of the EN wiki. Especially having your users create a page that is imported via the standard page-importing and not via the CSS module is more user friendly and gives you more control.

When you have installed the Common Theme, it is advised to update all custom themes on your wiki to the new standards and to use variables.

Changes in your Sandbox's Theme (component:theme)

• Make a backup-copy of your original theme, or at least name the Revision accordingly
• Delete the content of component:theme
• Replace it with the following:

[[code type="css"]]
@import url('http://YOUR-WIKI.wdfiles.com/local--code/component:theme/1');
@import url('http://o5command-int.wdfiles.com/local--files/tech-team:common-theme/Sigma-9-Common-Sandbox-Theme-1.0.min.css');
 
/*
    SCP Sigma 9 - Common Theme - Sandbox Edition 1.0
    [2020 Wikidot Theme - CC BY-SA 3.0]
    Created for the SCP Foundation by Aelanna
    Edited for SCP Foundation by Crayne, Dr Devan, anqxyr, DrMagnus, psdnbluesoul
 
    Extensions:
    - Font Awesome 4.3.0 by @davegandy under SIL OFL 1.1 (Font) and MIT License (CSS)
    - Common Theme, bugfixes, top- and sidebar-mods by Dr_Grom
    - Support for Asian languages by Nanimono Demonai
    - Interwiki-module by Resure
    - Credit-module by C-take, physicslike, sinazugawa Nanimono Demonai, improved by Dr Devan and Boyu12, and adapted Dr_Grom
    - Colmod by Boyu12
    - Sandbox Edition by Dr_Grom
*/
[[/code]]

• On top in the line @import url('http://YOUR-WIKI.wdfiles.com/local--code/component:theme/1'); change the YOUR-WIKI to the subdomain of your sandbox (the part before the ".wikidot.com").

+ Show the Sandbox Edition's code

The following is included in the CSS file loaded in the code above:

@import url('http://YOUR-WIKI.wdfiles.com/local--code/component:theme/1');
/*
    SCP Sigma 9 - Common Theme - Sandbox Edition 1.0
    [2020 Wikidot Theme - CC BY-SA 3.0]
    Created for the SCP Foundation by Aelanna
    Edited for SCP Foundation by Crayne, Dr Devan, anqxyr, DrMagnus, psdnbluesoul
 
    Extensions:
    - Font Awesome 4.3.0 by @davegandy under SIL OFL 1.1 (Font) and MIT License (CSS)
    - Common Theme, bugfixes, top- and sidebar-mods by Dr_Grom
    - Support for Asian languages by Nanimono Demonai
    - Interwiki-module by Resure
    - Credit-module by C-take, physicslike, sinazugawa Nanimono Demonai, improved by Dr Devan and Boyu12, and adapted Dr_Grom
    - Colmod by Boyu12
    - Sandbox Edition by Dr_Grom
*/
 
:root {
    --ct_col_searchbox-gradient-1: #063830;
    --ct_col_searchbox-gradient-2: #126657;
    --ct_col_searchbox-gradient-3: #228977;
    --ct_col_searchbox-gradient-4: #2B9885;
}
 
/* This changes the header images */
div#container-wrap {
    background-image: url(/local--files/component:theme/body_bg.png);
    background-image: var(--ct_bg_header-image); 
}
#header {
    background-image: url(/local--files/component:theme/logo.png);
    background-image: var(--ct_bg_header-logo);
}
 
/* This adjusts the search box's color */
#search-top-box-input {
    background-color: #063830;
    background-color: var(--ct_col_searchbox-gradient-1);
}
#search-top-box-input:hover,
#search-top-box-input:focus {
    background-color: #126657;
    background-color: var(--ct_col_searchbox-gradient-2);
}
#search-top-box-form input[type=submit] {
    background-color: #126657;
    background-color: var(--ct_col_searchbox-gradient-2);
    background: linear-gradient(to bottom, #228977,#126657,#063830);
    background: linear-gradient(to bottom, var(--ct_col_searchbox-gradient-3),var(--ct_col_searchbox-gradient-2),var(--ct_col_searchbox-gradient-1));
}
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
    background-color: #228977;
    background-color: var(--ct_col_searchbox-gradient-3);
    background: linear-gradient(to bottom, #2B9885,#228977,#126657);
    background: linear-gradient(to bottom, var(--ct_col_searchbox-gradient-4),var(--ct_col_searchbox-gradient-3),var(--ct_col_searchbox-gradient-2));
}

Using variables

What are variables?
Normally, when you are editing CSS you need to change the value of a property that is within the selector. Instead of knowing what a property and a selector are, and instead of finding them in the CSS, you can just copy the variables to your custom theme and change their values. They are fetched by the respective properties automatically. As long as you are basically just recoloring the Sigma-9 theme (which applies for most custom themes), you don't need anything but variables. You can find more info on CSS variables here.

How to use variables?
This is an example of what you can drop in your custom theme:

[[code type="css"]]
/* 
    Credits
*/
 
:root {
    --ct_bg_body: #fff;
    --ct_col_body-txt: #333;
}
[[/code]]

• :root is the selector of the whole document. That means, that these variables are global; it is possible to change variables based on dependencies, but we want everything!
• --ct_bg_body is a variable.
  • The name can be everything, only the -- is required.
  • All variables of the Common Theme begin with the prefix ct_. That is meant to prevent collisions in case somebody uses a variable that accidentally has the same name.
  • _bg_ means that it is a background. You can find all prefixes above in the commented code of the Common Theme.
• #fff is a color code.
  • The easiest color codes are hexadecimal, starting with # and a 3- or 6-digit number. 3-digit numbers are abbreviate 6-digit numbers; #A63 is the same as #AA6633.
  • You can find more explanation of color codes here.

Those above are default values. You can change them. E.g. changing --ct_col_body-txt to #363 makes the background of the whole page a pale dark green.

How do I know what variable to use?
If you can't find the variable by its name, you can use the developer tools of your browser (on Desktop). In your browser press F12 (or Ctrl+Shift+I); a cryptic window with lots of code opens. Go to the inspector tab. On the left or top you see the source code, on the right or bottom you see the CSS code of the active element. You can browse through the code to find your element, or click the little pointer-icon on the top left (I think it is in the same spot in all browsers) and then click the element you want to change. In the CSS-Window, you will now see the CSS code of that element. There, seek if you can find the variable. If not, maybe the element is not controled via variables, and you need to copy the selector (the stuff before the { ) and the property (the stuff before the : ) to your theme. Do not forget the ; at the end of the line and the } to close the selector. Or ask Grom for help.

What if I want to make the theme fully compatible?
Then you need to copy the whole selectors and properties you want to change. Make sure only to copy selectors and properties that you need. Also see the next tab for tips. However, it is highly unlikely that any of the page's visitors has an incompatible browser at all. These would just see the default values.

How to change the header text and slogan?
The Common Theme has variables for this popular thing:

--ct_cnt_alt-header-txt: "";
--ct_cnt_alt-slogan-txt: "";
--ct_col_alt-header-txt: var(--ct_col_header-txt);
--ct_col_alt-slogan-txt: var(--ct_col_slogan-txt);
--ct_fns_alt-header-txt: 43.8px;
--ct_fns_alt-slogan-txt: 13.4px;
--ct_fns_header-txt: 0;
--ct_fns_slogan-txt: 0;

• Do not edit the last two.
• As you can see, variables can contain variables. You can overwrite that with a color code.
• The font-sizes can not be in %.

Updating existing themes

Once you have installed the Common Theme on your wiki, and especially when you are using mods, you will notice that your existing custom themes are not fully compatible. And even if they are not, you should check every custom theme in your branch, especially those that are made by your branche's users.

How do custom themes work anyway?
Custom themes are a piece of CSS code that is loaded after the basic theme and overwrites all properties that are the same in both codes. That is also why you should only have properties in your theme that you need, and why you should clean up old Custom Themes.

Cleanup
Many old custom themes are just copies of EN's theme with changes. That means the custom theme is long outdated and may be incompatible with things you added to your theme. See which properties are changed and delete everything that is not used.

Use variables
For all properties that are controled via variables in the Common theme, you only need the variables in the :root selector. You can delete the properties themselves.

Example
You have a theme that changes the basic font-color to blue with the property color: #00F;.

Bad code
This is just an adjusted copy of the original code with obsolete properties.

body {
    background: #fff;
    color: #00F;
    font-size: 0.80em;
}

Bad code
While this uses a variable, the variable is not declared. The Value #00F is overwritten and the variable value from the Common Theme is used.

body {
    color: #00F;
    color: var(--ct_col_body-txt);
}

Meh code
This is just the changed property. It is fully compatible, but if it is used with other themes that change that value via variables, it would have to be overwriten because the variable is not a value of the property anymore, as this overwrites the variable from the Common Theme.

body {
    color: #00F;
}

Good code
This code just changes the variable. As the property is already controled by the variable, and it is not overwriten, it is not necessary to add anything but the variable itself.

:root {
    --ct_col_body-txt: #00F;
}

Perfect code
This code changes the variable and is compatible. Its downside is, that it is not as easy to use as just changing the variable.

:root {
    --ct_col_body-txt: #00F;
}
body {
    color: #00F;
    color: var(--ct_col_body-txt);
}