@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/* Mobile Layout: 480px and below. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;}
header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#nav-link{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #83add3
}
	
nav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #888
}
section {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color:#888;
	}
	#col1 {/*main content*/
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
		background-color:#FFF;
	}
	#col2 {/*sidebar*/
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
		background-color:#888;
	}
	#col3 {/*fullwidth*/
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
		background-color:#FFF;
	}
footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color:#696a6d;
	background-image:url(../images/logo-grey.jpg);
	background-position: center 10px;
	background-repeat:no-repeat;
}

/* Tablet Layout: 600px to 1000px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 600px) {
.gridContainer {
	width: 100%;
}
header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
nav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
section {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color:#888;
	}
	#col1 {/*main content*/
		clear: both;
		float: right;
		margin-left: 0;
		width: 71.25%;
		display: block;
		background-color:#FFF;
	}
	#col2 {/*sidebar*/
		clear: none;
		float: left;
		margin-left: 0;
		width: 28.75%;
		display: block;
		background-color:#888;
	}
footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color:#696a6d;
	background-image:url(../images/logo-grey.jpg);
	background-position: 15px center;
	background-repeat:no-repeat;
}
}

/* Desktop Layout: 1000px to a max of 1000px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1002px) {
.gridContainer {
	width: 100%;
	max-width: 998px;
	margin: auto;
	border-left:1px solid #999;
	border-right:1px solid #999;

}
header {
	clear: both;
	float: left;
	margin-left: 0;
	height:300px;
	display: block;
}
#nav-link{
	display: none;
}
nav {
	/*clear: both;
	float: left;*/
	position:absolute;
	top: 299px;
	margin-left: 0;
	width: 998px;
	display: block;
}
section {
	clear: both;
	float: left;
	margin-left: 0;
	margin-top:30px;
	width: 100%;
	display: block;
	background-color:#888;
	}
	#col1 {/*main content*/
		clear: both;
		float: right;
		margin: 0;
		width: 71.25%;
		display: block;
		background-color:#FFF;
	}
	#col2 {/*sidebar*/
		clear: none;
		float: left;
		margin-left: 0;
		width: 28.75%;
		display: block;
		background-color:#888;
	}
footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color:#696a6d;
	background-image:url(../images/logo.png);
	background-position: 50px center;
	background-repeat:no-repeat;
}
}