/* style-jwhistory-blau.css, 3.7 (alle Schriften wie blau-orange) base s-w */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }

body { margin: 0; padding: 0; background: #E7E7E4; }

/* Text-Schatten für Logo-Banner */
.text-shadow {text-shadow: #c0c0c0 3px 3px 5px;}

/* Überschriften, Absätze, Auflistung jwhistory-BLAU - h1 orange, h2 blau, h3 von grün auf blau; */

h1 { font: bold 36px 'Trebuchet MS', Tahoma, Verdana; color: #F49D1C; text-align: left; margin: 5px 0 15px 0; }
h2 { font: bold 30px 'Trebuchet MS', Tahoma, Verdana; color: #330066; text-align: left; margin: 25px 0 3px 0; }
h3 { font: bold 22px 'Trebuchet MS', Tahoma, Verdana; color: #0924ba; text-align: left; margin: 25px 0 3px 0; }

/*  vgl. #abs margin-left 20px  */
.tab { margin-left: 40px; }

/* mark = hellblau statt gelb */
mark { background-color: lightblue;
  color: blue; }

/* ANFANG Schriften jwhistory-blau */

/* p (einzeilig), 1a1a1a, nicht eingerückt */
p { font: 20px/120% Tahoma, 'Trebuchet MS', Verdana; color: #1a1a1a; text-align: left; margin: 12px 0 12px 0; text-indent: 0px; }

/* BLAU p.p1 (mehrzeilig), p1 (mehrzeilig) */
p.p1 { font: 20px/160% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; text-align: left; margin: 12px 0 12px 0; }
p1 { font: 20px/160% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; text-align: left; margin: 12px 0 12px 0; text-indent: 0px; }

/* ORANGE p.p2 wie p (einzeilig), p2 wie p1(mehrzeilig) */
p.p2 { font: 20px/120% Tahoma, 'Trebuchet MS', Verdana; color: #F49D1C; text-align: left; margin: 12px 0 12px 0; }
p2 { font: 20px/140% Tahoma, 'Trebuchet MS', Verdana; color: #F49D1C; text-align: center; margin: 12px 0 12px 0; }

/* GRÜN p.p3 wie p (einzeilig), p3 wie p1(mehrzeilig, BLAU) */
p.p3 { font: 20px/120% Tahoma, 'Trebuchet MS', Verdana; color: #0336600; text-align: left; margin: 12px 0 12px 0; }

p3 { font: 20px/120% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; text-align: left; margin: 12px 0 12px 0; }

/* BLAU p.f (Fußnote, kleiner Zeilenabstand) f = Platzhalter */
p.f { font: 18px/120% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; text-align: left; margin: 12px 0 12px 0; text-indent: 0px; }
f { font: 18px/120% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; text-align: left; margin: 12px 0 12px 0; text-indent: 0px; }

/* p.ft (#1a1a1a), Größe wie f (BLAU), ft = Platzhalter */
p.ft { font: 18px/120% Tahoma, 'Trebuchet MS', Verdana; color: #1a1a1a; text-align: left; margin: 12px 0 12px 0; text-indent: 0px; }
/* ft wie blau-orange */
ft { font: 18px/120% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; text-align: left; margin: 12px 0 12px 0; text-indent: 0px; }

/* jwhistory-blau 
ft { font: 18px/120% Tahoma, 'Trebuchet MS', Verdana; color: #1a1a1a; text-align: left; margin: 12px 0 12px 0;  }
*/

/* BLAU Minischrift einzeilig, mittig, unmerklich "bold" */
ft2 { font: 10px/110% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; font-style: bold; text-align: center; }

/* Quote, Zitat, kursiv, block,  p.q (1a1a1a), Größe wie p + p.p1 (mehrzeilig); q (blau) wie p1 (einzeilig), Einzug 20px */
p.q {font: 20px/120% Tahoma, 'Trebuchet MS', Verdana; color: #1a1a1a; font-style: italic; text-align: justify; margin: 12px 0 12px 0;  text-indent: 20px;}
q {font: 20px/160% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; font-style: italic; text-align: justify; margin: 12px 0 12px 0;  text-indent: 20px; }

/* ENDE Schriften jwhistory-blau */


figcaption {
  padding: 10px;
/*  oder padding: 10px | vorher .8em;  */
  font: 16px/120% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; text-align: justify;  font-style: italic;
  margin: 0 12px 0 0; }

/* blockquote p.q wie p (a - einzeilig, 1a1a1a) und q (b - mehrzeilig, BLAU)*/

blockquote.a {font: 20px/120% Tahoma, 'Trebuchet MS', Verdana; color: #1a1a1a; font-style: italic; text-align: left; margin: 12px 0 12px 0;  text-indent: 20px;}
blockquote.b {font: 20px/160% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; font-style: italic; text-align: left; margin: 12px 0 12px 0;  text-indent: 0px;}

/* Liste wie p (einzeilig)  */
ul { margin: 0 15px 10px 15px; }
li { font: 20px/120% 'Trebuchet MS', Tahoma, Verdana; color: #0924ba; text-align: left; }

/* Listen: Kreise und Quadrate für <ul> */
.one {
  list-style: circle;
}
.two {
  list-style: square inside;
}

/* div align */

div.a {
  text-align: center;
}

div.b {
  text-align: left;
}

div.c {
  text-align: right;
} 

div.d {
  text-align: justify;
} 

/* allgemeine Textlinks (alle) jwhistory-BLAU */
<!-- "font-weight: bold;" gelöscht --->

#inhalt a:link, #inhalt a:active, #inhalt a:visited, #footer a:link, #footer a:active, #footer 

a:visited { color: #333; text-decoration: underline; }
#inhalt a:hover, #footer a:visited { background: #330066; color: #E7E7E4; text-decoration: none; }

/* Logo Banner, ORANGE statt #F49D1C (orange), width unberührt (vgl. style-blau-orange.css) */
#logo { width: 928px; font: bold 36px 'Trebuchet MS', Tahoma, Verdana; color: orange; font-style: italic; letter-spacing: 1px; word-spacing: 2px; margin: 10px auto; }

#logo_in { line-height: 90px; background-image: url('_images/hintergrund.gif'); border: 0px solid #fff; text-align: center; }

/* horizontales Navigationsmenü jwhistory-BLAU #0924ba (blau) statt #336600 (grün) */

#navi_rahmen { width: 100%; border-top: 10px solid #fff; border-bottom: 10px solid #fff; background: #0924ba; }
#navi_oben a:link, #navi_oben a:active, #navi_oben a:visited { display: block; width: 140px; font: bold 16px/30px 'Trebuchet MS', Tahoma, Verdana; text-decoration: none; color: #fff; background: 
#0924ba; text-align: center; border-left: 1px solid #fff; }

#navi_oben a:hover { text-decoration: none; color: #fff; background: #330066; }

/* Inhalt-Content */
#inhalt { padding: 10px 20px 20px 20px; border-right: 0px solid #fff; }

#abs { margin-left: 20px; }

/* vertikales Navigationsmenü jwhistory-BLAU */
#navi_li_rahmen { padding: 0px 10px; background-image: url('_images/hintergrund.gif') } 

/* Überschrift Submenü */
.navi_ue { display: block; width: 200px; color: #fff; margin: 0px 0px 5px 0px; padding: 5px; font: bold 18px 'Trebuchet MS', Tahoma, Verdana; background: #000; border-bottom: 1px solid #fff; }

.navi_li { background: #330033; }
.navi_li_2 { background: purple; }
.navi_li_3 { background: #330033; }

.navi_li a:link, .navi_li a:active, .navi_li a:visited, .navi_li_2 a:link, .navi_li_2 a:active, .navi_li_2 a:visited, .navi_li_3 a:link, .navi_li_3 a:active, .navi_li_3 a:visited
      { display: block; width: 160px; font: bold 16px/22px 'Trebuchet MS', Tahoma, Verdana; text-decoration: none; color: #fff; margin: 5px 0px 5px 8px; padding-left: 10px; }
.navi_li a:link, .navi_li a:active, .navi_li a:visited { border: 1px solid #330066; }
.navi_li_2 a:link, .navi_li_2 a:active, .navi_li_2 a:visited { border: 1px solid purple; }
.navi_li_3 a:link, .navi_li_3 a:active, .navi_li_3 a:visited { border: 1px solid #330033; }
.navi_li a:hover, .navi_li_2 a:hover, .navi_li_3 a:hover { background: #000; border: 1px solid #fff; }

/* Fußzeile lilablau 330066, bisher font: 12px/40px letter-spacing: 3px; word-spacing: 7px; */
#footer { font: 12px/20px 'Trebuchet MS', Tahoma, Arial; color: #fff; font-style: italic; text-align: center; 
letter-spacing: 2px; word-spacing: 4px; border-top: 10px solid #fff; border-bottom: 10px solid #fff; background: #330066; }

/* boxen "bereich" text [umstellen auf box1-4] */
#bereich1 {
    background-color: lightgrey;
    width: 90%;
    height: 25%;
    padding: 10px;
    margin: 0px;
    border: 3px blue solid;
}
#bereich2 {
    background-color: lightgrey; 
    width: 85%;
    height: 25%;
    padding: 10px;
    margin: 0px;
    border: 3px blue solid;
}

/* box1 (100%, bg lightgrey, border blue) */
#box1 {
    background-color: lightgrey;
    width: 100%;
    height: 25%;
    padding: 20px;
    margin: 20px;
    border: 3px blue solid;
}

/* box2 (100%, bg lightgrey, border green) */
#box2 {
    background-color: lightgrey;
    width: 100%;
    height: 25%;
    padding: 20px;
    margin: 20px;
    border: 3px green solid;
}


/* box3 (75%, bg lightgrey, border green) */
#box3 {
    background-color: lightgrey;
    width: 50%;
    height: 25%;
    padding: 20px;
    margin: 0px;
    text-align: center;
    border: 3px blue solid;
}

/* added Pop-up 45 + summary */

details > summary {
	transition: color 1s; color: black;
  padding: 4px;
  width: 250px;
  background-color: #eeeeee;
  border: 2px;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}

 details[open] > summary { color: red; }

details > p {
  background-color: #eeeeee;
  padding: 10px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}

/* NOT added <button> (lilawinkel.de = simple button) */

/* -------------------- added photos --------------- */

/* Foto-class "Infogif" width 27, height 11 */
.infogif { border-style: solid; border-width: 0px; vertical-align: middle; width: 27px; height: 11px }

/* Bildbeschreibung unter Foto; captionbox-class = Fotoformat */
.captionbox  {
  width: 100%;
  height: auto; }

/* Änderung 31.07.23 */
figure {
  position: relative; 
  margin: 0 0 0 10px;
  padding: 0px; 
/* <!-- oder: padding: 10px | vorher .5em --> */
  width: 100%;
<!--  border: 0px; -->
  border: 0px; 
/* <!-- oder: 1px solid gainsboro | vorher:  thin solid gainsboro; --> */
  background: none;
/* vorher background: white; */
}

@media (min-width: 25em) {
  figure {
    width: 20em;
    float: right;
  }

/* auf #1a1a1a; geändert */
figcaption {
  padding: 10px;
/*  oder padding: 10px | vorher .8em;  */
  font: 16px/120% Tahoma, 'Trebuchet MS', Verdana; color: #1a1a1a; text-align: justify;  font-style: italic;
  margin: 0 12px 0 0; }

/* bereich1 (box) */
#bereich1 {
    background-color: lightgrey; 
    width: 90%;
    height: 25%;
    padding: 20px;
    margin: 0px;
    border: 3px blue solid;
}

/* ----- img mit Rand----------- */

/* Fotos mit Rand Breite 200px */
.auto-style1 { border-style: solid; border-width: 1px; margin: 5px 10px; width: 200px; }

/* Fotos mit Rand Breite 150px */
.auto-style2 { border-style: solid; border-width: 1px; margin: 5px 10px; width: 150px; }

/* Fotos mit Rand Breite 100px */
.auto-style3 { border-style: solid; border-width: 1px; margin: 5px 10px; width: 100px; }

/* Fotos klein mit Rand Breite 80px (LOGO) */
.auto-style4 { border-style: solid; border-width: 1px; margin: 5px 10px; width: 80px; vertical-align: middle; }

/* Fotos mit Rand Breite 500px */
.auto-style5 { border-style: solid; border-width: 1px; margin: 5px 10px; width: 500px; }

/* Fotos mit Rand Breite 250px */
.auto-style6 { border-style: solid; border-width: 1px; margin: 5px 10px; width: 250px; }

/* ----- img ohne Rand----------- */

/* Fotos ohne Rand Breite 200px */
.auto-style11 { border-style: solid; border-width: 0px; margin: 5px 10px; width: 200px; }

/* Fotos ohne Rand Breite 150px */
.auto-style22 { border-style: solid; border-width: 0px; margin: 5px 10px; width: 150px; }

/* Fotos ohne Rand Breite 100px */
.auto-style33 { border-style: solid; border-width: 0px; margin: 5px 10px; width: 100px; }

/* Fotos klein ohne Rand Breite 80px */
.auto-style44 { border-style: solid; border-width: 0px; margin: 5px 10px; width: 80px; vertical-align: middle; }

/* Fotos ohne Rand Breite 500px */
.auto-style55 { border-style: solid; border-width: 0px; margin: 5px 10px; width: 500px; }

/* Fotos ohne Rand Breite 250px */
.auto-style66 { border-style: solid; border-width: 0px; margin: 5px 10px; width: 250px; }

/* Fotos ohne Rand Breite 25px --- bisher margin: 5px 10px; */
.auto-style77 { border-style: solid; border-width: 0px; margin: 0 0; width: 25px; hight: 15px; }

/* ------- img end---------------- */