/**********************************************************************
    scaffolding.css v0.3
**********************************************************************/

.row
{
    clear: both;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1em;
    padding-right: 1em;
    overflow: hidden;
}

.row .row,
.row.no-padding
{
    padding: 0;
}

.pull-left
{
    float: left;
}

.pull-right
{
    float: right;
}

.col1of1
{
    max-width: 700px;
    border-bottom: solid 1px #ccc;
    margin-left: auto;
    margin-right: auto;
}

.col1of1 h1
{
    border-bottom: solid 1px #ccc;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.col1of2
{
    width: 48%;
    float: left;
}

.col2of2
{
    width: 48%;
    float: right;
}

.col1of3
{
    width: 30%;
    float: left;
    margin-right: 4%;
}

.col2of3
{
    width: 30%;
    float: left;
}

.col1-2of3
{
    width: 65%;
    float: left;
}

.col2-3of3
{
    width: 65%;
    float: right;
}

.col3of3
{
    width: 30%;
    float: right;
}

.col1of4, .col2of4
{
    float: left;
    width: 22%;
    margin-right: 3%;
}

.col3of4
{
    float: left;
    width: 22%;
}

.col4of4
{
    float: right;
    width: 22%;
}

.col1of5, .col4of5
{
    width: 18%;
    float: left;
    margin-right: 3%;
}

.col2of5, .col3of5
{
    width: 18%;
    float: left;
    margin-right: 2%;
}

.col5of5
{
    width: 18%;
    float: right;
}

@media only screen 
and (max-width : 600px)
{
    .pull-left,
    .pull-right
    {
        float: none;
        clear: both;
    }
    
    .col1of2, .col2of2,
    .col1of3, .col2of3, .col1-2of3, .col2-3of3, .col3of3,
    .col1of4, .col2of4, .col3of4, .col4of4,
    .col1of5, .col2of5, .col3of5, .col4of5, .col5of5
    {
        float: none;
        clear: both;
        width: 100%;
        margin: 0;
    }
    
    .hidden-sm { display: none; }
    
    .center-sm { text-align: center; }
}

article.responsive
{
    float: left;
    width: 65%;
}

aside.responsive
{
    float: right;
    width: 30%;
}

@media only screen 
and (max-width : 800px)
{
    article, aside
    {
        float: none;
        clear: both;
        width: 100%;
    }
}

img.responsive
{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}