@media screen and (max-device-width: 480px){
  body {
   -webkit-text-size-adjust: none; /* Font Resizing deaktivieren */
  }
}

@font-face {
  font-family: "s4gnormal"; /* eigener NORMAL-Zeichensatz mit deutschen Symbolen (B und H) */
  src: url("/Basics/Head/Fonts/s4gD.eot"); /* IE9 Compat Modes */
  src: url("/Basics/Head/Fonts/s4gD.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("/Basics/Head/Fonts/s4gD.woff2") format("woff2"), /* Modern Browsers */
  url("/Basics/Head/Fonts/s4gD.woff") format("woff"), /* Modern Browsers */
  url("/Basics/Head/Fonts/s4gD.ttf") format("truetype"), /* Safari, Android, iOS */
  url("/Basics/Head/Fonts/s4gD.svg") format("svg"); /* Legacy iOS */  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "s4gitalic"; /* eigener ITALIC-Zeichensatz mit deutschen Symbolen (B und H) */
  src: url("/Basics/Head/Fonts/s4gDI.eot"); /* IE9 Compat Modes */
  src: url("/Basics/Head/Fonts/s4gDI.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("/Basics/Head/Fonts/s4gDI.woff2") format("woff2"), /* Modern Browsers */
  url("/Basics/Head/Fonts/s4gDI.woff") format("woff"), /* Modern Browsers */
  url("/Basics/Head/Fonts/s4gDI.ttf") format("truetype"), /* Safari, Android, iOS */
  url("/Basics/Head/Fonts/s4gDI.svg") format("svg"); /* Legacy iOS */  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "s4gbold"; /* eigener BOLD-Zeichensatz mit deutschen Symbolen (B und H) */
  src: url("/Basics/Head/Fonts/s4gDB.eot"); /* IE9 Compat Modes */
  src: url("/Basics/Head/Fonts/s4gDB.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("/Basics/Head/Fonts/s4gDB.woff2") format("woff2"), /* Modern Browsers */
  url("/Basics/Head/Fonts/s4gDB.woff") format("woff"), /* Modern Browsers */
  url("/Basics/Head/Fonts/s4gDB.ttf") format("truetype"), /* Safari, Android, iOS */
  url("/Basics/Head/Fonts/s4gDB.svg") format("svg"); /* Legacy iOS */  font-weight: normal;
  font-style: normal;
}

/*
GLIEDERUNG dieser CSS-Datei ab hier:
01. Allgemeines
02. Bildschirmaufteilung, Basics
03. Bildschirmaufteilung im Inhaltsverzeichnis
04. Bildschirmaufteilung fuer einen Song
05. Bildschirmaufteilung fuer Listen
06. Eingabefelder, -bereiche, Notizfelder usw.
07. Spalten und Zeilen in Listen, Inhaltsverzeichnis,...
08. Knoepfe, Buttons, Schaltflaechen aller Art
09. form-action-Buttons
10. Rahmen, Ecken,...
11. Zeichen, Texte, Symbole
12. Zeichenabstand, Schriftweite
13. Ausrichtungen, Breiten-/Weitenfestlegungen
14. Formatierungen fuer Songs_in_Listen
15. Formatierungen auf der Theorie-Seite (Tabellen, Felder)
16. Rahmen1 für Slotmashine im Inhaltsverzeichnis
17. Login-Box
18. Sonstiges, dessen Sinn mir am 10.1.23 nicht mehr einleuchtete
19. CSS fuer die lightbox (pop-up-Einblendungen)
*/

/* 01. Allgemeines */
* {                                         /* stellt den gesamten Bildschirm zur Verfuegung */
 margin:0;
 padding:0;
}
html {
 height:100%;
	/*vertical-align:middle;*/
}
body {
 background-color:#FFFFFF;
 height:100%;
 /*overflow-y:scroll; /* immer mit Scrollbalken */
}

/* 02. Bildschirmaufteilung, Basics */
.Startseite {
 width:99%;
 position:absolute;
 top:45px;
	padding-left:0.5%;
	padding-right:0.5%;
 z-index:1;
}
.Titelbild {
  position:absolute;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  z-index:2;
  /*top: 50%;
  text-align: center;
  top: calc(50%-300px);
  background-color: #e5ebf1; aus der Testküche mit viel Frust*/
  
}
.Hintergrund_Songliste {
  position:absolute;
		padding-top:140px;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.Songliste {
  position:absolute;
		padding-top:295px;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;  
}
.Seite {
 position:relative;
 min-height:100%;
 width:100%;
}
.Kopfzeile {               /* Platz fuer die Meuezeile in Listen bzw. Titelzeile in Songs */
 position:fixed;
 top:0px;
 left:0px;
 width:100%;
 height:45px;
 background-color:#FFFFFF;
 /*opacity:0%;*/              /* ACHTUNG! Dadurch wird eine neue Reihenfolge fuer z-index aufgebaut! */
 z-index:4;                   /* Ueberlagerung; holt die Kopfzeile vor den Inhalt */
}
.Menuezeile {                   /* Platz fuer die Menue-Buttons */              
 margin-top:3px;
 margin-left:0.5%;
 min-width:99%;
 width:99%;              /* fuer aeltere Browser */
 border:none;
}
.Menuepunkt_4 {  /* grosser Rahmen in Kopfzeile Inhaltsverzeichnisse, 4 Menuepunkte */
 width:25%;  /* = 100/4 */
 text-align:center;
 line-height:34px;
 border:none;
 border-radius:5px;
 -moz-border-radius:5px; 
 -webkit-border-radius:5px;
 -o-border-radius:5px;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 background-color:#ffffff;
 box-shadow:0px 1px 2px #666666;
 -moz-box-shadow:0px 1px 2px #666666;
 -webkit-box-shadow:0px 1px 2px #666666;
 -o-box-shadow:0px 1px 2px #666666;
 border:1px solid #fff; /* alternativ #f9f9f9 */
}
.Menuepunkt_5 {  /* grosser Rahmen in Kopfzeile Inhaltsverzeichnisse, 5 Menuepunkte */
 width:15%;  /* 4*15%=60% fuer alle Songs, Basics, Symbole und Stellwerk; 40% fuer Menuepunkt_eigene_Listen */
 text-align:center;
 line-height:34px;
 border:none;
 border-radius:5px;
 -moz-border-radius:5px; 
 -webkit-border-radius:5px;
 -o-border-radius:5px;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 background-color:#ffffff;
 box-shadow:0px 1px 2px #666666;
 -moz-box-shadow:0px 1px 2px #666666;
 -webkit-box-shadow:0px 1px 2px #666666;
 -o-box-shadow:0px 1px 2px #666666;
 border:1px solid #fff; /* alternativ #f9f9f9 */
}
.Menuepunkt_6 {  /* grosser Rahmen in Kopfzeile Inhaltsverzeichnisse, 6 Menuepunkte rechts von s4g */
 width:15.1%;  /* = 91/6 */
 text-align:center;
 line-height:34px;
 border:none;
 border-radius:5px;
 -moz-border-radius:5px; 
 -webkit-border-radius:5px;
 -o-border-radius:5px;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 background-color:#ffffff;
 box-shadow:0px 1px 2px #666666;
 -moz-box-shadow:0px 1px 2px #666666;
 -webkit-box-shadow:0px 1px 2px #666666;
 -o-box-shadow:0px 1px 2px #666666;
 border:1px solid #fff; /* alternativ #f9f9f9 */
}
.Menuepunkt_7 {  /* grosser Rahmen in Kopfzeile Inhaltsverzeichnisse, 7 gleichgrosse Menuepunkte */
 width:14.28%;    /* = 100/7 */
 text-align:center;
 line-height:34px;
 border:none;
 border-radius:5px;
 -moz-border-radius:5px; 
 -webkit-border-radius:5px;
 -o-border-radius:5px;
 box-shadow:0px 1px 2px #666666;
 -moz-box-shadow:0px 1px 2px #666666;
 -webkit-box-shadow:0px 1px 2px #666666;
 -o-box-shadow:0px 1px 2px #666666;
 border:1px solid #fff; /* alternativ #f9f9f9 */
}
.Fusszeile {
 margin-top:1px;
 margin-bottom:1px;
}
.Fusszeile1 {                      /* einzeilige Fusszeile */
 height:28px;
 position:fixed;
 bottom:0px;
 width:100%;
 background-color:#ffffff;
 float:left;
 z-index:3;
}
.Fusszeile2 {                     /* zweizeilige Fusszeile */
 height:45px;
 position:fixed;
 bottom:0px;
 width:100%;
 background-color:#ffffff;
 float:left;
 z-index:3;
}
.Fusszeile_links {              /* Ausrichtung linksbuendig in Fusszeile */
 margin-left:0px;
 margin-top:3px;
 white-space:nowrap;
}
.Fusszeile_rechts {             /* Ausrichtung rechtsbuendig in Fusszeile */
 margin-right:0px;
 margin-left:auto;
 margin-top:3px;
 white-space:nowrap;
}
.FButton_1 {          /* fuer die Fusszeilenbuttons */
 width:28px;
}
.FButton_2 {          /* fuer die Fusszeilenbuttons */
 width:145px;
}

/* 03. Bildschirmaufteilung im Inhaltsverzeichnis, Listenverwaltung */
.Inhalt {                      /* Platz fuer das Inhaltsverzeichnis */
 padding-top:78px;             /* war auch schon 30px */
 width:100%;
 z-index:1;                     /* Wert muss niedriger als z.index(#kopfzeile) sein */
}
.Inhalt_Listenverwaltung {     /* kw wg Inhalt? */
 padding-top:78px;             /* war auch schon 78px */
 width:100%;
 z-index:1;                     /* Wert muss niedriger als z.index(#kopfzeile) sein */
}

/* 04. Bildschirmaufteilung fuer einen Song */
.Lied {                          /* Platz fuer einen Song */
  padding-top:50px;          /* war auch schon 50px */
  width:100%;
  z-index:1;                     /* Wert muss niedriger als z.index(#kopfzeile) sein */
}
.Lied_Fortsetzung {
  width:100%;
  z-index:1;                     /* Wert muss niedriger als z.index(#kopfzeile) sein */
}
.Einleitung {                      /* geht ueber alle Spalten, scrollt mit dem Text */
 clear:left;
 margin-left:0.5%;
 margin-right:0.5%;
 }
.Refrain {
 background-image:linear-gradient(to left, white 0%, #E5E5E5 98%);  /* geht nicht wg iPad1*/
 border-collapse:collapse;
 padding-left:3px;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}
.Strophe {
 border-collapse:collapse;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}
.Strophe_r {
 border-collapse:collapse;
 /* border:0px;  */
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 float:right;
 width:90%;
}
.InOutSoloBridge {
 border-left:thin solid #bbbbbb;
 padding-left:2px;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}
.Akkordzeile {
 line-height:16px;
 /*vertical-align:baseline;*/
}
.Textzeile {
 line-height:19px;
 /*vertical-align:bottom;*/
}
.Textzeile_r {
 line-height:19px;
 float:right;
 margin-right:8px;
}
.Erklaerungszeile {
 text-overflow:ellipsis;
 white-space:nowrap;
}
.Spalte1_1 {
	 float:left;
  padding-left:0.5%;
  width:99%;
}
.Spalte1_2 {
  float:left;
  padding-left:0.5%;
  width:49%;
  background:url(/Basics/Fotos/Linie_senkrecht.jpg); /* Trennlinie rechts */
  background-size:1px 100%;
  background-repeat:no-repeat;
  background-position:right;
}
.Spalte2_2 {
  float:left;
  padding-left:0.5%;
  width:49%;
}
.Spalte1_3,
.Spalte2_3 {
  float:left;
  padding-left:0.5%;
  width:32.7%;
  background:url(/Basics/Fotos/Linie_senkrecht.jpg); /* Trennlinie rechts */
  background-size:1px 100%;
  background-repeat:no-repeat;
  background-position:right;
}
.Spalte3_3 {
  float:left;
  padding-left:0.5%;
  width:32.6%;
}
.Spalte1_4,
.Spalte2_4,
.Spalte3_4 {
  float:left;
  padding-left:1%;
  width:24%;
  background:url(/Basics/Fotos/Linie_senkrecht.jpg); /* Trennlinie rechts */
  background-size:1px 100%;
  background-repeat:no-repeat;
  background-position:right;
}
.Spalte4_4 {
  float:left;
  padding-left:0.5%;
  width:24%;
}
.Spalte_Songliste1_3 {
  float:left;
  padding-left:4%;
  width:31%;
  /* background:url(/Basics/Fotos/Linie_senkrecht.jpg); Trennlinie rechts */
  background-size:1px 100%;
  background-repeat:no-repeat;
  background-position:right;
}
.Spalte_Songliste2_3 {
  float:left;
  padding-left:0.5%;
  width:31%;
  /* background:url(/Basics/Fotos/Linie_senkrecht.jpg); Trennlinie rechts */
  background-size:1px 100%;
  background-repeat:no-repeat;
  background-position:right;
}
.Spalte_Songliste3_3 {
  float:left;
  padding-left:0.5%;
  width:31%;
}
.Notizzeile {                     /* fuer die Benutzerbemerkunge, -kapopositionen, -lesezeichen usw. */
 width:99%;
 padding-left:5px;
}
.Notiz {                          /* schliesst an das Lied an; fuer Uebersetzungen, Geschichtchen usw. zum Song */
 clear:left;
 margin-left:0.5%;
 margin-right:0.5%;
 background-color:#eeeeee;
}
.Bemerkung {                      /* schliesst an das Lied an; fuer Uebersetzungen, Geschichtchen usw. zum Song */
  clear:left;
  margin-left:0.5%;
  margin-right:0.5%;
  background:url("/Basics/Fotos/Linie_waagerecht.jpg"); /* Trennlinie oben */
  background-size:99% 1px;
  background-repeat:no-repeat;
  background-position:top;
}

/* 05. Bildschirmaufteilung fuer Listen */
.Inhalt_Listen {                /* Platz fuer Listen */
 padding-top:100px;
 width:100%;
 z-index:1;                     /* Wert muss niedriger als z.index(#kopfzeile) sein */
}
.position1 {                    /* Ausgleich fuer html-Anker in Listen*/ 
 height:0px !important;              /* 'kopfzeile' 45px und 'Sortierzeile_Tabelle' 44px plus etwas Textzeile */ 
 position:absolute;
 margin-top: -92px;
 visibility: hidden;
}
.Menuepunkt_eigene_Listen {       /* Rahmen in Kopfzeile Inhaltsverzeichnisse fuer Schriftzug */
 /* width:9%;  bei 8 Kaesten */
 width:40%;  /* ab 17_11_2020 */
 text-align:center;
 line-height:34px;
 border:none;
 border-radius:5px;
 -moz-border-radius:5px; 
 -webkit-border-radius:5px;
 -o-border-radius:5px;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 background-color:#ffffff;
 box-shadow:0px 1px 2px #666666;
 -moz-box-shadow:0px 1px 2px #666666;
 -webkit-box-shadow:0px 1px 2px #666666;
 -o-box-shadow:0px 1px 2px #666666;
 border:1px solid #fff; /* alternativ #f9f9f9 */
}
.Songtitel_linker_Teil {
  /*border-collapse:collapse;
  border:1px;*/
  margin-left:0px;
}
.Songtitel_rechter_Teil {
  /*border-collapse:collapse;
  border:1px;
  border-color:#000;*/
  margin:0 0 0 auto;         /* rechtsbuendig */
}
.Spalte1_2_eigene_Listen {
  width:49%;
  margin-left:0.5%;
  position:fixed;
  height:90%;            /* wg unabhaengigen Scrolls */
  overflow:scroll;       /* wg unabhaengigen Scrolls */
  background:url(/Basics/Fotos/Linie_senkrecht.jpg); /* Trennlinie rechts */
  background-size:1px 100%;
  background-repeat:no-repeat;
  background-position:right;
}
.Spalte2_2_eigene_Listen {
  position:fixed;
  margin: 0 0 0 50%;
  height:90%;             /* wg unabhaengigen Scrolls */
  overflow:scroll;        /* wg unabhaengigen Scrolls */
  width:49%;
}
.Spalte1_2_alle_Songs {
  float:left;
  padding-left:0.5%;
  width:49%;
  /*background-image:linear-gradient(to bottom, #fff 5%, #999 80%, #fff 5%);  /* geht nicht wg iPad1*/
  background:url(/Basics/Fotos/Linie_senkrecht.jpg); /* Trennlinie rechts */
  background-size:1px 100%;
  background-repeat:no-repeat;
  background-position:right;
}
.Spalte2_2_alle_Songs {
  float:left;
  padding-left:0.5%;
  width:49%;
}
.Spalte1_2_ohne_Linie,
.Spalte1_2_sort_Tabelle,
.Spalte2_2_sort_Tabelle {
  float:left;
  padding-left:0.5%;
  width:49%;
}

/* 06. Eingabefelder, -bereiche, Notizfelder usw. */
.Notizfeld {
 border-radius:3px;
 -moz-border-radius:3px; 
 -webkit-border-radius:3px;
 -o-border-radius:3px;
 background-color:#ffffff;
 border:none;
}
.Notizfeld1 {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:16px;
 color:#000000;     /* schwarz */
 border:none;
 padding-right:5px;
 padding-left:5px;
 width:45px;
 border-radius:3px;
 -moz-border-radius:3px; 
 -webkit-border-radius:3px;
 -o-border-radius:3px;
 vertical-align:middle;
}
.Notizfeld2 {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:16px;
 color:#000000;     /* schwarz */
 border:none;
 padding-right:5px;
 padding-left:5px;
 width:49%;
 border-radius:3px;
 -moz-border-radius:3px; 
 -webkit-border-radius:3px;
 -o-border-radius:3px;
 vertical-align:middle;
}
.Suchfeld {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:16px;
 color:#009900;     /* hellgruen, alternativ #009966 oder #009933 */
 border:none;
 padding-right:5px;
 padding-left:5px;
 width:96%;
 border-radius:3px;
 -moz-border-radius:3px; 
 -webkit-border-radius:3px;
 -o-border-radius:3px;
 vertical-align:middle;
 background-color:#f3f3f3;
}
.Auswahlfeld_on {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 text-shadow:1px 1px 1px #cccccc;
 font-size:16px;
 color:#009900;     /* hellgruen, alternativ #009966 oder #009933 */
 border:none;
 width:96%;
 border-radius:3px;
 -moz-border-radius:3px; 
 -webkit-border-radius:3px;
 -o-border-radius:3px;
 vertical-align:middle;
 background-color:#f3f3f3;
}
.Auswahlfeld_off {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 text-shadow:1px 1px 1px #cccccc;
 font-size:16px;
 color:#000000;     /* schwarz */
 border:none;
 width:96%;
 border-radius:3px;
 -moz-border-radius:3px; 
 -webkit-border-radius:3px;
 -o-border-radius:3px;
 vertical-align:middle;
 background-color:#f3f3f3;
}
.Listenwahlfeld {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:16px;
 color:#009900;     /* hellgruen, alternativ #009966 oder #009933 */
 border:none;
 padding-right:5px;
 padding-left:5px;
 width:96%;
 border-radius:3px;
 -moz-border-radius:3px; 
 -webkit-border-radius:3px;
 -o-border-radius:3px;
 vertical-align:middle;
 background-color:#f3f3f3;
}
.Eingabebereich_leer {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:14px;
 color:#919191;     /* grau */
 border:none;
 padding-right:5px;
 padding-left:5px;
 width:96%;
 border-radius:3px;
 -moz-border-radius:3px; 
 -webkit-border-radius:3px;
 -o-border-radius:3px;
 vertical-align:middle;
 background-color:#ffffff;
}
.Eingabebereich {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:14px;
 color:#000000;     /* schwarz */
 border:none;
 padding-right:5px;
 padding-left:5px;
 width:96%;
 border-radius:3px;
 -moz-border-radius:3px; 
 -webkit-border-radius:3px;
 -o-border-radius:3px;
 vertical-align:middle;
 background-color:#f3f3f3;
}
.Eingabefeld {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:16px;
 color:#009900;     /* hellgruen, alternativ #009966 oder #009933 */
 border:none;
 padding-right:5px;
 padding-left:5px;
 width:90%;
 border-radius:3px;
 -moz-border-radius:3px; 
 -webkit-border-radius:3px;
 -o-border-radius:3px;
 vertical-align:middle;
 background-color:#f4ffca;
}

/* 07. Spalten und Zeilen in Listen, Inhaltsverzeichnis,... */
.Sortierzeile_Tabelle {           /* z.B. in Funktion Spaltenkopf_alle_Songs.php */
 position:fixed;
 top:44px;
 padding-top:1px;
 left:0px;
 width:100%;
 height:33px;
 z-index:3;                      /* Ueberlagerung; holt die Kopfzeile vor den Inhalt */
	background-color:#FFF;
}
.Spalte_TitelInterpret {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:16px;
 color:#000000;
}
.Spalte_Interpret {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 color:#000000;
 text-align:right;
 vertical-align:bottom;
}
.Spalte_Nummer {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:16px;
 color:#000000;
}
.Spalte_Icon_Suche { 
 border-radius:5px;
 -moz-border-radius:5px; 
 -webkit-border-radius:5px;
 -o-border-radius:5px;
 box-shadow:0px 1px 2px #666666;
 -moz-box-shadow:0px 1px 2px #666666;
 -webkit-box-shadow:0px 1px 2px #666666;
 -o-box-shadow:0px 1px 2px #666666;
 border:1px solid #fff; /* alternativ #f9f9f9 */
}
.Notizspalte1 {
 width:24px;
}
.Notizspalte2 {
 width:45px;
}
.Notizspalte3 {
 width:100%; 
 min-width:65%;
}

/* 08. Knoepfe, Buttons, Schaltflaechen aller Art */
.Button {             
 padding:2px;  /* wg 2px-border um '_on' */
 border-radius:3px;
 -moz-border-radius:3px; 
 -webkit-border-radius:3px;
 -o-border-radius:3px;
 box-shadow:0px 1px 2px #666666;
 -moz-box-shadow:0px 1px 2px #666666;
 -webkit-box-shadow:0px 1px 2px #666666;
 -o-box-shadow:0px 1px 2px #666666;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 background-color:#ffffff;
 border:1px solid #ffffff;
}
.Button_on {   /* loeschen, wenn 2px-border um '_on' */
 padding:2px;  /* wg 2px-border um '_on' */
 border-radius:3px;
 -moz-border-radius:3px; 
 -webkit-border-radius:3px;
 -o-border-radius:3px;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 background-color:#ffffff;
 box-shadow:0px 1px 2px #33cc00; /* roter Schein #ff0000 */
 -moz-box-shadow:0px 1px 2px #33cc00;
 -webkit-box-shadow:0px 1px 2px #33cc00;
 -o-box-shadow:0px 1px 2px #33cc00;
 border:1px solid #33cc00;
}
.Button_off {             
 padding:2px;  /* wg 2px-border um '_on' */
 border-radius:3px;
 -moz-border-radius:3px; 
 -webkit-border-radius:3px;
 -o-border-radius:3px;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 background-color:#ffffff;
 box-shadow:0px 1px 2px #666666;
 -moz-box-shadow:0px 1px 2px #666666;
 -webkit-box-shadow:0px 1px 2px #666666;
 -o-box-shadow:0px 1px 2px #666666;
 border:1px solid #fff; /* alternativ #f9f9f9 */
}
.Button_aus {             
 padding:2px;  /* wg 2px-border um '_on' */
 border-radius:3px;
 -moz-border-radius:3px; 
 -webkit-border-radius:3px;
 -o-border-radius:3px;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 background-color:#ffffff;
 box-shadow:0px 1px 2px #666666;
 -moz-box-shadow:0px 1px 2px #666666;
 -webkit-box-shadow:0px 1px 2px #666666;
 -o-box-shadow:0px 1px 2px #666666;
 border:1px solid #ff0000; 
}
.Button_Suche {
 color:#ffffff;         /* weiss */
 border:none;
 height:18px;
 background-color:#fff;
}
.Knopf {
 border-radius:3px;
 -moz-border-radius:3px; 
 -webkit-border-radius:3px;
 -o-border-radius:3px;
 padding:1px;
 vertical-align:top;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 background-color:#ffffff;
 box-shadow:0px 1px 2px #666666;
 -moz-box-shadow:0px 1px 2px #666666;
 -webkit-box-shadow:0px 1px 2px #666666;
 -o-box-shadow:0px 1px 2px #666666;
 border:1px solid #fff; /* alternativ #f9f9f9 */
}
.Flagge {             /* grauer Schatten */
 box-shadow:0px 1px 2px #666666;
 -moz-box-shadow:0px 1px 2px #666666;
 -webkit-box-shadow:0px 1px 2px #666666;
 -o-box-shadow:0px 1px 2px #666666;
 border:1px solid #fff; /* alternativ #f9f9f9 */
}
.Flagge_on {  
 box-shadow:0px 0px 6px #33cc00;
 -moz-box-shadow:0px 0px 6px #33cc00;
 -webkit-box-shadow:0px 0px 6px #33cc00;
 -o-box-shadow:0px 0px 6px #33cc00;
 border:1px solid #33cc00;
}
.Licht_on {             /* fuer Songs mit mehreren Versionen */
 border-radius:50%;
 -moz-border-radius:50%; 
 -webkit-border-radius:50%;
 -o-border-radius:50%;
 box-shadow:0px 0px 3px #33cc00;
 -moz-box-shadow:0px 0px 3px #33cc00;
 -webkit-box-shadow:0px 0px 3px #33cc00;
 -o-box-shadow:0px 0px 3px #33cc00;
 border:1px solid #33cc00;
}
.Licht_off {             /* fuer Songs mit mehreren Versionen */
 border-radius:50%;
 -moz-border-radius:50%; 
 -webkit-border-radius:50%;
 -o-border-radius:50%;
 box-shadow:0px 0px 3px #ff0000;
 -moz-box-shadow:0px 0px 3px #ff0000;
 -webkit-box-shadow:0px 0px 3px #ff0000;
 -o-box-shadow:0px 0px 3px #ff0000;
 border:1px solid #ff0000;
}
.Licht_weiss {
 border-radius:50%;
 -moz-border-radius:50%; 
 -webkit-border-radius:50%;
 -o-border-radius:50%;
 box-shadow:0px 0px 6px #fff;
 -moz-box-shadow:0px 0px 6px #fff;
 -webkit-box-shadow:0px 0px 6px #fff;
 -o-box-shadow:0px 0px 6px #fff;
 border:1px solid #fff;
}
.Ring {
 border-radius:50%;
 -moz-border-radius:50%; 
 -webkit-border-radius:50%;
 -o-border-radius:50%;
 margin-right:3px; /* wg Ring_on_Schatten zum Kapo-Symbol */
 box-shadow:0px 0px 5px #fff; /* weisser Schatten */
 -moz-box-shadow:0px 0px 5px #fff;
 -webkit-box-shadow:0px 0px 5px #fff;
 -o-box-shadow:0px 0px 5px #fff;
 padding:1px; /* Ersatz fuer border:2px */
  vertical-align:middle;
}
.Ring_on {             /* fuer Songs mit mehreren Versionen */
 border-radius:50%;
 -moz-border-radius:50%; 
 -webkit-border-radius:50%;
 -o-border-radius:50%;
 margin-right:3px; /* wg Ring_on_Schatten zum Kapo-Symbol */
 box-shadow:0px 0px 3px #33cc00;
 -moz-box-shadow:0px 0px 3px #33cc00;
 -webkit-box-shadow:0px 0px 3px #33cc00;
 -o-box-shadow:0px 0px 3px #33cc00;
 border:1px solid #33cc00;
  vertical-align:middle;
}
.Ring_off {
 border-radius:50%;
 -moz-border-radius:50%; 
 -webkit-border-radius:50%;
 -o-border-radius:50%;
 margin-right:3px; /* wg Ring_on_Schatten zum Kapo-Symbol */
 box-shadow:0px 0px 3px #ff0000;
 -moz-box-shadow:0px 0px 3px #ff0000;
 -webkit-box-shadow:0px 0px 3px #ff0000;
 -o-box-shadow:0px 0px 3px #ff0000;
 border:1px solid #ff0000;
 vertical-align:middle;
}
.Ring_ohne {
 border-radius:50%;
 -moz-border-radius:50%; 
 -webkit-border-radius:50%;
 -o-border-radius:50%;
 margin-right:3px; /* wg Ring_on_Schatten zum Kapo-Symbol */
 box-shadow:0px 0px 5px #fff; /* weisser Schatten */
 -moz-box-shadow:0px 0px 5px #fff;
 -webkit-box-shadow:0px 0px 5px #fff;
 -o-box-shadow:0px 0px 5px #fff;
 vertical-align:middle;
}
.Ring_grau {
 border-radius:50%;
 -moz-border-radius:50%; 
 -webkit-border-radius:50%;
 -o-border-radius:50%;
 margin-right:3px; /* wg Ring_on_Schatten zum Kapo-Symbol */
 border:1px solid #919191;
 vertical-align:middle;
}
.Ring_weiss {
 border-radius:50%;
 -moz-border-radius:50%; 
 -webkit-border-radius:50%;
 -o-border-radius:50%;
 margin-right:3px; /* wg Ring_on_Schatten zum Kapo-Symbol */
 box-shadow:0px 0px 6px #fff;
 -moz-box-shadow:0px 0px 6px #fff;
 -webkit-box-shadow:0px 0px 6px #fff;
 -o-box-shadow:0px 0px 6px #fff;
 border:1px solid #fff;
}

/* 09. form-action-Buttons */
.form_standard {
 display:inline;
}
.button_standard {
 border:0px; 
 background-color:transparent; 
 cursor: pointer;
 padding:1px;
}

/* 10. Rahmen, Ecken,... */
.runde_Ecken { 
 border-radius:5px;
 -moz-border-radius:5px; 
 -webkit-border-radius:5px;
 -o-border-radius:5px;
 box-shadow:0px 1px 2px #666666;
 -moz-box-shadow:0px 1px 2px #666666;
 -webkit-box-shadow:0px 1px 2px #666666;
 -o-box-shadow:0px 1px 2px #666666;
 border:1px solid #fff; /* alternativ #f9f9f9 */
}
.Rahmen_Songtitel {           /* grosser Rahmen in Kopfzeile Songs */
 margin-top:1px;
 width:99%;      /* fuer aeltere Browser */
 min-width:99%;
 margin-left:0.5%;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 /*border:0px;
 background-image:url(/Basics/Fotos/Punkt.bmp);
 background-size: 100% 1px;
 background-repeat:repeat-x;
 background-position:bottom;
 padding-bottom:2px; /* wg 2px-border um Ring_on */
}
.Rahmen_Fusszeile {              /* Rahmen in Fusszeile */
 min-width:99%;
 width:99%;
 margin-left:0.5%;              /* fuer aeltere Browser */
 border:0px;                    /*Alternative:thin #919191 solid;*/
 margin-top:0px;
 margin-bottom:3px;
 /*background-image:url(/Basics/Fotos/Linie_waagerecht.png);*/
 background-image:linear-gradient(to left, #fff, #999, #fff);  /* geht nicht wg iPad1*/
 background-size:100% 1px;
 background-repeat:no-repeat;
 background-position:top;
}
.Rahmen_l {
 border-left: 1px solid grey;
}
.Rahmen_r {
 border-right: 1px solid grey;
}
.Rahmen_o {
 border-top: 1px solid grey;
}
.Rahmen_u {
 border-bottom: 1px solid grey;
}

/* für Bilder */
.Schatten {
  box-shadow: 5px 5px 5px #9e9ea0; /*#5d5b86*/
  -moz-box-shadow: 5px 5px 5px #9e9ea0;
  -webkit-box-shadow: 5px 5px 5px #9e9ea0;
  -o-box-shadow: 5px 5px 5px #9e9ea0;
}

.Ecken_6 {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -o-border-radius: 6px;
}

.Ecken_3 {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 36px;
}

/* 11. Zeichen, Texte, Symbole */
.Text_Songliste {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:16px;
 color:#d7e5fa;     /* hellbleu */
 text-shadow: 0px 0px 12px #46505c;
}
.Text {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:16px;
 color:#000000;     /* schwarz */
}
.Text_ul {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:underline;
 font-weight:normal;
 font-size:16px;
 color:#000000;     /* schwarz */
}
.Text_em {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-style:italic;
 font-size:16px;
 color:#000000;     /* schwarz */
}
.Text_fett {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:16px;
 color:#000000;     /* schwarz */
}
.Text_grau {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:16px;
 color:#919191;     /* grau */
}
.Text_blau {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:16px;
 color:#3300cc;      /* dunkelblau */
}
.Text_rot {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:16px;
 color:#ff0000;
}
.Text_gruen {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:16px;
 color:#009900;     /* hellgruen, alternativ #009966 oder #009933 */
}
.Text_weiss {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:16px;
 color:#ffffff;     /* weiss */
}
.Text_Inhaltsverzeichnis {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:16px;
 color:#000000;     /* schwarz */
}
.Text_Inhaltsverzeichnis {
 background-color:#ffffff;     /* Hintergrund weiss, ueberschreibt Linie im Inhaltsverzeichnis */
}
.Text_Titelseite { /* Exot, muss ueberarbeitet werden */
 font-size:19px;
 color:#cccccc;
 text-shadow:none;
 text-align:justify;
}
.Text_Titelseite {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:16px;
 color:#000000;     /* schwarz */
}
.Text_Fusszeile {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:12px;
 color:#000000;     /* schwarz */
}
.Text_Fusszeile_em {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-style:italic;
 font-size:12px;
 color:#000000;     /* schwarz */
}
.Text_Fusszeile_blau {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:12px;
 color:#3300cc;      /* dunkelblau */
}
.Text_Fusszeile_grau {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:12px;
 color:#919191;     /* grau */
}
.Text_Fusszeile_grau_kursiv {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-style:italic;
 font-size:12px;
 color:#919191;     /* grau */
}
.Text_Fusszeile_gruen {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:12px;
 color:#009900;     /* hellgruen, alternativ #009966 oder #009933 */
}
.Text_gr_schattiert {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 text-shadow:2px 2px 2px #919191;
 font-size:26px;
 color:#000000;     /* schwarz */
}
.Inhalt_Text {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 font-size:16px;
 color:#000000;
 background-color:#ff0000;
}
.Kleintext {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:14px;
 color:#000000;     /* schwarz */
}
.Kleintext_grau {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:14px;
 color:#919191;     /* grau */
}
.Kleintext_gruen {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:14px;
 color:#009900;     /* hellgruen, alternativ #009966 oder #009933 */
}
.text_rot_theorie {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:10px;
 color:#ff0000;
}
.Strophennummer {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 font-size:16px;
 color:#ffffff;     /* weiss */
 background-color: #ffffff;
 padding-left:1px;
 padding-right:2px;
 letter-spacing:-1px;
 border-radius:2px;
 -moz-border-radius:2px; 
 -webkit-border-radius:2px;
 -o-border-radius:2px;
 text-shadow:  1px 1px 1px #aaaaaa, 1px -1px 1px #aaaaaa, -1px  1px 1px #aaaaaa, -1px -1px 1px #aaaaaa; /* Kontur */
}
.Haupt_Menue_off {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 text-shadow:1px 1px 1px #cccccc;
 font-size:16px;
 color:#000000;     /* schwarz */
}
.Haupt_Menue_on {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 text-shadow:1px 1px 1px #cccccc;
 font-size:16px;
 color:#009900;     /* hellgruen, alternativ #009966 oder #009933 */
}
.Schrift_Menue {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 text-shadow:1px 1px 1px #cccccc;
 font-size:16px;
 color:#000000;     /* schwarz */
}
.Schrift_Menue_rot {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 text-shadow:1px 1px 1px #cccccc;
 font-size:16px;
 color:#cc0033;      /* dunkelrot */
}
.Schrift_Menue_gr {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 text-shadow:2px 2px 2px #919191;
 font-size:20px;
 color:#000000;     /* schwarz */
}
.Schrift_Menue_gr_rot {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 text-shadow:2px 2px 2px #919191;
 font-size:20px;
 color:#ff0000;
}
.Schrift_Menue_klein {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 text-shadow:1px 1px 1px #cccccc;
 font-size:14px;
 color:#000000;     /* schwarz */
}
.Schrift_Menue_klein_blau {
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-decoration:none;
 font-weight:normal;
 text-shadow:1px 1px 1px #cccccc;
 font-size:14px;
 color:#3300cc;     /* blau */
}
.Schrift_Menue_off {
  font-family:Geneva, Arial, Helvetica, sans-serif;
  text-decoration:none;
  font-weight:normal;
  text-shadow:1px 1px 1px #cccccc;
  font-size:16px;
  color:#000000;          /* schwarz */
}
.Schrift_Menue_on {
  font-family:Geneva, Arial, Helvetica, sans-serif;
  text-decoration:none;
  font-weight:normal;
  text-shadow:1px 1px 1px #cccccc;
  font-size:16px;
  color:#009900;           /* sattgruen */
}
.Symbol {
 font-family:s4gnormal;
 text-decoration:none;
 font-weight:normal;
 font-size:20px;
 color:#009900;     /* hellgruen, alternativ #009966 oder #009933 */
 vertical-align:0px;  /* wg. eigenen Zeichensatzes */
}
.Symbol_weiss {
 font-family:s4gnormal;
 text-decoration:none;
 font-weight:normal;
 font-size:20px;
 color:#ffffff;     /* weiss */
 vertical-align:0px;  /* wg. eigenen Zeichensatzes */
}
.Symbol_m {
 font-family:s4gnormal;
 text-decoration:none;
 font-weight:normal;
 font-size:15px;
 color:#009900;     /* hellgruen, alternativ #009966 oder #009933 */
 vertical-align:0px;  /* wg. eigenen Zeichensatzes */
}
.Symbol_k {
 font-family:s4gnormal;
 text-decoration:none;
 font-weight:normal;
 font-size:10px;
 color:#009900;     /* hellgruen, alternativ #009966 oder #009933 */
 vertical-align:0px;  /* wg. eigenen Zeichensatzes */
}
.Akkord {
 font-family:s4gnormal;
 text-decoration:none;
 font-weight:normal;
 font-size:20px;
 color:#ff0000;
 vertical-align:0px;  /* wg. eigenen Zeichensatzes */
}
.Akkord_grau {
 font-family:s4gnormal;
 text-decoration:none;
 font-weight:normal;
 font-size:20px;
 color:#919191;     /* grau */
 vertical-align:0px;  /* wg. eigenen Zeichensatzes */
}
.Akkord_weiss {
 font-family:s4gnormal;
 text-decoration:none;
 font-weight:normal;
 font-size:20px;
 color:#ffffff;     /* weiss */
 vertical-align:0px;  /* wg. eigenen Zeichensatzes */
}
.Akkord_grau_hoch {
 font-family:s4gnormal;
 text-decoration:none;
 font-weight:normal;
 font-size:20px;
 color:#919191;     /* grau */
 vertical-align:0px;  /* wg. eigenen Zeichensatzes */
}
.Akkord_weiss_hoch {
 font-family:s4gnormal;
 text-decoration:none;
 font-weight:normal;
 font-size:20px;
 color:#ffffff;     /* weiss */
 vertical-align:0px;  /* wg. eigenen Zeichensatzes */
}
.Akkord_ul {
 font-family:s4gnormal;
 text-decoration:none;
 font-weight:normal;
 font-size:20px;
 color:#ff0000;
 vertical-align:0px;  /* wg. eigenen Zeichensatzes */
 background-image:url(/Basics/Fotos/Hintergrund_Akkord_geschlossen.png);
 background-repeat:repeat-x;
 background-position:bottom;
}
.Akkord_ul_grau {
 font-family:s4gnormal;
 text-decoration:none;
 font-weight:normal;
 font-size:20px;
 color:#919191;     /* grau */
 vertical-align:0px;  /* wg. eigenen Zeichensatzes */
 background-image:url(/Basics/Fotos/Hintergrund_Akkord_geschlossen.png);
 background-repeat:repeat-x;
 background-position:bottom;
}
.Akkord_hoch {
 font-family:s4gnormal;
 text-decoration:none;
 font-weight:normal;
 font-size:20px;
 color:#ff0000;
 vertical-align:0px;  /* wg. eigenen Zeichensatzes */
}
.Akkord_b {
 font-family:s4gbold;
 text-decoration:none;
 font-weight:bold;
 font-size:20px;
 color:#ff0000;
 vertical-align:0px;  /* wg. eigenen Zeichensatzes */
}
.Akkord_ul_b {
 font-family:s4gbold;
 text-decoration:none;
 font-weight:bold;
 font-size:20px;
 color:#ff0000;
 vertical-align:0px;  /* wg. eigenen Zeichensatzes */
 background-image:url(/Basics/Fotos/Hintergrund_Akkord_geschlossen.png);
 background-repeat:repeat-x;
 background-position:bottom;
}
.Akkord_ul_b_grau {
 font-family:s4gbold;
 text-decoration:none;
 font-weight:bold;
 font-size:20px;
 color:#919191;     /* grau */
 vertical-align:0px;  /* wg. eigenen Zeichensatzes */
 background-image:url(/Basics/Fotos/Hintergrund_Akkord_geschlossen.png);
 background-repeat:repeat-x;
 background-position:bottom;
}
.Ton {
 font-family:s4gnormal;
 text-decoration:none;
 font-weight:normal;
 font-size:20px;
 color:#3300cc;      /* dunkelblau */
 vertical-align:0px;  /* wg. eigenen Zeichensatzes */
}
.Ton_weiss {
 font-family:s4gnormal;
 text-decoration:none;
 font-weight:normal;
 font-size:20px;
 color:#ffffff;     /* weiss */
 vertical-align:0px;  /* wg. eigenen Zeichensatzes */
}
.Ton_ul {
 font-family:s4gnormal;
 text-decoration:none;
 font-weight:normal;
 font-size:20px;
 color:#3300cc;      /* dunkelblau */
 vertical-align:0px;  /* wg. eigenen Zeichensatzes */
 background-image:url(/Basics/Fotos/Hintergrund_Akkord_geschlossen.png);
 background-repeat:repeat-x;
 background-position:bottom;
}
.Ton_hoch {
 font-family:s4gnormal;
 text-decoration:none;
 font-weight:normal;
 font-size:13px;
 color:#3300cc;      /* dunkelblau */
 vertical-align:4px;  /* Hochstellung beim eigenen Zeichensatz */
}
.Ton_hoch_grau {
 font-family:s4gnormal;
 text-decoration:none;
 font-weight:normal;
 font-size:13px;
 color:#919191;     /* grau */
 vertical-align:4px;  /* Hochstellung beim eigenen Zeichensatz */
}
.Ton_hoch_weiss {
 font-family:s4gnormal;
 text-decoration:none;
 font-weight:normal;
 font-size:13px;
 color:#ffffff;     /* weiss */
 vertical-align:4px;  /* Hochstellung beim eigenen Zeichensatz */
}
.Ton_tief {
 font-family:s4gnormal;
 text-decoration:none;
 font-weight:normal;
 font-size:10px;
 color:#3300cc;      /* dunkelblau */
 /*font-family:s4gitalic;  fuer s/w-Displays zur Unterscheidung von Akkorden erforderlich */
 vertical-align:0px;  /* wg. eigenen Zeichensatzes */
}
.Ton_fett {
 font-family:s4gbold;
 text-decoration:none;
 font-weight:bold;
 font-size:20px;
 color:#3300cc;      /* dunkelblau */
 vertical-align:0px;  /* wg. eigenen Zeichensatzes */
}

/* 12. Zeichenabstand, Schriftweite */
.Zeichenabstand_3 {
 letter-spacing:-0.3px;
}
.Zeichenabstand_4 {
 letter-spacing:-0.4px;
}
.Zeichenabstand_6 {
 letter-spacing:-0.6px;
}
.Zeichenabstand_7 {
 letter-spacing:-0.7px;
}
.Zeichenabstand_8 {
 letter-spacing:-0.8px;
}
.Zeichenabstand_9 {
 letter-spacing:-0.9px;
}

/* 13. Ausrichtungen, Breiten-/Weitenfestlegungen */
@media screen and (orientation: landscape) { /* Notenblatt Verkleinerung, wenn Monitor im Querformat */
 .Notenblatt {
	 width:30%;
	 height:auto;
	 border:0px;
  box-shadow: 5px 5px 5px #9e9ea0; /*#5d5b86*/
  -moz-box-shadow: 5px 5px 5px #9e9ea0;
  -webkit-box-shadow: 5px 5px 5px #9e9ea0;
  -o-box-shadow: 5px 5px 5px #9e9ea0;
  border-radius: 14px;
  -moz-border-radius: 14px;
  -webkit-border-radius: 14px;
  -o-border-radius: 14px;
 }
}
@media screen and (orientation: portrait) { /* Notenblatt Normaldarstellung, wenn Monitor im Hochformat */
 .Notenblatt {
	 width:80%;
	 height:auto;
	 border:0px;
  box-shadow: 5px 5px 5px #9e9ea0; /*#5d5b86*/
  -moz-box-shadow: 5px 5px 5px #9e9ea0;
  -webkit-box-shadow: 5px 5px 5px #9e9ea0;
  -o-box-shadow: 5px 5px 5px #9e9ea0;
  border-radius: 14px;
  -moz-border-radius: 14px;
  -webkit-border-radius: 14px;
  -o-border-radius: 14px;
 }
}
.Text_mitte {
  text-align:center;
}
.Text_rechts {
  text-align:right;
}
.Doppelpfeil {
 vertical-align:text-top;
}
.Foto_mitte,
.Bild_mittig {
  vertical-align:middle;
}
.Foto_oben,
.Bild_oben {
  vertical-align:top;
}
.Foto_unten,
.Bild_unten {
  vertical-align:bottom;
}
.Tabellenzelle_top {          /* in Symbolik */
 vertical-align:top;
}
.Tabelle_User {          /* in Stellwerk (user.php) */
 width: 150px;
 line-height:46px;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 background-color:#fff;
}
.Tabelle_Mitte {
 margin-left:auto;
 margin-right:auto;
}
.Zelle_zentriert {
 text-align:center;
}
.Symbol_bend {          /* fuer den Doppelpfeil */
 vertical-align:bottom;
}
.Zeile_allg_Erklaerung { /* fuer Bemerkungen unter dem Sontext */
 border-collapse:collapse;
	max-width:99%;
 margin-left:0.5%;
 margin-right:0.5%;
}
.Teil_Symbol {                  /* statt align im Quelltext der Seite*/
 vertical-align:middle;
 width:16px;
 height:16px;
}
.Menue_10_8 {      /* Spaltenbreite in der Hauptmenuezeile */
 width:10.8%;
}
.Menue_14_3 {      /* Spaltenbreite in der Hauptmenuezeile */
 width:14.3%;
}
.Menue_16 {        /* Spaltenbreite in der Hauptmenuezeile */
 width:16%;
}
.Breite_33 {
 width:33%;
}
.Breite_34 {
 width:34%;
}
.Breite_36px {
  width:36px;
}
.Breite_98 {
  width:98%;
}
.Spalte_100 {
 width:100%;
}
.flex { /* z.B. um Bilder im DIV zu zentrieren */
 display: flex; 
 justify-content: center; 
 align-items: center;
}

/* 14. Formatierungen fuer Songs_in_Listen */
.SZ,
.Titel_aussen {
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 width:99%;
 min-width:99%;
 /* background-color:#FFF;    wg Scrollen in eigenen Listen */
}
.SZ_Zeile {
 line-height:0.6em;
}
.SZ_YinYang {
 width:24px;     
 min-width:24px;
 text-align:center;
 font-size:10px;
}
.Spalte_Titel {
 text-align:left;
 vertical-align:bottom;
}
.Spalte_Linie {
 background-image:url(/Basics/Fotos/Linie_Inhalt.jpg);
 background-repeat:repeat-x;
 background-position:bottom;
}
.Spalte_Listenname,
.Spalte_Linie {
 width:100%;
 min-width:100%;
 overflow:hidden;
}
.Spalte_Linie_Dummy {
 width:100%;
 min-width:100%;
}
.Spalte_Nummer {
 width:44px;
 min-width:44px;
 text-align:right;
 vertical-align:bottom;
}
.Spalte_YinYang {
 width:20px;     
 min-width:20px;
 vertical-align:bottom;
 /*text-align:center;*/
}
.Spalte_Icon {
 width:21px;
	vertical-align:top;
 /*vertical-align:bottom;*/
}

/* 17. Login-Box */
.LoginBox {
    position:relative;
    top: 160px;
    margin: 0px auto;
    z-index:100;
    width:35%;
    height:226px;
    background-color:#fff;
    box-shadow: 1.5px 1.5px 3px 0.5px #9e9ea0; /*rgba(91,93,134,1);*/
    -moz-box-shadow: 1.5px 1.5px 3px 0.5px #9e9ea0;
    -webkit-box-shadow: 1.5px 1.5px 3px 0.5px #9e9ea0;
    -o-box-shadow: 1.5px 1.5px 3px 0.5px #9e9ea0;
    border-radius: 16px;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    -o-border-radius: 16px;
    padding:8px;
}

/* 18. Sonstiges, dessen Sinn mir am 10.1.23 nicht mehr einleuchtete */
.Text_Titelseite {
     font-family: Geneva, Arial, Helvetica, sans-serif;
     font-size:19px;
     color:#cccccc;
     text-decoration: none;
     font-weight:normal;
     text-shadow:none;
     text-align:justify;
}
.Songliste_Hintergrund {
  background-image: url("/Basics/Fotos/Nordseefreunde_Songliste_8.jpg");
		background-size:95%;
  background-repeat: no-repeat;
		background-position: center top;
}
.Titelblatt {
    position:absolute;
    margin-left:0.5%;
    margin-right:0.5%;
    top: 45px;
    width: 99%;
    z-index:1;
}
.Liste_wechseln {
  width:80%; 
  min-width:80%;
}
.input:focus {
  outline:none;
}

/* 19. CSS fuer die lightbox (pop-up-Einblendungen) */
body:after {
  content:url("/Safe/Allgemeines/Bilder/Pixel_weiss.jpg");
  display:none;
}
.lightboxOverlay {
  position:absolute;
  top:0;
  left:0;
  z-index:9999;
  background-color:white;
  /* filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80); */
  opacity:0.3;
  display:none;
}
.lightbox {
  position:absolute;
  left:0;
  width:100%;
  z-index:10000;
  text-align:center;
  line-height:0;
  font-weight:normal;
}
.lightbox a img {                                       
   border:none;
}
.lightbox .lb-image {
  display:block;
  height:auto;
  max-width:inherit;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  -ms-border-radius:3px;
  -o-border-radius:3px;
  border-radius:3px;
 box-shadow: 8px 8px 8px 0px rgba(214,211,214,1);
 -moz-box-shadow:8px 8px 8px 0px rgba(214,211,214,1);
 -webkit-box-shadow:8px 8px 8px 0px rgba(214,211,214,1);
 -o-box-shadow:8px 8px 8px 0px rgba(214,211,214,1);
}
.lb-outerContainer {
  position:relative;
  background-color:white;
  /* *zoom:1; */
  width:250px;
  height:250px;
  margin:0 auto;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  -ms-border-radius:4px;
  -o-border-radius:4px;
  border-radius:4px;
}
.lb-outerContainer:after {
  content:"";
  display:table;
  clear:both;
}
.lb-container {
  padding:4px;
}
.lb-loader {
  position:absolute;
  top:43%;
  left:0;
  height:25%;
  width:100%;
  text-align:center;
  line-height:0;
}
.lb-cancel {
  display:block;
  width:1px;
  height:1px;
  margin:0 auto;
  background:url("/Safe/Allgemeines/Bilder/Pixel_weiss.jpg") no-repeat;
}
.lb-nav {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  z-index:10;
}
.lb-container > .nav {
  left:0;
}
.lb-nav a {
  outline:none;
  background-image:url("/Safe/Allgemeines/Bilder/Pixel_weiss.jpg");
}
.lb-prev, .lb-next {
  height:100%;
  cursor:pointer;
  display:block;
}
.lb-nav a.lb-prev {
  width:34%;
  left:0;
  float:left;
  background:url("/Safe/Allgemeines/Bilder/Pixel_weiss.jpg") left 48% no-repeat;
  /* filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); */
  opacity:0;
  -webkit-transition:opacity 0.6s;
  -moz-transition:opacity 0.6s;
  -o-transition:opacity 0.6s;
  transition:opacity 0.6s;
}
.lb-nav a.lb-prev:hover {
  /* filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); */
  opacity:1;
}
.lb-nav a.lb-next {
  width:64%;
  right:0;
  float:right;
  background:url("/Safe/Allgemeines/Bilder/Pixel_weiss.jpg") right 48% no-repeat;
  /* filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); */
  opacity:0;
  -webkit-transition:opacity 0.6s;
  -moz-transition:opacity 0.6s;
  -o-transition:opacity 0.6s;
  transition:opacity 0.6s;
}
.lb-nav a.lb-next:hover {
  /* filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); */
  opacity:1;
}
.lb-dataContainer {
  margin:0 auto;
  padding-top:5px;
  /* *zoom:1; */
  width:100%;
  -moz-border-radius-bottomleft:4px;
  -webkit-border-bottom-left-radius:4px;
  border-bottom-left-radius:4px;
  -moz-border-radius-bottomright:4px;
  -webkit-border-bottom-right-radius:4px;
  border-bottom-right-radius:4px;
}
.lb-dataContainer:after {
  content:"";
  display:table;
  clear:both;
}
.lb-data {
  padding:0 4px;
  color:#000000;
}
.lb-data .lb-details {
  width:85%;
  float:left;
  text-align:left;
  line-height:1.1em;
}
.lb-data .lb-caption {  /* Ueberschrift in der Box */
  font-family:s4gnormal;
  font-size:35px;
  font-weight:normal;
  color:#009966;
  /* line-height:1 em; */
  text-shadow:2px 2px 4px #919191;
}
.lb-data .lb-number {
  display:block;
  clear:left;
  padding-bottom:1em;
  font-size:12px;
  color:#999999;
}
.lb-data .lb-close {
  display:block;
  float:right;
  width:0px;
  height:0px;
  background:url("/Safe/Allgemeines/Bilder/Pixel_weiss.jpg") top right no-repeat;
  text-align:right;
  outline:none;
  /* filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70); */
  opacity:1.0;
}
.lb-data .lb-close:hover {
  cursor:pointer;
  /* filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); */
  opacity:1;
}

/* Cookie-Hinweis */
 
  /* Haupt-Container */
.cookie-notice-container {
     font-family: Geneva, Arial, Helvetica, sans-serif;
     font-size: 14px;
     color:#000000;
     text-decoration: none;
  background: #f4ffca; 
  position:fixed;
  bottom:3px;
  left:4px; 
  right:6px;
  z-index:20; 
  line-height:24px;
 text-align:center;
  color: #000070; /* ehem. 000033 */
  box-shadow: 1.5px 1.5px 3px 0.5px #9e9ea0; /*rgba(91,93,134,1);*/
  -moz-box-shadow: 1.5px 1.5px 3px 0.5px #9e9ea0;
  -webkit-box-shadow: 1.5px 1.5px 3px 0.5px #9e9ea0;
  -o-box-shadow: 1.5px 1.5px 3px 0.5px #9e9ea0;
  border-radius: 16px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
  -o-border-radius: 16px;
}
 
  /* Button-Container */
.cookie-notice-buttons {
 margin-top:8px;
 margin-bottom:8px;
 text-align:center;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  text-decoration: none;
  font-size: 0.75rem; /* = 12/16 px */
}
 
  /* Ok-Button */ 
.cookie-notice-button-accept{
  background: #919191;
  margin: 0px;
  padding:0px;
  padding-left:auto;
  padding-right:auto;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  text-decoration: none;
  font-size: 0.875rem; /* = 14/16 px */
  color: #ffffff;
  font-weight:bold;
  box-shadow: 1.5px 1.5px 3px 0.5px #9e9ea0; /*rgba(91,93,134,1);*/
  -moz-box-shadow: 1.5px 1.5px 3px 0.5px #9e9ea0;
  -webkit-box-shadow: 1.5px 1.5px 3px 0.5px #9e9ea0;
  -o-box-shadow: 1.5px 1.5px 3px 0.5px #9e9ea0;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -o-border-radius: 6px;
}
/* Ende Cookie-Hinweis */