div {
    box-sizing: content-box;
}
#app_container {
    height: 424px;
    width: 676px;
    margin: 0 auto;
}
.sub {
    font-size: 14px;
    width: 676px;
    margin: 10px auto 10px auto;
}
h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.38em;
    text-align: left;
    letter-spacing: -2px;
    color: #2e2e2e;
    word-spacing: 1px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 8px;
}
.explain {
    width: 316px;
    float: left;
    font-size: 11px;
    color: #282828;
}
#explain-box {
    width: 650px;
    margin: 14px auto;
}
.white,
.white_on {
    background-image: url(https://pianoworld.com/wp-content/images/chords/white_key.jpg);
    height: 28px;
    width: 23px;
    float: left;
    text-align: center;
    padding-top: 100px;
}
.white_on {
    background-position: 23px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
}
.black,
.black_on {
    background-image: url(https://pianoworld.com/wp-content/images/chords/black_key.jpg);
    height: 16px;
    width: 12px;
    float: left;
    margin-left: -29px;
    padding-top: 54px;
    background-repeat: no-repeat;
    font-size: 9px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FFFFFF;
}
.black_on {
    background-position: -12px 0;
}
#keyboard {
    background-color: #000000;
    width: 644px;
    height: auto;
    padding-right: 2px;
    padding-bottom: 1px;
    padding-left: 2px;
}
#red_line {
    background-color: #69040e;
    height: 3px;
    width: auto;
}
.aa {
    display: none;
}
#top_bar {
    background-image: url(https://pianoworld.com/wp-content/images/chords/top_bar_bck.jpg);
    background-repeat: repeat-x;
    text-align: center;
    height: 20px;
    width: 648px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    padding-top: 2px;
    font-weight: bold;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
}
#main_box {
    background-image: url(https://pianoworld.com/wp-content/images/chords/main_box_bck.jpg);
    background-repeat: repeat-x;
    height: 424px;
    width: 648px;
    padding-top: 10px;
}
#Base_List_c {
    font-family: Arial;
    height: 16px;
    width: 634px;
    background-color: #000000;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-left: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 6px;
    margin-bottom: 12px;
}
#Base_List_s {
    font-family: Arial;
    height: 14px;
    width: 634px;
    background-color: #000000;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-left: 3px;
    padding-top: 2px;
    padding-bottom: 3px;
    padding-left: 6px;
    margin-bottom: 4px;
}
#Type_List {
    font-family: Arial;
    font-size: 10px;
    padding-top: 8px;
    padding-bottom: 5px;
    padding-left: 6px;
    padding-right: 6px;
    text-align: left;
    position: absolute;
    background-color: #F0C802;
    display: none;
    width: 30px;
}
#Type_List a {
    font-size: 11px;
    color: #000000;
    text-decoration: none;
    display: block;
}
#Type_List a:hover {
    color: #ffffff;
}
.base_title {
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    float: left;
    width: 48px;
}
#Base_List_c .Base_note,
#Base_List_s .Base_note {
    float: left;
    width: 42px;
    margin-left: 6px;
    color: #F0C802;
    font-size: 12px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}
#Base_List_s .Base_note {
    font-size: 11px;
}
#infoBox {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
}
#name {
    font-weight: bold;
    color: #3589c1;
    margin-left: 10px;
}
.size12 {
    font-size: 12px;
    margin-left: 10px;
    color: #FFFFFF;
}
#invert {
    font-size: 11px;
    font-weight: normal;
    color: #00CCFF;
    background-color: #0A0A0A;
    -moz-border-radius: 6px;
    border-radius: 6px;
    cursor: pointer;
    display: none;
    margin-left: 6px;
    font-family: Arial;
    border: 1px solid #FFFFFF;
    padding-top: 3px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
}
#invert:hover {
    background-color: #161616;
}
#sec1 {
    width: 264px;
    float: right;
    overflow: hidden;
    display: inline;
    margin-top: 1px;
    padding-right: 2px;
}
#sec1 img {
    border: 2px solid #000000;
    width: 60px;
    height: 60px;
    margin-bottom: 2px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    float: left;
    margin-right: 2px;
}
/* tooltip styling */

.tooltip {
    display: none;
    /*background:url(../songs/piano_tutorials/images/tooltip.png);*/
    
    height: 60px;
    width: 168px;
    font-size: 12px;
    color: #fff;
    padding-top: 18px;
    z-index: 9999;
}
/* a .label element inside tooltip */

.tooltip .label {
    color: #ffbb04;
    font-weight: bold;
}
.tooltip .label2 {
    color: #d1cfcf;
    font-size: 10px;
}
.tooltip a {
    color: #ad4;
    font-size: 11px;
    font-weight: bold;
}