/* .name = object.class     mag in meerdere elementen voorkomen*/
/* #name = object.id        moet uniek zijn in het document*/
/* body  = all html items   geldt voor de gehele taal*/
/* Building a Responsive Grid-View */
/* First ensure that all HTML elements have the box-sizing property set to border-box. This makes sure that the padding and border are included in the total width and height of the elements. Add the following code in your CSS: */

{ 
   box-sizing: border-box; 
}


   @media all {
      .page-break { display: none; }
   }
   @media print {
      .page-break { display: block; page-break-before: always; }
   }

body { /*font-size wordt per schermsoort bepaald */
   background-color: AntiqueWhite;
   font-family: Verdana, Geneva, sans-serif;
   color: black;
   text-align: justify;
   text-justify: inter-word;
   margin: 0px;    /* Nodig om de menubalk netjes op het hele scherm te krijgen */
}

ul {          /*     display: block;    margin-top: 1em;   margin-bottom: 1 em;  */
   list-style-type: disc;
   margin-right: 0;
}

table.border {                                 /* Omlijning van een tabel beschrijven */
  border: 1px solid #ccbfaf;
}
tr:nth-child(odd)  {background-color:#ffdab3;} /* Geeft in een <table> afwisselend een andere achtergrond kleur flets-blauw=#eff9f5*/
tr:nth-child(even) {background-color:#ffebcc;} /* Geeft in een <table>afwisselend een andere achtergrond kleur flets-roze=#faf2f1*/

a:visited{
    color: blue;
}


.no_bullet {
  list-style: none;
}
.vink_goed {
   list-style-image: url("/sys/icons/vink_goed_16.png");
}
.vink_fout {
   list-style-image: url("/sys/icons/vink_fout_16.png");
   /* align: center; */
}

/* PANELEN NODIG VOOR NORMALE MENUSCHERMEN */
   span.menupanel {
      background-color: #FFDAB9;   /* kleur heet PeachPuff*/
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: auto;
      border-radius: 5%;
      float: left;
      text-align: center;
    }
   span.menupanel:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }
   img.menupanel {
       border-radius: 0%;
       border: 0px solid #ddd;
       padding: 0px;
   }
   span.navigatiebar{
      color: gray;
   }
   span.navigatiebar a{
      color: gray;
      text-decoration: none;
   }
   span.navigatiebar a:visited{
      text-decoration: none;
   }
   span.navigatiebar a:hover{
      text-decoration: underline;
   }



/* TOPBAR NODIG VOOR NORMALE WERKSCHERMEN */
   span.topbar {
      color: #ff6600;
      position: fixed;
      z-index: 2; /*Anders zouden de buttons met tootips er overheen vliegen */
      top: 0;
      border-style: solid; /* none solid */
      border-width: 0px;
      border-color: green; 
      padding: 0px;
   }
   span.topbarprint {
      color: #ff6600;
   }
   .topbarlogo {
      vertical-align: middle;
   }
   .topbarlogo:hover {                                         /* Img  Button */
      cursor: pointer;
   }                /* https://www.w3schools.com/css/css_rwd_mediaqueries.asp */
   .tdtopbar {
      color: #ff6600;
      background-color: transparent ;  /*  #e5e8e8 #FDF5E6 */
      text-decoration: none;
   }


/* NODIG VOOR NORMALE WERKSCHERMEN TOPBAR POP UP/DROP DOWN MENU */
   .dropdown {                     /* needed to position the dropdown content */
      float: right;
      position: relative;
      display: inline-block;
   }
   .dropdown-content {                /* Dropdown Content (Hidden by Default) */
      text-align: left;
      display: none;
      position: absolute;
      background-color: #e5e8e8;                               /* licht grijs */
      min-width: 16px;
      overflow: auto;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      right: 0;
      top: 65px;
      z-index: 1;
   }
   .dropdown-content a {                         /* Links inside the dropdown */
      color: black;
      padding: 1px 2px;
      text-decoration: none;
      display: block;
   }
   .dropdown-content a:hover {     /* Change color of dropdown links on hover */
      background-color: gray;
   }
   .show {
       display:block;
   } 
   .dropbtn {                                              /* Dropdown Button */
      cursor: pointer;
      background-color: transparent; 
   }
   .dropbtn:hover {                                        /* Dropdown Button */
      cursor: pointer;
      background-color: #e5e8e8                                /* licht grijs */
   }                /* https://www.w3schools.com/css/css_rwd_mediaqueries.asp */


/* NODIG VOOR NORMALE WERKSCHERMEN FORMATTEREN */
   .kop0{
      color: #ff33cc; /* 008080      */
   }
   .kop1{
      color: #339966; /* 008080      */
   }
   .kop1:visited{
      color: #339966; /* 008080      */
   }
   .kop2{
      color: #ff6600;
   }
   .kop2:visited{
      color: #ff6600;
   }
   .kop3{
      color: #990000; /*  #1E90FF */
   }
   .kop3:visited{
      color: #990000; /*  #1E90FF */
   }
   .kop4{
      color: #1E90FF; /*  #1E90FF */
   }
   .kop4:visited{
      color: #1E90FF; /*  #1E90FF */
   }
   .kop5{
      color: #008080; /*  #1E90FF */
   }
   .kop5:visited{
      color: #008080; /*  #1E90FF */
   }
  .kop6{
      color: #A0522D; /*  #2F4F4F */
   }
   .kop6:visited{
      color: #A0522D; /*  #B87333 */
   }
   .kop9{
      color: gray;
   }
   .kop9:visited{
      color: gray;
   }

   .kop11{
      color: #ff9933;
   }
   .kop11:visited{
      color: #ff9933;
   }
   
/* NODIG VOOR NORMALE WERKSCHERMEN POINT AND SHOOT SCHERMEN*/
   span.menulijst {
      background-color: white;
      text-align: center;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      margin-left: auto;
      margin-right: auto;
      border-radius: 5%;
      float: left;
    }
   span.menulijst:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }
   img.menulijst {
      width: 95%;
      border-radius: 5%;
      border: 1px solid #ddd;
      padding: 5px;
   }


/* NODIG VOOR NORMALE WERKSCHERMEN DATA EDITING ETC*/
   span.werkscherm {
      border: 1px solid #ccbfaf;
      box-shadow: 1px 0px #ccbfaf;
      margin-bottom: 25px;
      float: left;
    }
   span.werkscherm:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }
   span.inputfield:hover{
      cursor: pointer;
   }
   img.intxt{
      margin: 5px 0px;
      
      /*   
      margin-right: 2;
      margin-left: 2;
      margin-top: 2;
      margin-bottom: 2;
      float: right;
      display: block;
      margin-right: 0;
      margin-left: auto;
      margin-right: 0;
      width: 280px;*/
   }











@media only screen and (max-width: 600px) {  /* blue Extra small devices (phones, 600px and down) SAMSUNG S8 *************************/
   .donotscreen{   /* LET OP: deze is verschillend voor schermen en printouts */
      display: none;
   }

   body {
      font-size: 5vw;
      padding: 2%;    /* Nodig om de geronde kantjes van de telefoon te vermijden */
   }

   ul {
      margin-left:  0px;
      padding-left: 20px;
   }

/* PANELEN NODIG VOOR NORMALE MENUSCHERMEN */
   span.menupanel {
      margin-top: 2%;
      margin-left: 1%;
      margin-right: auto;
      width: 31%; 
      height: 100px;
    }
   img.menupanel {
       width: 80%;
       height: 80%;
   }


/* TOPBAR NODIG VOOR NORMALE WERKSCHERMEN */
   .topbar {
      background-color: transparent; /* blue transparent #ffdab3 */
      font-size: 7vw;
      width: 95%;
   }
   .topbarprint {
      font-size: 7vw;
   }
   .topbarlogo {
      width:10vw;
      height: 10vw;
   }
   .topbarspacer {
      font-size: .5vw;                    /* minimaal zo groot als topbarlogo ?*/
   }
   .tdtopbar { /* Maat van tekxt in topbar */
      background-color: #ffdab3; /* blue transparent #ffdab3 */
      font-size: 8vw;
   }
   .dropdown-content a {                         /* Links inside the dropdown */
      font-size: 5vw;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN FORMATTEREN */
   .kop0{
      font-size: 8vw;
   }
   .kop1{
      font-size: 7vw;
   }
   .kop2{
      font-size: 6vw;
   }
   .kop3{
      font-size: 5vw;
   }
   .kop4{
      font-size: 5vw;
   }
   .kop9{
      font-size: 4vw;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN POINT AND SHOOT SCHERMEN*/
   span.menulijst {
      width: 50%; 
      height: 270px;
   }
   img.menulijst {
      height: 200px;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN DATA EDITING ETC*/
   textarea.sizing{
     width:  22em;
     height: 35em;
   }
   img.intxt{
      padding-right: 15px;
      padding-left:  15px;
   }
   img.big{ /*Wordt gebruikt in robots teksten*/
      width:  240px;
      height: 190px;
      border-radius: 20%;
   }
   img.large{ /*Wordt gebruikt in robots teksten*/
      width:  240px;
      height: 190px;
      border-radius: 10%;
      margin-right: 20px;
   }
   img.medium{ /*Wordt gebruikt in robots teksten*/
      width:  240px;
      height: 190px;
      border-radius: 10%;
   }
   img.small{ /*Wordt gebruikt in robots teksten*/
      width:  240px;
      height: 190px;
   }
   img.landscape {
      height: 289px;
      width:  390px;
   }
   img.florasheet {
      height: 300px;
      width:  200px;
   }
   img.qpr {
      height: 100px;
      width:  100px;
   }
   span.werkscherm {
      width: 100%;
      height: 570px;
   }

} /*End of @media only screen and (max-width: 600px)  Extra small devices (phones, 600px and down) SAMSUNG S8 */









@media only print and (orientation: portrait) { /*Print A4 portrait **************************************************************/
   .donotprint {   /* LET OP: deze is verschillend voor schermen en printouts */
       display: none;
   }

   body {
      font-size: 1.5vw;
   }
   ul {
      margin-left:  0px;
      padding-left: 20px;
   }

/* PANELEN NODIG VOOR NORMALE MENUSCHERMEN */
   span.menupanel {
      margin-top: 1%;
      margin-left: 1%;
      margin-right: auto;
      width: 11.4%;
      height: 190px;
   }
   img.menupanel {
      width: 85%;
      height: 85%;
   }

/* TOPBAR NODIG VOOR NORMALE WERKSCHERMEN */
   .topbar {
      font-size: 3vw;
      width:    89%;
   }
   .topbarprint {
      font-size: 3vw;
   }
   .topbarlogo {
      width:2.5vw;
      height: 2.5vw;
   }
   .topbarspacer {
      font-size: 2.5vw;                   /* minimaal zo groot als topbarlogo */
   }
   .tdtopbar { /* Maat van tekxt in topbar */
      font-size: 2vw;
   }
   .dropdown-content a {                         /* Links inside the dropdown */
      font-size: 1vw;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN FORMATTEREN */
   .kop0{
      font-size: 2.5vw;
   }
   .kop1{
      font-size: 2vw;
   }
   .kop2{
      font-size: 1.7vw;
   }
   .kop3{
      font-size: 1.6vw;
   }
   .kop4{
      font-size: 1.5vw;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN POINT AND SHOOT SCHERMEN*/
   span.menulijst {
      width: 16.5%;
      height: 165px;
   }
   img.menulijst {
      width:  70px;
      height: 95px;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN DATA EDITING ETC*/
   textarea.sizing{
     width:  38em;
     height: 11em;
   }
   img.intxt{
      padding-right: 15px;
      padding-left:  15px;
   }
   img.big{ /*Wordt gebruikt in robots teksten*/
      width:  280px;
      height: 210px;
      border-radius: 20%;
      margin-right: 20px;
   }
   img.large{ /*Wordt gebruikt in robots teksten*/
      width:  210px;
      height: 165px;
      border-radius: 10%;
      margin-right: 20px;
   }
   img.medium{ /*Wordt gebruikt in robots teksten*/
      width:  140px;
      height: 105px;
      border-radius: 10%;
      margin-right: 20px;
   }
   img.small{ /*Wordt gebruikt in robots teksten*/
      width:  110px;
      height: 80px;
      border-radius: 10%;
      margin-right: 20px;
   }
   img.landscape {
      height: 289px;
      width:  390px;
   }
   img.florasheet {
      height: 300px;
      width:  200px;
   }
   img.qpr {
      height: 100px;
      width:  100px;
   }
   span.werkscherm {
      width: 49%;
      height: 483px;
   }
} /*End of @media only print and (orientation: portrait) ---------------------*/

















@media only screen and (min-width: 600px) {  /* Small devices landscape and (portrait tablets and large phones, 600px and up) */
   .donotscreen{   /* LET OP: deze is verschillend voor schermen en printouts */
      display: none;
   }

   body {
      font-size: 5vw;
      padding: 2%;    /* Nodig om de geronde kantjes van de telefoon te vermijden */
   }

   ul {
      margin-left:  0px;
      padding-left: 20px;
   }

/* PANELEN NODIG VOOR NORMALE MENUSCHERMEN */
   span.menupanel {
      margin-top: 2%;
      margin-left: 1%;
      margin-right: auto;
      width: 31%; 
      height: 100px;
    }
   img.menupanel {
       width: 85%;
       height: 85%;
   }


/* TOPBAR NODIG VOOR NORMALE WERKSCHERMEN */
   .topbar {
      background-color: transparent; /* red transparent #ffdab3 */
      font-size: 7vw;
      width: 95%;
   }
   .topbarprint {
      font-size: 7vw;
   }
   .topbarlogo {
      width:10vw;
      height: 10vw;
   }
   .topbarspacer {
      font-size: .5vw;                    /* minimaal zo groot als topbarlogo ?*/
   }
   .tdtopbar { /* Maat van tekxt in topbar */
      background-color: #ffdab3; /* red transparent #ffdab3 */
      font-size: 8vw;
   }
   .dropdown-content a {                         /* Links inside the dropdown */
      font-size: 5vw;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN FORMATTEREN */
   .kop0{
      font-size: 8vw;
   }
   .kop1{
      font-size: 7vw;
   }
   .kop2{
      font-size: 6vw;
   }
   .kop3{
      font-size: 5vw;
   }
   .kop4{
      font-size: 5vw;
   }
   .kop9{
      font-size: 4vw;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN POINT AND SHOOT SCHERMEN*/
   span.menulijst {
      width: 50%; 
      height: 270px;
   }
   img.menulijst {
      height: 200px;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN DATA EDITING ETC*/
   textarea.sizing{
     width:  22em;
     height: 35em;
   }
   img.intxt{
      padding-right: 15px;
      padding-left:  15px;
   }
   img.big{ /*Wordt gebruikt in robots teksten*/
      width:  240px;
      height: 190px;
      border-radius: 20%;
   }
   img.large{ /*Wordt gebruikt in robots teksten*/
      width:  240px;
      height: 190px;
      border-radius: 10%;
      margin-right: 20px;
   }
   img.medium{ /*Wordt gebruikt in robots teksten*/
      width:  240px;
      height: 190px;
      border-radius: 10%;
   }
   img.small{ /*Wordt gebruikt in robots teksten*/
      width:  240px;
      height: 190px;
   }
   img.landscape {
      height: 289px;
      width:  390px;
   }
   img.florasheet {
      height: 300px;
      width:  200px;
   }
   img.qpr {
      height: 100px;
      width:  100px;
   }
   span.werkscherm {
      width: 100%;
      height: 570px;
   }
} /*End of @media only screen and (min-width: 600px) -------------------------*/












@media only screen and (min-width: 768px) { /*green Medium devices (potrait tablet, 768px and up) *********************/
   .donotscreen{   /* LET OP: deze is verschillend voor schermen en printouts */
      display: none;
   }

   body {
      font-size: 2.5vw;
      padding: 2%;    /* Nodig om de geronde kantjes van de telefoon te vermijden */
   }

   ul {
      margin-left:  0px;
      padding-left: 20px;
   }

/* PANELEN NODIG VOOR NORMALE MENUSCHERMEN */
   span.menupanel {
      margin-top: 2%;
      margin-left: 1%;
      margin-right: auto;
      width: 24%; 
      height: 180px;
    }
   img.menupanel {
       width: 80%;
       height: 80%;
   }


/* TOPBAR NODIG VOOR NORMALE WERKSCHERMEN */
   .topbar {
      background-color: #ffdab3; /* green transparent #ffdab3 */
      width: 70%;
   }
   .topbarprint {
      font-size: 5vw;
   }
   .topbarlogo {
      width: 6vw;
      height: 6vw;
   }
   .topbarspacer {
      font-size: 5vw;                    /* minimaal zo groot als topbarlogo ?*/
   }
   .tdtopbar { /* Maat van tekxt in topbar */
      font-size: 5vw;
      background-color: green; /* green transparent #ffdab3 */
   }
   .dropdown-content a {                         /* Links inside the dropdown */
      font-size: 3.5vw;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN FORMATTEREN */
   .kop0{
      font-size: 6vw;
   }
   .kop1{
      font-size: 4vw;
   }
   .kop2{
      font-size: 3vw;
   }
   .kop3{
      font-size: 2.7vw;
   }
   .kop4{
      font-size: 2.7vw;
   }
   .kop9{
      font-size: 1vw;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN POINT AND SHOOT SCHERMEN*/
   span.menulijst {
      width: 33%; 
      height: 350px;
   }
   img.menulijst {
      height: 280px;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN DATA EDITING ETC*/
   textarea.sizing{
     width:  22em;
     height: 35em;
   }
   img.intxt{
      padding-right: 15px;
      padding-left:  15px;
   }
   img.big{ /*Wordt gebruikt in robots teksten*/
      width:  240px;
      height: 190px;
      border-radius: 20%;
   }
   img.large{ /*Wordt gebruikt in robots teksten*/
      width:  240px;
      height: 190px;
      border-radius: 10%;
      margin-right: 20px;
   }
   img.medium{ /*Wordt gebruikt in robots teksten*/
      width:  240px;
      height: 190px;
      border-radius: 10%;
   }
   img.small{ /*Wordt gebruikt in robots teksten*/
      width:  240px;
      height: 190px;
   }
   img.landscape {
      height: 289px;
      width:  390px;
   }
   img.florasheet {
      height: 300px;
      width:  200px;
   }
   img.qpr {
      height: 100px;
      width:  100px;
   }
   span.werkscherm {
      width: 100%;
      height: 570px;
   }
} /*End of @media only screen and (min-width: 768px) potrait tablet-------------------------*/











@media only screen and (min-width: 992px) { /* black Large devices (small laptop, 992px and up)   ***********/
   .donotscreen{   /* LET OP: deze is verschillend voor schermen en printouts */
      display: none;
   }

   body {
      font-size: 1.3vw;
      padding:   1%;    /* Nodig om de geronde kantjes van de telefoon te vermijden */
   }
   ul {
      margin-left:  0px;
      padding-left: 20px;
   }

/* PANELEN NODIG VOOR NORMALE MENUSCHERMEN */
   span.menupanel {
      margin-top: 1%;
      margin-left: 1%;
      margin-right: auto;
      width: 11.5%;
      height: 120px;
    }
   img.menupanel {
       width: 85%;
       height: 85%;
   }
   span.menulijst {
      width: 16.6%;
      height: 290px;
   }
   img.menulijst {
      height: 80%;
   }


/* TOPBAR NODIG VOOR NORMALE WERKSCHERMEN */
   .topbar {
      background-color: black;
      font-size: 2vw;
      width:     98%;
   }
   .topbarprint {
      font-size: 2vw;
   }
   .topbarlogo {
      width:  2.5vw;
      height: 2.5vw;
   }
   .topbarspacer {
      font-size: 2.5vw;                   /* minimaal zo groot als topbarlogo */
   }
   .tdtopbar { /* Maat van tekxt in topbar */
      background-color: black;
      font-size: 2vw;
   }
   .dropdown-content a {                         /* Links inside the dropdown */
      font-size: 1.3vw;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN FORMATTEREN */
   .kop0{
      font-size: 2.0vw;
   }
   .kop1{
      font-size: 1.8vw;
   }
   .kop2{
      font-size: 1.5vw;
   }
   .kop3{
      font-size: 1.4vw;
   }
   .kop4{
      font-size: 1.6vw;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN POINT AND SHOOT SCHERMEN*/
   span.menulijst {
      width:  16%;
      height: 270px;
   }
   img.menulijst {
      height: 200px;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN DATA EDITING ETC*/
   textarea.sizing{
     width:  80em;
     height: 33em;
   }
   img.intxt{
      padding-right: 5px;
      padding-left:  5px;
   }
   img.big{ /*Wordt gebruikt in robots teksten*/
      width:  560px;
      height: 420px;
      border-radius: 20%;
      margin-right: 20px;
   }
   img.large{ /*Wordt gebruikt in robots teksten*/
      width:  420px;
      height: 315px;
      border-radius: 10%;
      margin-right: 20px;
   }
   img.medium{ /*Wordt gebruikt in robots teksten*/
      width:  280px;
      height: 210px;
      border-radius: 10%;
      margin-right: 20px;
   }
   img.small{ /*Wordt gebruikt in robots teksten*/
      width:  140px;
      height: 105px;
      border-radius: 10%;
      margin-right: 20px;
   }
   img.landscape {
      height: 289px;
      width:  390px;
   }
   img.florasheet {
      height: 300px;
      width:  200px;
   }
   img.qpr {
      height: 100px;
      width:  100px;
   }
   span.werkscherm {
      width: 32.6%;
      height: 500px;
   }
} /* END OF @media only screen and (min-width: 768px) { / Medium devices (Dell laptop landscape tablets, 768px and up) */










@media only screen and (min-width: 1200px) { /* Extra large devices (large laptops and desktops, 1200px and up)   UBUNTU PC ******/
   .donotscreen{   /* LET OP: deze is verschillend voor schermen en printouts */
      display: none;
   }

   body {
      font-size: 1vw; /* >1200= 1vw, <600= 6vw */
      padding: 0.5%;    /* Nodig om de geronde kantjes van de telefoon te vermijden */
   }
   ul {
      margin-left:  0px;
      padding-left: 40px;
   }

/* PANELEN NODIG VOOR NORMALE MENUSCHERMEN */
   span.menupanel {
      margin-top: 1%;
      margin-left: 1%;
      margin-right: auto;
      width: 11.4%;   /* 10% voor > 1200, 50% voor max-width: 600px */
      height: 200px;
   }
   img.menupanel {
      width: 85%;
      height: 85%;
   }

/* TOPBAR NODIG VOOR NORMALE WERKSCHERMEN */
   .topbar {
      background-color: #ffdab3; /* gray transparent #ffdab3 */
      font-size: 1.7vw;
      width: 99%;
   }
   .topbarprint {
      font-size: 1.7vw;
   }
   .topbarlogo {
      width:2.5vw;
      height: 2.5vw;
   }
   .topbarspacer {
      font-size: 1vw; /* minimaal zo groot als topbarlogo? */
   }
   .tdtopbar { /* Maat van tekxt in topbar */
      background-color: gray; /* gray transparent #ffdab3 */
      font-size: 2vw;
   }

   .dropdown-content a { /* Links inside the dropdown */
      font-size: 1vw;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN FORMATTEREN */
   .kop0{
      font-size: 1.4vw;
   }
   .kop1{
      font-size: 1.2vw;
   }
   .kop2{
      font-size: 1.1vw;
   }
   .kop3{
      font-size: 1.0vw;
   }
   .kop4{
      font-size: 0.9vw;
   }
   .kop9{
      font-size: 0.8vw;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN POINT AND SHOOT SCHERMEN*/
   span.menulijst {
      width: 12.5%;
      height: 310px;
   }
   img.menulijst {
      height: 240px;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN DATA EDITING ETC*/
   img.intxt{  /*Wordt gebruikt in robots teksten*/
      padding-right: 10px;
      padding-left:  10px;
   }
   img.big{ /*Wordt gebruikt in robots teksten*/
      width:  560px;
      height: 420px;
      border-radius: 20%;
      margin-right: 20px;
   }
   img.large{ /*Wordt gebruikt in robots teksten*/
      width:  420px;
      height: 315px;
      border-radius: 10%;
      margin-right: 20px;
   }
   img.medium{ /*Wordt gebruikt in robots teksten*/
      width:  280px;
      height: 210px;
      border-radius: 10%;
      margin-right: 20px;
   }
   img.small{ /*Wordt gebruikt in robots teksten*/
      width:  140px;
      height: 105px;
      border-radius: 10%;
      margin-right: 20px;
   }
   img.florasheet {
      height: 300px;
      width:  200px;
   }
   img.qpr {
      height: 100px;
      width:  100px;
   }
   img.landscape {
      height: 289px;
      width:  390px;
   }
   span.werkscherm {
      width:    33%;
      height: 571px;
   }
} /*End of @media only screen and (min-width: 1200px) */










@media only screen and (min-width: 1300px) { /*Aquamarine  Extra large devices Tablet landscape ******/
   .donotscreen{   /* LET OP: deze is verschillend voor schermen en printouts */
      display: none;
   }

   body {
      font-size: 1.5vw; /* >1200= 1vw, <600= 6vw */
      padding: 0.5%;    /* Nodig om de geronde kantjes van de telefoon te vermijden */
   }
   ul {
      margin-left:  0px;
      padding-left: 40px;
   }

/* PANELEN NODIG VOOR NORMALE MENUSCHERMEN */
   span.menupanel {
      margin-top: 1%;
      margin-left: 1%;
      margin-right: auto;
      width: 11.4%;   /* 10% voor > 1200, 50% voor max-width: 600px */
      height: 200px;
   }
   img.menupanel {
      width: 85%;
      height: 85%;
   }

/* TOPBAR NODIG VOOR NORMALE WERKSCHERMEN */
   .topbar {
      background-color: #8FBC8F; /* Aquamarine transparent #8FBC8F */
      font-size: 3vw;
      width: 99%;
   }
   .topbarprint {
      font-size: 3vw;
   }
   .topbarlogo {
      width: 4vw;
      height: 4vw;
   }
   .topbarspacer {
      font-size: 3vw; /* minimaal zo groot als topbarlogo? */
   }
   .tdtopbar { /* Maat van tekxt in topbar */
      background-color: Aquamarine; /* Aquamarine transparent #ffdab3 */
      font-size: 3vw;
   }

   .dropdown-content a { /* Links inside the dropdown */
      font-size: 1.1vw;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN FORMATTEREN */
   .kop0{
      font-size: 2.0vw;
   }
   .kop1{
      font-size: 1.9vw;
   }
   .kop2{
      font-size: 1.5vw;
   }
   .kop3{
      font-size: 1.5vw;
   }
   .kop4{
      font-size: 1.5vw;
   }
   .kop5{
      font-size: 1.5vw;
   }
   .kop9{
      font-size: 0.8vw;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN POINT AND SHOOT SCHERMEN*/
   span.menulijst {
      width: 12.5%;
      height: 310px;
   }
   img.menulijst {
      height: 240px;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN DATA EDITING ETC*/
   img.intxt{  /*Wordt gebruikt in robots teksten*/
      padding-right: 10px;
      padding-left:  10px;
   }
   img.big{ /*Wordt gebruikt in robots teksten*/
      width:  560px;
      height: 420px;
      border-radius: 20%;
      margin-right: 20px;
   }
   img.large{ /*Wordt gebruikt in robots teksten*/
      width:  420px;
      height: 315px;
      border-radius: 10%;
      margin-right: 20px;
   }
   img.medium{ /*Wordt gebruikt in robots teksten*/
      width:  280px;
      height: 210px;
      border-radius: 10%;
      margin-right: 20px;
   }
   img.small{ /*Wordt gebruikt in robots teksten*/
      width:  140px;
      height: 105px;
      border-radius: 10%;
      margin-right: 20px;
   }
   img.florasheet {
      height: 300px;
      width:  200px;
   }
   img.qpr {
      height: 100px;
      width:  100px;
   }
   img.landscape {
      height: 289px;
      width:  390px;
   }
   span.werkscherm {
      width:    33%;
      height: 571px;
   }
} /*End of Aquamarine @media only screen and (min-width: 1300px) */






@media only screen and (min-width: 1350px) { /* Pink Extra large devices Dell laptop ******/
   .donotscreen{   /* LET OP: deze is verschillend voor schermen en printouts */
      display: none;
   }

   body {
      font-size: medium; /* >1200= 1vw, <600= 6vw */
      padding: 0.5%;    /* Nodig om de geronde kantjes van de telefoon te vermijden */
   }
   ul {
      margin-left:  0px;
      padding-left: 40px;
   }

/* PANELEN NODIG VOOR NORMALE MENUSCHERMEN */
   span.menupanel {
      margin-top: 1%;
      margin-left: 1%;
      margin-right: auto;
      width: 11.4%;   /* 10% voor > 1200, 50% voor max-width: 600px */
      height: 200px;
   }
   img.menupanel {
      width: 85%;
      height: 85%;
   }

/* TOPBAR NODIG VOOR NORMALE WERKSCHERMEN */
   .topbar {
      background-color: pink; /* pink transparent #ffdab3 */
      font-size:  xx-large;
      width: 99%;
   }
   .topbarprint {
      font-size:  xx-large;
   }
   .topbarlogo {
      width:2.5vw;
      height: 2.5vw;
   }
   .topbarspacer {
      font-size:  xx-large; /* minimaal zo groot als topbarlogo? */
   }
   .tdtopbar { /* Maat van tekxt in topbar */
      background-color: transparent; /* pink transparent #ffdab3 */
      font-size: xx-large;
   }

   .dropdown-content a { /* Links inside the dropdown */
      font-size: 1vw;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN FORMATTEREN */
   .kop0{
      font-size: xx-large;
   }
   .kop1{
      font-size: x-large;
   }
   .kop2{
      font-size: large;
   }
   .kop3{
      font-size: medium;
   }
   .kop4{
      font-size: medium;
   }
   .kop5{
      font-size: medium;
   }
   .kop9{
      font-size: small;
   }
   .inputfield{
      font-size: medium;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN POINT AND SHOOT SCHERMEN*/
   span.menulijst {
      width: 12.5%;
      height: 310px;
   }
   img.menulijst {
      height: 240px;
   }

/* NODIG VOOR NORMALE WERKSCHERMEN DATA EDITING ETC*/
   img.intxt{  /*Wordt gebruikt in robots teksten*/
      padding-right: 10px;
      padding-left:  10px;
   }
   img.big{ /*Wordt gebruikt in robots teksten*/
      width:  560px;
      height: 420px;
      border-radius: 20%;
      margin-right: 20px;
   }
   img.large{ /*Wordt gebruikt in robots teksten*/
      width:  420px;
      height: 315px;
      border-radius: 10%;
      margin-right: 20px;
   }
   img.medium{ /*Wordt gebruikt in robots teksten*/
      width:  280px;
      height: 210px;
      border-radius: 10%;
      margin-right: 20px;
   }
   img.small{ /*Wordt gebruikt in robots teksten*/
      width:  140px;
      height: 105px;
      border-radius: 10%;
      margin-right: 20px;
   }
   img.florasheet {
      height: 300px;
      width:  200px;
   }
   img.qpr {
      height: 100px;
      width:  100px;
   }
   img.landscape {
      height: 289px;
      width:  390px;
   }
   span.werkscherm {
      width:    33%;
      height: 571px;
   }
} /*End of Pink @media only screen and (min-width: 1700px) */