/* 960 Grid 12 Col */
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

.container { position:relative; width:960px; margin:0 auto; padding:0; }
.container .col { float:left; display:inline; margin-left:10px; margin-right:10px; }
.row { margin-bottom:20px; }

/* Nested Column Classes */
.container .col.no-l { margin-left:0; }
.container .col.no-r { margin-right:0; }
.container .col.no-m { margin-left:0; margin-right:0; }
	
/* Base Grid */
.container .col.span-1 { width:60px;  }
.container .col.span-2 { width:140px; }
.container .col.span-3 { width:220px; }
.container .col.span-4 { width:300px; }
.container .col.span-5 { width:380px; }
.container .col.span-6 { width:460px; }
.container .col.span-7 { width:540px; }
.container .col.span-8 { width:620px; }
.container .col.span-9 { width:700px; }
.container .col.span-10 { width:780px; }
.container .col.span-11 { width:860px; }
.container .col.span-12 { width:940px; }

/* Offsets */
.container .offset-1 { padding-left:80px;  }
.container .offset-2 { padding-left:160px; }
.container .offset-3 { padding-left:240px; }
.container .offset-4 { padding-left:320px; }
.container .offset-5 { padding-left:400px; }
.container .offset-6 { padding-left:480px; }
.container .offset-7 { padding-left:560px; }
.container .offset-8 { padding-left:640px; }
.container .offset-9 { padding-left:720px; }
.container .offset-10 { padding-left:800px; }
.container .offset-11 { padding-left:880px; }

/* Tablet (Portrait) */
/* Note:Design for a width of 768px */
@media only screen and (min-width:768px) and (max-width:977px) 
	{
	.container { width:768px; }
	.container .col { margin-left:10px; margin-right:10px;  }
	.container .col.nolft { margin-left:0; margin-right:10px; }
	.container .col.norgt { margin-right:0; margin-left:10px; }
	.container .nolft.norgt { margin-left:0; margin-right:0; }

	.container .col.span-1 { width:44px; }
	.container .col.span-2 { width:108px; }
	.container .col.span-3 { width:172px; }
	.container .col.span-4 { width:236px; }
	.container .col.span-5 { width:300px; }
	.container .col.span-6 { width:364px; }
	.container .col.span-7 { width:428px; }
	.container .col.span-8 { width:492px; }
	.container .col.span-9 { width:556px; }
	.container .col.span-10 { width:620px; }
	.container .col.span-11 { width:684px; }
	.container .col.span-12 { width:748px; }

    .container .offset-1 { padding-left:64px; }
	.container .offset-2 { padding-left:128px; }
	.container .offset-3 { padding-left:192px; }
	.container .offset-4 { padding-left:256px; }
	.container .offset-5 { padding-left:320px; }
	.container .offset-6 { padding-left:384px; }
	.container .offset-7 { padding-left:448px; }
	.container .offset-8 { padding-left:512px; }
	.container .offset-9 { padding-left:576px; }
	.container .offset-10 { padding-left:640px; }
	.container .offset-11 { padding-left:704px; }
    }

/* Mobile (Portrait) */
/* Note:Design for a width of 320px */
@media only screen and (max-width:767px) 
	{
	.container { width:100%; }
	.container .col { margin:0; }

	.container .col.span-1,
	.container .col.span-2,
	.container .col.span-3,
	.container .col.span-4,
	.container .col.span-5,
	.container .col.span-6,
	.container .col.span-7,
	.container .col.span-8,
	.container .col.span-9,
	.container .col.span-10,
	.container .col.span-11,
	.container .col.span-12 { width:100%; }

    /* Offsets */
	.container .offset-1,
	.container .offset-2,
	.container .offset-3,
	.container .offset-4,
	.container .offset-5,
	.container .offset-6,
	.container .offset-7,
	.container .offset-8,
	.container .offset-9,
	.container .offset-10,
	.container .offset-11 { padding-left:0; }
	}

/* Mobile (Landscape) */
/* Note:Design for a width of 480px */
@media only screen and (min-width:480px) and (max-width:767px)
	{
	.container { width:100%; }
	.container .col { margin:0; }

	.container .col.span-1,
	.container .col.span-2,
	.container .col.span-3,
	.container .col.span-4,
	.container .col.span-5,
	.container .col.span-6,
	.container .col.span-7,
	.container .col.span-8,
	.container .col.span-9,
	.container .col.span-10,
	.container .col.span-11,
	.container .col.span-12  { width:100%; }
    }


/* Clearing */

/* Self Clearing */
.container:after { content:"."; 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:"."; 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; }