/* CSS Document */


/* Variables*/

:root {
      --bkg_col :rgba(169, 230, 243,0.2);
      --stw_bkg :rgba( 42, 194, 226,0.4);
      --stw_knp :rgba( 42, 194, 226,0.8);
      --alg_bkg :rgba( 92,  70,  50,0.2);
      --alg_knp :rgba( 92,  70,  50,0.6);
  --fam_ned_bkg :rgba(254, 228,  89,0.4);
  --fam_ned_knp :rgba(254, 228,  89,1.0);
  --fam_ndv_bkg :rgba(255, 255,   0,0.4);
  --fam_ndv_knp :rgba(255, 255,   0,1.0);
  --fam_grn_bkg :rgba(144, 238, 144,0.4);
  --fam_grn_knp :rgba(144, 238, 144,1.0);
  --fam_val_bkg :rgba( 47, 218, 255,0.4);
  --fam_val_knp :rgba( 47, 218, 255,1.0);
  --fam_est_bkg :rgba( 47, 184, 193,0.6);
  --fam_est_knp :rgba( 47, 184, 193,1.0); 
  --fam_pln_bkg :rgba(243,  36, 123,0.4);
  --fam_pln_knp :rgba(243,  36, 123,0.6);
  --fam_ghn_bkg :rgba( 86, 214,  41,0.8);
  --fam_ghn_knp :rgba( 86, 214,  41,1.0);
  --fam_ger_bkg :rgba(205, 127,  50,0.4);
  --fam_ger_knp :rgba(205, 127,  50,1.0);
  --fam_ams_bkg :rgba(243,  36, 123,0.4);
  --fam_ams_knp :rgba(243,  36, 123,0.6);
  --fam_ind_bkg :rgba(255, 102,  31,0.4);
  --fam_ind_knp :rgba(255, 102,  31,0.6);
  
}

/* Algemene Instellingen*/
body {
    background-image: url(../gifs/perkament4tr.png);
    background-color: var(--stw_bkg);
    background-repeat: no-repeat;
    /*background-attachment: fixed;*/
    color : black;
}

#header {
	position: fixed;
	z-index: 1;
	width: 972px;
	height: 86px;
	left: 5px;
	top: 5px;
	border: 1px solid black;
    border-radius: 2px;
	/*background-color: rgb(235, 170, 20);*/
	text-align: center;
	overflow: hidden;
    box-shadow: 2px 2px;
}

#flag-left {
	position: absolute;
	left : 10px;
	top : 10px;
	width: auto;
	height: auto;
	border: 1px solid black;
    border-radius: 4px;
	background-color: black;
	box-shadow: 2px 2px;
}



/*#flag-left a:hover {
	border: 1px groove yellow;
    border-radius: 4px;*/
}


#flag-right {
	position: absolute;
	left : 908px;
	top : 10px;
	width: auto;
	height: auto;
	border: 1px solid white;
  border-radius: 2px;
	background-color: gray;
	box-shadow: 2px 2px;
}

#flag-right a:hover {
	border: 1px groove yellow;
  border-radius: 4px;
}


/* Horizontale menubalk met menu*/
#horz-menubar{
	position: fixed;
	z-index: 1;
	top: 98px;
	height: 30px;
	width: 972px;
	left: 5px;
	padding-top: 5px;
	margin: 0;
	margin-top: 0px;
	border: 1px solid black;
    border-radius: 4px;
  /* background-color: #EBAF14;  */
	overflow: auto;
    box-shadow: 2px 2px;
}

#horz-menubar_notfixed{

	z-index: 1;

	height: 30px;
	width: auto;
	left: 5px;
	padding-top: 5px;
	margin: 0;
	margin-top: 0px;
	border: 1px solid black;
  border-radius: 4px;
  /* background-color: #EBAF14;  */
	overflow: auto;
  box-shadow: 2px 2px;
}



#h-menu ul{
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	padding-left: 0px;
	padding-top: 0px;
	padding-right: 15px;
	padding-bottom: 0px;
	/*margin: auto;*/
	/*display: inline;*/

}

#h-menu ul li{
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 0px;
	padding-left: 1em;
	padding-top: 0px;
	padding-right: 1em;
	padding-bottom: 0px;
	border: 1px solid black;
    border-radius: 4px;
	/*background-color: yellow; */
	list-style: none;
	display: inline;
	text-align: center;
    box-shadow: 4px 4px;

}

#h-menu ul li.home{
	background-color: aqua;
	margin: 5px;
	padding: 0px 1em 0px 1em;
	border: 1px solid blue;
	text-align: justify;

}

#h-menu ul li a:link{
	text-decoration: none;
}

#h-menu ul li a:visited{
	text-decoration: none;
}

#h-menu ul li a:hover{
	margin: auto;
	background-color: var(--alg_knp);
	color: black;
	/*display: inline;  */
}

/*verticale sidebar met menu*/

#left-sidebar{
	position: fixed;
	z-index: 1;
	top: 145px;
	height: auto;
	width: 125px;
	left: 5px;
	padding: 3px;
	margin: 0px;
	border: 1px solid black;
    border-radius: 4px;
    box-shadow: 2px 2px;
	/*background-color: green;*/
}

#v-menu ul{
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 0px;
	padding-left: 0px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	/*margin: auto;*/
	/*display: inline;*/

}
#v-menu ul li{
	margin-left: 0px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	border: 1px solid black;
	/*background-color: yellow; */
    border-radius: 4px;
	list-style: none;
	/* display: inline; */
	text-align: center;
    box-shadow: 4px 4px;

}

#v-menu ul li.home{
	background-color: aqua;
	/*width: auto;*/
	margin: 5px;
	padding: 0px 0px 0px 0px;
	border: 1px solid blue;
	text-align: center;

}

#v-menu ul li a:link{
	text-decoration: none;
}

#v-menu ul li a:visited{
	text-decoration: none;
}

#v-menu ul li a:hover{
	margin: auto;
	background-color: var(--alg_knp);
	color: black;
 
}

#voetnote {
	border: 1px solid black;
    padding: 1px;
	text-align: center;
	color:black;
     border-radius: 4px;
	/*background-color:#EBAF14;    */
	font-size: 10px; /*font-family : Courier,'Times New Roman','Courier New', serif ;*/
	box-shadow: 2px 2px;
}

/*Rechter sidebar*/

#right-sidebar{
	position: absolute;
	z-index: 0;
	top: 145px;
	height: auto;
	width: 125px;
	left: 842px;
	padding: 5px;
	margin: 0px;
	border: 1px solid black;
    border-radius: 4px;
  /*background-color: #EBAF14; */
	color: black;
	text-align: center;
    box-shadow: 2px 2px;
}        

p.blocktext {
	margin-left: auto;
	margin-right: auto;
	width: 7em
}

img.displayed {
	display: block;
	margin-left: auto;
	margin-right: auto
}

#right-sidebar-low{
     position: fixed;
	  z-index: 0;
         left: 842px;
	      top: 510px;
       border: 1px solid black;
      padding: 5px;
       height: auto;
	    width: 125px;
border-radius: 4px;
   box-shadow: 2px 2px;
   font-family : Arial,'Times New Roman','Courier New',;
   font-size:  12px;
      
}

#reclame {
	border: 2px solid var(--pt_rand_klr);
	text-align: center-left; /*color: #0268D0;*/
	background-color: #00FF00;
	font-size: 14px;
	font-family : Arial,'Times New Roman','Courier New',;
	color: Black;
	padding: auto;
	margin: 2px;
}

/* Vierkantje voor link nummers */

#boxje {
      border: 1px solid green ;
 font-family: Arial, Helvetica, sans-serif;
   font-size: x-small;
  box-sizing: border-box;
       float: left; 
       width: auto;
      height: auto;
     padding: 1px;
     margin-right: 10px;
  } 

/* Rechthoek voor link */

#lange_box {
        border: 2px solid black;
    box-sizing: content-box;
         width: auto;
        height: auto;
       padding: 6px;
    text-align: justify;
 
  }
  
  #rouw_box {
        border: 20px solid black;
    /*box-sizing: content-box;*/
         width: auto;
        height: auto;
       padding: 6px;
    text-align: left;
    background-color:var(--stw_bkg);
 
  }
  
  #datum_box {
	border: 2px solid black;  
	box-sizing: content-box; 
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
	float: left;
	width: auto;
    height: auto;
	padding: 6px;
    text-align: justify;
  }
  
.par{
    padding: 40px;
     }    

.kleine-letters {

  font-size : x-small;
}

.middel-letters {

  font-size : small;
}


/*HOOFDVENSTER*/

#main{
	width: 684px;
	padding: 5px 5px 5px 5px;
	border: 1px solid black;
	/*display: block;*/
	position: absolute;
	z-index: 0;
	/* background-color: #EBAF14; */
  border-radius: 4px;
	top: 145px;
	left: 142px;
	text-align: center;
	/*color: #804040;*/
	overflow: auto;
  box-shadow: 2px 2px;
	
}

#main p {
	text-align: center;
	font-size: 16px;
	font-family: 'Times New Roman','Courier New', Courier, serif;
}


/*#preform {
    text-align   : left;
    font-family  : 'Times New Roman','Courier New', Courier, serif;
    font size    : 8px;
    font-weight  : 600;
    padding-left : 20px;
}           */

/* kleuren */

.sitewide {
    background-color : var(--stw_bkg);
         font-weight  : bold;
}

.algemeen {
     background-color : var(--alg_bkg); 
         }
         


.nederland {
     background-color : var(--fam_ned_bkg);
       
        }
        
 .groningen {
     background-color : var(--fam_grn_bkg);
        
}

.estland {
    background-color : var(--fam_est_bkg);
    
       }       

.polen {
     background-color : var(--fam_pln_bkg); 
         
}

.ghana {
     background-color : var(--fam_ghn_bkg); 
        
}

.nrd_veluwe {
      background-color : var(--fam_ndv_bkg);
         
}

.vallei {
     background-color : var(--fam_val_bkg); 
         
}

.germany {
     background-color : var(--fam_ger_bkg); 
         
}

.amster {
     background-color : var(--fam_ams_bkg); 
         
}

.india {
     background-color : var(--fam_ind_bkg);
}




/*knoppen*/

.knop-stw {
      background-color : var(--stw_knp); 
}

.knop-alg {
     background-color : var(--alg_knp); 
}
         
.knop-fam-ned {
     background-color : var(--fam_ned_knp); 
}
 
.knop-fam-ndv {
     background-color : var(--fam_ndv_knp); 
} 

.knop-fam-grn {
     background-color : var(--fam_grn_knp); 
}

.knop-fam-val {
     background-color : var(--fam_val_knp); 
}

.knop-fam-est {
     background-color : var(--fam_est_knp); 
}

.knop-fam-pln {
     background-color : var(--fam_pln_knp); 
} 

.knop-fam-ghn {
     background-color : var(--fam_ghn_knp); 
}   

.knop-fam-ger {
     background-color : var(--fam_ger_knp); 
}  

.knop-fam-ams {
     background-color : var(--fam_ams_knp); 
}                              

.knop-fam-ind {
     background-color : var(--fam_ind_knp); 
}                              


/*-------- Slideshow --------*/

#slideshow { 
  margin: 10px auto; 
  position: relative; 
  width: 140px; 
  height: 140px; 
  padding: 10px; 
  box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
  position: absolute; 
  top: 10px; 
  left: 10px; 
  right: 10px; 
  bottom: 10px; 
}

/*------Foto's Plaatsen --------*/


.pic_center {
	
  /*display:block;
  margin-left: auto;
  margin-right:auto;
  width: 100%;*/
  text-align: center;
}

.pic_left {
	display:block;
	float: left:
	
}

.pic_right {
	display:block;
	float: right:
	
}

.pic_row {
  display: flex;
}

.pic_col {
  flex: 33.33%;
  padding: 5px;
}