/* 40-36-25 naar 40-32-25 */
/* body is the default voor alles */
html, body
{
   /* font-family: Georgia, Verdana, serif; */
   font-size: 1.26em;
   background-image: url(koffie3.jpg);
   margin: 0%;            /* hierdoor verdwijnt dat fijne randje bovenaan en rechts. Ik denk dus dat default een piepkleine marge wordt genomen */
/*   color: black;*/
}

/* basistekst in hoofdkolom */
div {

/*  padding: 50px; */
  margin: 0.5em;
}

p
{
   /* font-size: 1rem; */
   margin-top: 0.5rem;        /* een nieuwe lijn begint zoveel pixels onder de vorige. Dit lijkt OK */
   margin-bottom: 0.2rem;
}


logo
{
   font-size: 1.5em;
   margin-top: 2em;
   margin-bottom: 0.5em;
}


h1
{
   font-size: 1.6rem;
   margin-top: 1.4rem;
   margin-bottom: 0.6rem;
}

h2
{
   font-size: 1.4rem;
   margin-top: 1.2rem;
   margin-bottom: 0.5rem;
}

h3
{
   font-size: 1.10rem;
   margin-top: 1.0rem;
   margin-bottom: 0.2rem;
}

h4
{
   font-size: 1.05rem;
   margin-top: 0.9rem;
   margin-bottom: 0.2rem;
}



/* https://www.w3schools.com/css/css3_images.asp */
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  padding: 10px 10px 0px 10px;
  height: auto;
}

#content
{
   padding:10px;
   margin-left: 40%;
   width: 32%;             /* comes from 36% */
   font-size: 0.80em;
}

/* tekst etc. in linkerkolom */
#sidetext
{
   margin-left: 15%;
   width: 23%;
   float: left;
   padding: 0px;
   background-color: #FEFEFE;    /*  #F9EFCC; */
   font-size: 0.7em;

   border-style: solid;
   border-width: 1px 5px 5px 5px;
   border-color: #fffcf5;  /* #fffef4;*/
}

  #fixed {
     /*position: fixed;*/
     position: absolute;
     margin-left: 80%;
     margin-right: 3%;
     color: gray;
     top: 5;
     right: 0;
     width: 15em;
     font-size: 0.75em;
   }



/* Overzicht van de pagina zelf (in het wit), bovenaan */
#overzicht
{
   font-size: 110%;
   padding: 10px;
   margin-left: 40%;
   background-color: #FEFEFE;
   width: 32%;
}


#referentie
{
   font-size: 0.8em;
   padding: 10px;
   margin-left: 40%;

   background-color: #FEFEFE;
   width: 32%;
}


/* Hoofding: www.haasje.be/Dreticus, bovenste band */
#banner
{
   font-size: 1.0em;
   background-color: #fff;      /* kleur van bovenste band met logo */
   text-align: center;
   padding: 0.1em 0em 0.2em 0em;
   margin:0em;
   border:0em;
}


/* dit is voor de links op de hoofdpagina (linkerkolom) */
.first
{
   color: black;
   font-size: 1.2em;
   margin-top: 15px;
   margin-bottom: 5px;
}

.second
{
   color: black;
   font-size: 0.90em;
   padding-left: 15px;
   margin-top: 5px;
   margin-bottom: 5px;
}

.first2
{
   font-size: 1.2em;
   /* text-align: right; */
   margin: 7px 15px 0px 0px;
   color: #888;
}

.second2
{
   font-size: 0.90em;
   /* padding-left: 15px;*/
   /* text-align: right; */
   margin: 7px 15px 0px 20px;
   color: #888;
}


#overzicht2
{
  font-size: 70%;
  margin-left: 3%;
  margin-top: 0%;
}

/* deze zijn nodig omdat anders ALLE links onderlijnd zijn -lelijk! */
a:link {text-decoration: none;}     /* unvisited link */
a:visited {text-decoration: none;}  /* visited link */
a:hover {color: #333; text-decoration: underline;}   /* mouse over link */
a:active {color: #999}   /* selected link */


/*
ul#navigation
{
  text-decoration: none;
  display: inline-block;
  padding: 1em;
}

ul#navigation a:hover
{
  background-color: #a6e;
  color: black;
}
*/

a.previous {
  background-color: #FEFEFE;
  color: grey;
  font-style: italic;
  float: left;
  padding: 4% 2% 4% 2%;
  display: inline-block;
}

a.next {
  background-color: #FEFEFE;
  color: grey;
  font-style: italic;
  float: right;
  padding: 4% 2% 4% 2%;
  display: inline-block;   /* p, p[ dezelfde lijn te blijven */
}


.onderschrift
{
  font-size: 1.0em;
  text-align: center;
  font-style: italic;
  margin: 3px 25px 15px 25px;
}


<!-- CSS goes in the document HEAD or added to your external stylesheet, zie http://www.textfixer.com/resources/css-tables.php -->
<style type="text/css">
table.gridtable {
   font-family: verdana,arial,sans-serif;
   font-size:11px;
   color:#333333;
   border-width: 1px;
   border-color: #666666;
   border-collapse: collapse;
}
table.gridtable th {
   border-width: 1px;
   padding: 8px;
   border-style: solid;
   border-color: #666666;
   background-color: #dedede;
}
table.gridtable td {
   border-width: 1px;
   padding: 8px;
   border-style: solid;
   border-color: #666666;
   background-color: #ffffff;
}
</style>

   <!-- en dan in de eigenljike HTML:

   <!-- CSS goes in the document HEAD or added to your external stylesheet -->
   <style type="text/css">
   table.gridtable {
      font-family: verdana,arial,sans-serif;
      font-size:11px;
      color:#333333;
      border-width: 1px;
      border-color: #666666;
      border-collapse: collapse;
   }
   table.gridtable th {
      border-width: 1px;
      padding: 8px;
      border-style: solid;
      border-color: #666666;
      background-color: #dedede;
   }
   table.gridtable td {
      border-width: 1px;
      padding: 8px;
      border-style: solid;
      border-color: #666666;
      background-color: #ffffff;
   }

/* top global navigation (29Dec2022) */
   ul.globnav {
     list-style-type: none;
     margin-top: 0%;
     padding: 0% 0% 0% 20%;
     overflow: hidden;
     background-color: #FEFEFE;
/* margin-left: -20%; */
   }

   /* de grote buttons boveaan elke pagina, met "Home" "Mijn Gedacht" etc. */
   li.button {
     float: left;
   }

   li.button a
   {
     display: block;
     color: black;            /* startkleur van niet-active pagina's in menu (=allen op 1 na) */
     text-align: center;
     padding: 25px;
     text-decoration: none;
   }

   li.button a:hover:not(.active)
   {
     background-color: #fee9cc;
   }

   .active
   {
     background-color: #e8d7bb;  /* startkleur van actieve pagina in menu */
   }

</style>

<!-- ADDED on 27Dec2022 -->
<!-- https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover -->

<style>
    /* Dropdown Button */
   .dropbtn {
     background-color: #00f;      /* ??? */
     color: red;                  /* ??? */
     padding: 26px;
     font-size: 1em;
     border: none;
   }

   /* The container <div> - needed to position the dropdown content */
   .dropdown {
     position: relative;
     display: inline-block;
   }

   /* Dropdown Content (Hidden by Default) */
   .dropdown-content {
     display: none;
     position: absolute;
     background-color: #f1f1f1;
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
   }

   /* Links inside the dropdown */
   .dropdown-content a {
     color: black;
     font-size: 0.8em;                          /* text size van menu items */
     padding: 4px 20px;                  /* eerste is space tussen menu-items, tweede is de space links en rechts (maar dit heeft geen effect op wordwrap) */
     text-decoration: none;
     display: block;
   }

   /* Change color of dropdown links on hover */
   .dropdown-content a:hover {background-color: #FEFEFE;}

   /* Show the dropdown menu on hover */
   .dropdown:hover .dropdown-content {display: block;}

   /* Change the background color of the dropdown button when the dropdown content is shown */
   .dropdown:hover .dropbtn {background-color: #FEFEFE;}      /* kleur van menu header wanneer actief */

.up
{
  margin-top: -1em
}


#outer
{
    width:100%;
    text-align: center;
}
.inner
{
    display: inline-block;
}

/* https://www.w3schools.com/howto/howto_css_image_center.asp  how to center an image */
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  max-width:100%;
}

.small
{
  font-size: 0.9em;
  text-align: center;
}

   /**********/
   /* TABLES */
   /**********/

table {
  border-collapse: collapse;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

td {
  text-align: center;
  padding: 8px;
}

th {
  text-align: center;
  padding: 8px;
  border-bottom: 1px solid;
}



tr:nth-child(even) {background-color: #f2f2f2;}

   /**********/
   /* TABLES */
   /**********/

li
{
   margin-bottom: 0.5em;
}

   /**********/
   /* IMAGES side-byside*/
   /* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_images_side_by_side2 */
   /**********/

* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

/* Create equal columns that sits next to each other */
.column {
  flex: 25%;
  padding: 3px;
}
*/
</style>


/*************************************************************/

/* https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_hide2 */
/* https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_hide2 */
/* https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_hide2 */


@media (width > 1500px) {

  #sidetext {
   margin-left: 3%;
   width: 25%;
  }

  #content, #overzicht, #referentie {

    width: 55%;
    margin-left: 30%;

  }

}

@media (width > 1100px) and (width <= 1500px) {

  #sidetext {
   margin-left: 3%;
   width: 25%;
  }

  #content, #overzicht, #referentie {

    width: 45%;
    margin-left: 15%;

  }

}

@media (width > 520px) and (width <= 1100px) {

  #sidetext {
   margin-left: 3%;
   width: 25%;
  }

  #fixed {
    display: none;
  }

  #content, #overzicht, #referentie {

    width: 55%;
    margin-left: 10%;

  }

}


@media (max-width: 520px) {

  #sidetext {
    display: none;
  }

  #fixed {
    display: none;
  }

  #content, #overzicht, #referentie {

    width: 100%;
    margin-left: 0%;

  }

}


@media (max-width: 520px) {

  #sidetext {
    display: none;
  }
}