/******************************************************************
Site Name:
Author:

Stylesheet: Grid Stylesheet

I've seperated the grid so you can swap it out easily. It's
called at the top the style.scss stylesheet.

There are a ton of grid solutions out there. You should definitely
experiment with your own. Here are some recommendations:

http://gridsetapp.com - Love this site. Responsive Grids made easy.
http://susy.oddbird.net/ - Grids using Compass. Very elegant.
http://gridpak.com/ - Create your own responsive grid.
https://github.com/dope/lemonade - Neat lightweight grid.


The grid below is a custom built thingy I modeled a bit after
Gridset. It's VERY basic and probably shouldn't be used on
your client projects. The idea is you learn how to roll your
own grids. It's better in the long run and allows you full control
over your project's layout.

******************************************************************/
/* 
This was removed from the scss partials library 
and converted to standalone stylesheet to allow for selection 
of either bones or bootstrap grid. Commented styles below added to each grid class.

// using a mixin since we can't use placeholder selectors
@mixin grid-col {
  float: left;
  padding-right: 0.75em;

}
*/

/* the last column */
.last-col {
  float: right !important;
  /*padding-right: 0 !important;*/
}


/*
Mobile Grid Styles
These are the widths for the mobile grid.
There are four types, but you can add or customize
them however you see fit.
*/
@media (max-width: 767px) {

  .m-all {
    float: left;
    width: 100%;
    padding-right: 0;
  }

  .m-1of2 {
    float: left;
  	padding-right: 0.75em;
    width: 50%;
  }

  .m-1of3 {
    float: left;
    padding-right: 0.75em;
    width: 33.33%;
  }

  .m-2of3 {
    float: left;
  	padding-right: 0.75em;
    width: 66.66%;
  }

  .m-1of4 {
  	float: left;
    padding-right: 0.75em;
    width: 25%;
  }

  .m-3of4 {
	float: left;
    padding-right: 0.75em;
    width: 75%;
  }

} /* end mobile styles */


/* Portrait tablet to landscape */
@media (min-width: 768px) and (max-width: 1029px) {

  .t-all {
    float: left;
    width: 100%;
    padding-right: 0;
  }

  .t-1of2 {
	float: left;
    padding-right: 0.75em;
    width: 50%;
  }

  .t-1of3 {
	float: left;
    padding-right: 0.75em;
    width: 33.33%;
  }

  .t-2of3 {
    float: left;
    padding-right: 0.75em;
    width: 66.66%;
  }

  .t-1of4 {
    float: left;
    padding-right: 0.75em;
    width: 25%;
  }

  .t-3of4 {
    float: left;
  	padding-right: 0.75em;
    width: 75%;
  }

  .t-1of5 {
    float: left;
  	padding-right: 0.75em;
    width: 20%;
  }

  .t-2of5 {
    float: left;
  	padding-right: 0.75em;
    width: 40%;
  }

  .t-3of5 {
    float: left;
  	padding-right: 0.75em;
    width: 60%;
  }

  .t-4of5 {
    float: left;
  	padding-right: 0.75em;
    width: 80%;
  }

} /* end tablet */

/* Landscape to small desktop */
@media (min-width: 1030px) {

  .d-all  {
    float: left;
    width: 100%;
    padding-right: 0;
  }

  .d-1of2 {
    float: left;
  	padding-right: 0.75em;
    width: 50%;
  }

  .d-1of3 {
    float: left;
  	padding-right: 0.75em;
    width: 33.33%;
  }

  .d-2of3 {
    float: left;
  	padding-right: 0.75em;
    width: 66.66%;
  }

  .d-1of4 {
    float: left;
  	padding-right: 0.75em;
    width: 25%;
  }

  .d-3of4 {
    float: left;
  	padding-right: 0.75em;
    width: 75%;
  }

  .d-1of5 {
    float: left;
  	padding-right: 0.75em;
    width: 20%;
  }

  .d-2of5 {
    float: left;
  	padding-right: 0.75em;
    width: 40%;
  }

  .d-3of5 {
    float: left;
  	padding-right: 0.75em;
    width: 60%;
  }

  .d-4of5 {
    float: left;
  	padding-right: 0.75em;
    width: 80%;
  }

  .d-1of6 {
    float: left;
  	padding-right: 0.75em;
    width: 16.6666666667%;
  }

  .d-1of7 {
    float: left;
  	padding-right: 0.75em;
    width: 14.2857142857%;
  }

  .d-2of7 {
    float: left;
  	padding-right: 0.75em;
    width: 28.5714286%;
  }

  .d-3of7 {
    float: left;
  	padding-right: 0.75em;
    width: 42.8571429%;
  }

  .d-4of7 {
    float: left;
  	padding-right: 0.75em;
    width: 57.1428572%;
  }

  .d-5of7 {
    float: left;
  	padding-right: 0.75em;
    width: 71.4285715%;
  }

  .d-6of7 {
    float: left;
  	padding-right: 0.75em;
    width: 85.7142857%;
  }

  .d-1of8 {
    float: left;
  	padding-right: 0.75em;
    width: 12.5%;
  }

  .d-1of9 {
    float: left;
  	padding-right: 0.75em;
    width: 11.1111111111%;
  }

  .d-1of10 {
    float: left;
  	padding-right: 0.75em;
    width: 10%;
  }

  .d-1of11 {
    float: left;
  	padding-right: 0.75em;
    width: 9.09090909091%;
  }

  .d-1of12 {
    float: left;
  	padding-right: 0.75em;
    width: 8.33%;
  }

} /* end desktop styles */