/*  extern: CSS voor de kop en het keuzen-menu,        */
/*  wat voor alle paginas dezelfde is.                 */
/*  De CSS voor de content van de paginas zijn intern  */ 

html  {background-color: #FFFDED;}

/*  **********  HEAD = kop  **********  */

.head
     {
      max-width: 980px;
      margin: 0;
      margin-left: auto;
      margin-right: auto;
      padding: 0;
     }

.kop
     {
      width: 50%;
      margin-left: auto;
      margin-right: auto;
     }
.kop img
        {
         max-width: 100%;
         height: auto;
        }

/*  **********  NAV = keuzen-menu  **********  */
/*  ********** VOOR IN DE ZOMER (GEEN EHBO) **********  */

.keuzen
       {
        max-width: 978px;
        margin: 0;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
       }


/* verschillende padding-bottom voor aansluiting van content bij keuzen-menu */

@media only screen and (min-width: 106.25em)   /* 1700px en hoger */
        {
.frame                  /* maat voor het algemene keuze-menu window waarin het iframe */
      {
       position: relative;
       height: 0;
       border-style: none;
       padding-bottom: 25%;
       overflow: hidden;
      }

.frame iframe           /* iframe in het frame responsive maken */
             {
              position: absolute;
              top: 0;
              left: 0;
              width: 99.5%;
              height: 97.5%;
              border-style: none;
             }
        }

@media only screen and (min-width: 93.75em) and (max-width: 106.1875em)   /* 1500px - 1699px */
        {
.frame                  /* maat voor het algemene keuze-menu window waarin het iframe */
      {
       position: relative;
       height: 0;
       border-style: none;
       padding-bottom: 23%;
       overflow: hidden;
      }

.frame iframe           /* iframe in het frame responsive maken */
             {
              position: absolute;
              top: 0;
              left: 0;
              width: 99.5%;
              height: 97.5%;
              border-style: none;
             }
        }

@media only screen and (min-width: 80em) and (max-width: 93.6875em)   /* 1280px - 1499px */
        {
.frame                  /* maat voor het algemene keuze-menu window waarin het iframe */
      {
       position: relative;
       height: 0;
       border-style: none;
       padding-bottom: 21%;
       overflow: hidden;
      }

.frame iframe           /* iframe in het frame responsive maken */ 
             {
              position: absolute;
              top: 0;
              left: 0;
              width: 99.5%;
              height: 97.5%;
              border-style: none;
             }
        }

@media only screen and (min-width: 61.25em) and (max-width: 79.9375em)   /* 980px - 1279px */
        {
.frame                  /* maat voor het algemene keuze-menu window waarin het iframe */
      {
       position: relative;
       height: 0;
       border-style: none;
       padding-bottom: 20%;
       overflow: hidden;
      }

.frame iframe           /* iframe in het frame responsive maken */ 
             {
              position: absolute;
              top: 0;
              left: 0;
              width: 99.5%;
              height: 97.5%;
              border-style: none;
             }
        }

@media only screen and (min-width: 50em) and (max-width: 61.1875em)   /* 800px - 979px */
        {
.frame                  /* maat voor het algemene keuze-menu window waarin het iframe */
      {
       position: relative;
       height: 0;
       border-style: none;
       padding-bottom: 22%;
       overflow: hidden;
      }

.frame iframe           /* iframe in het frame responsive maken */ 
             {
              position: absolute;
              top: 0;
              left: 0;
              width: 99.5%;
              height: 97.5%;
              border-style: none;
             }
        }

@media only screen and (min-width: 27.5em) and (max-width: 49.9375em)   /* 440px - 799px */
        {
.frame                  /* maat voor het algemene keuze-menu window waarin het iframe */
      {
       position: relative;
       height: 0;
       border-style: none;
       padding-bottom: 25%;
       overflow: hidden;
      }

.frame iframe           /* iframe in het frame responsive maken */ 
             {
              position: absolute;
              top: 0;
              left: 0;
              width: 99.5%;
              height: 97.5%;
              border-style: none;
             }
        }

@media only screen and (min-width: 22.375em) and (max-width: 27.4375em)   /* 358px - 439px */
        {
.frame                  /* maat voor het algemene keuze-menu window waarin het iframe */
      {
       position: relative;
       height: 0;
       border-style: none;
       padding-bottom: 29%;
       overflow: hidden;
      }

.frame iframe           /* iframe in het frame responsive maken */ 
             {
              position: absolute;
              top: 0;
              left: 0;
              width: 99.5%;
              height: 97.5%;
              border-style: none;
             }
        }

@media only screen and (min-width: 17.5em) and (max-width: 22.3125em)   /* 280px - 357px */
        {
.frame                  /* maat voor het algemene keuze-menu window waarin het iframe */
      {
       position: relative;
       height: 0;
       border-style: none;
       padding-bottom: 42%;  /* hoger iframe i.v.m. extra icoons!  */
       overflow: hidden;
      }

.frame iframe           /* iframe in het frame responsive maken */ 
             {
              position: absolute;
              top: 0;
              left: 0;
              width: 99.5%;
              height: 97.5%;
              border-style: none;
             }
        }


/*  **********  MAIN = content  **********  */

ul {list-style-type: none;}

/* main */
@media only screen and (min-width: 61.1875em)  /* 979px en hoger */
       {
.content
         {
          width: 980px;
          margin: 0;
          margin-left: auto;
          margin-right: auto;
          padding: 0;
          font-family: "Verdana", "Arial", "Helvetica", sans-serif;
          font-size: 100%; 
          font-size: 1.125em;
         }
        }

/* main */

@media only screen and (min-width: 19.375em) and (max-width: 61.125em)  /* 310px - 978px */
       {
.content
        {
         max-width: 980px;
         font-family: "Verdana", "Arial", "Helvetica", sans-serif;
         font-size: 100%; 
         font-size: 1em;
        }
       }

/*  om de scheidings-balk = 'de hele content' onder het keuze-menu op afstand te houden */ 

@media only screen and (min-width: 106.875em)  /*1710px en hoger */
       {
.content {margin-top: -6%;}
       }

@media only screen and (min-width: 93.75em) and (max-width: 106.8125em)  /* 1500px - 1709px */
       {
.content {margin-top: -5%;}
       }

@media only screen and (min-width: 87.5em) and (max-width: 93.6875em)  /* 1400px - 1499px */
       {
.content {margin-top: -5%;}
       }

@media only screen and (min-width: 61.25em) and (max-width: 87.4375em)  /* 980px - 1399px */
       {
.content {margin-top: -5%;}
       }

@media only screen and (min-width: 50em) and (max-width: 61.1875em)  /* 800px - 979px */
       {
.content {margin-top: -7%;}
       }

@media only screen and (min-width: 43.75em) and (max-width: 49.9375em)  /* 700px - 799px */
       {
.content {margin-top: -9%;}
       }

@media only screen and (min-width: 37.5em) and (max-width: 43.6875em)  /* 600px - 699px */
       {
.content {margin-top: -7%;}
       }

@media only screen and (min-width: 27.5em) and (max-width: 37.4375em)  /* 440px - 590px */
       {
.content {margin-top: -6%;}
       }

@media only screen and (min-width: 22.4375em) and (max-width: 27.4375em)  /* 359px - 439px */
       {
.content {margin-top: -7%;}
       }

@media only screen and (min-width: 21.125em) and (max-width: 22.375em)  /* 338px - 358px */
       {
.content {margin-top: -17%;}
       }

@media only screen and (min-width: 19.375em) and (max-width: 21.0625em)  /* 310px - 337px */
       {
.content {margin-top: -17%;}
       }

/* main */

.content h3 {color: blue;}

.lijn
     {
      display: inline-block;
      list-style-type: none; 
      width: 99%;
      padding: 0;
      margin: 0;
      border-style: solid;
      border-color: blue;
      border-width: 0.25em; 
      border-top: none;
      border-left: none;
      border-right: none;
     }


/* voor keuze-iconen in de pagina's */

@media only screen and (min-width: 40.3125em)  /* 645px en hoger */
       {
.kies img
         {
          max-width: 100%;
          max-width: 18%;
          min-width: 3em;
          margin: 0;
          padding: 0;
          border-style: none;
         }
.kies a
        {
         margin: 0;
         padding-top: 0.5em;
         border-style: none;
        }
       }


@media only screen and (min-width: 19.375em) and (max-width: 40.25em)  /* 310px - 644px */
       {
.kies img
         {
          max-width: 100%;
          max-width: 21%;
          min-width: 3em;
          margin: 0;
          padding: 0;
          border-style: none;
         }
.kies a
        {
         margin: 0;
         padding-top: 0.5em;
         border-style: none;
        }
       }

/* voor keuze-iconen met word/excel logo erbij in de pagina's */

@media only screen and (min-width: 40.3125em)  /* 645px en hoger */
       {
.kiesextra img
              {
               max-width: 25%;
               min-width: 5em;
               margin: 0;
               padding: 0;
               border-style: none;
              }
.kiesextra a
            {
             margin: 0;
             padding-top: 0.7em;
             border-style: none;
            }
          }

@media only screen and (min-width: 19.375em) and (max-width: 40.25em)  /* 310px - 644px */
       {
.kiesextra img
              {
               max-width: 30%;
               min-width: 5em;
               margin: 0;
               padding: 0;
               border-style: none;
              }
.kiesextra a
            {
             margin: 0;
             padding-top: 0.7em;
             border-style: none;
            }
          }

p {padding: 2%;}

/* en de verdere details per pagina zijn intern! */

/* voor testen */
/*
p {border-style: solid;}
div {border-style: solid;}
li {border-style: solid;}
td {border-style: solid;}
*/

/*
er is geen ASIDE
er is geen FOOTER
*/