body {
    margin: 0px 0px 0px 0px;
    background: none;
}


.Content
{
    text-align: left;
}

div.CenterCol
{
    float: left;
    width: 800px;        
    padding: 20px 15px;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

    /* I put this in so that on a page that has no content in the center zones will still show the page structure */
    div.CenterCol div.FullZone {
        min-height: 10px; 
    }

div.FullZone { display: inline-block; width: 100%;  min-width: 100%;
}
        
div.HalfZone
{
    float: left;
    width: 50%;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
    
div.OneQuarterZone
{
    float: left;
    width: 100%;
}
    
div.ThreeQuarterZone
{
    float: left;
    width: 700px;
}
    
    .firstZone
    {
        padding: 0px 20px 0px 0px;
    }
        
    .lastZone
    {
        margin: 0px 0px 0px 0px;
    }


@media (min-width: 768px) and (max-width: 1024px) {

    div.CenterCol {
        width: 75%;
        margin: 0;
    }
}

@media (max-width: 767px) {

    div.CenterCol {
        width: 100%;
        margin: 0;
        padding: 0 2%;
    }

}