/* CSS Document */
/* SELBST ENTWORFENES Stylesheet für gebcnew1, für page 3, cn.html - Benennung als stylegh3.css */

/* ====================================================   GLOBAL DEFINITION   ==================================================== */

/* alternatives Boxmodell */
html { 
  box-sizing: border-box; 
  background: #d5d5d5;	
} 

*, ::before, ::after { 
  box-sizing: inherit; 
}

body {
	max-width: 75em;
	margin:0 auto;
	padding: 0em;    /* das hier nur wg Testzwecken, später evtl auf Null setzen bzw rausnehmen */)
	background: #fff;	/* von der Netscape-Palette mit 216 Farben #fff = weiss  */
	color: black;         /* urspr.#333 = dunkles Grau, Schriftfarbe in aside-box, footer + bei Rahmenfarbe
                           auf entspr.Hintergrund bei aside box achten */
	font-family: Arial, sans-serif;   /* urspr. font-family: Arial, sans-serif;  */
    font: normal 1em Arial, sans-serif;  /*  urspr. font: normal 1em Arial,sans-serif; Wirkung s. next line
                                             Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */                
}



/* ====================================================   HEADER   ==================================================== */

header {                             /* NICHTS VERÄNDERN !!! */
	position: relative;		
	height: 270px;        /* urspr. 210px  */
	margin: 2em  0  0 3em;
	background: #777 url("../img/IMG_8636.jpg") no-repeat right;   /* graue Hintergrundfarbe im Banner */
	background-size: contain; 			 
	padding: 0 0 0.5em;
}

header a h1,
header a p {			/* Die Angaben für h1 müssen mit einem genauen Selektor überschrieben werden. */
	font-family: arial, verdana, sans-serif;
    font-style: normal;
    font-size: 1em;
    font-weight: bold;
    color: black;       /* geändert von white für Test, ändert Textfarbe im Banner */
	border-left: 0;
	padding: 0;
    display: table;		/* Überschriften und Absätze sind sonst immer 100% breit, durch display:table
                        und display: inline-block; für das Elternelement a.ribbon wird das Banner nur so breit wie nötig. */
}

.ribbon {
	display: inline-block;
    width: 33%;   /* neu hinzugefügt, um die Breite des ribbon FESTzulegen, damit kein erstrecken nach rechts  */
	position: relative;	
	margin: 1em 0 2em -1.5em;
	padding: 0.5em 1em;
	background: #4e7a92;
	box-shadow: 3px 5px 3px rgba(0,0,0,.8); /* urspr. 0px 1px 3px rgba(0,0,0,.8)  */
}
 
.ribbon::before{
	display: block;
	width: 1.5em;
	height: 0;
	position: absolute;
	bottom: -1.5em;
	left: 0em;
	content: "";
	border-bottom: 1.5em solid transparent;
	border-right: 1.5em solid rgb(0, 80, 116);
}
 
/** CONTENT **/
/* Versuch mit Flex-Box, zahlreiche Änderungen */

body  {
    display: flex;
    flex-flow: row wrap;
}

header, nav, footer  {
    flex: 1 100%;
}

article  {
    flex: 1 1 60%;      /* regelt Größenverteilung zwischen article- und aside-box, s.unten */
    padding-left: 2em;  /* regelt Seitenabstand vom Konstruktionsbild und Text nach links */
    padding-top: 5em;   /* urspr. 1em, regelt Abstand von beidem nach oben */
}


aside  {
    flex: 1 1 40%;        /* siehe oben bei article, regelt Größenverteilung zw. article + aside box */
    border: 1px solid;    /* erzeugt Rahmen/border um die aside-box und padding-left erzeugt gleichmässigen Abstand
                             nur links - evtl. noch einen leicht farbigen Hintergrund..? */
    padding-left: 1em;
    background-color: silver;
    font-size: 1em;
    line-height: 1.5em;
}


li    {
    display: column;
    list-style-type: none;   /* lässt die Aufzählungszeichen in aside-box verschwinden */
}


nav  {
    border: 1px solid;     /* regelt die Nav-Box mit Flaggen + Sprachen */
    display: flex; 
}
  
nav ul {                  /* regelt was? color neu dazugenommen? keine Veränderung */
    margin: 0.5em;        /* regelt in Nav-box den Innenabstand von Text zum Rand */
    padding: 0em;
    text-align: right;     /* urspr. left - jetzt?  keine Veränderung */
}

nav li  {                  /* regelt die Anordnung der Flagen/Sprachen in horizontal, column = vertikal  */
    position: left;        /* color probeweise dazugenommen? keine Veränderung */
    display: inline;       
}

                       /* bei h2 versucht: SimSun, Microsoft YaHei, KaiTi, monospace; => KEIN Resultat  */
h1,
h2 {                   /* = Dear Visitors...  */
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;   /* urspr. font-family: Arial, 'helvetica Neue' Helvetica, sans-serif; */        
	padding-left: 1em; 
	color: black;   /* urspr. #666, geändert auf black für page3, Resultat wie gewünscht */
	text-transform: uppercase;
}
	
h2 span {
	font-size: 0.70em; 
	color: #818181; 
	text-transform: none;
}

h3	{                  /* = under construction oder auf CN in Entwicklung  */
	font-family: Arial;
    font-size: 1em;
    font-weight: normal; 
	text-align: center;  /* das text-align: regelt die main box und footer...NICHT die aside-box, auf page3 KEIN Text dort */
	margin: 20px;  /* regelt die Abstände um die h3 herum */
	color: red;    /* urspr. #4E68AD = helles Blau für die h3 Überschriften, auf page 3 NUR "under construction" */
}		

p {
	text-align: left; 
    line-height: 1.5em; 
	padding: 20px 0px;
}

a 	{ 
	color: #4e7a92; 
	outline: none; 
	text-decoration: none; 
}


footer  {
    position: left;
    display: inline;
    height: 10px;       /* irgendwie bewirkt das den hellgrauen Hintergrund und die Schrift ziemlich mittig */
    padding: 1em;
}