/**
 * Layout styling
 *
 * @project Paterson James
 * @package Paterson James\Theme\CSS
 * @version 1.0.0
 * @since 1.0.0
 * @author Chris Tyler
 * @copyright 2014
 * @license Proprietary
 */

/**
 * -------------------------
 * @section Layout
 * Typical group:
 *      .container
 *          .row
 *              .col-3 .tablet-6 phone-12
 * -------------------------
 */

/**
 * @subsection Containers
 */

.container {
    display:block;
    margin-left:auto;
    margin-right:auto;
    max-width:1200px;
    width:100%;
}

/**
 * @subsection Row
 */

.row {
    margin-left:-20px;
    margin-right:-20px;
}

/**
 * @subsection Columns
 * Each row must be 12 or under (i.e. col-6 + col-6)
 */

*[class*="col-"] {
    box-sizing:border-box;
    float:left;
    min-height:1px;
    padding-left:20px;
    padding-right:20px;
}

/**
 * @subsection Column Widths
 */

.col-1 { width:8.333333333333333%; }
.col-2 { width:16.66666666666667%; }
.col-3 { width:25%; }
.col-4 { width:33.33333333333333%; }
.col-5 { width:41.66666666666667%; }
.col-6 { width:50%; }
.col-7 { width:58.33333333333333%; }
.col-8 { width:66.66666666666667%; }
.col-9 { width:75%; }
.col-10 { width:83.33333333333333%; }
.col-11 { width:91.66666666666667%; }
.col-12 { width:100%; }

/**
 * @subsection Offsets
 */

.offset-0 { margin-left:0; }
.offset-1 { margin-left:8.333333333333333%; }
.offset-2 { margin-left:16.66666666666667%; }
.offset-3 { margin-left:25%; }
.offset-4 { margin-left:33.33333333333333%; }
.offset-5 { margin-left:41.66666666666667%; }
.offset-6 { margin-left:50%; }
.offset-7 { margin-left:58.33333333333333%; }
.offset-8 { margin-left:66.66666666666667%; }
.offset-9 { margin-left:75%; }
.offset-10 { margin-left:83.33333333333333%; }
.offset-11 { margin-left:91.66666666666667%; }
.offset-12 { margin-left:100%; }

/**
 * @subsection Visibility
 */

.visible { display:block !important; }
.hidden { display:none !important; }

/**
 * @subsection Vertical Align
 */

.row-center {
    display:table;
    height:100%;
    width:100%;
}
.col-bottom,
.col-center,
.col-top {
    display:table-cell;
    float:none;
}
.col-bottom { vertical-align:bottom; }
.col-center { vertical-align:middle; }
.col-top { vertical-align:top; }
.col-none {
    display:block;
    float:left;
}

/**
 * Same-Height Columns
 *
 * Applied only to > 768px
 */

@media (min-width: 769px) {
    .row-height {
        display:table;
    }
    .col-height {
        float:none;
        display:table-cell;
        vertical-align:top;
    }
}

/**
 * @subsection Tablet
 */

@media (max-width: 768px) {
    /* Column Widths */
    .tablet-col-1 { width:8.333333333333333%; }
    .tablet-col-2 { width:16.66666666666667%; }
    .tablet-col-3 { width:25%; }
    .tablet-col-4 { width:33.33333333333333%; }
    .tablet-col-5 { width:41.66666666666667%; }
    .tablet-col-6 { width:50%; }
    .tablet-col-7 { width:58.33333333333333%; }
    .tablet-col-8 { width:66.66666666666667%; }
    .tablet-col-9 { width:75%; }
    .tablet-col-10 { width:83.33333333333333%; }
    .tablet-col-11 { width:91.66666666666667%; }
    .tablet-col-12 { width:100%; }

    /* Offsets */
    .tablet-offset-0 { margin-left:0; }
    .tablet-offset-1 { margin-left:8.333333333333333%; }
    .tablet-offset-2 { margin-left:16.66666666666667%; }
    .tablet-offset-3 { margin-left:25%; }
    .tablet-offset-4 { margin-left:33.33333333333333%; }
    .tablet-offset-5 { margin-left:41.66666666666667%; }
    .tablet-offset-6 { margin-left:50%; }
    .tablet-offset-7 { margin-left:58.33333333333333%; }
    .tablet-offset-8 { margin-left:66.66666666666667%; }
    .tablet-offset-9 { margin-left:75%; }
    .tablet-offset-10 { margin-left:83.33333333333333%; }
    .tablet-offset-11 { margin-left:91.66666666666667%; }
    .tablet-offset-12 { margin-left:100%; }

    /* Visibility */
    .tablet-visible { display:block !important; }
    .tablet-hidden { display:none !important; }

    /* Vertical Align */
    .tablet-col-bottom,
    .tablet-col-center,
    .tablet-col-top {
        display:table-cell;
        float:none;
    }
    .tablet-col-bottom { vertical-align:bottom; }
    .tablet-col-center { vertical-align:middle; }
    .tablet-col-top { vertical-align:top; }
    .tablet-col-none {
        display:block;
        float:left;
    }
}

/**
 * @subsection Phone
 */

@media (max-width: 480px) {
    /* Column Widths */
    .phone-col-1 { width:8.333333333333333%; }
    .phone-col-2 { width:16.66666666666667%; }
    .phone-col-3 { width:25%; }
    .phone-col-4 { width:33.33333333333333%; }
    .phone-col-5 { width:41.66666666666667%; }
    .phone-col-6 { width:50%; }
    .phone-col-7 { width:58.33333333333333%; }
    .phone-col-8 { width:66.66666666666667%; }
    .phone-col-9 { width:75%; }
    .phone-col-10 { width:83.33333333333333%; }
    .phone-col-11 { width:91.66666666666667%; }
    .phone-col-12 { width:100%; }

    /* Offsets */
    .phone-offset-0 { margin-left:0; }
    .phone-offset-1 { margin-left:8.333333333333333%; }
    .phone-offset-2 { margin-left:16.66666666666667%; }
    .phone-offset-3 { margin-left:25%; }
    .phone-offset-4 { margin-left:33.33333333333333%; }
    .phone-offset-5 { margin-left:41.66666666666667%; }
    .phone-offset-6 { margin-left:50%; }
    .phone-offset-7 { margin-left:58.33333333333333%; }
    .phone-offset-8 { margin-left:66.66666666666667%; }
    .phone-offset-9 { margin-left:75%; }
    .phone-offset-10 { margin-left:83.33333333333333%; }
    .phone-offset-11 { margin-left:91.66666666666667%; }
    .phone-offset-12 { margin-left:100%; }

    /* Visibility */
    .phone-visible { display:block !important; }
    .phone-hidden { display:none !important; }

    /* Vertical Align */
    .phone-col-bottom,
    .phone-col-center,
    .phone-col-top {
        display:table-cell;
        float:none;
    }
    .phone-col-bottom { vertical-align:bottom; }
    .phone-col-center { vertical-align:middle; }
    .phone-col-top { vertical-align:top; }
    .phone-col-none {
        display:block;
        float:left;
    }
}

/**
 * @subsection Print
 */

@media print {
    /* Column Widths */
    .print-col-1 { width:8.333333333333333%; }
    .print-col-2 { width:16.66666666666667%; }
    .print-col-3 { width:25%; }
    .print-col-4 { width:33.33333333333333%; }
    .print-col-5 { width:41.66666666666667%; }
    .print-col-6 { width:50%; }
    .print-col-7 { width:58.33333333333333%; }
    .print-col-8 { width:66.66666666666667%; }
    .print-col-9 { width:75%; }
    .print-col-10 { width:83.33333333333333%; }
    .print-col-11 { width:91.66666666666667%; }
    .print-col-12 { width:100%; }

    /* Offsets */
    .print-offset-0 { margin-left:0; }
    .print-offset-1 { margin-left:8.333333333333333%; }
    .print-offset-2 { margin-left:16.66666666666667%; }
    .print-offset-3 { margin-left:25%; }
    .print-offset-4 { margin-left:33.33333333333333%; }
    .print-offset-5 { margin-left:41.66666666666667%; }
    .print-offset-6 { margin-left:50%; }
    .print-offset-7 { margin-left:58.33333333333333%; }
    .print-offset-8 { margin-left:66.66666666666667%; }
    .print-offset-9 { margin-left:75%; }
    .print-offset-10 { margin-left:83.33333333333333%; }
    .print-offset-11 { margin-left:91.66666666666667%; }
    .print-offset-12 { margin-left:100%; }

    /* Visibility */
    .print-visible { display:block !important; }
    .print-hidden { display:none !important; }
}

/**
 * @subsection Clear
 */

.clear:before,
.clear:after,
.container:before,
.container:after,
.row:before,
.row:after {
    content:'';
    display:table;
}
.clear:after,
.container:after,
.row:after {
    clear:both;
}

/**
 * @subsection Clears
 */

.clear { clear:both; }
.clear-left { clear:left; }
.clear-right { clear:right; }

/**
 * @subsection Floats
 */

.float-none { float:none; }
.float-left { float:left; }
.float-right { float:right; }