﻿/* default settings */
body 
    {
        font-size:14px;
        margin:0px 0px 0px 0px;
        color:#EEEEEE;
        width:auto;
        min-width:360px;
    }
body.main, div.main
    {
        /* background-color:#547484; */
        background-position:center;
        background-repeat:repeat-y;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: 100%;
        min-width:700px;
    }
body.projects
    {
        /* background-color:#547484; */
        background-position:center;
        background-repeat:repeat-y;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: 100%;
        
    }
div.content_center, div.content_projects_center, div.content_projects_mini
{
    margin-left:auto;
    margin-right:auto;
    padding-top:5px;
    border:0px dashed pink;
    min-width:320px;
}
div.article-block, h4.article-block
{
    width:85%;
    display:block;
    line-height: 1.5;
    margin-left:auto;
    margin-right:auto;
    /*border:1px dashed red;*/
}
div.article-3col
    {
        display:inline-block;   
        text-align:center;
        line-height:1.5;
        color:Black;
        vertical-align:top;
    }
div.maintain_bottom 
{
    position:fixed;
    bottom:0px;
    padding-bottom:6px;
    padding-top:6px;
    font-size:10px;
    display:block;
    color:#333333;
    background-color:white;
    width:100%;
}

div.projectsubheaders 
{
    color:White;font-family:inherit;position:absolute;
    font-size:85%;
}

@media (min-width:320px) {
    body {
    font-size: 36px;
    font-family:Arial;
    }
    /*td.projects
    {
        width:0%;
    }*/
    div.content_center
    {
        margin-top:20%;
        width:85%;
    }
    div.content_right 
    {
        display:none;
    }
    div.article-3col
    {
        width:85%;
        margin-top:10px;
    }
    div.bottom-gap
    {
        margin-bottom:30px;
    }
    body.main 
    {
        background-image:url("../img/main-360px.png");
        min-width:360px;
    }
    body.projects 
    {
        background-image:url("../img/projects-360px.png"); 
    }
    body.info
    {
        background-image:url("../img/info-360px.png"); 
    }
    /* div that crops images from 100% to certain size */
    div.rhr
    {
        width:95%;
        display:block;
        overflow:hidden;
        margin:0px auto 0px auto;
    }
    /* image resizing behaves differently */
    img.projects-left
    {
        width:95%;
        display:block;
    }
    img.projects-right
    {
        width:95%;
        display:block;
    }
    img.projects-bottom
    {
        width:95%;
        display:block;
    }
    img.officelogov
    {
        display:none;
    }
    div.conceptsummary
    {
        width:90%;
        display:block;
        font-size:16px;
        padding:7px;
    }
    div.conceptsummary_bottom
    {
        width:92%;
        padding:10px;
    }
    
    div.article-left, div.article-center
    {
        width:90%;
        display:block;
        margin:0px auto 10px auto;
        text-align:justify;
    }
    div.content_projects_center
    {
        display:none;
    }
    div.content_projects_mini
    {
        display:block;
        width:90%;
        margin: 20% auto 0px auto;
        text-align:center;
    }
}

@media (min-width:900px) {
    body {
    font-size: 20px;
    font-family:Arial;
    }
    body.projects 
    {
        background-image:url("../img/projects-360px.png");
    }
    body.info 
    {
        background-image:url("../img/info-360px.png");
    }

    div.content_center
    {
        /*margin-top:11%;*/
        width:80%;
        font-size:20px;
    }
    div.article-block, h4.article-block 
    {
        width:90%;
    }
    div.bottom-gap
    {
        margin-bottom:30px;
    }
    img.officelogov
    {
        display:inline-block;
        height:inherit;
        max-height:280px;
    }
    img.projects-left, div.projects-left
    {
        width:90%;
        display:block;
    }
    img.projects-right
    {
        width:90%;
        display:block;
    }
    img.projects-bottom
    {
        width:90%;
        display:block;
    }
    
    div.conceptsummary
    {
        width:85.5%;
        display:block;
        padding:10px;
    }
    div.conceptsummary_bottom
    {
        width:87%;
        padding:10px;
    }
    
}

@media (min-width:1100px) 
{
    div.content_projects_center
    {
        width:80%;
        /*font-size:80%; */
        display:block;
        margin-top:45px;
    } 
    div.article-3col
    {
        width:32%;
        margin-top:5px;
        margin-bottom:10px;
    }
    div.content_projects_mini
    {
        display:none;
    } 
    
}

@media (min-width:1250px) {
    body {
    /* Never get larger than this */
    font-size: 24px;
    font-family:Arial;
    }
     
    body.projects 
    {
        background-image:url("../img/projects.png"); 
    }
    body.info 
    {
        background-image:url("../img/info.png");
    }
    
    div.content_center, div.content_projects_center
    {
        margin-top:40px;
        width:70%;
    }
    div.projectsubheaders 
    {
        font-size:75%;
    }
    
    div.content_right 
    {
        display:inherit;
    }
    div.article-left
    {
        width:58%;
        display:inline-block;
        float:left;
        margin-left:5%;
        margin-right:20px;
        text-align:justify;
    }
    
    div.bottom-gap
    {
        margin-bottom:20px;
        display:block;
    }
    div.main 
    {
        color:White;
    }
    
    /* div that crops images from 100% to certain size */
    div.rhr
    {
        width:34.5%;
        display:inline-block;
        margin-left:4px;
        float:left;
        overflow:hidden;
        /* text-indent:-50%; */
        /*border:1px dashed red;*/
    }
    
    img.projects-left
    {
        width:60%;
        display:inline-block;
        float:left;
        margin-left:20px;
    }    
    img.projects-right
    {
        width:34.5%;
        float:left;
        margin-left:4px;
        display:inline-block;
    }
    img.projects-bottom
    {
        width:95%;
        display:block;
        /*margin-left:5px;*/
    }
    div.conceptsummary
    {
        width:32.5%;
        float:left;
        font-size:16px;
        margin:4px;
        padding:10px;
    }
    div.conceptsummary_bottom
    {
        width:93.5%;
        padding:10px;
        display:block;
    }
}

@media (min-width:1400px) 
{
    div.projectsubheaders 
    {
        font-size:82%;
    }   
}

@media (min-width:1600px) 
{
    div.projectsubheaders 
    {
        font-size:90%;
    }
    div.bottom-gap
    {
        display:none;
    }
    div.conceptsummary
    {
        width:32.5%;
        float:left;
        font-size:24px;
        margin:4px;
        padding:10px;
    }
    /*div.conceptsummary_bottom
    {
        width:93.5%;
        padding:10px;
    }*/
    img.officelogov
    {
        display:inline-block;
        height:inherit;
        max-height:500px;
    }
    img.projects-left, div.projects-left
    {
        width:60%;
        display:inline-block;
        float:left;
        margin-left:33px;
    }    
    /*img.projects-bottom
    {
        width:95%;
        display:block;
        margin-left:5px;
    }*/
}

    
/* General settings */
a 
{
    text-decoration:none;
    color:inherit;
    height:inherit;
}


div.content_right 
{
    float:right;
}

div.conceptsummary
{
    background-color:Gray;
    color:White;
    text-align:justify;
}
div.conceptsummary_bottom
{
    text-align:justify;
    display:block;
    background-color:Gray;
    color:White;
}

h3.projects 
{
    color:Gray;
    border: 0px dashed red;
    width:95%;
}
img.projects
{
    width:95%;
    border: 0px solid white;
}
