/* ==========================================================================
   descent2.de — prosilver-Overrides fuer phpBB 3.3
   Passt das mitgelieferte Standard-Theme an die Farben der Hauptseite an,
   ohne ein eigenes Style-Paket pflegen zu muessen.

   Einbau: siehe README.md in diesem Verzeichnis.
   ========================================================================== */

:root {
    --d2-bg:        #242424;   /* Seitengrund, wie std.css der Hauptseite */
    --d2-tile:      #303030;
    --d2-panel:     #2a2a2a;
    --d2-panel-alt: #333333;
    --d2-bar:       #000000;   /* Kopfleiste */
    --d2-head:      #000068;   /* Menuekopf-Blau */
    --d2-text:      #BCBCBC;
    --d2-text-hi:   #FFFFFF;
    --d2-post:      #C0C0C0;   /* Fliesstext in Beitraegen */
    --d2-dim:       #A0A0A0;
    --d2-link:      orange;
    --d2-link-hi:   red;
    --d2-border:    #606060;
    --d2-input:     #1e1e1e;
    --d2-font:      "Verdana", "Arial", Helvetica, sans-serif;
}

/* ---- Grundflaechen ---- */

html, body {
    background: var(--d2-tile) url('/images/background.gif') left top repeat;
    background-color: var(--d2-bg);
    color: var(--d2-text);
    font-family: var(--d2-font);
    font-size: 10pt;
}

#wrap, .wrap {
    background: transparent;
    border: 0;
    box-shadow: none;
    max-width: 1200px;
}

#page-header, #page-body, #page-footer { color: var(--d2-text); }

/* ---- Kopfbereich mit Banner ---- */

.headerbar {
    background: var(--d2-bar);
    color: var(--d2-text-hi);
    border-radius: 0;
}

/* Durchsichtig, sonst deckt dieser Kasten das Banner der Leiste ab. */
#site-description {
    background: none;
    color: var(--d2-text-hi);
    border-radius: 0;
}
#site-description h1, #site-description p { color: var(--d2-text-hi); }
/* Banner als Hintergrund der ganzen Kopfleiste — Titel und Suchfeld
   liegen darauf.

   prosilver zeigt das Logo sonst als leeres <span class="site_logo"> mit
   Hintergrundbild in fester Groesse (ab Werk 149x52), eingebettet in
   .site-description, die nur einen Teil der Breite einnimmt. Hier wird das
   span abgeschaltet und das Bild stattdessen der Leiste selbst gegeben.

   Der Schattenwurf am Text haelt ihn ueber den hellen Stellen lesbar — links
   liegt ein Planet, rechts eine Sonne. Reicht das nicht, kann man dem
   background-image einen dunklen Verlauf voranstellen:
   linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.55)), url(...) */
.headerbar {
    position: relative;
    padding: 12px 14px;
    background-image: url("./images/site_logo.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.site_logo { display: none; }

#site-description h1,
#site-description p { text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }

.navbar {
    background: var(--d2-head);
    border-radius: 0;
    border-top: 1px solid var(--d2-border);
    border-bottom: 1px solid var(--d2-border);
}
.navbar a, .navbar .rightside a, .navbar li a { color: var(--d2-text-hi); }
.navbar a:hover { color: var(--d2-link); text-decoration: underline; }

/* ---- Panels, Listen, Zeilen ---- */

.panel, .post, .forabg, .forumbg, .navbar, .cp-mini, .bg1, .bg2, .bg3 {
    background-color: var(--d2-panel);
    background-image: none;
    color: var(--d2-text);
    border-radius: 0;
}
.bg2 { background-color: var(--d2-panel-alt); }
.forabg, .forumbg { border: 1px solid var(--d2-border); }

ul.topiclist li           { color: var(--d2-text); }
ul.topiclist li.header    { background: var(--d2-head); }
ul.topiclist li.header dt,
ul.topiclist li.header dd { color: var(--d2-text-hi); font-weight: bold; }
ul.topiclist dd           { border-left-color: var(--d2-border); }
li.row                    { border-top-color: #3a3a3a; border-bottom-color: #1c1c1c; }
li.row:hover              { background-color: #383838; }

/* ---- Schrift und Links ---- */

h1, h2, h3, h4 { font-family: var(--d2-font); color: var(--d2-dim); }
h2, .forumbg .header, .forabg .header { color: var(--d2-dim); }

a, a:link, a:visited { color: var(--d2-link); text-decoration: none; }
a:hover              { color: var(--d2-link-hi); text-decoration: underline overline; }

.postbody, .content, .postprofile { color: var(--d2-text); }

/* Fliesstext in Beitraegen eine Spur dunkler als die uebrige Oberflaeche,
   damit sich weisse Ueberschriften im Beitrag davon abheben. */
.postbody .content { color: var(--d2-post); }
.postbody h3 a { color: var(--d2-link); }
.postprofile { border-left-color: var(--d2-border); color: var(--d2-text); }
.postprofile strong { color: var(--d2-text-hi); }

.author, .responsive-show, .responsive-hide { color: var(--d2-dim); }

/* ---- Zitate und Code ---- */

blockquote {
    background-color: #1f1f1f;
    border: 1px solid var(--d2-border);
    color: var(--d2-text);
}
blockquote cite { color: var(--d2-text-hi); }
.codebox {
    background-color: #141414;
    border: 1px solid var(--d2-border);
    color: #d0d0d0;
}
.codebox p { border-bottom-color: var(--d2-border); }
.codebox code { color: #b8d8b8; }

/* ---- Formulare ---- */

/* Beschriftungen breit fassen: in posting.php stehen "Post topic as:" und
   "Stick topic for:" ausserhalb eines fieldset und blieben sonst schwarz. */
label, legend, dt, dd, dt label, dd label { color: var(--d2-text); }
input, textarea, select,
.inputbox, input.inputbox, textarea.inputbox, select.inputbox {
    background-color: var(--d2-input);
    color: var(--d2-text);
    border: 1px solid var(--d2-border);
    font-family: var(--d2-font);
}
.inputbox:focus, input:focus, textarea:focus { outline: 1px solid var(--d2-link); }

.button, input.button1, input.button2,
a.button, a.button1, a.button2 {
    background: #3a3a3a;
    background-image: none;
    border: 1px solid var(--d2-border);
    color: var(--d2-text-hi);
    border-radius: 0;
}
.button:hover, input.button1:hover, input.button2:hover,
a.button:hover, a.button1:hover, a.button2:hover {
    background: var(--d2-head);
    color: var(--d2-text-hi);
    border-color: var(--d2-head);
}

/* ---- Tabellen, Trenner, Fusszeile ---- */

table.table1 thead th { background: var(--d2-head); color: var(--d2-text-hi); }
table.table1 tbody tr  { border-color: #3a3a3a; }
table.table1 tbody tr:hover { background-color: #383838; }

hr, .divider { border-color: var(--d2-border); }

#page-footer .copyright { color: var(--d2-dim); font-size: 8.5pt; }

/* Ruecklink auf die Hauptseite in der Fusszeile.
   Der Text wird per CSS eingesetzt, damit keine Template-Datei angefasst
   werden muss; die Vorlage bleibt update-fest. */
#page-footer .copyright::before {
    content: "\00ab Back to descent2.de";
    display: block;
    margin-bottom: 6px;
    font-size: 10pt;
    font-weight: bold;
}

/* ---- Vorschau und Infokaesten ---- */

/* prosilver gibt .panel hellen Grund und dunkle Schrift (#ECF1F3 / #28313F).
   Den Grund faerben unsere Regeln ueber .bg1/.bg2 dunkel, die Schriftfarbe
   blieb aber stehen — in der Beitragsvorschau stand der Text dadurch
   schwarz auf dunkelgrau. */
.panel {
    background-color: var(--d2-panel);
    color: var(--d2-text);
}
.panel h2, .panel h3 { color: var(--d2-dim); }

/* Der ueber einen Anker angesprungene Beitrag (viewtopic.php?p=2#p2)
   bekommt von prosilver color:#000000. Nicht einfaerben, sondern die
   normale Textfarbe behalten — sonst faellt genau dieser eine Beitrag
   aus der Reihe. */
.post:target .content { color: var(--d2-post); }

/* prosilver faerbt dabei auch die Beitragsueberschrift schwarz — ebenso
   beim jeweils ersten ungelesenen Beitrag. Beides zurueck auf Linkfarbe. */
.post h3 a.first-unread,
.post:target h3 a { color: var(--d2-link); }

/* ---- Meldungen ---- */

.error   { color: #ff6a6a; }
.success { color: #7fd07f; }
.reported, .sticky, .announce { background-color: #2f2f2f; }

/* ---- Suchfeld im Kopf ---- */

#search-box .inputbox { background-color: var(--d2-input); color: var(--d2-text); }

/* ---- Schmale Fenster ---- */

@media (max-width: 700px) {
    #wrap, .wrap { padding: 0 6px; }
    .headerbar { padding: 10px; }
}