html,body,h1,h2,h3,h4,h5,h6 {
	font-family: "Roboto", sans-serif;
}

html {
    position: relative;
    min-height: 100%;
}

body {
	margin: 0 0 20px; /* bottom = footer height */
	background-color: #B2D4FF; /* original #DDDDFF */
    margin: auto;
}

.responsive-image {
  max-width: 100%;
  height: auto;
}

#grad {
	border-radius: 4px; border: 0.15em solid #DEE3FF;
	background: #80B6F9; /* For browsers that do not support gradients - original: #B0BBFF*/
	background: linear-gradient(to right, #80B6F9,#FBFBFB,#80B6F9); /* Standard syntax (must be last) */
}

#form-window {
	border:			1px solid #cccccc;
	border-radius:	4px;
	font:			1em arial, verdana, sans-serif;
	color:			#595959;
	text-align:		left;
	background:		#ffffff;
	background:		-moz-linear-gradient(#ffffff, #CFD6FF);
	background:		-webkit-linear-gradient(#ffffff, #CFD6FF);
	background:		-o-linear-gradient(#ffffff, #CFD6FF);
	box-shadow:		0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.error-solo {
	/*max-width:		400px; /* voor solo-venster */
	margin:			auto; /* voor solo-venster */
	border:			1px solid #e9c59b;
	background:		#ffecce url(https://www.ikhoudjeopdehoogte.nl/images/error.gif) 12px 50% no-repeat;
	padding-left:	3em;
	padding-right:	3em;
	padding-top:	0.5em;
	padding-bottom:	0.5em;
	font:			9pt arial, verdana, sans-serif;
	color:			#e3302c;
	font-weight:	bold;
	/*width:			max-content; /* voor multi-venster */
}

.succes-solo {
	/*max-width:		400px; /* voor solo-venster */
	margin:			auto; /* voor solo-venster */
	border:			1px solid #bfde84;
	background:		#edfbd8 url(https://ikhoudjeopdehoogte.nl/images/success.gif) 12px 50% no-repeat;
	padding-left:	3em;
	padding-right:	3em;
	padding-top:	0.5em;
	padding-bottom:	0.5em;
	font:			10pt arial, verdana, sans-serif;
	color:			#508600;
	font-weight:	bold;
	/*width:			max-content; /* voor multi-venster */
}

.warning-solo {
	/*max-width:		400px; /* voor solo-venster */
	margin:			auto; /* voor solo-venster */
	border:			1px solid #969400;
	background:		#FFF0C8 url(https://www.ikhoudjeopdehoogte.nl/images/warning.gif) 12px 50% no-repeat;
	padding-left:	3em;
	padding-right: 	3em;
	padding-top:	0.5em;
	padding-bottom:	0.5em;
	font:			9pt arial, verdana, sans-serif;
	color:			#969400;
	font-weight:	bold;
	width:			max-content; /* voor multi-venster */
}

.error {
	border:			1px solid #e9c59b;
	background:		#ffecce url(https://www.ikhoudjeopdehoogte.nl/images/error.gif) 12px 50% no-repeat;
	padding-left:	3em;
	padding-right:	3em;
	padding-top:	0.5em;
	padding-bottom:	0.5em;
	font:			9pt arial, verdana, sans-serif;
	color:			#e3302c;
	font-weight:	bold;
	width:			max-content; /* voor multi-venster */
}

.succes {
	border:			1px solid #bfde84;
	background:		#edfbd8 url(https://ikhoudjeopdehoogte.nl/images/success.gif) 12px 50% no-repeat;
	padding-left:	3em;
	padding-right:	3em;
	padding-top:	0.5em;
	padding-bottom:	0.5em;
	font:			10pt arial, verdana, sans-serif;
	color:			#508600;
	font-weight:	bold;
	width:			max-content; /* voor multi-venster */
}

.warning {
	border:			1px solid #969400;
	background:		#FFF0C8 url(https://www.ikhoudjeopdehoogte.nl/images/warning.gif) 12px 50% no-repeat;
	padding-left:	3em;
	padding-right: 	3em;
	padding-top:	0.5em;
	padding-bottom:	0.5em;
	font:			9pt arial, verdana, sans-serif;
	color:			#969400;
	font-weight:	bold;
	width:			max-content; /* voor multi-venster */
}

/**/

.button-schrijver-of-lezer {
    background-color: white;
    border: 1px solid #A9B1FF;
    color: #595959;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
	border-radius: 8px;
}

.button-schrijver-of-lezer:hover {
	background-color: #FEFFD4;
	border: border: 1px solid #A9B1FF;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.button_small {
    background-color: white;
    border: 0.15em solid #595959;
    color: #595959;
    padding: 4px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 10px;
    margin: 2px 1px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
	border-radius: 8px;
}

.button_small:hover {
	background-color: #FEFFD4;
	text-decoration: none;
	border: 0.15em solid #595959;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.button_small_cookie {
    background-color: #FEFFD4;
    border: 0.15em solid #595959;
    color: #595959;
    padding: 4px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 10px;
    margin: 2px 1px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
	border-radius: 8px;
}

.button_small_cookie:hover {
	background-color: #BAFF00;
	text-decoration: none;
	border: 0.15em solid #595959;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}





article, aside, figure, header, hgroup, nav, section { 
	display: block;
	padding: 15px;
}

footer {
	background-color: #5D5DFE;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	overflow: hidden;
	padding: 20px 10px 10px 10px; /* top right bottom left */
	border-top: 1px solid #0000FF;
}

.footer {
	font: 0.75em arial, verdana, sans-serif;
	color: #F8F8F8;
	text-decoration: none;
}

.footer a {
	display: block;
	overflow: hidden;
	text-transform: uppercase;
	font-size: 11px;
	font: arial, verdana, sans-serif; 
	color: #F8F8F8; 
	text-decoration: none;
}

#footer-cookie {
	font: 0.75em arial, verdana, sans-serif;
	color: #595959;
	text-decoration: none;
	background-color: #FCFFB8;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	overflow: hidden;
	padding: 0px 10px 40px 10px; /* top right bottom left */
	border-top: 1px solid #0000FF;
}

.window {
	/*max-width:		800px;
	width:			100%;
	margin:			auto;
	/*padding:		25px;
	box-shadow:		0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border:			1px solid #cccccc;
	border-radius:	4px;
	/*font:			1em arial, verdana, sans-serif;
	color:			#595959;
	text-align:		left;
	background:		#ffffff;
	background-image:		-moz-linear-gradient(#ffffff, #CFD6FF);
	background-image:		-webkit-linear-gradient(#ffffff, #CFD6FF);
	background-image:		-o-linear-gradient(#ffffff, #CFD6FF);*/
	background-image: -webkit-linear-gradient(#ffffff, #CFD6FF);
}

#text-window {
	font: 1.25em arial, verdana, sans-serif;
	font-size: 1vw;
	color: #595959;
	font-weight: bold;
	text-align: center;
	padding: 25px;
	max-width: 100%;
	border-radius: 4px;
	/*float: left;*/
	display: inline-block;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	background: #ffffff;
	background: -moz-linear-gradient(#ffffff, #CFD6FF);
	background: -webkit-linear-gradient(#ffffff, #CFD6FF);
	background: -o-linear-gradient(#ffffff, #CFD6FF);
}

#title-window {
	padding:		15px;
	width:			100%;
	border-radius:	4px;
	box-shadow:		0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	background:		#fff;
	background:		-moz-linear-gradient(#fff, #CFD6FF);
	background:		-webkit-linear-gradient(#fff, #CFD6FF);
	background:		-o-linear-gradient(#fff, #CFD6FF);
	display:		inline-block;
}

#block {
	float: left;
	margin-left: 25px;
	overflow: hidden;
	display: inline-block;'
}

 /* Style inputs, select elements and textareas */
/*input[type=text],[type=password], textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

select {
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	resize: vertical;
}

/* Style the container 
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

/* Floating column for inputs: 100% width 
.col-100 {
  float: left;
  width: 100%;
  margin-top: 9px;
}

/* Floating column for inputs: 75% width 
.col-75 {
  float: left;
  width: 75%;
  margin-top: 3px;
}

/* Clear floats after the columns 
.row:after {
  content: "";
  display: table;
  clear: both;
}*/




#form-window-export {
	border:			1px solid #cccccc;
	border-radius:	4px;
	font:			1em arial, verdana, sans-serif;
	color:			#595959;
	font-weight: 	none;
	text-align:		left;
	padding:		20px;
	background:		#ffffff;
	background:		-moz-linear-gradient(#ffffff, #CFD6FF);
	background:		-webkit-linear-gradient(#ffffff, #CFD6FF);
	background:		-o-linear-gradient(#ffffff, #CFD6FF);
	box-shadow:		0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#form-window-solo {
	width:			40%;
	margin:			auto;
	padding:		25px;
	box-shadow:		0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border:			1px solid #cccccc;
	border-radius:	4px;
	font:			1em arial, verdana, sans-serif;
	color:			#595959;
	text-align:		left;
	background:		#ffffff;
	background:		-moz-linear-gradient(#ffffff, #CFD6FF);
	background:		-webkit-linear-gradient(#ffffff, #CFD6FF);
	background:		-o-linear-gradient(#ffffff, #CFD6FF);
}

#form-window-duo {
	width:			49%;
	margin:			auto;
	padding:		25px;
	float:			left;
	overflow:		hidden;
	display:		inline-block; 
	box-shadow:		0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border:			1px solid #cccccc;
	border-radius:	4px;
	font:			1em arial, verdana, sans-serif;
	color:			#595959;
	text-align:		left;
	background:		#ffffff;
	background:		-moz-linear-gradient(#ffffff, #CFD6FF);
	background:		-webkit-linear-gradient(#ffffff, #CFD6FF);
	background:		-o-linear-gradient(#ffffff, #CFD6FF);
}

#form-window-duo-table {
	width:			49%;
	float:			left;
	overflow:		hidden;
	display:		inline-block;
	box-shadow:		0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border:			1px solid #cccccc;
	border-radius:	4px;
	font:			1em arial, verdana, sans-serif;
	color:			#595959;
	text-align:		left;
	background:		#ffffff;
	background:		-moz-linear-gradient(#ffffff, #CFD6FF);
	background:		-webkit-linear-gradient(#ffffff, #CFD6FF);
	background:		-o-linear-gradient(#ffffff, #CFD6FF);
}

#form-window-trio-table {
	width:			32%;
	float:			left;
	overflow:		hidden;
	display:		inline-block;
	box-shadow:		0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border:			1px solid #cccccc;
	border-radius:	4px;
	font:			1em arial, verdana, sans-serif;
	color:			#595959;
	text-align:		left;
	margin-right:	1%;
	background:		#ffffff;
	background:		-moz-linear-gradient(#ffffff, #CFD6FF);
	background:		-webkit-linear-gradient(#ffffff, #CFD6FF);
	background:		-o-linear-gradient(#ffffff, #CFD6FF);
}

#form-header {
	padding-left: 10px;
	color: #595959;
}

#form-row {
	padding-left: 10px;
	padding-right: 10px;
	border-top: 1px solid #A8ADB3;
	cursor:pointer;
}

#form-row-schrijver-of-lezer {
	font: 1.25em arial, verdana, sans-serif;
	color: #595959;
	text-align: center;
	width: 600px;
	#height: 52px;
	padding: 10px 0px 10px 0px;
	max-width: 600px;
	border-radius: 4px;
	display: inline-block;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	background: #ffffff;
	background: -moz-linear-gradient(#ffffff, #CFD6FF);
	background: -webkit-linear-gradient(#ffffff, #CFD6FF);
	background: -o-linear-gradient(#ffffff, #CFD6FF);
}

.window-writers {
	/*background-image:	url("../images/paper.png");*/
	background:			#ffffff;
	border-radius:		4px;
	font:				1em arial, verdana, sans-serif;
	color:				#595959;
	padding:			15px;
	box-shadow:			0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.window-reacties {
	/*background-image:	url("../images/paper.png");*/
	background:			#ffffff;
	border-radius:		4px;
	font:				1em arial, verdana, sans-serif;
	color:				#595959;
	padding:			15px;
	box-shadow:			0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.form-row-open-project {
	font: 1em arial, verdana, sans-serif;
	color: #595959;
	width: 100%;
	padding: 10px 15px 10px 15px;
	border-radius: 4px;
	display: inline-block;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	background: #ffffff;
	background: -moz-linear-gradient(#CFD6FF, #FFFFFF);
	background: -webkit-linear-gradient(#CFD6FF, #FFFFFF);
	background: -o-linear-gradient(#CFD6FF, #FFFFFF);
}


.smalltext-transparent {
	background:			transparent;
	font:				9px arial, verdana, sans-serif;
	color:				#374853;
	border-style:		none;
	text-decoration:	none;
	text-align:			right;
	padding-top:		3px;
}

.smalltext-transparent-left {
	background:			transparent;
	font:				9px arial, verdana, sans-serif;
	color:				#374853;
	border-style:		none;
	text-decoration:	none;
	text-align:			left;
	padding-top:		3px;
	padding-bottom:		10px;
}

/* Om de velden voor het toevoegen van een reactie te tonen */
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 10px 10px 10px 10px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: #f1f1f1;
}

.content_reacties {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: #f1f1f1;
}
/* Einde - Om de velden voor het toevoegen van een reactie te tonen */

/**/

.text {
	font: 10pt arial, verdana, sans-serif;
	color: #374853;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.smalltext {
	font: 9pt arial, verdana, sans-serif;
	color: #374853;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.smalltextgrey {
	font: 9pt arial, verdana, sans-serif;
	color: #8A8A8A;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.smalltextleft {
	font: 0.7em arial, verdana, sans-serif;
	color: #374853;
	float: left;
	overflow: hidden;
	display: inline-block;
	padding-left: 2px;;
}

.smalltextright {
	font: 0.7em arial, verdana, sans-serif;
	color: #374853;
	float: right;
	overflow: hidden;
	display: inline-block;
	padding-right: 2px;
}

.kunstheader {
	font: 11pt arial, verdana, sans-serif;
	color: #374853;
	background-color: #C7D3FF;
	border: 1px solid #9BACE9;
	padding: 5px;
}

.kunstheader_aanpassen {
	float:right;
	overflow: hidden;
	display: inline-block;
	font-weight: bold;
}

.formitem {
	font: 10pt arial, verdana, sans-serif;
	color: #374853;
	text-align: left;
}

.transparent {
	background: transparent;
	font: 9px arial, verdana, sans-serif;
	color:#374853;
	border-style:none;
	text-decoration:none;
	padding-top:3px;
}

.form-transparent {
	background: transparent;
	font: 10pt arial, verdana, sans-serif;
	color:#374853;
	border-style:none;
	text-decoration:none;
	padding-left: 2px;
}

.form-transparent:hover {
	border: 1px solid #cccccc;
	border-radius: 4px;
	background-color: #FBFBFB;
}

.thumbnail {
	border: 1px solid #ddd; /* Gray border */
	border-radius: 4px;  /* Rounded border */
	padding: 5px; /* Some padding */
	width: 100px; /* Set a small width */
}

.space {
	padding: 25px; /* Some padding */
}

.artspace {
	padding: 3px; /* Some padding */
}

/* Add a hover effect (blue shadow) */
.thumbnail:hover {
	box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

.categorie {
	font: 10pt arial, verdana, sans-serif;
	color: #374853;
	font-weight: none;
	font-style: italic;
}

/*.border {
	border: 1px solid #cccccc;
	border-radius: 4px;
}

.header-border {
	#border: 1px solid #cccccc;
	border-radius: 4px;
	background-color: #CFD6FF;
	#font: 10pt arial, verdana, sans-serif;
	color: #374853;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.header-nieuwe-lezers-en-verhalen {
	border: 1px solid #cccccc;
	border-radius: 4px;
	background-color: #CFD6FF;
	font: 10pt arial, verdana, sans-serif;
	color: #374853;
}*/

.picturesscreen {
	border: 1px solid #eee;
	border-radius: 4px;
	background-color: #FEFFE0;
	padding-top: 25px;
	padding-left: 25px;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0; 
}

.error_form {
	font: 10pt arial, verdana, sans-serif;
	color: #FF0000;
}

/** Table met divs en CSS  - https://wisdmlabs.com/blog/responsive-tables-using-css-div-tag/ **/

#resp-table {
	width: 100%;
	display: table;
	border-radius: 4px;
}

#resp-table-caption {
	display: table-caption;
	text-align: left;
	/**font-size: 30px;
	#font-weight: bold;**/
}

#resp-table-header {
	display: table-header-group;
	background-color: #CFD6FF;
	color: #374853;
	border-radius: 4px;
	padding-left: 10px; 
}

.table-header-cell {
	display: table-cell;
	padding: 10px;
	/**text-align: justify;**/
	border-bottom: 1px solid black;
}

#resp-table-body {
	display: table-row-group;
}

.resp-table-row {
	display: table-row;
}

.table-body-cell {
	display: table-cell;
	padding-left: 10px;
}


/*.menu a {
	font: 1em arial, verdana, sans-serif;
	color: #F8F8F8;
	text-decoration: none;
}*/

/** GEBRUIK VAN TABLE-FOOTER IN CSS
#resp-table-footer {
	display: table-footer-group;
	background-color: gray;
	font-weight: bold;
	font-size: 1em;
	color: rgba(255, 255, 255, 0.45);
}

.table-footer-cell {
	display: table-cell;
	padding: 10px;
	text-align: justify;
	border-bottom: 1px solid black;
}

/** GEBRUIK VAN TABLE-FOOTER IN DE WEBPAGINA
	<div id="resp-table-footer">
		<div class="table-footer-cell">
		Footer 1
		</div>
		<div class="table-footer-cell">
		Footer 2
		</div>
		<div class="table-footer-cell">
		Footer 3
		</div>
		<div class="table-footer-cell">
		Footer 4
		</div>
		<div class="table-footer-cell">
		Footer 5
		</div>
	</div>
**/