#header {
  display: grid;
  grid-template-rows: 60px 25px 25px 25px;
  grid-template-columns: 1fr;
  grid-template-areas:
  "logo"
  "mainmenu"
  "submenu"
  "menuinfo"
  ;
  margin: 0px;
  padding: 0px;
  height: 135px;
  background: rgb(0,0,0) url(./menu_future_bg.png) top right repeat-x;
  background-position: top 60px right 0px;
  background-color: white;
  color: rgb(255,255,255);
}

#logo {
  grid-area: logo;
  width: 100%;
  background-color: black;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#logotext {
  margin: 0px;
  width: 200px;
}

#logotext a {
  background: transparent url(./zwol_logo_on_black.png) 0 0 no-repeat;
  display: block;
  text-decoration: none;
  text-indent: -9999px;
  height: 50px;

}

#logotext a:active	{
   /*background-position: 0 -75px;*/
}

#header {
  font-size: 12px;
  font-family: Verdana, sans-serif;
}

#header ul {
  margin: 0px;
  display: inline;
  list-style: none outside;
  padding-inline: 0px;
  white-space: nowrap;
  overflow: auto;
}

#header li {
  font-weight: bold;
  display: inline-block;
  height: 25px;
  width: 80px;
}

#mainmenu a, #submenu a {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  height: 25px;
  width: 80px;
  padding-top: 4px;
}

#mainmenu ul li a {
  background: transparent url(./menu_future_tabs.png) 0 0 no-repeat;
}

#submenu ul li a {
  background: transparent url(./menu_future_tabs.png) 0 -25px no-repeat;
}

/*
li.menu-r1 {right: 0; width: 80px;}
li.menu-r2 {right: 80px; width: 80px;}
li.menu-r3 {right: 160px; width: 80px;}
li.menu-r4 {right: 240px; width: 80px;}
li.menu-r5 {right: 320px; width: 80px;}
li.menu-r6 {right: 400px; width: 80px;}
*/

#header p {
  margin: 0px;
  padding-right: 10px;
  height: 20px;
  padding-top: 5px;
}

#mainmenu {
  grid-area: mainmenu;
  justify-self: end;
}

#submenu {
  grid-area: submenu;
  justify-self: end;
}

#menuinfo {
  grid-area: menuinfo;
  color: black;
  justify-self: end;
}

#header a:link, #header a:visited {
  color: white;
}

#mainmenu a:hover {
  color: black;
  background-position: -160px 0px;
}

#mainmenu li.here a:hover {
  color: white;
  cursor: default;
}

#mainmenu li.here a, #mainmenu li.here a:hover {
  background-position: -80px 0px;
}

#submenu li.here a {
  background-position: -80px -25px;
  color: black;
  cursor: default;
}

#submenu a:hover {
  color: black;
  background-position: -160px -25px;
}

#menuinfo .info a {
  padding-left: 15px;
  padding-right: 5px;
  background: transparent url(./bullet01.gif) 0 2px no-repeat;
}

#menuinfo a:link, #menuinfo a:visited{
  color: blue;
}

#menuinfo a:hover, #menuinfo a:active {
  color: red;
}

/* !Standard device size layouts  */
/* Larger devices (550px and up) */
@media only screen and (min-width: 550px) {

  #header {
    display: grid;
    grid-template-rows: 25px 25px 25px;
    grid-template-columns: 250px auto;
    grid-template-areas:
    "logo mainmenu"
    "logo submenu"
    "logo menuinfo"
    ;
    background-position: top right;
    height: 75px;
  }

  #logo {
    display: block;
    grid-area: logo;
    background: transparent;
  }

  #logotext {
    width: 100%;
  }

  #logotext a {
    background: transparent url(./menu_future_logo.png) 0 0 no-repeat;
    height: 74px;
  }

  #logotext a:active	{
     background-position: 0 -75px;
  }

}