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

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

/**
 * The skin for the section object.
 *
 * Usage:
 *
 * <div class="o-section">
 *     <div class="o-section__body"></div>
 * </div>
 */

.o-section__body {
	max-width: 90%;
	padding: 1em 0;
}

@media (min-width: 80em) {
    .o-section__body {
        max-width: 980px;
    }
}

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

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

.o-box {
	padding: 1em;
}

/* ==========================================================================
   #buttons-skin
   ========================================================================== */

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

/**
 * The skin for the button object.
 *
 * Usage:
 *
 * <input class="o-button" type="submit">
 */

.o-button {
	padding: .5em 1em;
	border: 1px solid transparent;	
	border-radius: 3px;
	background-color: #313439;
	color: #fff;
}

	.o-button:hover {
		opacity: .85;
	}

	.o-button:active {
		opacity: 1;
	}

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

/**
 * The skin for the disabled modifier.
 *
 * Usage:
 *
 * <input class="o-button o-button--disabled" type="submit">
 */

 .o-button--disabled,
 .o-button[disabled] {
 	opacity: .65;
 }


/* 
   --primary
   ========================================================================== */

/**
 * The skin for the primary modifier.
 *
 * Usage:
 *
 * <input class="o-button o-button--primary" type="submit">
 */

.o-button--primary {
	background-color: #1c86f2;
}

/* 
   form__item
   ========================================================================== */

/**
 * The skin for the form__item element.
 *
 * Usage:
 *
 * <form class="o-form">
 *     <div class="o-form__item">
 *         <label class="o-form__label">
 *         <input class="o-form__input">
 *     </div>
 * </form>
 */

.o-form__item:not(:last-child) {
	margin-bottom: .5em;
}

/* 
   form__label
   ========================================================================== */

/**
 * The skin for the form__label element.
 *
 * Usage:
 *
 * <form class="o-form">
 *     <div class="o-form__item">
 *         <label class="o-form__label">
 *         <input class="o-form__input">
 *     </div>
 * </form>
 */

.o-form__label {
	margin-bottom: .25em;
}

/* 
   form__input
   ========================================================================== */

/**
 * The skin for the form__input element.
 *
 * Usage:
 *
 * <form class="o-form">
 *     <div class="o-form__item">
 *         <label class="o-form__label">
 *         <input class="o-form__input">
 *     </div>
 * </form>
 */

.o-form__input {
	padding: .5em .6em;	
	border: 1px solid #d4d4d4;	
	border-radius: 3px;
}

	.o-form__input:focus {
		border: 1px solid #1c86f2;
		outline: 0;
		outline: thin dotted \9;
	}

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

/**
 * The skin for the form--inline modifier.
 *
 * Usage:
 *
 * <form class="o-form o-form--inline">
 *     <div class="o-form__item">
 *         <label class="o-form__label">
 *         <input class="o-form__input">
 *     </div>
 * </form>
 */

.o-form--inline .o-form__label {
	margin-bottom: 0;
	width: 15%; 
}
/* ==========================================================================
   #lists-core
   ========================================================================== */

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

/**
 * The skin for the list-stack object.
 *
 * Usage:
 *
 * <ul class="o-list-stack">
 *     <li></li>
 *     <li></li>
 *     <li></li>
 * </ul>
 */

.o-list-stack > li:not(:first-child) {
	padding-top: 1em;
}

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

/**
 * The skin for the list-inline object.
 *
 * Usage:
 *
 * <ul class="o-list-inline">
 *     <li></li>
 *     <li></li>
 *     <li></li>
 * </ul>
 */

.o-list-inline > li:not(:first-child) {
	padding-left: 1em;
}

/* ==========================================================================
   #tables-skin
   ========================================================================== */

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

/**
 * The skin for the table object.
 *
 * 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 th,
.o-table td {
	padding: .5em 1em;
}

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

/**
 * The skin for tha table--rows and table--cells modifier.
 *
 * 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--rows td,
.o-table--cells th,
.o-table--cells td {
	border-color: #e1e1e1;
}

/*
   #table--zebra
   ========================================================================== */

/**
 * The skin for the table--zebra modifier.
 *
 * Usage:
 *
 * <table class="o-table o-table--zebra">
 *     <thead>
 *         <tr>
 *             <th></th>
 *             <th></th>
 *             <th></th>
 *         </tr>
 *     </thead>
 *     <tbody>
 *         <tr>
 *             <td></td>
 *             <td></td>
 *             <td></td>
 *         </tr>
 *     </tbody>
 * </table>
 */

.o-table--zebra tbody > tr:nth-child(even) {
	background-color: #f8f8f8;
}