/*
	--------------------------------------------------------------------
	Tetri colors
	--------------------------------------------------------------------
	Groen:			#CBC919
	Licht grijs:	#EBEBE6
	Middel grijs:	#999888
	Donker grijs:	#7A7A7A
*/
/*----------------------------------------------------------------------*/
/* HTML5 elements *
/*----------------------------------------------------------------------*/
article, aside, details, figcaption, figure, footer, header, main,
nav, section, summary {
	display: block;
}
/*----------------------------------------------------------------------*/
/* Layout: navigation */
/*----------------------------------------------------------------------*/
nav ul, nav ol {
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
}
/*----------------------------------------------------------------------*/
/* Layout: top tree elements */
/*----------------------------------------------------------------------*/
html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 1em;
	line-height: 125%;
	color: #7A7A7A;
	background: url("lib/img/flowerGray.svg") fixed top 17.2em right 15%  no-repeat;
}
body {
	margin: 0;
}
/*----------------------------------------------------------------------*/
/* Layout: media */
/*----------------------------------------------------------------------*/
img {
	border: 0;
	max-width: 100%;
	height: auto;
}
svg:not(:root) {
	overflow: hidden;
}
figure {
	margin: 0;
	padding: 0;
}
iframe, object {
	max-width: 100%;
}
/*----------------------------------------------------------------------*/
/*Layout: links */
/*----------------------------------------------------------------------*/
a {
	background: transparent;
	color: #7A7A7A;
}
a:active,
a:hover {
	outline: 0;
	color: orange;
}
/*----------------------------------------------------------------------*/
/* Webfonts */
/*----------------------------------------------------------------------*/
@font-face {
	font-family: "Source Sans Pro";
	src: url("lib/fonts/SourceSansPro-Bold.eot");
	src: url("lib/fonts/SourceSansPro-Bold.eot?#iefix") format("embedded-opentype"),
		url("lib/fonts/SourceSansPro-Bold.woff") format("woff"),
		url("lib/fonts/SourceSansPro-Bold.ttf") format("truetype"),
		url("lib/fonts/SourceSansPro-Bold.svg#f59ec01e9ce984a5e7320939532a55f3") format("svg");
	font-style: normal;
	font-weight: bold;
}
@font-face {
	font-family: "Source Sans Pro";
	src: url("lib/fonts/SourceSansPro-BoldItalic.eot");
	src: url("lib/fonts/SourceSansPro-BoldItalic.eot?#iefix") format("embedded-opentype"),
		url("lib/fonts/SourceSansPro-BoldItalic.woff") format("woff"),
		url("lib/fonts/SourceSansPro-BoldItalic.ttf") format("truetype"),
		url("lib/fonts/SourceSansPro-BoldItalic.svg#6422e62731b15b0826c2119f94db6b3f") format("svg");
	font-style: italic;
	font-weight: bold;
}
@font-face {
	font-family: "Source Sans Pro";
	src: url("lib/fonts/SourceSansPro-Italic.eot");
	src: url("lib/fonts/SourceSansPro-Italic.eot?#iefix") format("embedded-opentype"),
		url("lib/fonts/SourceSansPro-Italic.woff") format("woff"),
		url("lib/fonts/SourceSansPro-Italic.ttf") format("truetype"),
		url("lib/fonts/SourceSansPro-Italic.svg#7da2ff3504d480494d51d19a97688977") format("svg");
	font-style: italic;
	font-weight: normal;
}
@font-face {
	font-family: "Source Sans Pro";
	src: url("lib/fonts/SourceSansPro-Regular.eot");
	src: url("lib/fonts/SourceSansPro-Regular.eot?#iefix") format("embedded-opentype"),
		url("lib/fonts/SourceSansPro-Regular.woff") format("woff"),
		url("lib/fonts/SourceSansPro-Regular.ttf")  format("truetype"),
		url("lib/fonts/SourceSansPro-Regular.svg#acb2ff9f1528a62353501911e112e2e2") format("svg");
	font-style: normal;
	font-weight: normal;
}
/*----------------------------------------------------------------------*/
/* Layout: main divisions */
/*----------------------------------------------------------------------*/
.wrapper {
	width: 60em;
	height: auto;
	margin: auto;
	padding: 0 0 2em 0;
	overflow: hidden;
	position: relative;
}
body::before {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 11.25em;
	background: #CBC919;
}
.decorationHead {
	width: 100%;
	height: 11.25em;
	background: #EBEBE6;
}
.sideBar {
	width: 7em;
	padding: 0 8.125em 3em 0.5em;
	float: left;
	clear: left;
}
.mainNav {
	width: 32.625em;
	padding: 0.625em 0 0.625em 11.75em;
	float: right;
	clear: right;
}
.content {
	width: 39.5em;
	padding: 2.4em 4.375em 0 0.5em;
	float: right;
	clear: right;
}
/*----------------------------------------------------------------------*/
/* Layout: decorationHead elements */
/*----------------------------------------------------------------------*/
.flowerDeco {
	width: 11.25em;
	height: 11.25em;
	background: #999888;
	border-right: 5em solid #7A7A7A;
	float: left;
}
.logo {
	width: 11.25em;
	height: 11.25em;
	background: #CBC919;
	float: left;
}
.flowerDeco img,
.logo img {
	display: block;
}
/*----------------------------------------------------------------------*/
/* Layout: mainNav elements */
/*----------------------------------------------------------------------*/
.mainNav li {
	float: left;
}
.mainNav a {
	display: block;
	padding: 0 1em 0 0;
	font-weight: bold;
	font-size: 1.2em;
	color: #CBC919;
	text-decoration: none;
}
.mainNav a:hover {
	color: orange;
}

/*----------------------------------------------------------------------*/
/* Layout: sideBar elements */
/*----------------------------------------------------------------------*/
.sideBar * {
	font-size: 1.1em;
	line-height: 125%;
}
.sideBar p {
	margin: 0.5em 0 0 0;
}
/*----------------------------------------------------------------------*/
/* Layout: content elements */
/*----------------------------------------------------------------------*/
.content p {
	font-size: 1.25em;
	line-height: 133%;
	font-style: italic;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
td,
th {
	padding: 0.5em 1em 0 0;
}
td {
	vertical-align: top;
	font-size: 1.25em;
	line-height: 133%;
	font-style: italic;
}
p.noMarginBottom {
	margin-bottom: 0;
}
p.noMarginBottom + p {
	margin-top: 0;
}
/*----------------------------------------------------------------------*/
/* Layout: media queries */
/*----------------------------------------------------------------------*/
@media only screen and (max-width: 960px) {
	@-ms-viewport {
	    width: device-width;
	}
	html {
		font-size: 90%;
	}
}
@media only screen and (max-width: 865px) {
	@-ms-viewport {
	    width: device-width;
	}
	html {
		font-size: 80%;
	}
}
@media only screen and (max-width: 770px) {
	@-ms-viewport {
	    width: device-width;
	}
	html {
		font-size: 75%;
	}
}
@media only screen and (max-width: 760px) {
	@-ms-viewport {
	    width: device-width;
	}
	html {
		font-size: 1em;
		background-image: none;
		background-color: #fff;
	}
	.wrapper {
		width: 100%;
	}
	body::before {
		height: 0;
		background: transparent;
	}
	.decorationHead {
		height: 6em;
		overflow: hidden;
	}
	.sideBar, .mainNav, .content {
		width: 90%;
		padding: 1em 5% 0.5em 5%;
	}
	.flowerDeco {
		display: none;
	}
	.logo {
		width: 6em;
		height: 6em;
		border-right: 2.3em solid #7A7A7A;
	}
	.mainNav li {
		float: none;
	}
	.mainNav a {
		padding: 0 0 0.5em 0;
	}
	.content p {
		margin: 0.5em 0 1em 0;
	}
	.content p, .content td {
		font-size: 1em;
	}
}
/*----------------------------------------------------------------------*/
/* Layout: print */
/*----------------------------------------------------------------------*/
@media print {
	* {
		background: transparent !important;
		color: black !important;
		box-shadow: none !important;
		text-shadow: none !important;
		-ms-filter: none !important;
	}
	html {
		font-size: 12pt;
		font-family: serif;
	}
	a, a:visited {
		text-decoration: underline;
	}
	a[href]:after {
		content: " (" attr(href) ")";
		font-style: italic;
		font-weight: normal;
		color: #666;
	}
	img {
		page-break-inside: avoid;
	}
	@page {
			margin: 1cm;
		}
	p {
		orphans: 3;
		widows: 3;
	}
	h1, h2, h3 {
		page-break-after: avoid;
	}
	.wrapper, .content {
		width: 100%;
		padding: 0;
		margin: 0;
	}
	body::before {
		height: 0pt;
		background: transparent;
	}
	.decorationHead, .sideBar, .mainNav {
		display: none;
	}
	
}
