* {
	box-sizing: border-box;
}

html {
	font-size: 100%;
	height: 100%; /* to fix gradient at the bottom */
	
	-webkit-text-size-adjust: 100%; /* to prevent iOS from increasing font size in landscape mode */
}

body {
	display: flex;
	justify-content: center;
	
	width: 100%;
	height: 100%;
	
	font-family: "Arial", sans-serif;
	font-size: 1em;
	line-height: 1.5em;
	color: #000;
	
	margin: 0;
	padding: 0;
	
	background-color: #e5e5e5;
	
	background-repeat: no-repeat; /* to fix gradient at the bottom */
	background-attachment: fixed; /* to fix gradient at the bottom */
}

header,nav,main,footer,div {
	display: block;
	
	width: 100%;
	
	margin: 0;
	padding: 0;
	
	text-align: left;
}
div { /* !!! correction on declaration above, because of css screwing up spectrum colorpickers (that I use for a module) */
	width: auto;
}

h1, h2, h3 {
	display: inline-block;
	
	margin: 0;
}

h1, h3 {
	text-align: center; /* flex-box already centers headers, but since they can span multiple lines, center inside header also */
}

a {
	color: #000;
}

figure {
	margin: 0;
}

ul {
	list-style: outside;
	
	margin-left: 1.5em;
	padding: 0;
}

ul li {
	position: relative; /* to make list correctly flow around floating image */
	left: 1em;
	
	margin: 0;
	margin-right: 1em;
}

p {
	margin: 0;
	margin-bottom: 1.5em; /* even though the cms button gets pushed downwards, this still works best for nice text presentation */
}

table {
	border-collapse: collapse;
}

table, th, td {
	border: 1px solid #000;
}

th, td {
	padding: 0.375em;
}

blockquote {
	padding: 0.5em 1em;
}
blockquote p { /* to remove the margin of the inner paragraph tag */
	margin: 0;
}



.container {
	display: block;
	
	width: 842px;
	height: auto;
}



header {
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	
	line-height: 2em;
	
	margin: 1.5em 0 1.5em 0;
	padding: 1.5em;
	
	background-color: #fff;
}



nav, footer {
	line-height: 2em;
	
	margin: 0;
	padding: 1em 1.5em 1em 1.5em;
	
	
	background-color: #fff;
}

nav > *, footer > * { /* only select direct descendent, so it does not fuck up the cms buttons in the navi with extra margins */
	display: inline-block;
	
	margin-right: 1em;
	
	line-height: 2em;
}

nav span, footer span {
	font-weight: bold;
}

nav > a {
	text-decoration: underline;
}
nav > a:hover {
	text-decoration: none;
}

nav.sub {
	margin-top: 0.75em;
}

footer {
	margin-bottom: 1.5em;
}

/* DEZE CLASS WORDT NIET TOEGEPAST, KAN 'M NERGENS VINDEN. WEGHALEN!?
		OF LATER ALSNOG GEBRUIKEN OM DUIDELIJK VERSCHIL TE BEWERKSTELLIGEN TUSSEN UNITED/SEPARATED NAVI !?
		DAN WEL DEZE CLASS AANROEPEN IN STYLE.CLASS.PHP
nav.separated {
	padding: 0;
	
	background-color: transparent;
	border: none;
}

nav.separated * {
	margin: 0.5em;
	padding: 0.2em 0.8em;
	
	background-color: #fff;
}
*/



main {
	overflow: hidden;
	
	text-align: center;
	
	margin: 1.5em 0 1.5em 0;
	padding: 1em 1.5em 1em 1.5em;
	
	background-color: #fff;
}

main div.text, main div.title { /* later change div.text to paragraph-tag? so you can make a better distinction between textblocks and other divs!? */
	margin: 1em 0;
}

main div.text::after { /* clearfix hack to position floating images correctly */
	content: "";
	clear: both;
	display: table;
}

main figure {
	display: inline-block;
	
	width: 33.33%;
	
	text-align: left;
	vertical-align: top;
	
	margin: 0;
	padding: 0.5em;
}

main figure.wide {
	display: block;
	
	width: 100%;
	
	margin: 1em 0;
}

main figure.text_float {
	display: inline-block;
	
	float: left;
	
	margin: 0 1em 1em 0;
}

main figure img, main figure video { /* for image, and for video */
	width: 100%;
	
	vertical-align: middle; /* removes margin between image and caption, since image is an inline element with extra bottom space */
	
	margin: 0;
	padding: 0;
}

main figure div.zoom_container {
	position: relative;
	
	margin: 0;
}

main figure div.zoom_container div.zoom_overlay { /* plus sign in lower right corner to immediately make clear image is zoomable ! */
	position: absolute;
	bottom: 0.25em;
	right: 0.25em;
	
	width: auto;
	
	padding: 0.25em 0.5em;
	margin: 0;
	
	background-color: rgba(0, 0, 0, 0.21);
	
	color: rgba(255, 255, 255, 0.84);
	font-size: 1.5em;
	line-height: 1em;
}

main figure figcaption {
	display: inline-block;
	
	width: 100%;
	
	padding: 0.5em 0.75em;
	margin: 0;
	
	text-align: left;
	
	background-color: lightgray;
}

a.footer_marketing_link { /* general style for footer marketing link, gets it's color in Style()-class (same as labels in footernavi) */
	font-family: "Ubuntu", sans-serif;
	font-size: 0.84em;
}


/* module: form */

form {
	font: inherit; /* inherit, otherwise fonts bigger than 1em will be even bigger (1.1 * 1.1 is bigger than 1.1) */
	line-height: 1.5em;
	margin: 1em 0;
	padding: 1em 0;
}

form > div:not(:first-child) {
	line-height: 1.5em; margin-top: 1em;
}

form input, form textarea, form select, button.default {
	font-size: 1em;
	line-height: 1.5em;
	
	padding: 0.5em;
	
	background-color: #fff;
	color: #222;
	
	border: none;
}

form input[type=text], form input[type=email] {
	width: 37%;
}

form input[type=text].small {
	width: 21%;
}

form input[type=text].large {
	width: 69%;
}

form textarea {
	width: 84%;
	height: 9em;
}

form input[type=submit], button.default {
	padding: 0.25em 0.75em;
	margin-top: 1em;
	
	text-decoration: none;
}

form input[type=submit]:hover, button.default:hover {
	cursor: pointer;
	
	text-decoration: underline;
}

form input[type=number] {
	width: 10em;
}

form input[type=radio], form input[type=checkbox] {
	margin: 0.5em 0.5em 0.5em 0.75em;
	transform: scale(1.11);
}

div.alert_after_submit { /* holds alert text after form is submitted, or failed to submit */
	margin: 1em auto;
	padding: 0.5em 0.75em;
	
	text-align: center;
	
	font-style: italic;
	
	font-weight: bold;
}

form input[type=radio]:hover {
	cursor: pointer;
}

form label:hover {
	cursor: pointer;
}

div.form_text p, div.form_number p, div.form_switch p, div.form_choice p, div.alert_after_submit p { /* disable margin on extra p-tag from markdown */
	margin: 0;
}


/* module: blog */

div.blog_overview_year_navi {
	margin: 1.5em 0;
	padding: 1.5em;
	
	text-align: center;
}

div.blog_post_link_back {
	margin: 1.5em 0;
	padding-bottom: 1.5em;
	
	text-align: center;
}


/* module: shop */

main div.product { /* container element, also contains cms button */
	display: inline-block;
	
	width: 33.33%;
	
	text-align: left;
	vertical-align: top;
	
	margin: 0;
	padding: 0.5em;
}

main div.product div.product_button { /* area that contains product title, description and price */
	padding: 0.75em;
}

main div.product div.product_button p { /* remove default margin for paragraphs, because printing description_html happens with p's */
	display: block;
	margin: 0;
}

main div.product div.product_button form {
	border: none;
	margin: 0;
	padding: 0;
}

main div.product div.product_button form input, main div.product .product_button form select {
	margin: 0.5em 0 0.5em 0;
}

main div.product div.product_button form input[type=submit] {
	margin: 1em 0 0.5em 0;
}

form#cart fieldset {
	border: none;
	margin: 0;
	padding: 0;
}
form#cart fieldset:hover:disabled, form#cart fieldset:hover:disabled input, form#cart fieldset:hover:disabled label {
	cursor: auto;
}

form#cart label {
	display: block;
	margin: 0;
	padding: 0.5em 1em;
	border: 1px solid rgba(0, 0, 0, 0); /* to not make the labels 'jump' when a border appears on hover */
}
form#cart fieldset > label:not(:first-child) { /* give each paying method some space */
	margin-top: 0.25em;
}

form#customer_info div#paying_panel {
	text-align: center;
}

form#customer_info div#paying_panel input[type=checkbox] {
	display: none;
}

form#customer_info div#paying_panel div#pay_instructions {
	display: none;
}

form#customer_info div#paying_panel input[type=checkbox]:checked + div#pay_instructions {
	display: block;
}

form#customer_info div#paying_panel label {
	display: inline-block;
	padding: 0.25em 0.75em;
	border: 2px solid #000;
	font-weight: bold;
	text-decoration: none;
	user-select: none; /* clicking the button twice quickly annoyingly selects the button text, this line prevents that */
}
form#customer_info div#paying_panel label:hover {
	cursor: pointer;
	text-decoration: underline;
}

form#customer_info div#paying_panel div#pay_instructions {
	margin-top: 1em;
}

form#customer_info div#paying_panel div#pay_instructions span#formal {
	display: inline-block;
	font-family: monospace;
	font-weight: bold;
	font-size: 1.69em;
	padding: 0.37em 0.84em;
	margin: 0.5em 0;
}
form#customer_info div#paying_panel div#pay_instructions span#formal a {
	color: inherit; /* inherits automatic style color from Style.class.php for 'formal' container */
}


/* module: quick contact */

div.quick_contact {
	background-color: transparent;
	
	margin-left: 2em;
	margin-right: 2em;
	
	text-align: center;
}

div.quick_contact span {
	display: inline-block;
	
	margin: 0.5em 1em;
}

div.quick_contact svg {
	display: inline-block;
	vertical-align: middle;
}


/* module: timeline, publicly shared list */

div.list_entrance {
	background-color: transparent;
	
	margin: 3em 2em;
	
	text-align: center;
}

div.timeline_post fieldset {
	display: inline-block;
	padding: 0.5em 1.5em 1em 1.5em;
	margin: 0 0 1em 0;
}
div.timeline_post fieldset legend {
	font-style: italic;
	margin: 0 1em;
	padding: 0 0.5em;
}

svg.pulsating {
	animation: softpulse 2.64s infinite ease-out;
}
@keyframes softpulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.17);
  }
  100% {
    transform: scale(1);
  }
}

div.timeline_post_link_back {
	margin: 1.5em 0;
	padding-bottom: 1.5em;
	
	text-align: center;
}