/* Mostly portable, basic flexible box model. We need to mix the old
deprecated methods with the new standard methods to get reasonable
cross-browser support. I've only tested this on latest stable Chrome,
Firefox, and iOS. */

.display-flex {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.flex-align-center {
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-box-align: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center;
}

.flex-row {
    -ms-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.flex-row-reverse {
    -ms-box-orient: horizontal;
    -ms-box-direction: reverse;
    -moz-box-orient: horizontal;
    -moz-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.flex-column {
    -ms-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.flex {
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}