/***************************************
Table of Contents:
[1.0] Layout
[2.0] Text
[3.0] Utilities
***************************************/


html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

html, body { height: 100%; }

label, input, textarea {
    display: block;

    /* iOS adds rounding and inner shadow */
    border-radius: 0;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

input, textarea {
  width: 100%;
  padding: 10px;
}

textarea {
    min-width: 100%;
    max-width: 100%;
}

/***************************************
[1.0] Layout
***************************************/

/* TODO: Add a note about the grid system. */

.layout-row {
    margin: 0 auto;
    max-width: 960px;
}

.layout-column {
    margin: 0 auto;
    max-width: 100%;
}

@media (min-width: 600px) {
    .layout-row { display: flex; }

    .layout-column {
        margin: 0 5px;
        padding: 0 5px;
        flex-basis: auto;
    }

    .columns-flow { flex-flow: wrap; }

    /* TODO: Add a note about this. */
    .flip-columns { flex-direction: row-reverse; }

    /* TODO: Add a note about this. */
    .size-flex { flex: 1; }

    /* v-center = align-items: center; */
}

/*
full width: 960px
number of columns: 12
column size: 960px / 12 = 80px
column margin: 5 px (left and right)
*/

.layout-row.size-1 { max-width: 80px; }
.layout-row.size-2 { max-width: 160px; }
.layout-row.size-3 { max-width: 240px; }
.layout-row.size-4 { max-width: 320px; }
.layout-row.size-5 { max-width: 400px; }
.layout-row.size-6 { max-width: 480px; }
.layout-row.size-7 { max-width: 560px; }
.layout-row.size-8 { max-width: 640px; }
.layout-row.size-9 { max-width: 720px; }
.layout-row.size-10 { max-width: 800px; }
.layout-row.size-11 { max-width: 880px; }
.layout-row.size-12 { max-width: 960px; }

.layout-column.size-1 { width: 70px; }
.layout-column.size-2 { width: 150px; }
.layout-column.size-3 { width: 230px; }
.layout-column.size-4 { width: 310px; }
.layout-column.size-5 { width: 390px; }
.layout-column.size-6 { width: 470px; }
.layout-column.size-7 { width: 550px; }
.layout-column.size-8 { width: 630px; }
.layout-column.size-9 { width: 710px; }
.layout-column.size-10 { width: 790px; }
.layout-column.size-11 { width: 870px; }
.layout-column.size-12 { width: 950px; }
  
.size-fit {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/***************************************
[2.0] Text
***************************************/

.text-bold { font-weight: bold; }
.text-same-line { white-space: nowrap; }

/***************************************
[3.0] Utilities
***************************************/

.util-inline-block {
    display: inline-block;
}