body {
    position: relative;
    margin: 0;

    width: 100%;
    height: 100%;
    
    font-family: 'Courier New', Courier, monospace;
    background-color: #EEEEEE;
}

/* positioning styles classes */
.full-width {
    margin: 0 auto;
    width: 100%;

    background-color: #26A69A;
}
.abs {
    position: absolute;
}
.fixed {
    position: fixed;
}
.fixed-left {
    left: 0;
}
.fixed-bottom {
    bottom: 0;
}
.fixed-top {
    top: 0;
}
.sticky {
    margin-top: 3em;
}
/* header styles */
div.title {
    height: 5em;
    padding: 2em 0 0 4em;
}
p.title {
    margin: 0;

    font-size: 3em;
    font-weight: bold;
    color: white;
}

/* navigation bar styles */
.navigation {
    background-color: #333;
    overflow: hidden;
}  
.navigation a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
} 
.navigation a:hover,.navigation a.active:hover{
   background-color: #ddd;
   color: black;
}
.navigation a.active {
    background-color: #26A69A;
    color: white;
}
a.none:hover {
    background-color: #333;
}

/* footer  */
.under-footer {
    left: 1em;
    height: 7em;
}
.footer-note {
    height: 1em;
    padding: 2em;
    padding-bottom: 3em;
    padding-left: 5em;

    background-color: #26A69A;
    color: white;
}

/* content positioning */
.content {
    top: 12em;
    left: 5em;
    right: 5em;
}