/*
body{
overflow-x: auto;}
*/

/*
add to html

<div id="split-command-grid-column-b">
    <!-- JS will insert navbar here-->
</div><!--end split grid col b-->

*/


#split-grid-nav-dual{
display: grid;
grid-template-columns: 70% 30%;	
margin-top:1rem;
width:100%;
}

#split-grid-a{
grid-column:1/1;
max-width:100%;
margin-left:5px;
padding-left:2%!important;
padding-right:5%;
padding-bottom:2rem;
text-align:left;
border-left: 1px solid rgb(32, 32, 32);
}
 
#split-grid-b{
grid-column:2/2;
margin-right:1rem;
padding-left:1%;
padding-right:5%;
text-align:left;
margin-left:20px;
border-left: 1px solid rgb(0, 0, 0);
color:rgba(86, 86, 74, 0.993);
}


#navbarBottom{
display:none;
color:rgba(86, 86, 74, 0.993);
text-align:center;
width:100%;
}

#navbarInner{
    margin-top: 1rem;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid  rgba(19, 101, 5, 0.6);
    border-top: 1px solid rgba(19, 101, 5, 0.6);
    margin-left: 1rem;
    margin-right: 1rem;

}


/*start queries dual-nav/*



/* At max-width or less, do this, and dont do it above max-widh
600px = 250% zoom at chrom on zpc
800px = 200%
1000 = 150% portrait, 90% landscape.. use this, 10-30Thurs1730
 */
@media screen and (max-width: 1000px) {

    #navbarBottom{
    display:inline!important;
    }

    #split-grid-dual-nav{
    display: grid;
    /*grid-template-columns: 99% 1%;	*/
    margin-top:1rem;
    width:100%;

    }

    #split-grid-a{
    grid-column:1 / span 2!important;/*fixed the issue*/
    width:100%!important;
    margin-left:5px;
    padding-left:2%!important;
    padding-right:5%;
    text-align:left;
    margin-left:1px!important;
   border-left: 1px solid rgb(32, 32, 32);
    }

    #split-grid-b{
    display:none!important;/*hide col b*/
    grid-column:0/2;
    margin-right:1rem;
    padding-right:5%;



    text-align:left;
    }

}



/* At max-width or less, do this, and dont do it above max-widh */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

        
    #navbarBottom{
    display:inline!important;
    }

    #split-grid-dual-nav{
    display: grid;
    /*grid-template-columns: 99% 1%;	*/
    margin-top:1rem;
    /*width:100%; turning off for left margin testing*/
    }

    #split-grid-a{
    grid-column:1 / span 2!important;
    width:100%!important;
    margin-left:5px;
    padding-left:2%!important;
    padding-right:5%;
    text-align:left;

    border-left: 1px solid rgb(32, 32, 32);
    }

    #split-grid-b{
    display:none!important;
    grid-column:0/2;
    margin-right:1rem;
    padding-left:1%;
    padding-right:5%;
    text-align:left;
    margin-left:20px;

    }

}

/*end queries from dualnav