@charset "utf-8";
/* CSS Document */
/* donkerblauw: #4e6dbc;
Oranje:  #F60;

*/

body {font-size:15px;color:#333;font-family:Arial, Helvetica, sans-serif;background-color:#EDEDF4;}
a {color: #4e6dbc;}
a:hover,.itemtxt a:hover,.itemhead a:hover,.recenttopics a:hover {color: #F60 !important; }

p { margin: 0 0 5px 0; }

/*
.content b:first-of-type {
    color: #777;
    font-weight: 100;
    background-color: #f9f8f8;
    margin-bottom: px !important;
    display: block;
    padding: 4px;
	overflow-wrap: break-word;
    word-break: break-all;
}
.content a:first-of-type {
    color: #777;
    font-weight: 100;
	text-decoration:none; }

*/
.content a, .rtcontent {
	overflow-wrap: break-word;
    word-break: break-all;	
}
	
	
form { margin: 0; }
#main { max-width:996px;xbackground-color:#FFF;margin-left: auto; margin-right: auto;}
#header {margin-bottom:8px;}
#header img {width:100%;xheight:auto;}
.headerrow {display:block;background-color: #FFF;width:auto;padding:10px;}
.search {display:block;float:left}
.socialmedia {display:block;float:right;}

#colwrapper {
    display: flex;
	flex-direction: row-reverse;
}
#colleft {
	
	min-width: 260px;
	xwidth:260px;
	xpadding: 1%;
	background-color: #fbfbfb;
	display: block;
}
#colleft a {text-decoration:none;}
#colright {
	width: 100%;
	padding: 1%;
	background-color: #FFFFFF;
	display: block;
	margin-left:10px;
}
#footer {background-color:#E5E5EF;
    display: block;
    height: auto;
    clear: both;
    xtext-align: center;
    padding: 8px;
    margin-top: 8px;
    display: block;}
.footcol {display:block;width:33%;float:left;}
	
.itemtxt {padding:5px;font-size:14px}	
.itemtxt ul,.footcol ul,.recenttopics ul,.footcol ul,.hpcol ul {padding:0px;list-style:none;margin:0}
li {text-align:left;/*height:1.4em;*/}
.itemtxt span {
    font-size: 10px;
    margin-right: 5px;
	color: #999;
}
.itemtxt span.age0 {color: #fd0000; }
.itemtxt span.age1 {color: #ed1515; }
.itemtxt span.age2 {color: #c42f2f; }
.itemtxt span.age3 {color: #c44d4d; }

.itemtxt a {color: #222;}
.itemhead {
    height: 15px;
    line-height: 15px;
    padding: 5px;
	color: #4e6dbc;
	font-weight:600;
}
.itemhead a{
	color: #4e6dbc;
}
h1 {font-size:2em;font-weight:600;margin:0;padding:0}
h3 {font-size:.9em;color:#888;margin: 0 0 10px 0;font-weight:normal;}

.itemtxt .new {color:#F00;}
.itemtxt .almostnew {color:#B00;}
.zoeken {
    margin: 8px 0;
    padding: 0 10px;
}
input[type="text"] {padding: 3px;}
.citaat {
    border: 1px solid #CCC;
    display: block;
    padding: 3px;
    color: #219240;
    background-color: #EFEFEF;
}

.clearfix {
    display: block;
    clear: both;
}
.menublock {
	border-top: 2px solid #FFF;
	border-bottom: 1px solid #EEE; }

#menuToggle
{
  display: block;
  position: relative;
  top: 15px;
  left: 15px;
  margin-bottom: 15px;
  
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle .hamb
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
.menu
{
  xposition: absolute;
  width: 100%;
  xmargin: -100px 0 0 -50px;
  margin: 0;
  padding: 0px;
  xpadding-top: 125px;
  overflow:hidden;
  
  background-color: #fbfbfb;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  xtransform: translate(-100%, 0);
  
  xtransition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  box-shadow: none;
  margin-left:-15px;
  
  height:1300px;
  transition: height 2s ease,transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

.menu li
{
  xpadding: 10px 0;
  xfont-size: 22px;
}
.hambmenu {margin: 10px 0 0 5px; }

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul { transform: none; }

.recenttopics { margin: 30px 0 15px; display: block;}
.recenttopics a {color:#2f54b3 !important;font-size:1.1em;}
.recenttopics span { color: #999; font-size: .9em; margin-right: 9px;}
.recenttopics li {
    display: flex;
    height: auto;
	padding-bottom:5px;
}
span.rtdate {
    display: inline-block;
    min-width: 40px;
}
span.rtlink {
    display: block;
    width: auto;
    /* height: 30px; */
}
.rtcontent {float: none;display:block;font-size: 1em;
    margin-top: 2px;}

.twocolumns {}
.twocolumns ul {
    columns: 2;
	padding:0px;list-style:none;margin:0;
}

.stopumtsnote {display:block;background-color: #FFC;border:1px solid #CCC;}
.mce-content-body {
    background-color: #FFF !important;
}

.editform input[type="text"] {
    border: 1px solid #CCC;
    border-radius: 5px;
}	
.editform tr {margin: 15px 0;display:block;}	


@media only screen and (min-width: 860px) {
	input[type="checkbox"],.hamb  {display:none !important;}
}
	
@media only screen and (max-width: 860px) {

#colleft {min-width: 50px;}
#colright {width: 100%;}
#menuToggle { width: 0;}
.menu {width: 250px; transform: translate(-120%, 0);box-shadow: 0px 0px 10px #CCC;}
#menuToggle .menu {height: 200px; transition: height 2s ease, transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); }
#menuToggle input:checked ~ .menu {height:1300px; }



@media (pointer:coarse) {
    /* custom css for "touch targets" */
	span.rtlink a,span.rtlink a:visited {color:#2f54b3 !important;font-size:1.2em !important; font-weight:400 !important;}
}