/* ------------------------------------------------------------------------------- */
            /* ---------------   GENERAL LAYOUT FOR EACH MATH BOOKS CONTENT  ----------------- */
            /* ------------------------------------------------------------------------------- */

            html {font-family: Helvetica, sans-serif;}
            body {width:100%; margin:0px;background-color:#e9ebe0;}
             /* ---------------------------------------------------- */
            #header1 {  font-family:'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif; 
                        display: inline-block; background-color:#000000;  width:100%;  
                        line-height:3px; 
                        box-shadow:0px 8px #ffffff, 0px 8px 3px#111111;
                        
                        position: fixed;
                        z-index: 3;
            }
                        
                        #header4 {  font-family:'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif; 
                            display: inline-block; background-color:#000000;  width:100%;  
                            line-height:3px; 
                            box-shadow:0px 3px #000000;
                            position: -webkit-sticky;
                            position: sticky;
                            top: 0;
    
                            left: 0;
                           
                            top: 0;
                            visibility: hidden;
                           }
            /* ---------------------------------------------------- */
            #header1A, #header1B  {display: inline;}
            #header1A {width: 30%; margin: 0px; padding:0px;}
            #header1B {text-align:center; top:-10px}
            #logo {width: 30%;}
            
            #navList {display: inline; }
            .nav {  padding:2px 4px 2px 4px; border-style:solid; border-color:#000000; 
                    border-width: 5px; font-size:1.1em; font-weight: bolder; position: relative; top:-0.3em;
                    border-color:#ffffff; 
                    text-align:center;
                    display: inline; color:#ffffff;  
                    margin:0px 10px 0px 0px; border-radius: 5px;}

            .nav:hover {padding:2px 4px 2px 4px; border-style:solid; border-color:#000000; 
                        border-width: 5px; font-size:1.1em; font-weight: bolder; position: relative; top:-0.3em;
                        border-color:#ffffff; 
                        text-align:center;
                        display: inline; color:#b1b1b1; 
                        margin:0px 10px 0px 0px; border-radius: 5px;}

            /* ------------------NAV BAR 1----------------------- */
            #navbar {width:100%; }
            /* ------------------NAV BAR 2----------------------- */
            /* #header1 {position:fixed;}  */
            #navBar2 {  font-size:2em; 
                         top:39px; 
                        margin:auto; padding-top:10px;  
                        width:80vw;  background-color:#475257; color:#ffffff; }
            
            
            .nav2 { border-radius: 0px 15px 0px 15px; 
                    margin-top:5%; margin-bottom:25%; padding:3px 0px 3px 15px;  
                    line-height:1em; background-color:#015225; list-style-type: none;}
            /* --------------------------------------------------------------------- */
            #header_shadow{ top:3%; margin:0px; padding:0px; display: inline-block; width:100%; 
                          background-color:#000000; box-shadow: 0px 3px 5px #c2c2c2;
                          position: absolute; z-index:2;}
            /* ---------------------------------------------------- */
                    /* ---------------------------------------------------- */
    
            .sidenav {
                height: 100%;
                width:0;
                position: -webkit-fixed; position: fixed; z-index:-1; 
                top: 10px;
                left: 0;
                color:#ffffff;
                background-color: #111;
                background-color:rgba(0, 0, 0, 0.80);
                overflow-x: hidden;
                transition: 0.5s;
                margin-top:0%;
                padding-top: 5%;
                padding-bottom:15%;
                box-shadow: 3px 0px 5px #222222;
            }
            .sidenav a {
                padding: 8px 8px 8px 32px;
                text-decoration: none;
                font-size: 25px;
                line-height:25px;
                color:#ffffff;
                display: block;
                transition: 0.3s;
            }
            .sidenav a:hover {
                color: #f1f1f1;
            }
            .sidenav .closebtn {
                position: absolute;
                top: 0;
                right: 40px;
                font-size: 36px;
                margin-top: 60px;
                margin-left: 50px;
                padding: 3px 3px 6px 3px;
            }
            .closebtn {margin-right:70%;}

            @media screen and (max-height: 450px) {
            .sidenav {padding-top: 15px;}
            .sidenav a {font-size: 18px;}
            }

            @media screen and (max-height: 449px) { 
    
                .sidenav {
                    height: 100%;
                    width:0;
                    position: -webkit-fixed; position: fixed; z-index:-1; 
                    top: 0;
                    left: 0;
                    color:#ffffff;
                    background-color: #111;
                    background-color:rgba(0, 0, 0, 0.80);
                    overflow-x: hidden;
                    transition: 0.5s;
                    margin-top:0%;
                    padding-top: 5%;
                    padding-bottom:10%;
                    box-shadow: 3px 0px 5px #222222;
                }
                                 
            }
            /* ------------------------------------------------------- */

                    /* ---------------------------------------------------- */
            /* ---------------------------------------------------- */
            #body { margin:auto; padding-top:10px;  
                width:95%; background-color:#5a6d67 ; color:#ffffff; 
                position: -webkit-static; position: static; z-index:-2;
                display: flex; flex-direction: column;
                box-shadow: -25px 10px  #2b3331 inset, 25px 10px  #2b3331 inset;}
            /* margin auto centers the body box */
            /*BE MINDFUL "relative positioning causes links to NOT WORK !!!*/ /* z-indexing might help (???) */
            /* ---------------------------------------------------- */

   
            /* ---------------------------------------------------- */
            .n0 {display: inline-block;}

            #notebooksBox_1 {   margin:auto; border-radius: 10px; padding:5px; line-height:2px; 
                                background-color:#000000; color:#ffffff;  align-content: center}

            #notebooksBar {width: 80%; height:15px ; position: relative; top:15px;}
            /* ---------------------------------------------------- */
            #booksLine {margin:auto; width:70%; padding:2px; } /*background-color:#578086; border-radius: 25px;*/

 
            .books {width:50%; margin:7px 7px 7px 25%; display:inline-block;}
            
            /* ---------------------------------------------------- */
            #sloganBox {
                font-size: 1.3em;
                position: relative; 
                top:10px; 
                width:80.5%;  
                color:#000000; 
                margin:auto; 
                padding: 10px 20px 10px 20px;
                border-style:solid; 
                border-color:#232327; 
                border-width:15px;  
                background-color:#414749; border-radius: 10px;
                box-shadow: 3px 2px 10px #4a4f50 inset} 
                /*MUST specify all (3).. width, style, & color of borders */
                

                #innerboxes {   
                                font-family:'Trebuchet MS', sans-serif; 
                                width:70%;  color:#ffffff; 
                                border-style:solid; 
                                border-width:10px;
                                border-color: #dadbdd ;  
                                background-color:#29292e; 
                                border-radius: 10px;
                                padding:15px;
                                margin-bottom: 2px;
                                
                                margin-left: 85px;
                                box-shadow: 5px 5px 5px #656c6d;
                            } 
                #column1, #column2 {display: table-row-group; } 
                #column1 { padding-left:20px; margin-left:20px; }
                #column2 { font-size:1em; font-style:oblique; text-align: start;}
                #bookPic { margin-top:10px;margin-bottom: 2px; width: 25%; float: left; clear: both;}
                blockquote{text-align: left; }
                blockquote > h4 {line-height: 0px;margin-bottom:15px}
                blockquote > p {margin-top:5px}
                #underLine {line-height:0px; background-color: #ffffff; width:100%; height:5px; }
                

                #tableOfContentsTitle { font-family:'Trebuchet MS', sans-serif; width:50%; margin-left:85px; background-color:#9e9899; border-style: ridge; 
                                        border-color: rgb(0, 0, 0); border-radius: 5px; 
                                        color:white; text-shadow: 1px 1px #234257, 2px 2px #38698a,3px 3px #38698a; 
                                        font-size:1.8em; display:block; text-align: center; }
                .tableOfContents{ width:80%;  font-size:1.5em; margin-left:50px; list-style-type: decimal;}
                .tableOfContents > li {  color:white; font-family: monospace;
                                        }
                #tableComment {margin-left:85px;color:white; }
                li > p {font-family:'Trebuchet MS', sans-serif;  font-size:0.8em; text-shadow: 1px 1px #000000;padding-left: 10px;
                                        background-color:#232327; padding: 10px;
                                        border-width:0px 0px 5px 0px; 
                                        border-style: groove; border-color: rgb(75, 81, 90); margin-bottom:10px; 
                                        border-radius: 15px;}
                                        
                .card-header {font-family:'Trebuchet MS', sans-serif;  font-size:0.8em; text-shadow: 1px 1px #000000;padding-left: 10px;
                                        background-color:#232327; padding: 10px;
                                        border-width:0px 0px 5px 0px; 
                                        border-style: groove; border-color: rgb(75, 81, 90); margin-bottom:10px; 
                                        border-radius: 15px;}


                #tipBox {font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; position: relative; top:10px; width:50%; margin:auto; color:#000000; border-style:dashed dashed dashed solid; border-color:#000000 #000000 #000000 #148f6a; border-left-width:15px;  background-color:#b1d8c9; } /*MUST specify all (3).. width, style, & color of borders */
                #column1B, #column2B { display:inline-block;}
                #column1B { position: relative; top:6%; margin:0px 0px 0px 5px; padding:0px; width:10%;  text-align: center;}
                #column2B { text-shadow: 1px 0.5px 0.5px #ffffff; font-size:0.8em; font-style:oblique;  margin:0px 0px 0px 0px; padding:0px 10px 0px 0px; max-width:85%; min-width:50%; text-align: center;}
                #bulb { width: 100%; position:relative; top:5px;}
            /* ---------------------------------------------------- */
            #footer {   font-size:0.7em; box-shadow: 0px -3px 2px #888888;
                        text-shadow: 1px 1px 2px #3a3a3a, 0 0 25px #424242, 0 0 5px #2d2d2d; 
                        margin-top:35px; padding:20px 10px 10px 10px; line-height:110%; 
                        background-color: #010101; color:#e8e5dc;}

            #box1A { display:inline-block; }

            .footerList { list-style-type: none; margin:auto; } 

            #box2A { margin: auto; width: 70%;}
            /* ---------------------------------------------------- */
            /* LINK that get underlined */
            a:link { color: inherit; text-decoration-line: none;} 
            a:hover { color: inherit; text-decoration-line:underline;}
            a:active { color: inherit; text-decoration-line:underline;}
            a:visited { color: inherit; text-decoration-line:underline;}
            /* LINK that DONT get underlined */
            #dashLines > a:link { color: inherit; text-decoration-line: none;} 
            #dashLines > a:hover { color: inherit; text-decoration-line:none;}
            #dashLines > a:active { color: inherit; text-decoration-line:none;}
            
            /* ---------------------------------------------------- */
            /* ---------------   MEDIA QUERIES   ------------------ */
            /* ---------------------------------------------------- */

            /* ////////////////////// PART 1  /////////////////////////// */
            @media screen and (max-width: 1161px) {
                .nav {font-size:1.2em;}
            }   
            @media screen and (max-width: 1113px) {
                .nav {font-size:1.0em;}
            }   
            @media screen and (max-width: 985px) {
                .nav {font-size:0.9em;}

            }  
            @media screen and (max-width: 893px) {
                .nav {font-size:0.8em;}

            }  

            /* ////////////////////// PART 2  /////////////////////////// */
            /* ---------------------------------------------------- */

            @media screen and (max-width: 844px) { /* 801.999px */
                #header1B{
                    font-size: 0.8em; display: none; transition: 20s;
                }
                #navBar2 { display: none;}
                

                #logo {width: 70%;}
                
                #column1 { width:15%; }
                #innerboxes {   
                    margin: auto; 
                    width:90%;}
                #column1 > img {margin-left: 28%; width:40%;}
                #column2 { display:inline-block; text-shadow: 0.5px 0.5px 0.5px #ffffff; 
                        font-size:1em; font-style:oblique;  margin:auto; 
                         width:95%; text-align: center;}       

                #editorsNotesLine {margin:auto; width:75%; padding:2px; font-size:0.7em; text-align: center;}
              
                              
                .sidenav2 {
                    height: 100%;
                    width: 100%;
                    position: -webkit-fixed; 
                    position:fixed; 
                    z-index:-1; 
                    top: 0;
                    left: 0;
                    color:#ffffff;
                    background-color: #111;
    
                    opacity: 0.5;
                    filter: alpha(opacity=50); /* For IE8 and earlier */
    
                    transition: 0.2s;
                    margin-top:0%;
                    padding-top: 60px;
                    box-shadow: 3px 0px 5px #3d3d3d;
                    visibility: hidden;
                    
                }

                #navBar2 { display: none;}  
            }   
            
  
            @media screen and (min-width: 844px) { /* 801.999px */
 
                  #navBar2{display: none;}
                 
                 #mySidenav, #dashLines{ display: none;}
                 
            
                #bulb { max-width: 90%; position:relative; top:5px;}
 
                .books { width:30%; margin:7px 7px 7px 2%; display:inline-block;}

                #footer { font-size:1.0em;}
                
            }    

            /*  min-width: 801.999px, (min-width: 501.999px) and (max-width: 700px), (max-width: 500px) */            

            /* ---------------------------------------------------- */
            /* -------------   SANDWICH / HAMBURGER   ------------- */
            /* ---------------------------------------------------- */
            .container_bool_0 {
                display: inline-block;
                margin-top:0%;
                margin-left:5px;
                display: inline-block;
                cursor: pointer;
                color: #ffffff;   
            }

            /* ////////////////////// PART 3  /////////////////////////// */
            /* ---------------------------------------------------- */
            @media screen and (max-width: 767px) { 
                #innerboxes {   
                    position: relative; left: -3.5%;;
                    margin-left: 10px;
                    box-shadow: 5px 5px 5px #656c6d;
                } 
                    #sloganBox {font-size: 1em;
                        position: relative; top:10px; width:65.5%;  
                        color:#000000; margin:auto; padding: 10px 20px 10px 20px;
                        border-style:solid; border-color:#232327; 
                        border-width:15px;  background-color:#414749; border-radius: 10px;
                        box-shadow: 3px 2px 10px #4a4f50 inset} 
                        /*MUST specify all (3).. width, style, & color of borders */
                        

                        #innerboxes {    font-size: 1.0em; 
                                        box-shadow: 3px 3px 3px #656c6d;
                                    } 

                        #tableOfContentsTitle {  width:70%; margin-left:0px; }
                        .tableOfContents{ margin-left:0px;}

                        #tableComment {margin-left:0px;}
                        li > p {font-size:0.8em; }

                }

                @media screen and (max-width: 650px) { 
                    #innerboxes {   
                        position: relative; left: -5.5%;;
                        margin-left: 10px;
                        box-shadow: 5px 5px 5px #656c6d;
                    } 
                        #sloganBox {font-size: 1em;
                            position: relative; top:10px; width:65.5%;  
                            color:#000000; margin:auto; padding: 10px 20px 10px 20px;
                            border-style:solid; border-color:#232327; 
                            border-width:15px;  background-color:#414749; border-radius: 10px;
                            box-shadow: 3px 2px 10px #4a4f50 inset} 
                            /*MUST specify all (3).. width, style, & color of borders */
                            
    
                            #innerboxes {    font-size: 1.0em; 
                                            box-shadow: 3px 3px 3px #656c6d;
                                        } 
    
                            #tableOfContentsTitle {  width:70%; margin-left:0px; }
                            .tableOfContents{ margin-left:0px;}
    
                            #tableComment {margin-left:0px;}
                            li > p {font-size:0.8em; }
    
                    }
                    @media screen and (max-width: 414px) { 
                        #innerboxes {   
                            position: relative; left: -8.5%;;
                            margin-left: 10px;
                            box-shadow: 5px 5px 5px #656c6d;
                        } 
                            #sloganBox {font-size: 1em;
                                position: relative; top:10px; width:65.5%;  
                                color:#000000; margin:auto; padding: 10px 20px 10px 20px;
                                border-style:solid; border-color:#232327; 
                                border-width:15px;  background-color:#414749; border-radius: 10px;
                                box-shadow: 3px 2px 10px #4a4f50 inset} 
                                /*MUST specify all (3).. width, style, & color of borders */
                                
        
                                #innerboxes {    font-size: 1.0em; 
                                                box-shadow: 3px 3px 3px #656c6d;
                                            } 
        
                                #tableOfContentsTitle {  width:70%; margin-left:0px; }
                                .tableOfContents{ margin-left:0px;}
        
                                #tableComment {margin-left:0px;}
                                li > p {font-size:0.8em; }
        
                        }
                        @media screen and (max-width: 375px) { 
                            #innerboxes {   
                                position: relative; left: -10.5%;;
                                margin-left: 10px;
                                box-shadow: 5px 5px 5px #656c6d;
                            } 
                                #sloganBox {font-size: 1em;
                                    position: relative; top:10px; width:65.5%;  
                                    color:#000000; margin:auto; padding: 10px 20px 10px 20px;
                                    border-style:solid; border-color:#232327; 
                                    border-width:15px;  background-color:#414749; border-radius: 10px;
                                    box-shadow: 3px 2px 10px #4a4f50 inset} 
                                    /*MUST specify all (3).. width, style, & color of borders */
                                    
            
                                    #innerboxes {    font-size: 1.0em; 
                                                    box-shadow: 3px 3px 3px #656c6d;
                                                } 
            
                                    #tableOfContentsTitle {  width:70%; margin-left:0px; }
                                    .tableOfContents{ margin-left:0px;}
            
                                    #tableComment {margin-left:0px;}
                                    li > p {font-size:0.8em; }
            
                            }
                            @media screen and (max-width: 320px) { 
                                #innerboxes {   
                                    position: relative; left: -12.5%;;
                                    margin-left: 10px;
                                    box-shadow: 5px 5px 5px #656c6d;
                                } 
                                    #sloganBox {font-size: 1em;
                                        position: relative; top:10px; width:65.5%;  
                                        color:#000000; margin:auto; padding: 10px 20px 10px 20px;
                                        border-style:solid; border-color:#232327; 
                                        border-width:15px;  background-color:#414749; border-radius: 10px;
                                        box-shadow: 3px 2px 10px #4a4f50 inset} 
                                        /*MUST specify all (3).. width, style, & color of borders */
                                        
                
                                        #innerboxes {    font-size: 1.0em; 
                                                        box-shadow: 3px 3px 3px #656c6d;
                                                    } 
                
                                        #tableOfContentsTitle {  width:70%; margin-left:0px; }
                                        .tableOfContents{ margin-left:0px;}
                
                                        #tableComment {margin-left:0px;}
                                        li > p {font-size:0.8em; }
                
                                }