body {
	background-image: url("perkament.jpg");
	font-family: times;
	font-size: 125%;
	color: #7575a3
}

div.grid-container {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-areas:
   'stam vader vader_h moeder'
   'stam vader_dat vader_h moeder_dat'	
   'stam naam naam naam '
   'stam geboren gehuwd1 gestorven'
   'stam naam_p1 naam_p1  naam_p1'
   'stam geboren_p1 gehuwd2 gestorven_p1'
   'stam naam_p2 naam_p2  naam_p2'
   'stam geboren_p2 gehuwd3 gestorven_p2'
   'stam naam_p3 naam_p3  naam_p3'
   'stam geboren_p3 . gestorven_p3'
   'stam lijn lijn lijn'
   'stam kind kind data'
   'index index index index';
  grid-gap: 0px;
  padding: 0px;
}

div.stam { 
  grid-area: stam;
  text-align: center;
  background-image: url("papier.jpg");

}

div.vader { 
	grid-area: vader;
 	text-align: center;
}

div.moeder { 
	grid-area: moeder;
 	text-align: center;
}

div.vader_dat { 
	grid-area: vader_dat;
 	text-align: center;
}

div.moeder_dat { 
	grid-area: moeder_dat;
 	text-align: center;
}

div.vader_h { 
	grid-area: vader_h;
 	text-align: center;
}

div.naam { 
	grid-area: naam;
 	text-align: center; 
}

div.geboren { 
	grid-area: geboren;
 	text-align: center;
}



div.gestorven { 
	grid-area: gestorven;
 	text-align: center;  
}

div.gehuwd1 { 
	grid-area: gehuwd1;
	text-align: center;
 }

div.gehuwd2 { 
	grid-area: gehuwd2;
	text-align: center;
 }

div.gehuwd3 { 
	grid-area: gehuwd3;
	text-align: center;
 }
div.naam_p1 { grid-area: naam_p1;	text-align: center;
 }

div.geboren_p1 { grid-area: geboren_p1;	text-align: center;
 }

div.gestorven_p1 { grid-area: gestorven_p1; 	text-align: center;
}

div.naam_p2 { grid-area: naam_p2;	text-align: center;
 }

div.geboren_p2 { grid-area: geboren_p2;	text-align: center;
 }


div.gestorven_p2 { grid-area: gestorven_p2; 	text-align: center;
}

div.naam_p3 { grid-area: naam_p3;	text-align: center;
 }

div.geboren_p3 { grid-area: geboren_p3;	text-align: center;
 }


div.gestorven_p3 { grid-area: gestorven_p3; 	text-align: center;
}

div.kind { 
	grid-area: kind; 
	text-align: center; 
}

div.data { grid-area: data; text-align: left;   
 }

div.lijn { grid-area: lijn; 	text-align: center;
}

div.index { grid-area: index; 	text-align: center; 
}

.grid-container > div {
  padding: 0px 0;
}



div.aktebox {
	margin:auto auto;
	height:1px;
	target:blank;

}

.akte {
	float:middle; 
	position:relative;
	margin:1px auto;
	width:100%;
}

.akte img { 
	border:0px solid #000;
	vertical-align:top;
	max-widt:100px;
	max-height:100px;
}

.akte:hover {
	border:1; 
	z-index:1;
}
.akte span { 
	position:absolute;
	visibility:hidden;
}
.akte:hover span { 
	visibility:visible;
	top:37px;
	left:0px;
}

div.index {
 width: 2500px;
 text-align: left; 
}

a {color: #000099;}

span.groot {
font-size: 100%;
color: #003399;
text-transform: uppercase
}


h1 {
color: #660066;
font-size: 175%;
text-transform: uppercase
}

hr.h2 {
color: #f00;
background-color: #800000;
height: 3px;
width: 20%
}

hr.h4 {
color: #f00;
background-color: #800000;
height: 3px;
width: 40%
}

hr.h8 {
color: #f00;
background-color: #800000;
height: 3px;
width: 80%
}

ul.stam {
  list-style-type: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  height: 100%; /* Full height */
}

ul.kind {
  list-style-type: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

ul.lijst {
 border-left: 1px solid #669999;
 list-style-type: disc;
 padding: 10px 30px;
}


footer {
font-size: 75%;
}