/* RATIO-FL (Float) - by Kevin Day (1upart.com)
• Mobile First grid for simple layouts
• Uses [box-sizig] on all elements
• Doesn't give a fuck about IE 6 or 7 (8 is aiight, sorta)
• EMs are based on [font-size] 100% change as desired

BIG UPS:
Niroas Gallagher (http//neroas.github.com/griddle) - GRIDDLE (took a lot from this)
Campbell McGuiness (http//www.stacklayout.com) - WHITESPACE FIX (it's also pretty damn cool) 
*/
/* -----------------------------------------------
   THE GRID : BASE CLASSES 
----------------------------------------------- */
html, body {
  width: 100%;
  height: 100%;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.grid {
  display: block;
  max-width: 75em;
  min-height: 100%;
  padding: 0;
  margin: 0 auto;
  /* Allow [.grid] nesting */
}
.grid > .grid {
  overflow: hidden;
  width: 100%;
  margin: 0;
}

/* [.unit]s must be wrapped in a [.grid] 100% */
.unit {
  display: block;
  float: left;
  width: 100%;
  margin: 0;
  padding: 1.5em;
  list-style: none;
}

/* remove padding if nesting goes too deep */
.grid .unit .grid .unit {
  padding: 0;
}

/* CLEAR FIX : [.grid]s auto clear, [.cf] is available for other clearing */
.cf, .grid {
  *zoom: 1;
}
.cf:before, .cf:after, .grid:before, .grid:after {
  display: table;
  content: "";
  line-height: 0;
}
.cf:after, .grid:after {
  clear: both;
}

/* -----------------------------------------------
   HELPER CLASSES
----------------------------------------------- */
/* hides text for image replacement */
.ir {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  *text-indent: -9999px;
}

.pad {
  padding: 1.5em;
}

.pad-side {
  padding: 0 1.5em;
}

.half-gutter {
  padding: 0.75em;
}

.auto-size {
  height: auto;
  width: auto;
}

/* center target horizontally */
.center {
  display: block;
  margin: 0 auto;
}

/* center children horizontally */
.center-children {
  text-align: center;
}

/* -----------------------------------------------
   MEDIA QUERIES 
----------------------------------------------- */
/* Browser Width > 480px (Tablet) */
@media screen and (min-width: 30em) {
  /* Tablets */
  .s1-1 {
    width: 100%;
  }

  .s3-4 {
    width: 75%;
  }

  .s1-2 {
    width: 50%;
  }

  .s1-4 {
    width: 25%;
  }

  .s2-3 {
    max-width: 66.667%;
  }

  .s1-3 {
    max-width: 33.334%;
  }

  .s1-5 {
    width: 20%;
  }

  .s2-5 {
    width: 40%;
  }

  .s3-5 {
    width: 60%;
  }

  .s4-5 {
    width: 80%;
  }
}
/* ADJUST NESTED RATIOS WHEN BROWSER < 780px (tablets) */
@media screen and (max-width: 47.5em) {
  .grid .unit .grid .unit {
    width: 100%;
  }
}
/* Browser Width > 780px (Desktop) */
@media screen and (min-width: 47.5em) {
  /* Average Desktop Displays */
  .m1-1 {
    width: 100%;
  }

  .m3-4 {
    width: 75%;
  }

  .m1-2 {
    width: 50%;
  }

  .m1-4 {
    width: 25%;
  }

  .m2-3 {
    max-width: 66.667%;
  }

  .m1-3 {
    max-width: 33.334%;
  }

  .m1-5 {
    width: 20%;
  }

  .m2-5 {
    width: 40%;
  }

  .m3-5 {
    width: 60%;
  }

  .m4-5 {
    width: 80%;
  }
}