setlocale NOK <hr>
      <!-- Trigger/Open The Modal -->
      <button style='display: none;'  id='myBtn_veJTcSZMno'>Open Modal</button>
    
      <!-- The Modal -->
      <div id='veJTcSZMno' class='modal'>
    
        <!-- Modal content -->
        <div class='modal-content'>
          <div class='modal-header'>
            <!--<span class='close'>&times;</span>-->
            <p style='text-align: center; font-size:20px;'>Attentie
          </div>
          <div class='modal-body' id='popupmsg'>
            <p style='font-size:15px;'><span class='w3-large'>Kies een categorie a.u.b..</span><br>
<br>
</p>
          </div>
          <div class='modal-footer'>
            <p style='text-align: center; font-size:10px;'><img src='../../shared/images/jva/jva_logo.png' style=' width:10%;  ' alt='Organisatie logo' ><br><br><input type='button' class='w3-btn w3-deep-purple w3-large' id='knop_veJTcSZMno' value='Ok, duidelijk. Ik kies een categorie.' autofocus /></p><br>
          </div>
        </div>
      </div>
    	
    <style>
    
  /*   
  .button {
      background-color: white;
      color: black;
      border: 2px solid #673ab7;
      
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px; 
  }

  .button:hover {
      background-color: #673ab7; 
      color: white;
  }
  */

  /* The Modal (background) */
  .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }

  /* Modal Content */
  .modal-content {
      position: relative;
      background-color: #fefefe;
      margin: auto;
      padding: 0;
      /* border: 1px solid #888; */
      width: 80%;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
      -webkit-animation-name: animatetop;
      -webkit-animation-duration: 0.4s;
      animation-name: animatetop;
      animation-duration: 0.4s
  }

  /* Add Animation */
  @-webkit-keyframes animatetop {
      from {top:-300px; opacity:0} 
      to {top:0; opacity:1}
  }

  @keyframes animatetop {
      from {top:-300px; opacity:0}
      to {top:0; opacity:1}
  }

  /* The Close Button 
  .close {
      color: white;
      float: right;
      font-size: 28px;
      font-weight: bold;
  }

  .close:hover,
  .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
  }
  */
  .modal-header {
      padding: 2px 16px;
      background-color: #2196F3;
      color: white;
  }

  .modal-body {
    padding: 2px 16px;
    background-color: white;
    color: black;
  }

  .modal-footer {
      padding: 2px 16px;
      background-color: white;
      color: black;
  }
  </style>
  



















  <script>

    
    function CallPopup(c_Parm='none', c_Id='none') {

      // Get the modal
      var modal = document.getElementById(c_Id);
  
      // Get the button that opens the modal
      var btn = document.getElementById('myBtn_' + c_Id );
  
      // Get the <span> element that closes the modal
      var span = document.getElementsByClassName('close')[0];
  
      //alert('c_Id [' + c_Id + '] modal [' + modal  + '] btn [' + btn + '] span [' + span);
  
      modal.style.display = 'block';
      if ( c_Parm != 'none') {
        //alert(c_Parm);
        document.getElementById('knop_' + c_Id).onclick = function() {
          modal.style.display = 'none';
          document.getElementById(c_Parm).style.backgroundColor = 'mistyrose' ; 
          document.getElementById(c_Parm).focus();
        };
      }
    } // Einde CallPopup
    

    // When the user clicks the button, open the modal
    //btn.onclick = function() {
    //  modal.style.display = 'block';
    //}

      
    // Wanneer knop dan sluiten en terug
    //knop.onclick = function() {
    //  modal.style.display = 'none';
    //}
        
    // When the user clicks on <span> (x), close the modal en terug
    //span.onclick = function() {
    //  modal.style.display = 'none';
    //}

    // When the user clicks anywhere outside of the modal, close it
    //window.onclick = function(event) {
    //  if (event.target == modal) {
    //      modal.style.display = 'none';
    //  }
    //}

  </script>
  
<!DOCTYPE html>
<html>
<head>
<title>Grasbaanrace Molenaarsgraaf</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  
.arrow-animated {
    font-size: 1em;
    animation: arrow-float 1s infinite;
    color:black;
}

body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
  height: 100%;
  color: #777;
  line-height: 1.8;
}

/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
  background-image: url('../images/Molenaarsgraaf_7.jpg');
  min-height: 100%;
}

/* Second image (Waarom) */
.bgimg-2 {
  background-image: url("../images/Molenaarsgraaf_8.jpg");
  min-height: 400px;
}

/* Third image (Inschrijven) */
.bgimg-3 {
  background-image: url("../images/Molenaarsgraaf_3.jpg");
  min-height: 400px;
}

/* Third image (Uitslag) */
.bgimg-4 {
  background-image: url("../images/Molenaarsgraaf_4.jpg");
  min-height: 400px;
}

/* Third image (Contact) */
.bgimg-5 {
  background-image: url("../images/Molenaarsgraaf_7.jpg");
  min-height: 400px;
}

/* Third image (Contact) */
.bgimg-6 {
  background-image: url("../images/grasbaan_zaandam_1927.jpg");
  min-height: 400px;
}

.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1600px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
    min-height: 400px;
  }
}

.tab {
    display: inline-block;
    margin-left: 4em;
}

</style>
</head>
<body>

<!-- Navbar (sit on top) -->
<div class="w3-top">
  <div class="w3-bar" id="myNavbar">
    <a class="w3-bar-item w3-button w3-hover-black w3-hide-medium w3-hide-large w3-right" href="javascript:void(0);" onclick="toggleFunction()" title="Toggle Navigation Menu">
      <i class="fa fa-bars"></i>
    </a>
    <a href="#home"         class="w3-bar-item w3-button w3-hover-deep-purple">                <i class="fa fa-home">      </i> Home</a>
    <a href="#waarom"       class="w3-bar-item w3-button w3-hover-deep-purple w3-hide-small "> <i class="fa fa-question">  </i> Waarom</a>
    <a href="#hoewat"       class="w3-bar-item w3-button w3-hover-deep-purple w3-hide-small "> <i class="fa fa-question">  </i> Hoe, wat, waar</a>
    <a href="#inschrijven"  class="w3-bar-item w3-button w3-hover-deep-purple w3-hide-small">  <i class="fa fa-pencil">    </i> Inschrijven</a>
    <a href="#uitslag"      class="w3-bar-item w3-button w3-hover-deep-purple w3-hide-small">  <i class="fa fa-th-list">   </i> Uitslag</a>
    <a href="#poster"       class="w3-bar-item w3-button w3-hover-deep-purple w3-hide-small">  <i class="fa fa-picture-o"> </i> Poster</a>
    <a href="#contact"      class="w3-bar-item w3-button w3-hover-deep-purple w3-hide-small">  <i class="fa fa-envelope">  </i> Contact</a>
    <!-- <a href="#"             class="w3-bar-item w3-button w3-hide-small w3-right w3-hover-red"><i class="fa fa-search"></i></a>-->
  </div>

  <!-- Navbar on small screens -->
  <div id="navDemo"         class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium">
    <a href="#waarom"       class="w3-bar-item w3-button" onclick="toggleFunction()">Waarom</a>
    <a href="#inschrijven"  class="w3-bar-item w3-button" onclick="toggleFunction()">Inschrijven</a>
    <a href="#contact"      class="w3-bar-item w3-button" onclick="toggleFunction()">Contact</a>
    <!-- <a href="#"             class="w3-bar-item w3-button">Zoeken</a> -->
  </div>
</div>


<!-- 
--------------------------------------------------
HOME 
--------------------------------------------------
-->
<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">
  <div class="w3-display-middle" style="white-space:nowrap;">
  <span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide w3-animate-opacity">Grasbaanrace Molenaarsgraaf, vrijdag 5 september</span> <br>
    <div class="arrow-animated w3-xlarge w3-center">&darr;</div>
  </div>
</div>

<!-- Container (About Section) -->
<div class="w3-content w3-container w3-padding-64" id="waarom">
  <h1 class="w3-center w3-xlarge">Waarom</h1>
  <p class="w3-large">
    Sowieso omdat het leuk is.<br>
    <br>
    Grasbaanraces waren honderd jaar geleden erg populair in Noord-Holland en West Brabant. 
    Op een veld werd een rondje gemaakt van paaltjes en touw, dat volstond als parkoers. 
    Inmiddels is iedereen dit vergeten, maar zou het niet geweldig zijn als we deze oude traditie weer nieuw leven kunnen inblazen?<br>
    <br>
    Op vrijdag 5 september wordt in Molenaarsgraaf de geschiedenis herschreven op het veld van IJsclub De Graafstroom 
    met korte snelle wedstrijden voor Jeugd en Senioren.<br>
    <br>
    Een nieuwe uitdaging voor de deelnemers en een leuke avond voor het publiek.<br>
    <br>
    Dit wil iedereen toch meemaken?<br>
    <div class="w3-center">
      <a href='../images/grasbaan_zaandam_1927.jpg' target='newp_'><img src="../images/grasbaan_zaandam_1927.jpg" class="w3-image w3-round" style="width:100%"></a><br>
      Grasbaanrace Zaandam 1927<br>

    </div>
    <div style='height:500px;' ></div>
  </p>
  
</div>


<!--
--------------------------------------------------
Hoe, wat, waar?
--------------------------------------------------
-->
<div class="bgimg-6 w3-display-container w3-opacity-min">
  <div class="w3-display-middle">
    <span class="w3-xxlarge w3-text-black w3-wide">Hoe, wat, waar?</span>
  </div>
</div>

<!-- Container (About Section) -->
<div class="w3-content w3-container w3-padding-64" id="hoewat">
  <p class="w3-large">

  <h1 class="w3-center w3-xlarge">Wedstrijd</h1>
  <div class='w3-large'>
  We weten dat we linksom rijden, de rest kan nog worden aangepast afhankelijk van het aantal deelnemers. <br>
  <br>
  Uitgangspunt is korte snelle ritten in lijn met behapbare groepen als kwalificatieseries en een afvalrit als finale. 
  Grootte van de groepen, aantal ritten en aantal ronden afhankelijk van het aantal deelnemers.<br>
  <br>
  De organisatie stelt zich flexibel op en zal tot kort voor de start inspelen op de situatie. 
  Nog niet alles is dus zeker, maar dat maakt het alleen maar leuker. <br> 
  <br>
  Er worden rondjes gereden op kortgemaaid gras. Deelname op MTB, gravelbike of crosser (kromme sturen).<br>
  Zoals al eerder gezegd: Alles hangt af aan het aantal deelnemers.<br>
  Maar . . . als standaard houden we het volgende aan:<br>
  </div>

    <h1 class="w3-center w3-xlarge">Hoe, wat, waar?</h1>
    <table  class='w3-large' style='width:70%; margin-left:auto; margin-right:auto;'>
      <tr><td>Datum       </td><td><strong>vrijdag 5 september</strong>                                            </td></tr>
      <tr><td>Locate      </td><td><strong>IJsbaan Molenaarsgraaf, Van Arkelstraat 13B</strong>                                               </td></tr>
      <tr style='vertical-align: text-top;'><td>Inschrijven </td><td><strong>- Onze voorkeur gaat uit naar vooraf op deze site. Maar wees niet bang, je zit nergens aan vast.<br>- Op de dag zelf</strong> </td></tr>
      <tr style='vertical-align: text-top;'><td>Kosten      </td><td><strong>- Jeugd gratis.<br> - Volwassenen &euro;5,=</strong>       </td></tr>
      <tr><td>Aanmelden   </td><td><strong>Vanaf 16:00, IJsbaan Molenaarsgraaf, Van Arkelstraat 13B</strong>                                             </td></tr>
    </table>

    <br>
    <h1 class="w3-center w3-xlarge">Categorieën</h1>

    <table  class='w3-large' style='width:50%; margin-left:auto; margin-right:auto;'>
      <tr class='w3-gray'><td style='color:white;'>Categorie</td><td style='color:white;'>Inschrijven vanaf</td><td style='color:white;'>Start</td></tr>
      <tr><td> Jeugd 6 t/m 10                   </td><td> 16:00-16:45 </td><td> 17:00 </td></tr><tr><td> Jeugd 11 t/m 15                  </td><td> 16:00-16:45 </td><td> 17:00 </td></tr><tr><td> Dames 16+                        </td><td> 18:00-18:45 </td><td> 19:00 </td></tr><tr><td> Heren 40+                        </td><td> 18:00-18:45 </td><td> 19:00 </td></tr><tr><td> Heren 16 t/m 39                  </td><td> 18:00-18:45 </td><td> 19:00 </td></tr>    </table>

    <br>


  </p>
  <div style='height:200px;' ></div>
  </div>

<!--
--------------------------------------------------
INSCHRIJVEN
--------------------------------------------------
-->
<div class="bgimg-2 w3-display-container w3-opacity-min">
  <div class="w3-display-middle">
    <span class="w3-xxlarge w3-text-black w3-wide">Inschrijven</span>
  </div>
</div>

<!-- Container (Portfolio Section) -->
<div class="w3-content w3-container w3-padding-64" id="inschrijven">
  <h3 class="w3-center">Inschrijven</h3>
  <p class="w3-center">

    
      <!-- Trigger/Open The Modal -->
      <button style='display: none;'  id='myBtn_@qIb5i6CgE'>Open Modal</button>
    
      <!-- The Modal -->
      <div id='@qIb5i6CgE' class='modal'>
    
        <!-- Modal content -->
        <div class='modal-content'>
          <div class='modal-header'>
            <!--<span class='close'>&times;</span>-->
            <p style='text-align: center; font-size:20px;'>Attentie
          </div>
          <div class='modal-body' id='popupmsg'>
            <p style='font-size:15px;'><span class='w3-large'>Email verstuurd.</span><br><br></p>
          </div>
          <div class='modal-footer'>
            <p style='text-align: center; font-size:10px;'><img src='../../shared/images/jva/jva_logo.png' style=' width:10%;  ' alt='Organisatie logo' ><br><br><input type='button' class='w3-btn w3-deep-purple w3-large' id='knop_@qIb5i6CgE' value='Ok, duidelijk. Bedankt.' autofocus /></p><br>
          </div>
        </div>
      </div>
    
      <!-- Trigger/Open The Modal -->
      <button style='display: none;'  id='myBtn_dF7P0yuYRq'>Open Modal</button>
    
      <!-- The Modal -->
      <div id='dF7P0yuYRq' class='modal'>
    
        <!-- Modal content -->
        <div class='modal-content'>
          <div class='modal-header'>
            <!--<span class='close'>&times;</span>-->
            <p style='text-align: center; font-size:20px;'>Attentie
          </div>
          <div class='modal-body' id='popupmsg'>
            <p style='font-size:15px;'><span class='w3-large'>Kies een categorie a.u.b..</span><br><br></p>
          </div>
          <div class='modal-footer'>
            <p style='text-align: center; font-size:10px;'><img src='../../shared/images/jva/jva_logo.png' style=' width:10%;  ' alt='Organisatie logo' ><br><br><input type='button' class='w3-btn w3-deep-purple w3-large' id='knop_dF7P0yuYRq' value='Ok, duidelijk. Ik kies een categorie.' autofocus /></p><br>
          </div>
        </div>
      </div>
    	
    <style>
    
  /*   
  .button {
      background-color: white;
      color: black;
      border: 2px solid #673ab7;
      
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px; 
  }

  .button:hover {
      background-color: #673ab7; 
      color: white;
  }
  */

  /* The Modal (background) */
  .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }

  /* Modal Content */
  .modal-content {
      position: relative;
      background-color: #fefefe;
      margin: auto;
      padding: 0;
      /* border: 1px solid #888; */
      width: 80%;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
      -webkit-animation-name: animatetop;
      -webkit-animation-duration: 0.4s;
      animation-name: animatetop;
      animation-duration: 0.4s
  }

  /* Add Animation */
  @-webkit-keyframes animatetop {
      from {top:-300px; opacity:0} 
      to {top:0; opacity:1}
  }

  @keyframes animatetop {
      from {top:-300px; opacity:0}
      to {top:0; opacity:1}
  }

  /* The Close Button 
  .close {
      color: white;
      float: right;
      font-size: 28px;
      font-weight: bold;
  }

  .close:hover,
  .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
  }
  */
  .modal-header {
      padding: 2px 16px;
      background-color: #2196F3;
      color: white;
  }

  .modal-body {
    padding: 2px 16px;
    background-color: white;
    color: black;
  }

  .modal-footer {
      padding: 2px 16px;
      background-color: white;
      color: black;
  }
  </style>
  



















  <script>

    
    function CallPopup(c_Parm='none', c_Id='none') {

      // Get the modal
      var modal = document.getElementById(c_Id);
  
      // Get the button that opens the modal
      var btn = document.getElementById('myBtn_' + c_Id );
  
      // Get the <span> element that closes the modal
      var span = document.getElementsByClassName('close')[0];
  
      //alert('c_Id [' + c_Id + '] modal [' + modal  + '] btn [' + btn + '] span [' + span);
  
      modal.style.display = 'block';
      if ( c_Parm != 'none') {
        //alert(c_Parm);
        document.getElementById('knop_' + c_Id).onclick = function() {
          modal.style.display = 'none';
          document.getElementById(c_Parm).style.backgroundColor = 'mistyrose' ; 
          document.getElementById(c_Parm).focus();
        };
      }
    } // Einde CallPopup
    

    // When the user clicks the button, open the modal
    //btn.onclick = function() {
    //  modal.style.display = 'block';
    //}

      
    // Wanneer knop dan sluiten en terug
    //knop.onclick = function() {
    //  modal.style.display = 'none';
    //}
        
    // When the user clicks on <span> (x), close the modal en terug
    //span.onclick = function() {
    //  modal.style.display = 'none';
    //}

    // When the user clicks anywhere outside of the modal, close it
    //window.onclick = function(event) {
    //  if (event.target == modal) {
    //      modal.style.display = 'none';
    //  }
    //}

  </script>
  
<div class="w3-container w3-center w3-sand w3-large">
<br>

  <form id="form1" name="form1" method="post" action="">
  
  <table class='w3-table-all w3-hoverable'>
  <tr>
    <td>Voornaam</td>
    <td><input class='w3-input w3-border w3-hover-border-blue' maxlength=20 size=20 name="voornaam" type="text" id="voornaam" value="" placeholder='Voornaam' required/></td>
  </tr>
  <tr>
    <td>Tussenvoegsel</td>
    <td><input class='w3-input w3-border w3-hover-border-blue' maxlength=10 size=10 name="tussenvoegsel" type="text" id="voornaam" value="" placeholder='Tussenvoegsel' /></td>
  </tr>
  <tr>
    <td>Achternaaam</td>
    <td><input class='w3-input w3-border w3-hover-border-blue' maxlength=30 size=30 name="achternaam" type="text" id="achternaam" value="" placeholder='Achternaam' required/></td>
  </tr>
  <tr>
    <td>Geboortedatum</td>
    <td><input class='w3-input w3-border w3-hover-border-blue' maxlength=50 size=50 name="geboortedatum" type="date" id="geboortedatum" value="" required/></td>
  </tr>
  <tr>
    <td>Woonplaats</td>
    <td><input class='w3-input w3-border w3-hover-border-blue' maxlength=50 size=50 name="woonplaats" type="text" id="woonplaats" value="" placeholder='Woonplaats' required/></td>
  </tr>
  <tr>
    <td>Categorie</td>
    <td>
    	<select class='w3-input w3-border w3-hover-border-blue' id="categorie" name="categorie" required onchange="ChkCategorie();">
      <option value="0">Kies een categorie</option>
      <option value='E-klasse'> Jeugd 6 t/m 10                   </option> 
<option value='F-klasse'> Jeugd 11 t/m 15                  </option> 
<option value='C-klasse'> Dames 16+                        </option> 
<option value='B-klasse'> Heren 40+                        </option> 
<option value='A-klasse'> Heren 16 t/m 39                  </option> 
			</select>

    </td>
  </tr>

 </table>
 <br>
 <button class='w3-btn w3-deep-purple w3-hover-purple w3-ripple'  type='submit' />Inschrijven</button><br>

 <input type="hidden" name="MM_update" value="form1" />

 <br>

  </form>

</div>


    <p class="w3-large w3-center w3-padding-16">Aantal inschrijvingen</p>
    <p class="w3-wide"> Jeugd 6 t/m 10</p>
    <div class="w3-light-grey">
      <div class="w3-container w3-padding-small w3-dark-grey w3-center" style="width:0%">0</div>
    </div>
    <p class="w3-wide"> Jeugd 11 t/m 15</p>
    <div class="w3-light-grey">
      <div class="w3-container w3-padding-small w3-dark-grey w3-center" style="width:0%">0</div>
    </div>
    <p class="w3-wide"> Dames 16+</p>
    <div class="w3-light-grey">
      <div class="w3-container w3-padding-small w3-dark-grey w3-center" style="width:0%">0</div>
    </div>
    <p class="w3-wide"> Heren 40+</p>
    <div class="w3-light-grey">
      <div class="w3-container w3-padding-small w3-dark-grey w3-center" style="width:2%">2</div>
    </div>
    <p class="w3-wide"> Heren 16 t/m 39 </p>
    <div class="w3-light-grey">
      <div class="w3-container w3-padding-small w3-dark-grey w3-center" style="width:2%">2 </div>
    </div>
  </p>
</div>
<div class="w3-large w3-center w3-padding-16">
  <table style='width:30%; margin-left:auto; margin-right:auto;'>
    <tr class='w3-left-align'>
      <td></td>
      <td class='w3-left-align'><a class='w3-btn w3-deep-purple w3-hover-purple w3-ripple' href='./toon_deelnemers.php?cat=E-klasse' target='_cat1'><i class="fa fa-th-list"> Jeugd 6 t/m 10 </i></a></td>
      <td class='w3-left-align'><a class='w3-btn w3-deep-purple w3-hover-purple w3-ripple' href='./toon_deelnemers.php?cat=F-klasse' target='_cat2'><i class="fa fa-th-list"> Jeugd 11 t/m 15 </i></a></td>
      <td class='w3-left-align'><a class='w3-btn w3-deep-purple w3-hover-purple w3-ripple' href='./toon_deelnemers.php?cat=C-klasse' target='_cat1'><i class="fa fa-th-list"> Dames 16+ </i></a></td>
      <td class='w3-left-align'><a class='w3-btn w3-deep-purple w3-hover-purple w3-ripple' href='./toon_deelnemers.php?cat=B-klasse' target='_cat2'><i class="fa fa-th-list"> Heren 40+ </i></a></td>
      <td class='w3-left-align'><a class='w3-btn w3-deep-purple w3-hover-purple w3-ripple' href='./toon_deelnemers.php?cat=A-klasse' target='_cat3'><i class="fa fa-th-list"> Heren 16 t/m 39 </i></a></td>
    </tr>
</table>
</div>


<!--
--------------------------------------------------
UITSLAGEN
--------------------------------------------------
-->
<div class="bgimg-4 w3-display-container w3-opacity-min">
  <div class="w3-display-middle">
    <span class="w3-xxlarge w3-text-black w3-wide">Uitslag</span>
  </div>
</div>

<!-- Container (Portfolio Section) -->
<div class="w3-content w3-container w3-padding-64" id="uitslag">
  <h3 class="w3-center">Uitslag</h3>
  <p class="w3-center">
    Die zijn er nog niet.
    <div style='height:500px;' >
    
    </div>

  </p><br>
</div>


<!--
--------------------------------------------------
POSTER
--------------------------------------------------
-->
<div class="bgimg-5 w3-display-container w3-opacity-min">
  <div class="w3-display-middle">
    <span class="w3-xxlarge w3-text-black w3-wide">Poster</span>
  </div>
</div>

<!-- Container (Portfolio Section) -->
<div class="w3-content w3-container w3-padding-64" id="poster">
  <h3 class="w3-center">Poster</h3>
  <p class="w3-center">
    <a href='../images/dont_ride.jpg' target='newp_'><img src="../images/dont_ride.jpg" style="width:30%;"></a>
    <!-- <a href='../images/poster_wit.png'   target='newp_'><img src="../images/poster_wit.png"   style="width:30%;"></a> -->
    <div style='height:300px;' ></div>
  </p>
  <br>
</div>


<!--
--------------------------------------------------
CONTACT
--------------------------------------------------
-->
<div class="bgimg-3 w3-display-container w3-opacity-min">
  <div class="w3-display-middle">
     <span class="w3-xxlarge w3-text-black w3-wide">Contact</span>
  </div>
</div>

<!-- Container (Contact Section) -->
<div class="w3-content w3-container w3-padding-64" id="contact">
  <h3 class="w3-center">Contact</h3>
  <p class="w3-center"><em>We zijn gek op positief commentaar!</em></p>

  <div class="w3-row w3-padding-32 w3-section">
    <div class="w3-col m4 w3-container">
      <a href='../images/dont_ride.jpg' target='newp_'><img src="../images/dont_ride.jpg" class="w3-image w3-round" style="width:100%"></a>
    </div>
    <div class="w3-col m8 w3-panel">
      <div class="w3-large w3-margin-bottom">
        <!-- <i class="fa fa-map-marker fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Chicago, US<br> -->
        <i class="fa fa-phone fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Telefoon: 06-18 60 12 44<br>
        <!-- <i class="fa fa-envelope fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Email: mail@mail.com<br> -->
      </div>
      <p>Kom langs voor een kop <i class="fa fa-coffee"></i>, of stuur een mail:</p>
      <!--form action="/action_page.php" target="_blank">-->
      <form id="form2" name="form2" method="post" action="">

        <div class="w3-row-padding" style="margin:0 -16px 8px -16px">
          <div class="w3-half">
            <input class="w3-input w3-border" type="text" placeholder="Naam" required id="naam" name="naam">
          </div>
          <div class="w3-half">
            <input class="w3-input w3-border" type="text" placeholder="Email" required id="email" name="email">
          </div>
        </div>
        <textarea class="w3-input w3-border" required id="emailtxt" name="emailtxt" placeholder="Tekst" rows="7" cols="50"></textarea>
        <input type="hidden" name="MM_email" value="form2" />

                  <button class="w3-button w3-purple w3-right w3-section" type="submit"><i class="fa fa-paper-plane"></i> Verstuur mail</button>
              </form>
    </div>
  </div>
</div>

<!-- Footer  -->

<footer class="w3-center w3-black w3-padding-24 w3-opacity w3-hover-opacity-off">
  <a href="#home" class="w3-button w3-light-grey"><i class="fa fa-arrow-up w3-margin-right"></i>Naar boven</a>
 <p>Powered by <a href="https://www.woohwooh.com" title="WoohWooh" target="_blank" class="w3-hover-text-green">WoohWooh</a></p>
</footer>


<script>

// Change style of navbar on scroll
window.onscroll = function() {myFunction()};
function myFunction() {
    var navbar = document.getElementById("myNavbar");
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
        navbar.className = "w3-bar" + " w3-card" + " w3-animate-top" + " w3-white";
    } else {
        navbar.className = navbar.className.replace(" w3-card w3-animate-top w3-white", "");
    }
}

// Used to toggle the menu on small screens when clicking on the menu button
function toggleFunction() {
    var x = document.getElementById("navDemo");
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else {
        x.className = x.className.replace(" w3-show", "");
    }
}



document.querySelector("#form1").addEventListener( "submit", function(e) {

  //--------------------------------------------------
  // We starten met het idee dat alles goed ingevuld is
  //--------------------------------------------------
  SubmitForm = true;

  if ( SubmitForm ) {
    if ( ! ChkCategorie() ) {
      CallPopup("categorie", 'dF7P0yuYRq');
      SubmitForm = false;
    } else {
      SubmitForm = true;
    }

  }


  //--------------------------------------------------
  // Alle controles OK, dan opslaan
  //--------------------------------------------------
  if ( ! SubmitForm ) {
    e.preventDefault();    //stop form from submitting
  } else {
    document.getElementById("form1").submit();
  }

}); 

function ChkCategorie() {
  select = document.getElementById('categorie');

  if ( select.value === "0" ) {
    document.getElementById('categorie').style.backgroundColor   = 'mistyrose' ;
    document.getElementById("categorie").focus(); 
    return false;
  } else {
    document.getElementById('categorie').style.backgroundColor   = 'white' ;
    return true;
  }

}



document.addEventListener('input',(e)=>{

  if ( e.target.getAttribute('name')=="voornaam"      ) { return; }
  if ( e.target.getAttribute('name')=="tussenvoegsel" ) { return; }
  if ( e.target.getAttribute('name')=="achternaam"    ) { return; }
  if ( e.target.getAttribute('name')=="geboortedatum" ) { return; }
  if ( e.target.getAttribute('name')=="woonplaats"    ) { return; }
  if ( e.target.getAttribute('name')=="naam"          ) { return; }
  if ( e.target.getAttribute('name')=="email"         ) { return; }
  if ( e.target.getAttribute('name')=="emailtxt"      ) { return; }


  if ( e.target.getAttribute('name')=="geslacht" ) {
    console.log("geslacht [" + e.target.value + "]");
    Sindex = 0;
    if ( e.target.value == "v" ) {
      Sindex = 4;
    }
    document.getElementById("categorie").selectedIndex = Sindex;
  }


  if ( e.target.getAttribute('name')=="categorie" ) {

    console.log("categorie [" + e.target.value + "]");

    if ( e.target.value === "cat-0" ) {
      return;
    }
    if ( e.target.value === "C-klasse" ) {
      document.forms["form1"]["v"].checked=true;
    } else {
      document.forms["form1"]["m"].checked=true;
    }
  }
  ChkCategorie();
})

</script>

</body>
</html>