/* responsive design: ensure widescreen design is tweaked */ 
@media only screen and (min-width: 1800px) {
    .top-menu-title {
        padding: 1rem 3.5rem; /* else line length becomes too long in the module list */
    }

    .menu-title {
        padding: 1rem 3.5rem 0 3.5rem; 
    }

    #nav-list li {
        padding: 1rem 3.5rem;
    }
}


@media only screen and (max-width: 1250px) {

    section {
        width: 100%;
        margin: 0 auto;
    }

    section.active {
        width: 100%;
        padding-left: 20%; 
    }

    .top-menu-title {
        padding: 1rem;
    }

    .menu-title {
        padding: 1rem 1rem 0 1rem;
    }

    #nav-list li {
        padding: 1rem;
    }

}

@media only screen and (max-width: 990px) {

    #scroll-top-button {
        display: none; /* or add to fixed-links? */
    }

    aside {
        width: 275px;            
        -webkit-transform: translate(0px, 0px);
        -moz-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        left: -220px;    
    }

    aside.active {
        width: 220px;
    }

    #newsboard-wrapper {
        padding-right: 55px;
    }

    #menu-button {
        padding-right: 20px;
        font-size: 20px;
    }

    section {
        width: 100%;
        margin: 0 auto;
        padding-left: 55px;
    }

    section.active {
        width: 100%;
        padding-left: 55px; /* a little extra space to make sure articles aren't sticking to aside */

    }

    .article-wrapper {
        width: 95%;
    }

}