@import url(reset.css);

html {
	min-height:100%;
}
html, body {
	width:100%;
	padding:0px;
	margin:0px;
}
body {
	color:#000;
	font-size:18px;/* 1 em is 16 px, which is a good readable font size according to Udacity courses */
	line-height 1.2 em; /* Also adviced by Udacity */
	font-family:arial, sans-serif;
	padding:0.1% 0%; /* Removing this makes the whole layout behave differently, why? */
	font-family: 'Flamenco', cursive, sans-serif;
}

/* Hack for lots of mobile devices and Chrome on Android to get a fixed background on the page 
http://stackoverflow.com/questions/21240465/alternatives-to-background-attachment-fixed
*/
div.fixedBg {
	background-color:#6300FF;
	background-image:linear-gradient(#6300FF 0%, #fff 75%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: -1;
	-webkit-transform: translateZ(0);
	pointer-events: none; /* This div pretends not to be here and not to catch pointer events */
}


/*************************************************
 * FONTS
 *************************************************/

@font-face {
	font-family: 'icons';
	src:  url('fonts/icons.eot?4mh7nh');
	src:  url('fonts/icons.eot?4mh7nh#iefix') format('embedded-opentype'),
		url('fonts/icons.ttf?4mh7nh') format('truetype'),
		url('fonts/icons.woff?4mh7nh') format('woff'),
		url('fonts/icons.svg?4mh7nh#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"],
[class*=" icon-"] {
	font-family: "icons" !important;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	line-height: 1;
	text-transform: none;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-close:before { content: "\e900"; }
.icon-info:before { content: "\e901"; }
.icon-pictures:before { content: "\e902"; }
.icon-menu-open:before { content: "\e903"; }
.icon-menu-close:before { content: "\e904"; }

/*************************************************
 * GENERAL STYLING
 *************************************************/

h1 {
	margin:1em 0em;
	color:#fff;
	font-size:1.5em;
	font-family: 'Dancing Script', cursive, sans-serif;
}
h2 {
	font-family: 'Dancing Script', cursive, sans-serif;
	font-size:1.2em;
}

p {
	margin:1em 0em;
}

em {
	font-weight:bold;
}

a {
	color:#480299;
}

a:visited {
	color:#480299;
}

a:hover {
	color:#00BCFF;
	text-decoration:none;
}

img.LeftFloating {
	float:left;
	clear:left;
	padding-right:0.5em;
}
/*************************************************
 * HEADER
 *************************************************/
header {
	height:5.5em;
	padding:0 0.5em;
	position:fixed;
	width:calc(100% - 1em);
	background-color:#6300FF;
	z-index:10; /* Needs to be higher than everything else so relatively positioned elements also go UNDER it on scrolling */
}

header h1 {
	font-size:2em;
	float:left;
	width:calc(100% - 2.38em);
	margin:0.5em 0em;
	color:#fff;
	text-align:right;
}
span.icon-menu-open,/* Will be hidden on larger screens */
span.icon-menu-close {
	font-size:2em;
	margin:0.5em;
	float:left;
}
	
span#Logo {
/* Will be displayed on larger screens */
    background-image: none;
    height: 0;
    margin: 0;
    width: 0;
}

header p {
	text-align:right;
	margin:0 0 0.5em 0;
	color:#fff;
}
header p a {
	color:#fff;
	text-decoration:none;
}
/*************************************************
 * MENU
 *************************************************/

nav.Menu {
	width:100%;
	background-color:#6300FF;
	position: absolute;
	/* This transform moves the drawer off canvas. */
	-webkit-transform: translate(-105%, 0);
	transform: translate(-105%, 0);
	/* Optionally, we animate the drawer. */
	transition: transform 0.3s ease;
}

nav.MenuVisible {
	-webkit-transform: translate(-0.5em, 0);
	transform: translate(-0.5em, 0);
}

.Menu ul li {
	float:left;
	clear:left;
	display:block;
	width:100%;
	min-height:3em; /* 48 recommended pixels devided by fontsize of 16 px gives 3 em */
	border-top:0.1em solid white;
	border-bottom:0.1em solid white;
}
.Menu ul li a,
.Menu ul li span {
	display:block;
	width:100%;
	text-align:center;
	line-height:3em; /* Vertically centering */
	color:#fff;
	text-decoration:none;
}
.Menu ul li.Selected a,
.Menu ul li a:hover {
	text-decoration:underline;
}

/*************************************************
 * MAIN BLOCK
 *************************************************/
main {
	margin-top:6em;
	padding:0em 0.5em;
	display:block; /* Retarded IE11 needs this to make the styles work */
}

section.Impression {
	text-align:center;
}


/*************************************************
 * MEDIA QUERIES
 *************************************************/

/* Everything bigger than a phone screen */
@media only screen and (min-width: 401px) {
	span#Logo {
		display:block;
		height:100%;
		width:40%;
		float:left;
		background-image:url('../img/vlinder_en_tekst_zwart_klein.svg');
		background-size:contain;
		background-repeat:no-repeat;
	}
	header h1 {
		width:calc(100% - 40%);
	}

	span.icon-menu-open {
		display:none;
	}

	nav.Menu {
		width:100%;
		background-color:#6300FF;
		position: absolute;
		-webkit-transform: translate(-0.5em, 0);
		transform: translate(-0.5em, 0);
	}

	.Menu ul li {
		clear:none;
		margin:0 1%;
		width:calc((100% - 10%) / 5);
		min-height:auto;
		border:none;
		text-align:center;
	}
	.Menu ul li a {
		display:inline;
		width:auto;
		line-height:auto;
	}
	
	main {
		margin-top:9em; /* To get below the inserted menu */
	}
}

/* This is where lines of text are at their maximum so the whole page gets a margin */
@media only screen and (min-width: 670px) {
	main, header {
		max-width:670px;
		margin-left:auto;
		margin-right:auto;
		left:0;
		right:0;
	}

	nav {
		border-radius:0 0 0.5em 0.5em;
	}

}
@media only screen and (min-width: 800px) {
	main {
		padding:1% 5% 2% 5%;
		background-size:40%, 40%;
		min-height:15.5em;
	}
}