/*!
 * Utilities v1.0.0 - 26.05.2015 (c) artif GmbH & Co. KG
 */



/*
 * LAYOUT SYSTEM
 *
 * Every area need to be declared as a container. This class defines the all-over width and positioning of the website/area with respect to the viewport.
 * A container may hold an arbitrary number of rows, minimum 1.
 * Inside a row an arbitrary number of columns may be used.
 * The width of each column is defined by additional width-classes (w-xyz) that define the needed dimensions according to the project specifications.
 *
 * Example:
 * <div class="container">
 *   <div class="row row-gutter">
 *     <div class="col w50p w100p-m">
 *     </div>
 *     <div class="col w50p w100p-m">
 *     </div>
 *   </div>
 * </div>
 *
 * This creates two 50% columns with a gutter which change in to two 100% columns if the associated media query (medium) is triggered.
 *
 * The following definitions determine the basic grid system and are not to be touched.
 * Place your own values for container (i.e. width) and the width-classes in file Styles.css -> See example there.
 */

/* Container */
.container {
	margin: 0 auto;
	padding: 0;
}

.container:before,
.container:after {
	content: " "; display: table;
}

.container:after {
	clear: both;
}


/**
 * Row component
 *
 * Wraps and clearfix'es the column elements.
 */
.row {
	margin: 0;
	padding: 0;
}

.row:before,
.row:after {
	content: " ";
	display: table;
}

.row:after {
	clear: both;
}

/* Row with gutter */
.row--gutter {
	margin-left: -1.414em;
}

.row--gutter > .col {
	padding-left: 1.414em;
}

/* Row with inline columns - they're best used with lists */
.row--inline {
	list-style: none;
}



/*
 * Column
 *
 * The column class creates floated columns. To control/define the width of columns,
 * use custom width classes (.w[number][px, p]) for proper segmenting. Their use
 * is defined and explained in the Styles.css.
 */
.col {
	position: relative;
	min-height: 1em;
	padding: 0;
	float: left;
	width: 100%;
}

/* Columns with inline-block */
.col--inline {
	display: inline-block;
	float: none;
	vertical-align: top;
	width: auto;
}



/*
 * CLEARFIX
 * Source: http://nicolasgallagher.com/micro-clearfix-hack/
 */
.cf:before,
.cf:after {
	content: " ";
	display: table;
}

.cf:after {
	clear: both;
}