/* Stylesheet for the responsive version of www.juliana-munstergeleen.nl */
/* Fanfareblauw = #000066, #0000B3, #3D3D66, #6B6BB3, #999999, #666666 */
/* VDL: #1a8099 #000000 #ffffff #cfcfcf */

div.top-menu {
  --margin-top: 51px;
  font: Menu;
  color: #000000;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  div.top-menu {
    margin-top: 168px;
  }
}

ul.top-menu-items
{
  list-style-type: none;
  width: 100%;
  margin: 0px;
  padding:0px;
  overflow: hidden;
  background-color: #1a8099;
}

li.top-menu-item
{
  display: inline;
}

/* For mobile phones: */
li.top-menu-item {
  float: left;
  width: 50%; /* for 2 cells per row */
  padding: 2px;
}

@media only screen and (min-width: 480px) {
  /* For tablet: */
  li.top-menu-item  {
    width: 33.3%; /* for 3 cells per row */
  }
}

@media only screen and (min-width: 560px) {
  /* For tablet: */
  li.top-menu-item  {
    width: 25%; /* for 4 cells per row */
  }
}

@media only screen and (min-width: 640px) {
  /* For tablet: */
  li.top-menu-item  {
    width: 20%; /* for 5 cells per row */
  }
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  li.top-menu-item  {
    width: 20%; /* for 5 cells per row */
    padding-bottom: 4px;
    border-right: 1px solid #999999;
    background-color: transparent!important;
  }
}

/* For mobile phones: */
a.top-menu-item {
  width: 100%;
  margin: 2px;
  --color: #999999;
  color: white;
  text-decoration: none;
  text-align: center;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  a.top-menu-item {
    color: white;
  }
}

a.top-menu-item:link, a.top-menu-item:visited {
  
}

a.top-menu-item:hover, a.top-menu-item:active {
  text-decoration: underline;
}

span.top-menu-item {
  font-size: 12pt;
  font-weight: bold;
}

div.left-menu {
  font: Menu;
  color: #ffffff;
  text-align: left;
  vertical-align: top;
}

ul.left-menu
{ 
  list-style-type: none;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}

li.left-menu {

}

a.left-menu-header {
  display: block;
  text-decoration: none;
  margin: 2px 2px;
  padding: 2px;
  background-color: #1a8099;
  color: white;
  font-size: 1em;
  font-weight: bold;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  a.left-menu-header {
    
  }
}

div.menu-items {
  margin: 2px 2px;
  color: #1a8099;
  background-color: white;
}

ul.menu-items { 
  margin-left: -40px;
  overflow: hidden;
}

li.menu-item {
  list-style-type: none;  
}

li.menu-item-active {
  list-style-type: square;  
}

a.menu-item {
  display: block;
  width: 100%;
  color: #1a8099;
  font-weight: bold;
  text-decoration: none;
}

a.menu-item:link, a.menu-item:visited {
  
}

a.menu-item:hover {
  text-decoration: underline;
}

a.menu-item:active {
  
}

a.menu-item-active {
  cursor: default;
  font-weight: bold;
}

a.menu-item-active:hover {
  text-decoration: none;
}

li.menu-item-separator {
  list-style-type: none;
}

hr.menu-item-separator {
  
}

/* These styles are used in menu.js to show/hide menu's */

a.menu-always-opened {
  cursor: default;
}

a.menu-opened {
  cursor: default;
}

a.menu-closed {
  cursor: pointer;
}

div.menu-items-always-visible {
  display: block;
  padding: 0px 6px 2px 2px;
}

div.menu-items-visible {
  display: block;
  padding: 0px 6px 2px 2px;
}

div.menu-items-hidden {
  display: none;
  padding: 0px;
}