body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: white;
  margin: 0px;
  padding: 0px;
}

#container {
  width: 800px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  background-color: black;
}

/* header */
#header {
  height: 80px;
  background-color: #ccc;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
  font-size: 50px;
  color: black;
  font-weight: bold;
}

#header a {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

#header a:hover {
  text-decoration: none;
  color: af0d0d;
  font-weight: bold;
}

.div-container {
  display: flex;
}

.div-side {
  display: block;
  float: left;
  background-color: #333;
  width: 150px;
  color: white;
}

.div-main {
  display: block;
  float: left;
  width: 650px;
  background-color: #CCC;
}

.spacer {
  padding: 10px;
}

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

.vertical-menu a {
  background-color: #333; /* Grey background color */
  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 */
  border: 0 0 0 1;
}

.vertical-menu a:hover {
  background-color: #999; /* Dark grey background on mouse-over */
}

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

.vertical-menu a.main {
  background-color: #333; 
  color: white; /* Black text color */
  font-weight: bolder;
}

.vertical-menu a.main:hover {
  background-color: #999; /* Dark grey background on mouse-over */
  font-weight: bolder;
}
/*footer*/
#footer {
  height: 40px;
  background-color: black;
  clear: both;
  color: white;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

#footer a {
  text-decoration: none;
  color: white;
}

    
  /*afbeeldingen*/
  .sidebarphoto {
    width: 120px; 
    border-width: thin;
  }

  .landscape-page-foto {
    max-width: 620px;
    max-height: 400px;
   }
     .small-foto-vk {
  max-width: 80px;
  max-height: 80px;
  }
  
  .small-foto-ls {
  max-width: 100px;
  max-height: 50px;
  }
  
  .normal-foto {
    max-width: 300px;
    max-height: 200px;  
  }

/* The navigation bar */
/* [ON BIG SCREEN] */
/* (A) WRAPPER */
#hamnav {
    width:100%;
    background: #000;
    top: 0;
}
  
  /* (B) HORIZONTAL MENU ITEMS */
  #hamitems { display: flex; }
  #hamitems a {
    flex-grow: 1;
    flex-basis: 0;
    padding: 10px;
    color: white;
    text-decoration: none;
    text-align: center;
  } 
      
  #hamitems a:hover { background: #af0d0d; }

  #hamitems .active { background: #333; }

  /* (C) HIDE HAMBURGER */
  #hamnav label, #hamburger { display: none; }

  /* [ON SMALL SCREENS] */
@media only screen and (max-width: 768px) and (orientation: portrait) {
    /* (A) BREAK INTO VERTICAL MENU */
    #hamitems a {
      box-sizing: border-box;
      display: block;
      width: 100%;
      border-top: 1px solid #333;
    }
   
    /* (B) SHOW HAMBURGER ICON */
    #hamnav label { 
      display: inline-block; 
      color: white;
      background: #a02620;
      font-style: normal;
      font-size: 1.2em;
      padding: 10px;
    }
  
    /* (C) TOGGLE SHOW/HIDE MENU */
    #hamitems { display: none; }
    #hamnav input:checked ~ #hamitems { display: block; }
  
    .div-side {
  display: block;
  float: left;
  width: 150px;
  color: white;
}

.div-main {
  display: block;
  float: left;
  width: 650px;
}
    /* page layout smaller screens */
    #container {
      width: 300px;
    }

    #header {
      font-size: 100%;
      height: 30px;
      font-weight: bold;
    }
  
    .div-side {
      width: 100px;
      font-size: small;
    }
    
    .div-main {
      width: 200px;
      font-size: small;
      word-wrap: break-word;
    }

    #youtubevideo {
      width: 180px;
      height: 120px;
    }
    #footer {
      font-size: 80%;
      height: 30px;
      font-weight: bold;
    }

    .normal-foto {
        max-width: 180px;
        max-height: 100px;  
      }
    
      .landscape-page-foto {
        max-width: 180px;
        max-height: 200px;
       }

       .sidebarphoto {
        width: 80px; 
      }
    
  }


/* blog */
article
{
    background-color: #eee;
}
article h2
{
    text-align: left;
}

article header{
    border-style: hidden hidden solid hidden;
    border-width: 1px;
}

/* quotes on side bar */
.quote {
  font-family: 'Courier New', Courier, monospace;
  font-size: small;
  font-style: italic;
}