/* Стиль Web 1.0 - Классический форум конца 90-х / начала 2000-х */
/* Традиционные фоновые картинки в стиле той эпохи */

body { 
    background-color: #FFF; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect width='100' height='100' fill='%23ffffff'/%3E%3Cpath d='M0,0 L100,0 L100,100 L0,100 Z' fill='none' stroke='%23c0c0c0' stroke-width='1'/%3E%3Cpath d='M10,10 L90,10 L90,90 L10,90 Z' fill='none' stroke='%23e0e0e0' stroke-width='1'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='%23f0f0f0' stroke-width='1'/%3E%3C/svg%3E");
    margin: 0px; 
    padding: 0px; 
    scrollbar-arrow-color: #3B88C5; 
    scrollbar-face-color: #E0E0E0; 
    scrollbar-track-color: #F0F0F0; 
    scrollbar-highlight-color: #FFFFFF; 
    scrollbar-3dlight-color: #C0C0C0; 
    scrollbar-shadow-color: #808080; 
    scrollbar-darkshadow-color: #404040; 
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

font,th,td,p { 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    color: #000000;
}

a { 
    text-decoration: underline; 
    color: #0000FF; 
    font-weight: bold;
}

a:visited { 
    text-decoration: underline; 
    color: #800080; 
}

a:hover, a:active { 
    text-decoration: underline; 
    color: #FF0000; 
    background-color: #FFFF00;
}

hr { 
    height: 0px; 
    border: none; 
    border-top: 1px solid #008080; 
    border-bottom: 1px solid #C0C0C0;
}

img { 
    border: 0px; 
}

form { 
    display: inline; 
}

/* Таблицы с классическими рамками */
table {
    border-collapse: collapse;
    border: 2px outset #C0C0C0;
    background-color: #FFFFFF;
}

table.forumline { 
    background-color: #C0C0C0; 
    border: 3px inset #808080;
}

table.forumline:hover { 
    background-color: #D0D0D0; 
}

/* Строки таблиц */
.row, .row1, .row2 { 
    background-color: #FFFFFF; 
    border: 1px solid #E0E0E0;
}

.row3 { 
    background-color: #F0F0F0; 
    border: 1px solid #E0E0E0;
}

/* Заголовки таблиц */
th, td.th { 
    color: #FFFFFF; 
    font-size: 14px; 
    font-weight: bold; 
    background-color: #008080;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect width='10' height='5' fill='%23006666'/%3E%3Crect y='5' width='10' height='5' fill='%23008080'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    height: 25px; 
    border: 2px outset #008080;
    text-align: center;
}

/* Категории */
td.cat,td.catHead,td.catLeft, td.rowpic, td.catSides,td.catRight,td.catBottom { 
    color: #000000; 
    font-size: 14px; 
    background-color: #C0C0C0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='20' height='20' fill='%23c0c0c0'/%3E%3Cpath d='M0,0 L20,0 L20,20 L0,20 Z' fill='none' stroke='%23808080' stroke-width='1'/%3E%3Crect x='2' y='2' width='16' height='16' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat: repeat; 
    height: 27px; 
    padding: 3px; 
    border: 1px inset #808080;
    font-weight: bold;
}

/* Текст */
.gen { 
    font-size: 14px; 
    color: #000000;
}

.genmed { 
    font-size: 13px; 
    color: #333333;
}

.gensmall { 
    font-size: 12px; 
    color: #666666;
}

/* Навигация */
.nav { 
    font-weight: bold; 
    font-size: 14px; 
    color: #0000FF;
}

.nav a, .nav a:visited { 
    text-decoration: underline; 
    color: #0000FF; 
}

.nav a:hover, .nav a:active { 
    text-decoration: underline; 
    color: #FF0000; 
    background-color: #FFFF00;
}

table.nav { 
    background-color: #F0F0F0; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Crect width='5' height='5' fill='%23f0f0f0'/%3E%3Cpath d='M0,0 L5,5' stroke='%23c0c0c0' stroke-width='0.5'/%3E%3Cpath d='M5,0 L0,5' stroke='%23c0c0c0' stroke-width='0.5'/%3E%3C/svg%3E");
    border: 2px groove #C0C0C0; 
    height: 25px; 
}

table.nav:hover { 
    border: 2px groove #0000FF; 
}

/* Ссылки форумов */
.forumlink { 
    font-weight: bold; 
    font-size: 14px; 
    color: #000080;
}

a.forumlink, a.forumlink:visited { 
    text-decoration: none; 
    color: #000080;
}

a.forumlink:hover, a.forumlink:active { 
    text-decoration: underline; 
    color: #FF0000;
}

/* Формы ввода */
input { 
    text-indent: 2px; 
    border: 2px inset #C0C0C0;
    background-color: #FFFFFF;
}

input,textarea, select { 
    color: #000000; 
    font: normal 14px Verdana, Arial, Helvetica, sans-serif; 
    border: 2px inset #C0C0C0;
}

input.post, textarea.post, select { 
    background-color: #FFFFFF; 
    border: 2px inset #808080; 
}

input.post { 
    height: 20px; 
}

input.button { 
    background-color: #C0C0C0; 
    color: #000000; 
    font-size: 14px; 
    font-family: Verdana, Arial, Helvetica, sans-serif;  
    border: 2px outset #808080; 
    font-weight: bold;
    cursor: pointer;
}

input.button:active {
    border: 2px inset #808080;
}

input.mainoption { 
    background-color: #008080; 
    color: #FFFFFF;
    font-weight: bold;  
    border: 2px outset #006666; 
    height: 22px; 
}

input.liteoption { 
    background-color: #C0C0C0; 
    color: #000000; 
    font-weight: normal;  
    border: 2px outset #808080; 
    height: 22px; 
}

select optgroup { 
    background-color: #E0E0E0; 
    color: #000000; 
    font-weight: bold;
}

select option, select optgroup option { 
    background-color: #FFFFFF; 
    color: #000000; 
}

/* Код и цитаты */
.code {
    font-family: 'Courier New', Courier, monospace; 
    font-size: 14px; 
    color: #008000;
    background-color: #F8F8F8; 
    border: 1px solid #C0C0C0;
    border-left-width: 4px; 
    border-top-width: 1px; 
    border-right-width: 1px; 
    border-bottom-width: 1px;
    padding: 5px;
    margin: 5px 0;
}

.quote {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    color: #333333; 
    line-height: 1.4;
    background-color: #F0F0F0; 
    border: 1px solid #808080;
    border-left-width: 4px; 
    border-top-width: 1px; 
    border-right-width: 1px; 
    border-bottom-width: 1px;
    padding: 5px;
    margin: 5px 0;
}

/* Текст сообщений */
.postbody { 
    font-size: 14px; 
    color: #000000; 
    line-height: 1.5;
}

.postbody a, .postbody a:visited { 
    text-decoration: underline; 
    color: #0000FF;
}

.postbody a:hover, .postbody a:active { 
    text-decoration: underline; 
    color: #FF0000;
}

/* Имена пользователей */
.name { 
    font-weight: bold; 
    font-size: 13px; 
    color: #000080;
}

.name a, .name a:visited { 
    text-decoration: underline; 
    color: #000080;
}

.name a:hover, a.name a:active { 
    text-decoration: underline; 
    color: #FF0000;
}

.postdetails { 
    color: #666666; 
    font-size: 12px; 
    font-style: italic;
}

/* Разделители */
td.spacerow { 
    background-color: #C0C0C0; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='2'%3E%3Crect width='5' height='2' fill='%23808080'/%3E%3Crect x='5' width='5' height='2' fill='%23c0c0c0'/%3E%3C/svg%3E");
    height: 2px; 
    padding: 0px; 
}

/* Заголовки категорий */
.cattitle { 
    font-weight: bold; 
    font-size: 16px; 
    letter-spacing: 1px; 
    color: #000080;
    text-transform: uppercase;
}

a.cattitle { 
    text-decoration: none; 
    color: #000080;
}

a.cattitle:hover { 
    text-decoration: underline; 
    color: #FF0000;
}

/* Главные заголовки */
.maintitle,h1,h2 {
    font-weight: bold; 
    font-size: 24px; 
    font-family: "Arial Black", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none; 
    line-height: 120%; 
    color: #000080;
    text-shadow: 2px 2px 4px #C0C0C0;
    border-bottom: 3px double #000080;
    padding-bottom: 5px;
    margin: 20px 0;
}

h2 {
    font-size: 20px;
    color: #008080;
    border-bottom: 2px solid #008080;
}

/* Футер с классическим счетчиком посещений */
.footer {
    background-color: #F0F0F0;
    border-top: 3px double #C0C0C0;
    padding: 10px;
    margin-top: 20px;
    font-size: 11px;
    color: #666666;
    text-align: center;
}

/* Классический счетчик посещений */
.visitor-counter {
    background-color: #000000;
    color: #00FF00;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 3px 8px;
    border: 2px inset #00FF00;
    display: inline-block;
    margin: 5px;
}

/* СТИЛИ для скрипта форума WR-Forum Professional версии 2.2 с 2019 года */

/* 1) ИЗМЕНЕНИЕ ИМЕЮЩЕГОСЯ СТИЛЯ */
/* Здесь ниже задаётся стиль для ссылок - все ссылки в квадратиках обведённых нежным оттенком основного цвета */
.pgbutt a {
    font-family: Verdana; 
    padding-top: 2px;
    padding-bottom: 2px;
    text-decoration: none; 
    border: 2px outset #808080; 
    background-color: #C0C0C0; 
    padding: 2px 6px; 
    margin: 5px 1 0 0;
    color: #000000;
    font-weight: bold;
}

.pgbutt a:hover {
    border: 2px inset #808080;
    background-color: #D0D0D0;
}
 
input,input.liteoption,.fakebut {
    border: 2px outset #808080; 
    font-size: 13px; 
    font-weight: bold;
    background-color: #C0C0C0;
    color: #000000;
}

/* 2) QR-CODE */
#qr img {
    width: 35px;
    height: 35px;
    position: fixed;
    right: 10px;
    top: 10px;
    border: 2px outset #808080;
    padding: 2px;
    background-color: white;
}

#qr img:hover {
    width: 200px;
    height: 200px;
    z-index: 100;
    padding: 5px;
    border: 2px inset #808080;
}

/* 3) Если нет аватара добавляем ЧУДО КВАДРАТ с первой буквой логина */
.guestavatar {
    width: 120px;
    height: 120px;
    text-align: center;
    background: linear-gradient(45deg, #C0C0C0, #FFFFFF, #C0C0C0);
    color: #000080;
    font-size: 50px;
    display: table-cell;
    position: relative;
    vertical-align: middle;
    border: 3px outset #808080;
    font-family: "Arial Black", sans-serif;
}

/* 4) навигационное МЕНЮ В АДМИНКЕ */
#nav8, #nav8 ul, #nav8 li {
    margin: 0;
    padding: 0;
    border: 0;
}

#nav8, #nav8 ul {
    background-color: #C0C0C0;
    border: 2px outset #808080;
}

#nav8 {
    border-spacing: 0 0;
    position: relative;
    z-index: 50;
    width: 100%;
}

#nav8 ul {
    position: absolute;
    display: none;
    border: 2px inset #808080;
    background-color: #F0F0F0;
}

#nav8 td:hover ul {
    display: block;
}

#nav8 ul li {
    list-style: none;
}

#nav8 .right {
    direction: rtl;
}

#nav8 .right ul {
    right: 0;
}

#nav8 .right li {
    direction: ltr;
}

#nav8 a {
    display: block;
    padding: 8px 12px;
    text-align: center;
    text-decoration: none;
    color: #000000;
    font-weight: bold;
    background-color: #C0C0C0;
    border: 1px solid #808080;
}

#nav8 ul a {
    padding: 6px 15px;
    text-align: left;
    background-color: #F0F0F0;
}

#nav8 td:hover, #nav8 li:hover {
    background-color: #D0D0D0;
}

#nav8 td {
    text-align: center;
}

/* 5) Стиль для блока загрузки */
#cssbar-wrapper {
    width: 300px;
    height: 19px;
    position: absolute;
    left: 50%;
}

#cssbar-border {
    border: 3px inset #808080;
    height: 100%;
    width: 100%;
    position: relative;
    left: -50%;
    top: -50%;
    padding: 4px 3px;
    background-color: #C0C0C0;
}

#cssbar-whitespace {
    overflow: hidden;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    background-color: #FFFFFF;
    border: 1px inset #808080;
}

#cssbar-line {
    background-color: #0000FF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect width='10' height='10' fill='%230000ff'/%3E%3Crect x='0' y='0' width='5' height='5' fill='%230080ff'/%3E%3Crect x='5' y='5' width='5' height='5' fill='%230080ff'/%3E%3C/svg%3E");
    position: absolute;
    height: 100%;
    width: 100%;
    animation: cssbar-slide 3s linear infinite;
    -o-animation: cssbar-slide 3s linear infinite;
    -ms-animation: cssbar-slide 3s linear infinite;
    -webkit-animation: cssbar-slide 3s linear infinite;
    -moz-animation: cssbar-slide 3s linear infinite;
}

@keyframes cssbar-slide {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@-o-keyframes cssbar-slide {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@-ms-keyframes cssbar-slide {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@-webkit-keyframes cssbar-slide {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@-moz-keyframes cssbar-slide {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Дополнительные элементы в стиле Web 1.0 */

/* Классический баннер */
.web10-banner {
    background-color: #000080;
    color: #FFFFFF;
    border: 3px ridge #C0C0C0;
    padding: 10px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 10px 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='50'%3E%3Crect width='100' height='50' fill='%23000080'/%3E%3Ctext x='50' y='30' text-anchor='middle' font-family='Arial' font-size='14' fill='%23ffffff'%3EWelcome!%3C/text%3E%3C/svg%3E");
    background-repeat: repeat-x;
}

/* Анимированные иконки (подмигивающий смайлик) */
.blink {
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* "Под строительством" иконка */
.under-construction {
    background-color: #FFFF00;
    color: #FF0000;
    border: 2px dashed #FF0000;
    padding: 5px;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
}

/* Классические счетчики (звездочки и точки) */
.rating-stars {
    color: #FFD700;
    font-size: 16px;
    letter-spacing: 2px;
}

/* Текст с эффектом marquee (бегущая строка) */
marquee {
    background-color: #000000;
    color: #00FF00;
    padding: 5px;
    font-family: 'Courier New', monospace;
    border: 1px solid #00FF00;
}

/* Гестбук стиль */
.guestbook-entry {
    background-color: #F8F8F8;
    border: 1px solid #C0C0C0;
    padding: 10px;
    margin: 10px 0;
    font-family: Verdana, sans-serif;
}

.guestbook-entry .date {
    color: #808080;
    font-size: 11px;
    font-style: italic;
}

/* Классические разделители */
.web10-divider {
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='20' height='10' fill='%23000080'/%3E%3Crect y='10' width='20' height='10' fill='%23c0c0c0'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    margin: 15px 0;
}

/* Кнопки в стиле Windows 98 */
.win98-button {
    background-color: #C0C0C0;
    border: 2px outset #808080;
    color: #000000;
    padding: 4px 12px;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-size: 12px;
    cursor: pointer;
}

.win98-button:active {
    border: 2px inset #808080;
}

/* Классическая рамка для изображений */
.polaroid-frame {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    padding: 10px 10px 30px 10px;
    box-shadow: 3px 3px 5px #888888;
    display: inline-block;
    margin: 10px;
}

/* Анимированный GIF эффект (подражание) */
.animated-gif {
    border: 2px solid #000000;
    background: 
        linear-gradient(45deg, 
            #FF0000 0%, #FF0000 25%,
            #00FF00 25%, #00FF00 50%,
            #0000FF 50%, #0000FF 75%,
            #FFFF00 75%, #FFFF00 100%);
    background-size: 400% 400%;
    animation: gif-animation 3s infinite linear;
    padding: 10px;
}

@keyframes gif-animation {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* Стиль для "лучше просматривать в..." */
.best-viewed {
    background-color: #000000;
    color: #FFFFFF;
    border: 1px solid #FF0000;
    padding: 5px;
    font-size: 10px;
    text-align: center;
    margin: 10px 0;
}

.best-viewed span {
    color: #00FF00;
    font-weight: bold;
}

/* Классические цвета ссылок: синий, фиолетовый, красный */
a:link { color: #0000FF; }        /* Непосещенные - синие */
a:visited { color: #800080; }     /* Посещенные - фиолетовые */
a:hover { color: #FF0000; }       /* При наведении - красные */
a:active { color: #FF0000; }      /* Активные - красные */