/******************************************************************************
** HTML and BODY definitions for HEIGHTS
******************************************************************************/
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  background-color: #ffffff;
  color: #000000;
  font-family: sans-serif;
  font-size: 20px;
  font-weight: normal;
  font-style: normal; 
  padding: 12px;
  margin: 12px;
}   

td.tdleft {
  font-family: sans-serif;
  font-size: 18px;
  font-weight: normal;
  border-right: 2px dashed silver;
  font-style: normal;  
}

/* Standaard opmaak voor alle UL elementen */
ul {
    list-style-type: square;    /* Vierkante bullets */
    list-style-position: inside; /* Bullets binnen de tekst */
}

/* Opmaak voor alle LI elementen binnen UL */
ul li {
    padding-left: 5px;      /* Ruimte links van de bullet */
    margin-bottom: 5px;    /* Ruimte onder elk list item */
    line-height: 1.5em;       /* Regelafstand */
    font-style: normal;
}

/* Standaard opmaak voor alle OL elementen */
ol {
    line-height: 1.5em;   /* Regelafstand */
}

/* Opmaak voor alle LI elementen binnen OL */
ol li {
    margin-bottom: 10px;    /* Ruimte onder elk list item */
    padding-left: 5px;      /* Ruimte links van de bullet */
}

#wrap { 
  width: 728px; 
  margin: 0 auto; 
}

/* Voor desktop en grotere schermen */
.gray-background { 
  background-color: #f0f0f0; !important; /* Lichte grijstint */ 
  padding: 12px !important; /* Ruimte rondom de tekst */ 
  border-radius: 5px !important; /* Afgeronde hoeken */ 
  max-width: 700px !important; /* Beperkt de breedte van het grijze blok */ 
  margin: 20px auto 10px !important; /* Witruimte boven (20px) en onder (10px), gecentreerd */ 
  color: #000000 !important; /* Tekstkleur in het grijze blok */
  font-family: sans-serif !important; /* Lettertype in het grijze blok */
  font-size: 20px !important; /* Tekengrootte in het grijze blok */
  font-weight: normal !important; /* Lettergewicht in het grijze blok */
  line-height: 1.5em !important; /* Regelafstand in het grijze blok */
  font-style: normal !important; /* Letterstijl in het grijze blok */
}

/*-----------------------------------------------------------------------------
** ENTRY item classes
**---------------------------------------------------------------------------*/

.entrytitle {
  font-size: 26px;
  font-weight: bold;
}

h2 {
  font-size: 24px;
  font-weight: bold;
}

.entrysubtitle {
  font-size: 24px
  font-weight: bold;
}

h3 {
  font-size: 22px;
  font-weight: bold;
}

h4 {
  font-size: 20px;
  font-weight: bold;
}

h5 {
  font-size: 20px;
  font-weight: normal;
}

h6 {
  font-size: 20px;
  font-weight: normal;
  font-style: italic;
}

.entrydate {
  color: #404040;
  font-size: 18px;
}

.entrytext {
  font-size: 20px;
  line-height: 1.5em;
}

.entrytextintro {
  font-size: 22px;
  line-height: 1.5em;
}

.entrytextgraph {
  color: #676767;
  font-size: 18px;
  font-weight: normal;
  line-height: 1.5em;
  font-style: italic; 
}

.entryerror {
  color: #ff3333;
  font-size: 20px;
}                        

.entrytitlegrey {
  color: #676767;
  font-size: 22px;
  font-weight: bold;
  font-style: italic;
}

.entrytextgrey {
  color: #676767;
  font-size: 20px;
  font-weight: normal;
  font-style: italic;
}   

.entrylink {
  color: #005AFF;
  font-size: 20px;
  text-decoration: none;
}

a.entrylink { color: #005AFF; }
a.entrylink:visited { color: #005AFF; }
a.entrylink:hover { color: #FF0000; }
a.entrylink:active { color: #005AFF; }

.entrylinkintro {
  color: #005AFF;
  font-size: 22px;
  text-decoration: none;
}

a.entrylinkintro { color: #005AFF; }
a.entrylinkintro:visited { color: #005AFF; }
a.entrylinkintro:hover { color: #FF0000; }
a.entrylinkintro:active { color: #005AFF; }

img { border: none; }

.centered-text {
  text-align: center;
  font-size: 20px;
  line-height: 1.5em;
}

/*-----------------------------------------------------------------------------
** BUTTONS
**---------------------------------------------------------------------------*/

.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.button {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: black;
  padding: 10px; /* Voeg wat padding toe voor een groter klikgebied */
}

.button span {
  margin-bottom: 10px;
  font-size: 20px; /* Expliciet instellen op 20px */
}
}

.button img {
  margin-top: 10px;
}

.buttonlink {
  color: #BDE79C; 
  background-color: #BDE79C; 
  text-decoration: none; 
}

a.buttonlink:visited { color: #BDE79C; background-color: #BDE79C; text-decoration: none; }
a.buttonlink:hover { color: #BDE79C; background-color: #BDE79C; text-decoration: none; }
a.buttonlink:active { color: #BDE79C; background-color: #BDE79C; text-decoration: none; }

/*-----------------------------------------------------------------------------
** FOOTER classes
**---------------------------------------------------------------------------*/

.footer {
  max-width: 728px;  /* Footer is niet breder dan 728px */
  margin: 0 auto;    /* Centreert de footer horizontaal */
  text-align: center; /* Centreert de inhoud van de footer */
  padding: 10px;     /* Voegt wat padding toe voor een betere lay-out */
}

.footer, .footerlink, .footertextgrey {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: normal;
  text-decoration: none;
  font-style: normal;
  line-height: 1.5em;
}

.footer-links {
  margin-bottom: 10px;
}

/* Stijlen voor de footerlinks */
.footerlink {
  color: #005AFF;
}

.footerlink:visited {
  color: #005AFF;
}

.footerlink:hover {
  color: #FF0000;
}

.footerlink:active {
  color: #005AFF;
}

.footertextgrey {
  color: grey;
}

/*-----------------------------------------------------------------------------
** NAVBAR, MENU LINK classes
**---------------------------------------------------------------------------*/

.navbtn {
  color: #000000;
  font-size: 28px;
  text-decoration: none;
}

a.navbtn:hover {     
  background-color: #D3D3D3;
  color: #FF0000;
}

a.menulink {
  color: #000000;
  font-size: 28px;
  font-weight: bold;
}

a.menulink:visited {
  color: #000000;
  font-weight: bold;
}

a.menulink:hover {
  background-color: #FFFFFF;
  color: #005AFF;
}

a.menulink:active {      
  color: #6B9730;
}

/*-----------------------------------------------------------------------------
** PAGE, MAIN classes
**---------------------------------------------------------------------------*/

.pagetitle {
  color: #000000;
  font-size: 26px;
  font-weight: bold;
}

h1 {
  color: #000000;
  font-family: sans-serif;
  font-size: 26px;
  font-weight: bold;
}

.streep {
  color: #D3D3D3;
  background-color: #D3D3D3;
  height: 2px;
  border: 0;
}

.mainabout {
  color: #000000;
  font-size: 26px;
}

.maintitle {
  color: #000000;
  font-size: 28px;
}

.mainurl {
  color: #0000f0;
  font-size: 28px;
  font-weight: bold;
}

/*-----------------------------------------------------------------------------
** TABLE classes
**---------------------------------------------------------------------------*/

.tbltitel {
  color: #000000;
  font-size: 18px;
  background-color: #bbbbbb;
  font-weight: bold;
  border: 1px solid #000; /* Zorgt ervoor dat de rand zwart is */
}

.odd {
  color: #000000;
  font-size: 18px;
  background-color: #eeeeee;
}

.even {
  color: #000000;
  font-size: 18px;
  background-color: #dddddd;
}

.centered-table { 
  margin: 0 auto; /* Centreer de tabel horizontaal */ 
  border: 1px solid #D3D3D3; /* border rond de tabel */ 
}

/*-----------------------------------------------------------------------------
** TAGS classes
**---------------------------------------------------------------------------*/

.tags { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 10px; 
} 

.tag 
  { 
  padding: 5px 10px; 
  background-color: #f1f1f1; 
  border-radius: 5px; 
  text-decoration: none; 
  color: #333; 
 /* font-size: 14px; */
}


/*-----------------------------------------------------------------------------
** TAGS classes
**---------------------------------------------------------------------------*/

.articlelink {
  color: #005AFF;
  font-size: 14px;
}

a.articlelink { color: #005AFF; }
a.articlelink:visited { color: #005AFF; }
a.articlelink:hover { color: #FF0000; }
a.articlelink:active { color: #005AFF; }

.articletext {
  color: #000000;
  font-size: 14px;
  line-height: 1.5em;
}

/******************************************************************************
** CSS definition for Heights.nl - copyright 2006-2025 - Netherlands
******************************************************************************/