/* 
 Theme Name:   AmpleChild
 Theme URI:    
 Description:  
 Author:       BAMA
 Author URI:   
 Template:     ample
 Version:      1.0

 /* == Add your own styles below this line ==
--------------------------------------------*/
p {
	color: black;
}

/*--- 1. Formatierung von Text ----------------------------------*/
/*---------------------------------------------------------------*/

/* Formatierung von Text in den Leseproben*/
.text_leseprobe {
	text-align: left;
	color: black;
	font-size: 14pt;
	font-style: normal; 
	font-variant: normal; 
	font-weight: 400; 
	font-family: Helvetica, Arial, Sans-Serif;
	text-transform: none; 
	text-indent: 0px; 
	letter-spacing: normal; 
	text-decoration: none; 
	word-spacing: 0px; 
	display: inline !important;
	white-space: normal; 
	cursor: text; 
	orphans: 2; 
	float: none; 
	-webkit-text-stroke-width: 0px; 
	background-color: #ffffff;
}

/* kleine besondere Texte*/
.besondereBegriffe {
	color:#B40404;
	font-weight: bold;
}

.block_mit_farbigem_hintergrund p {
	font-weight: bold;
	font-size: 16px;
	text-align: justify;
}

/*--- 2. Formatierung von Bildern ------------------------------------*/
/*--------------------------------------------------------------------*/

/* Formatierung von eigenen Bildern und solchen aus externen Quellen */
.eigene_bilder {
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
}

.pixabay_bilder {
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
}


/*Quellenangaben zu Bildern in eigenem Block*/
.bildquelle {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px dotted black;*/
}

/*Kommentartext im Bild am unteren Rand*/
.bildquelle .bildquelletext {
  visibility: hidden;
  width: 200px;
  background-color: transparent;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Positionierung*/
  position: absolute;
  bottom: -10px;
  left: 2%;
  z-index: 1;
}

.bildquelle:hover .bildquelletext {
  font-size: 10px;
  color: black;
  visibility: visible;
}

.bildquelle:hover .bildquelletext a {
  font-size: 10px;
  color: black;
  visibility: visible;
}

/*Kommentartext in den eigenen Bildern am unteren Rand*/
.bildquelle .bildquelletext1 {
  visibility: hidden;
  width: 200px;
  background-color: transparent;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Positionierung*/
  position: absolute;
  bottom: -5px;
  left: 2%;
  z-index: 1;
}

.bildquelle:hover .bildquelletext1 {
  font-size: 10px;
  color: black;
  visibility: visible;
}


/* Kommentartext neben den Bildern in grau hinterlegtem Kasten*/
.bildquelle .bildquelletext2 {
  visibility: hidden;
  width: 200px;
  background-color: #eee; /*black;*/
  color: black;     /*#fff;*/
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position der Quellenangabe rechts oben neben dem Bild */
  position: absolute;
  top: -5px;
  left: 105%;
  z-index: 1;
}

.bildquelle:hover .bildquelletext2 {
  visibility: visible;
}


/*---3. Anpassung von Listen ----------------------------------------*/
/*-------------------------------------------------------------------*/

/*---Listen für die Charaktereigenschaften der Seelentiere-----------*/
.ulcharakter {
	display: flex; 
	justify-content: center; 
	align-items: center;
}

/*---3. Anpassung von Listen ----------------------------------------*/
/*-------------------------------------------------------------------*/
/* Tabellen: Zelleninhalte zentrieren */
.tablepress tbody td {
	text-align: center;
	vertical-align: middle;
}


/*---3. Anpassung von Blöcken ----------------------------------------*/
/*-------------------------------------------------------------------*/
/*  Textbereich mit farbigem Hintergrund z.B. für "Definition" eines Seelentiers*/
.block_mit_farbigem_hintergrund {
	background-color: #99cc66;  /* #80abc8;  #F2F5A9;  #5FB404;*/
	padding:15px;
	border: 5px black;
	-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 5px;

}




/*---Styles für Startseite-Test-------------------------------------*/
/*------------------------------------------------------------------*/
.link_zentrum {
   color:black;
   text-decoration: none;
}
 	
.grossesBild {
	/*position: absolute;*/
	position: fixed;
	left: 50%;   /*50%;*/
	bottom: 25%;  /*30px;*/
	background-color: #ddff99; /*#ccccff;*/   
	/*border: 0.1em solid #3983ab;*/
	border-radius:   8px;        
	padding: 1em 1em .2em;
	width: 25em;
	max-height: 30em;
	overflow: auto;
	display: none;
}

.grossesBild img {
	width: 90%;
}

.grossesBild:target {
	display: block;
}

.fensterZu {
	width: 0;
	height: 0;
	border: 0;
	text-shadow: none;
	color: transparent;
}

.fensterZu:after {
	position: absolute;
	top: 1em;
	right: 1em;
	content: "X";
	color: white;
	background: #9c6;    /*#c32e04;*/
	font: bold 1em/150% Georgia, Times, serif;
	border: 0.1em solid #3983ab;  
	/*border-radius: 0 8px 8px;*/
	border-radius: 8px;
	display: block;
	text-align: center;
	width: 1.5em;
	height: 1.5em;
	padding: 0.2em 0 0 0em;
}


/*Styles für Startseite BAMA-Verlag Startseite_Test*/
#hauptbereich_startseitenbilder {
	/*width: 600px;*/
   /*border:5px solid blue;*/
   justify-content: center; 
   align-items: center;
}

.flex { 
    display: flex; 
    justify-content: center; 
    align-items: center;
}

.box {
   display: flex; 
   justify-content: center; 
   align-items: center;
   background-color: #9c6;
   color: #444;
   padding: 0.5em;
}

.kleinesBild_klein {
   width: 100px;
}
.kleinesBild_gross {
   width: 150px;
}
.kleineBilder {
   border: 1px solid #693;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
}

/* kleine divs/Bilder zu größerem Ensemble angeordnet: Realisierung mit einem Grid*/
/*---------------------------------------------*/
.wrapper_fuer_bilder_divs_startseite {
  position: relative;
  display: grid;
  grid-template-columns: 18% 18% 28% 18% 18% ;
  background-color: #cdb;
  align-items: center;
  justify-items: center;
}

.div_start_1 {
  grid-column: 1;
  grid-row: 1;
  text-align: center;
}
.div_start_2 {
  grid-column: 2;
  grid-row: 1;
  text-align: center;
}
.div_start_3 {
  grid-column: 3;
  grid-row: 1;
  text-align: center;
}
.div_start_4 {
  grid-column: 4;
  grid-row: 1;
  text-align: center;
}
.div_start_5 {
  grid-column: 5;
  grid-row: 1;
  text-align: center;
}
.div_start_6 {
  grid-column: 1;
  grid-row: 2;
  text-align: center;
}
.div_start_7 {
  grid-column: 2 / span 3;
  grid-row: 2;
 /*text-align: center;	*/
}
.div_start_8 {
  grid-column: 5;
  grid-row: 2;
  text-align: center;
}
.div_start_9 {
  grid-column: 1;
  grid-row: 3;
  text-align: center;
}
.div_start_10 {
  grid-column: 2;
  grid-row: 3;
  text-align: center;
}
.div_start_11 {
  grid-column: 3;
  grid-row: 3;
  text-align: center;
}
.div_start_12 {
  grid-column: 4;
  grid-row: 3;
  text-align: center;
}
.div_start_13 {
  grid-column: 5;
  grid-row: 3;
  text-align: center;
}

* {
    box-sizing: border-box;
}

.zentrierterText4 {
   /*position: relative;
   top: 70%;*/
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   background-color: #ccff99;
   /*min-width: 80%;
   max-height: 200px;*/
   color: black;
   border: 2px #669933 solid;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
}

/* Schriftzug unter Verwendung von Webfonts */
.Titel4_1, Titel4_1 a{
   font-family: 'Tangerine', serif;
   font-size: 2.2em;
   font-weight: bold;
   text-align: center;
   color: black;
}