#tonality-title p { text-align: center; padding-left: 8px; padding-right: 4px; }
#style p { width: 80px; font-size: .8em; text-align: center; }

#tonality-selector td { border-collapse: collapse; }
#tonality-selector .alt {
    text-align: center;
    font-family: sans-serif;
    font-weight: bold;
    font-size: .8em;
    vertical-align: bottom;
}
#tonality-selector div { float: left; overflow: hidden; border:0 }
#tonality-selector button {
    color: white;
    width: 48px;
    height: 28px;
    font-size: large;
    font-weight: bold;
    border: none;
}
#tonality-selector button.major    { background-color: #555; }
#tonality-selector button.minor    { background-color: #777; }
#tonality-selector button.generic
{
    background-color: #d3d3d3;
    color: white;
    width: inherit;
    height: inherit;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 1em;
}
#tonality-selector button.style {
    background-color: #d3d3d3;
    color: white;
    min-width: 65px;
    height: 20px;
    padding-left: 4px;
    padding-right: 4px;
    margin-bottom: 1px;
    margin-left: 10px;
    font-size: .7em;
    text-align: center;
}

#tonality-selector button.page {
    border-radius: 8px;
    background-color: lightslategray;
    color: white;
    width: 46px;
    height: 28px;
    text-align: center;
    font-family: Verdana, sans-serif;
    font-weight: bold;
}
#tonality-selector button.page.interactive { color: khaki; }
#tonality-selector button.page.transpose   { color: coral; }
#tonality-selector button.page.major-minor { color: limegreen; }

#tonality-selector button:hover    { background-color: #0f71ba; }
#tonality-selector button.selected { background-color: #000; }
#tonality-selector button:focus    { outline: none; }

/*--------- Piano -----------------*/
#image-cache img { position: absolute; top: -100px; }

#piano { display: table-cell; }
#keyboard-text { display: table-cell; vertical-align: top; padding-left: 10px; width: 100%; }
#keyboard-info { font-size: .88em; text-align: center; }

/*--------- Cadence ---------------*/
br.cadence { clear: both; height: 0; font-size: 0; line-height: 0; }
.cadence { margin: 5px; display: inline-block;  vertical-align: top; }
.cadence button { width: 100%; border: none; background-color: transparent; font-weight: bold; font-size: 1em; }
.cadence button:hover    { background-color: chocolate ; color: white }
.cadence button.selected { background-color: #000; }
.cadence button:focus    { outline: none; }

ol.harmony-item {
    font-family: Verdana, sans-serif;
    display: table;
    float: left;
    border-collapse: collapse;
    border: 1px solid black;
    list-style-type: none;
}
.harmony-item li { display: table-cell; min-width: 60px; text-align: center; font-weight: bold; color: white; }
.harmony-item li.chord          { display: table-header-group; color: black; border-bottom: 1px dashed gray; }
.harmony-item li.degree         { display: table-header-group; color: black; }
.harmony-item li.relative-minor { background-color: yellow; }
.harmony-item li.relative-major { background-color: darkseagreen; }
.harmony-item li.diminished     { background-color: orange; }
.harmony-item li.diminished button { color: white; }

.harmony-item li.T    { background-color:#3F3F3F; }
.harmony-item li.Ts   { background-color:#3F3F3F; color:red; }
.harmony-item li.t    { background-color:#BFBFBF; }
.harmony-item li.ts   { background-color:#BFBFBF; color:red; }
.harmony-item li.D    { background-color:#FF0000; }
.harmony-item li.Dst  { background-color:#FF0000; color:black; }
.harmony-item li.d    { background-color:brown; }
.harmony-item li.dst  { background-color:brown; color:black; }
.harmony-item li.D2   { background-color:#92D050; }
.harmony-item li.D2st { background-color:#92D050; color:black; }
.harmony-item li.SD   { background-color:#0070C0; }
.harmony-item li.SD2  { background-color:#3fa4f0; }

.harmony-item li.T:before,
.harmony-item li.Ts:before,
.harmony-item li.t:before,
.harmony-item li.ts:before   { font-size: large; content:"T"; font-family: Helvetica, sans-serif;}
.harmony-item li.d:before,
.harmony-item li.dst:before,
.harmony-item li.D:before,
.harmony-item li.Dst:before  { font-size: large; content:"D"; font-family: Helvetica, sans-serif;}
.harmony-item li.D2:before,
.harmony-item li.D2st:before { font-size: large; content:"D²"; font-family: Helvetica, sans-serif;}
.harmony-item li.SD:before   { font-size: large; content:"SD"; font-family: Helvetica, sans-serif;}
.harmony-item li.SD2:before  { font-size: large; content:"SD²"; font-family: Helvetica, sans-serif;}
/* s: sensible st: substitution tritonique */

.sub { font-size: 60%; vertical-align: middle; line-height: 1em; }
.exp { font-size: 70%; vertical-align: text-top; }
.sus { font-size: 60%; vertical-align: text-bottom; line-height: 80%; }
.add { font-size: 60%; vertical-align: text-top;    line-height: 1em; }
.sus-add { font-size: 60%; vertical-align: text-top; position: relative; left: -24px; }

.harmony-item ul.ul-sus-add { display: inline-table; list-style-type: none; vertical-align: top; margin-left: 3px;}
.harmony-item li.li-sus-add { display: table-header-group; font-size: 60%; color: black; line-height: 90%; }

/*--------- intervals and degrees color -----------*/
.T1 { color: black; font-weight: bold; }
.T2 { color: blue; }
.T3 { color: brown; }
.T4 { color: orange; font-weight: bold; }
.T5 { color: green; font-weight: bold; }
.T6 { color: purple; }
.T7 { color: red; }

.TT  { color: red; font-weight: bold; }
.T2M { color: blue; font-weight: bold; }
.T3M { color: brown; font-weight: bold; }
.T4A { color: orange; }
.T5A { color: green; }
.T6M { color: purple; font-weight: bold; }
.T7M { color: red; font-weight: bold; }

/*--------- input buttons ---------------*/
.input button {
    min-width: 90px;
    height: 34px;
    margin: 2px 2px;

    text-align: center;
    font-size: 1.2em;
    font-weight: bold;

    border: solid black 2px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
}
.input button.selected { color: white; background-color: black;}
.input button:hover { color: white; background-color: #2d6987; }
.input button:focus { outline: none; }

.tone      { }
.signature { background-color: #EEE; }

#tone-selection { width: 100%; position: fixed; left: 0; bottom: 4px; }

/*--------- documentation format ---------------*/
h1 { padding-top: 4px; padding-bottom: 8px; font-family: Verdana, sans-serif; font-size: 1.6em; text-align: center; }
section.documentation { font-family: Verdana, sans-serif; }
section.documentation h1 { font-size: 1.6em;  text-align: center; padding-bottom: 8px; }
section.documentation h2 { font-size: 1.2em;  text-align: center; padding-top: 8px; padding-bottom: 8px; }
section.documentation h2:first-child { font-size: 1.2em;  text-align: center; padding-top: 0; padding-bottom: 8px; }

section.documentation table { border-collapse: collapse; }
section.documentation table tr td { font-size: 1em; padding: 1px 8px; border-color: black; }
section.documentation table tr td > table tr td { font-size: 1em; padding: 1px; }

section.documentation ul { padding-left: 22px; }
section.documentation ol { padding-left: 22px; }

section.documentation .big { font-size: 1.2em; }
section.documentation .xm { font-size: .8em; font-weight: bold; }
section.documentation .xs { font-size: .8em; }
section.documentation .xxsmall { font-size: .6em; font-weight: bold; }

section.documentation .internal td { text-align: center; padding: 2px; }
section.documentation .internal td.left { text-align: left; }
section.documentation .internal td.right { text-align: right; }
section.documentation .internal td.center { text-align: center; }

.documentation li a { text-decoration: none; color: grey; }
.documentation li a:link    { }
.documentation li a:visited { color: black; font-weight: bold; }
.documentation li a:hover   { color: blue; }
.documentation li a:active  { }

/* compact table */
table.compact { margin-top: 16px; font-size: .8em; }
h2 + div table.compact { margin-top: 0; }
table table.compact { margin-top: 0; }
.compact th { padding-left: 2px; padding-right: 2px; text-align: center; border-color: black; }
.compact td { padding-left: 2px; padding-right: 2px; text-align: left; border-color: black; }

.bold { font-weight: bold; }
.normal { font-weight: normal; }
.mini { font-size: .7em; }
/*td { border: 1px solid red;}*/

/* --- midi player ---*/
.midi-player {
    width: 36px;
    height: 36px;
    background-color: transparent;
    border-collapse: collapse;
    color: transparent;
    background: url(../res/player/pause.png);
    background-size: 32px 32px;
}
.midi-player.ready   { background:url(../res/player/play.png); }
.midi-player.playing { background:url(../res/player/stop.png); }

.abc-score {
    /*border:2px solid red;*/
}

/* writing rules */
.rule  { text-align: center; font-weight: bold; color: white; padding: 8px;  margin-top: 10px; margin-bottom: 10px;}
.use   { border: green solid 2px; background-color: #a9dba9; }
.avoid { border: brown solid 2px; background-color: orange; }
.not   { border: darkred solid 2px; background-color: red; }