/* -------------------------------------------------------------------- */ 
/*                                                                      */
/* Activeren diverse fonts die in de applicatie gebruikt kunnen worden. */
/*                                                                      */
/* -------------------------------------------------------------------  */

/* |===========================================
   | Lettertype » CALIBRI  (Basis lettertpye) |
   |=========================================== */


/* CALIBRI Regular */
   @font-face {
       font-family: 'Calibri';
       src: local('Calibri'), url('Calibri/Calibri.woff2') format('woff2'), url('Calibri/Calibri.woff') format('woff');
       font-weight: normal;
       font-style: normal;
   }
   
/* CALIBRI Bold */
   @font-face {
       font-family: 'Calibri';
       src: local('Calibri Bold'), url('Calibri/Calibri-Bold.woff2') format('woff2'), url('Calibri/Calibri-Bold.woff') format('woff');
       font-weight: bold;
       font-style: normal;
   }
   
/* CALIBRI Italic */
   @font-face {
       font-family: 'Calibri';
       src: local('Calibri Italic'), url('Calibri/Calibri-Italic.woff2') format('woff2'), url('Calibri/Calibri-Italic.woff') format('woff');
       font-weight: normal;
       font-style: italic;
   }
   
/* CALIBRI Bold Italic */
   @font-face {
       font-family: 'Calibri';
       src: local('Calibri Bold Italic'), url('Calibri/Calibri-BoldItalic.woff2') format('woff2'), url('Calibri/Calibri-BoldItalic.woff') format('woff');
       font-weight: bold;
       font-style: italic;
   }
   
/* CALIBRI Light */
   @font-face {
       font-family: 'Calibri';
       src: local('Calibri Light'), url('Calibri/Calibri-Light.woff2') format('woff2'), url('Calibri/Calibri-Light.woff') format('woff');
       font-weight: 300;
       font-style: normal;
   }
   
/* CALIBRI Light Italic */
   @font-face {
       font-family: 'Calibri';
       src: local('Calibri Light Italic'), url('Calibri/Calibri-LightItalic.woff2') format('woff2'), url('Calibri/Calibri-LightItalic.woff') format('woff');
       font-weight: 300;
       font-style: italic;
   }

/* |====================================================
   | Lettertype » ORBITRON  (voor GuitarJan.com logo)  |
   |==================================================== */

/* ORBITRON Regular */
   @font-face {
       font-family: 'Orbitron';
       src: local('Orbitron Regular'), 
            url('Orbitron/orbitron-v25-latin-regular.woff2') format('woff2'), 
            url('Orbitron/orbitron-v25-latin-regular.woff') format('woff'),
            url('Orbitron/Orbitron.ttf') format('truetype');
       font-weight: 400;
       font-style: normal;
   }
   
/* ORBITRON Medium */
   @font-face {
       font-family: 'Orbitron';
       src: local('Orbitron Medium'), url('Orbitron/orbitron-medium.otf') format('opentype');
       font-weight: 500;
       font-style: normal;
   }
   
/* ORBITRON Bold */
   @font-face {
       font-family: 'Orbitron';
       src: local('Orbitron Bold'), 
            url('Orbitron/Orbitron Bold.ttf') format('truetype'),
            url('Orbitron/orbitron-bold.otf') format('opentype');
       font-weight: 700;
       font-style: normal;
   }
   
/* ORBITRON Black */
   @font-face {
       font-family: 'Orbitron';
       src: local('Orbitron Black'), url('Orbitron/Orbitron Black.ttf') format('truetype');
       font-weight: 900;
       font-style: normal;
   }
   
/* ORBITRON Light */
   @font-face {
       font-family: 'Orbitron';
       src: local('Orbitron Light'), url('Orbitron/Orbitron-light.ttf') format('truetype');
       font-weight: 300;
       font-style: normal;
   }

/* |===============================================================================|
   | Lettertype » TOURNEY (Tussentitels & Effectregels) » Gebruiken voor "CHORDZ"  |
   |===============================================================================| */

 @font-face {
    font-family: 'Tourney';
    src: url('Tourney/Tourney-VariableFont_wdth,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 50% 200%;
    font-style: normal;
}

@font-face {
    font-family: 'Tourney';
    src: url('Tourney/Tourney-Italic-VariableFont_wdth,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 50% 200%;
    font-style: italic;
}

/* Light Italic */
@font-face {
    font-family: 'Tourney Condensed';
    src: url('Tourney/Tourney_Condensed-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

/* Regular */
@font-face {
    font-family: 'Tourney Condensed';
    src: url('Tourney/Tourney_Condensed-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Bold */
@font-face {
    font-family: 'Tourney Condensed';
    src: url('Tourney/Tourney_Condensed-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* Black (Zwaarste gewicht) */
@font-face {
    font-family: 'Tourney Condensed';
    src: url('Tourney/Tourney_Condensed-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

/* |========================================================================|
   | Lettertype » ARDOUR  (Lettertype met schaduw) » Gebruiken voor "LICKZ" |
   >========================================================================| */

   /* 1. Regular */
   @font-face {
     font-family: 'Ardour';
     src: url('Ardour/Ardour3d.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
   }
   
   /* 2. Black (Zwaar/Extra Vet) */
   @font-face {
     font-family: 'Ardour';
     src: url('Ardour/Ardour-Black.ttf') format('truetype');
     font-weight: 900;
     font-style: normal;
   }
   
   /* 3. Light Italic */
   @font-face {
     font-family: 'Ardour';
     src: url('Ardour/Ardour-LightItalic.ttf') format('truetype');
     font-weight: 300;
     font-style: italic;
   }
   
   /* 4. Variabele variant (indien beschikbaar als .ttf of .woff2) */
   @font-face {
     font-family: 'Ardour Variable';
     src: url('Ardour/Ardour-Variable.ttf') format('truetype-variations');
     font-weight: 100 900; /* Bereik van gewichten */
     font-style: oblique 0deg 20deg; /* Bereik van schuinte */
   }

/* |================================================
   | Lettertype » LINEAR  (voor MuzicK logo)       |
   |================================================ */

   /* 1. Bold (Gewicht 400) » Deze te gebruiken voor MuzicK logo */
@font-face {
    font-family: 'LinearBold';
    src: url('Linear/linear-shadow-bold.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }

   /* 2. Regular (Standaard) */
 @font-face {
     font-family: 'Linear';
     src: url('Linear/linear-shadow-regular.ttf') format('truetype');
     font-weight: 400;
     font-style: normal;
   }
   
  /* 3. Bold Italic (Gewicht 400) */
  @font-face {
      font-family: 'LinearBoldIt';
      src: url('Linear/linear-shadow-bold-italic.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
    }

/* |================================================
   | Lettertype » BIONIC (voor FreebieZ logo)      |
   |=============================================== */

 @font-face {
        font-family: 'Bionic';
        src: url('Bionic/12994-fontps.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
    } 

@font-face {
        font-family: 'BionicBold';
        src: url('Bionic/Bionic Type Bold.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
    } 

/* >================================================
   | Lettertype » MACEDONIA (voor ScrollZ logo)    |
   |================================================ */

 /* Standaard variant */
 @font-face {
        font-family: 'Macedonia';
        src: url('Macedonia/Macedonia.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    
/* Old variant */
@font-face {
        font-family: 'MacedoniaOld';
        src: url('Macedonia/Macedonia Old.ttf') format('truetype');
        font-weight: normal;
        font-style: italic; /* Vaak gebruikt voor 'Old' of 'Serif' stijlen */
    }
    
/* 3D Filled variant */
@font-face {
        font-family: 'Macedonia3D';
        src: url('Macedonia/Macedonia 3D Filled.ttf') format('truetype');
        font-weight: bold;
    }

/* |===========================================================================|
    | Lettertype » MEXICO  (Lettertype met schaduw) » Gebruiken voor "RHYTHMZ" |
    >==========================================================================| */

@font-face {
    font-family: 'Mexico Bold';
    src: url('Mexico/Mexico Shadow-Bold.ttf') format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: 'Mexico Heavy';
    src: url('Mexico/Mexico Shadow-Heavy.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'Mexico Light';
    src: url('Mexico/Mexico Shadow-Light.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'Mexico Regular';
    src: url('Mexico/Mexico Shadow-Regular.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'Mexico Xbold';
    src: url('Mexico/ Mexico Shadow-Xbold.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'Mexico Xlight';
    src: url('Mexico/ Mexico Shadow-Xlight.ttf') format('truetype');
    font-weight: bold;
}


* {
     box-sizing: border-box;
   }

html {
     background-color: rgb(0, 0, 0); /* Vult het volledige iframe canvas */
     }

body {
      background-color:rgb(0, 0, 0);          /* Declaratie zwarte achtergrondkleur           */
      color:white;                            /* Standaard kleur wit voor de lettertekens  */
      font-size:20px;                           /* Standaard fontgrootte op het scherm         */
      margin: 0 auto;                           /* 'auto' aan de zijkanten zorgt voor centrering */
      max-width: 1200px;
      font-family:calibri, Calibri, CALIBRI, orbitron, Orbitron, ORBITRON, Arial, Helvetica, sans-serif;
     }

/* ------------------------------------------------------------------------ */
/*                                                                          */
/* De CSS Class die de standaard layout van de buttons in de applicatie re- */
/* gelt, te weten een specifieke achtergrond- & letterkleur.                */
/*                                                                          */
/* ------------------------------------------------------------------------ */
   
.button {                          
         background-color: #77ab56;
         color: #fbdd7e;
         border: 2px solid black;
         border-bottom:4px solid #808080;  /* grijstint donker */
         border-right:3px solid #BEBEBE;   /* grijstint licht */ 
         border-radius:5px;  
         padding: 15px 32px;
         text-align: center;
         text-decoration: none;
         display: inline-block;
         font-size: 18px;
         font-weight:bold;
        }
     
.button:hover {
               background-color:#fbdd7e;
               color:#77ab56;

              }  

/* ------------------------------------------------------------------------ */
/*                                                                          */                                                                     
/* Onderstaande <STYLE> genereert de layouts/design van de twee buttons     */
/* die standaard rechtsonder op een webpagina verschijnen, waarbij één      */
/* button naar de landing page navigeert, en de andere button naar de bo-   */
/* venkant van de huidige pagina.                                           */  
/*                                                                          */                                                                     
/* ------------------------------------------------------------------------ */  
              
#indexBtn, #scrollBtn {
                       position:fixed;            
                       bottom: 20px;
                       background-color:#77ab56;
                       border:2px solid black;
                       border-radius:5px;
                       border-bottom:4px solid #808080;
                       border-right:2px solid #BEBEBE;
                       color:#fbdd7e;
                       padding:3px 10px;
                       text-align:center;
                       text-decoration:none;
                       display:inline-block;
                       font-size:18px;
                       right:115px;
                       width:75px;
                       height:40px; 	
                       z-index:1;   
                      }
#indexBtn:hover {
                 background-color:#fbdd7e;
                 color:#77ab56;            
                }
#scrollBtn {
            right:30px;
           }
#scrollBtn:hover {
                   background-color:#fbdd7e;
                   color:#77ab56;        
                  }		

.FullWidth {                               /* Als een <table> definitie niet de gehele breedte van het canvas vult, wordt het volgende */
            float:left;                    /* HTML-element er rechts van geplaatst, in plaats van eronder. Door de tabel binnen een    */
            width: calc(100% - 1px);       /* <div class="FullWidth", wordt de browser geforceerd om onder de tabel verder te gaan met */
            padding-left:10px;             /* de volgende HTML-elementen.                                                              */
            padding-right:10px;
           }

hr.saffronsmall {
                 width:100%;
                 border: 1px solid #feb209;    /* Kleur van de horizontale lijn is ".saffron"    */  
                 border-radius: 5px;           
                }     

hr.yellow {
           width:100%;
           border: 2px solid #F5DF4D;  
           border-radius: 5px;
          }            
               
/*|=============================================================|
  |                                                             |
  | <Style> definities voor aanpassing hyperlinks in webpagina. |
  |                                                             |
  |=============================================================|*/

a:link, a:visited, a:hover, a:active {
                                      text-decoration:none;
                                      color: black;
                                     }

h1 {                     /* Dit is een hoofdstuktitel   */
    font-size:36px;
    color:#77ab56; /* #009b77; */
   }
h2 {                     /* Dit is een hoofdstuktitel       */
    font-size:32px; 
    color:#009b77;
   }                                  
h3 {                     /* Dit is een paragraaf-titel    */
    font-size:25px;
    color:#91bc76;
   }
h4 {                     /* Hoofdstuktitel voor een Pop-Up venster  */
    font-size:20px;
    color:white;
   }
                                            
/*|=======================================================================|
   |                                                                      |
   | <Style> definitie voor de opmaak van tabellen in de theorie-modules. |
   |                                                                      |
   |======================================================================|*/

.datatable {
            float:left;
           }

.datatable, .datatable th, .datatable td {
                                   border: 1px solid #808080; 
                                   border-collapse: collapse;
                                   padding-left:10px;
                                   padding-right:10px;
                                   vertical-align:middle;
                                  }            
     
.datatable th {
               background-color: #77ab56;  /* Achtergrondkleur van de eerste rij in tabel is "groen"  */
               color:#fbdd7e;              /* Leestekenkleur van de eerste rij in tabel is "geel"     */
       }     


       .remove-white {
          /* Dit maakt de witte achtergrond van de afbeelding "transparant" */
          mix-blend-mode: multiply;

      }

   /* ------------------------------------------------------------------------- */
   /*                                                                           */
   /* Deze CSS Class regelt de hoofdmenu-structuur die in bepaalde theorie HTML */
   /* worden gebruikt. De verticale tabel nodig voor de presentatie op het      */
   /* browser-canvas, heeft een sub-class "menutable:hover", die via een <p>    */
   /* de celinhoud (tekst) wordt gelinkt, waardoor de tekstkleur verandert als  */
   /* de gebruiker over de tekst heen beweegt.                                  */
   /*                                                                           */
   /* ------------------------------------------------------------------------- */
                            
.vertical-table {
                 float:left;
                 vertical-align:middle;
                 border:hidden;
                 text-decoration:none;           /* Verwijderen van de onderstreping bij hyperlinks  */
                }                            
      
.vertical-table td {
                    padding-right:25px;
                   }                            
                       
.menutable:hover {
                  color:#ec2d01;            /* Tekstkleur hyperlinks verandert in ".tomato" */
                 }


/* |------------------------------------------------------------------------|
   |                                                                        |
   | via CSS een speciale "tooltip" functie ingebouwd, waarbij de akkoorden |
   | van een backing track zichtbaar worden in een Pop-Up Window, als de    |
   | bruiker over het akkoorden-pictogram hovert.                           |
   |                                                                        |---------------------------------|
   | De code komt van: https://stackoverflow.com/questions/11683620/how-to-display-pop-up-text-on-mouse-hover |
   |                                                                        |---------------------------------|
   |------------------------------------------------------------------------| */  

.tooltip-wrap {
                position:relative;
              }
.tooltip-wrap .tooltip-content {
                                 display:none;
                                 position:absolute;
                                 bottom:3%;
                                 left:70%;
                                 background-color:#ffffff;
                                 padding:.2em;
                                 border:3px solid #000000;
                                 border-radius:4px;
                                 z-index:99;
                                }
.tooltip-wrap:hover .tooltip-content {
                                      display:block;
                                     }

.color-split-freebiez {     /* |-----------------------------------------------------------|
                               | 2-kleuren <style> voor het "FreebieZ" logo.               |
                               |-----------------------------------------------------------| */
background: linear-gradient(to bottom, #87ceeb 50%, #f2b949 50%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
-webkit-text-stroke: 0.03px black;
font-weight: bold;
}

.color-split-muzick {     /* |-----------------------------------------------------------|
                             | 2-kleuren <style> voor het "MuzicK" logo.                 |
                             |-----------------------------------------------------------| */
background: linear-gradient(to bottom, #fbdd7e 57%, #77ab56 43%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
-webkit-text-stroke: 0.03px black;
font-weight: bold;
}

.color-split-scrollz {     /* |-----------------------------------------------------------|
                              | 2-kleuren <style> voor het "ScrollZ" logo.                |
                              |-----------------------------------------------------------| */
background: linear-gradient(to bottom, #fbdd7e 50%, #ec2d01 50%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
-webkit-text-stroke: 0.03px black;
font-weight: bold;
}

/* Kleurenschema voor het GuitarJan.com Logo */
.logo_red {color:#ec2d01;}.logo_green{color:#77ab56;}.logo_white{color: whitesmoke;}