@import 'global.css';

/********** Navigation *************/
label.hamburger {
   display: block;
   cursor:pointer;
   float:left;
   position:relative;
   margin-left:10px;
   margin-top:10px;
   margin-bottom:10px;
   width:1.8em;
   height:1.8em;
   border-radius:4px;
}

label.hamburger:hover {
   background:rgba(77, 77, 77, 1.0);

   .line {
      background:lightgoldenrodyellow;
   }
}

input#hamburger {
   display:none;
}

.line {
   position:absolute;
   left:0.1em;
   height:0.1em;
   width:1.6em;
   background:black;
   border-radius:2px;
   display:block;
}

.line:nth-child(1) {
   top:0.4em;
}

.line:nth-child(2) {
   top:0.9em;
}

.line:nth-child(3) {
   top:1.4em;
}

#hamburger:checked + .hamburger  + ul {
    display:block;
    z-index:1;
}

#hamburger:checked + .hamburger {
   background:rgba(77, 77, 77, 1.0);

   .line {
      background:lightgoldenrodyellow;
   }
}

ul {
   display:none;
   position:relative;
   float:left;
   padding:0rem;
   top: 1.8em;
   left: -1.8em;
   width:9em;
   height:1em;
   color:white;
   background-color:rgba(77, 77, 77, 1.0);
   box-shadow:6px 6px 8px white;
   overflow:visible;
}

ul li {
   float:left;
   padding:0rem;
   position:relative;
   list-style:none;
   width:100%;
   color:inherit;
   font-family: 'MS Sans Serif', sans serif;
   background-color:inherit;
   border:inherit;
   box-shadow:inherit;
   border-left:0px;
   border-right:0px;
   border-top:1px solid rgba(109, 109, 109, 1.0);
   border-bottom:1px solid rgba(30, 30, 30, 1.0);
}

ul li a {
   display:block;
   color:white;
   font-size: var(--me-FontSizeNavigationSmall);
   margin:0.4rem;
   margin-left:0.6rem;
   width:100%;
   text-decoration:none;
}

ul li:hover {
   text-decoration:underline;
}

ul li ul {
    display:none;
    float:left;
    padding:0rem;
    position:relative;
    top:-0.1rem;
    position:absolute;
    left:9rem;
    width:9rem;
    height:auto;
    background-color:rgba(77, 77, 77, 1.0);
    border:1px solid grey;
    overflow:hidden;
}

ul li:hover ul {
   display:block;
   z-index:1;
}

ul li ul li a {
   display:block;
   color:white;
   font-size:  var(--me-FontSizeNavigationSmall);
   margin:0.4rem;
   margin-left:0.6rem;
   width:100%;
   text-decoration:none;
}

/***********************************************/
@media only screen and (min-width:576px) {
/***********************************************/

ul {
/*   top: var(--me-NavTopSmall);*/
}

/***********************************************/
@media only screen and (min-width:768px) {
/***********************************************/

ul li a {
   font-size: var(--me-FontSizeNavigationNormal);
}

ul li ul li a {
   font-size: var(--me-FontSizeNavigationNormal);
}

/***********************************************/
@media only screen and (min-width:992px) {
/***********************************************/
label.hamburger {
   display:none;
   margin:0px;
   width:0rem;
   height:0rem;
}

ul {
   display:block;
   position:relative;
   float:left;
   padding:0rem;
   top:0rem;
   left:2rem;
   width:auto;
   height:2rem;
   color:black;
   background-color:inherit;
   overflow:visible;
   border:0px;
   box-shadow:none;
}

ul li {
   float:left;
   padding:0px;
   position:relative;
   list-style:none;
   width:8.3rem;
   color:black;
   border:0px;
   background-color:inherit;
}

ul li:hover {
   background-color:white;
}

ul li:hover ul {
   display:block;
   z-index:1;
}

ul li a {
   color:black;
   font-size: var(--me-FontSizeNavigation);
}

ul li a:hover {
   color:black;
   text-decoration:none;
}

ul li ul {
   position:relative;
   background-color:white;
   width:auto;
   top:0rem;
   left:-0.4rem;
   height:auto;
}

ul li ul li {
   width:auto;
   border-bottom:1px solid rgba(0, 0, 0, 0.2);
}

ul li ul li a {
   position:relative;
   color:black;
   width:156px;
   text-decoration:none;
}