body {
        max-width: 980px;
	margin: 10px auto;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
	background-color: #ffffff;
}

#pgcenter {
        border: 2px solid #f0f0f0;
        background-color: #f0f0f0;
	text-align:left;
}

/* ======= heading article and logo line ======= */

header {
        margin: 0;
	border: 0;
	padding: 10px 0 10px 20px;  
}

div.logoline {
	background-color: #006790; 
        height:10px; font-size: 1px
}


article {
         background: #ffffff;
         padding: 1px 20px 20px 20px;
	 margin: 0;
}

article.register {padding-left: 5px;}

article.wysiging {
        margin: 0 0 0 130px;
        font-family: courier, monospace;
}


/* ========== fonts and sizes ============ */

h1 {font-family: Baskerville, Times New Roman, Verdana; font-weight: bold;}
h2 {font-family: Baskerville, Times New Roman, Verdana; font-weight: bold;}
h3 {font-family: Baskerville, Times New Roman, Verdana; font-weight: bold;}
h4 {font-family: Baskerville, Times New Roman, Verdana; font-weight: bold;}

h1  {font-size: 29px;}
h2  {font-size: 22px;}
h3  {font-size: 20px;}
h4  {font-size: 16px; font-style: italic;}

p {text-align: justify}

.p6   {font-size:   8px;} 
.p8   {font-size:  10px;} 
.p9   {font-size:  11px;} 
.p10  {font-size:  12px;} 
.p11  {font-size:  13px;} 
.p12  {font-size:  14px;}
.p14  {font-size:  16px;}
.p16  {font-size:  18px;}

.p8b   {font-family: Baskerville, Times New Roman, Verdana; font-size: 11px;} 
.p9b   {font-family: Baskerville, Times New Roman, Verdana; font-size: 12px;} 
.p10b  {font-family: Baskerville, Times New Roman, Verdana; font-size: 13px;} 
.p12b  {font-family: Baskerville, Times New Roman, Verdana; font-size: 16px;}
.p14b  {font-family: Baskerville, Times New Roman, Verdana; font-size: 19px;}
.p16b  {font-family: Baskerville, Times New Roman, Verdana; font-size: 22px;}
.p18b  {font-family: Baskerville, Times New Roman, Verdana; font-size: 24px;}
.p20b  {font-family: Baskerville, Times New Roman, Verdana; font-size: 27px;}
.p22b  {font-family: Baskerville, Times New Roman, Verdana; font-size: 29px;}
.p24b  {font-family: Baskerville, Times New Roman, Verdana; font-size: 32px;}
.p26b  {font-family: Baskerville, Times New Roman, Verdana; font-size: 35px;}

.p10_foto {font-size: 13px;} 
.p10_a_begrafnis  {font-size:  13px;}    /* vir begrafnis foto */
.p24a  {font-family: Verdana , Times New Roman, Verdana; font-size: 32px; FONT-WEIGHT: bold;}
.p14tr  {font-family: Times New Roman, Baskerville; font-size: 20px;}


/* ============ general settings ============== */

.center  {text-align: center;}
.right   {text-align: right;}
.left    {text-align: left;}
.justify {text-align: justify;}

ul.nodot {list-style-type: none;}

li {margin: 10px 0;}

img {border:0; margin:0; padding: 0;}

blockquote {margin: 0 20px 0 20px}  

/* =============== a link ============== */

a:link {
  	font-weight: normal;
  	text-decoration: none;
  	color: #0000b0;
}

a:visited {color: #0000b0;}
a:hover {color: #0000b0;}
a:active {color: #0000b0;}

a:link.p8     {font-size: 11px;} 
a:visited.p8   {font-size: 11px;} 
a:active.p8   {font-size: 11px;} 

a:link.p10  {font-size: 13px;} 
a:visited.p10  {font-size: 13px;} 
a:active.p10  {font-size: 13px;} 

a:link.p12     {font-size: 16px;}
a:visited.p12  {font-size: 16px;}
a:active.p12  {font-size: 16px;}

/* ========== special fonts and styles ========= */

hr.noshade70  {height:2px; border-width:0; width: 70%; color:gray; background-color:gray;}
hr.noshade100 {height:2px; border-width:0; width: 100%; color:gray; background-color:gray;}

.line       {background-color: #999966}
.boxbord    {background-color: #000000}
.bannerbg   {background-color: #c0c0f0}
.headerline {background-color: #0000c0}
.boxcolor   {background-color: #ffff80}
.boxcolor2  {background-color: #ffff80}

.red     {background-color: #ff0000}
.green   {background-color: #00dd00}
.blue    {background-color: #0000ff}
.l_blue  {background-color: #d0d0ff}
.orange  {background-color: #ff9900}
.yellow  {background-color: #ffff00}


/* ======= horizontal menu using CSS Grid ======= */

nav.hmenu {
    display: grid;
    grid-template-columns: repeat(11, auto);
    grid-template-width: 30px;
    width: 100%;
    background-color: #9090b0;
    gap: 0;
}

nav.hmenu a {
    display: block;
    text-align: center;
    padding: 6px 1px;
    font-family: Arial, Verdana, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    background-color: #006790;
    border: 1px solid #9090b0;
    box-sizing: border-box;
}

nav.hmenu a:hover {background-color: #004770;}
nav.hmenu a.green {background-color: #00B700;}
nav.hmenu a.green:hover {background-color: #008000;}
nav.hmenu a.red {background-color: #b00000;}
nav.hmenu a.red:hover {background-color: #900000;}

/* ============  vertical menu using grid ============= */

.vmenu_indent {margin: 0 0 0 130px;}              

div.vmenu {
	width:130px;
	margin: 10px 0 0 0;
	list-style: none;
	text-align: center;
	background-color: #9090b0;
        float: left;
}

div.vmenu ul {
    	padding: 0;
    	margin: 0;
    	list-style: none;
}

div.vmenu li {
    	padding: 1px 1px;
    	margin: 0;
}

div.vmenu a:link {
	display: block;
    	text-align: center;
    	text-decoration: none;
        font-family: Arial, Verdana, Verdana;
    	font-size: 12px;
    	font-weight: bold; 
    	padding: 8px 0px;    
    	background-color: #006790;
    	border: 0px solid #808080;
    	color: #ffffff;
    	background-color: #006790;
}

div.vmenu a:visited {
    	color: #ffffff;
    	background-color: #006790;
}

div.vmenu a:hover {
   	color: #ffffff;
   	background-color: #004770;   
}

div.vmenu a.red:link {
    	background-color: #b00000;
    	color: #ffffff;
}

div.vmenu a.red:visited {
   	color: #ffffff;
    	background-color: #b00000;
}

div.vmenu a.red:hover {
   	color: #ffffff;
    background-color: #b00000;
}

div.vmenu a.orange:link {
    	color: #ffffff;
    	background-color: #ff8822;
}

div.vmenu a.orange:visited {
   	color: #ffffff;
    	background-color: #ff8822;
}

div.vmenu a.orange:hover {
   	color: #ffffff;
    	background-color: #ff7711;
}


/* ====================== buttons ======================== */

/* --- vir byvoeg of verander --- */

.btn {
        display: inline-block;
        padding: 6px 12px;
        background-color: #006790;
        text-decoration: none;
        border-radius: 5px;
}

.btn:hover {background-color: #004770;}

a.btn {color: white; font-weight: bold; font-size: 14px;}


/* --- for submit button --- */

button  {font-weight:bold; color: white; background-color: #006790; 
        border-radius: 5px; border: 1px solid #0000ff; padding: 5px 10px 5px 10px;}


/* === photos ==== */

.photo_right {
     float: right;
     margin: 0 0 10px 15px;
}

.photo_left {
     float: left;
     margin: 0 15px 10px 0;
}

.photo_center { 
     display: block;
     margin: 0 auto;       
}

/* ================ grey box ================ */

div.box_wide {  
   width:100%; padding: 0 20px; box-sizing: border-box; 
   border: 2px #d8d8d8 solid; background-color: #f0f0f0;
}

div.box_right {  
   float: right; margin: 0 0 10px 20px;
   padding: 0 20px; box-sizing: border-box; 
   border: 2px #d8d8d8 solid; background-color: #f0f0f0;
}

table.box_middle {
  margin: 0 auto;
  padding: 4px;
  background-color: #e0e0e0;
  border: 2px solid #c0c0c0;}

table.box_right {
  float: right;
  margin: 0 0 3px 12px;
  padding: 4px;
  background-color: #e0e0e0;
  border: 2px solid #c0c0c0;}

table.box_left {
  float: left;
  margin: 0 12px 3px 0;
  padding: 4px;
  background-color: #e0e0e0;
  border: 2px solid #c0c0c0;}
  
/* ================ white box ================== */
    
table.wbox_middle {
  margin: 0 auto;
  padding: 4px;}

table.wbox_right {
  float: right;
  margin: 0 0 3px 12px;
  padding: 4px;}
 
table.wbox_left {
  float: left;
  margin: 0 12px 3px 0;
  padding: 4px;}
  
/* ===   other  ====   */
    
.input_ro {
  border: 0px solid #e0e0e0;
  background-color: #d8d8d8;}

table.argief1 {
  margin: 0 auto;
  padding: 4px;
  background-color: #f8f8dc;
  border: 3px solid #e8e8cc;
}

table.argief {margin: 5px auto; font-size: 9px; border: 2px solid #000000; border-collapse: collapse; background-color: #ffffff;}
table.argief  th {text-align: center; padding: 5px; border: 1px solid #000000;}
table.argief1 th {vertical-align: top; text-align: right;} 
table.argief td {text-align: left; padding: 5px; border: 1px solid #000000;}

/*  ============== gasteboek vorm ============== */

table.gasteboek {
       float: right; 
       margin: 10px 10px 10px 20px; 
       padding: 5px;
       border: 2px solid #d0d0d0;
       background-color: #f0f0f0;
       font-size: 10px;
}

table.gasteboek  th {font-size: 11px; text-align: right;}
table.gasteboek input    {font-family: Arial; font-size: 12px; width: 200px}
table.gasteboek textarea {font-family: Arial; font-size: 12px; width: 273px;}
table.gasteboek .head {font-size: 14px; text-align: center; padding-bottom:5px; }
table.gasteboek .kommentaar {text-align: left; padding-top:10px;}
   

/* ==== dis nuut ===== */

table.dis_nuut {margin: 0 auto; width: 700px; }

table.dis_nuut th {vertical-align: text-top; text-align:right; padding: 5px;}

table.dis_nuut td {text-align: justify; padding: 5px;}


/* ================== Nederlandse voorgeslagte ============ */

figure.voorgeslagte {
  	float: right; 
    	margin: 0 0 12px 12px;
    	padding: 8px;  
    	background-color: #e0e0e0; 
    	border: 2px solid #c0c0c0;
}

figcaption.voorgeslagte {
   font-size: 12px; 
   font-weight: bold;
}


/* ============== index of all family members using grid ============= */

.idx-container {
    display: grid;
    grid-template-columns: auto 164px;
    background: #e0e0e0;
    padding: 1px;
    gap: 2px;
    max-width: 800px;
    margin: 20px auto;
}

.idx-header  {
   grid-column: 1 / -1;      /* Span both columns */
   padding: 10px;
   font-family: Baskerville, Times New Roman, Verdana;
   font-weight: bold;
   font-size: 27px;
   text-align: center;
   background: #f0f0f0;
}

.idx-footer {
   grid-column: 1 / -1;      /* Span both columns */
   padding: 1px;
   text-align: center;
   background: #f0f0f0;
}

.idx { 
   padding: 4px 8px;
   background: #ffffff;
}


/* =========== vertical color line on left for family generations ============== */

div.code_a1 {border-left: 4px solid #ff0000; padding-left: 25px}
div.code_b1 {border-left: 4px solid #0000ff; padding-left: 25px}
div.code_c1 {border-left: 4px solid #00dd00; padding-left: 25px}
div.code_d1 {border-left: 4px solid #ffcc33; padding-left: 25px}

div.code_a2 {border-left: 4px solid #ffa0a0; padding-left: 25px}
div.code_b2 {border-left: 4px solid #c0c0ff; padding-left: 25px}
div.code_c2 {border-left: 4px solid #c0ffc0; padding-left: 25px}
div.code_d2 {border-left: 4px solid #ffff00; padding-left: 25px}


/* =============== indents for geslagregister ========== */

.indent-aa  {padding-left: 20px; text-indent: -20px;}
.indent-bb  {padding-left: 20px; text-indent: -20px;}
.indent-cc  {padding-left: 20px; text-indent: -20px;}
.indent-dd  {padding-left: 40px; text-indent: -20px;}
.indent-ee  {padding-left: 60px; text-indent: -20px;}
.indent-ff  {padding-left: 80px; text-indent: -20px;}
.indent-gg  {padding-left: 100px; text-indent: -20px;}
.indent-hh  {padding-left: 120px; text-indent: -20px;}
.indent-ii  {padding-left: 140px; text-indent: -20px;}

.indent-b  {padding-left: 20px;}
.indent-c  {padding-left: 20px;}
.indent-d  {padding-left: 20px;}
.indent-e  {padding-left: 40px;}
.indent-f  {padding-left: 60px;}
.indent-g  {padding-left: 80px;}
.indent-h  {padding-left: 100px;}
.indent-i  {padding-left: 120px;}

/* ----- old indents ----- */

p.indent, p.indent1 {
  	margin-left:  20px;
  	text-indent: -20px;
}

p.indent2 {margin-left: 20px;}

p.indent3 {
  	margin-left:  20px;
  	text-indent: -20px;
}

p.indent4 {margin-left: 30px;}

p.indent5 {
        margin-left:  60px;
  	text-indent: -20px;
}


/* ========================================================= */