#content {
    margin-right: 5%;
    margin-left: 5%;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
    background-color: #F2F2F2;
}

@media only screen
and (max-width: 800px) {
    /* Don't waste screen space on right margin for small windows */
    #content {
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 10px;
        padding-right: 10px;
        
    }
}

/**
 * To get figures to properly center, you'll need to wrap all figures
 * in an outer div, e.g.:
 *     <div class="figure_outer">
 *       <div class="figure_inner">
 *         <img src="figure1.png"/>
 *         <p> Figure 1 </p>
 *       </div>
 *     </div>
 *  From: http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div
 **/
.figure_outer {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}
.figure_inner{
    display: inline-block;
    max-width: 500px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: white;
}

.figure_outer_big{
    width: 100%;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}
.figure_inner_big{
    display: inline-block;
    max-width: 900px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: white;
}

.sec-title {
    margin-top: 40px;
    margin-bottom: 10px;
}

.authors {
    /* Empty! */
}

.small {
    font-size: 0.85em;
}

/**
 * Typically used to highlight a reference link that the user has
 * clicked.
 **/
a:target {
    background-color: #FFE7A3; /*#FFFFCC;*/
    font-weight: bold;
}