html, body, #jampal {
    /* Height and width fallback for older browsers. */
    height: 100%;
    width: 100%;
    /* Set the height to match that of the viewport. */
    height: 100vh;
    /* Set the width to match that of the viewport. */
    width: 100vw;
    /* Remove any browser-default margins. */
    margin: 0;
}

#jampal .head {
    background: #0f6674;
    height: 10vh;
    position: relative;
}
#jampal .main {
    width: 100%;
    height: 90vh;
    background: linear-gradient(to right, #86cfda 0%, #86cfda 23%, #fff 23%, #fff 100%);
}
#jampal .thediv:first-child {top: -3vh;}
/*#jampal .thediv:first-child>div>.colorpicker { top: 3vh;}*/
#jampal .main>div {
    height: 90vh;
}
#jampal .part {
    position: relative;
    min-height: 11vh;
    border-bottom: 1px dashed #aaa;
    padding: .5vh 0;
    color: #383838;
    }
#jampal  .partname{
    position: relative;
    float:left;
    width: 23vw;
    font-size: 7vh; text-overflow: ellipsis; overflow: hidden;
}
#jampal .partcontrol {
    position: absolute;
    margin-left: 16vw;
    opacity: .1;
    z-index:15;
}
#jampal .part:hover .partcontrol { opacity: 1;}
#jampal .partcontrol span { color: #999; cursor: pointer;}
#jampal .partcontrol span:hover { color: #0f6674; }
#jampal .part .notes {
    margin: 0.3vh 8vw 0.3vh 2vw;
    padding: 0.5vh 1vw;
    font-size: 4vh;
    background-color: rgba(220,220,200, .5);
    color: #333;
    border: 1px solid grey;
}

#jampal .part.active {    background-color: rgba(255, 240, 70, .1); border-top: 2px solid red; border-bottom: 2px solid red;}
#jampal .part.active .partname { color: #000;}
#jampal .part_chords {
    width: 77vw;
    position:relative;
    margin-left: 23vw;
}
#jampal .part_chords .round { display: inline-block;}
#jampal .part_chords .round.active {    background-color: rgba(255, 240, 70, .2); }
#jampal .part_chords .chbox_outer {display: inline;}
#jampal .part_chords .chbox {
    display: block;
    float: left;
    width: 7vw;
    height: 7vw;
    font-size: 4vmin;
    border: 1px solid #999;
    line-height: initial;
    margin: .4vh 0;
    z-index: 20;
    position: relative;
}
#jampal .part_chords .chbox::first-letter {font-size: 6.3vw;}
#jampal .part_chords .chbox .sharp {    position: absolute; left: 4vw;}
#jampal .part_chords .chbox.repeat {
    font-size: 2vmin;
    color: #666;
    border: none;
    padding: 3vmin .5vmin 0 0;
    text-align: right;
    width: 5vw;
}
#jampal .part_chords .chbox.repeat::first-letter {font-size: 4vmin;}
#jampal .part_chords .chbox.active {
    background-color: rgba(255, 240, 70, .8);
    border: 1px solid rgba(255, 0, 0, 1);
}
#jampal .part_chords .round.empty {padding-left: 1vh;}
#jampal .part_chords .chbox.empty { color: rgba(0,200,0, .3); border: 1px solid #CCC;}

#jampal.small1 .part { min-height: 8vh;}
#jampal.small1 .partname { font-size: 7.5vh;}
#jampal.small1 .chbox { width: 6vw; height: 5.8vw; font-size: 4vmin;}
#jampal.small1 .part_chords .chbox .sharp {    position: absolute; left: 3.3vw;}
#jampal.small1 .part_chords .chbox::first-letter {font-size: 5.5vw;}
#jampal.small1 .part_chords .chbox.repeat::first-letter {font-size: 4.5vmin;}
#jampal.small1 .part_chords .chbox.repeat { width: 3vw; font-size: 1.8vmin; padding: 1.9vmin .4vmin 0 0;}
#jampal.small1 .part .notes { font-size: 3.4vh; margin: 0.1vh 8vw 0.2vh 2vw; padding: 0.3vh 1vw; }

#jampal.small2 .part { min-height: 6vh;}
#jampal.small2 .partname { font-size: 5.8vh;}
#jampal.small2 .chbox { width: 5vw; height: 4.8vw; font-size: 3vmin;}
#jampal.small2 .part_chords .chbox .sharp {    position: absolute; left: 3vw;}
#jampal.small2 .part_chords .chbox::first-letter {font-size: 4.5vw;}
#jampal.small2 .part_chords .chbox.repeat::first-letter {font-size: 3.5vmin;}
#jampal.small2 .part_chords .chbox.repeat { width: 2.5vw; font-size: 1.5vmin; padding: 1.9vmin .4vmin 0 0;}
#jampal.small2 .part .notes { font-size: 2.9vh; margin: 0 8vw 0 2vw; padding: 0 1vw; }

#jampal.small3 .part { min-height: 5vh;}
#jampal.small3 .partname { font-size: 4.85vh;}
#jampal.small3 .chbox { width: 4vw; height: 3.8vw; font-size: 2vmin;}
#jampal.small3 .part_chords .chbox .sharp {    position: absolute; left: 2.5vw;}
#jampal.small3 .part_chords .chbox::first-letter {font-size: 3.5vw;}
#jampal.small3 .part_chords .chbox.repeat::first-letter {font-size: 2.5vmin;}
#jampal.small3 .part_chords .chbox.repeat { width: 2vw; font-size: 2.1vmin; padding: 1.9vmin .4vmin 0 0;}
#jampal.small3 .part .notes { font-size: 2vh; margin: 0 8vw 0 2vw; padding: 0 1vw; }

#jampal.small4 .part { min-height: 3.8vh;}
#jampal.small4 .partname { font-size: 3.7vh;}
#jampal.small4 .chbox { width: 3.5vw; height: 3.7vw; font-size: 2vmin;}
#jampal.small4 .part_chords .chbox .sharp {    position: absolute; left: 2vw;}
#jampal.small4 .part_chords .chbox::first-letter {font-size: 2.7vw;}
#jampal.small4 .part_chords .chbox.repeat::first-letter {font-size: 2vmin;}
#jampal.small4 .part_chords .chbox.repeat { width: 2vw; font-size: 1.8vmin; padding: 1.9vmin .4vmin 0 0;}
#jampal.small4 .part .notes { font-size: 1.5vh; margin: 0 8vw 0 2vw; padding: 0 1vw; }


#jampal .part .colorpicker { position: absolute;   top: 0px; right: 0px;}
#jampal .part .time {
    position: absolute;   bottom: 0px; right: 0px;
    font-size: 1.6vh;
    color: #999;
    width: 7vw;
    text-align: right;
}
#jampal .part .time span { display: block;}
#jampal .part .time .a { font-size: 1.3vh;}

#jampal .head>div {
    display: block;
    float: left;
    margin: .6vh 1vw .6vh .1vw;
    height: 8vh;
    color: white;
    font-weight: bold;
    position: relative;
    /*border: 1px solid white;*/
    border-radius: 1vh;
    background: #86cfda;
    padding: .8vh;
    vertical-align: middle;

}
#jampal #noteedit {    width: 100%;    height: 80vh;    font-size: 1.8em;}

#jampal .head>div a {color: white; }
#jampal .head .repetitions,#jampal .head .chordlength {  padding-left: 20px; padding-top: 2.1vh;}
#jampal .head .metronome {margin-left: 0; width: 40px; }
#jampal .head .metronome span {display: block; color: #4e555b;}
#jampal .head .metronome span.active { color: white; font-weight: bold; }
#jampal .head .plus { position: absolute; left: 0px; top: 0px; font-size: 25px; padding: 3px;}
#jampal .head .minus { position: absolute; left: 3px; top: 25px; font-size: 25px; padding: 3px; }
#jampal .head .tempo { margin-left: 1px; margin-right: 1px; }
#jampal .head .tempo input { width: 50px;}
#jampal .head .songname { margin-top: .5vh;}
#jampal .head .songname input { width: 25vw; font-size: 5vh;    padding: 0; border: 0; background: transparent;}
#jampal .head .storage span { font-size: 6vh; cursor: pointer; }
#jampal .head .signature {width: 60px; margin-right: 0;}
#jampal .head .siga {position:absolute; top:7px; left:2px; width: 35px;}
#jampal .head .sigb {position:absolute; top:29px; left:21px;  width: 35px;}
#jampal .head .settings { float: right; width: 40px;}
#jampal .head .settings a {text-decoration: none; width:35px;}
#jampal .head .settings  span {display: block; width:35px;}


#jampal #tempooverlay {
    position: absolute;
    z-index:40;
    width: 100%;
    height: 90vh;
    top: 10vh;
    background-color: rgba(0,255,0, .7);
    display: none;
}
#jampal #tempooverlay.first { background-color: rgba(0,0,255, .7); }