/**
  
  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
  
**/


HTML, BODY {
  margin: 0px;
  padding: 0px;
}

.container-12,
.container-12-margin,
.container-12-padding {
  margin: 0px auto;
  clear: both;
}

.grid {
  display: inline;
  position: relative;
  float: left;
  box-sizing: border-box;
}


/*******************************************/
/***      GRID 12 :: WITHOUT MARGIN      ***/
/*******************************************/

.grid_1, .grid-1 { width: 80px; }
.grid_2, .grid-2 { width: 160px; }
.grid_3, .grid-3 { width: 240px; }
.grid_4, .grid-4 { width: 320px; }
.grid_5, .grid-5 { width: 400px; }
.grid_6, .grid-6 { width: 480px; }
.grid_7, .grid-7 { width: 560px; }
.grid_8, .grid-8 { width: 640px; }
.grid_9, .grid-9 { width: 720px; }
.grid_10, .grid-10 { width: 800px; }
.grid_11, .grid-11 { width: 880px; }
.grid_12, .grid-12 { width: 960px; }


/*******************************************/
/***       GRID 12 :: WITH MARGIN        ***/
/*******************************************/

.container_12_margin .grid_1, .container-12-margin .grid-1,
.container_12_margin .grid_2, .container-12-margin .grid-2,
.container_12_margin .grid_3, .container-12-margin .grid-3,
.container_12_margin .grid_4, .container-12-margin .grid-4,
.container_12_margin .grid_5, .container-12-margin .grid-5,
.container_12_margin .grid_6, .container-12-margin .grid-6,
.container_12_margin .grid_7, .container-12-margin .grid-7,
.container_12_margin .grid_8, .container-12-margin .grid-8,
.container_12_margin .grid_9, .container-12-margin .grid-9,
.container_12_margin .grid_10, .container-12-margin .grid-10,
.container_12_margin .grid_11, .container-12-margin .grid-11,
.container_12_margin .grid_12, .container-12-margin .grid-12 {
  margin-left: 10px;
  margin-right: 10px;
}

.container_12_margin .grid_1, .container-12-margin .grid-1 { width: 60px; }
.container_12_margin .grid_2, .container-12-margin .grid-2 { width: 140px; }
.container_12_margin .grid_3, .container-12-margin .grid-3 { width: 220px; }
.container_12_margin .grid_4, .container-12-margin .grid-4 { width: 300px; }
.container_12_margin .grid_5, .container-12-margin .grid-5 { width: 380px; }
.container_12_margin .grid_6, .container-12-margin .grid-6 { width: 460px; }
.container_12_margin .grid_7, .container-12-margin .grid-7 { width: 540px; }
.container_12_margin .grid_8, .container-12-margin .grid-8 { width: 620px; }
.container_12_margin .grid_9, .container-12-margin .grid-9 { width: 700px; }
.container_12_margin .grid_10, .container-12-margin .grid-10 { width: 780px; }
.container_12_margin .grid_11, .container-12-margin .grid-11 { width: 860px; }
.container_12_margin .grid_12, .container-12-margin .grid-12 { width: 940px; }



/*******************************************/
/***         GRID 12 :: GENERAL          ***/
/*******************************************/

.push_1, .push-1 { left: 80px; }
.push_2, .push-2 { left: 160px; }
.push_3, .push-3 { left: 240px; }
.push_4, .push-4 { left: 320px; }
.push_5, .push-5 { left: 400px; }
.push_6, .push-6 { left: 480px; }
.push_7, .push-7 { left: 560px; }
.push_8, .push-8 { left: 640px; }
.push_9, .push-9 { left: 720px; }
.push_10, .push-10 { left: 800px; }
.push_11, .push-11 { left: 880px; }

.pull_1, .pull-1 { left: -80px; }
.pull_2, .pull-2 { left: -160px; }
.pull_3, .pull-3 { left: -240px; }
.pull_4, .pull-4 { left: -320px; }
.pull_5, .pull-5 { left: -400px; }
.pull_6, .pull-6 { left: -480px; }
.pull_7, .pull-7 { left: -560px; }
.pull_8, .pull-8 { left: -640px; }
.pull_9, .pull-9 { left: -720px; }
.pull_10, .pull-10 { left: -800px; }
.pull_11, .pull-11 { left: -880px; }


.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.margin_top_5, .margin-top-5 { margin-top: 5px; }
.margin_top_10, .margin-top-10 { margin-top: 10px; }
.margin_top_15, .margin-top-15 { margin-top: 15px; }
.margin_top_20, .margin-top-20 { margin-top: 20px; }

.margin_bottom_5, .margin-bottom-5 { margin-bottom: 5px; }
.margin_bottom_10, .margin-bottom-10 { margin-bottom: 10px; }
.margin_bottom_15, .margin-bottom-15 { margin-bottom: 15px; }
.margin_bottom_20, .margin-bottom-20 { margin-bottom: 20px; }