/** Top-bar */
nav {
	float: left;
	background: #4d4d4d; 
	//border-left: 1px solid black;
	box-sizing: border-box; 
	height : 100%;
}

.nav-container {
	height : 100%;
	display: inline-grid;
}

nav ul {
  //font-size: 0;
  //margin: 0;
  padding: 0;
  height : 100%;
}

nav ul li {
  display: inline-block;
  position: relative;
  height : 100%;
}

/* hover over groups */
/* .nav-container>ul>li>a:hover, .nav-container>ul>li:hover { 
	color: #fff; 
	background: blue; #373737;
} */


.menuhover {
	color: #fff; 
	background: #373737;
}



/** menu-item  and submenu-item */
.nav-container a {
  color: #fff;
  display: block;
  font-size: 1rem;
  padding: 0px 10px;
  transition: 0.1s linear;
  overflow-x: hidden;
  border-right: 1px solid black;
  box-sizing: border-box; 
  white-space: nowrap;
  height : 100%;
  /** align vertical */
  display: flex;
  align-items: center; 
  text-decoration: none;
}


/** Drop-down */
nav ul li ul {
  z-index: 1001;
  display: none;
  position: absolute;
  width: 250px;
}

nav ul li ul li {
    border-top: 1px solid black;
    display: block;
    display: flex;
    height: 2.0rem;
    z-index: 1001;
}


/** Submenu-item */
.submenu-item {
  z-index: 10011;
  background: #373737;
  display:block;
  padding: 0px 10px;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  border-style: none;
}

/** Submenu-item hover style */
/* Sustitución de :hover por clases para manejarlo por teclado tambien */
/* .submenu-item:hover { background: #1e7e34; //#28A745; //#126d9b; }
.submenu-item.extra:hover { background: #f57900; //#28A745; //#126d9b; } */
.homehover { background: #1e7e34; }
.extrahover { background: #f57900; }

/** Save button */
.submenu-button {
	border-style: none;
	width:  2.0rem;
    //height: 2.5rem;
    padding: 3px;
    background-image: url(img/save_grey_192x192.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #373737;
}
.submenu-button:hover { background-color: #f57900;}