/*  responsive : comun  */
/* css variables, used on stylesheet with var() function */
:root {
  --navegaletracolor:      hsl(72,    69%,  90%); 
  --navegaletracolorseleccionado:hsl(200, 100%, 50%); 
  --navegafondocolor:      hsl(197, 70%,   12%);
  --navegafondocolorseleccionado:hsl(197, 70%,  12%);   

  --navegaletracolorhovernosel: hsl(200,  100%,  40%);
  --navegafondocolorhover: hsl(197, 70%,   12%);


  --navegabordercolor:     hsl(197, 70%,  12%); 
}

/*   body{ min-width:512px; }   */
div#containerForMain, #footer {  margin-left: 0;  }
div#rightside{ display:none; }

div#menuicons {
  margin: 0;
  padding: 0;
  background-color:var(--navegafondocolor); 
  border-bottom:1px solid var(--navegabordercolor);
  width: 100%;
  /*  position: relative;  width: 94%;  left: 3%;  */
  /*It means “relative to itself”. If you set position: relative; on an element but no other positioning attributes 
  (top, left, bottom or right), it will have no effect on it’s positioning at all, it will be exactly as it would
  be if you left it as position: static; But if you do give it some other positioning attribute, say, top: 10px;,
  it will shift its position 10 pixels down from where it would normally be.*/
}
ul.navega { 
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: auto;
 }
ul.navega li a { 
  display: block;   color: var(--navegaletracolor);
  padding: 0.67em;    text-decoration: none;
  text-align: center;   float: none; 
  font-size: 0.85em;  letter-spacing:0.10em;
 }
 div#menuicons h1.menuHidableDriver i, div#menuicons ul.navega i{ padding: 0em 0.333em; }
 div#menuicons h1.menuHidableDriver                             { text-align:right; margin:0; padding:0.67em 0;}

/*  .seleccionado is added on navButtons.js  */
ul.navega li a.seleccionado {  background-color:var(--navegafondocolorseleccionado);  color:var(--navegaletracolorseleccionado); }
ul.navega li a:hover:not(.seleccionado) {  background-color:var(--navegafondocolorhover); color:var(--navegaletracolorhovernosel); }


/* media query to apply css starting at 700 px */
@media screen and (min-width: 700px) {
  div#menuicons h1.menuHidableDriver{ display:none; }
  div#menuicons ul.menuHidableTarget{ display:block; }

  ul.navega li a {  float: left;   font-size: 1.0em;  letter-spacing:0.15em;  padding: 1.0em; }
}

/* media query to apply css starting at 900 px */
@media screen and (min-width: 900px) {  
  body {  max-width:1100px;  margin:0px auto;  }
  body {  min-height: 50em;  border-right:1px solid var(--navegabordercolor);  }

  div#containerForMain, #footer {  margin-left:200px;  }
  div#rightside {  
    width:100%;  max-width:1100px;  margin:0px auto;
    display:block;   
    position: fixed; height: 100%;  
    border:0px solid var(--navegabordercolor); border-right:1px solid var(--navegabordercolor);
  }
  /*A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn’t change
  when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled.*/
  div#menuicons {  width: 200px;  position: fixed; height: 100%;  border:0px solid var(--navegabordercolor); border-right:1px solid var(--navegabordercolor); }
  div#menuicons ul.navega i{ padding: 0em ; }
  ul.navega li a {  text-align: left;  float: none;   font-size: 1.1em;  letter-spacing:0.15em; }
  ul.navega li i.fa-solid { display: block; }
}