/*
 Width: 1102px
 # Columns : 12 
 Column width: 65px
 Gutter : 20px 
 
 
 
 
 width: 882px
 each grid: 73.5 + 20 = 93.5
 

 */
 
 .grid_1 { width: 6.6%; } /* 65 pixels */
.grid_2 { width: 15.1%; } /* 150 pixels */
.grid_3 { width: 23.6%; } /* 235 pixels */
.grid_4 { width: 32.1%; } /* 320 pixels */
.grid_5 { width: 40.6%; } /* 405 pixels */
.grid_6 { width: 49%; } /* 490 pixels */
.grid_7 { width: 57.5%; } /* 575 pixels */
.grid_8 { width: 65%; } /* 660 pixels */
.grid_9 { width: 74.5%; } /* 745 pixels */
.grid_10 { width: 83%; }/* 830 pixels */
.grid_11 { width: 91.5%; }/* For this caluation, you take the 915px as the TARGET, 1000 pixels for the CONTEXT (as thats the max-width value for the container element. You get 0.915. You then move the decimel point TWO PLACES TO THE RIGHT, so you are left with 91.5%. */
.grid_12 { width: 100%; }
/*As this is the top value, it should have the 100% width of the container.  */
/* The caluation to get the percentages for the rest of the grid is TARGET % CONTEXT = RESULT*/
 
 
 

/*.grid_1 { width:73.5px; }
.grid_2 { width: 167px; }
.grid_3 { width: 260.5px; }
.grid_4 { width: 354px; }
.grid_5 { width: 447.5px; }
.grid_6 { width: 541px; }
.grid_7 { width: 634.5px; }
.grid_8 { width: 728px; } 
.grid_9 { width: 821.5px; } 
.grid_10 { width: 915px; }
.grid_11 { width: 1008.5px; }
.grid_12 { width: 100%; }*/


.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin: 0 2% 1% 0;
	float: left;
	display: block;
}
/*This is the step converting the fixed margins to a percentage, so the layout will scale it's margins accordingly. For this, you take the TARGET (20px) and the CONTEXT (1000px, for the overall container size) and you get 0.002. Move the decimel TWO PLACES TO THE RIGHT, and you get 2%. 10 pixels get 1% */

.alpha{margin-left:0px;}

.omega{margin-right:0px;}
/*This sets a margin-right of 0 pixels. This is for the last element of a column, so nothing can go around it.

This is because all elements using this grid system has an automatic margin to its left and right. By using omega (and alpha for the left-hand side if appicable) it removes the margin from it's respective side, allowing elements to take up all 12 columns the grid.css file provides.


 */

.container{
	width: 100%; 
	/*This value was changed from 1000px to 90%. This is so there is a buffer between the browser sides and the content. */
	max-width:1102px;
	/*This rule makes sure that the content doesn't go above 1000 pixels, if the broswer veiwing the website is big enough to do so. */
	
	margin: auto;
	/*This centers the content with even sides. */
}
/*This is the wrapper element for the whole page. Auto centers the content */



.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
/*clearfix will fix a lot of cross-browser layouts. Helps removes problems */