﻿/* style-jwhistory-blau.css, Abgleich mit GRÜN 2.3 (3.04., 12.04., 16.06., 19.06., 31.07.23, 25.03.24); text-shadow; navi display: width von 130px auf 160px; #bereich1 (box text); navi_rahmen (von 90 auf 140px); footer_visited; <p, li> von justify auf left; .tab; Logo Banner: orange; h1, h2, h3 farbe - H2 von 24px auf 30px (wie Grün), h3 von 20px auf 22px (wie grün). <p> von 16px/150% auf 20px/160% und p1, p2, p3 (wie GRÜN). li von 16px/150% auf 20px/160% geändert. Logo Banner color:orange statt #F49D1C (da helleres Orange); P geändert; style <f> neu (fussnoten); div align; p, p1,p2,p3,f,ft, wie style-jwhistory; figure: Änderungen vorgenommen, 31.07.23; footer geändert; ft2 von Grün hinzugefügt;
*/

* { 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 grün; */

h1 { font: bold 36px 'Trebuchet MS', Tahoma, Verdana; color: #F49D1C; margin: 5px 0 15px 0; }
h2 { font: bold 30px 'Trebuchet MS', Tahoma, Verdana; color: #0924ba; margin: 25px 0 3px 0; }
h3 { font: bold 22px 'Trebuchet MS', Tahoma, Verdana; color: #336600; margin: 25px 0 3px 0; }

.tab { margin-left: 40px; }

/* p2, p3 text-align auf left geändert; f neu */

p   { font: 20px/120% Tahoma, 'Trebuchet MS', Verdana; color: #1a1a1a; text-align: left; margin: 12px 0 12px 0; text-indent: 0px; }
p1 { font: 20px/160% Tahoma, 'Trebuchet MS', Verdana; color: #1a1a1a; text-align: left; margin: 12px 0 12px 0; }
p2 { font: 20px/140% Tahoma, 'Trebuchet MS', Verdana; color: #F49D1C; text-align: left; margin: 0 0 0 60px; }
p3 { font: 20px/120% Tahoma, 'Trebuchet MS', Verdana; color: #0924ba; text-align: left; margin: 0 0 40px 0; }

f { font: 18px/120% Tahoma, 'Trebuchet MS', Verdana; color: #333; text-align: left; margin: 12px 0 12px 0; text-indent: 0px; }

ft { font: 18px/120% Tahoma, 'Trebuchet MS', Verdana; color: #333; text-align: left; margin: 0px 0px 10px 0px; }

ft2 { font: bold 10px/100% Tahoma, 'Trebuchet MS', Verdana; color: #336600; font-style: italic; text-align: center; }

ul { margin: 0 15px 10px 15px; }
li { font: 20px/160% 'Trebuchet MS', Tahoma, Verdana; color: #333; text-align: left; }

/* div align */

div.a {
  text-align: center;
}

div.b {
  text-align: left;
}

div.c {
  text-align: right;
} 

div.d {
  text-align: justify;
} 

/* allgemeine Textlinks 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: none; }
#inhalt a:hover, #footer a:hover { background: #330066; color: #E7E7E4; text-decoration: none; }

/* Logo Banner jwhistory-BLAU orange statt #F49D1C */
#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 #000; 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: 10px 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: #330033; }
.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 #240245; }
.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; }

/* box text  */
#bereich1 {
    background-color: lightgrey;
    width: 100%;
    height: 25%;
    padding: 10px;
    margin: 0px;
    border: 3px blue solid;
}

/* bereiche (boxen) */

#bereich2 {
    background-color: lightgrey; 
    width: 60%;
    height: 25%;
    padding: 20px;
    margin: 0px;
    border: 3px blue solid;
}

/* -------------------- 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; }

/* Änderungen vorgenommen, 31.07.23 */
figure {
  position: relative; 
  margin: 0 0 0 10px;
  padding: 0px; 
/* <!-- oder: padding: 10px | vorher .5em --> */
  width: 100%;
  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---------------- */
