/* These are the generic styles for the non-home pages */

.MainContentContainer {
    font-size: 14px;
    line-height: 130%;
    width: 98%;
    max-width: 980px;
    border-top: 1px solid;
    border-color: #a0aaac;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left:15px;
    padding-right:25px;
    margin-left: auto; margin-right: auto; 
}

.MainContentContainer a {
 
    text-decoration:underline;
}

.MainContentContainer a:hover {
    text-decoration:none;
}

/* Pre June 2018
.PageTitle {
    font-size:28px;  
    text-align:center;
    color:#2c3c49;
    line-height: 110%;
    text-transform:uppercase;
}
*/
.PageTitle {
    font-size:34px; 
    font-family:'Source Sans Pro', sans-serif;
    text-align:center;
    color:#07272D;
    line-height: 110%;
    text-transform:uppercase;
}

.PageTitleContainer {
    margin-top:-10px;
    width:100%;
    max-width:850px;
    margin-left: auto; margin-right: auto; 
    text-align:center;
    margin-bottom:35px;
}

/* smartphones */
@media only screen and (max-width: 480px) 
{
    .MainContentContainer {padding-top: 15px; line-height: 140%; padding-left:10px; border-top: 0px; max-width:none; width: 96%;}
    .PageTitle { font-size: 22px; text-align: left;  margin-bottom:25px; max-width:none;text-transform:uppercase;}
    .PageTitleContainer { margin-top:0px;}


    /* Since the content of pages (minus the top menu part below the header) is going to be off-white, just
        set the body of the page to be off-white. The controls with pictures (which nearly all have rounded corners)
        in them that are used by several pages have off-white corners; by changing the entire body color to be
        offwhite for mobile pages, this takes care of having to A) have a div whose sole job is to color the
        background off-white and B) having to fix small spots where the white comes through over/outside of 
        comp

    */
    body {background-color:#fafafa;}
            
}