/* Window Width Dependent Layout */

@media screen and (min-width: 1200px)
{ 
    #LeftColumn
    {
        width: 24%;
    }

    #RightColumn
    {
        width: 76%;
    }
    
    #LargeContent 
    {
        display: inline-block;
        float: left;
        width: 60%;
    }
    
    #QuickStats
    {
        display: inline-block;
        float: left;
        width: 40%;
    }
    
    .SmallContent
    {
        display: inline-block;
        float: left;
        width: 50%;
    }
    
    #QuickLinks
    {
        display: inline-block;
        float: left;
        width: 100%;
    }

    .contentColumnLinks {
        width: 48%;
    }
}

@media screen and (max-width: 1199px) and (min-width: 980px)
{
    #LeftColumn
    {
        width: 30%;
    }

    #RightColumn
    {
        width: 70%;
    }
    
    #QuickStats
    {
        display: inline-block;
        float: left;
        width: 42%;
    }
    
    .SmallContent
    {
        display: inline-block;
        float: left;
        width: 58%;
    }
    
    #QuickLinks
    {
        display: inline-block;
        float: left;
        width: 42%;
    }
    
    /* Override the stats to make sure the fit in the smaller area. */
    
    div.contentBoxQuickStats h4.title 
    {
        padding: 2px 12px 1px 14px;
    }

    div.contentBoxQuickStats div.stat 
    {
        padding: 0 3px;
        margin: 1px;
    }
    
    div.contentBoxQuickStats div.stat div
    {
        padding: 3px;
    }
    
    #Chart2Pie {
        width: 95%;
    }

    .contentColumnLinks {
        width: 100%;
    }
}

@media screen and (max-width: 979px) and (min-width: 768px)
{
    #LeftColumn
    {
        width: 100%;
    }

    #RightColumn
    {
        width: 100%;
    }
    
    #QuickStats
    {
        width: 100%;
    }
    
    .contentColumnStats {
        float: left;
        display: inline-block;
        width: 50%;
    }

    .contentColumnLinks {
        width: 100%;
    }
}

@media screen and (max-width: 767px) 
{
    #LeftColumn
    {
        width: 100%;
    }

    #RightColumn
    {
        width: 100%;
    }

    .contentColumnLinks {
        width: 100%;
    }
 }