/* --------------------------------------------------------------------------------------------------------------- SECTIONS */

.section 
	{
	clear: both;
	padding: 0px;
	margin: 0px;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	box-sizing:					border-box;

	background-color:cyan;
	background-color:transparent;
	}

/* --------------------------------------------------------------------------------------------------------------- GROUPING  */


.group:before,
.group:after 
	{
    content:"";
    display:table;
	}

.group:after 
	{
    clear:both;
	}

.group 
	{
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
	}

/* --------------------------------------------------------------------------------------------------------------- GRID COLUMN SETUP  */

.col 
	{
	display: block;
	float:left;
	/*margin: 1% 0 1% 1.6%;*/
	margin: 0% 0 0% 1.6%;	
	/*background-color:transparent;*/

	/* -------------- debug -------------- */
	/*
	background-color:#c0e9bf;
	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	-ms-box-sizing:			border-box;
	box-sizing:					border-box;
	border-style:solid;
	border-width:1px;
	border-color:#a3daa2;
	*/
	}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) 
	{
		.col 
		{ 
		margin: 1% 0 1% 0%;
		background-color:transparent;
		}
	}

/* --------------------------------------------------------------------------------------------------------------- PUSH */

.push 
	{
    visibility: hidden;

	/* -------------- debug -------------- */
	/*visibility: visible;*/
	}

@media only screen and (max-width: 480px)
	{		
	.push	
		{
	    display: none;
		}	
	}
	




/* --------------------------------------------------------------------------------------------------------------- COLUMN CONTENTS */

/*
this is just a container/wrap for the contents of a column

used to fix bug from prompts not always sitting correctly for some reason
*/

div.colContents
	{
	position:relative;
	display:block;
	float:left;
	width:100%;
	height:100%;

	background:transparent;
	}

/* --------------------------------------------------------------------------------------------------------------- GRID OF TWO  */

.span_2_of_2 
	{
	width: 100%;
	}

.span_1_of_2 
	{
	width: 49.2%;
	}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) 
	{
	.span_2_of_2 
		{
		width: 100%; 
		}
	
	.span_1_of_2 
		{
		width: 100%; 
		}
	}

/* --------------------------------------------------------------------------------------------------------------- GRID OF THREE */

.span_3_of_3 
	{
	width: 100%; 
	}

.span_2_of_3 
	{
	width: 66.13%; 
	}

.span_1_of_3 
	{
	width: 32.26%; 
	}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) 
	{
	
	.span_3_of_3 
		{
		width: 100%; 
		}
	
	.span_2_of_3 
		{
		width: 100%; 
		}
	
	.span_1_of_3 
		{
		width: 100%;
		}
	}

/* --------------------------------------------------------------------------------------------------------------- GRID OF FOUR  */
	
.span_4_of_4 
	{
	width: 100%; 
	}

.span_3_of_4 
	{
	width: 74.6%; 
	}

.span_2_of_4 
	{
	width: 49.2%; 
	}

.span_1_of_4 
	{
	width: 23.8%; 
	}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) 
	{
	
	.span_4_of_4 
		{
		width: 100%; 
		}
	
	.span_3_of_4 
		{
		width: 100%; 
		}
	
	.span_2_of_4 
		{
		width: 100%; 
		}
	
	.span_1_of_4 
		{
		width: 100%; 
		}
	}

/* --------------------------------------------------------------------------------------------------------------- GRID OF FIVE */

.span_5_of_5 
	{
	width: 100%;
	}

.span_4_of_5 
	{
  	width: 79.68%; 
	}

.span_3_of_5 
	{
  	width: 59.36%; 
	}

.span_2_of_5 
	{
  	width: 39.04%;
	}

.span_1_of_5 
	{
  	width: 18.72%;
	}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) 
	{
	.span_5_of_5 
		{
		width: 100%; 
		}
	
	.span_4_of_5 
		{
		width: 100%; 
		}
	
	.span_3_of_5 
		{
		width: 100%; 
		}
	
	.span_2_of_5 
		{
		width: 100%; 
		}
	
	.span_1_of_5 
		{
		width: 100%; 
		}
	}

/* --------------------------------------------------------------------------------------------------------------- GRID OF SIX */


.span_6_of_6 
	{
	width: 100%;
	}

.span_5_of_6 
	{
  	width: 83.06%;
	}

.span_4_of_6 
	{
  	width: 66.13%;
	}

.span_3_of_6 
	{
  	width: 49.2%;
	}

.span_2_of_6 
	{
  	width: 32.26%;
	}

.span_1_of_6 
	{
  	width: 15.33%;
	}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) 
	{
	.span_6_of_6 
		{
		width: 100%; 
		}
	
	.span_5_of_6 
		{
		width: 100%; 
		}
	
	.span_4_of_6 
		{
		width: 100%; 
		}
	
	.span_3_of_6 
		{
		width: 100%; 
		}
	
	.span_2_of_6 
		{
		width: 100%; 
		}
	
	.span_1_of_6 
		{
		width: 100%; 
		}
	}

/* --------------------------------------------------------------------------------------------------------------- GRID OF SEVEN */


.span_7_of_7 
	{
	width: 100%;
	}

.span_6_of_7 
	{
	width: 85.48%;
	}

.span_5_of_7 
	{
  	width: 70.97%;
	}

.span_4_of_7 
	{
  	width: 56.45%;
	}

.span_3_of_7 
	{
  	width: 41.94%;
	}

.span_2_of_7 
	{
  	width: 27.42%;
	}

.span_1_of_7 
	{
  	width: 12.91%;
	}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) 
	{
	
	.span_7_of_7 
		{
		width: 100%; 
		}
	
	.span_6_of_7 
		{
		width: 100%; 
		}
	
	.span_5_of_7 
		{
		width: 100%; 
		}
	
	.span_4_of_7 
		{
		width: 100%; 
		}
	
	.span_3_of_7 
		{
		width: 100%; 
		}
	
	.span_2_of_7 
		{
		width: 100%; 
		}
	
	.span_1_of_7 
		{
		width: 100%; 
		}
	}

/* --------------------------------------------------------------------------------------------------------------- GRID OF EIGHT  */

	
.span_8_of_8 
	{
	width: 100%;
	}

.span_7_of_8 
	{
	width: 87.3%; 
	}

.span_6_of_8 
	{
	width: 74.6%; 
	}

.span_5_of_8 
	{
	width: 61.9%; 
	}

.span_4_of_8 
	{
	width: 49.2%; 
	}

.span_3_of_8 
	{
	width: 36.5%;
	}

.span_2_of_8 
	{
	width: 23.8%; 
	}

.span_1_of_8 
	{
	width: 11.1%; 
	}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) 
	{
	
	.span_8_of_8 
		{
		width: 100%; 
		}
	
	.span_7_of_8 
		{
		width: 100%; 
		}
	
	.span_6_of_8 
		{
		width: 100%; 
		}
	
	.span_5_of_8 
		{
		width: 100%; 
		}
	
	.span_4_of_8 
		{
		width: 100%; 
		}
	
	.span_3_of_8 
		{
		width: 100%; 
		}
	
	.span_2_of_8 
		{
		width: 100%; 
		}
	
	.span_1_of_8 
		{
		width: 100%; 
		}
	}

/* --------------------------------------------------------------------------------------------------------------- GRID OF NINE  */


.span_9_of_9 
	{
	width: 100%;
	}

.span_8_of_9 
	{
	width: 88.71%;
	}

.span_7_of_9 
	{
	width: 77.42%; 
	}

.span_6_of_9 
	{
	width: 66.13%; 
	}

.span_5_of_9 
	{
	width: 54.84%; 
	}

.span_4_of_9 
	{
	width: 43.55%; 
	}

.span_3_of_9 
	{
	width: 32.26%;
	}

.span_2_of_9 
	{
	width: 20.97%; 
	}

.span_1_of_9 
	{
	width: 9.68%; 
	}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) 
	{
	
	.span_9_of_9 
		{
		width: 100%; 
		}
	
	.span_8_of_9 
		{
		width: 100%; 
		}
	
	.span_7_of_9 
		{
		width: 100%; 
		}
	
	.span_6_of_9 
		{
		width: 100%; 
		}
	
	.span_5_of_9 
		{
		width: 100%; 
		}
	
	.span_4_of_9 
		{
		width: 100%; 
		}
	
	.span_3_of_9 
		{
		width: 100%; 
		}
	
	.span_2_of_9 
		{
		width: 100%; 
		}
	
	.span_1_of_9 
		{
		width: 100%; 
		}
	}

/* --------------------------------------------------------------------------------------------------------------- GRID OF TEN */


.span_10_of_10 
	{
	width: 100%;
	}

.span_9_of_10 
	{
	width: 89.84%;
	}

.span_8_of_10 
	{
	width: 79.68%;
	}

.span_7_of_10
	{
	width: 69.52%; 
	}

.span_6_of_10 
	{
	width: 59.36%; 
	}

.span_5_of_10 
	{
	width: 49.2%; 
	}

.span_4_of_10 
	{
	width: 39.04%; 
	}

.span_3_of_10 
	{
	width: 28.88%;
	}

.span_2_of_10 
	{
	width: 18.72%; 
	}

.span_1_of_10 
	{
	width: 8.56%; 
	}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) 
	{
	
	.span_10_of_10 
		{
		width: 100%; 
		}
	
	.span_9_of_10 
		{
		width: 100%; 
		}
	
	.span_8_of_10 
		{
		width: 100%; 
		}
	
	.span_7_of_10 
		{
		width: 100%; 
		}
	
	.span_6_of_10 
		{
		width: 100%; 
		}
	
	.span_5_of_10 
		{
		width: 100%; 
		}
	
	.span_4_of_10 
		{
		width: 100%; 
		}
	
	.span_3_of_10 
		{
		width: 100%; 
		}
	
	.span_2_of_10 
		{
		width: 100%; 
		}
	
	.span_1_of_10 
		{
		width: 100%; 
		}
	}

/* --------------------------------------------------------------------------------------------------------------- GRID OF ELEVEN */

.span_11_of_11 
	{
	width: 100%;
	}

.span_10_of_11 
	{
	width: 90.76%;
	}

.span_9_of_11 
	{
	width: 81.52%;
	}

.span_8_of_11 
	{
	width: 72.29%;
	}

.span_7_of_11 
	{
	width: 63.05%; 
	}

.span_6_of_11 
	{
	width: 53.81%; 
	}

.span_5_of_11 
	{
	width: 44.58%; 
	}

.span_4_of_11 
	{
	width: 35.34%; 
	}

.span_3_of_11 
	{
	width: 26.1%;
	}

.span_2_of_11 
	{
	width: 16.87%; 
	}

.span_1_of_11 
	{
	width: 7.63%; 
	}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) 
	{
	
	.span_11_of_11 
		{
		width: 100%; 
		}
	
	.span_10_of_11 
		{
		width: 100%; 
		}
	
	.span_9_of_11 
		{
		width: 100%; 
		}
	
	.span_8_of_11 
		{
		width: 100%; 
		}
	
	.span_7_of_11 
		{
		width: 100%; 
		}
	
	.span_6_of_11 
		{
		width: 100%; 
		}
	
	.span_5_of_11 
		{
		width: 100%; 
		}
	
	.span_4_of_11 
		{
		width: 100%; 
		}
	
	.span_3_of_11 
		{
		width: 100%; 
		}
	
	.span_2_of_11 
		{
		width: 100%; 
		}
	
	.span_1_of_11 
		{
		width: 100%; 
		}
	}

/* --------------------------------------------------------------------------------------------------------------- GRID OF TWELVE */

.span_12_of_12 
	{
	width: 100%;
	}

.span_11_of_12 
	{
	width: 91.53%;
	}

.span_10_of_12 
	{
	width: 83.06%;
	}

.span_9_of_12 
	{
	width: 74.6%;
	}

.span_8_of_12 
	{
	width: 66.13%;
	}

.span_7_of_12 
	{
	width: 57.66%; 
	}

.span_6_of_12 
	{
	width: 49.2%; 
	}

.span_5_of_12 
	{
	width: 40.73%; 
	}

.span_4_of_12 
	{
	width: 32.26%; 
	}

.span_3_of_12 
	{
	width: 23.8%;
	}

.span_2_of_12 
	{
	width: 15.33%; 
	}

.span_1_of_12 
	{
	width: 6.86%; 
	}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) 
	{
	
	.span_12_of_12 
		{
		width: 100%; 
		}
	
	.span_11_of_12 
		{
		width: 100%; 
		}
	
	.span_10_of_12 
		{
		width: 100%; 
		}
	
	.span_9_of_12 
		{
		width: 100%; 
		}
	
	.span_8_of_12 
		{
		width: 100%; 
		}
	
	.span_7_of_12 
		{
		width: 100%; 
		}
	
	.span_6_of_12 
		{
		width: 100%; 
		}
	
	.span_5_of_12 
		{
		width: 100%; 
		}
	
	.span_4_of_12 
		{
		width: 100%; 
		}
	
	.span_3_of_12 
		{
		width: 100%; 
		}
	
	.span_2_of_12 
		{
		width: 100%; 
		}
	
	.span_1_of_12 
		{
		width: 100%; 
		}
	}