/* main style */


html{
  -ms-touch-action: none;
  -ms-content-zooming: none;
  -ms-touch-action: manipulation;	/* IE10  */
  touch-action: manipulation;		/* IE11+ */
}


body{margin:0; padding:0; background-color:#eee; background-image:url(../images/bgBlume.png);}

#content{margin-bottom:5em;}

p.zentriert, div.rotrahmen,h1,h2,h3,h5{text-align:center;}
div.zentriert, div.rotrahmen,h1,h2,h3,h5{text-align:center;} /* für p auf div umbau */




ul.auflistung, ol.auflistung{text-align:left;}
div.links{text-align:left; padding-left:2em;}

#content h3{ font-size: 1.5em; padding:0 20%;}


div.startseite{max-width:50%; margin-left: auto; margin-right: auto; padding:0 3em;}


div.orientierung{
  padding-left:1em;
  background-color:lightgray; color:#666;
  text-align:center; padding-bottom:.5em;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
  background-image:url(../images/bgKariert.png);
}
div.orientierung a{ text-decoration:none;}

h3{margin-bottom:0; margin-top:5em;}
h5{margin-bottom:0; margin-top:-1em;font-weight:normal;}
h1, h5 b{ color:#C00;} /* dunkelrot */

div.zentriert h3 {margin-top:.1em; margin-bottom:.5em;}
div.zentriert div.anmerkung {margin-top:.5em; margin-bottom:2em;}

.rot{color:#e00;} /* dunkelrot */




div.zentriert, div.ohnerahmen, div.linksbuendig, /* für p auf div umbau */
p.zentriert, p.ohnerahmen, div.rotrahmen{
  margin-left: auto;
  margin-right: auto;
  max-width: 30em;
  border-radius: 25px;
  padding:1em;
  background:white;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}

div.linksbuendig{text-align:left;}
p.linksbuendig{text-align:left;}


div.anmerkung{color:#666; font-size:small; text-align:center; margin:.5em 0 1.5em 0;}
span.anmerkung{color:#666; font-size:small;}

.lastChange{color:red; font-size:normal;}


footer{
  position:fixed;
  bottom:0;
  text-align:center; font-size:.6em;
  background:#999; color:#333;
  padding:.52% 3%; margin-top:1em;
  font-family:courier, serif;
  box-shadow: 5px -4px 6px rgba(99, 99, 99, .4);
  border-top:1px solid black;
  border-radius: 15px 0 0 0;
  background-image:url(../images/bgKariert.png);
}

a.footer{text-decoration:none; color:green;}
a.footer b{line-height:0px; color:green; font-weight:bold;}
span.supGender{ color:#0A0; font-size:2em; line-height:.1em; font-weight:bold; vertical-align:bottom;} /* Der Stern im Footer: lightgreen */

img.zentriert{
  display:block;
  margin-left: auto;
  margin-right: auto;
  font-size:1em;
}

img.schatten{border:1px solid red;}



img.minibild{
  margin-left: auto;
  margin-right: auto;
  width:15%;
  border:2px solid red;
}


img.kleinesbild{
  margin-left: auto;
  margin-right: 2em;
  width:40%;
  float:left;
}

a:hover img.minibild {border:2px solid blue;}

div.linksbuendig img.minibild{margin-right:1em;}

img.websitevorschau{
  margin: 1em auto;
  width:60%;
  border:2px solid red;
  display:block; 
}
a:hover img.websitevorschau {border:2px solid blue;}











div.dotted, /* für p auf div umbau */
p.dotted{border: 1px dotted #aaa; padding:1em;
  margin-top:.5em; background-color:#fff;
}

div.breit{max-width:46em;} /* wird weiter unten für Hochformat geändert! */

div img.block, /* für p auf div umbau */
p img.block{display:block; margin:1em auto; width:90%; padding:0 5%;} /* ---------------- Bild in der Box ------------------------*/

img.breiter{width:96%; align:center; display:block;margin:1em auto;}



img.miniatur{display:block; margin:1em auto; width:40%; padding:0 5%; border:2px solid transparent;} /* -------- Bildminiatur in der Box ------------------------*/
img.miniatur:hover{border:2px solid blue;} /* -------- Bildminiatur in der Box ------------------------*/


 /* für p auf div umbau */
div span.merksatz,
p span.merksatz{font-size:2em;color:darkgreen;}

 /* für p auf div umbau */
div span.merksatz b,
p span.merksatz b{font-size:1.2em;color:darkblue;}

#gend{font-size:.7em;}

 /* für p auf div umbau */
div.background{background-color:beige; margin-top:1em; padding:1em;}
p.background{background-color:beige; margin-top:1em; padding:1em;}

 /* für p auf div umbau */
div.ohnerahmen{border-radius:0; box-shadow: none; padding-left:1em;}
p.ohnerahmen{border-radius:0; box-shadow: none; padding-left:1em;}


.bigger{font-size:150%;}

div.themenblock { /* Themen-Übersicht ------------- */
	position: relative;
	float: left;
	width: 60%;
	background: #333;
	font-family: Arial, sans-serif;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 0 5px #888;
	-moz-box-shadow: 0 0 5px #888;
	box-shadow: 0 0 5px #888;
	margin-left: 20%;
	margin-right: auto;
	margin-bottom:1em;
	font-size:1.5em;
}

div#content h4{color:#d44; padding-left:1em; text-align:left;
	width:60%; margin: 0 auto .5em auto;
	font-size:1.2em;
}
div#content h4:after{content:':';}

div.themenblock ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

div.themenblock ul li {
	float: left;
}


div.themenblock ul li.mitInhalt a{
	color:white;
}



div.themenblock ul li a{
	padding: 10px 15px;
	display: block;
	color: gray;
	text-decoration: none;
}

div.themenblock ul li a:hover{
	background: #111;
	color: #aaa;
}



div.rotrahmen{ border:4px ridge red;}
div.rotrahmen h2{ color:red; }


.last{margin-top:4em;margin-bottom:4em;}
p.last{margin-top:7em;}

div.seitenNavigation{
  margin-left: auto;
  margin-right: auto;
  max-width: 30em;
  border-radius: 25px;
  padding:1em;
  text-align:center;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
  background-color:#f2fddb; 
  margin-top:1em; padding:1em;
}

table.auflistung td,
table.auflistung td{
  border: 2px solid black;
  padding: 10px;
  
  background: white;
  box-sizing: border-box;
  text-align: left;
  
}



/* Ueberschriften fuer Auflistungen wie bei smartchord.php  - - - - - - - - - - - - - - - - - - - - */
div.anleitung h3{text-align:left; margin-bottom:1em; margin-top:0;}
div.anleitung h5{text-align:left; margin-top:0; font-size:1.2em; font-weight:bold; color:darkred;}
div.anleitung h6{text-align:left; color:green; font-size:1em;}


/* Button-Style in Beschreibung von Websitevorschauen, zB in themaGriffbrett.php  - - - - - - - - - */
.ButtonWhiteOnBlue,.ButtonWhiteOnGreen{
	color: white; 
	padding: .1em 1em;
	border-radius: .4em;
	white-space: nowrap;
	}

.ButtonWhiteOnBlue{ background-color: #1A8DE9; /* lightblue; */ }
.ButtonWhiteOnGreen{ background-color: #2FD574; /* green; */ }

/* Hinweis auf zweite URL: */
p.achtungRot{
	background-color:#f66;
	font-size:1.5em;
	background-color:red;
	color:white;
}
/* Hier noch der LINK a: */
p.achtungRot a{
	color:yellow;
	text-decoration:none; 
}

p.achtungGrau{
	font-size:1em;
	background-color:lightgray;
	color:red;
} /* Hier noch der LINK a: */
p.achtungGrau a{
	color:blue;
	text-decoration:none; 
}

ul.linksbuendig{text-align:left;}

/* --------------------- Hochformat -----------------------------------------------------------------------------------*/

@media (orientation: portrait){
	
	div.orientierung{
		width:90%;
		margin: 1% 3%; /* my setting zur zentrierung */	
		margin-top:-5px;
	}
	
	div.startseite{max-width:80%; margin:0 3em;}
	
	div.anmerkung{color:#966; font-size:1em; text-align:center; margin:.5em 0 1em 0;}
	
	 /* für p auf div umbau */
	div.zentriert, div.ohnerahmen,
	p.zentriert, p.ohnerahmen{width:80%; font-size:1.8em;}
	
	
	 /* für p auf div umbau */
	div.dotted,
	p.dotted{margin:.5em 8% 4.5em 8%;}
	
	
	/* Damit kleine Bilder am Handy im Hochfortmat nicht zu winzig erscheinen: */
	div.zentriert img{ width:80%;}
	
	#content h3{ font-size: 1.5em; padding:0 1em;}
	
	div.background, /* für p auf div umbau */
	p.background{ padding:1em;}
	
	div.seitenNavigation{
		font-size:3em;
	}
	
	div.themenblock { /* Themen-Übersicht ------------- */
		font-size:2em;
	}
	
	div.linksbuendig{ /* Breite zB. bei smartchord Codes Auflistung */
		font-size:1.6em;
		text-align:left;
		width:86%; 
	}
	
	div.breit{max-width:98%;}

	img.breiter{width:90%;}

} /* ------------------- Hochformat Ende --------------------*/