@font-face {
    font-family: 'robotoblack';
    src: url("fonts/Roboto-Black-webfont.eot");
    src: url("fonts/Roboto-Black-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto-Black-webfont.woff") format("woff"), url("fonts/Roboto-Black-webfont.ttf") format("truetype"), url("fonts/Roboto-Black-webfont.svg#robotoblack") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotobold';
    src: url("fonts/Roboto-Bold-webfont.eot");
    src: url("fonts/Roboto-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto-Bold-webfont.woff") format("woff"), url("fonts/Roboto-Bold-webfont.ttf") format("truetype"), url("fonts/Roboto-Bold-webfont.svg#robotobold") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotoitalic';
    src: url("fonts/Roboto-Italic-webfont.eot");
    src: url("fonts/Roboto-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto-Italic-webfont.woff") format("woff"), url("fonts/Roboto-Italic-webfont.ttf") format("truetype"), url("fonts/Roboto-Italic-webfont.svg#robotoitalic") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotoregular';
    src: url("fonts/Roboto-Regular-webfont.eot");
    src: url("fonts/Roboto-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto-Regular-webfont.woff") format("woff"), url("fonts/Roboto-Regular-webfont.ttf") format("truetype"), url("fonts/Roboto-Regular-webfont.svg#robotoregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotolight';
    src: url("fonts/Roboto-Light-webfont.eot");
    src: url("fonts/Roboto-Light-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto-Light-webfont.woff") format("woff"), url("fonts/Roboto-Light-webfont.ttf") format("truetype"), url("fonts/Roboto-Light-webfont.svg#robotolight") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto_condensedlight';
    src: url("fonts/RobotoCondensed-Light-webfont.eot");
    src: url("fonts/RobotoCondensed-Light-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/RobotoCondensed-Light-webfont.woff") format("woff"), url("fonts/RobotoCondensed-Light-webfont.ttf") format("truetype"), url("fonts/RobotoCondensed-Light-webfont.svg#roboto_condensedlight") format("svg");
    font-weight: normal;
    font-style: normal;
}





/* ***********************
/* ***** MAIN COLORS *****
/* *********************** */


/* KEY */


/* phoenix: gold; dublin: green; sf: red; wellington: share-blue    */


/* ****************************
/* ***** MAIN COLOR MIXES *****
/* **************************** */


/* *****************************
/* ***** OTHER COLOR MIXES *****
/* ***************************** */

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'robotoregular', arial, sans-serif;
}

.outer {
    margin: 0 20px 40px 20px;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    border: solid 0px blue;
    padding-top: 85px;
}

h1 {
    color: #fff;
    font-size: 28px;
    margin: 13px 0 3px 0;
    line-height: 32px;
    font-family: 'robotobold', sans-serif;
    font-weight: normal;
    padding-left: 20px;
}

h2 {
    color: #fff;
    font-size: 22px;
    margin: 50px 0 3px 0;
    line-height: 27px;
    font-family: 'robotoregular', sans-serif;
    font-weight: normal;
    padding-left: 20px;
}

ul {
    padding: 0;
}

.details {
    padding: 0 20px;
}

.details p {
    color: #858585;
    font-family: 'robotoregular', arial, sans-serif;
    font-size: 15px;
    line-height: 18px;
    margin: 0;
}

.details p strong {
    color: #bfbf8a;
    font-family: 'robotobold', sans-serif;
}

.details .intro {
    color: #999;
    margin: 6px 0 10px 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 18px;
    font-family: 'robotoregular', sans-serif;
}

.details {
    color: #bfbf8a;
    font-family: 'robotobold', sans-serif;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: #555;
}

a:hover {
    color: blue;
}

.article-list a {
    color: white;
}

.article-list a:hover {
    color: white;
}

.preview-title {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: right;
    background: url("../images/bg-trans.png");
    z-index: 3;
}

.preview-title span {
    display: block;
    padding: 12px;
    font-size: 24px;
    line-height: 28px;
    text-transform: capitalize;
    word-wrap: break-word;
}

.clear {
    clear: both;
}

ul.article-list {
    box-sizing: border-box;
    width: 100%;
    min-height: 300px;
    padding: 0;
    list-style: none;
}

ul.article-list li {
    display: inline-block;
    position: relative;
    width: 360px;
    height: 240px;
    margin: 0 30px 30px 0;
    background: center center no-repeat #eee;
    background-size: cover;
}

ul.article-list li a {
    display: block;
    height: 100%;
    width: 100%;
}

ul.article-list li a:hover {
    transition: background-color .5s ease;
    background-color: rgba(0, 0, 0, 0.2);
}

.preload-image {
    display: none;
}

.full-width {
    width: 100%;
    margin: 20px 0 20px 0;
    color: #858585;
}

.align-center {
    text-align: center;
}

.align-left {
    text-align: left;
}

.clear {
    clear: both;
}

.sb-slidebar ul {
    margin: 0;
    padding: 20px;
}

.sb-slidebar li {
    margin: 15px 0 0 0;
    padding: 15px 0 0 0;
    list-style-type: none;
    border-top: #333333 1px solid;
}

.sb-slidebar li a {
    font-size: 16px;
    line-height: 20px;
    color: #fff;
}

.sb-slidebar li:first-of-type {
    border-top: 0;
}





/* -----------------------------------
 * Slidebars
 * Version 0.10.3
 * http://plugins.adchsm.me/slidebars/
 *
 * Written by Adam Smith
 * http://www.adchsm.me/
 *
 * Released under MIT License
 * http://plugins.adchsm.me/slidebars/license.txt
 *
 * -------------------
 * Slidebars CSS Index
 *
 * 001 - Box Model, Html & Body
 * 002 - Site
 * 003 - Slidebars
 * 004 - Animation
 * 005 - Helper Classes
 *
 * ----------------------------
 * 001 - Box Model, Html & Body
 */

html,
body,
#sb-site,
.sb-site-container,
.sb-slidebar {
    /* Set box model to prevent any user added margins or paddings from altering the widths or heights. */
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    overflow-x: hidden;
    /* Stops horizontal scrolling. */
}

html {
    height: 100%;
    /* Site is as tall as device. */
}

body {
    min-height: 100%;
    height: auto;
    position: relative;
    /* Required for static Slidebars to function properly. */
}





/* Site scroll locking - prevent site from scrolling when a Slidebar is open, except when static Slidebars are only available. */

html.sb-scroll-lock.sb-active:not(.sb-static) {
    overflow: hidden;
}





/* ----------
 * 002 - Site
 */

#sb-site,
.sb-site-container {
    /* You may now use class .sb-site-container instead of #sb-site and use your own id. However please make sure you don't set any of the following styles any differently on your id. */
    width: 100%;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    /* Site sits above Slidebars */
    background-image: url("../imgs/notes-background.png");
}





/* Micro clearfix by Nicolas Gallagher, ensures the site container hits the top and bottom of the screen. */

#sb-site:before,
#sb-site:after,
.sb-site-container:before,
.sb-site-container:after {
    content: ' ';
    display: table;
}

#sb-site:before,
#sb-site:after,
.sb-site-container:before,
.sb-site-container:after {
    clear: both;
}





/* ---------------
 * 003 - Slidebars
 */

.sb-slidebar {
    height: 100%;
    overflow-y: auto;
    /* Enable vertical scrolling on Slidebars when needed. */
    position: fixed;
    top: 0;
    z-index: 0;
    /* Slidebars sit behind sb-site. */
    display: none;
    /* Initially hide the Slidebars. Changed from visibility to display to allow -webkit-overflow-scrolling. */
    background-color: #111;
    /* Default Slidebars background colour, overwrite this with your own css. */
}

.sb-slidebar,
.sb-slidebar * {
    -webkit-transform: translateZ(0px);
    /* Fixes issues with translated and z-indexed elements on iOS 7. */
}

.sb-left {
    left: 0;
    /* Set Slidebar to the left. */
}

.sb-right {
    right: 0;
    /* Set Slidebar to the right. */
}

html.sb-static .sb-slidebar,
.sb-slidebar.sb-static {
    position: absolute;
    /* Makes Slidebars scroll naturally with the site, and unfixes them for Android Browser < 3 and iOS < 5. */
}

.sb-slidebar.sb-active {
    display: block;
    /* Makes Slidebars visibile when open. Changed from visibility to display to allow -webkit-overflow-scrolling. */
}

.sb-style-overlay {
    z-index: 9999;
    /* Set z-index high to ensure it overlays any other site elements. */
}

.sb-momentum-scrolling {
    -webkit-overflow-scrolling: touch;
    /* Adds native momentum scrolling for iOS & Android devices. */
}

.sb-toggle-left {
    position: absolute;
    z-index: 9999;
    display: inline-block;
    padding: 21px 20px 20px 20px;
    top: 0;
    right: 0;
    color: #fff;
}

.sb-toggle-left:hover {
    color: #fff;
    cursor: pointer;
}





/* ***************************
* ****** Media Queries ******
* ***************************
* ***************************
* ****** 500 and wider ******
* *************************** */

@media only screen and (min-width: 500px) {
    .sb-toggle-left {
        display: none;
    }
}





/* Slidebar widths for browsers/devices that don't support media queries. */

.sb-slidebar {
    width: 30%;
}

.sb-width-thin {
    width: 15%;
}

.sb-width-wide {
    width: 45%;
}

@media (max-width: 480px) {
    /* Slidebar widths on extra small screens. */
    .sb-slidebar {
        width: 70%;
    }

    .sb-width-thin {
        width: 55%;
    }

    .sb-width-wide {
        width: 85%;
    }
}

@media (min-width: 481px) {
    /* Slidebar widths on small screens. */
    .sb-slidebar {
        width: 55%;
    }

    .sb-width-thin {
        width: 40%;
    }

    .sb-width-wide {
        width: 70%;
    }
}

@media (min-width: 768px) {
    /* Slidebar widths on medium screens. */
    .sb-slidebar {
        width: 40%;
    }

    .sb-width-thin {
        width: 25%;
    }

    .sb-width-wide {
        width: 55%;
    }
}

@media (min-width: 992px) {
    /* Slidebar widths on large screens. */
    .sb-slidebar {
        width: 30%;
    }

    .sb-width-thin {
        width: 15%;
    }

    .sb-width-wide {
        width: 45%;
    }
}

@media (min-width: 1200px) {
    /* Slidebar widths on extra large screens. */
    .sb-slidebar {
        width: 20%;
    }

    .sb-width-thin {
        width: 5%;
    }

    .sb-width-wide {
        width: 35%;
    }
}





/* ---------------
 * 004 - Animation
 */

.sb-slide,
#sb-site,
.sb-site-container,
.sb-slidebar {
    -webkit-transform: translate(0px);
    -moz-transform: translate(0px);
    -o-transform: translate(0px);
    transform: translate(0px);
    -webkit-transition: -webkit-transform 400ms ease;
    -moz-transition: -moz-transform 400ms ease;
    -o-transition: -o-transform 400ms ease;
    transition: transform 400ms ease;
    -webkit-transition-property: -webkit-transform, left, right;
    /* Add left/right for Android < 4.4. */
    -webkit-backface-visibility: hidden;
    /* Prevents flickering. This is non essential, and you may remove it if your having problems with fixed background images in Chrome. */
}





/* --------------------
 * 005 - Helper Classes
 */

.sb-hide {
    display: none;
    /* Optionally applied to control classes when Slidebars is disabled over a certain width. */
}

[canvas=container],
[off-canvas] {
    padding: 0px;
}

[class*=js-] {
    cursor: pointer;
}

.rkheader {
    height: 50px;
}

.navbar {
    margin: 0;
    background-color: #333;
    color: white;
    position: fixed;
    width: 100%;
    z-index: 999;
    box-sizing: border-box;
    top: 0;
    height: 50px;
}

.home-icon {
    margin: 5px 0 0 0;
    display: inline-block;
    height: 30px;
    width: 30px;
    background: url("../imgs/white-house.png");
    background-size: 30px 30px;
    background-repeat: no-repeat;
}

.home-icon:hover {
    display: inline-block;
    height: 30px;
    width: 30px;
    background: url("../imgs/green-house.png");
    background-size: 30px 30px;
    background-repeat: no-repeat;
}

.navbar-container {
    padding: 7px 0 0 0;
}

.pull-right {
    position: absolute;
    right: 40px;
}

.navbar a {
    color: #ccc;
    font-size: 1.5em;
    letter-spacing: 1px;
    font-family: 'robotolight', sans-serif;
    padding-left: 22px;
}

.navbar a:hover {
    color: white;
}





/* ***************************
* ****** Media Queries ******
* ***************************
* ***************************
* ****** 500 and wider ******
* *************************** */

@media only screen and (min-width: 500px) {
    .navbar {
        /* display: none; */
    }
}

.home {
    position: relative;
    /* ***************************
  * ****** Media Queries ******
  * ***************************
  * ***************************
  * ****** 500 and wider ******
  * *************************** */
    /* ***************************
  * ****** Media Queries ******
  * ***************************
  * ***************************
  * ****** 850 and wider ******
  * *************************** */
}

.home h1 {
    font-family: 'Ultra', serif;
    font-weight: normal;
    font-size: 55px;
    line-height: 51px;
    max-width: 650px;
}

.home .intro {
    font-size: 16px;
    color: #858585;
    line-height: 19px;
    margin: 10px 0 0 20px;
    font-family: 'robotolight';
}

.home .apps {
    margin-top: 10px;
    padding: 20px;
}

.home .apps div {
    margin: 10px auto;
    display: block;
    width: 80%;
    max-width: 380px;
}

.home .apps img {
    width: 100%;
    border-radius: 600px;
}

.home .apps p {
    font-size: 32px;
    color: #6a6a6a;
    line-height: 32px;
    margin: 2px 0 35px 0;
    padding: 0 20px;
    text-transform: lowercase;
    text-align: center;
    font-family: 'Courgette', cursive;
    font-weight: normal;
    letter-spacing: -1px;
}

.home .apps p span {
    display: block;
    font-size: 19px;
    letter-spacing: 0;
}

@media only screen and (min-width: 500px) {
    .home h1 {
        font-size: 55px;
        line-height: 51px;
    }
    .home .apps div {
        margin: 0 30px 25px 0;
        display: inline-block;
        max-width: 200px;
        vertical-align: top;
    }
}

@media only screen and (min-width: 850px) {
    .home h1 {
        font-size: 60px;
        line-height: 55px;
    }
}

.clefs-wrapper {
    color: #c2c2c2;
}

.clefs-wrapper p {
    font-family: 'robotoregular', arial, sans-serif;
    font-size: 15px;
    line-height: 20px;
    padding: 0 20px;
}

.clefs-wrapper .clef-image {
    height: 300px;
    width: 100%;
    background: none;
    background-size: contain;
    background-repeat: no-repeat;
}

.clefs-wrapper #treble-clef {
    background-image: url("../imgs/treble-clef-easymusicteacher-com.png");
}

.clefs-wrapper #bass-clef {
    background-image: url("../imgs/bass-clef-easymusicteacher-com.png");
}

.clefs-wrapper #alto-clef {
    background-image: url("../imgs/alto-clef-easymusicteacher-com.png");
}

.clefs-wrapper #tenor-clef {
    background-image: url("../imgs/tenor-clef-easymusicteacher-com.png");
}

.clefs-wrapper button:focus {
    outline: 0;
}

@media (max-width: 768px) {
    .clefs-wrapper #treble-clef {
        background-image: url("../imgs/treble-clef-easymusicteacher-com-3-2.png");
    }
    .clefs-wrapper #bass-clef {
        background-image: url("../imgs/bass-clef-easymusicteacher-com-3-2.png");
    }
    .clefs-wrapper #alto-clef {
        background-image: url("../imgs/alto-clef-easymusicteacher-com-3-2.png");
    }
    .clefs-wrapper #tenor-clef {
        background-image: url("../imgs/tenor-clef-easymusicteacher-com-3-2.png");
    }
}

.keyboard-wrapper #checkboxDiv {
    position: relative;
    color: gray;
    height: 40px;
    margin: 20px 0 20px 0;
}

.keyboard-wrapper #lblCheck {
    float: left;
}

.keyboard-wrapper #kbeCheck {
    float: right;
}

.keyboard-wrapper .check-box {
    display: inline-block;
    height: 20px;
    width: 20px;
    border: solid 1px gray;
    margin-right: 15px;
    cursor: pointer;
    background: lightgray;
    border-radius: 3px;
}

.keyboard-wrapper .check-box-checked {
    background: white;
    background-image: url("../imgs/checkmark-gray.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.keyboard-wrapper .check-box-label {
    display: inline-block;
    vertical-align: top;
    border: solid 0px blue;
    height: 40px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.keyboard-wrapper .container {
    max-width: 1200px;
}

.keys-wrapper .container {
    max-width: 600px;
}

.keys-wrapper #checkboxDiv {
    color: gray;
    height: 40px;
    margin: 5px 0px 40px 0;
    text-align: center;
}

.keys-wrapper #checkboxDiv .check-box {
    display: inline-block;
}

.keys-wrapper #checkboxDiv .check-box-label {
    display: inline-block;
    font-size: 15px;
    position: relative;
    top: 3px;
}

.keys-wrapper .full-width {
    margin: 0 0 0 20px;
    max-width: 95%;
}

.keys-wrapper .full-width p {
    font-size: 14px;
    color: #858585;
    line-height: 19px;
}

.keys-wrapper .full-width button {
    background: #000;
    -webkit-border-radius: 14;
    -moz-border-radius: 14;
    border-radius: 30px;
    box-shadow: 0px 0px 10px #111;
    font-family: Arial;
    color: #ffffff;
    font-size: 16px;
    padding: 10px;
    text-decoration: none;
    cursor: pointer;
    margin: 0 13px 0px 0;
    border: none;
    width: 60px;
}

.keys-wrapper .full-width button:hover {
    background: #1f1f1f;
    text-decoration: none;
}

.keys-wrapper .full-width button:focus {
    outline: 0;
}

.keys-wrapper .details {
    margin: 10px 0 20px 0;
}

.keys-wrapper .check-box {
    display: inline-block;
    height: 20px;
    width: 20px;
    border: solid 1px gray;
    margin-right: 15px;
    cursor: pointer;
    background: lightgray;
    border-radius: 3px;
}

.keys-wrapper .check-box-checked {
    background: white;
    background-image: url("../imgs/checkmark-gray.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.keys-wrapper .check-box-label {
    display: inline-block;
    vertical-align: top;
    border: solid 0px blue;
    height: 40px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.keys-wrapper .results {
    margin: 20px 0 20px 0;
    display: inline-block;
    text-align: center;
    border: solid 0px red;
    width: 100%;
}

.keys-wrapper .results ul li {
    display: inline-block;
    width: 200px;
    color: #bfbf8a;
    border: solid 0px blue;
    padding: 0;
}

.keys-wrapper .wrong {
    color: red;
    font-weight: 900;
}

.keys-wrapper .right {
    color: green;
    font-weight: 900;
}

.keys-wrapper ul {
    font-size: 0;
}

.keys-wrapper ul li {
    font-size: 28px;
    display: inline;
}

.keys-wrapper .check-box-container {
    position: relative;
    margin-bottom: 20px;
}

.keys-wrapper .check-box {
    position: relative;
    top: 3px;
    display: inline-block;
    height: 20px;
    width: 20px;
    border: solid 1px gray;
    margin-right: 10px;
    cursor: pointer;
    background: lightgray;
    border-radius: 3px;
}

.keys-wrapper .check-box-checked {
    background: white;
    background-image: url("../imgs/checkmark-gray.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.keys-wrapper .check-box-label {
    display: inline-block;
    vertical-align: top;
    border: solid 0px blue;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.keys-wrapper .tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.keys-wrapper .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.keys-wrapper .tooltip:hover .tooltiptext {
    visibility: visible;
}

.keys-wrapper .disabled {
    opacity: .2;
}

.keys-wrapper button {
    margin: 10px 10px 10px 10px !important;
}

@media only screen and (min-device-width: 300px) and (max-device-width: 768px) and (orientation: portrait) {
    .keys-wrapper .results ul li {
        width: 100px;
    }
    .keys-wrapper .results ul li,
    .keys-wrapper .results p {
        font: 20px/30px arial, sans-serif;
    }
    .keys-wrapper .tooltip:hover .tooltiptext {
        display: none;
    }
    .keys-wrapper .full-width button:hover {
        background: #000;
    }
}

.music-notes-wrapper {
    color: #c2c2c2;
}

.music-notes-wrapper .music-note-image {
    height: 300px;
    width: 90%;
    background: none;
    background-size: contain;
    background-repeat: no-repeat;
}

.music-notes-wrapper .deck {
    color: #858585;
    font-size: 19px;
}

.music-notes-wrapper p {
    font-family: 'robotoregular', arial, sans-serif;
    font-size: 15px;
    line-height: 20px;
    padding: 0 20px;
}

.music-notes-wrapper .image-wrapper {
    margin: 8px 0 0px 10px;
}

.music-notes-wrapper #music-notes {
    background-image: url("../imgs/music-notes-5.png");
}

.music-notes-wrapper button:focus {
    outline: 0;
}

@media (max-width: 768px) {
    .music-notes-wrapper #music-notes {
        background-image: url("../imgs/music-notes-3-2.png");
    }
    .music-notes-wrapper #bass-clef {
        background-image: url("../imgs/bass-clef-easymusicteacher-com-3-2.png");
    }
    .music-notes-wrapper #alto-clef {
        background-image: url("../imgs/alto-clef-easymusicteacher-com-3-2.png");
    }
    .music-notes-wrapper #tenor-clef {
        background-image: url("../imgs/tenor-clef-easymusicteacher-com-3-2.png");
    }
}

.notes-wrapper .note-background {
    background-image: url("../imgs/new_art/clef-lines.png");
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 200px;
    width: auto;
    position: relative;
    margin-top: 30px;
}

.notes-wrapper .note {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 20px;
    background-color: #bfbf8a;
    margin: 0;
    padding: 0;
    display: inline-block;
    text-align: center;
}

.notes-wrapper .note div {
    font-size: 13px;
    padding-top: 9px;
    position: relative;
    line-height: 13px;
    font-family: 'robotoregular', sans-serif;
    font-weight: normal;
}

.notes-wrapper .notes-options {
    padding: 0 20px;
    margin: -10px auto 0 auto;
    text-align: center;
}

.notes-wrapper .notes-clefs {
    position: relative;
    line-height: 16px !important;
    margin-top: 9px;
    text-align: center;
}

.notes-wrapper .notes-clefs label {
    position: relative;
}

.notes-wrapper .notes-clefs p {
    margin: 0 0 7px 0;
    padding: 10px 0 0 0;
    font-size: 15px;
    line-height: 16px;
    color: #bfbf8a;
}

.notes-wrapper .notes-clefs input {
    position: relative;
    margin: 0;
    padding: 0;
}

.notes-wrapper .notes-clefs span {
    position: relative;
    padding: 0 10px 0 4px;
    display: inline-block;
    vertical-align: middle;
    top: 1px;
    color: #858585;
    font-size: 14px;
}

.notes-wrapper .notes-hint {
    text-align: center;
    padding: 0 20px;
}

.notes-wrapper .results {
    margin: 20px 0 20px 0;
    display: inline-block;
    text-align: center;
    border: solid 0px red;
    width: 100%;
}

.notes-wrapper .results ul li {
    display: inline-block;
    width: 200px;
    color: #bfbf8a;
    border: solid 0px blue;
    padding: 0;
}

.notes-wrapper .wrong {
    color: red;
    font-weight: 900;
}

.notes-wrapper .right {
    color: green;
    font-weight: 900;
}

.notes-wrapper ul {
    font-size: 0;
}

.notes-wrapper ul li {
    font-size: 28px;
    display: inline;
}

.notes-wrapper .check-box-container {
    position: relative;
    margin-bottom: 20px;
}

.notes-wrapper .check-box {
    position: relative;
    top: 3px;
    display: inline-block;
    height: 20px;
    width: 20px;
    border: #858585 2px solid;
    margin-right: 7px;
    cursor: pointer;
    background: #fff;
    border-radius: 3px;
}

.notes-wrapper .check-box-checked {
    background: white;
    background-image: url("../imgs/checkmark-green.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.notes-wrapper .check-box-label {
    display: inline-block;
    vertical-align: top;
    border: solid 0px blue;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 17px;
    color: #bfbf8a;
    position: relative;
    top: 3px;
}

.notes-wrapper .tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.notes-wrapper .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.notes-wrapper .tooltip:hover .tooltiptext {
    visibility: visible;
}

.notes-wrapper .disabled {
    opacity: .2;
}

.notes-wrapper button {
    background: #000;
    -webkit-border-radius: 14;
    -moz-border-radius: 14;
    border-radius: 25px;
    box-shadow: 0px 0px 10px #111;
    font-family: Arial;
    color: #ffffff;
    font-size: 24px;
    padding: 10px;
    text-decoration: none;
    cursor: pointer;
    margin: 0 13px 0px 0;
    border: none;
    width: 50px;
}

.notes-wrapper button:hover {
    background: #1f1f1f;
    text-decoration: none;
}

.notes-wrapper button:focus {
    outline: 0;
}

@media only screen and (min-device-width: 300px) and (max-device-width: 768px) and (orientation: portrait) {
    .notes-wrapper .results ul li {
        width: 100px;
    }
    .notes-wrapper .results ul li,
    .notes-wrapper .results p {
        font: 20px/30px arial, sans-serif;
    }
    .notes-wrapper .tooltip:hover .tooltiptext {
        display: none;
    }
    .notes-wrapper button:hover {
        background: #000;
    }
}

.notes-keys-wrapper {
    /* override of main.css */
}

.notes-keys-wrapper .wrong {
    color: red;
    font-weight: 900;
}

.notes-keys-wrapper .right {
    color: green;
    font-weight: 900;
}

.notes-keys-wrapper .check-box {
    position: relative;
    top: 3px;
    display: inline-block;
    height: 20px;
    width: 20px;
    border: solid 1px gray;
    margin-right: 7px;
    cursor: pointer;
    background: lightgray;
    border-radius: 3px;
}

.notes-keys-wrapper .check-box-checked {
    background: white;
    background-image: url("../imgs/checkmark-green.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.notes-keys-wrapper .check-box-label {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.notes-keys-wrapper {
    color: #858585 !important;
}

.notes-keys-wrapper #lblCheck {
    float: left;
}

.notes-keys-wrapper #kbeCheck {
    float: right;
}

.notes-keys-wrapper .left {
    text-align: left;
}

.notes-keys-wrapper .clefs {
    color: #858585;
    text-align: center;
    padding: 0 20px;
    font-size: 15px;
}

.notes-keys-wrapper .staffbox {
    position: relative;
    height: 310px;
    text-align: left;
    margin-bottom: 20px;
    border: solid 0px green;
}

.notes-keys-wrapper .staff {
    position: relative;
    display: inline-block;
    border: solid 0px green;
}

.notes-keys-wrapper .scorecard {
    height: 300px;
    font-family: "Comic Sans MS", arial, sans-serif;
    font-size: 18pt;
    line-height: 22pt;
    display: inline-block;
    width: 240px;
    position: absolute;
    border: solid 0px blue;
    color: white;
}

.notes-keys-wrapper .scorecard-inner {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 40px;
    min-width: 160px;
    border: solid 0px red;
}

.notes-keys-wrapper .bold {
    color: gray;
    font-weight: 900;
}

.notes-keys-wrapper .disable-element {
    opacity: 0.2;
}

.notes-keys-wrapper .container {
    max-width: 1200px;
}

.notes-keys-wrapper .treble {
    max-width: 700px;
}

.notes-keys-wrapper .bass {
    max-width: 700px;
}

.notes-keys-wrapper #notes-staff {
    float: left;
}

.notes-keys-wrapper #notes-keys {
    float: right;
}

@media only screen and (min-device-width: 300px) and (max-device-width: 768px) and (orientation: portrait) {
    .notes-keys-wrapper .scorecard {
        font: 30px/36px arial, sans-serif;
        border: solid 0px red;
    }
    .notes-keys-wrapper .scorecard-inner {
        top: 20px;
    }
}


/* ADDED 11-23-2025 */

.shareBar img {
    border: solid 1px white;
    border-radius: 10px;
}