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

	.wrap																				{ width: 1000px; }
	.container                                  { position: relative; width: 960px; margin: 0 auto;}
  .row                                        { padding-bottom: 10px; padding-top: 10px; }
	

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

    }


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

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

    @media only screen and (min-width: 480px) and (max-width: 767px) {
    .wrap															{ width: 480px;}
		.container 												{ width: 420px; }

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