/* ==========================================================================
   Columns (Responsive grid system)
   ========================================================================== */

/* 
 * Grid column setup  
 */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 2%;
}
.content-col > input {
	width:100%;
}
.content-col {
	display: block;
	float:left;
	margin: 1% 0 1% 2%;
}
.content-col:first-child {
	margin-left: 0;
}
.first-child {
	margin-left:0;
}
.sidebar > .col:first-child { /* all browsers except IE6 and lower */
	padding:0 0 0 2%;
	margin-left:0;
	margin-right: 1%;
	background: #c6e9f1;
	width:23.5%;
} 
.sidebar > .col:first-child ul li a {
	color:#02667a;	
}
.sidebar > .col:first-child ul li ul li a {
	color:#333333;	
}
.sidebar > .col:first-child ul li ul li a:hover {
	color:#e55302;	
}
.sidebar > .col:last-child { /* all browsers except IE6 and lower */
	border-left:1px solid #ccc; 
	padding-left:1.8%;
	margin-right:0;
	width:22.5%;
}
.nosidebar > .col:first-child { /* all browsers except IE6 and lower */
	padding:0 0 0 2%;
	margin-left:0;
	margin-right: 1%;
	background: #c6e9f1;
	width:23.5%;
	margin-bottom:25px;
} 
.nosidebar > .col:first-child ul li a {
	color:#02667a;	
}
.nosidebar > .col:first-child ul li ul li a {
	color:#333333;	
}
.nosidebar > .col:first-child ul li ul li a:hover {
	color:#e55302;	
}
.nosidebar > .col:last-child { /* all browsers except IE6 and lower */
	border-left:0px solid #ccc; 
	padding-left:0;
	margin-right:0;
	width:100%;
}
.sidebar #maincontent {
	width:48.25%;
}
.nosidebar #maincontent {
	width:71.5%;
}

/* 
 * Grid of 2  
 */
.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 48%;
}

/* 
 * Grid of 3 
 */
.span_3_of_3 {
	width: 100%; 
}
.span_2_of_3 {
	width: 66.13%; 
}
.span_1_of_3 {
	width: 31.6%;
}

/* 
 * Grid of 4  
 */
.span_4_of_4 {
	width: 100%; 
}
.span_3_of_4 {
	width: 73.5%; 
}
.span_2_of_4 {
	width: 48%; 
}
.span_1_of_4 {
	width: 22.5%; 
}

/* 
 * Grid of 5  
 */
.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%;
}

/* 
 * Grid of 6  
 */
.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%;
}

/* 
 * Grid of 7  
 */
.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%;
}

/* 
 * Grid of 8  
 */
.span_8_of_8 {
	width: 100%;
}
.span_7_of_8 {
	width: 87.25%; 
}
.span_6_of_8 {
	width: 74.5%; 
}
.span_5_of_8 {
	width: 61.75%; 
}
.span_4_of_8 {
	width: 49%; 
}
.span_3_of_8 {
	width: 36.25%;
}
.span_2_of_8 {
	width: 23.5%; 
}
.span_1_of_8 {
	width: 10.75%; 
}

/* 
 * Grid of 9  
 */
.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: 10.8%;
}

/* 
 * Grid of 10
 */
.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%; 
}

/* 
 * Grid of 11
 */
.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%; 
}

/* 
 * Grid of 12
 */
.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%; 
}

@media only screen and (max-width: 860px) {
	#topnav ul li.col { 
		width: 100%;
	}
}

@media only screen and (max-width: 768px) {
	.sidebar > .col:last-child { 
		width:100%;
		border-left:0;
		padding-left:0;
		margin-right:0;
	}
	#content .col:first-child {
		width: 100%;
		margin: 0;
		padding: 0 2%;
		box-sizing:border-box;
	}
	#content .span_1_of_4 {
		width: 30.5%; 
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		transition: all 0.2s ease;			
	}
	.sidebar #maincontent, .nosidebar #maincontent {
		box-sizing:border-box;
		width:100%;
		padding: 0 1.063em 1.063em 1.063em;	
		margin: 0;
		margin-bottom: 1.063em;
		border-bottom: 1px solid #ccc;
	}
}

@media only screen and (max-width: 600px) {
		.span_1_of_2, .span_1_of_3, .span_2_of_3, .span_1_of_4, #content .span_1_of_4, .span_2_of_4, .span_3_of_4, .span_1_of_5, .span_2_of_5, .span_3_of_5, .span_4_of_5, .span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_1_of_7, .span_2_of_7, .span_3_of_7, .span_4_of_7, .span_5_of_7, .span_6_of_7, .span_1_of_8, .span_2_of_8, .span_3_of_8, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_1_of_9, .span_2_of_9, .span_3_of_9, .span_4_of_9, .span_5_of_9, .span_6_of_9, .span_7_of_9, .span_8_of_9, .span_1_of_10, .span_2_of_10, .span_3_of_10, .span_4_of_10, .span_5_of_10, .span_6_of_10, .span_7_of_10, .span_8_of_10, .span_9_of_10, .span_1_of_11, .span_2_of_11, .span_3_of_11, .span_4_of_11, .span_5_of_11, .span_6_of_11, .span_7_of_11, .span_8_of_11, .span_9_of_11, .span_10_of_11, .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12
	{
		width: 100%;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		transition: all 0.2s ease;	
	}
	.col { 
		margin: 1% 0 1% 0%;
	}
	.content-col { 
		margin: 1% 0 1% 0%;
	}				
}

@media only screen and (max-width: 480px) {

}

@media only screen and (max-width: 320px) {

}