/* 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;}






/* -------------- Styles für noten_am_griffbrett.php  ------------- Beginn ----------------------------------------------------------*/

div.sehrbreit{
	position:absolute;
	top:.1em;
	left:0em;
	width:90%; 
	margin: 12em 15em 12em 2em;
	padding:1em;
}

table.ohneLinien td{color:brown; border:none; text-align:center; background-color:#f8f8f8;}

input.fret{width:2em; position:inline;}
label.label{padding:.3em; font-weight:bold;}
td.wrong{background-color:red;}


table, th, td{
	border:none;
	white-space:nowrap; 
	hyphens:none; /* hyphens = https://developer.mozilla.org/de/docs/Web/CSS/Reference/Properties/hyphens */
	padding:.2em .5em .2em 0em;} /* ob re un li */

table tr td{width:2em; border:1px solid grey;}
div.sehrbreit table{width:80%;}
td.richtig{background-color:lightgreen;} /* so werden alle möglichen richtigen Antworten markiert */


button.StringX{ /* gedämpfte Saite */
	width: 2em;
	height: 2em;
	background-image:url('../images/X.jpg');
	border: none;
	background-size:cover; /* passt die kleinere Seite des Hintergrundbilds in die Box ein. */
													/* Der gesamte Container wird ausfüllt, ohne das Seitenverhältnis zu verzerren. */
	cursor: pointer;
}


button#check, button#reset, button#start , button#go {height:3em; width:8em;}

table.ohneLinien{width:100%;}
table tr.roemisch td{border-bottom:2px solid lightgray; background-color:white;}

table tr.arabisch td{border-top:2px solid lightgray; background-color:white;}

/* deaktivierter Bundbereich: */
table.ohneLinien tr td{ padding-left:.3em; }
table.ohneLinien tr td.disabled{ background-color:red;} /* lightgrey */


/* richtige Bünde grün markieren */
td.richtig{background-color:lightgreen;}

div.spielHinweiseLinks{
	position:absolute;
	width:18em;	
	top:0.3em;
	left:7em;
	height:10em;
	text-align:left;
	/*border:1px solid red;*/
}

img.notenAnzeige{
	position:absolute;
	top:0.3em;
	left:26em;
	width:200px;
	border:2px solid grey;
	border-radius:1em;
	box-shadow: 3px 5px 10px hsla(0,0%,0%,0.5);
}
	
div.spielHinweiseRechts{
	position:absolute;
	width:30em;
	top:0.3em;
	height:10em;
	left:41em;
	text-align:left;
	border:0px solid blue;
}
span.roterHinweis{color:#D33; font-size:1.1em; font-family:arial;}
span.gruenerHinweis{color:green; font-size:1.1em; font-family:arial;}
span.big{font-size:1.2em;}
div.insertNotenname{
	color:#0A0; /* mittel-grün */
	position:absolute;
	font-size:2em;
	left:17.5em;
	top:.2em;
	display:block;
	border:none;
	border-radius:1em;
	box-shadow: 3px 5px 10px hsla(0,0%,0%,0.5);
	background-color:#F9F9F9; // fast weiß;
	padding:0em .3em;
	letter-spacing:.1em;
	text-align:center;
}



button.unten{
	height:4em;
	margin-right:2em;
	margin-bottom:.5em;
	border:5px solid green;
	border-radius:1em;
	font-size:1.2em;
	box-shadow: 0 0 5px #888;
	margin-bottom:.5em;
	width:10em;
}

button#start{
	border-radius:1em;
	border:5px solid gray;
}
button.untendisabled{
	height:4em;
	margin-right:2em;
	border-radius:1em;
	font-size:1.2em;
	box-shadow: 0 0 5px #888;
	margin-bottom:.5em;
	width:10em;
	color:gray; background-color:lightgray; border:5px solid lightgray;
}

button.unten a{
	text-decoration:none;
	height:4em;
	color:red;
}

label.label{border:0px solid black;}
input.label{display:block; border:1px solid gray; margin-bottom:2em;}
div.umbruch{margin-top:2em;}

table.HSC{ /* Highscore-Tabelle */
	border:3px solid green;
}

table.ohneLinien td.offen{background-color:#A7542C; text-align:right; min-width:3%; max-width:5%; color:white;} /* #A7542C = braun */
table.ohneLinien td.richtig{background-color:lightgreen;}

table.HSC tr td{border-color:1px solid red;}

div.klaviertasten{
	position:absolute;
	left: 40em;
	top:8em;
	z-index:1;
}
div.klaviertasten img{
	width:330px;
}

audio#myAudio{
	width:21em; height: 6em;
	display:inline;
	margin-right:2em;
	margin-top:1em;
	margin-bottom:.5em;
	
	z-index:3;
}

/* -------------- Styles für noten_am_griffbrett.php  -------------- ENDE -----------------------------------------------------------*/


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

@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 --------------------*/


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

@media (orientation: portrait){
	div.sehrbreit{
	width:100%;
	margin:0;
	padding:0 1em;
	top:11em;
	}
	

table.ohneLinien{ margin-bottom:1em; width:100%;}
input.fret{width:.1em;}

button.unten{
	height:2.5em;
	margin-right:1em;
	border-radius:.5em;
	font-size:1em;
	box-shadow: 0 0 2px #888;
	margin-bottom:.5em;
	width:7.5em;
}

button.untendisabled{
	height:2.5em;
	margin-right:1em;
	border-radius:.5em;
	font-size:1em;
	box-shadow: 0 0 2px #888;
	margin-bottom:.5em;
	width:7.5em;
	color:gray; background-color:lightgray; border:5px solid lightgray;
}
button#start{
	height:3.5em;
	border-radius:.5em;
	border:5px solid gray;
}

div.spielHinweiseLinks{
	width:15em;	
	top:0.3em;
	left:1em;
	height:10em;
	text-align:left;
	border:0px solid red;
}

img.notenAnzeige{
	left:17em;
	width:10em;
}

div.spielHinweiseRechts{
	position:absolute;
	width:18em;
	top:0.3em;
	height:10em;
	left:29em;
	text-align:left;
	border:0px solid blue;
}

div.insertNotenname{
	left:9em;
	top:4.1em;
	border-radius:.5em;
	box-shadow: 2px 4px 8px hsla(0,0%,0%,0.5);
}

	div.sehrbreitsettings{
	position:absolute;
	top:.1em;
	left:0em;
	width:90%; 
	margin: 6em 15em 12em 2em;
	padding:1em;
}

label.label{display:block; margin-top:2em; border:0px solid green;}
input.label{display:block; border:1px solid gray; margin-bottom:2em;}
label.labelName{display:block; font-weight:bold;}

div.klaviertasten{
	position:absolute;
	left:28em;
	top:8em;
	z-index:1;
}
div.klaviertasten img{
	width:230px;
}

/* --------------------- Hochformat noten_am_griffbrett ------- ENDE ---------------------------------------------*/