/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * This CSS file is loaded by the base.html which is a parant file.    *
 * Therefore the styles apply to all the html files.                   *
 *                                                                     *
 *                                                                     *
 * It is responsible for the styling of the navigation bar.            *
*                                                                      *
 * The navigation bar is constructed in the base.html file and consist *
 * of a few links. Each link is assigned to an ID.                     *
 * The ID is used by each page. Each page calls an ID and changes the  *
 * style of the element/link/button. his bakes it look like that the   *
 * current page is highlighted.                                        *
 *                                                                     *
 * Author: Jonas Groenkjaer Pedersen                                   *
 * Date:   March 2021                                                  *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */




/* Class for navigation bar 
 * The navigation bar is called as: <div class="navigationbar"> some_links  </div>
 * Please note that since the entire class is included in the div (division/section) 
 * then the background color applies to the entire block and not just the text.
 */
.navigationbar {
    overflow: auto;               /* Handles if navigation bar becomes too large to fit the screen  */
    background-color: #477eec;    /* Color of bar */
}




/* Links in navigation bar */
.navigationbar a {
    color:           black;
    font-weight:     bold;
    text-align:      center;  
    padding-top:     1em;       /* Padding generates space around */ 
    padding-bottom:  1em;       /*    an element's content. If a  */
    padding-right:   2em;       /*    background color is added   */
    padding-left:    2em;       /*    it look like a button.      */
    float:           left;      /* Makes the links appear horisontal and not vertical */
    display:         block;     /* Ensures that no text is on the same line as the navigation bar  */
    text-decoration: none;      /* Removes underline from link */
}




/* Change style of linnk when hovering  */
.navigationbar a:hover {
  background-color: #213e79;
  color: white;
}