// From http://css-tricks.com/dont-overthink-it-grids/

// The border-box box-sizing messes up other formatting on the site, e.g. the Vax! link
// at the side of the faq page. It's needed for the grid guttering to work though,
// so it'll need sorting out at some point.

// *, *:after, *:before {
//   -webkit-box-sizing: border-box;
//   -moz-box-sizing: border-box;
//   box-sizing: border-box;
// }

$pad: 20px;

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

.grid {
  margin: 0 0 $pad 0;
  width: 960px;
  margin: 0 auto;
  
  &:after {
    @extend clearfix;
  }
}

[class*='col-'] {
  float: left;
  padding-right: $pad;
  .grid &:last-of-type {
    padding-right: 0;
  }
}
.col-2-3 {
  width: 66.66%;
}
.col-1-3 {
  width: 33.33%;
}
.col-1-2 {
  width: 50%;
}
.col-1-4 {
  width: 25%;
}
.col-1-8 {
  width: 12.5%;
}

/* Opt-in outside padding */
.grid-pad {
  padding: $pad 0 $pad $pad;
  [class*='col-']:last-of-type {
    padding-right: $pad;
  }
}