/*

	------------------------------------------------------------------
	
	Zero Sum HTML Theme - Layouts Stylesheet

	------------------------------------------------------------------
	
*/


/* -- 1. 960 - Full Width (Main Grid Layout) -- */

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

/* -- Nested Column Classes -- */
.column.alpha, .columns.alpha               { margin-left: 0; }
.column.omega, .columns.omega               { margin-right: 0; }

/* -- Grid -- */
.container .one.column,
.container .one.columns                     { width: 60px; }
.container .two.columns                     { width: 140px; }
.container .three.columns                   { width: 220px; }
.container .four.columns                    { width: 300px; }
.container .five.columns                    { width: 380px; }
.container .six.columns                     { width: 450px; }
.container .seven.columns                   { width: 540px; }
.container .eight.columns                   { width: 620px; }
.container .nine.columns                    { width: 700px; }
.container .ten.columns                     { width: 780px; }
.container .eleven.columns                  { width: 860px; }
.container .twelve.columns                  { width: 940px; }

/* -- Offsets -- */
.container .offset-by-one                   { padding-left: 80px;  }
.container .offset-by-two                   { padding-left: 160px; }
.container .offset-by-three                 { padding-left: 240px; }
.container .offset-by-four                  { padding-left: 320px; }
.container .offset-by-five                  { padding-left: 400px; }
.container .offset-by-six                   { padding-left: 480px; }
.container .offset-by-seven                 { padding-left: 560px; }
.container .offset-by-eight                 { padding-left: 640px; }
.container .offset-by-nine                  { padding-left: 720px; }
.container .offset-by-ten                   { padding-left: 800px; }
.container .offset-by-eleven                { padding-left: 880px; }




/* -- 2. 768 - Tablet (Portrait) -- */

@media only screen and (min-width: 768px) and (max-width: 959px) {

	.container                              { width: 768px; }
	.container .column,
	.container .columns                     { margin-left: 10px; margin-right: 10px;  }
	.column.alpha, .columns.alpha           { margin-left: 0; margin-right: 10px; }
	.column.omega, .columns.omega           { margin-right: 0; margin-left: 10px; }
	.alpha.omega                            { margin-left: 0; margin-right: 0; }

	/* -- Grid -- */
	.container .one.column,
	.container .one.columns                 { width: 44px; }
	.container .two.columns                 { width: 108px; }
	.container .three.columns               { width: 172px; }
	.container .four.columns                { width: 236px; }
	.container .five.columns                { width: 300px; }
	.container .six.columns                 { width: 364px; }
	.container .seven.columns               { width: 428px; }
	.container .eight.columns               { width: 492px; }
	.container .nine.columns                { width: 556px; }
	.container .ten.columns                 { width: 620px; }
	.container .eleven.columns              { width: 684px; }
	.container .twelve.columns              { width: 748px; }

	/* -- Offsets -- */
	.container .offset-by-one               { padding-left: 64px; }
	.container .offset-by-two               { padding-left: 128px; }
	.container .offset-by-three             { padding-left: 192px; }
	.container .offset-by-four              { padding-left: 256px; }
	.container .offset-by-five              { padding-left: 320px; }
	.container .offset-by-six               { padding-left: 384px; }
	.container .offset-by-seven             { padding-left: 448px; }
	.container .offset-by-eight             { padding-left: 512px; }
	.container .offset-by-nine              { padding-left: 576px; }
	.container .offset-by-ten               { padding-left: 640px; }
	.container .offset-by-eleven            { padding-left: 704px; }
	
}




/* -- 3. 320 - Mobile (Portrait) -- */

@media only screen and (max-width: 767px) {

	.container 								{ width: 300px; }
	.container .columns,
	.container .column 						{ margin: 0; }
	
	/* -- Grid -- */
	.container .one.column,
	.container .one.columns,
	.container .two.columns,
	.container .three.columns,
	.container .four.columns,
	.container .five.columns,
	.container .six.columns,
	.container .seven.columns,
	.container .eight.columns,
	.container .nine.columns,
	.container .ten.columns,
	.container .eleven.columns,
	.container .twelve.columns 				{ width: 300px; }

	/* Offsets */
	.container .offset-by-one,
	.container .offset-by-two,
	.container .offset-by-three,
	.container .offset-by-four,
	.container .offset-by-five,
	.container .offset-by-six,
	.container .offset-by-seven,
	.container .offset-by-eight,
	.container .offset-by-nine,
	.container .offset-by-ten,
	.container .offset-by-eleven 			{ padding-left: 0; }

}




/* -- 4. 480 - Mobile (Landscape) -- */

@media only screen and (min-width: 480px) and (max-width: 767px) {

	.container 								{ width: 420px; }
	.container .columns,
	.container .column 						{ margin: 0; }
	
	/* -- Grid -- */
	.container .one.column,
	.container .one.columns,
	.container .two.columns,
	.container .three.columns,
	.container .four.columns,
	.container .five.columns,
	.container .six.columns,
	.container .seven.columns,
	.container .eight.columns,
	.container .nine.columns,
	.container .ten.columns,
	.container .eleven.columns,
	.container .twelve.columns 				{ width: 420px; }

}