/* reset and change of box model sizing */
*, *:before, *:after {
	border: 0;
	outline: 0;
	margin: 0;
	padding: 0;	

		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;

}

body {
/*	font-family: Verdana, Geneva, sans-serif;  */
	font-family: Arial, Helvetica, sans-serif;

}

/* hide submenus - here effectively hides any submenu nested below nav and ul */
nav ul ul {
	display: none;
}

/* on hovering a list item unhide the ul that is a directy child of the li */
nav ul li:hover > ul {
	display: block;
}

/* set bg color, remove bullets and make it the reference point for positioning child elements */
nav ul {
	background: hsla(0, 0%, 80%, 1);
	/*
		background: linear-gradient(top, hsla(0, 0%, 70%, 1) 0%, hsla(0, 0%, 20%, 1) 100%);  
		background: -moz-linear-gradient(top, hsla(0, 0%, 70%, 1) 0%, hsla(0, 0%, 20%, 1) 100%);  
		background: -webkit-linear-gradient(top, hsla(0, 0%, 70%, 1) 0%, hsla(0, 0%, 20%, 1) 100%);  
	*/
	list-style: none;
	position: relative;
		/* display: inline-table; /* will condense the width of the menu to fit */
}

/* for all ul nested under nav clear floats without any additional HTML element.
   Content is a must (empty string) and display block makes it part of the document flow.
   Note: the clear is taking place on the parent:after of the floated elements
*/ 
nav ul:after {
	content: ""; 
	clear: both; 
	display: block;
}

/* arrange all li next to each other */
nav ul li {
	float: left;
	transition-property: background;
	transition-duration: .3s;
	transition-timing-function: ease-in, ease-out;
}

/* on hover change bg color of li */
nav ul li:hover{
	background: hsla(0, 0%, 40%, 1); 
	transition-property: background;
	transition-duration: .3s;
	transition-timing-function: ease-in, ease-out;
}

/* 	a: make it sizeable, give it padding (must be sizeable) and font color, remove underscore */
nav ul li a {
	display: block;
	padding: 20px 30px;
	color: hsla(0, 0%, 30%, 1);
	font-size: 1.5em;
	font-weight: bold;
	text-decoration: none;
}

/* home button */
li.home {
	background-image: url("../images/home-grey.png");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 100px;
	height: 69px;
}
li.home a{
	padding: 34px 50px 35px;
}
li.home:hover {
	background-image: url("../images/home-green.png");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width: 100px;
	height: 70px;
}

/*	On hover change font color of any a directly nested under nav ul li.
	The direct child operator prevents the spreading of the font color setting to a nested further down.
*/
nav ul li:hover > a {
	color: hsla(90, 90%, 50%, 1);
	height: 70px;
	transition-property: color;
	transition-duration: .3s;
	transition-timing-function: ease-in, ease-out;
	
}

nav ul ul li:hover > a {
	color: hsla(90, 90%, 50%, 1);
	height: 59px;
	transition-property: color;
	transition-duration: .3s;
	transition-timing-function: ease-in, ease-out;
}

/*
	round the corners of the entire submenu
	position it just under its parent item
*/
nav ul ul {
	background: hsla(0, 0%, 70%, 1);
	border-radius: 0 0 20px 20px;
	/* padding: 0; /* seems not to be required */
	position: absolute;
	top: 100%;
}

/* 	make li refernce point for all child elements and round the corners depending on  
	whether it's the first, last or only li
 */
nav ul ul li {
	/* float: none; */
	position: relative;
}
nav ul ul li:first-child {
	border-radius: 0 0 0 20px;
}
nav ul ul li:last-child {
	border-radius: 0 0 20px 0;
}
nav ul ul li:only-child {
	border-radius: 0 0 20px 20px;
}

/* reduce the vertical padding of the a in the submenu but keep the alignment*/
nav ul ul li a {
	padding: 15px 15px;
}
nav ul ul li:first-child a {
	padding-left: 30px;
}
nav ul ul li:last-child a {
	padding-right: 30px;
}
nav ul ul li:only-child a {
	padding-left: 30px;
	padding-right: 30px;
}



/* position the third level menu */
nav ul ul ul {
	position: absolute;
	/* left: 100%; top:0; /* position it just to the left and on the same height as the parent*/
	top: 100%
}


/* boekenbeurs */
    .boekenbeurs {
        color: red;
        background: hsla(60,80%,70%,1);
        transition-property: background;
        transition-duration: .3s;
        transition-timing-function: ease-in, ease-out;
        }
    .boekenbeurs:hover {
        background: hsla(0, 0%, 40%, 1); 
        transition-property: background;
        transition-duration: .3s;
        transition-timing-function: ease-in, ease-out;
        }