html {
	height: 100%; /* required for body min-height */
}
body {
	color:#600;	
	background-color:#FFF;
	font-size: 100%;/* 1em; 16px;      12pt;     */
	font-family: Arial, Helvetica, sans-serif;
	line-height: 145%; /*  1.45em;  23px;  17pt;     */
	margin:0;
	padding: 10px; /* affects min-height below */
	/* min-height must be set, or body.getBoundingClientRect won't find correct height (used by chat).*/
	min-height: calc(100% - 20px);  /* minus padding */
}
a {
	color:#B60;
	text-decoration: none;	
}
a:visited {
	color:#600;	
}
a.associatie {
	padding:2px;
	background-image:url(gfx/wit.gif); /* white image covers up the background color. 
																	In other browsers, it only animates once, when it's first loaded.*/
}
a.associatie:link {
	background-color:#FF9; /* light YELLOW background for NEW links */
	border-bottom:1px dotted #d1a91e;
}
a.associatie:visited {
	background-color:#E0E0E0; /* light GREY background for OLD links */
	border-bottom:none #FFF; /* chrome: override a:link border */
}
a.associatie:hover {
	background-image:none;
}
a.associatie:active {
	background-color:#FFFF00;
	color:#B60; /* not white, because IE leaves it white when you go back to the page */
}
.bugs {
	height: 30px;
    padding: 5px;
}
.quote {
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
#container, .container {
	/*! "_comments.inc.php" must go inside container, or it'll be unclickable! */
	position:absolute;
	left:0; right:0;bottom:0;top:0%;
	/*width:100%;*/ /* not width 100% because that creates scroll bars */
	height:100%; /* not 100% because we leave room at the top. */

}
#container>tr>td, .container>tr>td {
	vertical-align:middle;
}
#content, .content {
	text-align:left;
	display:inline-block;
}
/*div, img {*/
/*	display:inline-block;	*/
/*}*/
.ib {display:inline-block;}
.clear    {clear:both;}
.width320 {width: 320px;}
.width400 {max-width: 400px;}
.width500 {max-width: 500px;}
.flash {
	/*display:none;*/
}
.left		{float:left;}
.half		{width:50%;}
.one_third	{width:33%;}
.one_fourth	{width:25%;}
.one_fifth	{width:20%;}
.space {
	float:left;
	min-width:0%;	
	max-width:100%;	
	height:1px;
	/*border:1px solid red;*/
}
/** Anyway to prevent the Blue highlighting of elements in Chrome when clicking quickly?
 https://stackoverflow.com/questions/21003535/anyway-to-prevent-the-blue-highlighting-of-elements-in-chrome-when-clicking-quic
*/
.noSelect {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.noSelect:focus {
	outline: none !important;
}

/** HELP **/
.help_show_link {
	background-image: url(/css/help/help_button.gif);
	height: 30px;
	width: 42px;
	display: inline-block;
	z-index: 500;
	vertical-align: top;
	cursor: pointer;
}
.help_show_link:hover {
	background-position:0 -30px;
}


/* SHARE / COMMENT / LANGUAGE */
.position-left-top,
.position-right-top,
.position-left-bottom,
.position-right-bottom {position: absolute}
.position-left-top     {left: 1em;top:1em;}
.position-right-top    {right:1em;top:1em;}
.position-left-bottom  {left: 1em;bottom:1em;}
.position-right-bottom {right:1em;bottom:1em;}


/*** POPUP ***/
#popup_background, .popup_background { /* js gets this id to change its class.*/
	z-index: 501;
	text-align: center;
	white-space:nowrap /*spacer shouldn't wrap*/;
	position:fixed;
	left: 0; right: 0; top: 0; bottom: 0;
	background-color: rgba(255,255,255,.7);
	overflow: auto; /* show scrollbars when popup doesn't fit */
}
.popup_window {
	color: #600; /* in case body color is white, e.g. serendipity.here */
	background-image: url(/css/help/background.gif);
	background-size: 100% 100% /*stretch to fit*/;
	margin: 2em 1em /*for small screens*/;
	max-width: 450px;
	padding: 2em 3em 2em 3em;
	position: relative;
	z-index: 502;
	text-align: left;
	display: inline-block;
	vertical-align: middle;
	white-space: normal;  /*override popup_background*/
	font-size: initial;  /*override body and whatever*/
	line-height: 1.5em;
}
.popup_window a {
	text-decoration: underline;
	color:#B60;
}
.popup_window a:not(.button):visited {
	color:#B60;
}
.popup_close {
	background-image: url(/css/help/close.gif);
	width: 15px;
	height: 16px;
	position: absolute;
	right: 10px;
	top: 20px;
	padding: 1em;
	background-repeat: no-repeat;
	background-position: center;
}
.popup_ok {
	background-image: url(/css/help/ok.gif);
	width:79px;   height:50px;
	display: block;
	text-align: center;
	margin-top: 1em;
}
.popup_spacer /* stretches background, so window is vertically centered*/ {
	height:90%; /*slightly more to the top, for visual balance.*/
	vertical-align: middle;
	display: inline-block;
}
.hidden {
	display:none !important;
}

.popup_window button,
.popup_window .button,
a.button /* voor /link.hier zonder ? */
{
	width: auto;
	font-size: 1.1em;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	padding: 0.2em 0.5em;
	border-radius: 1em;
	margin: 0.5em 0.1em 1em 0.1em;
	color: black;
	background-color: rgb(221, 221, 221);
	border: 2px solid;
	border-color: lightgray darkgray darkgray lightgray;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.5em;
}


/*** SHARE **/
.share-button {
	background-image: url(/ik/link.gif);
	background-size: contain;
	height: 40px;
	width: 40px;
	display: inline-block;
	z-index: 500;
	vertical-align: top;
	cursor: pointer;
	mix-blend-mode: multiply;
}
.share-links a {
	text-align: center;
	display: inline-block;
	margin-right: 1em;
	margin-bottom: 1em;
}
.share-links img {
	width: 50px;
}
.share-links span {
	display: block;
	font-size: 12px;
}
.share-links a:hover span {
	text-decoration: underline;
}

/*** TOOLTIP https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard2**/
.tooltip {
	position: relative;
	display: inline-block;
}

.tooltip .tooltiptext {
	visibility: hidden;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px;
	position: absolute;
	z-index: 1;
	bottom: 120%;
	left: -100%;
	opacity: 0;
	transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}