MediaWiki:Theme-sai.css

body.page-Main_Page #content {
    background-image: 
        url(/images/2/26/Tyler_Sai.png),
        url(/images/d/da/Josh_SA.png);
    background-color: #DDD7CC;
    background-size: 22%, 16%;
    background-repeat: no-repeat, no-repeat;
    background-position: 55px 275px, calc(100% - 75px) 275px;
    background-attachment: scroll, scroll;
}

/* Concerts List Table */

.shows-list {
    width: 65%;
    border: 3px solid #308389;
}

.shows-list th,
.shows-list td {
    border: 1px solid #308389;
    text-align: center;
}

.shows-list th {
    background-color: #E6E6E6; /* Можно изменить на нужный цвет */
}


#p-themes-label .vector-menu-heading-label:before {
    content: "SaI Era";
}

#p-themes-label .vector-menu-heading-label {
    visibility: hidden;
    position: relative;
}

#p-themes-label .vector-menu-heading-label:before {
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
}

       .container {
            position: relative;
            display: flex;
            align-items: center;
            width: 150px; /* Ширина контейнера */
            height: 50px;
            left: 700px;
            top: -37px;
        }
        .stripe {
            width: 5px;
            height: 50%;
            background-color: #D02019;
        }
        .left-stripe {
            left: 960px;
        }
        .right-stripe {
            transform: rotate(20deg); /* Наклоняем на 20 градусов */
            margin-left: -35px; /* Подвигаем полоску на 5px влево */
            opacity: -1.5; /* Прозрачность 50% */
        }

                .horizontal-line {
            position: absolute;
            width: 15px; /* Ширина линии */
            height: 5px; /* Толщина линии */
            background-color: #D02019;
            top: 50%; /* Центрируем вертикально по середине контейнера */
            left: calc(50% - 30px - 50px); /* Обновляем расчет для выравнивания линии */
            transform: translateY(-50%); /* Центрируем вертикально */
        }





@keyframes gradient-text {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 300% 300%;
    }
}

.twentyonewikilogo {
    font-family: 'MyCustomFont1';
    font-size: 100px;
    cursor: pointer; /* Чтобы указать, что элемент кликабельный */
    line-height: 1; /* Устанавливаем высоту строки, чтобы минимизировать отступы */
    background: linear-gradient(45deg, #48B4DB, #EC8BC3, #EC8B00);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-text 6s linear infinite;
    background-attachment: fixed; /* Это делает фон фиксированным для корректного отображения */
}




.red-background {
  background-color: #48B4DB;
}

/* Основной стиль для таблицы с изображением позади */
.table-with-background {
    position: relative;
    z-index: 10;
    width: 68%;
    display: grid;
    margin-left: 0; /* Убедитесь, что здесь корректное значение */
    border-radius: 10px 10px 0px 0px;
    height: 224px;
    float: left;
    background-color: #fff; /* Убедитесь, что фон таблицы имеет нужный цвет */
}

.table-with-background::before {
    content: '';
    background-image: url('/images/2/26/Tyler_Sai.png'); /* Замените на путь к вашему изображению */
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    top: -322px; /* Смещение изображения вверх */
    left: 60px; /* Смещение изображения влево */
    width: calc(100% + 100px); /* Ширина изображения больше, чем ширина таблицы */
    height: calc(100% + 100px); /* Высота изображения больше, чем высота таблицы */
    z-index: 0; /* Размещаем изображение позади таблицы */
    opacity: 1; /* Убедитесь, что прозрачность равна 1 (100%) */
}

/* Основной стиль для таблицы с изображением позади */
.table-with-background2 {
    position: relative;
    z-index: 10;
    width: 68%;
    display: grid;
    margin-left: 0; /* Убедитесь, что здесь корректное значение */
    border-radius: 10px 10px 0px 0px;
    height: 224px;
    float: left;
    background-color: #fff; /* Убедитесь, что фон таблицы имеет нужный цвет */
}

.table-with-background2::before {
    content: '';
    background-image: url('/images/d/da/Josh_SA.png'); /* Замените на путь к вашему изображению */
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    top: -516.2px; /* Смещение изображения вверх */
    left: 60px; /* Смещение изображения влево */
    width: calc(67.9%); /* Ширина изображения больше, чем ширина таблицы */
    height: calc(67.9%); /* Высота изображения больше, чем высота таблицы */
    z-index: 0; /* Размещаем изображение позади таблицы */
    opacity: 1; /* Убедитесь, что прозрачность равна 1 (100%) */
}


.infobox-header-sai {
    background-color: #007BFF; /* Цвет для темной темы */
    color: #fff;               /* Белый текст */
}

/* Стандартный стиль заголовка инфобокса с цветом фона #EA423C */
.mw-parser-output .infobox th[style*="background-color:#EA423C"] {
    background-color: #EA423C; /* Исходный цвет */
    color: #fff;               /* Белый текст */
    font-weight: bold;         /* Жирный шрифт */
    text-align: center;        /* Выравнивание по центру */
    padding: 8px;              /* Внутренние отступы */
}

/* Измененный стиль заголовка инфобокса для синей темы */
.theme-dark .mw-parser-output .infobox th[style*="background-color:#EA423C"] {
    background-color: #007BFF !important; /* Синий фон для темной темы с !important */
    color: #fff !important;               /* Белый текст */
}

.mw-parser-output .infobox-above, .mw-parser-output .infobox-title {
    font-size: 125%;
    font-weight: bold;
    text-align: center;
    border-radius: 2px 2px;
    background-image: url(/images/f/f9/Scaled_no_transparent.png);
	color: #242D2A;
}


.theme-sai .mw-parser-output .infobox {
    background-color: #F8F9FB;
    border: 1px solid #ccc;
    color: #000;
}

.theme-sai .mw-parser-output .infobox {
    background-color: #F8F9FB;
    border: 1px solid #555;
    color: #000;
}


}
html.theme-sai .infobox {
	background-color: #F8F9FB;
}

/* sai.css */

.infobox {
    background-color: #F8F9FB;
    border: 1px solid #555;
    color: #000;
}
.infobox th {
    background-color: #F8F9FB;
    color: #000;
}
.infobox td {
    background-color: #F8F9FB;
}

/* Стиль для элементов списка с адаптивным размером */

.theme-toggle-button {
    background-color: #007BFF; /* Синий фон кнопки */
    color: white; /* Белый цвет текста */
    border: 2px solid #0056b3; /* Синяя граница */
    border-radius: 5px; /* Закругленные углы */
    padding: 10px; /* Отступы внутри кнопки */
    cursor: pointer; /* Указатель при наведении */
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавный переход при изменении фона и цвета */
}

.theme-toggle-button:hover {
    background-color: #0056b3; /* Темно-синий фон при наведении */
    color: #fff; /* Белый текст при наведении */
}


body #p-personal li#p-themes {
    border-right: 1px solid #333;
    padding: 0 .5em;
    margin-right: 0;
    position: relative;
    list-style: none;
    background: transparent;
    border: transparent;
    font-family: 'MyCustomFont2', sans-serif;
}

.vector-menu-dropdown .vector-menu-content {
    background-color: #007BFF; /* Устанавливает синий фон */
    border-radius: 4px; /* Закругляет углы для более приятного вида */
    color: black; /* Изменяет цвет текста на белый для лучшей читабельности */
}

.vector-menu-dropdown .vector-menu-content:hover {
    background-color: #0056b3; /* Изменяет фон на более тёмно-синий при наведении */
    transition: background-color 0.3s ease; /* Добавляет плавный переход для изменения фона */
}


.vector-menu-dropdown .mw-list-item a {
    cursor: pointer;
}

body #p-personal li#p-themes ul {
    flex-direction: column;
    padding: 0.5em 0.3em 0.4em;
    align-items: flex-start;
    gap: 0.25em;
    height: 145px;
}

body #p-personal li#p-themes ul li a {
    padding: 0.25em 0.5em;
    text-decoration: none;
    margin-left: -10px;
    text-align: center;
    font-size: 15px;
    color: red; /* Задает красный цвет иконок */
    background: transparent;
    transition: color 0.3s ease, text-shadow 0.3s ease; /* Добавляет плавный переход для цвета и тени */
}

body #p-personal li#p-themes ul li a:hover {
    color: #ff3333; /* Изменяет цвет на более светлый красный при наведении */
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.7); /* Добавляет подсветку при наведении */
}



.vector-user-menu-legacy .vector-menu-content-list {
    display: flex;
    flex-grow: 1;
    align-items: baseline;
    flex-direction: row;
    justify-content: space-between;
}

#corner-table {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background-color: white;
    border: 1px solid #a2a9b1;
}



.wikitable img {
    border: none;
}


li.explore-adaptive-item {
    background-color: #F2FFFF; /* Цвет фона */
    border: 2px solid #999; /* Цвет и толщина рамки */
    border-radius: 12px; /* Закругленные углы */
    padding: 15px; /* Внутренние отступы */
    margin-bottom: 1px; /* Отступ между элементами списка *//
    list-style-type: none; /* Убираем стандартные маркеры списка */
    display: inline-block; /* Для уменьшения ширины до содержимого */
    min-width: 150px; /* Минимальная ширина элемента */
    min-height: 50px; /* Минимальная высота элемента */
    max-width: 100%; /* Максимальная ширина до 100% контейнера */
    word-wrap: break-word; /* Перенос длинных слов на следующую строку */
    box-sizing: border-box; /* Учитываем рамку и отступы в размерах */
    position: relative; /* Для позиционирования псевдоэлемента */
    transition: background-color 0.4s ease, color 0.4s ease; /* Плавный переход для фона и цвета текста */
}

li.explore-adaptive-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/1/1e/Clancy_Gif_Intro.gif'); /* Замените на путь к вашей картинке */
    background-size: cover; /* Масштабируем картинку чтобы покрывала весь элемент */
    background-repeat: no-repeat; /* Отключаем повтор картинки */
    background-position: center; /* Центрируем картинку */
    opacity: 0; /* Картинка изначально скрыта */
    transition: opacity 0.4s ease; /* Плавный переход для появления картинки */
    border-radius: 10px; /* Закругленные углы для картинки */
    z-index: 0; /* Размещение позади текста */
}

li.explore-adaptive-item:hover {
    background-color: transparent; /* Убираем цвет фона при наведении */
    border-color: transparent; /* Убираем цвет рамки при наведении */
    color: #FDE51F; /* Цвет текста при наведении */
    text-shadow: 0px 0px 7px rgba(0, 0, 0, 2.5);
    border: 2px solid #862520; /* Цвет и толщина рамки */
}

li.explore-adaptive-item:hover::before {
    opacity: 1; /* Картинка становится полностью видимой при наведении */
}

/* Убедимся, что текст не меняет других стилей при наведении */
li.explore-adaptive-item:hover * {
    position: relative;
    z-index: 1; /* Текст размещается поверх картинки */
    color: inherit; /* Сохраняем цвет текста при наведении */
    text-decoration: none; /* Убираем возможные подчеркивания */
}


/* Убедимся, что текст не меняет других стилей при наведении */
li.explore-adaptive-item:hover * {
    position: relative;
    z-index: 1; /* Текст размещается поверх картинки */
    color: inherit; /* Сохраняем цвет текста при наведении */
    text-decoration: none; /* Убираем возможные подчеркивания */
}


/* Убедимся, что текст не меняет других стилей при наведении */
li.explore-adaptive-item:hover * {
    color: inherit; /* Сохраняем цвет текста при наведении */
    text-decoration: none; /* Убираем возможные подчеркивания */
}


li.custom2-adaptive-item {
    background-color: #F2FFFF; /* Цвет фона */
    border: 2px solid #999; /* Цвет и толщина рамки */
    border-radius: 10px; /* Закругленные углы */
    padding: 10px; /* Внутренние отступы */
    margin-bottom: 10px; /* Отступ между элементами списка */
    list-style-type: none; /* Убираем стандартные маркеры списка */
    display: inline-block; /* Для уменьшения ширины до содержимого */
    min-width: 150px; /* Минимальная ширина элемента */
    min-height: 50px; /* Минимальная высота элемента */
    max-width: 100%; /* Максимальная ширина до 100% контейнера */
    word-wrap: break-word; /* Перенос длинных слов на следующую строку */
    box-sizing: border-box; /* Учитываем рамку и отступы в размерах */
    position: relative; /* Необходим для позиционирования псевдоэлемента */
}

/* Стиль для ссылки, чтобы она занимала всю область <li> */
li.custom2-adaptive-item .link-item {
    display: block; /* Занимает всю доступную ширину и высоту */
    text-decoration: none; /* Убираем подчеркивание текста */
    color: inherit; /* Наследуем цвет от родительского элемента */
    height: 100%; /* Занимает полную высоту <li> */
    width: 100%; /* Занимает полную ширину <li> */
}

/* Дополнительный стиль для уникального элемента с текстом */
li.unique-item::after {
    content: "Discography"; /* Текст для отображения */
    color: white; /* Цвет текста */
    font-size: 20px; /* Размер шрифта */
    font-weight: bold; /* Полужирный шрифт */
    position: absolute; /* Абсолютное позиционирование */
    top: 50%; /* Центрирование по вертикали */
    left: 50%; /* Центрирование по горизонтали */
    transform: translate(-50%, -50%); /* Смещение на половину ширины и высоты */
    opacity: 0; /* Исходное состояние невидимо */
    transition: opacity 0.3s ease; /* Плавный переход */
}

/* Отображение текста при наведении на уникальный элемент */
li.unique-item:hover::after {
    opacity: 1; /* Сделать текст видимым */
}

/* Стиль для нового вида элемента списка */
li.special-item {
    background-color: #E0E0E0; /* Цвет фона для специального элемента */
    border: 1px solid #CCC; /* Цвет и толщина рамки для специального элемента */
    border-radius: 5px; /* Закругленные углы для специального элемента */
    padding: 15px; /* Внутренние отступы для специального элемента */
    font-style: italic; /* Курсив для текста внутри специального элемента */
    font-size: 16px; /* Размер шрифта для текста внутри специального элемента */
    color: #333; /* Цвет текста для специального элемента */
}

/* Убираем эффекты затемнения при наведении */
li.custom2-adaptive-item:hover img {
    filter: none; /* Убираем фильтр затемнения */
}


/* CSS placed here will be applied to all skins */ 

/* Стиль для элементов списка с адаптивным размером */
li.custom-adaptive-item {
    background-color: #F2FFFF; /* Цвет фона */
    border: 2px solid #999; /* Цвет и толщина рамки */
    border-radius: 10px; /* Закругленные углы */
    padding: 10px; /* Внутренние отступы */
    margin-bottom: 10px; /* Отступ между элементами списка */
    list-style-type: none; /* Убираем стандартные маркеры списка */
    display: inline-block; /* Для уменьшения ширины до содержимого */
    min-width: 150px; /* Минимальная ширина элемента */
    min-height: 50px; /* Минимальная высота элемента */
    max-width: 100%; /* Максимальная ширина до 100% контейнера */
    word-wrap: break-word; /* Перенос длинных слов на следующую строку */
    box-sizing: border-box; /* Учитываем рамку и отступы в размерах */
    position: relative; /* Необходим для позиционирования псевдоэлемента */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

li.custom-adaptive-item a {
    display: block; /* Занимает всю доступную ширину и высоту */
    height: 100%; /* Занимает полную высоту <li> */
    width: 100%; /* Занимает полную ширину <li> */
    text-decoration: none; /* Убираем подчеркивание текста */
    color: inherit; /* Наследуем цвет от родительского элемента */
}

/* Дополнительный эффект при наведении мыши */
li.custom-adaptive-item:hover {
    background-color: #CFC8B2; /* Цвет фона при наведении */
    border-color: #777; /* Цвет рамки при наведении */
}

/* Изменение оттенка для изображения при наведении на <li> */
li.custom-adaptive-item:hover img {
    filter: brightness(0.8); /* Темнее на 20% при наведении */
}

/* Текст "Discography" появляется только в уникальном элементе */
li.unique-item::after {
    content: "Discography"; /* Текст для отображения */
    color: white; /* Цвет текста */
    font-size: 20px; /* Размер шрифта */
    font-weight: bold; /* Полужирный шрифт */
    position: absolute; /* Абсолютное позиционирование */
    top: 50%; /* Центрирование по вертикали */
    left: 50%; /* Центрирование по горизонтали */
    transform: translate(-50%, -50%); /* Смещение на половину ширины и высоты */
    opacity: 0; /* Исходное состояние невидимо */
    transition: opacity 0.3s ease; /* Плавный переход */
}

li.unique-item2::after {
    content: "[[Tours]]"; /* Текст для отображения */
    color: white; /* Цвет текста */
    font-size: 20px; /* Размер шрифта */
    font-weight: bold; /* Полужирный шрифт */
    position: absolute; /* Абсолютное позиционирование */
    top: 50%; /* Центрирование по вертикали */
    left: 50%; /* Центрирование по горизонтали */
    transform: translate(-50%, -50%); /* Смещение на половину ширины и высоты */
    opacity: 0; /* Исходное состояние невидимо */
    transition: opacity 0.3s ease; /* Плавный переход */
}

/* Отображение текста при наведении на уникальный элемент */
li.unique-item:hover::after {
    opacity: 1; /* Сделать текст видимым */
}

li.unique-item2:hover::after {
    opacity: 1; /* Сделать текст видимым */
}

hr.whowe-hr { border: 0; height: 5px; background: linear-gradient(to right, rgba(208, 32, 25, 0), #77E7E2, rgba(208, 32, 25, 0)); }

table td.hover-effect { background-color: #FF0000; transition: background-color 0.3s ease; }

table td.hover-effect:hover { background-color: #00FF21; }

hr.custom-hr-unco { border: 0; height: 1px; background-color: #B59000; margin: 5px 0; }

hr { background-color: #C14424; }

.mw-body h1, .mw-body-content h1, .mw-body-content h2 { font-family: 'MyCustomFont2', sans-serif; }

.mw-body h1, .mw-body-content h1 { font-family: 'MyCustomFont1', sans-serif; font-size: 35px; color: linear-gradient(to bottom, rgba(167, 215, 249, 0) 0, #77E7E2 100%); }

@font-face { font-family: 'MyCustomFont1'; src: url('/nc_assets/fonts/Ponter.ttf') format('truetype'); font-weight: 550; font-style: normal;  }

@font-face { font-family: 'MyCustomFont3'; src: url('/nc_assets/fonts/Martian Mono Condensed Medium.ttf') format('truetype'); font-weight: normal; font-style: normal;  }

@font-face { font-family: 'MyCustomFont2'; src: url('/nc_assets/fonts/JetBrainsMono.ttf') format('truetype'); font-weight:500; font-style: normal; font-optical-sizing: auto;   }

.mw-mmv-post-image { background-color: #E0FFFF; }

.mw-ui-button.mw-ui-progressive:not(:disabled) { background-color: #77E7E2; }

.venue-table { background-color: #EFE1E4; text-align: left; margin: 1em 0; border-collapse: collapse; }

.unco-table { background-color: #FFF6CE; text-align: left; margin: 1em 0; border-collapse: collapse; }

.qute-table { background-color: #FFE281; border-color: #B59000 text-align: left; margin: 1em 0; border-collapse: collapse; }

.setlist-table { background-color: #F2FFFF; border: 3px solid #c14424; text-align: left; margin: 1em 0; border-collapse: collapse; }

.venue-table > tr > th, .venue-table > tr > td, .venue-table > * > tr > th, .venue-table > * > tr > td { padding: 0.2em 0.4em; }

.unco-table > tr > th, .unco-table > tr > td, .unco-table > * > tr > th, .unco-table > * > tr > td { padding: 0.2em 0.4em; }

.setlist-table > tr > th, .setlist-table > tr > td, .setlist-table > * > tr > th, .setlist-table > * > tr > td { padding: 0.2em 0.4em; }

.custom-table tbody .cell-red { background-color: #ffdddd; }

.custom-table { background-color: #F2FFFF; border: 2px solid #B0DFE5; border-collapse: collapse; }

.disc-table { border: 2px solid #B0DFE5; }

.custom-table .cell-der { background-color: #CC531E; }

.custom-table th, .custom-table td { border: 1px solid #B0DFE5; padding: 3px; }

.custom-table .header-red { background-image:url(/images/f/f9/Scaled_no_transparent.png); background-size: cover; color: white; text-align: center; }

.custom-table .header-blue { background-image:url(/images/f/f9/Scaled_no_transparent.png); background-size: cover; color: white; text-align: center; }

.custom-table .cell-red { background-color: #FFE281; }

.custom-table .cell-photo { background-color: #E0FFFF; }

.custom-table .cell-box { background-image:url(/images/1/15/Scaled_no_transparent2.png); }

.custom-table .cell-blue { background-color: #B0DFE5; border: 1px solid #C14424; height: 2px; }

.custom-table .cell-disco { text-align:center; border-color:#EFBB7F; background-color: #F2FFFF; }

.custom-table .cell-disco2 { background-color:#D87C43; text-align:center; border-color:#EFBB7F; }

.custom-table .cell-green { background-color: #F2FFFF; border: 1px solid #C14424; height: 2px; }

.custom-table .header-grass { background-color: #F2FFFF; }

#footer-info li { line-height: 1.4; background: #E0FFFF; margin-bottom: 4px; text-indent: 5px; }

#footer-places li { float: left; margin-right: 1em; line-height: 2; background: #E0FFFF; text-indent: 5px; text-indent-right: 5px; }

.background-table { background-image: url(/images/3/3b/Clancy_background.png); background-size: cover;}

.vector-user-menu-legacy li { font-size: 0.75em; float: left; margin-left: 0.75em; padding-top: 2.6em; line-height: 1.16666667; }

.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), .jquery-tablesorter th.headerSort { background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both.svg?0e440); cursor: pointer; background-repeat: no-repeat; background-position: center right; padding-right: 21px; background-size: auto; }

.table-bg { background-image:url(/images/0/0a/Whiteback.jpg); background-size: cover;  background-repeat: no-repeat; }

.border-image-container { border-image-source: linear-gradient(to right, #ff8c00, #ffd700); }

.wikitable { background-color: #F2FFFF; }

.gradient-underline { display: inline-block; position: relative; }

.gradient-underline::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 100%; height: 5px; background-image: linear-gradient(to right, #ff0000, #00ff00); background-size: 100% 100%; z-index: -1; }

.my-template.theme-dark { /* Styles specific to the "dark" theme */ }

.rounded-table { border-collapse: collapse; border-radius: 10px; overflow: hidden; }

.wikitable.transparent { background-color: transparent; border: none; }

/* Change the background color of the bottom and left of eath page, up to behind the logo: */
body {
    background: #B0DFE5 url(/images/b/bd/Fans_background.png) no-repeat;
    font-family: 'Roboto', Arial, sans-serif;
    position: relative;
}

#content .client-darkmode { background: #AA3C14; font-family: "Roboto"; }

.theme-dark .infobox { background-color: #333; color: #fff; border: 1px solid #666; }

/* background color of the content and title of pages */ 
#content { background-color: #E0FFFF; font-family: 'MyCustomFont2', sans-serif; } 
 
/* This is from the background color of the title of the Navigation menu in the left column */
#p-navigation { background-color: #F8F9FB; border-radius: 10px 10px 0px 0px; border: 3px solid #722215; border-bottom:hidden; background-image:url(/images/9/97/Sidebar.png); font-family: 'MyCustomFont3', sans-serif; }

/* This is from the background color of the title of the Twenty one pilots menu in the left column */
#p-Twenty_one_pilots { background-color: #F8F9FB; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; }

/* This is from the background color of the title of the Twenty one pilots menu in the left column */
#p-Tyler_Joseph { background-color: #F8F9FB; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; }

/* This is from the background color of the title of the Members menu in the left column */
#p-Members { background-color: #F8F9FB; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; }

.background-table { background-image: url(/images/3/3b/Clancy_background.png); background-size: cover;}

#catlinks { background:#B0DFE5; border: 1px solid #B0DFE5; color: F2FFFF; }

.mw-parser-output .tracklist th[scope="col"] { background-color: #ef5e29; }

.wikitable > tr > th, .wikitable > * > tr > th { color: #076262; background-color: #B0DFE5; border: 1px solid #7b1325; background-image: url(/images/d/db/Clancy_Letter_Background1.png); background-size: cover; color: #fff; }

.wikitable > tr > th, .wikitable > * > tr > th { background-color: #eaecf0; text-align: center; color: #fff; }

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { background: #F2FFFF; }

.wikitable > tr > th, .wikitable > * > tr > th { color: #076262; background-color: #B0DFE5; border: 1px solid #7b1325; background-size: cover; background-image: url(/images/d/db/Clancy_Letter_Background1.png); }

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { border: 1px solid #7b1325; }

.catlinks li { display: inline-block; line-height: 1.25em; border-left: 1px solid #B0DFE5; margin: 0.125em 0; padding: 0 0.5em; }

.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#722215 100%); background-repeat: no-repeat; background-size: 1px 100%; }

:not(:checked) > .vector-menu-checkbox { background:#EFB737; display: block; }

li.gallerybox div.thumb { border: hidden; background-color: #B0DFE5; text-align:center; }

.mw-parser-output .tracklist-total-length th>span { background-color: #d8663d; }

.mw-parser-output .tracklist-total-length td { background-color: #d8663d; }

.vector-menu-dropdown { background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#722215 100%); }

.c-actions { margin: 10px 5px 0px 0px; }

.c-item { background-color: #F2FFFF; border:2px solid #B0DFE5; color: #722215; margin: 10px 0px 15px 0px; }

.c-avatar img { padding: 3px; border: 1px solid #dcdcdc; background-color: #bc1313; margin: 6px 0px 0px 6px; }

.c-score { right: 10px; }

.c-container { margin: 0px 0px 0px 75px; }

.c-user { margin: 1px 0px 6px 0px; }

.c-time { color: #af1414; }

.f-message { background-color: #FFF8ED; width: 445px; }

.c-comment { text-indent: 5px; }

.user-section-heading { margin: 0 0 23px 0; }

#profile-title { margin: 15px 20px 29px -6px; }

#profile-image img { margin: 15px 0px 0px 0px; }

body #p-personal li#p-themes > span { position: relative; top: 24px; left: -101px; }

.vector-user-menu-legacy li { position: relative; top: -26px; right: -10px; }

.mwe-popups .mwe-popups-extract:after, .mwe-popups .mwe-popups-extract blockquote:after { content: ' '; position: absolute; bottom: 0; width: 25%; height: 20px; background-color: #F2FFFF; pointer-events: none; }

figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame'] { background-color: #D35232; border-color: #9E3A19; }

.mw-content-ltr figure[typeof~='mw:File/Thumb'] > figcaption, .mw-content-ltr figure[typeof~='mw:File/Frame'] > figcaption { background-color: #77E7E2; border-color: #9E3A19; color: #fff }

.mwe-popups .mwe-popups-extract[dir='ltr']:after { right: 0; background-image: linear-gradient(to right,rgba(255,255,255,0),#F2FFFF 50%); }

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { background-color: #; border: 1px solid #B0DFE5; padding: 0.2em 0.4em; }

input[type="checkbox" i] { color: #B0E0E6; }

.mwe-popups .mwe-popups-container { background: #F2FFFF; }

.mw-parser-output .infobox-above, .mw-parser-output .infobox-title { font-size: 125%; font-weight: bold; text-align: center; border-radius: 2px 2px; background-image: url(/images/f/f9/Scaled_no_transparent.png); background-size: cover; text-shadow:  0 0 10px #000; color: #242D2A; }


#n-Discord a { color: #fff !important; font-weight: bold; border-radius: 4px; border: 1px solid #4c57d0; background-color: #5865f2; display: block; position: relative; padding: 4px 4px 5px calc(17px + 6.5px * 2); box-shadow: 0 2px 3px rgba(0,0,0,0.1); transition: 0.2s; }

.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading { display: block; color: #44180D; margin: 0.5em 0 0 0.66666667em; border: 0; padding: 0.25em 0; font-size: 0.80em; font-weight: bold; cursor: default; background-image: linear-gradient(to right,rgba(200,204,209,0) 0,#AA3C14 33%,#AA3C14 66%,rgba(200,204,209,0) 100%); background-position: center bottom; background-repeat: no-repeat; background-size: 100% 1px; font-family: 'sans-serif', sans-serif; }

.vectorTabs span a { background-color: #B0E0E6; }

#p-logo { ; } 

.featurebox-heading { background-image: url(/images/1/14/Scaled_transparent.png); color: #fff; }

element.style { width: 60%; background-color: ; background-image: url(/images/1/14/Scaled_transparent.png); }

.toc, .toccolours { border-radius: 8px 8px; border: 3px solid #B0DFE5; background-color: #F2FFFF; }

#p-tb { background-color: #F8F9FB; border-radius: 0px 0px 10px 10px; border: 3px solid #722215; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); font-family: 'MyCustomFont2', sans-serif; }

#p-personal ul { background: #E0FFFF; border-radius: 3px 3px; border: 2px solid #B0DFE5; padding:0.1em 1.5em; height: 23px; }

#mw-head { background-image: url(/images/3/3b/Twenty_One_Pilots_background.jpg);}

.vector-menu-tabs-legacy .selected { background: #E0FFFF }

.vector-menu-checkbox {
    color: #B0DFE5;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: none;
}

.mp_header { background-image:url(/images/9/9c/Wikinews_banner_2024.png); background-repeat: no-repeat; background-position: top right; width: 100%;}

.mw-body { border: 1.5px solid #722215; margin-top: -4px; }

h1, h2 { border-color: #57544a; }

.vector-menu-dropdown .mw-list-item a:not(.mw-ui-icon) { background: #F4FFFF; }

img[Attributes Style] { height: 168px; }

.grid * { background: #E0C9AF; }

.vector-search-box-input { color: #312400; border: 1px solid #6D2614; }

.skin-vector .uls-search { border-bottom-color: #7A4D1D; }

.vector-menu-tabs-legacy li { background-image: linear-gradient(to top,#E0FFFF 0,#E0FFFF 1px,#C1BBB2 100% ); 

.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading { background-image: linear-gradient(to right,rgba(200,204,209,0) 0,#B0DFE5 33%,#F7572E 66%,rgba(200,204,209,0) 100%); background-position: center bottom; background-repeat: no-repeat; background-size: 100% 1px; font-weight: bold; }

.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { background-image: linear-gradient(to bottom,rgba(68,137,145,0) 0,#B0DFE5 100%); border: 4px solid #722215; background-repeat: no-repeat; background-size: 1px 100%; border: 4px solid #B0DFE5; margin-top: -4px; }

.imagelink_telegram a {
  width:100px;
  height:100px;
  display:block;
  text-decoration:none;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Telegram_logo.svg/2048px-Telegram_logo.svg.png")

body.page-Main_Page h1.firstHeading { display:none; }

#title-para { background-color: #F0FFFF; }

.hoverimage:hover {
  transition: 0.2s ease;
  transform: scale(1.1);
}

#mw-content-text .featurebox .featurebox-heading{
 background-image:url("https://tfwiki.net/mediawiki/images2/2/26/Allsparkstrip_transparent.png");
}

.hover-highlight:hover {
    background-color: #ffffcc; /* Any desired color */
}

/* Hover Box for switching the visibility of the selected item */
.hoverbox { display:inline-block; padding:0em; }
.hoverbox .hoveritem { display:none; margin:0em; padding:0em; }
.hoverbox .hoveritem.selected { display:inline-block; }
.hoverbox:hover .hoveritem { display:inline-block; }
.hoverbox:hover .hoveritem.selected { display:none; }

	--theme-background-color: #2c56a0;