body{
    background:#333;
}
#all{
    width:90%;
    margin-left:auto;
    margin-right:auto;
    background:#FFF;
}
#main_content{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content:space-between;
}
a:link{
    text-decoration:none;
    font-weight:bold;
    font-size:1.12em;
    color:#960;
}
a:active{
    text-decoration:underline;
    font-weight:bold;
    font-size:1.12em;
    color:#F90;
}
a:hover{
    text-decoration:underline;
    font-weight:bold;
    font-size:1.12em;
    color:#F90;
}
a:visited{
    text-decoration:none;
    font-weight:bold;
    font-size:1.12em;
    color:#960;
}
/* -------------------------------------------------- 
   top navigation styles
-----------------------------------------------------*/
nav{
    border-bottom:solid 1.5px #FF9900;
}
nav ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    word-break: break-all;   /* requirement 2 */
}
nav li {
    margin:.2em;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
}
nav li.search-form {
    margin-right: 1em;
    margin-left:auto;
}

/* -------------------------------------------------- 
   sidebar
-----------------------------------------------------*/
aside{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex:.5;
    -ms-flex:.5;
    flex:.5;
    align-items: flex-start;   /* requirement 1: */
}
.links{
    list-style: none;
}
.links li {
    margin:.5em auto .5em -.5em;
}
.side a:link{
    text-decoration:none;
    font-weight:bold;
    font-size:.9em;
    color:#960;
}
.side a:active{
    text-decoration:underline;
    font-weight:bold;
    font-size:.9em;
    color:#F90;
}
.side a:hover{
    text-decoration:underline;
    font-weight:bold;
    font-size:.9em;
    color:#F90;
}
.side a:visited{
    text-decoration:none;
    font-weight:bold;
    font-size:.9em;
    color:#960;
}   
/* -------------------------------------------------- 
   main content columns
-----------------------------------------------------*/
.left{
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    padding:.5em;
    background:#fce4ec;
    color:#880e4f;
}
.center{
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    padding:.5em;
    background:#e3f2fd;
    color:#0d47a1;
}
.right{
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    padding:.5em;
    background:#e8f5e9;
    color:#1b5e20;
}
/* -------------------------------------------------- 
   footer
-----------------------------------------------------*/
footer{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    align-items: center;   /* requirement 5 */
}
.footer_info{
    padding:.3em;
    font-size:1.1em;
}

@media (max-width: 700px) {
    #main_content{
        -webkit-flex-flow: column wrap;
        -ms-flex-flow: column wrap;
        flex-flow: column wrap;
    }

    aside .links{
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .links li {
        margin: auto .3em auto;   /* requirement 6 */
    }

    footer{
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        align-items: center;
    }
}
