<style type ="text/css">
*{box-sizing: border-box;  margin: 0;  padding: 0px;}
 .close    {display: none;}
 .open     {display: inline;}
           
p{
  margin:0;
  hyphens: auto;
}
  
html{
  background-color: white;
}

blockquote{
  margin:0;
  hyphens: auto;
}

.bodymoreheader{
  padding:2px;
  width:100%;
  font-weight: bold;
}

.bodycontainer {
  padding:2px;
  width:100%;
  position: relative;
  column-width: 20em;
  margin-top:0px;
  margin-right:0px;
  margin-bottom:0px;
  margin-left:0px;
}           
            
            
image{ outline:none;}
figure{ outline:none;}
/*figure:hover { box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); cursor: pointer; }*/
figure:hover {  cursor: pointer; }
/*figure:hover .largeimage {display:flex;}*/
figure.aligncenter { display: block; margin-left: auto; margin-right: auto; }
figcaption{display: block; width:100%; float:left; text-align:center; font-style:italic; font-size:9px; color:blue; padding: 0px; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}

 
#header {
  color: #44CCFF;
  background-color: white;
  border-bottom: 2px solid #FFFF00;
}
#header h171 {
	font-family: Verdana;
	font-style:italic;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
} 

#tags {
	color: #44CCFF;
	font-family: Verdana;
	font-style:italic;
	font-weight:normal;
	font-size: 0.7em;
}

#header {
  color: #44CCFF;
  background-color: white;
  border-bottom: 2px solid #FFFF00;
}

.tags {color: #44CCFF;font-family: Verdana;font-style:italic;font-weight:normal;font-size: 0.7em;}
input {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:1em; color:black; background-color: white;}
input:hover {background-color: lightgrey}

textarea {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:1em; color:black; background-color: white;}
textarea:hover{background-color: lightgrey}
textarea:focus, div input.innertextfield:hover {border-color:#333;}

select {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:1em; color:black; background-color: white;}
select:hover{background-color: lightgrey}
select:focus, div input.innertextfield:hover {border-color:#333;}

pre.MS {
color: green;
margin-bottom: 10px;
margin-top:-2px;
word-wrap: break-word;
white-space: normal;

}

pre.FF {
color: black;
margin-bottom: 10px;
margin-top:-2px;
white-space: pre; /* CSS2 */
/* white-space: -moz-pre-wrap;  Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
/* white-space: -o-pre-wrap; Opera 7 */
/*white-space: -pre-wrap;  Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
}

td {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:1em; color:red;}
a {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:1em; color:blue;  text-decoration:none;}
a:visited {color: blue}
a:hover {color: red; background-color: lightgrey; }
H1-BIG{  font-weight:bold;  font-style:italic; font-size:3em;  color:blue; padding: 0px; margin-top: 3px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}

H1{font-style:italic;  color:blue; padding: 0px;      margin-top: 3px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}
H2{font-style:italic;  color:blue; padding: 0px;      margin-top: 3px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}
H3{font-style:italic;  color:blue; padding: 0px;      margin-top: 3px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}
H4{font-style:italic;  color:blue; padding: 0px;      margin-top: 1px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}
H5{                    color:blue; padding: 0px;      margin-top: 1px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}
H6{                    color:blue; padding: 0px;      margin-top: 1px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}
                                                                                  
H1_red{font-style:italic; font-size:2.0em;  color:red;  padding: 0px; margin-top: 3px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}
H2_red{font-style:italic; font-size:1.5em;  color:red;  padding: 0px; margin-top: 3px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}
H3_red{font-style:italic; font-size:1.17em;  color:red;  padding: 0px; margin-top: 3px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}
H4_red{font-style:italic; font-size:1.0em;  color:red;  padding: 0px; margin-top: 1px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}
H5_red{                   font-size:0.8em;  color:red;  padding: 0px; margin-top: 1px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}
H6_red{                   font-size:0.7em;  color:red;  padding: 0px; margin-top: 1px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}

.H6_red{                  font-size:0.7em;  color:red;  padding: 0px; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}

.h5_select{	      font-size: 0.60em; color:red;font-weight: bold; }  
.h5_select_blue{  font-size: 0.60em; color:blue;font-weight: bold; }    



#menu{   
	/* de marges zetten we op nul */   
margin: 0;   
padding: 0;
position: fixed;
top: 10px;
left:10px;
}


#menu li{   
	/* type van de style zetten we op 'none', zodat we geen opsommingsteken krijgen */   
list-style-type: none;   
  	/* Naar links laten floaten */   
float: left;
	/* breedte en hoogte opgeven */   
width: 10px;   height: 30px;   
	/* marges instellen */   
margin: 2px;   
padding: 0;   
	/* en eventueel een randje */   
border: 1px dashed blue;
list-style-type:none;
}
* {
    box-sizing: border-box;
}

#menu li a{   
	/* van de links een block-element maken voor het :hover effect */   
display: block;   
	/* breedte en hoogte op 100% zodat de <li> wordt opgevuld */   
width: 100%;   
height: 100%;   
	/* ee uiteraard een leuk achtergrondkleurtje */   
background-color: lightyellow;
}

#menu li a: {   
	/* kleur voor het :hover effect */   
background-color: lightblue;
}

.  {
  display:none;
  position: absolute;
  margin:0px;
  padding:0px;
  width: auto; 
  border: 0px ; 
  height:auto; overflow:auto;
  padding: 0px; margin: 0px auto; max-width: 100%;
}


.largeimage {
  display:none;
  position: absolute;
  margin:0px;
  padding:0px;
  width: auto; 
  border: 0px ; 
  height:auto; overflow:auto;
  padding: 0px; margin: 0px auto; max-width: 100%;
}

img {z-index: 99;}
img.alignright { float: right; margin: 0 0 1em 1em; display: block;}
img.alignleft { float: left; margin: 0 1px 1px 0; display: block; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
/*img:hover { box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); cursor: pointer; }*/
img:hover { cursor: pointer; }
/*img:hover .largeimage {display:flex;}*/
/*img.hover .largeImage {display:flex; cursor: pointer; }*/


.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.hover { box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); function:imghoover()}


ul{
  font-style:italic;
	font-weight:normal;
	font-size: 0.9em;
  margin:0px; 
}

ul.select > li {
    width: 200px;
    background: #eee;
    line-height: 25px;
    font-size: 0.9em;
    padding: 0 10px;
    cursor: pointer;
}

.contentmeta {color: blue;font-family: Verdana;font-style:italic;font-weight:normal;font-size: 1em; width: 100%; text-align: left; }

.commentboddy { float: left;
                text-align: left; 
                overflow: none; 
                display: block; 
                padding: 0px; 
                margin: 0px; 
                margin-top: 0px; 
                border: 0px solid black; 
                border-bottom: 0px;  
                box-shadow: 5px 5px #888888;
              }
.commentbuttonM {
/*    background-color: white; */
/* #4CAF50;Green 
    color: white;

*/
		background: transparent;
		background-repeat: no-repeat;
    padding: 0px;
    font-size: 1.00em;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin:0px;
    margin-right:1.00em;
    margin-bottom:0px;
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.2);
} 
.commentbuttonM:hover{cursor:pointer;}
.commentbutton {
/*    background-color: white; */
/* #4CAF50;Green 
    color: white;

*/
		background: transparent;
		background-repeat: no-repeat;
    padding: 0px;
    font-size: 1,00em;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin:0px;
    margin-right:6px;
    margin-bottom:0px;
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.2);
} 

.commentbutton:hover {
   /*  background-color: #008CBA; #008CBA; Blue */
     background-color: #ddd	; /* #4CAF50;Green 	background: transparent;*/
	
		box-shadow: 1px 1px 1px 2px rgba(0,0,0,0.2);
   cursor:pointer;
}

.commentbutton:disabled {
    opacity:0.3;
   cursor:default;
}


/*zie verder https://css-tricks.com/snippets/css/a-guide-to-flexbox/#basics-and-terminology */


.boxR{ overflow:hidden;  display: flex;  flex-flow: column;  height: 100%; margin:0; padding:0;}
.boxR .rowR.headerR {
         flex: 0 1 auto;
         background-color: #f1f1f1;
      }
.boxR .rowR.contentR {
        flex: 1 1 auto;
        overflow:hidden;
      }
.boxR .rowR.footerR {
        flex: 0 1.0em;
         background-color: #f1f1f1;
 }

.boxC{ overflow:hidden;  display: flex;  flex-flow: row;  height: 100%; margin:0; padding:0;}
.boxC .col.left {
         background-color: #f1f1f1;
         overflow-y:auto;
        flex: 0 0 20%;
    }
.boxC .col.leftM {
         background-color: #f1f1f1;
         overflow-y:auto;
        flex: 0 0 30%;
    }
.boxC .col.center {
        flex: 0 0 60%;
     }
.boxC .col.centerM {
        flex: 1 0 70%;
     }

.boxC .col.right {

        flex: 0 0 20%;
        overflow-y:auto;
        width:20%;
          background-color: #f1f1f1;
}
#main {
  width: 100%;
  height: 100%;
  border: 1px solid #c3c3c3;
  display: flex;
}
#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}

.contenttitel:hover{  cursor:pointer;}
</style>


