/**
  Grid framework 1.0
  GGD Amsterdam
  2014
  
  .container_12         :: Het grid sluit naadloos aan elkaar
  .container_12_margin  :: Het grid heeft tussen de kolommen een margin
**/

/*******************************************/
/***      GRID 12 :: WITHOUT MARGIN      ***/
/*******************************************/

.container_12 {
  width: 960px;
  overflow: hidden;
  clear: both;
}

.grid {
  display: inline;
  float: left;
  position: relative;
  overflow: hidden;
}

.grid_12 { width: 960px; }
.grid_11 { width: 880px; }
.grid_10 { width: 800px; }
.grid_9 { width: 720px; }
.grid_8 { width: 640px; }
.grid_7 { width: 560px; }
.grid_6 { width: 480px; }
.grid_5 { width: 400px; }
.grid_4 { width: 320px; }
.grid_3 { width: 240px; }
.grid_2 { width: 160px; }
.grid_1 { width: 80px; }

/*******************************************/
/***       GRID 12 :: WITH MARGIN        ***/
/*******************************************/

.container_12_margin {
  width: 950px;
  overflow: hidden;
  clear: both;
}

.container_12_margin .grid_1,
.container_12_margin .grid_2,
.container_12_margin .grid_3,
.container_12_margin .grid_4,
.container_12_margin .grid_5,
.container_12_margin .grid_6,
.container_12_margin .grid_7,
.container_12_margin .grid_8,
.container_12_margin .grid_9,
.container_12_margin .grid_10,
.container_12_margin .grid_11,
.container_12_margin .grid_12 {
  margin-right:10px;
}

.container_12_margin .grid_12 { width: 950px; }
.container_12_margin .grid_11 { width: 870px; }
.container_12_margin .grid_10 { width: 790px; }
.container_12_margin .grid_9 { width: 710px; }
.container_12_margin .grid_8 { width: 630px; }
.container_12_margin .grid_7 { width: 550px; }
.container_12_margin .grid_6 { width: 470px; }
.container_12_margin .grid_5 { width: 390px; }
.container_12_margin .grid_4 { width: 310px; }
.container_12_margin .grid_3 { width: 230px; }
.container_12_margin .grid_2 { width: 150px; }
.container_12_margin .grid_1 { width: 70px; }

.container_12_margin .grid_12,
.container_12_margin .grid.last { margin-right: 0px; }


/*******************************************/
/***         GRID 12 :: GENERAL          ***/
/*******************************************/

.clear { clear: both; }

.margin_top { margin-top: 10px; } /* JEJG */
.margin_top_5 { margin-top: 5px; }
.margin_top_10 { margin-top: 10px; }
.margin_top_15 { margin-top: 15px; }
.margin_top_20 { margin-top: 20px; }
.margin_top_40 { margin-top: 40px; }
.margin_top_50 { margin-top: 50px; }
.margin_top_90 { margin-top: 90px; }

.margin_bottom { margin-bottom: 10px; } /* JEJG */
.margin_bottom_5 { margin-bottom: 5px; }
.margin_bottom_10 { margin-bottom: 10px; }
.margin_bottom_15 { margin-bottom: 15px; }
.margin_bottom_20 { margin-bottom: 20px; }
.margin_bottom_50 { margin-bottom: 50px; }
.margin_bottom_90 { margin-bottom: 90px; }
.margin_left_10 { margin-left: 10px; }
.margin_left_20 { margin-left: 20px; }

.margin_top { margin-top: 10px; } /* JEJG */

.padding_left_10 { padding-left: 10px; }


.padding_top_5 { padding-top: 5px; }
.padding_top_10 { padding-top: 10px; }
.padding_top_15 { padding-top: 15px; }
.padding_top_20 { padding-top: 20px; }
.padding_top_50 { padding-top: 50px; }
.padding_top_90 { padding-top: 90px; }

.padding_bottom { padding-bottom: 10px; } /* JEJG */
.padding_bottom_5 { padding-bottom: 5px; }
.padding_bottom_10 { padding-bottom: 10px; }
.padding_bottom_15 { padding-bottom: 15px; }
.padding_bottom_20 { padding-bottom: 20px; }
.padding_bottom_50 { padding-bottom: 50px; }
.padding_bottom_90 { padding-bottom: 90px; }


