@charset "UTF-8";
/* CSS Document */

.stijl1 {color: #FFFF33; font-weight: bold; }
    
body,td,th {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #066;
}
body {
	background-color: #FFD;
}
a:link {
	color: #66F;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #999;
}
a:hover {
	text-decoration: underline;
	color: #C30;
}
a:active {
	text-decoration: none;
	color: #F90;
}
h1 {
	font-size: 36px;
	color: #606;
}
h2 {
	font-size: 16px;
	color: #090;
}
h3 {
	font-size: 14px;
	color: #930;
}
h4 {
	font-size: 10px;
	color: #000;
}
h5 {
	font-size: 12px;
	color: #FFF;
}
h6 {
	font-size: 24px;
	color: #F72;
}
 .ROOD {
	color: #FF0900;
}.BLAUW {
	color: #0000FF;
}.GRIJS {
	color: #999999;
}.WIT {
	color: #FFFFFF;
}
    
.celrand20 {
  border: 2px solid #FF0000;
  border-radius: 13px;
}
    
.celrand50 {
  border: 1px solid #CC8800;
  border-radius: 5px;
}
    
.celrandscore {
  border: 2px solid #008800;
  border-radius: 11px;
  font-size: 11px;
}
    
.celrandscoremin {
  border: 1px solid #4444FF;
  border-radius: 4px;
  font-size: 9px;
}
    
tr {
  background-color: #ffd;
}
tbody tr:nth-child(even) {
  background-color: #edf;
}
tbody tr:hover {
  background-color: #fed ;
  text-decoration: bold;
}

td {
   text-align: center;
}

.transp {
	background-color: #acf;
	text-align: center;
}
hr.trunhr {
  border: 6px solid #acf  ;
  border-radius: 50%;
}

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #CCEEFF;
   color: #2244DD;
   text-align: center;
   border-top: 1px solid #3388CC;
}
/* Default: for screens UNDER 500px */
.responsive-table {
  width: 500px;        /* Keep fixed at 500px */
}

/* For screens OVER 500px */
@media (min-width: 500px) {
  .responsive-table {
    width: 100%;       /* Stretch to full width */
    max-width: 100%;   /* No limit */
  }
}

.img-grid {
  display: grid;
  grid-template-columns: repeat(9, auto); /* vanaf 500px: alles op één rij */
  gap: 8px;
}

/* onder 500px: 3 per rij */
@media (max-width: 499px) {
  .img-grid {
    grid-template-columns: repeat(3, auto);
  }
}