/* Willy */
/* https://www.rapidtables.com/web/css/css-color.html */


.topmenu{
  display: grid;
  grid-template-columns: 260px 1fr 1px 350px; /* 140px 1fr 100px 150px -300px 1fr; /* or 20% of main or 1fr take all avaible space of column */
  grid-template-areas: "box1 box2 box3 box4"; /* use . for space cell */
  justify-items: center; /* Horizontal center, start, end, stretch (=default) */
  align-items: center; /* Vertical */
  height: 30px; /* 30 */
  clear: both;
  margin: 2px 10px 2px 10px; /* 0 10px 2px 10px */
  border-bottom: 1px solid #00bfff;
}

.navhome{
  grid-area: box1;
  justify-self: start;
  align-self: flex-start;  /* Vertikaal lijnen: flex-start (=bovenaan), center, flex-end (=onderaan) */
}

.navhome img {
  height: 24px;
  margin-top: 1px;
}

.navmenu{
  grid-area: box2;
  justify-self: start;
  align-self: flex-start;  
  _margin-left: 30px;
  margin-top: 4px;
}

.navmenu ul{
  margin: 0;
  padding: 0;
  /*display: inline-block;*/       
}

.navmenu li{
  float: left;
  bottom: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.navmenu ul li a {
  text-decoration: none;
  height: 26px;
  margin-right: 30px;
  display: block;
  color: #0A71CE; /* Blauw volgens opmerking Johan 17.08.2020 */
  font-family: sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0px;
  font-style: normal;
}

.navmenu > ul > li > a:hover {
  /* font-weight: bold; */
  color: #70d549;
}

.navproject{
  grid-area: box3;
  justify-self: end;
  align-self: flex-start;  
  margin-top: 4px;
}

.navuser{
  grid-area: box4;
  justify-self: end; /* Horizontal */
  align-self: flex-start; /* Vertical */
  margin-top: 0;  
}

.navproject p {
  display: none;
  float: right;
  color: #0A71CE; /* Blauw volgens opmerking Johan 17.08.2020 */
  font-size: 18px;
  font-weight: bold;
  margin: 0 10px 0 10px;
  padding: 0;
  text-align: center;
  _width: 150px;
}

/*--- NAV User Right side of screen ---*/
.navuser-links{
  list-style: none;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0;
  /* Clear floats */
  float: left;
  /* width: 100% 31.08.2020 */
  /*width: 100%;*/
  /* Bring the nav above everything else--uncomment if needed.
  position: relative;
  z-index: 5;
  */
}

.aHighlightAnchor{
  /* In combination with 
  vz.php function getMenuHtmlLines($config, $className, $page, $href)
  */
  color: #70d549 !important; /* Groen volgens opmerking Johan 17.08.2020 */
}

.navuser-links li{
  float: left;
  margin-right: 0;
  position: relative;
}
.navuser-links a{
  display: block;
  /*padding: 5px;*/
  color: #0A71CE; /* Blauw volgens opmerking Johan 17.08.2020 */
  background: white;
  text-decoration: none;
  margin-left: 10px;
  margin-top: 2px;
}
.navuser-links a:hover{
  color: white;
  background: white;
  /*text-decoration: underline;*/
}

/*--- DropDown Right User menu ---*/
.navuser-links ul{
  background: #fff;  /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */ 
  background: rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it...  */
  list-style: none;
  position: absolute;
  padding-top: 5px; /* Space between parent ul and first child li */ 
  left: -9999px;  /* Hide off-screen when not needed (this is more accessible than display: none;) */
}
.navuser-links ul li{
  padding-top: 1px; /* Introducing a padding between the li and the a give the illusion spaced items */
  float: none;
  width: 140px;
}
.navuser-links ul a{
  white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
  margin-left: 4px;
}
.navuser-links li:hover ul{ /* Display the dropdown on hover */
  left: auto;     /* Bring back on-screen when needed */
  right: 0;       /* display children items down left of parent */
  margin-right: -10px;
}
.navuser-links li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
  background: white;
  /*text-decoration: underline;*/
  color: #0A71CE; /* Blauw volgens opmerking Johan 17.08.2020 */
}
.navuser-links li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
  text-decoration: none;
}
.navuser-links li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
  background: white;
  color: #70d549; /* Groen volgens opmerking Johan 17.08.2020 */
}