/* Table of Contents
==================================================
	#Base 960 Grid
	#Tablet (Portrait)
	#Mobile (Portrait)
	#Mobile (Landscape)
	#Clearing */

/* #Base 960 Grid
================================================== */

.container_24{
	position: relative;
	width: 960px;
	margin: 0 auto;
	padding: 0;}

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19, .grid_20, .grid_21, .grid_22, .grid_23, .grid_24{
	float: left;
	display: inline;
	margin-left:5px;
	margin-right:5px;}

/* Nested Column Classes */
.container_24 .alpha{
	margin: 0 15px;}

.container_24 .omega{
	margin-right: 0;}

/* Base Grid */
.container_24 .grid_5{
	width: 135px;}

.container_24 .grid_6{
	width: 120px;}

.container_24 .grid_7{
	width: 195px;}

.container_24 .grid_8{
	width: 295px;}
	
.container_24 .grid_8.item-image{
	margin-left: 0;}
	
.container_24 .grid_9{
	width: auto;}	
/* #Tablet (Portrait)
================================================== */

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

@media only screen and (max-width: 995px) {
		.container_24{
		    width: 768px;}
		
		.grid_8{
			margin-left: 5px;
			margin-right: 5px;}
			
		.container_24 .alpha{
			margin:  0 15px;}
			
		.container_24 .omega{
			margin-right: 0;}
			
		.container_24 .grid_5{
			width: 130px;}	
			
	    .container_24 .grid_6, .container_24 .grid_7{
			width: 135px;}
	
		.container_24 .grid_8, .container_24 .grid_8.item-image{
			width: 230px;}
}
/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */
@media only screen and (max-width: 767px) {
		.container_24 {
			width: 420px;}
		
		.grid_8{
			margin: 0 0 0 5px!important;}
		
		 .container_24 .grid_5, .container_24 .grid_6, .container_24 .grid_7, .container_24 .grid_8, .container_24 .grid_8.item-image{
			width: 400px;}
			
		.container_24 .alpha{
			margin: 0px;}
			
		.container_24 .omega{
			margin-left: 0px;}
}

/*  #Mobile (Portrait)
================================================== */

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

@media only screen and (max-width: 479px) {
		.container_24 {
			width: 300px;}
			
		.container_24 .grid_5, .container_24 .grid_6, .container_24 .grid_7, .container_24 .grid_8, .container_24 .grid_8.item-image{
			width: auto;}
}

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

/* Self Clearing Goodness */
.container_24: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;}