/* |-------------------------------------------------------|
   |                                                       |
   | Hier begint de definitie van de responsieve structuur |
   |                                                       |
   |-------------------------------------------------------| */   

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   max-width:100%;
   margin: 0 auto;
  }

html, body {
            font-size:22px;
	        height:100%;    
	        font-family:calibri, Calibri, CALIBRI, orbitron, Orbitron, ORBITRON, Courier Std, Arial, Helvetica, sans-serif;
           margin-right: 30px;
           margin-left: 30px;
           }
  
/* |-------------------------------------------------------|
   |                                                       |
   | De status van de diverse hyperlinks in de applicatie. |
   | Onderstaand is de verplichte volgorde voor de layout. |   
   |                                                       |
   |-------------------------------------------------------| */ 			   

/* nog niet bezochte link */
a:link {
        color:#000000;
        text-decoration:none;
       }

/* bezochte link */
a:visited {
           color:#000000;
           text-decoration:none;
          }

/* hoveren met de muis */
a:hover {
         color:#000000;
         text-decoration:none;
         }

/* geselecteerde link */
a:active {
          color:#000000;
          text-decoration:none;
         }			   
		 
/* |----------------------|
   |                      |
   | Diverse declaraties  |   
   |                      |
   |----------------------| */ 	
   
.vertLijn {
           border-left:4px solid #cf0234;
           height:100%;
 }

/* ------------------------------------------------------------------------ */
/*                                                                          */
/* De CSS Class die de standaard layout van de buttons in de applicatie re- */
/* gelt, te weten een specifieke achtergrond- & letterkleur.                */
/*                                                                          */
/* ------------------------------------------------------------------------ */

.button {                          
        background-color:#fbdd7e;
        color:#000000;   
        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:#77ab56;
               color:#ffffff;
			  }  	   
  
a:link, a:active {                       /* De opmaak van de hyperlinks die parallel lopen   */  
                  text-decoration:none;  /* met de opmaak van de buttons, omdat de links in  */
				  color:black;           /* combinatie met de buttons worden gebruikt.       */
                 }
		
/* ------------------------------------------------------------------------ */
/*                                                                          */                                                                     
/* Onderstaande <STYLE> genereert de layouts/design van de twee buttons     */
/* die standaard rechtsonder op een webpagina verschijnen, waarbij een      */
/* button naar de landing page navigeert, en de andere button naar de bo-   */
/* venkant van de huidige pagina.                                           */  
/*                                                                          */                                                                     
/* ------------------------------------------------------------------------ */  

#indexBtn2, #scrollBtn2 {
               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;
               height:40px; 	
               z-index:1;   
                      }

#helpBtn2 {
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;
height:40px; 	
z-index:1;   
         }
#scrollBtn2:hover, #indexBtn2:hover {
   background-color:#77ab56;
   color:#fbdd7e;
}


#helpBtn2:hover {
   background-color: #fbdd7e;
   color: #77ab56;
}

#indexBtn2 {
   right:30px;
   width:100px;
  }
#scrollBtn2 {
            right:310px;
            width:125px;
           }
#helpBtn2 {
   right:200px;
   width:100px;
  }


/* ------------------------------------------------------------------------ */
/*                                                                          */
/* De CSS Classes die nodig zijn om de <h> tags, voor de diverse hoofdstuk- */
/* en paragraaf-aanduidingen, op te maken. Overige opmaakdefinities zijn    */
/* tevens in onderstaande CSS-sectie te vinden.                             */
/*                                                                          */
/* ------------------------------------------------------------------------ */

 h1 {                                    /* Dit is een hoofdstuktitel   */
     font-size:36px;
     color:#cf0234;                      /* Lettertypekleur = ".cranberry" */
    }
  
 h2 {                                    /* Dit is een hoofdstuktitel       */
     font-size:32px; 
     color:#9e003a;                      /* Lettertypekleur = ".strawberry" */
    }

 h3 {                                    /* Dit is een paragraaf-titel    */
     font-size:25px;
     color:#cf0234;                      /* Lettertypekleur = ".cherry" */
    }

 h4 {                                    /* Hoofdstuktitel voor een Pop-Up venster  */
     font-size:20px;
     color:#3d0734;                      /* Lettertypekleur = ".aubergine" */
    }
                                
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;
           }