/*  GRID OF TWELVE   ============================================================================= */

.span_12_of_12 {
	width: 100%;
}

.span_11_of_12 {
	width: 91.46%;
}

.span_10_of_12 {
	width: 83%;
}

.span_9_of_12 {
	width: 74.54%;
}

.span_8_of_12 {
	width: 66.08%;
}

.span_7_of_12 {
	width: 57.62%; 
}

.span_6_of_12 {
	width: 49.16%; 
}

.span_5_of_12 {
	width: 40.7%; 
}

.span_4_of_12 {
	width: 32.24%; 
}

.span_3_of_12 {
	width: 23.78%;
}

.span_2_of_12 {
	width: 15.32%; 
}

.span_1_of_12 {
	width: 6.86%; 
}


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

@media only screen and (max-width: 768px) {
	.wrapper {
		border: none;
		margin: 0;
		max-width: 100%;
		min-width: 100%;
	}
	
/* HEADER */
	
	header {
		height: auto;
	}
	header h1,
	header div.logo {
		margin: 20px;
	}
	header nav {
		height: auto;
	}
	header nav ul {
		float: none;
		margin: 0;
		padding: 0;
		position: static;
	}
	header nav ul li {
		float: left;
		font-size: 120%;
		margin: 0 0 0 1.6%;
		padding: 0;
		width: 32.2%;
	}
	header nav ul li.active {
		background-image: none;
	}
	
/* Montage */
	
	.montage {
		margin: 10px 0;
	}
	
/* Homepage intro section */
	
	.intro {
		background: none;
	}
	.intro h2 {
		background: #f05929;
		font-size: 130%;
		margin: 0;
		padding: 6px 10px;
	}
	.intro p {
		margin: 1em 10px;
	}
	.welcome p {
		margin-right: 10%;
	}
	.news p {
		padding-right: 10px;
	}
	
/* Homepage buttons */
	
	.section.buttons {
		padding: 10px;
	}
	.buttons div.col {
		background-position: 0 30px;
	}
	.buttons div.col.archives {
		background-position: -500px 30px;
	}
	.buttons div.col.contact {
		background-position: -1000px 30px;
	}
	.buttons div.col:focus,
	.buttons div.col:hover,
	.buttons div.col:active {
		background-position: -1500px 30px
	}
	.buttons a,
	.buttons a:link,
	.buttons a:visited {
		background-position: right -521px;
		font-size: 160%;
		height: 210px;
		line-height: 1em;
		margin:  0 0 20px;
		padding: 10px 15px;
	}
	.buttons div.col.archives a,
	.buttons div.col.archives a:link,
	.buttons div.col.archives a:visited {
		background-position: right -980px;
	}
	.buttons div.col.contact a,
	.buttons div.col.contact a:link,
	.buttons div.col.contact a:visited {
		background-position: right -1440px;
	}
	
/* TITLE */

	#title h1.twoLine,
	#title h1 {
		padding-left: 10px;
	}
	#title .logos {
		margin: 10px 0 0;
	}
	#title .logos .section {
		padding: 0 10px 0;
	}
	
/* CONTENT */

	.topPad {
		background: #1c75ba;
		height: 20px;
		margin: 0 0 0 0;
	}
	aside .topPad {
		background: #d2d3d5;
		height: 20px;
		margin: 0 0 0 0;
	}
	.topPad {
		display: none;
	}
	.mainContent h2,
	.mainContent aside h2 {
		padding: 6px 10px;
		margin: 0;
	}
	.mainContent .contentBg,
	.archives .mainContent .contentBg,
	.contact .mainContent .contentBg {
		background: #fff;
		margin: 0;
		padding: 10px;
	}
	.mainContent h3 {
		background: #1c75ba;
	}
	.mainContent h4 {
		color: #000;
	}
	.mainContent p {
		color: #000;
	}
	.mainContent a,
	.mainContent a:link,
	.mainContent a:visited {
		color: #11558a;
	}
	
/* NEWS */
	
	.home .newsSummary p.postdate {
		padding: 1em 0 0;
	}
	.home .newsSummary p {
		margin: 0 0 0.8em;
		padding: 0;
	}
	.secondLvl .newsSummary p.postdate {
		color: #666;
	}
	
/* ASIDE */
	
	.secondLvl .mainContent aside nav,
	.secondLvl .mainContent aside .contentBg {
		background: rgba(0,0,0,0.1);
		margin: 0;
		padding: 10px 40% 10px 10px;
	}
	.mainContent aside .contentBg nav {
		background: transparent;
		max-width: 200px;
		padding: 0;
	}
	
/* FOOTER */	
	
	footer {
		margin-top: 20px;
	}
	
	footer .section,
	footer .section.top {
		padding-right: 10px;
		padding-left: 10px;
	}
	
/* Column change */
	
	.span_12_of_12 {
		width: 100%; 
	}
	.span_11_of_12 {
		width: 100%; 
	}
	.span_10_of_12 {
		width: 100%; 
	}
	.mainContent .span_8_of_12 {
		width: 100%; 
	}
	.span_7_of_12 {
		margin: 0;
		width: 100%; 
	}
	#title .logos .span_6_of_12 {
		width: 49.16%; 
	}
	.span_5_of_12 {
		margin: 0;
		width: 100%; 
	}
	#title .logos .span_5_of_12 {
		width: 40.7%; 
	}
	.mainContent .span_4_of_12 {
		margin-left: 0;
		width: 100%; 
	}
	.span_2_of_12 {
		width: 100%; 
	}
	.span_1_of_12 {
		width: 100%; 
	}
}

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

@media only screen and (max-width: 480px) {
	
	header h1,
	header div.logo {
		background-position: 0 -741px;
		margin: 10px 0 0 10px;
		width: 300px;
	}

/* Nav */

	header nav ul li {
		float: none;
		margin: 0;
		width: 100%;
	}
	header nav ul li a,
	header nav ul li a:link,
	header nav ul li a:visited {
		background: #1c75ba;
		border-bottom: none;
		color: #fff;
		display: block;
		font-weight: 400;
		line-height: 0.80em;
		margin: 0 0 1px;
		padding: 10px;
		text-decoration: none;
	}
	header nav ul li.archives a,
	header nav ul li.archives a:link,
	header nav ul li.archives a:visited {
		background: #38b24a;
		border-bottom: none;
	}
	header nav ul li.contact a,
	header nav ul li.contact a:link,
	header nav ul li.contact a:visited {
		background: #bf1f2e;
		border-bottom: none;
	}
	header nav ul li.active a,
	header nav ul li.active a:link,
	header nav ul li.active a:visited,
	header nav ul li.active.archives a,
	header nav ul li.active.archives a:link,
	header nav ul li.active.archives a:visited,
	header nav ul li.active.contact a,
	header nav ul li.active.contact a:link,
	header nav ul li.active.contact a:visited {
		background-color: #000;
	}
	
	
	.montage {
		display: none;
	}
	.intro {
		margin-top: 10px;
	}
	.welcome p {
		margin-right: 10px;
	}
	.buttons div.col {
		background: none;
		margin-bottom: 4px;
	}
	.buttons a,
	.buttons a:link,
	.buttons a:visited {
		background-position: right -582px;
		height: 150px;
		margin: 0;
	}
	.buttons div.col.archives a,
	.buttons div.col.archives a:link,
	.buttons div.col.archives a:visited {
		background-position: right -1040px;
	}
	.buttons div.col.contact a,
	.buttons div.col.contact a:link,
	.buttons div.col.contact a:visited {
		background-position: right -1500px;
	}
	
/* TITLE */
	
	#title .logos img {
		margin-right: 20px;
	}
	
/* FORM */

div.contactform label,
div.contactform input,
div.contactform textarea {
	float: none;
	width: 100%;
}
div.contactform p.error {
	margin: 6px 0 0;
}
div.contactform .submit {
	margin:  0;
}
	
/* Column change */
	
	.span_9_of_12 {
		width: 100%; 
	}
	.span_8_of_12 {
		width: 100%; 
	}
	#title .span_6_of_12 {
		width: 100%;
	}
	#title .span_4_of_12 {
		width: 32.24%; 
	}
	.span_4_of_12 {
		width: 100%; 
	}
	.span_3_of_12 {
		width: 100%; 
	}
	#title .span_3_of_12 {
		width: 23.78%;
	}
}