:root {
  --mainBgColor: #ffffff;
  --mainBgImagefile: "../images/boeken-bg.png";

  --headerBgColor: #ffffff;
  --headerTitleFontColor: #666666;
  --headerTitleFontSize: 45;
  --headerTitleFontWeightBold: Y;

  --navbarBgColor: #00ddff;
  --navbarFontColor: #0000ff;
  --navbarBorderColor: #ffffcc;
/*  --navbarMenuHoverBgColor: #00aaff;  */
  --navbarMenuHoverBgColor: #0033ff;
  --navbarMenuHoverFontColor: #ffffff;
  --navbarMenuFocusBgColor: #0066ff;
  --navbarSubmenuTitleColor: #ffffff;

  --containerBgColor: #ffffff;
  --containerErrorFontColor: #990000;
}

.page-header-menu {
  background-color: var(--headerBgColor);
  padding: 0px 0px 1px 0px;
}
/*  NAVIGATIE BALK   */
.page-header-menu > .navbar {
  background-color: var(--navbarBgColor);
}
.page-header-menu > .navbar-text{
  color:var(--navbarFontColor);
}
.page-header-menu > .navbar-inverse {
    border-color: var(--navbarFontColor);
}
.page-header-menu > .navbar-inverse .navbar-nav > li > a {
    color: var(--navbarFontColor);
}
.page-header-menu > .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus{
    background-color: var(--navbarMenuFocusBgColor);
}
.page-header-menu > .navbar-inverse .navbar-nav > .active > a:hover {
    background-color: var(--navbarMenuHoverBgColor);
 }
.page-header-menu > .navbar-inverse .navbar-nav > li > a:hover {
    background-color: var(--navbarMenuHoverBgColor);
	color: var(--navbarMenuHoverFontColor);
 }
.page-header-menu > .navbar-inverse .navbar-toggle {
    border-color: var(--navbarFontColor);
}
.page-header-menu > .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
    background-color: var(--navbarMenuHoverBgColor);
}
.page-header-menu > .navbar-inverse .navbar-toggle .icon-bar {
    background-color: var(--navbarFontColor);
}
.navbar-inverse .navbar-nav > .open > a:focus {
    background-color: var(--navbarMenuFocusBgColor);
}
.navbar-inverse .navbar-nav > .open > a, .page-header-menu > .navbar-inverse .navbar-nav > .open > a:hover {
    background-color: var(--navbarMenuHoverBgColor);
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: var(--navbarFontColor);
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a.submenu {
    color: var(--navbarSubmenuTitleColor);
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover {
    background-color: var(--navbarMenuHoverBgColor);
}
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
    background-color: var(--navbarMenuFocusBgColor);
	color: var(--navbarMenuHoverFontColor);
}
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover {
    background-color: var(--navbarMenuHoverBgColor);
    color: var(--navbarFontColor);
}
.dropdown-menu {
    background-color: var(--navbarBgColor);
	box-shadow: 5px 5px 3px #ccc;
	padding: 2px 1px 1px 0px;
}
.dropdown-menu .divider {
	background-color: var(--navbarFontColor);
}
.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-menu > li  {
    background-color: var(--navbarBgColor);
    color: var(--navbarMenuHoverFontColor);
}
.dropdown-menu > li > a {
    background-color: var(--navbarBgColor);
    color: var(--navbarMenuHoverBgColor);
}
.dropdown-menu > li > a:hover, .dropdown-submenu > li > a:hover {
    background-color: var(--navbarMenuHoverBgColor);
    color: var(--navbarMenuHoverFontColor);
}
.dropdown-menu > li > a:focus {
    background-color: var(--navbarMenuFocusBgColor);
}
.dropdown-submenu > li > a {
    background-color: var(--navbarBgColor);
    color: var(--navbarFontColor);
	text-decoration: none;
}


.breadcrumb {
    background-color: #eff;
	margin-bottom: 10px; 
	margin-top: -38px;
    padding: 4px 15px;
}

.breadcrumb  > li > a {
    color: var(--navbarFontColor);
}
.breadcrumb > .active {
    color: var(--navbarMenuFocusBgColor);
}
.breadcrumb > li + li::before {
    color: var(--navbarFontColor);
    content: "- ";
}