<!doctype css>
<style>

html, body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 1em;
}

body {
  font-family: Verdana, Arial, sans-serif;
  font-size: 1em;

  padding-top: 0.2em;
  padding-right: 0.5em;
  padding-bottom:  0.2em;
  padding-left: 0.5em;

  margin: 0 auto;
								max-width: 30em;
}

header {
  border-bottom-style: solid;
  border-bottom-color: lightgrey;
  border-bottom-width: 2px;
 
 padding-top: 4px;
  padding-bottom: 4px;

 display: grid;
  grid-template-columns: 2fr 1fr; 
  grid-gap: 0.5em;

 align-items: end;
}

.header_icon {
  width: auto; height: 100px;
}

.bannertext {
  line-height: 120%;
  font-size: 0.8em;
   margin-top: 0.2em;
   margin-bottom: 0.2em;
}

.logo_body {

  text-align: right;	
  font-style: italic;
  font-size: 0.8em;
  margin-top: 0.1em;
  margin-bottom: 0;
}



iconised-divison {
 display: grid;
 grid-template-columns: 1fr 3fr; 
 justify-content: center;
 grid-gap: 0.5em;
}

h1 {

   font-style: italic;
   font-size: 1.2em;
   
   padding-top: 0em;
   padding-bottom: 0em;
   
   margin-top: 0.2em;
   margin-bottom: 0;
   
}	

content_body {
 display: grid;
 grid-template-columns: 1fr 1fr; 
 justify-content: center;
 grid-gap: 1em;

 padding-left: 0.5em;
 padding-right: 0.5em;

}


nav {
/* selbstverlegt + sonstwo verlegt ist over-correct und verwirrt eher */

/*
	border-style: dotted;
	border-width: 2px;
	border-color: red;
	*/
	/* experiment with:
	edge-radius 
	shadows
	as found in FUERTE-deef
	*/
	/*
  */
  /* too fat: overdone
  border-style: ridge;
    border-width: 1em;
  border-color: lightgrey;
/* */
  /* better: */
  border-style: double;
  border-color: grey;
  border-radius: 0.5em;
  padding: 0.2em;

	margin = 0.1em;
   text-align: left;
   
/* what's that? "border" meant? then see above
   box = 0.1em;
*/
     font-size: 0.7em;
	 
	 /* instead of &raquo;&nbsp;
	 try inline-embedded icons with:
	 https://wiki.selfhtml.org/wiki/Boxmodell#Warum_man_manchmal_inline-block_ben.C3.B6tigt
	 
	 https://wiki.selfhtml.org/wiki/Rahmen_und_Ribbons#box-shadow
	 
	 https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/border
	 */
}


h2 {
  color: black;
  font-size: 1em;
  font-style: italic;
  margin-bottom: 0.5em;
}
h3 {
  font-size: 1em;
  margin-bottom: 0.5em;
}
h4 {
  font-size: 0.8em;
  padding-left: 1em;
  margin-bottom: 0.5em;
}


.bodytext {
  line-height: 120%;
  font-size: 0.8em;
   margin-top: 0.5em;
   margin-bottom: 0em;
}

smaller {
	font-size: 80%;
}

sonderangebot {
	color: red;
	text-align: right;
}

aufforderung {
   color: mediumblue;
}

happyindanger {
   color: red;
}
happysafe {
   color: blue;
}
happyhope {
   color: green;
}
happycreative {
   color: yellow;
}

footer {
  margin-top: 1em;
  margin-bottom: 1em;
  
  text-align: right;
  font-size: 0.6 em;

}


.version_body {
  text-align: left;
  font-size: 0.3em;
}


.buchtitel {
  margin: 0;
  padding: 0em;

}

buchliste {

 margin-top: 1em;
 margin-left: 0em;
 margin-right: 0em;

 display: grid;
 grid-column-gap: 1em;
 grid-row-gap: 1em;

 
 grid-template-columns: repeat(auto-fill, minmax(6em, 8.5em));

 justify-content: space-between; 

<!-- grid-auto-flow: dense;  -->

}

.inDinA5 {
  max-width: 8.5em;
}

.inDinA6 {
  max-width: 7.5em;
}

.inDinA7 {
  max-width: 6em;
}

.bookbanner {

  color: steelblue;
  font-size: 0.6em;
  font-weight: bolder;
  font-style: italic;
  text-align: right; 
  
  align-items: end;
  
  padding-top: 0em;
  padding-left: 0em;
  padding-right: 0.1em;
  padding-bottom: 0.1em;

  border: 1px solid;
}

topical {
	font-weight: bold;
	color: DarkCyan;
}

</style>
