/* meili//kalle/karaoke/css/basis_a4.css 2023-11-11 */

@page {
  margin: 0;
  size:   portrait;
}
/* fuer die Akkorde **
@font-face {
  font-family: 'EuroPlate';
  src: url('EuroPlate.ttf') format('truetype');
}
.EuroPlate {
  font-family: 'EuroPlate';
}
*/
/* fuer die Akkorde */

* {
  box-sizing: border-box;
  hyphens: auto;    /* Silbentrennung */
}
html {
  background:   #eee;
  height:       100vh;
}
:root {
  scroll-behavior:smooth;
}


/* B */
body {
  width:          205mm; 
  max-width:      calc( 100% - 4em );  /* linker / rechter Heftrand */
  max-width:      100%;
  margin-left:    auto;
  margin-right:   auto;
  height:         99vh;
  height:         290mm;
  font-size:      12pt;
  font-family:    serif;
  background:     #fff;
  position:       relative;
  min-height:     99vh;   /* iframe wird sonst nicht voll genutzt  a4_kalles_liederbuch*/
  padding-left:   10mm; /* Heftrand */
  padding-right:  10mm;
/*
  border:       1px solid red;
  padding-top:  5mm; /* Heftrand //
*/
}


.a4_hoch {
  position: relative;
  width: 205mm;
  height: 294mm;
  height: 290mm;
  padding-top: 3mm;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  page-break-after: always;
  background: #fff;
}
.a4_hoch:last-child {
  page-break-after: avoid;
}
.a4_hoch:nth-of-type(odd) {
  padding-left: 15mm;
  padding-right: 0;
  padding-right: 5mm;
}
.a4_hoch:nth-of-type(even) {
  padding-left: 0;
  padding-left: 5mm;
  padding-right: 15mm;
}
.fehler {
  background: #ff0;
  color: #a00;
  padding: 5px;
}
.hinweis {
  background: #afa;
  padding: 5px;
}
.nodisplay {
  display: none;
}


/* ************************************* */
@media print {
  html {
    background: #fff;
  }
  a {
    color: #00f;
  }
  audio, .screen {
    display:    none ! important;
    visibility: hidden;
  }
  .a4_hoch {
    border: .1pt solid #fff; /* zum Aufspannen */
  }
  .screen {
    display:  none;
  }
} /* @media print */



/* ************************************* */
@media screen {
  .print {
    display: none ! important;
  }
  html {
    background: #eee;
  }

  a {
    border-bottom: 1px solid #00a;
  }
  a:hover {
    background: #afa;
    border-bottom: 1px solid #f00;
  }
/*
  audio {   /* wenn nicht in h1 **
    display: block;
    width: 100%;
    height: 1.5em;
    opacity: .6;
    border-radius: 5px;
    margin-bottom: .2em;
  }
*/
  h1 audio {
    display: block;
    width: 100%;
    height: 1em;
    opacity: .6;
    border-radius: 5px;
    margin: .2em 0;
  }
  iframe body {
    overflow: hidden;
  }
  :target {
    color: #f00;
    background-color: #ffa;
  }
  .a4_hoch {
    margin-bottom: 1em;
  }
  .print {
    display:  none;
  }
} /* screen */



/* *****************************************
 * 
 * Trennlinie zwischen A3 Blatt 1 / Blatt 2
 * 
 * ***************************************** */
#teil1 {
  padding-bottom: .5em;
  border-bottom: 2px dotted #000;
  margin-bottom: 1em;
}

/* ********************
 * 
 * Abmessungen fuer A4
 * 
 * ******************** */
.bggelb {
  background-color: #ff0;
}
footer {
  position:   absolute;
  left:       2.5em;
  right:      2.5em;
  min-height: 1em;
  bottom:     .5em;
  border:     1px dashed #fff;
  z-index:    3;           /* Text vor die Noten, aber hinter footer */
  font-weight: normal;
}

footer p {
  position: absolute;
  bottom: 0;
  margin-bottom: 0;
  background: rgba(255,255,255,.7);
}
footer p:nth-of-type(1) {
  left:         0;
  font-family:  monospace;
}
footer p:nth-of-type(2) {
  right: 0;
}

/* A */
a {
  text-decoration: none;
}
audio {
  display:        block;
  width:          100%;
  height:         1.5em;
  opacity:        .6;
  border-radius:  5px;
  margin-bottom: .2em;
}

iframe {
  width: 100%;
  height: 100%;
  border: thin solid #fff;
  overflow: hidden;
}

div#anzahl_markierte { /* Zaehler fuer markierte Positionen 2016-05-28 */
  display: none;
  position: fixed;
  right: 10px;
  bottom: 10px;
  background-color: rgba(255,255,127,0.6);
  padding: 5px;
  border: 1px solid #000;
}


/* E */
.external {
  background-image:    url(../img/external.png);
  background-repeat:   no-repeat;
  background-position: center right;
  padding-right:       13px;
}


/* *H */
 
h1, h2, h3 {
  margin:       0 0 0.2em 0;
  font-weight:  normal;
  font-family:  sans-serif;
}
h1 {
  font-size:    170%;
  text-align:   center;
  border-bottom: 2px solid #f00;
  color: #00c;
}
h3 {
  font-size: 110%;
}
hr {
  margin: 1em;
  color: #0ff;
}

header {
  position: relative;
  min-height: 1em;
}
header p {
  margin-bottom: 0;
}
header p:nth-of-type(1) {
  float: left;
}
header p:nth-of-type(2) {
  float: right;
/*margin-right: 2em; /* Platz lassen für das Noten-Icon */
  text-align: right;
  font-size: 100%;
  font-size: 80%;
  font-family: monospace;
}
header::after {
  content: "";
  display: block;
  clear: both;
  height: .5em;
  border: 1px solid transparent; /* zum Aufspannen */
}
/*
#inhalt ul {
  list-style: none;
  margin: 0 0 1em 0;
  padding: 0;
  font-size: 150%;
}
#inhalt li {
  position: relative;
  margin: 0 0 .2em 0;
  padding: 0;
  line-height: 105%;
  border-bottom: .1pt dotted #0a0;
}
#inhalt li i {
  position: absolute;
  display: block;
  top: 0;
  right: 2em;
  width: 2em;
  text-align: right;
  font-size: 80%;
  color: #a00;
}
#inhalt li a {
  position: absolute;
  display: block;
  border-bottom: none;
  top: 0;
  width: 2em;
  text-align: right;
  right: 0;
  font-size: 100% ! important;
  z-index: 2;
}
#inhalt li:first-letter {
  display: inline-block;
  font-family: sans-serif;
  color: #08f;
  margin-right: 2px;
}
*/
.help {
  cursor: help;
}
.help img, img.help {   /* icon_info.png */
  height: .8em;
  cursor: help;
  vertical-align: middle;
}
img.ic, img.ic_kl, img.ic_gr {
  border: none;
  vertical-align: middle;
}
img.ic { height: 1.2em; }
img.ic_kl { height:0.9em; }
img.ic_gr { height:1.7em; }
.icon_audio {   /* <a href */
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-image: url("../img/icon_audio.png");  /* relativ zu css/ */
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 1.5em 1.5em;
  background-size: 100% 100%;
  text-decoration: none;
  border-bottom: none;
}
.icon_midi {   /* <a href */
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-image: url("../img/icon_midi.png");  /* relativ zu css/ */
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 1.5em 1.5em;
  text-decoration: none;
  border-bottom: none;
}
.icon_musescore {   /* <a href */
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-image: url("../img/icon_musescore.png");  /* relativ zu css/ */
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 1.5em 1.5em;
  text-decoration: none;
  border-bottom: none;
}
.icon_noten {   /* <a href */
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-image: url("../img/icon_noten_rot.png");  /* relativ zu css/ */
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 1.5em 1.5em;
  text-decoration: none;
  border-bottom: none;
}
.monospace {
  font-family:  monospace ! important;
}
bem, .bem {
  font-size:    80%;
  color:        #f00;
  font-weight:  normal;
  font-style:   normal;
}
bem::before {
  content: "[";
}
bem::after {
  content: "]";
}
solo {
  font-size: 80%;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
}
chor {
  font-size: 80%;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
}

/* **************************
 *    Absaetze
 * ************************** */
p {
  margin: 0 0 0.7em 0;
/*line-height: 1.3em; 2023-09-03*/
  font-family: times;
}
/* 2023-10-12
p.akkorde {
  line-height: 130%!important;
}
*/
.akkorde b {
  display:      inline-block;
  position:     relative;
  white-space:  nowrap;
}
@font-face {
  font-family: 'ms_regular';
  src: url("FE Mittelschrift Regular.otf"); format('opentype'); /* im selben Ordern wie basis_a4.css */
}
.ms_regular {
  font-family: 'ms_regular';
}
.akkorde b b {
  display:      inherit;
  position:     absolute;
  white-space:  nowrap;
  left:         -.5em;
  left:         0;
  bottom:       .3em;
  font-family:  monospace;
  font-family:  ms_regular;
  font-weight:  normal;
  color:        #f00;
  font-size:    80%;
  font-size:    100%;
  z-index:      2;
}
/*
p.refrain,
#text p.refrain,
.text p.refrain {
*/
p.refrain {
  text-indent: 0;
  font-style: italic;
  color: #08f;
  font-weight: bold;
}

#noten {
  width: 100%;
  min-width: 40em;
  overflow-y: hidden;
  page-break-before: avoid;
}
#noten img {
  width: 100%;
}

/* TTTTTTTT
      TT
      TT
      TT
      TT    */
#text::before {
  display: block;
  margin-top: .2em;
  height: .1em;
  margin-bottom: .5em;
  background: #fff;
  content: "";
  border-top: .1pt dashed #aaa;
  border-bottom: .1pt dashed #aaa;
}
#text {                 /* wenn oberhalb Noten gezeigt werden */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: 1em;  /* Noten abdecken */
  min-height: 1em;
  background: #fff;     /* Noten abdecken */
  z-index: 2;           /* Text vor die Noten, aber hinter footer */
  padding-bottom: 30mm; /* QRC nicht abdecken */
  padding-bottom: 1.5em;
}
/* 2014-08-31
#text>p,
.text>p {
  margin-left: 1em;
}
*/
#text p,
.text p {
  margin-left: 1em;
}
#text p:last-child,
.text p:last-child {
  margin-bottom: 0;   /* Platz wird fuer Noten benoetigt */
}
#text p i,
.text p i {           /* im Text: Alle singen */
  font-weight: bold;
  color: #08f;
}
#text p l,
.text p l {
  display:      inline-block;
  margin-left:  -1em;
  width:        1em;
}
/*
p.akkorde span {white-space:nowrap}
p .bemerkung, p.bemerkung {
  font-family: sans-serif !important;
  font-style: italic !important;
  font-weight: normal !important;
  letter-spacing: 0 !important;
}
.translate, trans {
  margin-left: 2em;
  font-size: 70%;
  color: #080;
  font-style: italic;
}
*/
table.liste {
  border-collapse:  collapse;
  empty-cells:      show;
}
table.liste td {
  border:            .1pt solid #ccf;
  padding:           0 5px 0 5px;
  vertical-align:    top;
}
table.liste thead {
  background-color: #fc0;
}
table.liste thead td {
  border: .1pt solid #aaf;
  padding: 5px;
}
table.liste tbody tr:nth-of-type(even) {
  background-color: #eee;
}
.taktstrich {
  color:      #888;
  font-style: normal; /* im Refrain NICHT italic */
}
.vP { /* 2024-04-09 viertel Pause */
  display:        inline-block;
  font-weight:    normal;
  font-style:     normal;
  color:          #f00;
  font-size:      100%;
  font-family:    monospace;
  vertical-align: bottom;
}
.vP:after {
  display:        inline-block;
  width:          .3em;
  content:        " ";
}

#regie {                  /* 2018-02-10 */
  position: absolute;
  display: block;
  right: .1%;
  width: 5mm;
  top: 5%;
  height: 25mm;
  z-index: 2;
}
#regie a {
  display: block;
  width: 5mm;
  height: 5mm;
  background-size: 100% 100%;
  opacity: .5;
}
.arial {font-family:arial,sans-serif}
.bghgelb {
  background: #ffc;
}
.bo {
  padding: 5px;
  border: 1px solid #aaf;
  border-radius: 5px;
}
.bo.bghgelb {
  margin-bottom:  .5em;
}
.button {
  padding: 5px;
  background: #ccc;
  border: 1px solid #aaf;
  cursor: pointer;
}
.button:active {
  background: #ccf;
}
.clear {clear:both}
.co {
  text-align: center;
}
.courier {
  font-family: 'courier new', courier;
}
.cur_pointer {
  cursor: pointer;
}
.em08 {font-size:80%}
.em12 {font-size:120%}
.li {
  float: left;
  margin-right: .5em;
  margin-bottom: .5em;
}
.ls2 {
  letter-spacing: .2em;
}
.mb00 {margin-bottom:0}
.mb05 {margin-bottom:0.5em}
.ml20 {margin-left:2em}
.ml40 {margin-left:4em}
.pos_karaoke {    /* 2025-04-16 */
  background-color: #Ff0!important;
}
.pos_markiert {
  background-color: #0f0!important;
}
.qrc {
  width:  25mm;
  width:  3.5em;
}
.qrc img {
  display:  block;
  width:    100%;
}
.re {
  float: right;
  margin: 0 0 0.5em 0.5em;
}
.ro {
  text-align: right;
}
time {
  cursor:   pointer;
}
time.inline {
  display:  inline-block;  /* wg. background-color */
}
.tonarten img { /* 2024-07-22 */
  height: 8em;
}

/* 2024-09-16 Akkorde-Test */
x-a {
  white-space:  nowrap;
}

/* ****************
 * Sprachen
 * **************** */
de { color: #00a!important; }
en { font-style: italic; color: #a00!important; }

/* ENDE */