@charset "utf-8";
/* CSS Document */

body { 
    font-family: "Trebuchet MS", sans-serif;
    font-size: 1em;
    padding: 0;
    margin: 0;
} 

header { 
    background-color: navy;
    box-sizing: border-box;
    padding: 2em 1em;
} 

header h1 {
    color: white;
    font-family: Georgia, serif;
    font-size: 2.5em;
    font-variant: small-caps;
    text-align: center;
	
}

.vertical-menu {
    width: 160px; /* Set a width if you like */
}

.vertical-menu a {
    background-color: white; /* Grey background color */
    color: navy; /* Black text color */
    display: block; /* Make the links appear below each other */
    padding: 12px; /* Add some padding */
    text-decoration: none; /* Remove underline from links */
}

.vertical-menu a:hover {
    background-color: navy; /* Dark grey background on mouse-over */
    color: white; /* Black text color */
    display: block; /* Make the links appear below each other */
    padding: 12px; /* Add some padding */
    text-decoration: none; /* Remove underline from links */
}

.vertical-menu a.active {
    background-color: navy; /* Add a green color to the "active/current" link */
    color: white;
}

article { 
    box-sizing: border-box;
    padding: 2em;
    min-height: 30vh;
    overflow: auto;
}

article img {
    max-width: 100%;
}

article ul, #hoofdvak ol {
    list-style-position: outside;
    margin-left: 2em;
}

article h1 {
    color: navy;
}

footer { 
    background-color: navy;
    box-sizing: border-box;
    clear: both;
    color: white;
    font-size: .8em;
    padding: 2em;
    text-align: center;
	vertical-align:bottom;
}

@media screen and (min-width: 600px) {
.vertical-menu {
    width: 160px; /* Set a width if you like */
}

.vertical-menu a {
    background-color: white; /* White background color */
    color: navy; /* Navy text color */
    display: block; /* Make the links appear below each other */
    padding: 12px; /* Add some padding */
    text-decoration: none; /* Remove underline from links */
}

.vertical-menu a:hover {
    background-color: navy; /* Navy background on mouse-over */
    color: white; /* White text color */
    display: block; /* Make the links appear below each other */
    padding: 12px; /* Add some padding */
    text-decoration: none; /* Remove underline from links */
}

.vertical-menu a.active {
    background-color: navy; /* Add a navy color to the "active/current" link */
    color: white;
}
}