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

	.wrap												{ width: 1300px;}
	.container              		{ position: relative; width: 1200px; 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: 50px; }
	.column-02									{ width: 100px; }
	.column-03									{ width: 150px; }
	.column-04									{ width: 200px; }
	.column-05									{ width: 250px; }
	.column-06									{ width: 300px; }
	.column-07									{ width: 350px; }
	.column-08									{ width: 400px; }
	.column-09									{ width: 450px; }
	.column-10									{ width: 500px;	}
	.column-11									{ width: 550px; }
	.column-12									{ width: 600px; }
	.column-13									{ width: 650px; }
	.column-14									{ width: 700px; }
	.column-15									{ width: 750px;	}
	.column-16									{ width: 800px; }
	.column-17									{ width: 850px; }
	.column-18									{ width: 900px; }
	.column-19									{ width: 950px; }
	.column-20									{ width: 1000px; }
	.column-21									{ width: 1050px; }
	.column-22									{ width: 1100px; }
	.column-23									{ width: 1150px; }
	.column-24									{ width: 1200px; }

/* Offsets */
	.offset-01									{ padding-left: 50px; }
	.offset-02									{ padding-left: 100px; }
	.offset-03									{ padding-left: 150px; }
	.offset-04									{ padding-left: 200px; }
	.offset-05									{ padding-left: 250px; }
	.offset-06									{ padding-left: 300px; }
	.offset-07									{ padding-left: 350px; }
	.offset-08									{ padding-left: 400px; }
	.offset-09									{ padding-left: 450px; }
	.offset-10									{ padding-left: 500px; }	
	.offset-11									{ padding-left: 550px; }
	.offset-12									{ padding-left: 600px; }
	.offset-13									{ padding-left: 650px; }
	.offset-14									{ padding-left: 700px; }
	.offset-15									{ padding-left: 750px; }
	.offset-16									{ padding-left: 800px; }
	.offset-17									{ padding-left: 850px; }
	.offset-18									{ padding-left: 900px; }
	.offset-19									{ padding-left: 950px; }
	.offset-20									{ padding-left: 1000px; }
	.offset-21									{ padding-left: 1050px; }
	.offset-22									{ padding-left: 1100px; }
	.offset-23									{ padding-left: 1150px; }
	
	
	.right {
		float: right;
	}

/* #Small Screen 
================================================== */

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

@media only screen and (min-width: 1000px) and (max-width: 1299px) {
	.wrap 											{ width: 1000px; }
	.container                	{ width: 960px; }



/* Base Grid */
	.column-01									{ width: 40px; }
	.column-02									{ width: 80px; }
	.column-03									{ width: 120px; }
	.column-04									{ width: 160px; }
	.column-05									{ width: 200px; }
	.column-06									{ width: 240px; }
	.column-07									{ width: 280px; }
	.column-08									{ width: 320px; }
	.column-09									{ width: 360px; }
	.column-10									{ width: 400px;	}
	.column-11									{ width: 440px; }
	.column-12									{ width: 480px; }
	.column-13									{ width: 520px; }
	.column-14									{ width: 560px; }
	.column-15									{ width: 600px;	}
	.column-16									{ width: 640px; }
	.column-17									{ width: 680px; }
	.column-18									{ width: 720px; }
	.column-19									{ width: 760px; }
	.column-20									{ width: 800px; }
	.column-21									{ width: 840px; }
	.column-22									{ width: 880px; }
	.column-23									{ width: 920px; }
	.column-24									{ width: 960px; }

/* Offsets */
	.offset-01									{ padding-left: 40px; }
	.offset-02									{ padding-left: 80px; }
	.offset-03									{ padding-left: 120px; }
	.offset-04									{ padding-left: 160px; }
	.offset-05									{ padding-left: 200px; }
	.offset-06									{ padding-left: 240px; }
	.offset-07									{ padding-left: 280px; }
	.offset-08									{ padding-left: 320px; }
	.offset-09									{ padding-left: 360px; }
	.offset-10									{ padding-left: 400px; }	
	.offset-11									{ padding-left: 440px; }
	.offset-12									{ padding-left: 480px; }
	.offset-13									{ padding-left: 520px; }
	.offset-14									{ padding-left: 560px; }
	.offset-15									{ padding-left: 600px; }
	.offset-16									{ padding-left: 640px; }
	.offset-17									{ padding-left: 680px; }
	.offset-18									{ padding-left: 720px; }
	.offset-19									{ padding-left: 760px; }
	.offset-20									{ padding-left: 800px; }
	.offset-21									{ padding-left: 840px; }
	.offset-22									{ padding-left: 880px; }
	.offset-23									{ padding-left: 920px; }
}


/* #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: ' ';
	}