/* Left Navigation Bar */
.left-nav-bar {
    position: absolute;
    top: 50px;
    /* height: auto; */
    /* width: 200px; */ /* with is declared on script */
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-size: 18px;
    background-color: #CFCFCF;
    transition: 0.7s;
    border-radius: 0px 10px 10px 0px;    
    overflow: auto;
}
/* page title, topic header */
.page-topic h4 {    
    padding: 7px 5px 7px 10px;    
    cursor: pointer;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}
.page-topic h4:hover {
    color: #EFEFEF;
    background-color: #3F3F3F;
}
.page-topic-h4-active {
    color: #EFEFEF;
    background-color: #3F3F3F;
}
/* page list box/container  */
.page-topic div {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
/* page list names */
.page-topic div a {
    display: block;
    color: #3F3F3F;
    padding: 6px 5px 6px 25px;
    background-color: #EFEFEF;
    cursor: pointer;
    text-decoration: none;
}
.page-topic div a:hover {
    background-color: paleturquoise;
}
.page-topic div a:active {
    color: red;
}