﻿/* MEILI//variomedia/remse.eu.css 2026-02-13 */

@page {
  margin: 0;
  size:   portrait;
}
* {
  box-sizing: border-box;
  hyphens:    auto;    /* Silbentrennung */
}
*::placeholder {
  color:      #888;
  font-style: italic;
  font-size:  80%;
}



/* ------------------------
 * Seitenlayout
 * ------------------------ */
html {
  background:   #eee;
}

body {
  font-family:  serif;
  background:   #fff;
  position:     relative;
  font-size:    12pt;
}
@media screen {
  body {
  margin:         5px auto 1em auto;
  width:          100%;
  max-width:      210mm;
  min-height:     290mm;
  margin-left:    auto;
  margin-right:   auto;
  border-radius:  5px;
  padding:        5px;
  }
}
@media print {
  body {
  height:     290mm;
  margin:     5mm 10mm;
  }
}


header {
  position:       relative;
  min-height:     1em;
  padding-bottom: .2em;
  border-bottom:  2px solid red;
  margin-bottom:  .5em;
}
header p {
  margin-bottom: 0;
  font-size:     80%;
}
header p:nth-of-type(1) {
  float: left;
}
header p:nth-of-type(2) {
  text-align:   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;
}

footer {
  position:     absolute;
  left:         5px;
  right:        5px;
  bottom:       5px;
  height:       1.5em;
/*background:   rgba(255,255,127,.7); */
  margin-top:   .5em;
  border-top:   2px solid red;
  padding-top:  .5em;
}
footer p {
  position:       absolute;
  bottom:         0;
  margin-bottom:  0;
  font-size:      80%;
}
footer p:nth-of-type(1) {
  left:         0;
}
footer p:nth-of-type(2) {
  right: 0;
}


.tonarten img { /* 2024-07-22 */
  height: 10em;
  height: 8em;
}

@media screen {
  .text {
    font-size:  100% ! important;
  }
} 

@media print {
  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:nth-of-type(1) {
    left:       0;
  }
  footer p:nth-of-type(2) {
    right:      0;
  }
}

/* ================== */
/* BUTTONS            */
/* ================== */
.abbrechen {
  font-family:     arial,sans-serif;
  background-color:#ccc!important;
  font-weight:     bold;
  color:           #f00;
}
.aen {
  font-family:     arial,sans-serif;
  background-color:#ff0!important;
  font-weight:     bold;
  color:           #00a;
}
.neu {
  font-family:     arial,sans-serif;
  background-color:#0f0!important;
  font-weight:     bold;
  color:           #000;
}
.subm_gr {
  width:          100%;
  font-weight:    bold; 
  padding:        5px;
  border-radius:  5px;
  margin-top:     5px;
}
.suc {
  font-family:     arial,sans-serif;
  background-color:#aaf;
  font-weight:     bold;
  color:           #000;
}





/* AAA */
.arial {
  font-family:  arial, sans-serif;
}

/* B */
.bghgrau {
  background: #eee;
}

.nodisplay {
  display: none;
}
.nowrap {
  white-space:  nowrap;
}


/* ************************************* */
@media print {
  html {
    background: #fff;
  }
  a {
    color: #00f;
  }
  audio, .screen {
    display:    none ! important;
    visibility: hidden;
  }
  .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;
  }

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



/* ********************
 * 
 * Abmessungen fuer A4
 * 
 * ******************** */
.bggelb {
  background-color: #ff0;
}

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

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

/* *B */
.bold {
  font-weight:  bold;
}

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

/* FFF */
.fehler {
  background: #ff0;
  color:      #f00;
  padding:    5px;
}

/* *H */
 
h1, h2, h3 {
  margin:       0 0 0.2em 0;
  font-weight:  normal;
  font-family:  sans-serif;
}
h1 {
  font-size:      150%;
  _order-bottom:  2px solid #f00;
  _olor:          #00c;
  padding-bottom: .2em;
}
h2 {
  font-size: 130%;
}
h3 {
  font-size: 110%;
}
.help img, img.help {   /* help-icon */
  height:         1.2em;
  cursor:         help;
  vertical-align: middle;
}
.hinweis {
  background: #0f0;
  padding:    5px;
}
hr {
  height:   2px;
  margin:   0;
  color:    red;
}


/* *I */
.ic    { height: 1.2em; }
.ic_kl { height: 0.9em; }
.ic_gr { height: 1.7em; }



/* LL
   LL
   LL
   LL
   LLLLLL
*/

/* M */
.monospace {
  font-family:  monospace ! important;
}

/* N */
.neue_pos::before {   /* 2025-07-07 */
  content:      "●";
  color:        #0c0;
}
.nicht-i {
  font-style: normal;
  color:      #000;
}


bem, .bem {
  font-size:    80%;
  color:        #f00;
  font-weight:  normal;
  font-style:   normal;
  font-family:  sans-serif ! important;
}
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 .5em 0;
}
p.akkorde {
  margin-left:  1em;
  font-family:  monospace ! important;
}
p.akkorde b {
  display:      inline-block;
  position:     relative;
  white-space:  nowrap;
}
p.akkorde b b {
  display:      inherit;
  display:      inline-block;
  position:     absolute;
  left:         -.2em;
  bottom:       .7em;
  height:       1em;
  white-space:  nowrap;
  font-family:  akkorde_1;  /* 2025-09-29 */
  font-weight:  normal;
  color:        #f00;
  font-size:    100%;
  z-index:      2;
  background:   #ffa;
  background:   rgba( 255,255,255,.5);
}
p.refrain {
  text-indent: 0;
  font-style: italic;
  color: #08f;
  font-weight: bold;
}
p l {
  display:      inline-block;
  margin-left:  -1em;
  width:        1em;
}


/* *S */
.samstag {
  color:  #0a0;
}
.sonntag {
  color:  #f00;
}


/* TTTTTTTT
      TT
      TT
      TT
      TT    */
table.liste {
  border-collapse:  collapse;
  empty-cells:      show;
  margin-bottom: .5em;
}
table.liste td {
  border:            1px solid #ccf;
  padding:           5px;
  vertical-align:    top;
}
table.liste thead {
  position: sticky;   /* bleibt beim Scrollen am oberen Rand kleben */
  z-index: 10;
  top: 0;
  background-color: #fe0;
  background-color: rgba( 255,239,0,.7);
  
}
table.liste thead td, table.liste thead th {
  border: 1px solid #aaf;
  padding: 5px;
/*text-align: left;   /* wg. th */
}
/* 2023-03-05
table.liste thead td:before, table.liste thead th:before {  /* Bugfix: sticky loescht border //
  content: '';
  display: block;
  margin-top: -6px;
  margin-bottom: 5px;
  border-top: 1px solid #aaf;
}
*/
table.liste tbody tr:nth-of-type(even) {
  background-color: rgba(196,196,196,.6);
  background-color: #eee;
}
._text {
  overflow:     hidden;
  padding-top:  .5em;   /* Platz für Akkorde */
}
#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;
}
.taktstrich {
  color:      #888;
  font-style: normal; /* im Refrain NICHT italic */
}
.vP { /* 2024-04-09 viertel Pause */
  font-weight:    normal;
  font-style:     bold;
  color:          #f00;
  font-size:      140%;
  font-family:    monospace;
  vertical-align: bottom;
}
.vP:after {
  display:        inline-block;
  width:          .3em;
  content:        " ";
}
.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;
}
.ls-1, ls-1 {
  letter-spacing: -.05em;
}
.ls-2, ls-2 {
  letter-spacing: -.1em;
}
.ls-3, ls-3 {
  letter-spacing: -.15em;
}
.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:  4em;
}
.qrc img {
  display:  block;
  width:    100%;
}
.re {
  float: right;
  margin: 0 0 0.5em 0.5em;
}
.remso {
/*background-image:     url("http://remso.eu/img/logo_remso.png"); */
  background-image:     url("../img/logo_remso.png");  /* aus der Sicht von basis26.css */
  background-repeat:    no-repeat;
  background-position:  left bottom;
  background-size:      1.5em 1.5em; /* width height */
  font-family:          sans-serif;
  letter-spacing:       0.1em;
  padding-left:         1.8em;
  color:                #f00;
}

img.rgnbgn {
  display:        block;
  width:          100%;
  height:         1px;
  margin-top:     .2em;
  margin-bottom:  .2em;
}
.ro {
  text-align: right;
}
time {
  cursor:   pointer;
}
time.inline {
  display:  inline-block;  /* wg. background-color */
}

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

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

/* ENDE */
