#pianoConteneur {
    width: 100%;
    min-width: 640px;
    height: 480px;
    background-color: transparent;
}

#pianoPratique, #pianoQuiz {
    height: 100px;
    width: 100%;
    text-align: center;
}

#pianoConteneur .row .col-12 {
    width: 100%;
    margin: 0 auto;
}

#pianoConteneur .row .col-3 {
    width: 25%;
}

#pianoConteneur .row .col-6 {
    width: 50%;
}

#pianoConteneur .row .col-3, #pianoConteneur .row .col-6, #pianoConteneur .row .col-12 {
    display: inline-block;
    padding-top: 20px;
}

#pianoConteneur div button {
    margin-top: 5px;
}


#pianoNoteQuiz, #pianoScoreQuiz {
    text-align: center;
}

#pianoNoteQuiz img {
    height: 90px;
    width: 90px;
    margin-top: -20px;
}

#pianoRedemarreQuiz {
    text-align: left;
}


ol#piano {
    list-style: none;
    font-size: 0;
    height: calc(100% - 100px);
    width: 100%;
    padding: 0;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
}

ol#piano li {
    font-size: 1rem;
    text-align: center;
    word-break: break-all;
    vertical-align: top;
    display: inline-block;
    box-sizing: border-box;
    height: 100%;
    position: relative;
    top: 0;
    padding: 0;
    margin: 0;
    
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    border: 2px solid #333;
}

#pianoConteneur h1, #pianoConteneur img, #pianoConteneur span {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                          supported by Chrome and Opera */
}

ol#piano li span {
    font-weight: bold;
    display: inline-block;
    position: relative;
}

ol#piano li.nBlanche span {
    top: 60%;
}

ol#piano li.nNoire span {
    top: 25%;
}

ol#piano li.nBlanche {
    height: 100%;
    position: relative;
    top: 0;
    
    border-left-width: 1px;
    border-right-width: 1px;
    
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f3f3f3+50,ededed+51,ffffff+100;White+Gloss+%232 */
    background: #ededed; /* Old browsers */
    background: -moz-linear-gradient(top,  #ededed 0%, #f3f3f3 50%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ededed 0%,#f3f3f3 50%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ededed 0%,#f3f3f3 50%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, ededed+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

    -webkit-box-shadow: 0px 5px 10px -5px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 10px -5px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 10px -5px rgba(0,0,0,0.75);
}

ol#piano li.nBlanche:first-child {
    border-left-width: 2px;
}

ol#piano li.nBlanche:last-child {
    border-right-width: 2px;
}

ol#piano li.nBlanche.nAppuyee, ol#piano li.nBlanche:active {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f3f3f3+50,ededed+51,ffffff+100;White+Gloss+%232 */
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #f3f3f3 50%, #ededed 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ffffff 0%,#f3f3f3 50%,#ededed 100%); /* W3C, IE10+, FF16+, Chrome26+, ededed+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f3f3f3',GradientType=0 ); /* IE6-9 */
    
    -webkit-box-shadow: inset 0px -5px 15px -10px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px -5px 15px -10px rgba(0,0,0,0.75);
    box-shadow: inset 0px -5px 15px -10px rgba(0,0,0,0.75);
    
    border-color: #999;
 }

ol#piano li.nBlanche.nAppuyee.bonneRep, ol#piano li.nBlanche.Bon:active {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b4e391+0,61c419+50,b4e391+100;Green+3D */
    background: #b4e391; /* Old browsers */
    background: -moz-linear-gradient(top, #b4e391 0%, #61c419 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #b4e391 0%, #61c419 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #b4e391 0%, #61c419 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#61c419',GradientType=0 ); /* IE6-9 */
    
    border-color: #99cc66;
}

ol#piano li.nBlanche.nAppuyee.mauvaiseRep, ol#piano li.nBlanche.Mauvais:active {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d64646+0,b71803+100 */
    background: #d64646; /* Old browsers */
    background: -moz-linear-gradient(top, #d64646 0%, #b71803 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #d64646 0%, #b71803 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #d64646 0%, #b71803 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d64646', endColorstr='#b71803',GradientType=0 ); /* IE6-9 */
    
    border-color: #cc3333;
}

ol#piano li.nNoire {
    height: 50%;
    color: white;
    border-color: #999;
    z-index: 10;
    margin-left: auto;
        
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#606060+0,0e0e0e+100 */
    background: #606060; /* Old browsers */
    background: -moz-linear-gradient(top, #0e0e0e 0%, #606060 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #0e0e0e 0%,#606060 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #0e0e0e 0%,#606060 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#606060',GradientType=0 ); /* IE6-9 */
    
    -webkit-box-shadow: 0px 5px 10px -5px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 10px -5px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 10px -5px rgba(0,0,0,0.75);
    
    
}

ol#piano li.nNoire.nAppuyee, ol#piano li.nNoire:active {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#606060+0,0e0e0e+100 */
    background: #000000; /* Old browsers */
    background: -moz-linear-gradient(top, #606060 0%, #0e0e0e 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #606060 0%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #606060 0%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606060', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
    
    -webkit-box-shadow: inset 0px -5px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px -5px 10px 0px rgba(0,0,0,0.75);
    box-shadow: inset 0px -5px 10px 0px rgba(0,0,0,0.75);
    
    border-color: #666;
}

ol#piano li.nNoire.nAppuyee.bonneRep, ol#piano li.nNoire.Bon:active {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D */
    background: #627d4d; /* Old browsers */
    background: -moz-linear-gradient(top,  #627d4d 0%, #1f3b08 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #627d4d 0%,#1f3b08 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */
    
    border-color: #99cc66;
 }

ol#piano li.nNoire.nAppuyee.mauvaiseRep, ol#piano li.nNoire.Mauvais:active {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a90329+0,6d0019+100 */
    background: #a90329; /* Old browsers */
    background: -moz-linear-gradient(top,  #a90329 0%, #6d0019 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #a90329 0%,#6d0019 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #a90329 0%,#6d0019 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
    
    border-color: #cc3333;
 }