/* symlinked in nobodyhere.com/css/bericht.css from freakynote/css/style.css*/
body {
	color:black;
	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:0;
	position: absolute;
	left:0;right:0;top:0;bottom:0; /*for centering preloader in ff*/
	line-height: 1.5em;/*doesn't effect poem because that uses p line-height*/
}
a {
	text-decoration: none;
	color:#0066FF;
}
h1>a {
	color:inherit; /*black*/
}
a:hover {
	text-decoration: underline;
}

/* PRELOADER */
#preloader {
    display: none;
}
    body.loading {
        overflow: hidden; /* no scrollbars while loading */
    }
    .loading #preloader {
        display: block;
        position:absolute;
        left:0;top:0;right:0;bottom:0;
        vertical-align:middle;text-align: center; /*  center middle align */
        background-color:white;
    }
    #preloader-spacer { /* stretch preloader to fill screen */
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    #preloader img {
        vertical-align: middle;
        max-height: 100%;
    }

/* prevent scroll bars while loading, by hiding non-svg images. See https://github.com/CreateJS/PreloadJS/issues/163*/
body > img:last-child[style="visibility: hidden;"]:not([src$=".svg"]){ position:fixed; }

.formulier {
	max-width: 600px;
	min-width: 300px;
	/*margin-bottom: 3em;*/
}
.input-container { /* input can't have padding or border because that adds to the width and causes it to stick out from content */
	padding: 0;
	display: block;
	width: 100%;
	outline: 1px solid lightgray;
	margin-bottom: 10px;
	line-height: 0; /* prevent extra space at the top */
	overflow: hidden; /* prevent <input> from sticking out at the right, stretching things up */
}
input {
	border:none;
	padding: 5px 0 5px 6px;
	width: 100%;
	margin: 0;
	line-height: 1.5em;
    font-size:100%;
}
input.checkbox {
	width:auto;
}
textarea {display:block;width:100%;}

select,
option
{
	padding:.5em;
}
.formulier td,
.formulier tr {
	border:none;
}
.zin img {
	float:right;
}
h2 {
	width:auto;
    font-size: 30px;
	font-weight: bold;
}
.submit, .button {
	width: auto;
	font-size: 1.1em;
	font-weight: bold;
	padding: .2em .5em;
	border-radius: 1em;
	margin: .5em .1em 1em .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;
}
.submit:hover, .button:hover {
	background-color:white;
}
.error {
	color:red;
	/*margin-top: 1em; margin top didn't look right when you forgot your name. */
}

div {
	display: block;
}
.email_label {
	width: 15%;
	display: inline-block;
	overflow: hidden;
	vertical-align: middle;
}
.email_input {
	outline: 1px solid lightgray;
	width:75%
}

#copyTextFeedback {
	font-weight: bold;
	/*margin-bottom: 1em;*/
}

#logo {
	position:absolute;
    margin-top:10px;
    margin-left:10px;
}
#logo img {
	max-height:80px; /*nobodyhere reuses bigger image */
}
#top {
	position:absolute;
	display:flex;
	align-items: center;
	left:0;right:0;
    min-height: 100px; /* logo height */
}
#top h2 {
	display:inline-block;
}
@media (max-width: 800px) { /* logo width * 2 + 600 */
    #top {
        padding-left:100px; /* space at the left, for the logo */
    }
}
canvas {
	position:relative;
}

#bottom {
    padding-bottom: 10px; /*not margin-bottom because js won't include that in height */
	position:relative;
    margin-bottom: 1px; /* next element might have a border/boundary, which gets covered up with margin 0. */
}
#bottom.bg-white {
	background-color: rgba(255,255,255,.7);
}
#bottom h1 {
	margin:0;padding:0;
	font-size:30px;
}
#bottom img {
	float:right;
}

.content{
	margin: 0 auto;
	max-width: 600px;
	padding: 0 10px;
}
main.content {
	margin-bottom: 100px;
}
section {
	margin-bottom:1em;
}
main {
	position:relative;
}
/* OVERLAP */
#logo               {z-index:5;}
.loading #preloader {z-index:4;}
#bottom             {z-index:3;}
#top                {z-index:2;}
canvas              {z-index:1;}

/* POPUP */
#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);
}
.popup_window {
	background-size: 100% 100% /*stretch to fit*/;
	margin: 2em 1em /*for small screens*/;
	max-width: 450px;
	padding: 2em 3em 1em 3em;
	position: relative;
	z-index: 502;
	text-align: left;
	display: inline-block;
	vertical-align: middle;
	white-space: normal /*override popup_background*/;
	background-color: white;
	border: 3px solid black;
}
.popup_window a {
	/*text-decoration: underline;*/
	color:#B60;
}
.popup_window a:visited {
	color:inherit;
	text-decoration:none;
}
.popup_close {
	background-image: url(/css/help/close.gif);
	width:15px;   height:16px;
	position:absolute;
	right:19px;
	top:24px;
}
.popup_ok {
	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;
}