
/* Ingrid 2.0 */

/*-----------------------------------------
 *
 * Author:   Robert Piirainen
 * Twitter:  @robertpiira
 * Github:   https://github.com/robertpiira/ingrid
 * Demo:     http://codepen.io/robertpiira/pen/kofpu
 * 
 *---------------------------------------*/

/*-----------------------------------------
 *
 * Mobile first approach for class names
 *
 * m-* class prefix is for "above small-sized viewports"
 * l-* class prefix is for "above medium-sized viewports"
 * 
 *---------------------------------------*/




/* INGRID - All
-----------------------------------------*/

.grid {
  letter-spacing: -0.31em;
  letter-spacing:-0.4em;
}

.grid {
  padding: 0;
  list-style: none;
}

.grid_unit,
.grid_field-unit {
  margin: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  letter-spacing: normal;
}

.grid > .grid_unit {
  display: inline-block;
  vertical-align: top;
  *display: inline!important;
  *zoom: 1!important;
}

.grid_field-unit  {
  display: block;
}




/* GUTTERS - All
-----------------------------------------*/

.grid {
  margin: 0 -1rem;
}

.grid > .grid_unit,
.grid > .grid_field-unit {
  padding: 0 1rem;
}




/* UNITS - All
-----------------------------------------*/

.grid--divide-2  >  .grid_unit  { width: 50%; } 
.grid--divide-3  >  .grid_unit  { width: 33.33333%; }
.grid--divide-4  >  .grid_unit  { width: 25%; } 
.grid--divide-5  >  .grid_unit  { width: 20%; } 
.grid--divide-6  >  .grid_unit  { width: 16.66666%; }
.grid--divide-7  >  .grid_unit  { width: 14.28571%; }
.grid--divide-8  >  .grid_unit  { width: 12.5%; }




/* SPATIALS - All
-----------------------------------------*/

/* Spatial units in thirds */
.grid--divide-3  >  .grid_unit--span-2  { width: 66.66666%; }

/* Spatial units in fourths */
.grid--divide-4  >  .grid_unit--span-2  { width: 50%; }
.grid--divide-4  >  .grid_unit--span-3  { width: 75%; }

/* Spatial units in fifths */
.grid--divide-5  >  .grid_unit--span-2  { width: 40%; }
.grid--divide-5  >  .grid_unit--span-3  { width: 60%; }
.grid--divide-5  >  .grid_unit--span-4  { width: 80%; }

/* Spatial units in sixths */
.grid--divide-6  >  .grid_unit--span-2  { width: 33.33333%; }
.grid--divide-6  >  .grid_unit--span-3  { width: 50%; }
.grid--divide-6  >  .grid_unit--span-4  { width: 66.66666%; }
.grid--divide-6  >  .grid_unit--span-5  { width: 83.33333%; }

/* Spatial units in sevenths */
.grid--divide-7  >  .grid_unit--span-2  { width: 28.57142%; }
.grid--divide-7  >  .grid_unit--span-3  { width: 42.85714%; }
.grid--divide-7  >  .grid_unit--span-4  { width: 57.14285%; }
.grid--divide-7  >  .grid_unit--span-5  { width: 71.42857%; }
.grid--divide-7  >  .grid_unit--span-6  { width: 85.71428%; }

/* Spatial units in eights */
.grid--divide-8  >  .grid_unit--span-2  { width: 25%; }
.grid--divide-8  >  .grid_unit--span-3  { width: 37.5%; }
.grid--divide-8  >  .grid_unit--span-4  { width: 50%; }
.grid--divide-8  >  .grid_unit--span-5  { width: 62.5%; }
.grid--divide-8  >  .grid_unit--span-6  { width: 75%; }
.grid--divide-8  >  .grid_unit--span-7  { width: 87.5%; }


#main_content .explanation {
    padding: 20px 0;
    background: url(../img/common/dot_yoko.gif) top left repeat-x;
}
#main_content p.title {
    font-size: 20px;
    font-weight: bold;
    margin: 0 10px 20px;
    letter-spacing: 0em;
}
#main_content p.text {
    font-size: 15px;
    margin: 0 0px 10px 10px;
    letter-spacing: 0em;
}


#main_content .grid .col dl dt {
/*    font-weight: bold; */
    font-size: 15px;
    margin: 5px 0 5px 2em;
    text-indent: -2em;
    /* line-height: 2em; */
    letter-spacing: 0em;
    text-align: left;
}

#main_content .grid .col dl dd {
    margin: 5px 0 20px 2em;
    text-indent: -2em;
    line-height: 2em;
    border-bottom: 1px dotted #ebe9e9;
    letter-spacing: 0em;
    text-align: left;
}



/* INGRID - Breakpoint
 * Above small-sized viewports
-----------------------------------------*/

@media only screen and (min-width: 480px) {
  
  .m-grid {
    padding: 0;
    list-style: none;
    letter-spacing: -0.31em;
  }
  
  .m-grid > .grid_unit {
    display: inline-block;
    vertical-align: top;
  }




  /* GUTTERS - Above small-sized viewports
  ---------------------------------------*/

  .m-grid {
    margin: 0 -1rem;
  }

  .m-grid > .grid_unit,
  .m-grid > .grid_field-unit {
    padding: 0 1rem;
  }
  



  /* UNITS - Above small-sized viewports
  ---------------------------------------*/

  .m-grid--divide-2  >  .grid_unit  { width: 50%; } 
  .m-grid--divide-3  >  .grid_unit  { width: 33.33333%; }
  .m-grid--divide-4  >  .grid_unit  { width: 25%; } 
  .m-grid--divide-5  >  .grid_unit  { width: 20%; } 
  .m-grid--divide-6  >  .grid_unit  { width: 16.66666%; }
  .m-grid--divide-7  >  .grid_unit  { width: 14.28571%; }
  .m-grid--divide-8  >  .grid_unit  { width: 12.5%; }



  /* SPATIALS - Above small-sized viewports
  ---------------------------------------*/

  /* Spatial units in thirds */
  .m-grid--divide-3  >  .m-grid_unit--span-2  { width: 66.66666%; }

  /* Spatial units in fourths */
  .m-grid--divide-4  >  .m-grid_unit--span-2  { width: 50%; }
  .m-grid--divide-4  >  .m-grid_unit--span-3  { width: 75%; }

  /* Spatial units in fifths */
  .m-grid--divide-5  >  .m-grid_unit--span-2  { width: 40%; }
  .m-grid--divide-5  >  .m-grid_unit--span-3  { width: 60%; }
  .m-grid--divide-5  >  .m-grid_unit--span-4  { width: 80%; }

  /* Spatial units in sixths */
  .m-grid--divide-6  >  .m-grid_unit--span-2  { width: 33.33333%; }
  .m-grid--divide-6  >  .m-grid_unit--span-3  { width: 50%; }
  .m-grid--divide-6  >  .m-grid_unit--span-4  { width: 66.66666%; }
  .m-grid--divide-6  >  .m-grid_unit--span-5  { width: 83.33333%; }

  /* Spatial units in sevenths */
  .m-grid--divide-7  >  .m-grid_unit--span-2  { width: 28.57142%; }
  .m-grid--divide-7  >  .m-grid_unit--span-3  { width: 42.85714%; }
  .m-grid--divide-7  >  .m-grid_unit--span-4  { width: 57.14285%; }
  .m-grid--divide-7  >  .m-grid_unit--span-5  { width: 71.42857%; }
  .m-grid--divide-7  >  .m-grid_unit--span-6  { width: 85.71428%; }

  /* Spatial units in eights */
  .m-grid--divide-8  >  .m-grid_unit--span-2  { width: 25%; }
  .m-grid--divide-8  >  .m-grid_unit--span-3  { width: 37.5%; }
  .m-grid--divide-8  >  .m-grid_unit--span-4  { width: 50%; }
  .m-grid--divide-8  >  .m-grid_unit--span-5  { width: 62.5%; }
  .m-grid--divide-8  >  .m-grid_unit--span-6  { width: 75%; }
  .m-grid--divide-8  >  .m-grid_unit--span-7  { width: 87.5%; }
  
}




/* INGRID - Breakpoint
 * Above medium-sized viewports
-----------------------------------------*/

@media only screen and (min-width: 640px) {
.l-grid {
padding: 0;
list-style: none;
letter-spacing: -0.31em;
}

.l-grid > .grid_unit {
display: inline-block;
vertical-align: top;
}

  /* GUTTERS - Above medium-sized viewports
  ---------------------------------------*/
.l-grid {
margin: 0 -1rem;
}

.l-grid > .grid_unit,
.l-grid > .grid_field-unit {
padding: 0 1rem;
}

  /* UNITS - Above medium-sized viewports
  ---------------------------------------*/
  
  .l-grid--divide-2  >  .grid_unit  { width: 50%; } 
  .l-grid--divide-3  >  .grid_unit  { width: 33.33333%; }
  .l-grid--divide-4  >  .grid_unit  { width: 25%; } 
  .l-grid--divide-5  >  .grid_unit  { width: 20%; } 
  .l-grid--divide-6  >  .grid_unit  { width: 16.66666%; }
  .l-grid--divide-7  >  .grid_unit  { width: 14.28571%; }
  .l-grid--divide-8  >  .grid_unit  { width: 12.5%; }



  /* SPATIALS - Above medium-sized viewports
  ---------------------------------------*/

  /* Spatial units in thirds */
  .l-grid--divide-3  >  .l-grid_unit--span-2  { width: 66.66666%; }

  /* Spatial units in fourths */
  .l-grid--divide-4  >  .l-grid_unit--span-2  { width: 50%; }
  .l-grid--divide-4  >  .l-grid_unit--span-3  { width: 75%; }

  /* Spatial units in fifths */
  .l-grid--divide-5  >  .l-grid_unit--span-2  { width: 40%; }
  .l-grid--divide-5  >  .l-grid_unit--span-3  { width: 60%; }
  .l-grid--divide-5  >  .l-grid_unit--span-4  { width: 80%; }

  /* Spatial units in sixths */
  .l-grid--divide-6  >  .l-grid_unit--span-2  { width: 33.33333%; }
  .l-grid--divide-6  >  .l-grid_unit--span-3  { width: 50%; }
  .l-grid--divide-6  >  .l-grid_unit--span-4  { width: 66.66666%; }
  .l-grid--divide-6  >  .l-grid_unit--span-5  { width: 83.33333%; }

  /* Spatial units in sevenths */
  .l-grid--divide-7  >  .l-grid_unit--span-2  { width: 28.57142%; }
  .l-grid--divide-7  >  .l-grid_unit--span-3  { width: 42.85714%; }
  .l-grid--divide-7  >  .l-grid_unit--span-4  { width: 57.14285%; }
  .l-grid--divide-7  >  .l-grid_unit--span-5  { width: 71.42857%; }
  .l-grid--divide-7  >  .l-grid_unit--span-6  { width: 85.71428%; }

  /* Spatial units in eights */
  .l-grid--divide-8  >  .l-grid_unit--span-2  { width: 25%; }
  .l-grid--divide-8  >  .l-grid_unit--span-3  { width: 37.5%; }
  .l-grid--divide-8  >  .l-grid_unit--span-4  { width: 50%; }
  .l-grid--divide-8  >  .l-grid_unit--span-5  { width: 62.5%; }
  .l-grid--divide-8  >  .l-grid_unit--span-6  { width: 75%; }
  .l-grid--divide-8  >  .l-grid_unit--span-7  { width: 87.5%; }

}
