/* Work in progress to generate simple, DRY grid layout in CSS */

/* Set up the container, at the required width (+1px to avoid wrapping problems) 
==============================================================================*/

body {
  text-align: center;
}

#container {
  margin-top: 18px;
  border-top: 3px solid black;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  width: 759px;
}

/* Column class to set gutter */
.col {
  margin-right: 10px;
  float: left;
}

/* Classes to set width of columns */

.col-1 { width: 54px; }

.col-2 {  width: 118px; }

.col-3 {  width: 182px; }

.col-4 {  width: 246px; 
}

.col-5 {  width: 310px; }

.col-6 {  width: 374px; }

.col-8 { width: 502px; }

.col-10 { width: 630px; }

.col-half { width: 46%;
border: 1px solid black;
 }

/* Class to set right margin on last column to 0, preventing floating problems */
/* NB trying to increase specificity, to give this priority over regular column rule*/
html .last-col { margin-right: 0px; }