/*************************
  Coppermine 1.6.x - theme "paradelta"
  Gallery part of the theme: the classic look of the old 1.4.19 theme
  (blue-grey tables, #0E72A4 frames) plus every class that 1.6.x added.
  Site header / menu bar / footer live in paradelta.css.
**************************/

/* Palette - change here */
:root {
    --pd-link:        #1f54a0;
    --pd-link-hover:  #447b13;
    --pd-heading:     #356888;
    --pd-frame:       #0E72A4;
    --pd-th1:         #a0b4b5;
    --pd-th2:         #a8c3d6;
    --pd-row:         #FFFFFF;
    --pd-row-alt:     #f1f7fc;
    --pd-foot:        #D1D7DC;
    --pd-btn-border:  #005D8C;
}

/* ---------- Base ---------- */
body {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    background: #FFFFFF;
    color: #000000;
    margin: 0px;
}

table { font-size: 13px; }
img   { border: 0; }

h1 {
    font-weight: bold;
    font-size: 16px;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    text-decoration: none;
    line-height: 120%;
    color: #447b13;
    margin: 2px;
}

h2 {
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: var(--pd-heading);
    margin: 0px;
}

h3 {
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: var(--pd-heading);
    margin: 2px;
}

p {
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 100%;
    margin: 2px 0px;
}

hr {
    color: #73acd9;
    background-color: #73acd9;
    border: 0;
    height: 1px;
}

ul { margin-left: 5px; padding: 0px; }
ol { margin-left: 5px; padding-left: 20px; }

li {
    margin-left: 10px;
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 0px;
    list-style-position: outside;
    list-style-type: square;
}

pre.filepath { margin: 0px; padding: 0px; }

/* ---------- Links ---------- */
a { color: var(--pd-link); text-decoration: none; }
a:hover { color: var(--pd-link-hover); text-decoration: underline; }

.bblink a { color: var(--pd-link); text-decoration: none; }
.bblink a:hover { color: var(--pd-link-hover); text-decoration: underline; }

.external {
    background: transparent url('../../images/link.gif') 100% 50% no-repeat;
    padding-right: 10px;
}

/* ---------- Form elements ---------- */
.textinput {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    border: 1px solid #D1D7DC;
    padding-right: 3px;
    padding-left: 3px;
}

.listbox {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    border: 1px solid #D1D7DC;
    vertical-align: middle;
}

.button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    border: 1px solid var(--pd-btn-border);
    background-color: #EFEFEF;
    background-image: url(images/button_bg.gif);
    background-position: bottom;
    background-repeat: repeat-x;
    cursor: pointer;
}

.comment_button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 85%;
    border: 1px solid var(--pd-btn-border);
    background-color: #EFEFEF;
    background-image: url(images/button_bg.gif);
    background-position: bottom;
    background-repeat: repeat-x;
    padding-left: 3px;
    padding-right: 3px;
    cursor: pointer;
}

.radio, .checkbox {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    vertical-align: middle;
}

input[disabled] { border: 1px solid #ccc; }

/* ---------- Main tables ---------- */
.maintable {
    border: 1px solid var(--pd-frame);
    background-color: #FFFFFF;
    margin-top: 1px;
    margin-bottom: 1px;
    vertical-align: top;
}

.tableh1 {
    background: var(--pd-th1);
    color: #000000;
    padding: 3px 10px;
}

.tableh2 {
    background: var(--pd-th2);
    color: #000000;
    padding: 3px 10px;
}

.tableb {
    background: var(--pd-row);
    padding: 3px 10px;
}

/* Used together with .tableb for zebra rows (new in 1.6) */
.tableb_alternate { background: var(--pd-row-alt); }

.tablef {
    background: var(--pd-foot);
    padding: 10px;
}

.catrow_noalb {
    background: var(--pd-foot);
    color: #000000;
    padding: 3px 10px;
}

.catrow {
    background: var(--pd-row);
    padding: 3px 10px;
}

/* ---------- Albums, thumbnails ---------- */
.album_stat { font-size: 85%; margin: 5px 0px; }

.thumb_filename { font-size: 80%; display: block; }

.thumb_title {
    font-weight: bold;
    font-size: 80%;
    padding: 2px;
    display: block;
}

.thumb_caption { font-size: 80%; padding: 1px; display: block; }
.thumb_caption a { text-decoration: underline; color: #000000; }

.thumb_num_comments {
    font-weight: normal;
    font-size: 80%;
    padding: 2px;
    font-style: italic;
    display: block;
}

.user_thumb_infobox { margin-top: 1px; margin-bottom: 1px; }
.user_thumb_infobox th {
    font-weight: bold;
    font-size: 100%;
    margin-top: 1px;
    margin-bottom: 1px;
    text-align: center;
}
.user_thumb_infobox td {
    font-size: 80%;
    margin-top: 1px;
    margin-bottom: 1px;
    text-align: center;
}
.user_thumb_infobox a { text-decoration: none; color: #000000; }
.user_thumb_infobox a:hover { color: #000000; text-decoration: underline; }

.thumbnails { background: #FFFFFF; padding: 5px; }

.sortorder_cell {
/*    background: var(--pd-th1);*/
    color: #FFFFFF;
    padding: 0px;
    margin: 0px;
}

.sortorder_options {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
/*    background: var(--pd-frame);*/
    color: #FFFFFF;
    padding: 0px;
    margin: 0px;
    font-weight: normal;
    font-size: 80%;
    white-space: nowrap;
}

/* ---------- Navigation bar (page numbers / tabs) ---------- */
.navmenu {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
/*    color: #FFFFFF;*/
    font-size: 100%;
    font-weight: bold;
    background: var(--pd-th1);
    border-style: none;
}
.navmenu img {
    margin: 1px 5px;
}
.navmenu a {
    display: block;
    padding: 2px 5px;
    text-decoration: none;
/*    color: #FFFFFF;*/
}
.navmenu a:hover {
    background: #EFEFEF;
    text-decoration: none;
    color: #000000;
}

/* ---------- Admin menu ----------
   1.6.x prints:  div.admin_menu_wrapper > div.admin_menu.admin_float > a
   (users with own albums get a table of td.admin_menu).
   Pending-approval button has id="admin_menu_anim".                      */
.admin_menu_wrapper {
    margin: 5px 0px 10px 0px;
    overflow: hidden;           /* contain the floated buttons */
}

.admin_menu {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 85%;
    border: 1px solid var(--pd-btn-border);
    background-color: #EFEFEF;
    background-image: url(images/button_bg.gif);
    background-position: bottom;
    background-repeat: repeat-x;
    color: #000000;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;
}

.admin_menu a {
    display: block;
    color: #000000;
    text-decoration: none;
    padding: 2px 10px;
}
.admin_menu a:hover { color: #000000; text-decoration: underline; }

.admin_float {
    float: left;
    margin: 1px;
    display: block;
    position: relative;
    white-space: nowrap;
}

td.admin_menu { padding: 0px; }

/* some core pages put the class directly on the link */
a.admin_menu {
    display: inline-block;
    color: #000000;
    text-decoration: none;
    padding: 2px 10px;
}
a.admin_menu:hover { color: #000000; text-decoration: underline; }

#admin_menu_anim,
.admin_menu_anim {
    background-image: url(images/button_bg_anim.gif);
}

/* ---------- Icons, images ---------- */
.icon { vertical-align: middle; margin-right: 1px; }

.comment_date { color: #5F5F5F; font-size: 90%; vertical-align: middle; }

.image {
    border-style: solid;
    border-width: 1px;
    border-color: #000000;
    margin: 2px;
}
a:link .image, a:focus .image, a:active .image { border-color: #000000; }
a:visited .image { border-color: #840084; }
a:hover .image   { border-color: var(--pd-link); }

a:link .middlethumb, a:visited .middlethumb, a:focus .middlethumb,
a:hover .middlethumb, a:active .middlethumb {
    border: 2px solid blue;
}

.imageborder {
    border: 1px solid #000000;
    background-color: #FFFFFF;
    margin-top: 3px;
    margin-bottom: 3px;
}

.display_media { background: #EFEFEF; padding: 3px; }

.pic_title, .pic_caption {
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 1.0em;
}
.pic_title   { font-size: 120%; }
.pic_caption { font-size: 100%; }

.img_caption_table {
    border: none;
    background-color: #FFFFFF;
    width: 100%;
    margin: 0px;
}
.img_caption_table th {
    background: #D1D7DC;
    font-size: 100%;
    color: #000000;
    padding: 4px 10px;
    border-top: 1px solid #FFFFFF;
}
.img_caption_table td {
    background: #FFFFFF;
    padding: 6px 10px;
    border-top: 1px solid #FFFFFF;
    white-space: normal;
}

/* ---------- Footer, link blocks ---------- */
.footer { font-size: 9px; }
.footer a { text-decoration: none; color: #000000; }
.footer a:hover { color: #000000; text-decoration: underline; }

.statlink { color: #FFFFFF; }
.statlink a { text-decoration: none; color: #FFFFFF; }
.statlink a:hover { color: #FFFFFF; text-decoration: underline; }

.alblink { font-weight: bold; }
.alblink a { text-decoration: underline; color: #000000; }
.alblink a:hover { color: #5d8bbf; text-decoration: none; }

.catlink { display: block; margin-bottom: 2px; font-weight: bold; }
.catlink a { text-decoration: underline; color: #000000; }
.catlink a:hover { color: #000000; text-decoration: underline; }

.topmenu { line-height: 130%; font-size: 100%; }
.topmenu a { color: var(--pd-link); text-decoration: none; }
.topmenu a:hover { color: var(--pd-link-hover); text-decoration: underline; }

/* ---------- Misc ---------- */
.debug_text {
    border: #BDBEBD;
    background-color: #EFEFEF;
    width: 100%;
    margin: 0px;
}

.clickable_option { cursor: default; }

.listbox_lang {
    color: #000000;
    background-color: #D1D7DC;
    border: 1px solid #D1D7DC;
    font-size: 80%;
    font-family: Arial, Helvetica, sans-serif;
    vertical-align: middle;
}

.important {
    color: red;
    font-weight: bold;
    padding: 3px 1px;
}

#cpgChooseLanguageWrapper, #cpgChooseThemeWrapper { float: left; }

.detail_head_collapsed, .detail_head_expanded { color: var(--pd-link); }

#GB_window {
    background-color: #EFEFEF;
    border: 5px solid var(--pd-frame);
}

/* ---------- Messages (cpg_message_*) ---------- */
.cpg_message_info, .cpg_message_success, .cpg_message_warning,
.cpg_message_error, .cpg_message_validation {
    border: 1px solid;
    margin: 10px 0px 0px;
    padding: 15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    border-radius: 5px;
}
.cpg_message_info       { color: #00529B; background-color: #BDE5F8; background-image: url('../../images/message/info.png'); }
.cpg_message_success    { color: #4F8A10; background-color: #DFF2BF; background-image: url('../../images/message/ok.png'); }
.cpg_message_warning    { color: #9F6000; background-color: #FEEFB3; background-image: url('../../images/message/warning.png'); }
.cpg_message_error      { color: #D8000C; background-color: #FFBABA; background-image: url('../../images/message/stop.png'); }
.cpg_message_validation { color: #D63301; background-color: #FFCCBA; background-image: url('../../images/message/error.png'); }

.cpg_summary {
    font-size: 0.9em;
    border: 1px solid;
    margin: 10px 0px;
    padding: 5px 10px;
    color: #FF2B9C;
    background-color: #FFDEEF;
    text-align: right;
    float: right;
    width: 400px;
}

/* ---------- Upload (swfupload / progress) ---------- */
div.fieldset { border: 2px solid var(--pd-frame); margin: 10px 0; padding: 20px 10px; }
div.fieldset span.legend {
    position: relative;
    padding: 3px;
    top: -30px;
    background-color: var(--pd-frame);
    color: #fff;
}
div.flash { width: 375px; margin: 10px 5px; border-color: #D9E4FF; }

.progressWrapper { width: 357px; overflow: hidden; }
.progressContainer {
    margin: 5px;
    padding: 4px;
    border: solid 1px #E8E8E8;
    background-color: #F7F7F7;
    overflow: hidden;
}
.message {
    margin: 1em 0;
    padding: 10px 20px;
    border: solid 1px #FFDD99;
    background-color: #FFFFCC;
    overflow: hidden;
}
.red   { border: solid 1px #B50000; background-color: #FFEBEB; }
.green { border: solid 1px #DDF0DD; background-color: #EBFFEB; }
.blue  { border: solid 1px #CEE2F2; background-color: #F0F5FF; }

.progressName {
    font-size: 8pt;
    font-weight: 700;
    color: #555;
    width: 323px;
    height: 14px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}
.progressBarInProgress, .progressBarComplete, .progressBarError {
    font-size: 0;
    width: 0%;
    height: 2px;
    background-color: blue;
    margin-top: 2px;
}
.progressBarComplete { width: 100%; background-color: green; visibility: hidden; }
.progressBarError    { width: 100%; background-color: red;   visibility: hidden; }
.progressBarStatus {
    margin-top: 2px;
    width: 337px;
    font-size: 7pt;
    font-family: Arial;
    text-align: left;
    white-space: nowrap;
}
a.progressCancel {
    font-size: 0;
    display: block;
    height: 14px;
    width: 14px;
    background-image: url(../../images/cancelbutton.gif);
    background-repeat: no-repeat;
    background-position: -14px 0px;
    float: right;
}
a.progressCancel:hover { background-position: 0px 0px; }
.swfupload { vertical-align: top; }

/* ---------- Photo manager / album manager ---------- */
table#pic_sort tr td   { padding: 4px; border-bottom: 1px solid #CCCCCC; }
table#album_sort tr td { padding: 3px; border-bottom: 1px solid #CCCCCC; }
table#album_sort tr td span.editAlbum {
    margin-left: 100px;
    font-size: 10px;
    line-height: 100%;
    text-decoration: underline;
    cursor: pointer;
    display: none;
    color: #FF0000;
}

/* ---------- Film strip ---------- */
/*
.filmstrip_background { background-color: #000000; }
.prev_strip { text-align: left; }
.next_strip { text-align: right; }
*/

/* --- Стили для лаконичного переключателя изображений --- */

/* === ОБЩИЙ КОНТЕЙНЕР СЕЛЕКТОРА === */

/* Внешний отступ от фото до селектора */
#filmstrip {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    width: 100%;
}

/* Внутренний контейнер с рамками */
.filmstrip-container {
    padding: 12px 0 !important; 
    background: transparent;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    width: 100%;
    display: block;
}

/* Область прокрутки (обязательно overflow: hidden для работы JS) */
#film {
    overflow: hidden !important;
    position: relative;
    margin: 0 auto !important;
}

/* Таблица с миниатюрами */
.tape {
    border-collapse: collapse;
    height: auto !important; /* Убираем жесткую высоту, если она мешает */
}

/* === СТРЕЛКИ НАВИГАЦИИ === */

/* Ячейки со стрелками */
.prev_strip, .next_strip {
    width: 40px;
    height: 40px;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    user-select: none;
    padding: 10px !important; 
}

/* Скрываем стандартные картинки стрелок, которые вставляет JS, 
   чтобы не было дублирования с нашими CSS-стрелками */
.prev_strip img, .next_strip img {
    display: none !important;
}

/* Делаем ссылку блочной, чтобы клик работал по всей площади */
.prev_strip a, .next_strip a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    outline: none;
}

/* Рисуем минималистичные стрелки через CSS */
.prev_strip a::before {
    content: "‹";
    font-size: 28px;
    color: #888;
    transition: color 0.2s;
}

.next_strip a::before {
    content: "›";
    font-size: 28px;
    color: #888;
    transition: color 0.2s;
}

/* Эффект наведения на стрелки */
.prev_strip a:hover::before, 
.next_strip a:hover::before {
    color: #000;
}

/* === МИНИАТЮРЫ === */

/* Ячейка миниатюры */
.thumb {
    padding: 0 4px !important; /* Убираем жесткие инлайн-стили, делаем аккуратный отступ */
    vertical-align: middle;
}

/* Обнуляем float и задаем рамку */
.thumb a, .thumb a.thumbLink {
    display: block;
    float: none !important; /* Перебиваем float: left из инлайн-стилей */
    border: 1px solid transparent; /* Место под рамку, чтобы ничего не прыгало */
    transition: border-color 0.2s;
    line-height: 0;
}

/* Сама картинка миниатюры */
.thumb img {
    display: block;
    max-width: 100%;
    height: auto;
    border: none;
}