/*
 * mytngstyle.css – Familie Ouart & Ney
 * Anpassung von TNG Template 2 an das Design von ouart.net
 *
 * Farbpalette:
 *   Dunkel (Header/Nav):  #2C2C2A
 *   Akzent (Amber/Gold):  #EF9F27
 *   Akzent hell:          #FAC775
 *   Hintergrund:          #FAFAF7
 *   Datenhintergrund:     #F1EFE8
 *   Datenhintergrund alt: #E8E6DC
 *   Links:                #185FA5
 *   Links besucht:        #5B87B7
 *
 * Ladereihenfolge in TNG:
 *   1. css/genstyle.css           (TNG-Basis, nicht anfassen)
 *   2. templates/template2/css/templatestyle.css  (Template-Standard)
 *   3. templates/template2/css/mytngstyle.css     (← diese Datei, höchste Priorität)
 *
 * Nur diese Datei per FTP hochladen:
 *   Stammbaum/templates/template2/css/mytngstyle.css
 */


/* ─── SEITENRAHMEN / NAVIGATION ──────────────────────────────
   Ersetzt das Olivbraun #676037 durch das Website-Dunkel #2C2C2A
   ─────────────────────────────────────────────────────────── */

.bodytopmenu {
    background-color: #2C2C2A;
}

.page,
.LB_closeAjaxWindow,
.bar,
.sideback,
.fieldnameback,
.tablesaw-cell-label {
    background-color: #2C2C2A;
}


/* ─── SEITENINHALT HINTERGRUND ───────────────────────────────
   Warmes Off-White statt reinem Weiß
   ─────────────────────────────────────────────────────────── */

body {
    background-color: #FAFAF7;
}


/* ─── DATENTABELLEN ──────────────────────────────────────────
   Warme Töne statt Blau/Gelb
   ─────────────────────────────────────────────────────────── */

div.innercontainer,
ul.tngdd .langmenu,
ul.tngdd .stubmenu,
.databack,
.reportcol li:hover,
.fambackground {
    background-color: #F1EFE8;
}

.databackalt {
    background-color: #E8E6DC;
}

.adminbody {
    background-color: #F1EFE8;
}


/* ─── LINKS ──────────────────────────────────────────────────
   Blau statt Olivbraun
   ─────────────────────────────────────────────────────────── */

a:link,
a:active,
div.icons a {
    color: #185FA5;
}

a:visited {
    color: #5B87B7;
}

.sidelink {
    color: #185FA5;
}

.sidelink:hover {
    color: #EF9F27;
}

a.smalltitle,
a.smalltitle:link {
    color: #2C2C2A;
}

a.smalltitle:hover {
    color: #EF9F27;
}


/* ─── NAVIGATIONSLEISTE (oben) ───────────────────────────────
   Hover-Farbe: Amber statt Gelb
   ─────────────────────────────────────────────────────────── */

.topmenu {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #F1EFE8;
}

a.topmenu:link   { color: #F1EFE8; text-decoration: none; }
a.topmenu:visited { color: #D3D1C7; text-decoration: none; }
a.topmenu:hover  { color: #EF9F27; text-decoration: none; }
a.topmenu:active { color: #EF9F27; text-decoration: none; }


/* ─── DROPDOWN-MENÜ ──────────────────────────────────────────
   ─────────────────────────────────────────────────────────── */

ul.tngdd ul li a,
.slidedown {
    background-color: #F1EFE8;
}

ul.tngdd ul li a:hover {
    background-color: #FAFAF7;
    color: #EF9F27;
}

ul.tngdd .menulink {
    background-color: #F1EFE8;
    border-bottom-color: #D3D1C7;
    border-right-color: #D3D1C7;
}

ul.tngdd .menulink,
ul.tngdd .langmenu {
    border-bottom-color: #D3D1C7;
    border-right-color: #D3D1C7;
}

ul.tngdd .menulink:hover,
ul.tngdd .menuhover {
    background-color: #2C2C2A;
    color: #F1EFE8;
    border-bottom: 1px solid #444;
}

ul.tngdd a {
    color: #2C2C2A;
}


/* ─── SCHNELLNAVIGATION / SNLINK ─────────────────────────────
   ─────────────────────────────────────────────────────────── */

.snlink {
    background-color: #F1EFE8;
    border-bottom: 1px solid #D3D1C7;
    border-right: 1px solid #D3D1C7;
    color: #2C2C2A;
}

a.snlink:hover,
.snlinkact,
.adminnav .snlinkact {
    background-color: #2C2C2A;
    color: #F1EFE8;
}


/* ─── SCHALTFLÄCHEN / ADMIN ──────────────────────────────────
   ─────────────────────────────────────────────────────────── */

a.admincell:hover,
a.leftlink:hover {
    background-color: #EF9F27;
    color: #2C2C2A;
}


/* ─── ÜBERSCHRIFTEN ──────────────────────────────────────────
   ─────────────────────────────────────────────────────────── */

.header,
.plainheader {
    color: #2C2C2A;
}

.maintitle,
.mmaintitle {
    color: #2C2C2A;
}

.smalltitle {
    color: #2C2C2A;
    font-style: normal;
}

.headertitle {
    color: #FAC775;
}

em.toptitle {
    color: #FAC775;
}


/* ─── LIGHTBOX / POPUP ───────────────────────────────────────
   ─────────────────────────────────────────────────────────── */

.LB_window {
    background: #F1EFE8;
    border: 2px solid #2C2C2A;
    color: #2C2C2A;
}


/* ─── FOOTER ─────────────────────────────────────────────────
   ─────────────────────────────────────────────────────────── */

.footer {
    color: #D3D1C7;
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;
}

a.footer:link    { color: #D3D1C7; text-decoration: underline; }
a.footer:visited { color: #B4B2A9; text-decoration: underline; }
a.footer:hover   { color: #EF9F27; text-decoration: underline; }


/* ─── SUCHBUTTON ─────────────────────────────────────────────
   Ersetzt den alten Image-Button (button.jpg)
   ─────────────────────────────────────────────────────────── */

.tng-search-btn {
    background: #2C2C2A;
    color: #EF9F27;
    border: none;
    width: 52px;
    height: 52px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    margin-top: 4px;
}

.tng-search-btn:hover {
    background: #444441;
}

/* Fallback: Originalfoto rechts ausblenden (CSS-Sicherheitsnetz) */
#mainphoto { display: none !important; }


/* ─── STARTSEITEN-HINTERGRUND ────────────────────────────────
   Burlap-Textur entfernen, Website-Hintergrund verwenden
   ─────────────────────────────────────────────────────────── */

.bodyindex {
    background-image: none;
    background-color: #2C2C2A;
    margin: 0;
    padding-top: 24px;
}

.indexpage {
    background-color: #FAFAF7;
}

/* Inhaltsbereich mehr Luft */
div.databack.rounded10 {
    padding: 32px 40px 40px !important;
}

/* Titel mehr Abstand nach unten */
#titlecontainer {
    padding: 16px 16px 24px 16px;
}

/* Stammbaum- und Foto-Links mehr Zeilenabstand */
a.mainlink.smalltitle {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 20px;
}

/* Link-Tabelle mehr Luft */
#linktable {
    margin-top: 8px;
    margin-bottom: 8px;
}

#linktable table {
    border-spacing: 0 8px;
}

.sidelink {
    font-size: 14px;
    line-height: 2;
}

/* Suchbereich mehr Abstand */
#searchblock {
    padding: 16px 0 16px 10px;
    margin-top: 8px;
    border-top: 0.5px solid #D3D1C7;
}

#searchtitleblock {
    padding-right: 20px;
    padding-top: 4px;
}

.smalltitle {
    font-size: 22px;
}

#searchformblock {
    padding: 4px 16px 0 0;
    line-height: 2;
}


/* ─── PEDIGREE-BOXEN ─────────────────────────────────────────
   Leichte Anpassung der Popup-Hintergründe
   ─────────────────────────────────────────────────────────── */

.pboxpopupdiv {
    background-color: #F1EFE8;
    border-top: 1px solid #D3D1C7;
    border-left: 1px solid #D3D1C7;
}