/* Note: Design for a width of 320px */

.container { 
	width: 90%; 
	margin: 0 auto; 
	position: relative;
}
.columns,
.column { 
	margin: 0;
}

.column .region,
.columns .region { 
	margin: 0 10px;
}

.container .one.column,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column  { 
	width: 100%;
	margin: 0 auto;
}

#header .block {
	text-align: center;
}

#logo {
	text-align: center;
}




/* #Clearing
================================================== */

/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
.row:after,
.clearfix:after {
	clear: both;
}
.row,
.clearfix {
	zoom: 1;
}

/* You can also use a <br class="clear" /> to clear columns */
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

img.scale-with-grid {
	max-width: 100%;
	height: auto;
}