/* Micro Clearfix Hack */
.cf:before, .cf:after {
	content: ""; /* For modern browsers */
	display: table; /* For modern browsers */
} 

.cf:after {
	clear: both;
}

.cf {
	zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

/* Container */
.container {
	width: 90%;
	max-width: 980px;
	margin: auto;
	overflow: hidden;
}

/* Column Grid */
.grid {
	display: block; 
	position: relative; 
	width: 100%;
}

/* Media Queries */

/* Mobile Portrait */
@media only screen and (min-width: 320px) {
	body {
		font-size: 1em;
	}	
}

/* Mobile Landscape */
@media only screen and (min-width: 480px) {
	body {
		font-size: 1.125em;
	}
}

/* Small Tablet */
@media only screen and (min-width: 600px) {
	body {
		font-size: 1.25em;
	}
}

/* Tablet/Notebook */
@media only screen and (min-width: 768px) {
	body {
		font-size: 1.375em;
	}	 	
	
	/* Column Grid */
	.grid {
		display: inline; 
		float: left;
	}
	
	/* 2 Column Grid */
	.half {
		width: 48%;
		margin-left: 1%;
		margin-right: 1%;
	}
	
	/* 3 Column Grid One Third */
	.one-third {
		width: 48%;
		margin-left: 1%;
		margin-right: 1%;
	}
	
	/* 3 Column Grid Two Third */
	.two-third {
		width: 48%;
		margin-left: 1%;
		margin-right: 1%;
	}
	
	/* 4 Column Grid */
	.fourth {
		width: 48%;
		margin-left: 1%;
		margin-right: 1%;
	}
	
	/* 6 Column Grid Two Third */
	.sixth {
		width: 31.33333%;
		margin-left: 1%;
		margin-right: 1%;
	}
	
	/* 8 Column Grid */
	.eighth {
		width: 23%;
		margin-left: 1%;
		margin-right: 1%;
	}
	
}

/* Landscape Tablet/Notebook/Laptop */
@media only screen and (min-width: 1024px) { 	
	body {
		font-size: 1.375em;
	}
	
	/* 1 Column Grid */
	.full {
		width: 98%;
		margin-left: 1%;
		margin-right: 1%;
	}
	
	/* 2 Column Grid */
	.half {
		width: 48%;
		margin-left: 1%;
		margin-right: 1%;
	}
	
	/* 3 Column Grid - 3 Column Grid One Third  */
	.third, .one-third {
		width: 31.33333%;
		margin-left: 1%;
		margin-right: 1%;
	}	
	
	/* 3 Column Grid Two Third */
	.two-third {
		width: 64.66667%;
		margin-left: 1%;
		margin-right: 1%;
	}
	
	/* 4 Column Grid */
	.fourth {
		width: 23%;
		margin-left: 1%;
		margin-right: 1%;
	}
	
	/* 5 Column Grid */
	.fifth {
		width: 18%;
		margin-left: 1%;
		margin-right: 1%;
	}
	
	/* 6 Column Grid */
	.sixth {
		width: 14.66667%;
		margin-left: 1%;
		margin-right: 1%;
	}
	
	/* 7 Column Grid */
	.seventh {
		width: 12.28571%;
		margin-left: 1%;
		margin-right: 1%;
	}
	
	/* 8 Column Grid */
	.eighth {
		width: 10.5%;
		margin-left: 1%;
		margin-right: 1%;
	}
	
}

/* Desktop */
@media only screen and (min-width: 1280px) {
	body {
		font-size: 1.375em;
	}	
}

/* Widescreen */
@media only screen and (min-width: 1440px) { 
	body {
		font-size: 1.375em;
	}
}