/*
 * Кастомная тема Icecast2: Стиль Windows 98/2000 (Классический) - ФИНАЛЬНАЯ ВЕРСИЯ
 */

/* Переменные для легкости изменения */
:root {
    --color-background: #C0C0C0; /* Стандартный серый Windows */
    --color-text: #000000;
    --color-highlight: #FFFFFF;
    --color-shadow: #808080;
    --color-dark-shadow: #000000;
    --color-active-title: #0000AA; /* Синий заголовок */
    --color-active-title-text: #FFFFFF;
}

html {
    margin: 0;
    padding: 0;
    background-color: var(--color-background);
}

body {
    padding: 20px;
    background-color: var(--color-background);
    /* Классический шрифт 2000-х */
    font-family: Tahoma, Arial, sans-serif; 
    font-size: 11px;
    color: var(--color-text);
}

a {
    color: var(--color-active-title);
    text-decoration: underline;
    border-bottom: none;
}

a:hover {
    color: #FF0000; /* Красный при наведении */
    text-decoration: underline;
}

/* Заголовки */
h1 {
    font-size: 18px;
    font-weight: bold;
    color: var(--color-text);
    margin: 0 0 10px 0;
    padding: 0;
}

h3 {
    margin: 0px;
    padding: 0px;
    font-size: 13px;
    font-weight: bold;
    color: var(--color-text);
}

h1#header{
    /* Имитация заголовка окна */
    padding: 3px 0px 3px 80px;
    background: var(--color-active-title) url(/icecast.png) no-repeat scroll 5px center;
    background-size: 30px 30px;
    color: var(--color-active-title-text);
    border: 2px outset var(--color-highlight);
    border-color: var(--color-highlight) var(--color-shadow) var(--color-shadow) var(--color-highlight);
    text-shadow: 1px 1px var(--color-dark-shadow);
}

h3 small {
    color: var(--color-text);
    font-size: 80%;
    padding-left: 10px;
}

/* Формы (Поля ввода) */
form.alignedform p {
    margin: 5px 0;
}

form.alignedform label {
    text-align: right;
    display: inline-block;
    vertical-align: middle;
    width: 10em;
    margin: 0 1em 0 0;
    font-weight: bold;
}

form.alignedform input[type="text"],
form.alignedform input[type="password"] {
    display: inline-block;
    vertical-align: middle;
    
    /* Эффект "утопленного" поля */
    border: 2px inset var(--color-shadow);
    border-color: var(--color-dark-shadow) var(--color-highlight) var(--color-highlight) var(--color-dark-shadow);
    background-color: var(--color-highlight);
    color: var(--color-text);
    padding: 2px;
    box-sizing: border-box;
    font-family: Tahoma, Arial, sans-serif;
}

/* Кнопки */
input[type="submit"],
.mounthead .right a { /* Стилизуем ссылки "Login" и "M3U/XSPF" как кнопки */
    /* Эффект объемной кнопки */
    border: 2px outset var(--color-highlight);
    border-color: var(--color-highlight) var(--color-dark-shadow) var(--color-dark-shadow) var(--color-highlight);
    background-color: var(--color-background);
    color: var(--color-text);
    padding: 3px 10px;
    cursor: pointer;
    text-decoration: none;
    font-family: Tahoma, Arial, sans-serif;
    font-weight: bold;
    display: inline-block;
    line-height: normal;
    white-space: nowrap;
}

input[type="submit"]:active,
.mounthead .right a:active {
    /* Эффект нажатия */
    border-style: inset;
    padding: 4px 11px 2px 9px; /* Визуальный сдвиг */
}

/* Главное меню */
#menu {
    /* Имитация панели */
    /* ИСПРАВЛЕНИЕ: Убираем боковые границы, оставляем только верхнюю/нижнюю */
    border: 1px solid var(--color-background); 
    border-top: 2px solid var(--color-highlight);
    border-bottom: 2px solid var(--color-shadow);
    
    text-align: left;
    margin-bottom: 10px;
    
    /* ИСПРАВЛЕНИЕ: Уменьшаем вертикальный padding для центрирования кнопок */
    padding: 4px 0; 
    
    background-color: var(--color-background);
}

#menu ul {
    margin: 0;
    /* ИСПРАВЛЕНИЕ: Добавляем небольшой отступ слева, чтобы кнопки не прилипали к краю */
    padding: 0 0 0 5px; 
    list-style: none;
    display: block;
    overflow: hidden; 
}

#menu ul li {
    float: left;
    /* Расстояние между кнопками */
    margin-right: 2px;
    padding: 0; 
}

#menu ul li a {
    /* Стилизация пунктов меню как объемных кнопок */
    border: 2px outset var(--color-highlight);
    border-color: var(--color-highlight) var(--color-dark-shadow) var(--color-dark-shadow) var(--color-highlight);
    background-color: var(--color-background);
    color: var(--color-text);
    
    /* ИСПРАВЛЕНИЕ: Увеличиваем вертикальный padding и удаляем отрицательный margin-top */
    padding: 4px 10px; 
    
    text-decoration: none;
    font-size: 11px;
    display: inline-block;
    /* margin-top: -10px; - УДАЛЕНО */
}

#menu ul li a:hover {
    color: var(--color-text);
    background-color: var(--color-highlight); /* Простой эффект наведения */
    text-decoration: none;
}

#menu ul li a:active {
    /* Корректируем смещение при нажатии под новый padding: 4px 10px; */
    border-style: inset;
    padding: 5px 11px 3px 9px; 
}

/* Блоки контента (Roundbox) */
.roundbox {
    width: 90%;
    /* Имитация элемента "групповой рамки" */
    background-color: var(--color-background);
    border: 1px solid var(--color-shadow);
    padding: 15px 20px 10px 20px;
    margin-bottom: 20px;
    /* Убираем скругления */
    border-radius: 0;
    box-shadow: none; 
}

.roundbox h3 {
    margin-bottom: 10px;
    /* Убираем жирную черту, используем только текст */
    border-bottom: none;
    font-size: 14px;
    font-style: italic;
    font-weight: normal;
}

/* Таблицы */
.roundbox table.yellowkeys {
    width: 100%;
    border-collapse: collapse;
}

.roundbox table.yellowkeys tr td {
    padding: 3px 5px 3px 0;
    word-wrap: break-word;
    word-break: break-all;
}

.roundbox table.yellowkeys tr td:first-child {
    font-weight: bold;
    color: var(--color-dark-shadow);
    padding-right: 15px;
    width: 30%;
}

.roundbox table.yellowkeys tr td:last-child {
    color: var(--color-text);
}

.right {
    float: right;
}

.mounthead {
    overflow: hidden; /* Clearfix */
    margin-bottom: 5px;
}

.mounthead h3 {
    float: left;
    margin-bottom: 0px;
    border-bottom: none;
    padding-top: 5px;
}

.mountcont {
    /* Разделитель в стиле Win 2000 */
    border-top: 1px solid var(--color-shadow);
    padding-top: 10px;
    clear: both;
}

ul.mountlist {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;
}

.mountlist li {
    display: inline;
    margin-left: 5px;
}

/* Переопределяем ссылки "Play" и "Auth" как объемные кнопки */
a.play, a.auth {
    /* Стили взяты из input[type="submit"] */
    border: 2px outset var(--color-highlight);
    border-color: var(--color-highlight) var(--color-dark-shadow) var(--color-dark-shadow) var(--color-highlight);
    background-color: var(--color-background);
    color: var(--color-text);
    padding: 3px 10px 3px 25px; 
    text-decoration: none;
    font-weight: normal;
    line-height: normal;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 16px 16px;
    cursor: pointer;
}

a.play:active, a.auth:active {
    border-style: inset;
    padding: 4px 11px 2px 26px; /* Визуальный сдвиг */
}

a.play {
    /* Если используются иконки tunein.png */
    background-image: url(/tunein.png);
}

a.auth {
    /* Если используются иконки key.png */
    background-image: url(/key.png);
}

/* Админ-навигация */
ul.nav {
    margin: 0;
    padding: 5px 0 10px 0;
    clear: both;
    list-style: none;
    text-align: center;
}

ul.nav li {
    display: inline;
}

ul.nav li a {
    /* Объемные кнопки для навигации */
    border: 2px outset var(--color-highlight);
    border-color: var(--color-highlight) var(--color-dark-shadow) var(--color-dark-shadow) var(--color-highlight);
    display: inline-block;
    padding: 2px 7px;
    margin: 0 2px;
    background-color: var(--color-background);
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
}

ul.nav li a:hover {
    background-color: var(--color-highlight);
}

ul.nav li a:active {
    border-style: inset;
}

/* Футер */
#footer {
    /* Простая разделительная линия */
    border-top: 1px solid var(--color-shadow);
    margin-top: 20px;
    padding-top: 10px;
    font-size: 90%;
    text-align: center;
}

/* Медиа-запросы (Адаптивность, с сохранением стиля) */
@media (max-width: 800px) {

    body {
        padding: 10px;
    }

    .roundbox {
        width: auto;
    }

    .roundbox table.yellowkeys tr td:first-child {
        width: 40%;
    }

    .roundbox table.yellowkeys tr td {
        display: block;
        padding: 3px 5px 0 0;
    }

    .roundbox table.yellowkeys tr td:last-child {
        margin-bottom: 5px;
        margin-left: 5px;
    }

    .scrolltable {
        overflow: auto;
    }
}

@media (max-width: 320px) {

    ul.nav, #menu ul {
        display: block;
    }

    ul.nav li, #menu ul li {
        float: none;
    }

    ul.nav li a, #menu ul li a {
        display: block;
    }

    ul.nav li + li, #menu ul li + li {
        margin-top: 2px;
    }
}