/*
	960 Grid System ~ Core CSS.
	Learn more ~ http://960.gs/
	Licensed under GPL and MIT.
*/

/* =Containers
--------------------------------------------------------------------------------*/
.container
{
	width: 90%;
	margin-left: 4%;
	margin-right: 4%;
}

/* =Grid >> Global
--------------------------------------------------------------------------------*/
.grid1,
.grid2,
.grid3,
.grid4,
.grid5,
.grid6,
.grid7,
.grid8,
.grid9,
.grid10,
.grid11,
.grid12
{
	display: inline;
	float: left;
	margin-left: 1%;
	margin-right: 1%;
}

.grid2_4{margin-left: auto; margin-right: auto; float: none; display: inline-block;}
/* =Grid >> Children (Alpha ~ First, Omega ~ Last)
--------------------------------------------------------------------------------*/
.alpha{margin-left: 0;}
.omega{margin-right: 0;}
/* =Grid >> 12 Columns
--------------------------------------------------------------------------------*/
.grid1{width: 48%;}
.grid2, .grid2_4{width: 48%;}
.grid3{width: 98%;}
.grid4{width: 98%;}
.grid5{width: 98%;}
.grid6{width: 98%;}
.grid7{width: 98%;}
.grid8{width: 98%;}
.grid9{width: 98%;}
.grid10{width: 98%;}
.grid11{width: 98%;}
.grid12{width: 98%;}
/* =Clear Floated Elements
--------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
html body * span.clear,
html body * div.clear,
html body * li.clear,
html body * dd.clear
{
	background: none;
	border: 0;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://www.positioniseverything.net/easyclearing.html */
.clearfix:after
{
	clear: both;
	content: '.';
	display: block;
	visibility: hidden;
	height: 0;
}

.clearfix
{
	display: inline-block;
}

* html .clearfix
{
	height: 1%;
}

.clearfix
{
	display: block;
}

/* My stuff */
.mainButton
{
    width: 100%;
    float: left;
    margin-bottom: 2%;
}
#header{position: relative;}
#search{margin-top: 2%;}
#background{width: 98%; margin-left: 1%; margin-right: 1%; position: absolute; z-index: -1; height: 100%;}
#navigation ul, #navigation li, #mainNav ul, #mainNav li, #footer ul, #footer li{margin: 0; padding: 0;}
#navigation li, #mainNav li, #footer li{display: inline;}
#navigation a, #footer a{margin-left: 1.1%; margin-right: 1.1%;}
#mainNav a{padding-left: 3%; padding-right: 3%; padding-top: 0.5%; padding-bottom: 0.5%;}
#mainNav li{ width: 10%;}
#mainButtons{margin-top: 1.5%;}
#mainButtons a{text-decoration: none;}
#mainButton1,#mainButton2,#mainButton3{position: relative;}
#mainButtons span{position: absolute; right: 1%; bottom: 1%;}
#mainButtons text{position: absolute; right: 1%; bottom: 1%;}
#breadcrumbs{margin-bottom: 1%;}
#mainNav{padding: .5% 0 .5% 0;}
#mapQLD{margin-top: 1%;}
#mapQLD img{max-width: none;}
.articlePreview{margin-top: 2%; height: 450px; position: relative;}
.articlePreview p{margin-bottom: 2%; height: 40%; overflow: hidden;}
.articleIcon{width: 98%; height: 60%; background-color: transparent; background-repeat:  no-repeat; background-position: bottom center; background-size: contain; margin-left: auto; margin-right: auto; margin-top: 2%;}
#footer{border: 4px solid #005596; margin-bottom: 1%; border-radius: 0px; padding: 2px 2px 3px 2px; background-color: #005596;}

@media screen and (min-width: 480px)
{
.grid1{width: 48%;}
.grid2{width: 48%;}
.grid3{width: 48%;}
.grid4{width: 48%;}
.grid5{width: 98%;}
.grid6{width: 98%;}
.grid7{width: 98%;}
.grid8{width: 98%;}
.grid9{width: 98%;}
.grid10{width: 98%;}
.grid11{width: 98%;}
.grid12{width: 98%;}
}

@media screen and (max-width: 640px)
{
    .container{width: 100%;margin-left: 0; margin-right: 0;}    
    .grid2{width: 50%; margin-left: 0; margin-right: 0;}
    .grid4, .grid8, .grid10, .grid12, #background{width: 100%;margin-left: 0; margin-right: 0;}    
    #awa,#wqa{width: 48%}
    #logo{width: 50%;}    
    #navigation{width: 50%;}
    #navigation li{display: block;}
    #search{width: 100%;}
    #sideMenu{width: 100%;}
    #mainNav a{padding-left: 3%; padding-right: 3%;}
    #mainButtons{width: 100%;}
    .mainButton{margin-bottom: 2%;}
    .tileGap, #mapsGap{display:none !important;}   
    #contactLink{display: none !important;}
    #aboutLink{display:none !important;}
    #news, #caseStudy, #social{margin-top: 4%; width: 96%; margin-left: 2%; margin-right: 2%;}    
}