/* The browser (or Django?) will eventually cache this file, */
/* which is referenced in base.html.  So if you make changes  */
/* to this file you sometimes need to force it to be reloaded */
/* by changing the version in the line: */
/*   href="{% static 'css_sans.css' %}?v=1.e"  */
/* (e.g. use "?v=1.f") */

/* Navbar container */
.rt5-navbar {
  overflow: hidden;
  background-color: #f9f9f9;
  border: 1px solid black;
  font-family: Arial, Helvetica, sans-serif;
  /* width: 565px; */
  width: fit-content;
  margin-left:10px; margin-top:5px;
  margin-bottom:4px;
  /* default width is 100% or window width */
}

/* Links inside the navbar */
/* padding = [top, right, bottom, left] */
.rt5-navbar a {
  float: left;
  font-size: 14px;
  color: black;
  text-align: center;
  padding: 6px 14px 6px 14px;
  margin: 0px;
  text-decoration: none;
}

/* The dropdown container */
.rt5-dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.rt5-dropdown .rt5-dropbtn {
  font-size: 14px;
  border: 1px solid #efefef;
  outline: none;
  color: black;
  padding: 5px 15px 5px 15px;
  /* padding: 5px 14px 5px 14px; */
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a background color to navbar links on hover */
.rt5-navbar a:hover, .rt5-dropdown:hover .rt5-dropbtn {
  background-color: #95cdfa;
}

/* Dropdown content (hidden by default) */
/* Must set position to use z-index */
.rt5-dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 500;
}

/* Links inside the dropdown */
/* padding = [top, right, bottom, left] */
.rt5-dropdown-content a {
  float: none;
  color: black;
  padding: 6px 12px 6px 12px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.rt5-dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.rt5-dropdown:hover .rt5-dropdown-content {
  display: block;
}

/* Add a dropdown divider */
/* Add this class to an item in the droplist */
.rt5-divider-top {border-top: 1px solid rgba(0,0,0,.2);} 

/* ################################################### */
/* Level 2 Dropdown menus
/* Using the font-awesome symbol in menubar.html. */
/*    <i class="fa fa-caret-right"></i> </a> */
/* ################################################### */

/* Use position relative for container and then */
/* top:0% for the content */
.rt5-dropdown2 {
  display:block;
  position:relative;
}

/* Content of 2nd dropdown is hidden by default; Working */
/* Must set position to use z-index */
.rt5-dropdown2-content {
  display: none;   /* hidden by default */
  position: absolute;
  background-color: #f9f9f9;
  width:fit-content;
  text-wrap: nowrap;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 510;  /* must exceed other z-index */
  left: 100%;  /* offset nested dropdown to the right */
  top:0%;
}
  
/* Show links inside the 2nd dropdown;  Working */
/* padding = [top, right, bottom, left] */
/* .dropdown-content .dropdown2-content a{ */
.rt5-dropdown2-content a{
  display: block; 
  /* float: left;   entries are inline */
  float: none;
  color: black;
  /* padding: 6px 12px 6px 26px;  /* right: 14 to 26 */
  padding: 6px 24px 6px 12px;  /* right: 14 to 26 */
  text-decoration: none;
  position: relative; text-align: left;
}
  
/* Change color of links in 2nd dropdown on hover */
/* padding = [top, right, bottom, left] */
/* .rt5-dropdown-content .rt5-dropbtn2 .rt5-dropdown2-content a:hover{ */
/* .rt5-dropdown2-content a:hover{ */
/* .rt5-dropdown-content:hover, .rt5-dropdown2-content:hover a_hover{ */
.rt5-dropdown2-content a:hover{
  background-color: #ddd;
}

/* Show dropdown button2; Working */
/* padding = [top, right, bottom, left] */
/* No border & 2px less left padding. */
.rt5-dropbtn2{
  font-size: 14px;
  border: 0px;
  outline: none;
  color: black;
  padding: 6px 20px 6px 12px;  /* was right=14px */
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Change color of dropbtn2 on hover; Working */
.rt5-dropbtn2:hover{
  background-color: #ddd;
}

/* Show the dropdown2 content on hover */ 
/* Don't need this CSS3 "~" trick to operate on a sibling (vs. child) */
/* .dropbtn2:hover ~ .dropdown2-content{  */
/*    display: block; } */

/* Show the dropdown2 content on hover */
/* Need "dropdown2" to enclose button/label AND content */
/* so everything stays visible until we select an item */ 
.rt5-dropdown2:hover .rt5-dropdown2-content{ 
  display: block;
  
}

/* Bitmap button */
.rt5-bitmap-button{
  border: 1px solid black;
  margin: 0px; padding: 4px;
  background-color:#f9f9f9;
}

/* Bitmap button bar */
.rt5-bitmap-button-bar{
   margin-left:10px; margin-bottom:6px;
}