/*--------------------------------------------------------

Author:   Robert Piirainen
Twitter:  @robertpiira
Created:  2011
Updated:  2012/2/17

--------------------------------------------------------*/




/* INGRID
   Here are the building blocks of Ingrid
--------------------------------------------------------*/

.grid {
  margin: 0 0 20px; /* Can be set in em, % or px */
  padding: 0; /* Remove if you already reset paddings */
  clear: both;
  list-style: none; /* Works with ul & ol */
  letter-spacing: -0.34em;/*letter-spacing: -0.31em;*/
  word-spacing: -0.4em;
}

:root .grid {
  font-size: 0.1px;
  letter-spacing: -2px;
  word-spacing: -1px;
}

.unit,
.field-unit {
  margin: 0; /* Remove if you already reset margins */
  display: inline-block;
  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
  /display: inline;
  /zoom: 1;
  font-size: 0.875rem;
}

.ingrid {
  margin: 0 -10px 20px;
  letter-spacing: -0.34em;/*letter-spacing: -0.31em;*/
  word-spacing: -0.4em;
}

.ingrid2 {
  margin: 0 -20px 20px;
  letter-spacing: -0.34em;/*letter-spacing: -0.31em;*/
  word-spacing: -0.4em;
}

:root .ingrid {
  font-size: 0.1px;
  letter-spacing: -1px;
  word-spacing: -1px;
}

#wrapper .field-unit  {
  display: block;
  width: 100%;
}




/* GUTTERS
   Gutter set directly on units (thanks border-box)
--------------------------------------------------------*/

.unit,
.field-unit {
  padding: 10px; /* Can be set in em, % or px (must match .ingrid negative margins) */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /**behavior: url(/css/boxsizing.htc);*/
}

.bd-box {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /**behavior: url(/css/boxsizing.htc);*/
}

.bd-box-list li {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /**behavior: url(/css/boxsizing.htc);*/
}



/* UNITS
   These divider classes are set on .ingrid container
--------------------------------------------------------*/

.grid2    >   .unit   { /*width: 50%;*/ width: 49%; }
.grid3    >   .unit   { /* width: 33.33333%;*/ width: 33%; }
.grid4   >   .unit   { width: 25%; }
.grid5    >   .unit   { width: 20%; }
.grid6    >   .unit   { width: 16.66666%; }
.grid7  >   .unit   { width: 14.28571%; }
.grid8  >   .unit   { width: 12.5%; }




/* SPATIALS
   The span-x classes are set on individual .units
--------------------------------------------------------*/

/* Spatial units in thirds */
.grid3    >   .unit2   { width: 66.66666%; }

/* Spatial units in fourths */
.grid4   >   .unit2  { width: 50%; }
.grid4   >   .unit3 { width: 75%; }

/* Spatial units in fifths */
.grid5   >   .unit2   { width: 40%; }
.grid5    >  .unit3 { width: 60%; }
.grid5    >  .unit4  { width: 80%; }

/* Spatial units in sixths */
.grid6    >   .unit2   { width: 33.33333%; }
.grid6    >   .unit3 { width: 50%; }
.grid6    >   .unit4  { width: 66.66666%; }
.grid6    >   .unit5  { width: 83.33333%; }

/* Spatial units in sevenths */
.grid7  >   .unit2   { width: 28.57142%; }
.grid7  >   .unit3 { width: 42.85714%; }
.grid7  >   .unit4  { width: 57.14285%; }
.grid7  >   .unit5  { width: 71.42857%; }
.grid7  >   .unit6   { width: 85.71428%; }

/* Spatial units in eights */
.grid8  >  .unit2  { width: 25%; }
.grid8  >  .unit3  { width: 37.5%; }
.grid8  >  .unit4  { width: 50%; }
.grid8  >  .unit5  { width: 62.5%; }
.grid8  >  .unit6  { width: 75%; }
.grid8  >  .unit7  { width: 87.5%; }