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

	.wrap												{ width: 1000px;}
	.container              		{ position: relative; width: 912px; margin: 0 auto;}


/* Column */	
	.column-01,
	.column-02,
	.column-03,
	.column-04,
	.column-05,
	.column-06,
	.column-07,
	.column-08,
	.column-09,
	.column-10,
	.column-11,
	.column-12,
	.column-13,
	.column-14,
	.column-15,
	.column-16,
	.column-17,
	.column-18,
	.column-19,
	.column-20,
	.column-21,
	.column-22,
	.column-23,
	.column-24									{ float: left; }

/* Base Grid */
	.column-01									{ width: 38px; }
	.column-02									{ width: 76px; }
	.column-03									{ width: 114px; }
	.column-04									{ width: 152px; }
	.column-05									{ width: 190px; }
	.column-06									{ width: 228px; }
	.column-07									{ width: 266px; }
	.column-08									{ width: 304px; }
	.column-09									{ width: 342px; }
	.column-10									{ width: 380px;	}
	.column-11									{ width: 418px; }
	.column-12									{ width: 456px; }
	.column-13									{ width: 494px; }
	.column-14									{ width: 532px; }
	.column-15									{ width: 570px;	}
	.column-16									{ width: 608px; }
	.column-17									{ width: 646px; }
	.column-18									{ width: 684px; }
	.column-19									{ width: 722px; }
	.column-20									{ width: 760px; }
	.column-21									{ width: 798px; }
	.column-22									{ width: 836px; }
	.column-23									{ width: 874px; }
	.column-24									{ width: 912px; }

/* Offsets */
	.offset-01									{ padding-left: 38px; }
	.offset-02									{ padding-left: 76px; }
	.offset-03									{ padding-left: 114px; }
	.offset-04									{ padding-left: 152px; }
	.offset-05									{ padding-left: 190px; }
	.offset-06									{ padding-left: 228px; }
	.offset-07									{ padding-left: 266px; }
	.offset-08									{ padding-left: 304px; }
	.offset-09									{ padding-left: 342px; }
	.offset-10									{ padding-left: 380px;	}
	.offset-11									{ padding-left: 418px; }
	.offset-12									{ padding-left: 456px; }
	.offset-13									{ padding-left: 494px; }
	.offset-14									{ padding-left: 532px; }
	.offset-15									{ padding-left: 570px;	}
	.offset-16									{ padding-left: 608px; }
	.offset-17									{ padding-left: 646px; }
	.offset-18									{ padding-left: 684px; }
	.offset-19									{ padding-left: 722px; }
	.offset-20									{ padding-left: 760px; }
	.offset-21									{ padding-left: 798px; }
	.offset-22									{ padding-left: 836px; }
	.offset-23									{ padding-left: 874px; }
	.offset-24									{ padding-left: 912px; }
	
	
	.right {
		float: right;
	}



/* #Tablet (Portrait)
================================================== */

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

@media only screen and (min-width: 768px) and (max-width: 999px) {
	.wrap 											{ width: 768px; }
	.container                	{ width: 720px; }


/* Base Grid */
	.column-01									{ width: 30px; }
	.column-02									{ width: 60px; }
	.column-03									{ width: 90px; }
	.column-04									{ width: 120px; }
	.column-05									{ width: 150px; }
	.column-06									{ width: 180px; }
	.column-07									{ width: 210px; }
	.column-08									{ width: 240px; }
	.column-09									{ width: 270px; }
	.column-10									{ width: 300px; }
	.column-11									{ width: 330px; }
	.column-12									{ width: 360px; }
	.column-13									{ width: 390px; }
	.column-14									{ width: 420px; }
	.column-15									{ width: 450px; }
	.column-16									{ width: 480px; }
	.column-17									{ width: 510px; }
	.column-18									{ width: 540px; }
	.column-19									{ width: 570px; }
	.column-20									{ width: 600px; }
	.column-21									{ width: 630px; }
	.column-22									{ width: 660px; }
	.column-23									{ width: 690px; }
	.column-24									{ width: 720px; }

/* Offsets */
	.offset-01									{ padding-left: 30px; }
	.offset-02									{ padding-left: 60px; }
	.offset-03									{ padding-left: 90px; }
	.offset-04									{ padding-left: 120px; }
	.offset-05									{ padding-left: 150px; }
	.offset-06									{ padding-left: 180px; }
	.offset-07									{ padding-left: 210px; }
	.offset-08									{ padding-left: 240px; }
	.offset-09									{ padding-left: 270px; }
	.offset-10									{ padding-left: 300px; }
	.offset-11									{ padding-left: 330px; }
	.offset-12									{ padding-left: 360px; }
	.offset-13									{ padding-left: 390px; }
	.offset-14									{ padding-left: 420px; }
	.offset-15									{ padding-left: 450px; }
	.offset-16									{ padding-left: 480px; }
	.offset-17									{ padding-left: 510px; }
	.offset-18									{ padding-left: 540px; }
	.offset-19									{ padding-left: 570px; }
	.offset-20									{ padding-left: 600px; }
	.offset-21									{ padding-left: 630px; }
	.offset-22									{ padding-left: 660px; }
	.offset-23									{ padding-left: 690px; }
}


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

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

@media only screen and (max-width: 767px) {
	.wrap	   										{ width: 320px;}
	.container 									{ width: 300px; padding-left: 0; }

/* Base Grid */
	.column-01,
	.column-02,
	.column-03,
	.column-04,
	.column-05,
	.column-06,
	.column-07,
	.column-08,
	.column-09,
	.column-10,
	.column-11,
	.column-12,
	.column-13,
	.column-14,
	.column-15,
	.column-16,
	.column-17,
	.column-18,
	.column-19,
	.column-20,
	.column-21,
	.column-22,
	.column-23,
	.column-24									{ width: 300px; padding-left: 0; }

/* Offsets */
	.offset-01,
	.offset-02,
	.offset-03,
	.offset-04,
	.offset-05,
	.offset-06,
	.offset-07,
	.offset-08,
	.offset-09,
	.offset-10,
	.offset-11,
	.offset-12,
	.offset-13,
	.offset-14,
	.offset-15,
	.offset-16,
	.offset-17,
	.offset-18,
	.offset-19,
	.offset-20,
	.offset-21,
	.offset-22,
	.offset-23               		{ padding-left: 0px; }
	
	.right {
		float: none;
	}

}


/* #Mobile (Landscape)
================================================== */

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

@media only screen and (min-width: 480px) and (max-width: 767px) {
	.wrap	   										{ width: 440px;}
	.container 									{ width: 420px; }
	.container .columns,
	.container .column 					{ margin: 0; }

/* Base Grid */
	.column-01,
	.column-02,
	.column-03,
	.column-04,
	.column-05,
	.column-06,
	.column-07,
	.column-08,
	.column-09,
	.column-10,
	.column-11,
	.column-12,
	.column-13,
	.column-14,
	.column-15,
	.column-16,
	.column-17,
	.column-18,
	.column-19,
	.column-20,
	.column-21,
	.column-22,
	.column-23,
	.column-24									{ width: 420px; }
}


/* #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 */
	.clearAll {
		clear: both;
		display: block;
		overflow: hidden;
		visibility: hidden;
		line-height: 0.1;
		width: 0;
		height: 0;
		content: ' ';
	}