/* ==========================================================================
   #base-core
   ========================================================================== */

/*
   #img-fluid
   ========================================================================== */

/**
 * The img-fluid utility is used to make images fluid.
 *
 * Usage:
 *
 * <img class="u-image-fluid">
 */

.u-image-fluid {
    display: block;
    height: auto;
    max-width: 100%;
}

/* ==========================================================================
   #sections-core
   ========================================================================== */

/*
   section
   ========================================================================== */

/**
 * The section object sections off content from the rest of the document.
 *
 * Usage:
 *
 * <div class="o-section">
 *     <div class="o-section__body"></div>
 * </div>
 */

.o-section,
.o-box {
	box-sizing: border-box;
}
	
	.o-section:after,
	.o-box:after {
        display: table;
        content: "";
        clear: both;		
	}
		
		.o-section__body {
			margin: 0 auto;
		}

/*
   box
   ========================================================================== */

/**
 * The box object boxes off content from the rest of the document.
 *
 * Usage:
 *
 * <div class="o-box">
 * </div>
 */

.o-box {
	display: block;
}

	.o-box > :last-child {
		margin-bottom: 0;
	}
/* ==========================================================================
   #buttons-core
   ========================================================================== */

/* 
   button
   ========================================================================== */

/**
 * The button object applies a flat button style to buttons and hyperlinks.
 *
 * Usage:
 *
 * <input class="o-button" type="submit">
 */

.o-button {
	display: inline-block;
	zoom: 1;
	white-space: nowrap;
	vertical-align: middle;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	outline: 0;
}
	
	.o-button::-moz-focus-inner {
		border: 0;
		padding: 0;
	}

/* 
   button--disabled
   ========================================================================== */

/**
 * The button--disabled modifier applies a disabled state to buttons.
 *
 * Usage:
 *
 * <input class="o-button o-button--disabled" type="submit">
 */

 .o-button--disabled,
 .o-button[disabled] {
 	pointer-events: none;
 }

/* ==========================================================================
   #forms-core
   ========================================================================== */

/* 
   form-label
   ========================================================================== */

/**
 * The form-label element changes the margin and display on label controls.
 *
 * Usage:
 *
 * <form class="o-form">
 *     <div class="o-form__item">
 *         <label class="o-form-label"></label>
 *         <input class="o-form-input">
 *     </div>
 * </form>
 */

.o-form__label {
	display: block;
}

/* 
   form-input
   ========================================================================== */

/**
 * The form__input element applies a flat input style to input controls.
 *
 * Usage:
 *
 * <form class="o-form">
 *     <div class="o-form__item">
 *         <label class="o-form__label"></label>
 *         <input class="o-form__input">
 *     </div>
 * </form>
 */

.o-form__input {
	display: inline-block;
	border: 1px solid;
	vertical-align: middle;
	box-sizing: border-box;		
}

/* 
   form--block
   ========================================================================== */

/**
 * The form--block modifier makes all input controls full-width.
 *
 * Usage:
 *
 * <form class="o-form o-form--block">
 *     <div class="o-form__item">
 *         <label class="o-form__label"></label>
 *         <input class="o-form__input">
 *     </div>
 * </form>
 */

.o-form--block .o-form__input {
 	display: block;
 	width: 100%;
 }

 /* 
   form--inline
   ========================================================================== */

/**
 * The form--inline modifier aligns labels and inputs side-by-side.
 *
 * Usage:
 *
 * <form class="o-form o-form--inline">
 *     <div class="o-form__item">
 *         <label class="o-form__label"></label>
 *         <input class="o-form__input">
 *     </div>
 * </form>
 */

.o-form--inline .o-form__label {
	display: inline-block;
}

/*
   #grid
   ========================================================================== */

/**
 * The grid object is used to create a fluid grid.
 *
 * Usage:
 *
 * <div class="o-grid">
 *     <div class="o-grid__item"></div>
 *     <div class="o-grid__item"></div>
 *     <div class="o-grid__item"></div>
 * </div>
 */

.o-grid {
	margin-left: -1.5em;
}

    .o-grid:after {
        display: table;
        content: "";
        clear: both;
    }

		.o-grid__item {
			float: left;
			padding-left: 1.5em;
			box-sizing: border-box;
		}

/*
   #width
   ========================================================================== */

/**
 * The width utility classes set the widths on grid items for normal displays.
 *
 * Usage:
 *
 * <div class="o-grid">
 *     <div class="o-grid__item u-w-1-3"></div>
 *     <div class="o-grid__item u-w-1-3"></div>
 *     <div class="o-grid__item u-w-1-3"></div>
 * </div>
 */

/* Large */

.u-w-1-1    { width: 100%; }
.u-w-1-2    { width: 50%; }
.u-w-1-3    { width: 33.3%; }
.u-w-1-4    { width: 25%; }
.u-w-2-3    { width: 66.6%; }
.u-w-3-4    { width: 75%; }
.u-w-1-5    { width: 20%; }
.u-w-2-5    { width: 40%; }
.u-w-3-5    { width: 60%; }
.u-w-4-5    { width: 80%; }

/* Medium */

@media (max-width: 48em) {
    .u-mw-1-1   { width: 100%; }
    .u-mw-1-2   { width: 50%; }
    .u-mw-1-3   { width: 33.3%; }
    .u-mw-1-4   { width: 25%; }
    .u-mw-2-3   { width: 66.6%; }
    .u-mw-3-4   { width: 75%; }
    .u-mw-hide  { display: none; }
}

/* Small */

@media (max-width: 35.5em) {
    .u-sw-1-1   { width: 100%; }
    .u-sw-1-2   { width: 50%; }
    .u-sw-1-3   { width: 33.3%; }
    .u-sw-1-4   { width: 25%; }
    .u-sw-2-3   { width: 66.6%; }
    .u-sw-3-4   { width: 75%; }
    .u-sw-hide  { display: none; }
}

/* ==========================================================================
   #lists-core
   ========================================================================== */

/*
   list-stack
   ========================================================================== */

/**
 * The list-stack object is used to create vertical lists without bullets or 
 * indentation.
 *
 * Usage:
 *
 * <ul class="o-list-stack">
 *     <li></li>
 *     <li></li>
 *     <li></li>
 * </ul>
 */

.o-list-stack,
.o-list-inline {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

/*
   list-inline
   ========================================================================== */

/**
 * The list-inline object is used to create inline lists without bullets or 
 * indentation.
 *
 * Usage:
 *
 * <ul class="o-list-inline">
 *     <li></li>
 *     <li></li>
 *     <li></li>
 * </ul>
 */

.o-list-inline > li {
	display: inline-block;
}

/* ==========================================================================
   #tables-core
   ========================================================================== */

/* 
   table
   ========================================================================== */

/**
 * The table object applies common table patterns to tables.
 *
 * Usage:
 *
 * <table class="o-table">
 *     <thead>
 *         <tr>
 *             <th></th>
 *             <th></th>
 *             <th></th>
 *         </tr>
 *     </thead>
 *     <tbody>
 *         <tr>
 *             <td></td>
 *             <td></td>
 *             <td></td>
 *         </tr>
 *     </tbody>
 * </table>
 */

.o-table {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
}
	
	.o-table th {
		text-align: left;
	}

/*
   #table--rows
   ========================================================================== */

/**
 * The table--rows modifier applies a thin border above each row.
 *
 * Usage:
 *
 * <table class="o-table o-table--rows">
 *     <thead>
 *         <tr>
 *             <th></th>
 *             <th></th>
 *             <th></th>
 *         </tr>
 *     </thead>
 *     <tbody>
 *         <tr>
 *             <td></td>
 *             <td></td>
 *             <td></td>
 *         </tr>
 *     </tbody>
 * </table>
 */

.o-table--rows td {
 	border-top: 1px solid;
}

/*
   #table--cells
   ========================================================================== */

/**
 * The table--cells modifier applies a thin border around each cell.
 *
 * Usage:
 *
 * <table class="o-table o-table--cells">
 *     <thead>
 *         <tr>
 *             <th></th>
 *             <th></th>
 *             <th></th>
 *         </tr>
 *     </thead>
 *     <tbody>
 *         <tr>
 *             <td></td>
 *             <td></td>
 *             <td></td>
 *         </tr>
 *     </tbody>
 * </table>
 */

.o-table--cells th,
.o-table--cells td {
	border: 1px solid;
}