/* *****************************************************************************
 * Filename: fptab.css
 * Owner: Alvin McGovern
 * Author: Alvin Orzechowski, MyFirstWebPage.net
 * Date: Thu May 21 2020
 * Revised: Sat Feb 25 2023
 * ****************************************************************************** */ 
 
/* ----------------------------------------------------------------------------
 * Fingerpicking Tab (fptab) css
 * ---------------------------------------------------------------------------- */
 
/* ----------------------------------------------------------------------------
 * CSS Custom Properties
 * ---------------------------------------------------------------------------- */
 :root {
   --string-box-size: 1.6em;
 }
  
/* -----------------------------------------------------------------------------
 * HTML tags
 * ----------------------------------------------------------------------------- */

em, .is-italic {
  font-style: italic;
}
strong, .is-bold {
  font-weight: bold;
}


/* -----------------------------------------------------------------------------
 * Ids
 * ----------------------------------------------------------------------------- */

#rhythm_example, .rhythm_example, .mono {
 font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
}
#rhythm_example, .rhythm_example table, #rhythm_example table {
  border-collapse: separate;
  border-spacing: 0;
}
.rhythm-pattern-examples {
  border-collapse: separate;
  border-spacing: 1em 0;
}
#rhythm_example th, .rhythm_example th {
  /* border: 1px solid #999999; */
  font-size: 1.25em;
}
#rhythm_example td, .rhythm_example td {
  /* border: 1px solid #999999; */
  height: 1.5em;
  width: 1.5em;
  text-align: center;
  font-weight: bold;
  font-size: 1.15em;
}
#rhythm_example td.end-bar, .rhythm_example td.end-bar {
  /* border: 1px solid #999999; */
  width: 3px !important;
}


/* -----------------------------------------------------------------------------
 * classes
 * ----------------------------------------------------------------------------- */

.whole-note, .half-note, .quarter-note, .quarter-note-rest, .eighth-notes-left, .eighth-notes-right {
  background-repeat: no-repeat;
}
.whole-note, .half-note, .quarter-note, .quarter-note-rest {
  background-position: center;
  background-size: 1.5em;
  width: 2em;
}
.bar, .end-bar {
  border-left: 2px solid #000000;
}
.whole-note {
  background-image: url("images-fptab/note_whole-note_1x1.png");
}
.half-note {
  background-image: url("images-fptab/note_half-note_1x1.png");
}
.quarter-note {
  background-image: url("images-fptab/note_quarter-note_1x1.png");
}
.quarter-note-rest {
  background-image: url("images-fptab/note_quarter-note-rest_1x1.png");
}
.eighth-notes {
  width: 4em;
}
.eighth-notes-td {
  min-width: 1em;
}
.eighth-notes-left {
  background-image: url("images-fptab/note_eighth-note-pair-left_1x1.png");
  background-position: right;
  background-size: 1.5em;
  width: 2em;
}
.eighth-notes-right {
  background-image: url("images-fptab/note_eighth-note-pair-right_1x1.png");
  background-position: left; 
  background-size: 1.5em;
  width: 2em;
}

.center {
  text-align: center;
}
.patternTD, .patternTDb {
  padding: 0.5em;
}
.patternTDb {
  border: 1px solid #999999;
}
      
.chordName {
  border: 0px solid #999999;
  padding-left: 0.3em;
  text-align: left;
}
      
.string {
  background-image: url("images-fptab/circle 24x24.png");
  background-position: center;
  background-repeat: no-repeat;
  /* background-size: 1.5em; */
  width: 25px;
}

.stringTD {
  text-align: center;
  vertical-align: top;
}
.string-box {
  width: var(--string-box-size);
  height: var(--string-box-size);
  position: relative;
  margin: 0 auto;
}

.string-number {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  padding: 0.25em;
  text-align: center;
  border: 2px solid black; 
  height: 50%;
  border-radius: 50%;
  /* -moz-border-radius: 50%; */
  -webkit-border-radius: 50%;
  width: 50%;
}
      
.high-string {
  padding-top: 0.5em;
}

.cl-name {
  font-weight: normal;
}

.circle {
    /* background-color:#fff; */
    border: 2px solid black; 
    height: 50%;
    border-radius: 50%;
    /* -moz-border-radius: 50%; */
    -webkit-border-radius: 50%;
    width: 50%;
}