/* Individual-CSS für das Projekt "51_jugendamt" */



/* SCHRIFTFORMATIERUNG (inkl. Icons) ALLER BEREICHE (Schriftart, -groesse, -dekoration, -gewicht und -farbe, Ausrichtung, line-height, letter-spacing, etc.; KEINE Abstände) und Hintergrundfarben */


  a
  {
    color: #005b79;        /* Farbe der Links - wird im Navigationsbereich erschrieben. */
    text-decoration:  underline;
  }


  #brot a::before
  {
    color:        #005b79;
  }

  /* Icons für Links IM TEXT (KEINE Linklisten) */
  a.intern::before,
  a.extern::before,
  a.pdf::before,
  a.mail::before,
  a.top::before,
  p.csc-linkToTop a::before,
  a.pagetotop_link::before, /* Workaround (Altlast aufgrund der alten HTML-Struktur innerer Elemente) für u.a. Presseamt */
  a.back::before,
  .dekobild /* > p:after*/ .enlarge::before    /* Für Bilder im Text mit Bildunterschrift, geändert am 3.2. E.E. */
  {
    color: #005b79;
  }


  p.csc-linkToTop /* "Nach oben"-(Anker-)Links. */
        {
               text-align:    right;
        }

  /* Icons für Linklisten */
  ul li::before,                 
  ul li.intern::before,
  ul li.extern::before,
  ul li.pdf::before,
  ul li.punkt::before,
  ul li.mail::before,
  ul li.sprung::before
  {
    color: #005b79;
  }

  /* Rolli-Icons */
  .rolli-picto i
  {
    color: #005b79;
  }


  header .header-overlay  /* transparenter Hintergrund für Overlay-Logo */
  {
    background:      rgba(255, 255, 255, 0.7);
  }

  .streifen  /* Trennstreifen zwischen Kopf und Inhalt */
  {
    background-color:  #005b79;
  }

  #navi-spalte  /* Hintergrundfarbe Navi-Spalte */
  {
    background-color:  #cccccc;
  }

  #inhalts-spalte  /* Hintergrundfarbe Inhalts-Spalte */
  {
    background-color:  #ffffff;
  }

  #info-spalte  /* Hintergrundfarbe Info-Spalte */
  {
    background-color:  #cccccc;
  }

  @media screen and (min-width: 785px) and (max-width: 1024px) {
    #info-spalte
    {
      border-left: 220px solid #D9CC42; /* WICHTIG: die Farbe MUSS der Hintergrundfarbe der Navi-Spalte entsprechen */
    }
  }


  /* Navigation 1. Ebene */

  #navi-spalte nav li
  {
    background-color:  #ffcc33;
  }

  #navi-spalte nav li a
  {
    color:    #000000;
  }

  #navi-spalte nav a.aktiv,
  #navi-spalte nav li a:hover,
  #navi-spalte nav li a:focus,
  #navi-spalte nav li a:active
  {
    background-color:  #005b79;
    color: #ffffff;
  }

  /* Navigation 2. Ebene */

  #navi-spalte nav li ul li
  {
    background-color:  #eaeaea;
  }

  #navi-spalte nav li ul li a
  {
    color:    #000000;                                        
  }

  #navi-spalte nav li ul a.aktiv,
  #navi-spalte nav li ul li a:hover,
  #navi-spalte nav li ul li a:focus,
  #navi-spalte nav li ul li a:active
  {
    background-color:  #cfcfcf;
    color: #000000;
  }

  /* Navigation 3. Ebene */

  #navi-spalte nav li ul li ul li
  {
    background-color:  #fafafa;
  }

  #navi-spalte nav li ul li ul li a
  {
    color:    #333333;
  }

  #navi-spalte nav li ul li ul a.aktiv,
  #navi-spalte nav li ul li ul li a:hover,
  #navi-spalte nav li ul li ul li a:focus,
  #navi-spalte nav li ul li ul li a:active
  {
    background-color:  #efefef;
    color: #333333;
  }

  /* Für das Aussehen des Pömpels. Achtung: Werden Größe oder vertical-align geändert, muss auch die Positionierung angepasst werden! */
  #navi-spalte nav li ul li ul a.aktiv::before,
  #navi-spalte nav li ul li ul li a:hover::before,
  #navi-spalte nav li ul li ul li a:focus::before,
  #navi-spalte nav li ul li ul li a:active::before
  {
    color:      #333333;
  }

  /* Zwischenueberschrift */

  #navi-spalte nav h2
  {
    color:    #444;
  }

  /* Navigation Sprachen 1. Ebene */

  #navi-spalte nav.sprachennavigation ul li
  {
    background-color:  #E3E8CE;
  }

  #navi-spalte nav.sprachennavigation ul li a
  {
    color:        #005b79;
  }

  #navi-spalte nav.sprachennavigation ul li a.aktiv,
  #navi-spalte nav.sprachennavigation ul li a:hover,
  #navi-spalte nav.sprachennavigation ul li a:focus,
  #navi-spalte nav.sprachennavigation ul li a:active
  {
    color:        #005b79;
    background-color:  #C6CD71;
  }


  main a:hover,
  main a:focus,
  main a:active,
  aside a:hover, /* Hovern auch in der rechten Spalte */
  aside a:focus,
  aside a:active
  {
    background-color: #e5e5e5;
  }


  main
  {
    color:    #444;  /* Schriftfarbe Inhaltsbereich */
  }

  main h1,
  main h2,
  main h3,
  main h4
  {
    color:    #005b79;
  }

  main h2.aktuell
  {
    background-color:  #ffffff;
  }

  main h2.marker,
  main h3.marker,
  main h4.marker
  {
    background-color: #e1e1e1;  /* entspricht standardmäßig der Hintergrundfarbe der Navigation */
  }

  main .zitat h3
  {
    color:    #690f14;
  }


  main th /* Spaltenueberschriften von Tabellen im Inhaltsbereich */
  {
    color:    #333333;
    background-color:  #d9d9d9;
  }

  main th.zwischentitel
  {
    color: #333333;
    background-color: #e9e9e9;
  }

   main td
  {
    background-color:  #fafafa;
  }

  main .dekobild /* Workaround aufgrund alter HTML-Struktur der inneren Elemente. Im Dummy: .bild */
  {
    background-color:  #f0f0f0;
  }

  /* Zitate */
  main .zitat
  {
    background-color:  #ebebeb;
  }

  main .zitat h3
  {
    color:    #00639d;
  }

  /* ABC-Listen (inkl. Navigation) */
  main #abc
  {
    text-align:  center;  /* zentriert die Liste, wenn diese ein inline-block Element ist */
  }

  main #abc ul li
  {
    background-color:  #005b79;
  }

  main #abc ul li a
  {
    color:    #fff;
  }

  main #abc ul li a.aktiv,
  main #abc ul li a:hover,
  main #abc ul li a:focus,
  main #abc ul li a:active
  {
    background-color:  #AAB315;/*#a2a800;*/
  }

  /* CSS FÜR FORMULARE (alleinstehende und integrierte) */
  /* ENDE CSS FÜR FORMULARE (alleinstehende und integrierte) */


  aside h3
  {
    color:        #ffffff;
    background-color:  #005b79;
  }

  aside > div > div  /* Kasten-Element */
  {
    background-color:  #fff;  /* Hintergrundfarbe */
  }

  /* Formular-Style Info-Spalte (inkl. Buttons) */

  aside form input,
  aside form select,
  aside form textarea
  {
    background-color:  #ffffff;
  }

  aside form input:focus,
  aside form select:focus,
  aside form textarea:focus
  {
    background-color:  #fff8d1;
    border:        1px solid #005b79;
  }

  aside form .buttons input.submit
  {
    color:        #ffffff;
    background-color:  #ded68b;
  }

  aside form .buttons input.reset
  {
    color:        #323232;
  }


/* ENDE SCHRIFTFORMATIERUNG (inkl. Icons) ALLER BEREICHE (Schriftart, -groesse, -dekoration, -gewicht und -farbe, Ausrichtung, line-height, letter-spacing, etc.; KEINE Abstände) und Hintergrundfarben */





/* SEITENGERÜST (also auch Header) und ALLGEMEINES */

  header .header-overlay
  {
    display:  none; 
  }


/* ENDE SEITENGERÜST (also auch Header) und ALLGEMEINES */





/* HAUPTNAVIGATION */
/* ENDE HAUPTNAVIGATION */





/* INHALTS- und INFOBEREICH allgemein (individ. Format. für die einz. Bereiche weiter unten festlegen) */
/* ENDE INHALTS- und INFOBEREICH allgemein (individ. Format. für die einz. Bereiche weiter unten festlegen) */




/* INHALTSBEREICH */

/* kein clearing */
#c14775 {
overflow: visible;
}
/* ENDE kein clearing */



/* ENDE INHALTSBEREICH */





/* INFOBEREICH ("rechte Spalte") */
/* Bildlinks */
 aside #c18776 div
  {
    background-color:  #ffffff;
padding-bottom: 2px; 
  }
 aside #c23184 img 
{
padding-top: 4px;
}

 aside #c23184 div a:hover
  {
    background-color:  #ffffff; 
  }


/* ENDE Bildlinks */

  /* Kasten Social Media (Info-Spalte) */
  /* Für jede Typo3-Sprache muss die Container-ID #cXXXXX angegeben werden. Beispiel MM (deutsch): aside #c70827 div.ce-textpic */
  aside #cXXXXX div.ce-textpic,          /* social media Element deutsch */
  aside #cYYYYY div.ce-textpic,          /* ggf. social media Element englisch */
  /*...*/                      /* ggf. weitere Sprachen */
  aside #cZZZZZ div.ce-textpic
  {
    padding: 0.1em 0.4em 0.5em 0.6em;
  }

  /* ENDE Kasten Social Media (Info-Spalte) */


/* ENDE INFOBEREICH ("rechte Spalte") */