/* Devsite Nav

   A list design pattern (lists for navigation purpose)

   In HTML Heirarchy we have the following (simplified) design pattern:

  <div class="devsite-nav">
    <ul class="devsite-nav-list">
      <li class="devsite-nav-item">
        <a class="devsite-nav-title">
	  <span class="devsite-nav-text">
	    ...

  ** 

  devsite-nav-item optionally complements devsite-nav-heading which
  essentially increases font weight from 400 to 700.

*/
.nav-bg,
.mobile-nav-bg,
.landing-nav-bg
{
    bottom: 0;
    position: fixed;
    top: 0;
    box-shadow: 0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);    
    width: 268px;
}
.nav-bg {
    display: block;
    z-index: 1;
}
.mobile-nav-bg,
.landing-nav-bg
{
    display: none;
    z-index: 100;
}
@media only screen and (max-width: 830px) {
    .nav-bg {
	display: none;
    }
    .mobile-nav-bg {
	display: block;
    }
}
.nav-header {
    position: absolute;
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 48px;
    align-items: center;
    border-bottom: solid 1px #dadce0;
}
@media only screen and (min-width:801px) {
    .nav-header {
	border-bottom: none;
    }
}
.nav {
    position: relative; /*fixed;*/
    top: 48px;
    overflow-x: hidden;
    overflow-y: auto;
    width: 268px;
}
.devsite-nav-list {
    /* <ul class="devsite-nav-list" */
    line-height: 16px;
    padding-bottom: 36px;
    list-style-type: none;
    margin: 0;
    padding: 16px 0 16px;
    border-bottom: solid 1px #dadce0;
}
.devsite-nav-item {
    /* <li class="devsite-nav-item" */
    line-height: 16px;
    margin: 0;
    padding: 4px 0;
    width: 100%;
    display: inline-block;
}
.devsite-nav-heading {
    font-weight: 700;
}    
.devsite-nav-title {
    /* <a class="devsite-nav-title" */
    display: flex;
    padding: 4px 0px; /* 4px top/bottom 0px left/right */
    border-radius: 0 12px 12px 0;    
    padding-right: 8px;
    width: 90%;
}
a.devsite-nav-title:active,
a.devsite-nav-title:hover
{
    background: #e8f0fe;
    border-radius: 0 12px 12px 0;
}
.devsite-nav-text {
    /* <span class="devsite-nav-text */
    padding-left: 24px;    
    overflow: hidden;
    color: rgba(0,0,0,0.87);
}
.scroll,
.scroll-on-wide
{
    overflow-x: hidden;
    overflow-y: scroll;
}
@media only screen and (max-width: 830px) {
    .scroll-on-wide {
	overflow-y: hidden;
    }
}

/* ---------- Header ----------*/

.devsite-header-menu-wrapper,
.landing-header-menu-wrapper
{
    width: 100%;
    padding: 0;
    position: fixed;
    display: none;
    z-index: 10;
    box-shadow: 0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);    
    
}
.landing-header-menu-wrapper {
    margin-top: 48px;
}    
.devsite-header-menu-content {
    position: relative;
    margin: 24px;
}
.devsite-header-menu-options {
    display: block;
}
.nothing {}

.landing-header {
    position: fixed;
    top: 0;
    width:100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(auto, 200px));
    grid-template-rows: 48px;
    justify-items: center;
    align-items: end;
    box-shadow: 0 1px 2px 0 rgba(60,64,67,.3),0 2px 6px 2px rgba(60,64,67,.15);    
    z-index: 2;
}
.header-tab2 {
    position: fixed;
    display:grid;
    top: 48px;
    height: 72px;
    width: 100%;
    box-shadow: 0 1px 2px 0 rgba(60,64,67,.3),0 2px 6px 2px rgba(60,64,67,.15);
    border-top: 1px solid #dadce0;
    z-index: 2;
}
.header-tab2-content {
    margin:auto;
}
.push-down {
    /*
      This class exists to supplement page formatting
       when a header-tab2 element exists on the page.

       function pushDown in myScripts.js  calculates the
       height of the header-tab2 and ads margin-top equal
       to header-tab2 height to all .push-down objects.
   */
}
.header-wrapper {
    height: min-content;
    display: block;
}
.logo-wrapper {
    grid-column: 2 / 3;
    height: 100%;
}
.logo {
    /* Important to set width */
    width: 142px;
    margin: 5px;
}
.logo2 {
    width: 38px;
    margin: 5px;
}
.hamburgerMenu {
    display: none;
}
@media only screen and (max-width: 830px) {
    .header {
	grid-template-columns: auto auto 1fr;
    }
    .header .logo-wrapper {
	grid-column: 2 / 3;
    }
    .hamburgerMenu { /* This div is empty in doc w/out nav */
	display: block;
	margin: 12px 7px 12px 12px;
	grid-column: 1 / 2;
	grid-row: 1 / 2;
    }
}
.show {
    display:grid;
    position: absolute;
    z-index: 1;
}

.second-header {
    grid-row: 2;
    height: 72px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
    align-items: center;
    width: 100%;
    box-shadow: 0 1px 2px 0 rgba(60,64,67,.3),0 2px 6px 2px rgba(60,64,67,.15);
    z-index: 2;
    background-color: #14c07b;
    color: #fff;
}    

.menu-linkboxes-list
{
    display: flex;
    flex-grow: 1;
    line-height:16px;
    list-style: none;
    padding: 0;
}
.menu-linkbox
{
    flex-grow: 1;
}
.menu-linkbox {
    margin: 0;
}
.menu-list
{
    list-style-type: none;
    padding: 0;
    margin: 0;
}