html

body {
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
  margin: 0;
  background-color: lightgrey;
}

/* Header bar */
#headerbar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
    background-color: #CCE5FF;
    margin: 0;
}

/* Header Logo */
#headerlogo {
    float: left;
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 13.5px 30px;
    color: #393939;
    background: url(https://www.google.be/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjf8LG1m5TYAhUDLcAKHdqgAUMQjRwIBw&url=https%3A%2F%2Fwww.dreamstime.com%2Fstock-illustration-blue-eye-icon-image-image49228185&psig=AOvVaw0PHBXxXKP48EVu96GALchV&ust=1513708930275334) 0 0;
    background-color: #CCE5FF;
    font-size: 1em;

    /* Jef: proberen een oog logo als vervanger van"oculus"


    display: inline-block;
    vertical-align: top;
    width: 50px;
    height: 50px;
    margin-right: 20px;
    margin-top: 15px;    /* not working */
}
/* Header Menu */
.glyphie {
    font-size: 20px;
    margin-right: 15px;
}
.navbar-brand {
    float: left;
    height: 50px;
    padding: 15px 15px;
    font-size: 25px;
    line-height: 20px;
}

.navbar-inverse {
    background-color: #222;
    border-color: #080808;
    font-size: 2em;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
background-color: #222;
    color: #9d9d9d;

}

.navbar {
margin-bottom: 0px;
}
/* JEF dropdownbar*/
li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-menu>li>form>.btn-link {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    border: none;
    width: 100%;
}

.dropdown-menu>li>form>.btn-link:hover {
    color: #262626;
    background-color: #f5f5f5;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
/* Wrapper for page content */
#wrap {

    height: 100%;
    width: 100%;
margin-bottom: 40px;
}
.eye {
line-height:0.5;
  font-size: 40px;
}



/* Footer fixed to bottom of screen */
#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    margin: 0;
    height: 35px;
    background-color: #f5f5f5;
    font-size: 11px;
    padding: 10px 20px;
}

html, body {
    height: 100%;

}
.container-fluid {
   height: 100%;
    /* overflow-y: hidden; *//* don't show content that exceeds my height */
   margin:0;
}
.body-film {
    min-height: 100%;
    overflow-y: scroll;
}
/* CSS Classes */

.container-fluid{
    padding: 30px 30px;
    background-color: lightgrey;
    height: 90%;
    width: 100%;
}
/* Content */
/*.content {
    background-color: lightgrey;
}*/

.form-box {
    margin: 50px 0px;
    padding: 10px 30px 30px;
    /*width: 100%;
    height: 100%;*/
    background-color: white;
    border: 3px solid grey;
    text-align: center;
}