Side Tooltest Encode
[[div id="u-side-bar-0"]]

[[div class="side-block" style="background-color: #fff0f0;"]]
[[collapsible show="Useful Pages" hide="Useful Pages" hideLocation="both"]]

[[div class="menu-item"]]
[http://www.scp-wiki.net/advanced-formatting-and-you Advanced Formatting and You]
[http://www.scp-wiki.net/photoshopping-your-scp Photoshopping Your SCP]
[http://www.scp-wiki.net/scp-style-resource SCP Style Resource]
[http://www.wikidot.com/doc-wiki-syntax:start Wiki Syntax]
[[/div]]

[[/collapsible]]
[[/div]]

[[div class="side-block"]]
[[=]]
[[div class="heading"]]
++++* STANDALONE BUTTONS
[[size 70%]]//※DON'T CLICK THESE BUTTONS WHEN "__THE EDIT PAGE FORM__" IS DISPLAYED.//[[/size]]
[[/div]]
[[/=]]

[[table class="ocbutton-wrap"]]
[[row]]
[[cell class="ocbutton"]]
[[button edit text="Edit"]]
[[/cell]]
[[cell class="ocbutton"]]
[[button source text="Page Source"]]
[[/cell]]
[[/row]]

[[row]]
[[cell class="ocbutton"]]
[[button history text="History"]]
[[/cell]]
[[cell class="ocbutton"]]
[[button files text="Files"]]
[[/cell]]
[[/row]]
[[/table]]
 _

[[/div]]

[[div class="side-block toc-wrap"]]
[[collapsible show="Table of Contents" hide="fold" hideLocation="both"]]
[[div class="toc-box"]]
[[toc]]
[[/div]]
[[/collapsible]]
[[/div]]

[[div class="side-block"]]
[[collapsible show="★COPY TOOLS★" hide="★COPY TOOLS★" hideLocation="both"]]
[[div class="octool"]]

[[div class="heading"]]
collapsible
[[/div]]
[[html]]
    <head>
        <script type="text/javascript">
        var clipboardCopy = function(){
            var urltext = document.getElementById("url");
            urltext.select();
            document.execCommand("copy");
        }
        </script>
    </head>
    <body>
<style type="text/css">
input[type="button" i] {
    transition-duration: 1.5s;
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #fff3b8;
}
input[type="button" i]:hover {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
input[type="button" i]:active {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
        </style>
        <textarea type="text" id="url" rows="1" cols="10">
[[collapsible show="+ open" hide="- close"]]
text
[[/collapsible]]</textarea>
        <br>
        <input type="button" value="Copy" onclick="clipboardCopy()">
    </body>
[[/html]]

[[div class="heading"]]
ruby
[[/div]]
[[html]]
    <head>
        <script type="text/javascript">
        var clipboardCopy = function(){
            var urltext = document.getElementById("url");
            urltext.select();
            document.execCommand("copy");
        }
        </script>
    </head>
    <body>
<style type="text/css">
input[type="button" i] {
    transition-duration: 1.5s;
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #fff3b8;
}
input[type="button" i]:hover {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
input[type="button" i]:active {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
        </style>
        <textarea type="text" id="url" rows="1" cols="10">
[[span class="ruby"]]word[[span class="rt"]]ruby[[/span]][[/span]]</textarea>
        <br>
        <input type="button" value="Copy" onclick="clipboardCopy()">
    </body>
[[/html]]

[[div class="heading"]]
tabs
[[/div]]
[[html]]
    <head>
        <script type="text/javascript">
        var clipboardCopy = function(){
            var urltext = document.getElementById("url");
            urltext.select();
            document.execCommand("copy");
        }
        </script>
    </head>
    <body>
<style type="text/css">
input[type="button" i] {
    transition-duration: 1.5s;
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #fff3b8;
}
input[type="button" i]:hover {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
input[type="button" i]:active {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
        </style>
        <textarea type="text" id="url" rows="1" cols="10">
[[tabview]]
[[tab Title 1]]
Text goes here. Pretend this is a draft.
[[/tab]]
[[tab Title 2]]
More text in another tab! You can add lots of tabs.
[[/tab]]
[[/tabview]]</textarea>
        <br>
        <input type="button" value="Copy" onclick="clipboardCopy()">
    </body>
[[/html]]

[[div class="heading"]]
picture
[[/div]]
[[html]]
    <head>
        <script type="text/javascript">
        var clipboardCopy = function(){
            var urltext = document.getElementById("url");
            urltext.select();
            document.execCommand("copy");
        }
        </script>
    </head>
    <body>
<style type="text/css">
input[type="button" i] {
    transition-duration: 1.5s;
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #fff3b8;
}
input[type="button" i]:hover {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
input[type="button" i]:active {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
        </style>
        <textarea type="text" id="url" rows="1" cols="10">
[[div class="scp-image-block block-right" style="width:300px;"]]
[[image FileID style="width:300px;" link=#]]
[[div class="scp-image-caption" style="width:300px;"]]
text
[[/div]]
[[/div]]</textarea>
        <br>
        <input type="button" value="Copy" onclick="clipboardCopy()">
    </body>
[[/html]]

[[div class="heading"]]
footnote
[[/div]]
[[html]]
    <head>
        <script type="text/javascript">
        var clipboardCopy = function(){
            var urltext = document.getElementById("url");
            urltext.select();
            document.execCommand("copy");
        }
        </script>
    </head>
    <body>
<style type="text/css">
input[type="button" i] {
    transition-duration: 1.5s;
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #fff3b8;
}
input[type="button" i]:hover {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
input[type="button" i]:active {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
        </style>
        <textarea type="text" id="url" rows="1" cols="10">
[[footnote]]text[[/footnote]]</textarea>
        <br>
        <input type="button" value="Copy" onclick="clipboardCopy()">
    </body>
[[/html]]

[[div class="heading"]]
table
[[/div]]
[[html]]
    <head>
        <script type="text/javascript">
        var clipboardCopy = function(){
            var urltext = document.getElementById("url");
            urltext.select();
            document.execCommand("copy");
        }
        </script>
    </head>
    <body>
<style type="text/css">
input[type="button" i] {
    transition-duration: 1.5s;
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #fff3b8;
}
input[type="button" i]:hover {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
input[type="button" i]:active {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
        </style>
        <textarea type="text" id="url" rows="1" cols="10">
||~ head 1 ||~ head 2 ||~ head 3 ||
|| cell 1 || cell 2 || cell 3 ||
|||| long cell 4 || cell 5 ||
||cell 6 |||| long cell 7 ||
|||||| looong cell 8||</textarea>
        <br>
        <input type="button" value="Copy" onclick="clipboardCopy()">
    </body>
[[/html]]

[[div class="heading"]]
blackbox (█)
[[/div]]
[[html]]
    <head>
        <script type="text/javascript">
        var clipboardCopy = function(){
            var urltext = document.getElementById("url");
            urltext.select();
            document.execCommand("copy");
        }
        </script>
    </head>
    <body>
<style type="text/css">
input[type="button" i] {
    transition-duration: 1.5s;
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #fff3b8;
}
input[type="button" i]:hover {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
input[type="button" i]:active {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
        </style>
        <textarea type="text" id="url" rows="1" cols="10">
████</textarea>
        <br>
        <input type="button" value="Copy" onclick="clipboardCopy()">
    </body>
[[/html]]

[[div class="heading"]]
color
[[/div]]
[[html]]
    <head>
        <script type="text/javascript">
        var clipboardCopy = function(){
            var urltext = document.getElementById("url");
            urltext.select();
            document.execCommand("copy");
        }
        </script>
    </head>
    <body>
<style type="text/css">
input[type="button" i] {
    transition-duration: 1.5s;
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #fff3b8;
}
input[type="button" i]:hover {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
input[type="button" i]:active {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
        </style>
        <textarea type="text" id="url" rows="1" cols="10">
##333|text##</textarea>
        <br>
        <input type="button" value="Copy" onclick="clipboardCopy()">
    </body>
[[/html]]
[[div class="heading"]]
module CSS
[[/div]]
[[html]]
    <head>
        <script type="text/javascript">
        var clipboardCopy = function(){
            var urltext = document.getElementById("url");
            urltext.select();
            document.execCommand("copy");
        }
        </script>
    </head>
    <body>
<style type="text/css">
input[type="button" i] {
    transition-duration: 1.5s;
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #fff3b8;
}
input[type="button" i]:hover {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
input[type="button" i]:active {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
        </style>
        <textarea type="text" id="url" rows="1" cols="10">
[[module CSS]]

[[/module]]</textarea>
        <br>
        <input type="button" value="Copy" onclick="clipboardCopy()">
    </body>
[[/html]]

[[div class="heading"]]
Equations
[[/div]]
[[html]]
    <head>
        <script type="text/javascript">
        var clipboardCopy = function(){
            var urltext = document.getElementById("url");
            urltext.select();
            document.execCommand("copy");
        }
        </script>
    </head>
    <body>
<style type="text/css">
input[type="button" i] {
    transition-duration: 1.5s;
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #fff3b8;
}
input[type="button" i]:hover {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
input[type="button" i]:active {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
        </style>
        <textarea type="text" id="url" rows="1" cols="10">
[[math]]
\begin{align}
E = mc^2
\end{align}
[[/math]]</textarea>
        <br>
        <input type="button" value="Copy" onclick="clipboardCopy()">
    </body>
[[/html]]

[[div class="heading"]]
Inline math
[[/div]]
[[html]]
    <head>
        <script type="text/javascript">
        var clipboardCopy = function(){
            var urltext = document.getElementById("url");
            urltext.select();
            document.execCommand("copy");
        }
        </script>
    </head>
    <body>
<style type="text/css">
input[type="button" i] {
    transition-duration: 1.5s;
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #fff3b8;
}
input[type="button" i]:hover {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
input[type="button" i]:active {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
        </style>
        <textarea type="text" id="url" rows="1" cols="10">
[[$ E = mc^2 $]]</textarea>
        <br>
        <input type="button" value="Copy" onclick="clipboardCopy()">
    </body>
[[/html]]

[[div class="heading"]]
SCP
[[/div]]
[[html]]
    <head>
        <script type="text/javascript">
        var clipboardCopy = function(){
            var urltext = document.getElementById("url");
            urltext.select();
            document.execCommand("copy");
        }
        </script>
    </head>
    <body>
<style type="text/css">
input[type="button" i] {
    transition-duration: 1.5s;
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #fff3b8;
}
input[type="button" i]:hover {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
input[type="button" i]:active {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
        </style>
        <textarea type="text" id="url" rows="1" cols="10">
[[>]]
[[module Rate]]
[[/>]]

**Item #:** SCP-XXXX

**Object Class:** Safe/Euclid/Keter (indicate which class)

**Special Containment Procedures:** [Paragraphs explaining the procedures]

**Description:** [Paragraphs explaining the description]

**Addendum:** [Optional additional paragraphs]</textarea>
        <br>
        <input type="button" value="Copy" onclick="clipboardCopy()">
    </body>
[[/html]]

[[/div]]
//[[size 80%]]Please reload the page if the tool doesn't be displayed. [[/size]]//
[[/collapsible]]
[[/div]]

[[div class="side-block" style="background-color: #fff0f0;"]]
[[collapsible show="About this" hide="About this" hideLocation="both"]]
[[div class="aboutbox"]]
[[size 80%]]**Author:** [[*user 7happy7]][[/size]]
[[size 80%]]**Adviser:** [[*user C-take]][[/size]]
[[size 80%]]**License:** CC BY-SA 3.0[[/size]]
[[/div]]
[[div_ class="heading"]]
Reference materials
[[/div]]
[[div class="aboutbox"]]
[[size 80%]]**Title:** サイドバー[[/size]]
[[size 80%]]**Source:** [http://scp-jp-sandbox2.wikidot.com/nav:side SCP-JPサンドボックスII][[/size]]
[[size 80%]]**Author:** UNKNOWN, [http://ja.scp-wiki.net/ SCP-JPwiki][[/size]]
[[size 80%]]**License:** CC BY-SA 3.0[[/size]]
[[/div]]

[[div class="aboutbox"]]
[[size 80%]]**Title:** Cocoonist's Sidebar[[/size]]
[[size 80%]]**Source:** [http://shitake-crude-production.wikidot.com/cocoonist-s-sidebar 椎茸天然製造][[/size]]
[[size 80%]]**Author:** [[*user Cocoonist]][[/size]]
[[size 80%]][[span style="color: transparent;"]]**Author:**[[/span]] [[*user Dr Devan]][[/size]]
[[size 80%]]**License:** CC BY-SA 3.0[[/size]]
[[/div]]

[[div_ class="heading"]]
How to introduce this tool.
[[/div]][[size 80%]]Copy the following code and paste it in your sandbox page.[[/size]]
 _
[[html]]
    <head>
        <script type="text/javascript">
        var clipboardCopy = function(){
            var urltext = document.getElementById("url");
            urltext.select();
            document.execCommand("copy");
        }
        </script>
    </head>
    <body>
<style type="text/css">
input[type="button" i] {
    transition-duration: 1.5s;
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #fff3b8;
}
input[type="button" i]:hover {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
input[type="button" i]:active {
    cursor: pointer;
    padding: 0.3em 0.6em;
    font-weight: normal;
    color: #666;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #f58282;
    text-decoration: underline;
}
        </style>
        <textarea type="text" id="url" rows="1" cols="20">
[[include :scp-sandbox-3:component:usefultool-module]]</textarea>
        <br>
        <input type="button" value="Copy" onclick="clipboardCopy()">
    </body>
[[/html]]

[[/collapsible]]
[[/div]]

[[module css]]
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');

/* FAKE SIDE MENU */
#u-side-bar-0 {
    font-family: Montserrat,sans-serif;
    clear: none;
    float: none;
    position: fixed;
    width: 229.6px;
    bottom: 0.7em;
    right: 3.8em;
    width: 17em;
    padding: 0;
    border: none;
    display: block;
    color: #333;
}
#u-side-bar-0 a {
    color: #b01;
}
#u-side-bar-0 .side-block {
    padding: 10px;
    border: 1px solid #660000;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(102,0,0,.5);
    background: #fff;
    margin-bottom: 15px;
}
#u-side-bar-0 .side-area {
    padding: 10px;
}
#u-side-bar-0 .heading {
    color: #600!important;
    border-bottom: solid 1px #600;
    padding-right: 15px;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 8pt;
    font-weight: bold;
}
#u-side-bar-0 .heading h4 {
    color: #600!important;
}

#u-side-bar-0 p {
    margin: 0;
}
#u-side-bar-0 div.menu-item {
    margin: 2px 0;
    font-size: 85%;
}
#u-side-bar-0 div.menu-item img {
    width: 13px;
    height: 13px;
    border: 0;
    margin-right: 2px;
    position: relative;
    bottom: -2px;
}
#u-side-bar-0 div.menu-item a {
    font-weight: bold;
}
#u-side-bar-0 div.menu-item.inactive img {
    opacity: 0.25;
}
#u-side-bar-0 div.menu-item.inactive a {
    color: #999;
}
#u-side-bar-0 div.menu-item .sub-text {
    font-size: 80%;
    color: #666;
}
#u-side-bar-0 div.menu-item.sub-item {
}

#u-side-bar-0 .collapsible-block-link {
    margin-right: 15px;
    font-weight: bold;
}
#u-side-bar-0 .collapsible-block-unfolded-link {
    border-bottom: solid 1px #600;
}
#u-side-bar-0 .collapsible-block-unfolded-link .collapsible-block-link {
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 8pt;
    color: #600;
}
#u-side-bar-0 .collapsible-block-unfolded-link .collapsible-block-link:hover {
    color: #b01;
    text-decoration: none;
}

#u-side-bar-0 ul{
    list-style-type: none;
    padding: 0 5px 0;
}

.open-menu a {
    display: none !important;
    pointer-events: none !important;
}

.open-menu a:hover {
    display: none !important;
    pointer-events: none !important;
}

@media (max-width: 1025px) {
#u-side-bar-0 {
    width: 80%;
    position: relative;
}
}

/* /////// */
@media (max-width: 1025px) {
#main-content {
    margin: 0 5%;
}
}

@media (max-width: 1025px) {

.open-menu-0 a:hover {
    text-decoration: none !important;
    -webkit-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
    -moz-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
    -ms-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
    -o-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
    box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
}

/* Special thanks for Cocoonist and Dr Devan */

/* Erase it when deleted original side-bar opening/closing style */
.open-menu, .close-menu{display:none !important;}

#side-bar {
    position: fixed;
    width: 229.6px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    top: 0;
    left: -30em;
    display: block !important;
    background-color: rgba(184, 134, 134, 0.8);
    z-index: 50;
    -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;
    transition-duration: 0.7s;
}

#side-bar ~ #main-content:after {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    content: '';
    z-index: 40;
}

#side-bar:hover ~ #main-content:after {
  visibility: visible;
  opacity: 1;
  transition: opacity 500ms;
}

#side-bar:before {
    content: url(http://unofficial-scp-sandbox-jp.wikidot.com/local--files/nav:side-tooltest/sidebar-logo1_50px.png);
    position: fixed;
    left: 20px;
    bottom: 10px;
    width: 40px;
    height: 40px;
    background-color: transparent !important;
    transition-duration: 0.7s;
}

#side-bar:hover {
    position: fixed;
    margin-left: 0;
    left: 0 !important;
    transition-duration: 0.5s;
}

#side-bar:hover:before {
    text-decoration: none !important;
    -webkit-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
    -moz-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
    -ms-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
    -o-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
    box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
    visibility: hidden;
    border-radius: 50%;
    transition: visibility 0.5s ease 0.1s;
    transition-duration: 1s;
}

#side-bar .side-block {
    padding: 1em;
    margin: 1em 0.5em;
}
}

/* /////// */
@media (max-width: 1400px) {
#u-side-bar-0 {
    position: fixed;
    width: 229.6px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    top: 0;
    right: -30em;
    display: block !important;
    z-index: 50;
    -webkit-transition:right 0.5s ease-in-out 0.1s;
    -moz-transition:right 0.5s ease-in-out 0.1s;
    -ms-transition:right 0.5s ease-in-out 0.1s;
    -o-transition:right 0.5s ease-in-out 0.1s;
    transition:right 0.5s ease-in-out 0.1s;
    transition-duration: 0.7s;
    background-color: rgba(248,221,222,0.5);
}

#u-side-bar-0 ~ #main-content:after {
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    content: '';
    z-index: 40;
}

#u-side-bar-0:hover ~ #main-content:after {
  visibility: visible;
  opacity: 1;
  transition: opacity 500ms;
}

#u-side-bar-0:before {
    content: url(http://unofficial-scp-sandbox-jp.wikidot.com/local--files/nav:side-tooltest/logosb3.png);
    position: fixed;
    right: 20px;
    bottom: 10px;
    width: 40px;
    height: 40px;
    background-color: transparent !important;
    transition-duration: 0.5s;
}

/*
#u-side-bar-0:after {
    content: "Hover\Ame!";
    text-align: center;
    white-space: pre;
    color: #666;
    font-family: BauhausLTDemi, 'Nanum Gothic', Arial, sans-serif;
    font-size: 150%;
    position: fixed;
    right: 20px;
    bottom: 60px;
}
*/

#u-side-bar-0:hover {
    position: fixed;
    margin-right: 0;
    right: 0 !important;
    transition-duration: 0.7s;
}

#u-side-bar-0:hover:before {
    text-decoration: none !important;
    -webkit-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
    -moz-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
    -ms-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
    -o-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
    box-shadow: 0px 0px 20px 3px rgba(153,153,153,1);
    visibility: hidden;
    border-radius: 50%;
    transition: visibility 0.5s ease 0.1s;
    transition-duration: 1s;
}

/*
#u-side-bar-0:hover:after {
    text-shadow: 2px 2px 11px #99e;
    color: #779;
    visibility: hidden;
    transition: visibility 0.5s ease 0.1s;
    transition-duration: 1s;
}
*/

#u-side-bar-0 .side-block {
    padding: 1em;
    margin: 1em 0.5em;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
}

.useful-pages,
.octool {
    border: 1px solid #aaa293;
    background: #fff;
    margin-bottom: 2px;
}

.aboutbox {
    background: #fff;
    margin: 6px 0;
}

.ocbutton {
    width: 50%;
    text-align: center;
}

.ocbutton a {
    transition-duration: 1.5s;
    display: inline-block;
    width: 75px;
    white-space: nowrap;
    padding: 0.3em 0.6em;
    font-weight: normal;
    font-size: 90%;
    color: #666!important;
    border: 1px solid #aaa293;
    border-radius: 3px;
    background-color: #fff3b8;
}
.ocbutton a:hover,
.ocbutton a:active {
    background-color: #f58282;
}

.ocbutton-wrap {
    margin-top: 10px;
    padding: 0;
    border: none;
    width: 100%;
    max-width: 100% !important;
}

.ocinfo {
    cursor: default;
    font-size: 170%;
    font-weight: normal;
    color: rgba(105, 95, 135, 0.73);
    text-shadow: 0 0 5px rgba(55, 55, 55, 0.73);
}
.ocinfo ~ .ocinfo-box {
    display: none;
}
.ocinfo:hover ~ .ocinfo-box {
    position: absolute;
    display: inline;
    margin: 0px 0px;
    height: auto;
    width: auto;
    background: #fff;
    border: 1px solid #000;
    color: initial;
    font-size: 0.8em;
    text-shadow: none;
    padding: 1em;
}
#u-side-bar-0 .octool .heading {
    width: 60%;
    text-align: center;
}
#u-side-bar-0 .octool iframe {
    width: 50%;
}
#u-side-bar-0 ::-webkit-scrollbar {
    width: 7px;
}
#u-side-bar-0 ::-webkit-scrollbar-track {
   background: transparent;
   border: none;
   box-shadow: none;
}
#u-side-bar-0 ::-webkit-scrollbar-thumb {
   background: rgba(250,240,250,0.6);
   border-radius: 7px;
   box-shadow: inset 0 0 4px rgba(60,60,60,0.4);
}

@media (min-width: 768px) {
.octool {
    height: 400px;
    overflow-y: scroll;
    overflow-x: visible;
}
.useful-pages {
    height: 300px;
    overflow-y: scroll;
    overflow-x: visible;
}
}

.error-block {
    display: none !important;
    padding: 1em;
    margin: 1em;
    border: 1px solid #FAA;
}

.toc-box {
padding: 0;
}

.toc-box #toc {
font-size: 90%;
min-width: 80px;
max-width: 210px;
max-height: 300px;
overflow-y: scroll;
word-break: break-all;
border: none!important;
background-color: transparent;
}
.toc-box #toc #toc-list {
max-height: 300px!important;
overflow-y: scroll;
}

.toc-box #toc #toc-action-bar,
.toc-box #toc #toc-action-bar a {
display: none!important;
}

.toc-box {
margin: 0;
padding: 0;
display: table;
}#u-side-bar-0 .toc-wrap .collapsible-block-unfolded-link {border-bottom: none;}#u-side-bar-0 .toc-wrap .collapsible-block-unfolded-link .collapsible-block-link {color: #b01;}
[[/module]]

[[/div]]
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License