/* This applies to all tags and elements on the html page. */
*{
    box-sizing: border-box;
}
/* These are styles added and applied to all the body contents. */
body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    height: 100%;
    width: 100%;
    margin: 0%;
}
/* This is for the navigation bar. */
.navbar{
    height: 100px;
    background-color: #333333;
    color: #f6f6f6;
    padding: 3px;
    width: auto;
}
/* This is for the unordered list tags. */
ul{
    list-style-type: none;
    background-color: #333333;
    width: auto;
}
/* This is for the lists. */
li{
    float: left;
    width: 10%;
    border: #000000 3px solid;
    font-weight: bold;
    font-size: 80%;
}
/* This is for the anchors that are inside list tags. */
li a{
    display: block;
    color: #f6f6f6;
    padding: 20px 3px;
    text-align: center;
    text-decoration: none;
}
/* This is for the anchors in the list tags. This style is applied when hovering over the anchor tags that are inside lists tags. */
li a:hover{
    background-color: #e67b00;
    color: #333333;
    float: inline;
}
/* This is for any lists that have the active class. This is going to be used to show which page youre on. */
li.active{
    background-color: #e67b00;
    color: #f6f6f6;
}
/* This is the style for the main content of the body. */
#maincontent{
    color: #e67b00;
    width: 100%;
}

a img{
    margin: 10px 25px 10px 25px;
    width: 3%;
}
/* These are the styles for the footer tags. */
footer{
    height: 200px;
    background-color: #333333;
    color: #e67b00;
    padding: 20px;
    width: auto;
    clear: both;
    text-align: center;
    margin-top: 30px;
}