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

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




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

.ingrid {
  margin: 0 -1.25em; /* 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.31em;
  word-spacing: -0.43em;

}

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

.field-unit  {
  display: block;
} 




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

.unit,
.field-unit {
  padding: 0 1.25em; /* 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;
}

.extra{
  padding-right: 2em;
}

.extraLarge{
  padding-right: 25%;
}

.extraSmallRight{
  padding-right: 2em;
}

.extraSmallLeft{
  padding-left: 3em;
}


/* OLDIE 
   Some IE7 patching (optional)
--------------------------------------------------------*/

.ingrid {
  *letter-spacing: normal;
  *zoom: 1;
}

.unit {
  *display: inline;
}

.unit,
.field-unit {
  *margin-right: -1px;
  *padding: 0;
  *zoom: 1;
}




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

.in-halves    >   .unit   { width: 50%; } 
.in-thirds    >   .unit   { width: 33.33333%; } 
.in-fourths   >   .unit   { width: 25%; } 
.in-fifths    >   .unit   { width: 20%; } 
.in-sixths    >   .unit   { width: 16.66666%; }
.in-sevenths  >   .unit   { width: 14.28571%; }
.in-ninths    >   .unit   { width: 11.11111%; }
.in-twelves   >   .unit   { width: 8.33333%; }



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

/* Spatial units in thirds */
.in-thirds    >   .span-two   { width: 66.66666%; }

/* Spatial units in fourths */
.in-fourths   >   .span-two   { width: 50%; }
.in-fourths   >   .span-three { width: 75%; }

/* Spatial units in fifths */
.in-fifths    >   .span-two   { width: 40%; }
.in-fifths    >   .span-three { width: 60%; }
.in-fifths    >   .span-four  { width: 80%; }

/* Spatial units in sixths */
.in-sixths    >   .span-two   { width: 33.33333%; }
.in-sixths    >   .span-three { width: 50%; }
.in-sixths    >   .span-four  { width: 66.66666%; }
.in-sixths    >   .span-five  { width: 83.33333%; }

/* Spatial units in sevenths */
.in-sevenths  >   .span-two   { width: 28.57142%; }
.in-sevenths  >   .span-three { width: 42.85714%; }
.in-sevenths  >   .span-four  { width: 57.14285%; }
.in-sevenths  >   .span-five  { width: 71.42857%; }
.in-sevenths  >   .span-six   { width: 85.71428%; }

/* Spatial units in ninths */
.in-ninths  >   .span-two   { width: 22.22222%; }
.in-ninths  >   .span-three { width: 33.33333%; }
.in-ninths  >   .span-four  { width: 44.44444%; }
.in-ninths  >   .span-five  { width: 55.55555%; }
.in-ninths  >   .span-six   { width: 66.66667%; }
.in-ninths  >   .span-seven { width: 77.77778%; }
.in-ninths  >   .span-eight { width: 88.88889%; }


/* Spatial units in twelves */
.in-twelves  >   .span-two   { width: 16.66667%; }
.in-twelves  >   .span-three { width: 25%; }
.in-twelves  >   .span-four  { width: 33.33333%; }
.in-twelves  >   .span-five  { width: 41.66667%; }
.in-twelves  >   .span-six   { width: 50%; }
.in-twelves  >   .span-seven { width: 58.33333%; }
.in-twelves  >   .span-eight { width: 66.66667%; }
.in-twelves  >   .span-nine  { width: 75%; }
.in-twelves  >   .span-ten   { width: 83.33333%; }
.in-twelves  >   .span-eleven{ width: 91.66667%; }