AGIAT CSS

Módulo de Votos:

Módulo de Votos con Panel Informativo:

• 

  close

  Info

  ---

  X

  Información sobre tu página

  ---

  Más información sobre tu página

  ---

Este tema está fuertemente inspirado en el Tema Penumbra, de EstrellaYoshte.

También puedes cambiar el color del acento con el siguiente módulo colocado justo después de [[module CSS]]:

:root {
--accentColor: EL COLOR VA AQUÍ;
}

Recuerda que el color del acento variará según la Clase del OTS que estés escribiendo. La lista de colores que debes usar según la clase se encuentra aquí:

Clase	Color
Sera	#39873b
Zenux	#de8014
Makhtum	#d41e48
Neutral	#5e84ad
Falias	#f0c5e6
Toria	#50aba0
Prix	#852bd9
No Estándar	#e3d65d

Por defecto, el color del acento es #b8b8b8, y es el que se quedará en caso de que decidas no utilizar ningún módulo de color.

---

Imagen.

Se puede crear una regla horizontal con 5 guiones "- - - - -" y se extiende por toda la página si no se coloca dentro de nada (por ejemplo, un bloque de cita). Las líneas que separan las secciones de este documento son reglas horizontales.

Los títulos se pueden crear poniendo entre uno y seis signos de suma "+" al comienzo de la línea.

Colapsable - Clickéame

Primer Título

Segundo Título

Tercer Título

Cuarto Título

Quinto Título

Sexto Título

Tabulador

Esta es una Tab

Tabulación

Hey, mira. Más texto aquí

Qué pintoresco.

Tab Larga

Esta es una Tab Larga. Contiene mucho texto.¹

Esta es una Tab Larga. Contiene mucho texto.

Esta es una Tab Larga. Contiene mucho texto.

Esta es una Tab Larga. Contiene mucho texto.

Esta es una Tab Larga. Contiene mucho texto.

Esta es una Tab Larga. Contiene mucho texto.

Esta es una Tab Larga. Contiene mucho texto.

Esta es una Tab Larga. Contiene mucho texto.

Tab Aún Más Larga

Esta también es una tab larga. Contiene mucho texto.

Esta también es una tab larga. Contiene mucho texto.

Esta también es una tab larga. Contiene mucho texto.

Esta también es una tab larga. Contiene mucho texto.

Esta también es una tab larga. Contiene mucho texto.

Esta también es una tab larga. Contiene mucho texto.

Esta también es una tab larga. Contiene mucho texto.

Esta también es una tab larga. Contiene mucho texto.

Esta también es una tab larga. Contiene mucho texto.

Esta también es una tab larga. Contiene mucho texto.

Esta también es una tab larga. Contiene mucho texto.

Esta también es una tab larga. Contiene mucho texto.

Tab Vacía

Este es un bloque de citas, creado poniendo ">" al comienzo de cada línea.
Más texto

---

Esa es una regla horizontal

Bloques de cita anidados

Esta es	una tabla
Tu yá deberías	saber cómo es que
se hacen estas cosas extrañas pero útiles

---

La fuente del encabezado es Josefin Sans.

La fuente del cuerpo es Roboto.

La fuente monoespaciada es Fira Code.

Footnotes

1. Y esta es una nota al pie.

---

Código Fuente:

Abrir

/*
    AGIAT CSS
    [2021 Wikidot Theme]
    By Agente Shuffle
    Based on:
       Penumbra Theme by EstrellaYoshte
*/
 
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url(https://fonts.googleapis.com/css2?family=Fira+Code&display=swap);
 
#page-content { font-size: .9rem; }
 
}
 
 #header, #top-bar {
     width: 90%;
     max-width: 940px;
     margin: 0 auto;
}
 #top-bar {
     width:90%;
     margin: 0 auto;
}
 .mobile-top-bar {
     display: none;
     position: relative;
     left: 1em;
     z-index: 4px;
}
 
body {
    font-family: 'Roboto', sans-serif;
    color: #EDEDED;
    background-color: #262626;
    background-image: linear-gradient(
        to bottom,
        #2e2e2e, #2e2e2e 90px,
        #2e2e2e 90px, #262626 200px,
        #262626 200px, #262626 100%);
    background-repeat: no-repeat;
}
 
#main-content {
    top: -1.2rem;
}
 
/* ---- SCROLLBAR ---- */
 
::-webkit-scrollbar {
  width: 12px;
  background: #transparent;
}
 
::-webkit-scrollbar-track {
  background: #2e2e2e;
}
 
::-webkit-scrollbar-thumb {
  background: #ededed;
  border: none;
}
 
::-webkit-scrollbar-thumb:hover {
  background: var(--accentColor);
}
 
/* ---- PAGE WRAP ---- */
 
div#container-wrap {
     background-image: url(none);
}
div#header {
    background-image: url(none);
}
 
div#extra-div-1 {
    height: 164px;
    width: 100%;
    top: 0;
    position: absolute;
    background: var(--lgurl);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    z-index: -1;
}
 
#header h1, #header h2 { margin-left: 0; float: none; text-align: center; }
/* Move the subtitle down a smidge */
#header h2 { margin-top: 0.45rem; }
/* Hide the existing text */
#header h1 span, #header h2 span { font-size: 0; display: none; }
/* Style the new text */
#header h1 a::before, #header h2::before {
  color: var(--accentColor);
  font-family: 'Josefin Sans', sans-serif;
  text-shadow: none;
}
/* Set the new text's content from variable */
#header h1 a::before {
  content: var(--header-title, "AGIAT");
  font-weight: 300;
  font-size: 1.3em;
}
#header h2::before {
  content: var(--header-subtitle, "Agencia Global de Investigación de Amenazas Taumatúrgicas");
  font-weight: 600;
  font-size: 1.22em;
}
 
#login-status {
    color: #ededed;
}
#login-status a {
    color: var(--accentColor);
}
#login-status ul a {
    color: #ededed;
    background: #2e2e2e;
}
#login-status ul a:hover {
    color: var(--accentColor);
}
 
#account-topbutton{
    border: solid 1px var(--accentColor);
}
 
#footer, #footer a {
    background: transparent;
    color: #ededed;
}
#license-area {
     color: #ededed;
}
 
#search-top-box {
    top: 2.2rem!important;
    right: 8px;
}
#search-top-box-form > input[type=submit] {
    border: solid 1px #ededed;
    background: #2e2e2e!important;
    box-shadow: none;
    border-radius: 0;
    color: #ededed;
    transition: color 0.15s linear;
}
#search-top-box-form input[type=submit]:hover {
    border: solid 1px var(--accentColor);
    box-shadow: none;
    color: var(--accentColor);
}
#search-top-box-form > input[type=text] { display: none; }
 
/*-- CENTERED PAGE LAYOUT --*/
 
@media (min-width: 1041px) and (max-width: 1360px) {
  #main-content {
    left: calc((-100vw + 1031px)/3);
  }
}
@media (min-width: 1361px) {
  #main-content {
    left: calc(-11.8% + 12px);
  }
}
 
@media (min-width: 1041px) {
  #side-bar {
    left: calc((-100vw + 1040px)/3 + 28px);
  }
}
 
/* ---- TOP BAR ---- */
 #top-bar {
     position: absolute;
     z-index: 50;
     top: 144px;
     height: 21px;
     line-height: 18px;
     padding: 8px;
     z-index: 20;
     font-size: 90%;
}
 #top-bar ul {
     float: right;
}
 #top-bar li {
     margin: 0;
}
 #top-bar a {
     color: #ffffff;
     background: transparent;
}
 #top-bar ul li {
     border: 0;
     position: relative;
}
 #top-bar ul li ul {
     border: solid 1px #262626;
     border-top: 0;
}
 #top-bar ul li a {
     text-decoration: none;
     padding-top: 9px;
     padding-bottom: 10px;
     line-height: 1px;
     max-height: 1px;
     overflow: hidden;
}
 #top-bar ul li.sfhover a, #top-bar ul li:hover a {
     background: #262626;
     color: white;
}
 #top-bar ul li a:hover {
     background: #262626 !important;
     color:white;
     transition: 0.125s;
}
 #top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a {
     border-width: 0;
     width: 150px;
     line-height: 160%;
     height: auto;
     max-height: none;
     padding-top: 0;
     padding-bottom: 0;
}
 #top-bar ul li.sfhover a:hover, #top-bar ul li:hover a:hover {
     background: #262626;
     text-decoration: none;
}
 #top-bar ul li ul {
     border-width: 0 1px 1px 1px;
     width: auto;
}
 #top-bar ul li ul li, #top-bar ul li ul li.sfhover, #top-bar ul li ul li, #top-bar ul li ul li:hover {
     border-width: 0;
}
 #top-bar ul li ul li a {
     border-width: 0;
}
 #top-bar ul li ul a, #top-bar a:hover {
     color: #262626;
}
 .top-bar ul li:last-of-type ul {
     right: 0;
}
/* IE7 HACK */
 #top-bar ul > li > ul {
     *margin-top: -4px;
}
 
/* ---- SIDE BAR ---- */
 
#side-bar{
    clear: both;
    padding: .8em;
    background: #2e2e2e;
    border-radius: 0;
    box-shadow: none;
    top: -24px;
}
 
 #side-bar .heading{
    color: #ededed;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 0.94rem;
    border-bottom: solid 1px #ededed;
}
#side-bar .side-block {
    border: transparent;
    border-radius: 0;
    box-shadow: none;
    background-color: #2e2e2e;
}
#side-bar .side-block.media {
    background-color:#2e2e2e;
}
#side-bar .side-block.resources {
    background-color:#2e2e2e;
}
.side-block .menu-item > .image {
    display: none;
}
 
#top-bar div.open-menu a {
    position: fixed;
    border-radius: 0;
    box-shadow: none;
    color: var(--accentColor);
    background-color: #2e2e2e;
    border: solid 1px #2e2e2e;
 
}
     .open-menu a:hover {
         text-decoration: none !important;
}
@media (max-width: 767px) {
    #main-content {
        padding: 0;
        margin: 0 5%;
        border-left: none;
    }
    #page-title {
        margin-top: 0.7em;
    }
    #side-bar {
        background-color: #2e2e2e;
        left: -18.6em;
    }
    #side-bar:target {
        border: none;
        box-shadow: none;
    }
    #side-bar .close-menu {
        transition: width 0.5s ease-in-out 0.1s,
                    opacity 1s ease-in-out 0s;
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        background: rgba(0,0,0,0.3);
        background-position: 18.6em 50%;
        z-index: -1;
        opacity: 0;
        pointer-events: none;
    }
    #side-bar:target .close-menu {
        width: calc(100% - 18.6em);
        right: 0;
        left: auto;
        opacity: 1;
        pointer-events: auto;
    }
    #side-bar:target .close-menu:hover {
        background: unset;
    }
    #page-content > hr, #page-content > .list-pages-box > .list-pages-item > hr {
        margin: 3em -5.5%;
    }
    #side-bar {
        top: 0;
    }
    #side-bar .heading {
        padding-left: 1em;
        margin-left: -1em;
    }
    #search-top-box {
        top: 107px;
    }
}
 
/* ---- TABS ---- */
 
/* ---- YUI TAB BASE ---- */
.yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{color:inherit;background:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit}
 
/* ---- YUI TAB CUSTOMIZATION ----*/
 
 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav{
     display: flex;
     flex-wrap: wrap;
     width: calc(100% - .125rem);
     margin: 0 auto;
     border-color: var(--accentColor);
     box-shadow: none;
}
 .yui-navset .yui-nav a, /* ---- Link Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav a{
     color: #ededed;
     font-weight: bold;
    /* ---- Tab Background Colour | [UNSELECTED] ---- */
     background-color: #2e2e2e;
     border: unset;
     box-shadow: none;
     box-shadow: none;
     transition: background-color 0.15s linear;
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
     color: #ededed;
    /* ---- Tab Background Colour | [HOVER] ---- */
     background-color: var(--accentColor);
}
 .yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav li{
     position: relative;
     display: flex;
     flex-grow: 2;
     max-width: 100%;
     margin: 0;
     padding: 0;
     color: #ededed;
     background-color: #2e2e2e;
     border-color: transparent;
     box-shadow: none;
}
 .yui-navset .yui-nav li a,
 .yui-navset-top .yui-nav li a,
 .yui-navset-bottom .yui-nav li a{
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
}
 .yui-navset .yui-nav li em{
     border: unset;
}
 .yui-navset .yui-nav a em,
 .yui-navset .yui-navset-top .yui-nav a em{
     padding: .35em .75em;
 
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
 .yui-navset .yui-nav .selected, /* ---- Selection Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav .selected{
     flex-grow: 2;
     margin: 0;
     padding: 0;
    /* ---- Tab Background Colour | [SELECTED] ---- */
     background-color: var(--accentColor);
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a em{
     border: none;
}
 .yui-navset .yui-nav .selected a{
     width: 100%;
     color: #2e2e2e;
     font-weight: bold;
}
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:active{
     color: #2e2e2e;
     background-color: var(--accentColor);
}
 .yui-navset .yui-content {
    background-color: #2e2e2e;
    box-shadow: none;
}
 .yui-navset .yui-content,
 .yui-navset .yui-navset-top .yui-content{
     padding: .5em;
     border: none;
}
 
/*---- TAB ANIMATION by Croquembouche ---- */
 
.yui-navset .yui-content > div {
    display: block;
    top: 0;
    overflow: hidden;
    transform-origin: 0 0;
}
 
#page-content .yui-navset .yui-content > div[style*="none"] {
    display: block !important;
    flex: 0;
    max-height: 0;
    padding: 0 0.5em;
    border-width: 0;
    /* The following transition affects the one that DISAPPEARS */
    transition: padding 0s linear 0.5s,
          border-width 0s linear 0.5s,
          flex 0.5s cubic-bezier(.18,.51,.54,.9) 0s;
    animation: tab-disappear 0.5s ease-in-out 0s 1 both;
}
#page-content .yui-navset .yui-content > div[style*="block"] {
    display: block !important;
    flex: 1;
    max-height: 9999rem;
    /* The following transition affects the one that APPEARS */
    transition: padding 0s linear 0.5s,
          border-width 0s linear 0.5s,
          flex 0.5s cubic-bezier(.18,.51,.54,.9) 0.5s;
    animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
}
 
@keyframes tab-disappear {
    0% { max-height: 9999rem; }
    1% { max-height: 100vh; }
    100% { max-height: 0; }
}
@keyframes tab-appear {
    0% { max-height: 0; }
    99% { max-height: 100vh; }
    100% { max-height: 9999rem; }
}
 
/* ---- INFO BAR ---- */
 body{
     --barColour: #2e2e2e;
     --linkColour: #ededed;
}
 
/* ---- INFO PANE ---- */
 
#page-content .creditRate{
     margin: unset;
     margin-top: 4px;
     margin-bottom: 4px;
     margin-right: 3px;
}
#page-content .rate-box-with-credit-button {
    background-color: #2e2e2e;
    border: solid 2px #2e2e2e;
    border-radius: 0;
    box-shadow: 3px 0px 0px 0px var(--accentColor);
}
#page-content .rate-box-with-credit-button .creditButton p a {
    border-left-color: transparent;
}
 
#page-content .rate-box-with-credit-button .page-rate-widget-box .cancel {
    border-radius: 0;
}
#page-content .rate-box-with-credit-button .page-rate-widget-box .rate-points {
    border-left: 0;
}
 
.rate-box-with-credit-button .page-rate-widget-box .cancel a:hover {
    border-radius: 0;
}
 
#page-content .rate-box-with-credit-button .fa-info {
     color: #ededed;
}
#page-content .rate-box-with-credit-button .fa-info:hover {
     color: var(--accentColor);
}
 
#page-content .modalbox {
     background: #262626 !important;
     color: #ededed;
     box-shadow: none;
}
.close-credits,
.credit-back {
    filter: grayscale(100%) invert(100%) contrast(275%);
}
 
/* ---- PAGE RATING ---- */
 
.page-rate-widget-box {
     margin: unset;
     border-radius: 0;
     border: solid 2px #2e2e2e;
     box-shadow: 3px 0px 0px 0px var(--accentColor);
     background-color: #2e2e2e;
     margin-top: 4px;
     margin-bottom:4px;
     margin-right: 3px;
}
 
.page-rate-widget-box .rate-points {
    background-color: #2e2e2e !important;
    border: none;
    color: #ededed !important;
    text-transform: capitalize;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: #2e2e2e;
    border-top: none;
    border-bottom: none;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    background: transparent;
    color: #ededed;
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
    background: #2e2e2e;
    color: var(--accentColor);
}
.page-rate-widget-box .cancel {
    background: transparent;
    background-color: #2e2e2e;
    border: none;
}
.page-rate-widget-box .cancel a {
    color: #ededed;
}
.page-rate-widget-box .cancel a:hover {
    background: #2e2e2e;
    color: var(--accentColor);
}
 
/* ---- PAGE ELEMENTS ---- */
 
.page-source, tt{
    font-family: "Fira Code", monospace;
    font-size: 0.87rem;
}
 .code pre, .code p, .code {
    font-family: "Fira Code", monospace;
    font-size: 0.87rem;
    color: #2e2e2e;
}
 
h1 {
    color: var(--accentColor);
    font-family: 'Josefin Sans', sans-serif;
    font-weight: bold;
}
h2,
h3,
h4,
h5,
h6 {
    color: #EDEDED;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: bold;
}
 
#page-title {
    color: #ededed;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.65rem;
    text-align: center;
    border-color: #ededed;
}
 
/* Clicky links */
a,
a.newpage,
a:visited,
#side-bar a:visited {
    color: var(--accentColor);
    transition: color 0.15s linear;
}
a:hover, a.newpage:hover, a:visited:hover, #side-bar a:visited:hover {
    color: #ffffff;
    text-decoration: none;
    background-color: var(--accentColor);
}
/* patch for sidebar media, collapsibles, ACS, info button and ayers module so link doesn't override */
#page-content .collapsible-block-folded a:hover, #page-content .collapsible-block-unfolded-link a:hover, #page-content .rate-box-with-credit-button .fa-info:hover, #side-bar .side-block.media a:hover, .danger-diamond a:hover {
    background: transparent;
}
.info-container .collapsible-block-folded .collapsible-block-link, .info-container .collapsible-block-link {
    background: var(--linkColour) !important;
}
 
hr{
    background-color: var(--accentColor);
}
 
blockquote,
div.blockquote,
#toc {
    background-color: #2e2e2e;
    border: solid 2px #262626;
    box-shadow: -3px 0px 0px -0.1px var(--accentColor);
}
 
.code {
    background-color: #F8F8F8;
    border: solid 3px #262626;
    box-shadow: none;
}
.scp-image-block {
    border: solid 8px #2e2e2e;
    border-bottom: solid 0px #2e2e2e;
    box-shadow: 0px 0.26rem 0px 0px var(--accentColor);
    box-sizing: border-box;
}
.scp-image-block .scp-image-caption {
    background-color: #2e2e2e;
    border: solid 4px #2e2e2e;
    color: #ededed;
    font-size: 0.84rem;
}
.scp-image-block.block-left { margin-left: 0; }
.scp-image-block.block-right { margin-right: 0; }
@media (max-width: 540px) {
  .scp-image-block.block-left, .scp-image-block.block-right {
    float: none; clear: both; margin-left: auto; margin-right: auto;
  }
}
 
#page-content .wiki-content-table tr th {
    border: solid 1px var(--accentColor);
    color: var(--accentColor);
    background-color: #2e2e2e;
    padding: 28px;
    margin: -43px;
    /* set border for table title */
}
#page-content .wiki-content-table tr td {
    border: solid 1px var(--accentColor);
    /* set border for table content */
}
 
/* fancy collapsible */
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    background: #2e2e2e;
    transition: background 0.25s linear;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
    margin: auto;
}
#page-content .collapsible-block-folded .collapsible-block-link::before {
    content: "▷ ";
}
#page-content .collapsible-block-unfolded .collapsible-block-link::before {
    content: "▽ ";
}
#page-content .collapsible-block-link {
    text-decoration: none;
    color: #ededed;
    font-weight: bold;
}
#page-content .collapsible-block-folded:hover, #page-content .collapsible-block-unfolded-link:hover {
    background: var(--accentColor);
}
#page-content .collapsible-block-unfolded-link {
    box-shadow: 0px -0.26rem 0px 0px var(--accentColor);
}
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    margin-top: 10px;
    margin-bottom: 10px;
}
 
/* Selection */
::selection {
    background: var(--accentColor);
    color: #ffffff;
}
 
/* Footnotes */
.hovertip {
    font-size: .9rem;
    background-color: #2e2e2e !important;
    border: solid 1px var(--accentColor) !important;
}
.footnotes-footer {
    background-color: #2e2e2e;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
    padding-bottom: 1.5rem;
    box-shadow: -0.24rem 0px 0px 0px var(--accentColor);
}
.footnotes-footer .title {
    color: #ededed;
}
.footnote .f-footer, .equation .e-footer, .reference .r-footer {
    display: none;
}
 
/* Tags */
#main-content .page-tags a {
    margin-top: .18rem;
}
.page-tags span {
    border-top: 1px solid #ededed;
}
 
/* Pop-Up Windows */
.owindow {
    background-color: #2e2e2e;
    border-color: var(--accentColor);
}
 
.owindow .modal-header {
    background-color: #2e2e2e;
}
 
.owindow .modal-body img {
    background-color: transparent !important;
}
 
.owindow .title {
    background-color: #2e2e2e;
    color: #var(--accentColor);
    border-bottom: 1px solid #262626;
}
 
.owindow .button-bar a {
    background-color: #2e2e2e;
    border-color: var(--accentColor);
    color: #ededed;
}
.owindow .button-bar a:hover {
    background-color: var(--accentColor);
}
 
/* Edit Buttons */
.buttons .btn {
    background-color: #2e2e2e;
    border-color: var(--accentColor);
    color: var(--accentColor);
    padding: 3px 5px;
}
.buttons .btn:hover {
    background-color: var(--accentColor);
    color: #2e2e2e;
}
 
/* Edit Lock Info*/
#lock-info {
    background-color: #2e2e2e;
    border-color: #ededed;
}
 
/* Close Button for Page Source, Rating, Etc */
a.action-area-close:hover {
    background-color: #2e2e2e;
}
 
/* Page-History Current */
.pager .current {
    background-color: var(--accentColor);
    border-color: #ededed;
}
 
/* ---- INTERWIKI ---- */
iframe.scpnet-interwiki-frame{
    height: 12em;
}
.scpnet-interwiki-frame{
    filter: invert(100%) grayscale(100%) contrast(75%);
}
 
/* ----FORUM CUSTOMIZATION by BinaryCube----/*
 
/* Forum Start Page Shenannigans/*
.forum-group{
    margin: 0.5em 0;
}
 
.forum-group div.head{
    background-color: blue;
    color: yellow;
    padding: 0.5em 1em;
    margin: 0;
    border: 1px solid red;
}
 
.forum-group div.head .title{
    font-weight: bold;
}
 
.forum-group table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 1px;
}
.forum-group table td{
    border: 1px solid magenta;
    padding: 2px 10px;
}
 
.forum-group table td.name .description{
    color: cyan;
    font-size: 87%;
}
.forum-group table td.name .title{
    font-weight: bold;
    color: grey;
}
 
.forum-group  table td.last{
    width: 17em;
    font-size: 85%;
    text-align: center;
}
.forum-group  table td.posts{
    width: 5em;
    text-align: center;
}
.forum-group  table td.threads{
    width: 5em;
    text-align: center;
}
 
.forum-group table tr.head td{
    text-align: center;
    font-size: 85%;
    background-color: violet;
}
 
/*Category Things/*
.forum-category-box  .description-block{
    border: 1px solid #CCC;
    margin: 1em 4em;
    padding: 0.5em;
    background-color: #black;
    height: 100%;
    overflow: hidden;
}
 
/*Thread stuff*/
.forum-thread-box .description-block{
    border: 1px solid #CCC;
    margin: 1em 4em;
    background-color: black;
    overflow: hidden;
    height: 100%;
    padding: .5em 1em;
        border-radius: 10px;
        box-shadow: 0 1px 5px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.8),
        inset 0 10px 5px rgba(255,255,255,.25),
        inset 0 -15px 30px rgba(0,0,0,.1)
}
 
.thread-container .post .head {
padding: 0.5em 1em;
background-color: gray;
background: linear-gradient(to right, #222222, #444444);
box-shadow: inset 2px 3px 6px rgba(0,0,0,.15);
border-radius: 5px 5px 0 0;
}
 
/* ---- CUSTOM SYNTAX ---- */
 
:root {
  --accentColor: #b8b8b8;
  --lgurl: url("http://destinox.wikidot.com/local--files/agiat-css/AGIATlogoTransparente.png");
}
 
/* basic Query for mobile devices */
 
@media (max-width: 767px) {
    .owindow {
        min-width: 80%;
        max-width: 99%;
    }
 
    .modal-body .table, .modal-body .table ~ div {
        float: left;
    }
 
    .owindow .button-bar {
        float: right;
    }
 
    .owindow div a.btn-primary {
        width: 100%;
        float: left;
    }
 
    .mobile-top-bar ul li:last-of-type ul {
        right: 0;
    }
 
    span, a {
        word-break: break-all;
    }
}
 
/* Mobile Media Query */
@media (max-width: 479px) {
    #search-top-box-input {
        display: none;
    }
 
    #page-content {
        font-size: .9em;
    }
 
    #main-content {
        margin: 0;
    }
 
    #recent-posts-category {
        width: 100%;
    }
 
    #header, .mobile-top-bar {
        max-width: 90%;
    }
 
    #side-bar {
        width: 80%;
        position: relative;
    }
 
    .top-bar {
        display: none;
    }
 
    .mobile-top-bar {
        display: block;
        padding: 0;
    }
 
    .page-options-bottom a {
        padding: 0 4px;
    }
 
    #header h1 a {
        font-size: 100%;
    }
 
    blockquote {
        margin: 1em 0;
    }
 
    .license-area {
        font-size: .8em;
    }
 
    #header {
        background-position: 0 5.5em;
        background-size: 55px 55px;
    }
 
    #header h1, #header h2 {
        margin-left: 66px;
    }
 
    table.form td, table.form th {
        float: left;
        padding: 0;
    }
 
    td.name {
        width: 15em;
    }
 
    #edit-page-title {
        max-width: 90%;
    }
 
    .content-panel.left-column, .content-panel.right-column {
        width: 99%;
        float: left;
    }
 
    #page-content div, #page-content div table {
        clear: both;
    }
 
    #page-content div.title {
        word-break: keep-all;
    }
}
 
/* Small Mobile Media Query */
@media (max-width: 385px) {
    #header {
        background-position: 5% 5.5em;
    }
 
    #header h1, #header h2 {
        margin-left: -webkit-calc(66px + 5%);
        margin-left: -moz-calc(66px + 5%);
        margin-left: calc(66px + 5%);
    }
 
    #header, #top-bar {
        width: 100%;
        max-width: 100%;
    }
 
    .mobile-top-bar {
        width: 100%;
    }
}
 
/* Note Media Query */
@media (min-width: 480px) and (max-width: 580px) {
    #search-top-box-input {
        width: 7em;
    }
 
    #main-content {
        margin: 0 2em;
    }
 
    #header, .mobile-top-bar {
        max-width: 90%;
    }
 
    #side-bar {
        width: 80%;
        position: relative;
    }
 
    .top-bar {
        display: none;
    }
 
    .mobile-top-bar {
        display: block;
    }
 
    .page-options-bottom a {
        padding: 0 5px;
    }
 
    #header h1 a {
        font-size: 120%;
    }
 
    blockquote {
        margin: .5em;
    }
 
    .license-area {
        font-size: .85em;
    }
 
    #header {
        background-position: .5em 4.5em;
        background-size: 66px 66px;
    }
 
    #header h1, #header h2 {
        margin-left: 80px;
    }
 
    #page-content div.title {
        word-break: keep-all;
    }
 
    td.name {
        width: 15em;
    }
 
    .content-panel.left-column, .content-panel.right-column {
        width: 99%;
        float: left;
    }
 
    #page-content div, #page-content div table {
        clear: both;
    }
}
 
/* Mini Tablet Media Query */
@media (min-width: 581px) and (max-width: 767px) {
    #search-top-box-input {
        width: 8em;
    }
 
    #side-bar {
        width: 80%;
        position: relative;
    }
 
    #main-content {
        margin: 0 3em 0 2em;
    }
 
    #header, .mobile-top-bar {
        max-width: 90%;
    }
 
    .top-bar {
        display: none;
    }
 
    .mobile-top-bar {
        display: block;
    }
 
    .page-options-bottom a {
        padding: 0 6px;
    }
 
    #header h1 a {
        font-size: 140%;
    }
 
    .license-area {
        font-size: .9em;
    }
 
    #header {
        background-position: 1em 4em;
        background-size: 77px 77px;
    }
 
    #header h1, #header h2 {
        margin-left: 93px;
    }
}
 
/* Tablet Media Query */
@media (min-width: 768px) and (max-width: 979px) {
    #main-content {
        margin: 0 4em 0 20em;
    }
 
    #header, #top-bar, #side-bar {
        max-width: 100%;
    }
 
    .top-bar li {
        margin: 0;
    }
 
    #top-bar ul li.sfhover ul li a,
    #top-bar ul li:hover ul li a {
        width: 110px;
    }
 
    .page-options-bottom a {
        padding: 0 7px;
    }
 
    #header h1 a {
        font-size: 160%;
    }
 
    .license-area {
        font-size: .95em;
    }
 
    #header {
        background-position: 1em 4em;
        background-size: 88px 88px;
    }
 
    #header h1, #header h2 {
        margin-left: 106px;
    }
 
    .content-panel.left-column, .content-panel.right-column {
        width: 99%;
        float: left;
    }
 
    #page-content div, #page-content div table {
        clear: both;
    }
}
 
/* off-canvas */
.close-menu {
    display: none;
}
 
@media (max-width: 767px) {
    .page-history tbody tr td:last-child {
        width: 35%;
    }
 
    .owindow {
        min-width: 80%;
        max-width: 99%;
    }
 
    .modal-body .table, .modal-body .table ~ div {
        float: left;
    }
 
    .owindow .button-bar {
        float: right;
    }
 
    .owindow div .btn-primary {
        width: 100%;
        float: left;
    }
 
    .owindow div .btn-primary ~ div {
        width: 100%;
    }
 
    .yui-navset {
        z-index: 1;
    }
 
    #navi-bar, #navi-bar-shadow {
        display: none;
    }
 
    #top-bar .open-menu a {
        position: fixed;
        top: .5em;
        left: .5em;
        z-index: 15;
        font-family: 'Nanum Gothic', sans-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: .9em;
        text-align: center;
        border: .2em solid #888;
        background-color: #fff;
        border-radius: 3em;
        color: #888;
    }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
        -webkit-box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1);
        -moz-box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1);
        -ms-box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1);
        -o-box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1);
        box-shadow: 0 0 20px 3px rgba(153, 153, 153, 1);
    }
}
 
@media (min-width: 768px) {
    .open-menu a {
        display: none;
    }
} 
    #main-content {
        max-width: 90%;
        margin: 0 5%;
        padding: 0;
        -webkit-transition: .5s ease-in-out .1s;
        -moz-transition: .5s ease-in-out .1s;
        -ms-transition: .5s ease-in-out .1s;
        -o-transition: .5s ease-in-out .1s;
        transition: .5s ease-in-out .1s;
    }
 
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -25em;
        width: 17em;
        height: 100%;
        background-color: #2e2e2e;
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0;
        -webkit-transition: left .5s ease-in-out .1s;
        -moz-transition: left .5s ease-in-out .1s;
        -ms-transition: left .5s ease-in-out .1s;
        -o-transition: left .5s ease-in-out .1s;
        transition: left .5s ease-in-out .1s;
    }
 
    #side-bar::after {
        content: '';
        position: absolute;
        top: 0;
        width: 0;
        height: 100%;
        background-color: rgba(0, 0, 0, .2);
    }
 
    #side-bar:target {
        display: block;
        left: 0;
        width: 17em;
        margin: 0;
        border: 1px solid #dedede;
        z-index: 10;
    }
 
    #side-bar:target + #main-content {
        left: 0;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .3) 1px 1px repeat;
        z-index: -1;
    }
}
 
div.scpnet-interwiki-wrapper {
    width: 17em;
    margin-left: -5px;
}
 
iframe.scpnet-interwiki-frame {
    height: 400px;
    width: 17em;
    border: none;
}
 
@media (min-width: 768px) {
    iframe.scpnet-interwiki-frame, div.scpnet-interwiki-wrapper {
        width: 18em;
    }
}
 
/* Content Warning for adult content */
div#u-adult-warning {
    width: fit-content;
    margin: 0 auto 20px;
    padding: .5rem 1rem;
    border: 3px solid #333;
    background: #e4e4e4;
    color: #333;
    text-align: center;
    font-weight: bold;
}
 
div#u-adult-warning > div#u-adult-header {
    font-size: 300%;
    text-shadow: 1px 2px 3px rgba(0, 0, 0, .5);
    color: #901;
}
 
div#u-adult-warning > div#u-adult-header p {
    margin: 0;
}
 
div#u-adult-warning > .error-block {
    color: unset;
    padding: unset;
    margin: unset;
    border: unset;
    margin-bottom: 1em;
}
 
/* Page preview component -- https://scp-wiki.wikidot.com/component:preview */
div.preview {
    display: none;
}
 
@media only screen and (max-width: 56.25rem)
@supports (display:grid)
#header div.open-menu>p>a {
    --wght: 700;
    display: flex;
    flex: 2 0 100%;
    align-items: center;
    justify-content: center;
    border: none!important;
 
    font-weight: var(--wght);
    letter-spacing: .016em;
    text-align: center;
    text-decoration: none;
}
 
/* vim: set noet: */
 
}
 
@media only screen and (min-width: 769px)
@supports (display: grid)
#content-wrap {
    display: flex;
    flex-direction: row;
    width: calc(100vw - (100vw - 100%));
    min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
    flex-grow: 2;
    height: auto;
    position: relative;
    margin: 0 auto;
    max-width: inherit;
}
 
#header div.open-menu{
display: flex;
width: var(--topbar-height-on-mobile);
height: var(--topbar-height-on-mobile)
}
#header div.open-menu>p{
display: inline-flex;
align-content: stretch;
align-items: stretch;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 2.5em
}