/* For debugging, add borders or background color for each section to show their actual postions in the website */
/* 
By setting the position attribute to absolute/fixed/relative, this allows us to set exact position of the element with the left and top attributes.
Using the z-index attribute, we can determine the order for overlapping elements and higher numbers mean the element is closer to the user.
*/

#all {

    /** Use percentage values instead of pixels if the webpage is to be resized based on the browser's screen size.
    The position is still set to absolute, but rather than defining size and position with pixels, you use percentages instead 
    which will maintain the proportion of each section if the browser window changes its size.
    */

    /*background-color: antiquewhite;*/ 
    border: 1px solid black;
    position: fixed;
    width: 90%;
    height: 100%;
    left: 5%;  /*The left attribute determines where the left edge of the element will go. This can be specified 
                with any of the measurement units, but it’s typically measured in pixels. What is the difference with margin-left?*/
    
}


/**
You can still use floating layout inside an element with absolute position, but 
all your main elements (heading, columns, and footing) need to have absolute 
position if one of them does (if any other elements under the same parent uses absolute position).
*/

#header {

    text-align: center;
    font-size: 150%;
    color: white;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

    background-image: url("img\\header-section-image.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;

    /*border: 1px solid black;*/
    border-bottom: 3px double black;
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 15%;

}


#navbar {

    text-align: left;
    font-size: 110%;

    position: fixed;
    left: 5%;
    top: 16%;
    /*background-color: beige;*/
    /*border: 1px solid black;*/

    width: 18%;
    height: 25%;
    padding: 1px;
    margin: 1px;

}


#contents {

    /*border: 1px solid black;*/
    border-left: 3px double gray;
    /*background-color: greenyellow;*/

    position: relative;
    left: 20%;
    top: 15%;

    width: 78%;
    height: 75%;
    padding: 5px;
    margin: 5px;
    overflow: auto;


}


#footer {

    text-align: center;

    /*border: 1px solid black;*/
    border-top: 3px double gray;
    position: absolute;
    width: 100%;
    height: 5%;
    left: 0%;
    top:95%;

}




/**Styling for the side navigation bar element and button link states*/

#navbar > ul { /** using a child selector*/

    list-style-type: none;
    line-height: 25px;
    padding: 0px;

}

#navbar li { /** using a descendent selector*/

    margin-top: 2px;
    padding-left: 3px;

}

#navbar a {
    /*
    display:block converts the <a> element into a block-level element.
    Block elements will start on a new line and occupy the full available width.
    It makes the entire rectangular area clickable, not just the text.

    Allow padding, width, height, margin to behave normally.
    */

    display: block;
    border: 2px gray outset;
    text-decoration: none;
    color: black;

}



#navbar a:link { 
 
    color: rgb(6,69,173);
    text-decoration: none;

}

#navbar a:visited {
    
    color: rgb(11,0,128);

}

#navbar a:hover {

    text-decoration: underline;

}

#navbar a:active {

    color: rgb(250, 167, 0);
    font-weight: bold;

}






/* remove the vertical spacing between the main content header and the small description line which is common for all pages*/

#content-header h2 {

    margin-bottom: 0px;
}

#content-header p {

    margin-top: 0px;
    font-style: italic;
    
}