@charset "UTF-8";

/* ------------------------------------------------------------------- */ 
/*                                                                     */
/* bootstrap CSS3 file voor de Webbased Gitaar Applicatie   */
/*                                                                     */
/* ------------------------------------------------------------------- */
  
@font-face {
            font-family:'Calibri';              /* FONT type declaratie werkt ook onder OS X van Apple */
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),
                 url('calibri.eot')
                 format('opentype');
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),
                 url('calibri.eot')
                 format('embedded-opentype');
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('calibri.otf')
                 format('opentype');
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('calibri.woff')
                 format('woff');                 
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('calibri.ttf')
                 format('truetype');
                 
/* De WOFF files zijn noodzakelijk om het font in Microsoft EDGE te kunnen weergeven */  

            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri.woff')
                 format('woff');
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri.woff2')
                 format('woff2');
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri-Bold.woff')
                 format('woff');
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri-Bold.woff2')
                 format('woff2');                 
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri-BoldItalic.woff')
                 format('woff');
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri-BoldItalic.woff2')
                 format('woff2');
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri-Italic.woff')
                 format('woff');
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri-Italic.woff2')
                 format('woff2');
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri-Light.woff')
                 format('woff');                 
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri-Light.woff2')
                 format('woff2');                 
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri-LightItalic.woff')
                 format('woff');	
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri-LightItalic.woff2')
                 format('woff2');	
	   
           /* De tweede externe FONT-family voor de website */
	                
            font-family:'Orbitron';
            src: local('orbitron'),
                 local('Orbitron'),
                 local('ORBITRON'),
                 url('orbitron-medium.otf')
                 format('opentype');
            src: local('orbitron'),
                 local('Orbitron'),
                 local('ORBITRON'),
                 url('orbitron-bold.otf')
                 format('opentype');
            src: local('orbitron'),
                 local('Orbitron'),
                 local('ORBITRON'),
                 url('Orbitron.ttf')
                 format('truetype');				 
            src: local('orbitron'),
                 local('Orbitron'),
                 local('ORBITRON'),
                 url('Orbitron Black.ttf')
                 format('truetype');				 
            src: local('orbitron'),
                 local('Orbitron'),
                 local('ORBITRON'),
                 url('Orbitron Bold.ttf')
                 format('truetype');				 		 
            src: local('orbitron'),
                 local('Orbitron'),
                 local('ORBITRON'),
                 url('Orbitron-light.ttf')
                 format('truetype');				 

/* De WOFF files zijn noodzakelijk om het font in Microsoft EDGE te kunnen weergeven */  

            src: local('orbitron'),
                 local('Orbitron'),
                 local('ORBITRON'),
                 url('orbitron-v25-latin-regular.eot')
                 format('embedded-opentype');
            src: local('orbitron'),
                 local('Orbitron'),
                 local('ORBITRON'),
                 url('orbitron-v25-latin-regular.svg')
                 format('svg');                 
            src: local('orbitron'),
                 local('Orbitron'),
                 local('ORBITRON'),
                 url('orbitron-v25-latin-regular.woff')
                 format('woff');
            src: local('orbitron'),
                 local('Orbitron'),
                 local('ORBITRON'),
                 url('orbitron-v25-latin-regular.woff2')
                 format('woff2');
            }                

/* Een extra declaratie om de font-family import in Microsoft EDGE te garanderen */            
            
@import 'fonts';        
@media screen and (min-width: 10px) {
                                     @font-face {
                                                 font-family: 'Orbitron';
                                                 src: url('orbitron-v25-latin-regular.woff2') format('woff2');
                                                 font-family:'Calibri';
                                                 src: url('Calibri.woff2') format('woff2');                                                 
                                                }
                                    }
                 
/* |--------------------------------------------------------------------------------------------------------------|
   |                                                                                                              |
   | Voor verdere uitleg en informatie over de font-type declaraties zoals hierboven gebruikt, zie de website:    | 
   |  http://www.webdesignerdepot.com/2013/01/how-to-use-any-font-you-like-with-css3/                             |
   |  https://google-webfonts-helper.herokuapp.com/fonts/orbitron?subsets=latin                                   |
   | https://stackoverflow.com/questions/40155468/media-queries-with-css3-and-font-face                           |
   |                                                                                                              |
   |--------------------------------------------------------------------------------------------------------------| */ 


   
 h1 {                                    /* Dit is een pagina titel   */
     font-size:36px;
     color:#1d1d1d;
    }
  
 h2 {                                   /* Dit is een sectie titel    */
     font-size:32px;
     color:#1d1d1d;
    }
 h3 {                                   /* Dit is een subsectie titel */
     font-size:28px;
     color:#1d1d1d;
    }

 h4 {                                  /* Dit is tekst tussentitel    */
     font-size:23px;
     color:#1d1d1d;
    }        
     
    
    
/*----- Reset -----*/

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   max-width:1200px;
   margin: 0 auto;
  }
  
body, html {
            background-color:#FFFFFF;          /* Declaratie witte achtergrondkleur                    */
            font-size:22px;
            margin:20 auto;                     /* Centreren van de pagina in het midden van het canvas */
            width:100%;
            font-family:Orbitron, calibri, Calibri, CALIBRI, Arial, Helvetica, sans-serif;
           }

div, p,
span, a, img,
h1, h2, h3, h4, h5, h6,
dl, dt, dd, ol, ul, li,
fieldset, form, label,
footer, header,
nav, section,
audio, video { margin: 0; padding: 0; border: 0; }

html { font-family: Orbitron, Calibri, Arial, sans-serif; font-size: 10px; color: #FFFFFF; }

/*body { font-size: 1.6rem; overflow-y: auto; } */

div, p, span, a, h1, h2, h3, h4, h5, h6, ul, li { box-sizing: border-box; }
ol, ul { display: block; list-style: none; }
li {  display: block; list-style: none; }
a { text-decoration: none; }

/*---------------------------------------- General { ----------------------------------------*/
body { background: #FFFFFF; }

header { position: relative; height: 65px; padding: 15px; border-bottom: 1px solid #ddd; }
header h1 { position: absolute; bottom: 15px; }

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {  }


button {                             
        background-color:#F5DF4D; 
        border: 2px solid #6e750e;
        border-radius:4px;
        color:#2b5797;   
        cursor:pointer;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 1.4rem;
        font-weight:bold;
       }

button:hover,
button.activeBtn { opacity: 1; }
button:active,
button:focus,
select:active,
select:focus { outline: none; }

.clear::after { content: ''; display: block; height: 0; visibility: hidden; clear: both; }

.collapser .collapserBody { display: none; }
.collapser[data-collapsed="false"] .collapserBody { display: block; }
.collapser[data-collapsed="true"] .collapserArrow { transform: rotate(90deg); }
.collapserHead { margin-bottom: 10px; border-bottom: 1px solid #ddd; }
.collapserHead > * { display: inline-block; vertical-align: middle; }
.collapserArrow { display: inline-block; width: 20px; height: 10px;
    background-image: url('../pic_basic/collapserArrow.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.collapserHead .collapserArrow { position: absolute; right: 0; bottom: 15px; }
.collapserHead,
.collapserBody { position: relative; }
.collapserHead::after,
.collapserBody::after { content: ''; display: block; height: 0; visibility: hidden; clear: both; }
.js-collapserTgl { cursor: pointer; }

/*-------------------- } General --------------------*/

/*---------------------------------------- Main { ----------------------------------------*/
main { padding: 15px; }

main { margin-bottom: 20px; padding: 10px; font-size: 1.8rem; }
main section { margin-bottom: 15px; padding: 15px; border-radius: 3px; }
main section:last-of-type { margin: 0; }

main section .wrap { position: relative; width: 100%; padding: 15px; }

main section .bubble { width: 30px; height: 30px; font-size: 1.4rem; text-align: center; user-select: none; border: 1px solid #ddd; border-radius: 50%; background: #154D85; color: #ffff80;  }

main .stringSetup { font-size: 1.4rem; }
main .stringSetup .stringTuner { width: 100%; margin-bottom: 5px; padding: 5px; background: #c0c0c0;  } /* Oorspronkelijke kleur = #4D4D4D; */
main .stringSetup .stringTuner > div { display: inline-block; }
main .stringSetup .stringTuner .index { margin-right: 15px; float: left; padding-top:8px; }
main .stringSetup .stringTuner .tuner { float: left; }
main .stringSetup .stringTuner .tuner .tunerNote {
	display: inline-block;
	width: 40px;
	height: 24px;
	margin-right: 5px;
    opacity: 1;
	user-select: none;
}

main .stringSetup .stringTuner .tuner .tunerNote[data-active="true"] { background:#00aba9; color:#eff4ff; font-weight:bold; font-size:larger; }
main .stringSetup .stringTuner .tuner .tunerNote:hover { background:  #00aba9; color:#eff4ff; }
main .stringSetup .stringTuner .tuner .tunerNote .noteInner {  }
main .stringSetup .stringTuner .cancelString { float: right; }
main .stringSetup .stringTuner .cancelString:hover { background: #00aba9; color:#eff4ff; }
main .stringSetup .btnWrap { padding: 3px; }
main .stringSetup .btnWrap .addStringBtn { float: right; }
main .stringSetup .btnWrap .addStringBtn:hover { background: #00aba9; color:#eff4ff; }

main .scaleSetup { margin-top: 20px; }
main .scaleSetup > div { display: inline-block; margin-right: 20px; vertical-align: top; }
main .scaleSetup label {  }
main .scaleSetup label span { vertical-align: middle; }
main .scaleSetup label select { padding: 5px; font-size: 1.4rem; color: #ddd; border: 1px solid #ddd; border-radius: 5px; background: #252525; } 
main .renderScale {  }
main .renderScale button { padding: 8px 15px; float: right; font-size: 1.8rem; border: 1px solid #ddd; }
main .renderScale button:hover { background: #ffff81; color:#77ab56; }
main .scaleSetup .renderScale { margin-right: 0; float: right; }

main .fretboardWrap {  }
main .fretboardWrap .fretboard { width: 100%;
    background-image: url('../pic_basic/fretboardBG.png');
    background-size: cover;
}
main .fretboardWrap .controls { margin-top: 20px; }
main .fretboardWrap .controls button { margin-left: 15px; float: right; padding: 2px;}

main .fretboard .fbRow { height: 40px; }
main .fretboard .fbRow .fretCell { display: inline-block; position: relative; width: calc((100% - 50px) / 12); height: 40px; }
main .fretboard .fbRow .fretCell:first-child { width: 50px; background: #2B2B2B; background-image: none !important; }
main .fretboard .fbRow .fretCell .text { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }

main .fretboard .fbRow.stringRow {  }
main .fretboard .fbRow.stringRow .fretCell {
    background-image: url('../pic_basic/fretMid.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
}
main .fretboard .fbRow.stringRow .fretCell:first-child { border-right: 12px solid black; }
main .fretboard .fbRow.stringRow:first-child .fretCell { background-image: url('../pic_basic/fretTop.png'); }
main .fretboard .fbRow.stringRow:nth-last-child(2) .fretCell { background-image: url('../pic_basic/fretEnd.png'); }
main .fretboard .fbRow.stringRow .fretCell .string { display: inline-block; position: absolute; width: 100%; height: 7px; top: 50%; left: 0; transform: translateY(-50%); background: grey; color:#77AB56; }
main .fretboard .fbRow.stringRow .fretCell:first-child .string { display: none; }
main .fretboard .fbRow.stringRow .fretCell .text { display: none; box-shadow: -2px 0px 5px 2px rgba(0, 0, 0, 0.7); }
main .fretboard .fbRow.stringRow .fretCell:first-child .text { display: inline-block; }
main .fretboard .fbRow.stringRow .fretCell.inScale .text { display: inline-block; }
main .fretboard .fbRow.stringRow .fretCell.inScale .text.js-highlightTriad { background: #ad5700; }
main .fretboard .fbRow.stringRow .fretCell.notInScale .text { width: 24px; height: 24px; font-size: 1.2rem; background: #252525; }
main .fretboard .fbRow.stringRow .fretCell.notInScale .text.overlay { display: none; }
main .fretboard .fbRow.stringRow .fretCell.inScale.rootNote .text { width: 35px; height: 35px; line-height: 28px; font-weight: bold; border-width: 2px; }
main .fretboard.highlightIntervals .fbRow.stringRow .fretCell.inScale.rootNote .text.overlay { background: #138a45; }
main .fretboard.highlightIntervals .fbRow.stringRow .fretCell.inScale.thirdNote .text.overlay { background: #7a840c; }
main .fretboard.highlightIntervals .fbRow.stringRow .fretCell.inScale.fifthNote .text.overlay { background: #af372e; }
main .fretboard.triadIsHighlighted .fbRow.stringRow .fretCell.inScale .text.overlay { display: none; }
main .fretboard.displayAll .fbRow.stringRow .fretCell .text { display: inline-block; }

main .fretboard .fbRow.fretNumRow .fretCell { background: #2B2B2B;color:#ffffff;  } 
main .fretboard .fbRow.fretNumRow .fretCell:first-child .text { display: none; }

main .triadsWrap {  }
main .triadsWrap .triadsList {  }
main .triadsWrap .triadsList .triad { display: inline-block; margin-right: 15px; padding: 10px; text-align: center; cursor: pointer; border: 1px solid #ddd; border-radius: 3px; background: #4A4A4A; color: #ffff80; }
main .triadsWrap .triadsList .triad:hover { box-shadow: 0 0 15px black; background: #6b6b6b; }
main .triadsWrap .triadsList .triad:active,
main .triadsWrap .triadsList .triad[data-shown="true"]:active { transform: scale(0.96); }
main .triadsWrap .triadsList .triad[data-shown="true"] { transform: scale(1.04); box-shadow: 0 0 15px black; background: #6b6b6b; }
main .triadsWrap .triadsList .triad[data-shown="true"] .bubble { background: #ad5700; }
main .triadsWrap .triadsList .triad > div { margin-bottom: 10px; }
main .triadsWrap .triadsList .triad > div:last-of-type { margin-bottom: 0; }
main .triadsWrap .triadsList .triad .triadType {  }
main .triadsWrap .triadsList .triad .triadNote {  }

/*-------------------- } Main --------------------*/