/*
 *  Chriselison.uk (CEDUK) Grid
 *
 *  Author:   Christopher David Elison
 *  Date:     26 July 2016 02:56
 *  Modified: 03 October 2016 04:11
 *
 *  Description:
 *  Trying to write my own simple CSS grid system based/inspired 
 *  heavily on Chris Coyier's "Don't overthink grids" article/video. 
 *  Apologies in advance for any embarassingly bad/redundant CSS, I'm
 *  still learning.
 *
 */

/* Grid container */
.ceduk-grid {
  padding: 0;
  margin: auto;
}

/* Remove padding for nested grids or grids that require no side padding */
/*.ceduk-grid--no-pad { margin: 0; padding: 0; } Commenting out this fixe no-pad grid strange margin offset! */
.ceduk-grid--no-pad .ceduk-grid__column:first-child { outline: 0px dotted blue; padding-left:  0; }
.ceduk-grid--no-pad .ceduk-grid__column:last-child  { outline: 0px dotted red; padding-right: 0; }

/* Clearfix after grid */
.ceduk-grid:after {
  clear: both;
  content: "";
  display: table;
  margin-bottom: 1.333em;
}

/* Grid columns */
.ceduk-grid__column {
  float: left;
  padding: 0;
}


.ceduk-grid__column:not(last-of-type) {
  padding-right: 20px;
  padding-left: 20px;
}

/* DEL */
.ceduk-grid--no-pad { padding: 0; }
.ceduk-grid--no-pad .ceduk-grid__column:first-child { outline: 0px dotted blue; padding-left:  0; }
.ceduk-grid--no-pad .ceduk-grid__column:last-child  { outline: 0px dotted red; padding-right: 0; }
/* DEL */

/* Debugging - last column shaded */
/* .ceduk-grid__column:last-child { background-color: #f3f3f3; } /*padding-right: -20px; padding-right:0;*/

/* Grid column proportions */
.ceduk-grid__column--1-of-12  { width: 8.333%;  }  /* Twelth  (1 column - 8% width)    */
.ceduk-grid__column--2-of-12  { width: 16.666%; }  /* Sixth   (2 column - 16% width)   */
.ceduk-grid__column--3-of-12  { width: 25%;     }  /* Quarter (3 column - 25% width)   */
.ceduk-grid__column--4-of-12  { width: 33.333%; }  /* Third   (4 column - 33% width)   */
.ceduk-grid__column--5-of-12  { width: 41.666%; }  /* 5/12    (5 column - 41% width)   */
.ceduk-grid__column--6-of-12  { width: 50%;     }  /* Half    (6 column - 50% width)   */
.ceduk-grid__column--7-of-12  { width: 58.333%; }  /* 7/12    (7 column - 58% width)   */
.ceduk-grid__column--8-of-12  { width: 66.666%; }  /* 3/5     (8 column - 66% width)   */
.ceduk-grid__column--9-of-12  { width: 75%;     }  /* 3/4     (9 column - 75% width)   */
.ceduk-grid__column--10-of-12 { width: 83.333%; }  /* 5/6     (10 column - 83% width)  */
.ceduk-grid__column--11-of-12 { width: 91.666%; }  /* 11/12   (11 column - 91% width)  */
.ceduk-grid__column--12-of-12 { width: 100%;    }  /* Full    (12 column - 100% width) */

/* Media queries */
@media screen and (max-width: 800px) { 
  .ceduk-grid__column--2-of-12 { width: 33.333%; } /* Sixths to third-width  */ 
  .ceduk-grid__column--3-of-12 { width: 50%;     } /* Quarters to half-width */
  .ceduk-grid__column--4-of-12 { width: 100%;    } /* Thirds to full-width   */
  .ceduk-grid__column--5-of-12 { width: 100%;    background-color: #d5d5d5; clear: both; }
  .ceduk-grid__column--6-of-12 { width: 100%;    } /* Halves to full-width   */
  .ceduk-grid__column--7-of-12 { width: 100%;    background-color: #c6c6c6; clear: both; }
  .ceduk-grid__column--8-of-12 { width: 100%;    } /* 3/5ths to full-width   */
  
  .ceduk-grid--no-pad .ceduk-grid__column { outline: 0px solid red; padding: 0; }
  
  /*.ceduk-grid { width: 90%; margin: 0; }*/
}

/* Narrow viewport */
@media screen and (max-width: 600px) { 
  .ceduk-grid__column--1-of-12 { width: 100%; } /* 1 to full-width   */
  .ceduk-grid__column--2-of-12 { width: 100%; } /* Sixths to full-width   */ 
  .ceduk-grid__column--3-of-12 { width: 100%; } /* Quarters to full-width */
  .ceduk-grid__column--4-of-12 { width: 100%; } /* Thirds to full-width   */
  .ceduk-grid__column--5-of-12 { width: 100%; }
  .ceduk-grid__column--6-of-12 { width: 100%; } /* Halves to full-width   */
  .ceduk-grid__column--7-of-12 { width: 100%; }
  .ceduk-grid__column--8-of-12 { width: 100%; } /* 3/5ths to full-width   */
  
  .ceduk-grid--no-pad .ceduk-grid__column { outline: 0px solid red; padding: 0; }
  
  /*.ceduk-grid__column .ceduk-grid__column { background-color: #b5a; padding: 0; }*/
  
  /*.ceduk-grid { width: 95%; margin: 0; }*/
}