/*
 *
 * File: grid.css
 * Author: IQuality
 * Author URI: http://www.iquality.nl
 *
 * Description: This file defines the grid on the website. NOT TO BE MINIMIZED. The grid is a fluid, 10-column 84 pixels grid with gutters of 12 pixels. 
 *
 * Allowed classes:
 * TBD
 */

/*
 *
 * Coding conventions
 *
 *   - No space between attribute/properties
 *   - Indent parents/children using tabs
 *   - place selectors, opening and closing brackets and
 *     property-value pairs on their own, separate lines
 *   - order the properties alphabetically
 *   - use shorthand for border, padding, margin where possible
 *   - use rgb(a) colors where possible for easy rgba-implementations
 *   - avoid use of !important
 *
 */

.page {
	width: 1000px;
	margin: 0 auto;
	position: relative;
}

.container { 
	width: 940px;
	padding: 0 30px;
	position: relative;
}

/*-------------------------------------------------------------------
grid
-------------------------------------------------------------------*/

.grid { 
	list-style-type: none;
	margin: 0;
	padding: 0;
	margin-left: -20px; 	
	*zoom: 1;
}

.grid:before,
.grid:after { 
	display: table;
	content: "";
	clear: both;
}

.grid .grid__item { 
    margin:0 0 0 20px;
    padding: 0;
	/*padding-left: 20px;*/
	float: left;
	min-height: 1px;
	/*-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	*behavior: url(js/boxsizing.htc);/*polyfill for ie7*/
}

/*reversed grid*/
.grid--rev .grid__item { 
	float: right;
}

/*-------------------------------------------------------------------
Equel columns 12 grid
-------------------------------------------------------------------*/
.one .grid__item {width: 100%;}
.two .grid__item { width: 460px;}
.three .grid__item { width: 300px;}
.four .grid__item { width: 220px;}
.six .grid__item { width: 140px;}
.twelve .grid__item { width:60px;}

/*-------------------------------------------------------------------
two columns grid
-------------------------------------------------------------------*/

/*two columns 20-80*/
.two_20_80 .grid__item { width: 140px;}
.two_20_80 .grid__item + .grid__item { width:780px;}
.two_80_20 .grid__item {  width:780px;}
.two_80_20 .grid__item + .grid__item { width: 140px;}

/*two columns 25-75*/
.two_25_75 .grid__item { width: 220px;}
.two_25_75 .grid__item + .grid__item { width: 700px;}
.two_75_25 .grid__item { width: 700px;}
.two_75_25 .grid__item + .grid__item { width: 220px;}

/*two columns 33-66*/
.two_33_66 .grid__item { width: 300px;}
.two_33_66 .grid__item + .grid__item { width: 620px;}
.two_66_33 .grid__item { width: 620px;}
.two_66_33 .grid__item + .grid__item {  width: 300px;}

/*two columns 50-50*/
.two_50_50 .grid__item { width: 460px;}

/*-------------------------------------------------------------------
three columns grid
-------------------------------------------------------------------*/

/*three columns 25-50-25*/
.three_25_50_25 .grid__item { width: 220px;}
.three_25_50_25 .grid__item + .grid__item { width: 460px;}
.three_25_50_25 .grid__item + .grid__item + .grid__item { width: 220px;}

/*three columns 33-33-33*/
.three_33_33_33 .grid__item { width: 300px;}

/*-------------------------------------------------------------------
four columns grid
-------------------------------------------------------------------*/

.four_25_25_25_25 .grid__item { width: 220px;}