/*
Responsive 1200px grid system ~ Grid CSS.
Copyright 2013, André Gonçalves

12 Columns ~ Margin left: 14px ~ Margin right: 14px

Based on the 960.gs grid system - http://960.gs/
by Nathan Smith

Licensed under GPL and MIT
*/

/* =============================================================================
   960px Grid
   ========================================================================== */

/* @media only screen and (min-width: 960px) and (max-width: 1136px) { */

	body {min-width: 960px;}

	/* Container */
	.container {
		margin-left: auto;
		margin-right: auto;
		width: 960px;
	}

	/* Global */
	.grid-1,
	.grid-2,
	.grid-3,
	.grid-4,
	.grid-5,
	.grid-6,
	.grid-7,
	.grid-8,
	.grid-9,
	.grid-10,
	.grid-11,
	.grid-12 {
		display: inline;
		float: left;
		margin-left: 10px;
		margin-right: 10px;
	}

	.push-1, .pull-1,
	.push-2, .pull-2,
	.push-3, .pull-3,
	.push-4, .pull-4,
	.push-5, .pull-5,
	.push-6, .pull-6,
	.push-7, .pull-7,
	.push-8, .pull-8,
	.push-9, .pull-9,
	.push-10, .pull-10,
	.push-11, .pull-11 {
		position: relative;
	}

	/* Children (Alpha ~ First, Omega ~ Last) */
	.first {margin-left: 0 !important;}
	.last {margin-right: 0 !important;}

	/* Base Grid */
	.container .grid-1 {width: 60px;}
	.container .grid-2 {width: 140px;}
	.container .grid-3 {width: 220px;}
	.container .grid-4 {width: 300px;}
	.container .grid-5 {width: 380px;}
	.container .grid-6 {width: 460px;}
	.container .grid-7 {width: 540px;}
	.container .grid-8 {width: 620px;}
	.container .grid-9 {width: 700px;}
	.container .grid-10 {width: 780px;}
	.container .grid-11 {width: 860px;}
	.container .grid-12 {width: 940px;}

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

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

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

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

	/* Images & Other Objects */
	img, object, embed {	max-width: 100%;}
	img { height: auto; }

/* } */

/* =============================================================================
   768px Grid
   ========================================================================== */

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

	/* Container | 768px */
	.container {width: 768px;}

	/* Global | 768px */
	.grid-1,
	.grid-2,
	.grid-3,
	.grid-4,
	.grid-5,
	.grid-6,
	.grid-7,
	.grid-8,
	.grid-9,
	.grid-10,
	.grid-11,
	.grid-12 {margin-left: 12px;
		margin-right: 12px;}
		

	/* Base Grid | 768px */
	.container .grid-1 {width: 40px;}
	.container .grid-2 {width: 104px;}
	.container .grid-3 {width: 168px;}
	.container .grid-4 {width: 232px;}
	.container .grid-5 {width: 296px;}
	.container .grid-6 {width: 360px;}
	.container .grid-7 {width: 424px;}
	.container .grid-8 {width: 488px;}
	.container .grid-9 {width: 552px;}
	.container .grid-10 {width: 616px;}
	.container .grid-11 {width: 680px;}
	.container .grid-12 {width: 744px;}

	/* Prefix Extra Space | 768px */
	.container .prefix-1 {padding-left: 64px;}
	.container .prefix-2 {padding-left: 128px;}
	.container .prefix-3 {padding-left: 192px;}
	.container .prefix-4 {padding-left: 256px;}
	.container .prefix-5 {padding-left: 320px;}
	.container .prefix-6 {padding-left: 384px;}
	.container .prefix-7 {padding-left: 448px;}
	.container .prefix-8 {padding-left: 512px;}
	.container .prefix-9 {padding-left: 576px;}
	.container .prefix-10 {padding-left: 640px;}
	.container .prefix-11 {padding-left: 704px;}
	
	/* Suffix Extra Space | 768px */
	.container .suffix-1 {padding-right: 64px;}
	.container .suffix-2 {padding-right: 128px;}
	.container .suffix-3 {padding-right: 192px;}
	.container .suffix-4 {padding-right: 256px;}
	.container .suffix-5 {padding-right: 320px;}
	.container .suffix-6 {padding-right: 384px;}
	.container .suffix-7 {padding-right: 448px;}
	.container .suffix-8 {padding-right: 512px;}
	.container .suffix-9 {padding-right: 576px;}
	.container .suffix-10 {padding-right: 640px;}
	.container .suffix-11 {padding-right: 704px;}

	/* Push Space | 768px */
	.container .push-1 {left: 64px;}
	.container .push-2 {left: 128px;}
	.container .push-3 {left: 192px;}
	.container .push-4 {left: 256px;}
	.container .push-5 {left: 320px;}
	.container .push-6 {left: 384px;}
	.container .push-7 {left: 448px;}
	.container .push-8 {left: 512px;}
	.container .push-9 {left: 576px;}
	.container .push-10 {left: 640px;}
	.container .push-11 {left: 704px;}

	/* Pull Space | 768px */
	.container .pull-1 {left: -64px;}
	.container .pull-2 {left: -128px;}
	.container .pull-3 {left: -192px;}
	.container .pull-4 {left: -256px;}
	.container .pull-5 {left: -320px;}
	.container .pull-6 {left: -384px;}
	.container .pull-7 {left: -448px;}
	.container .pull-8 {left: -512px;}
	.container .pull-9 {left: -576px;}
	.container .pull-10 {left: -640px;}
	.container .pull-11 {left: -704px;}
	
	/* Children (Alpha ~ First, Omega ~ Last) | 768 */
	.first {margin-left: 0 !important;}
	.last {margin-right: 0 !important;}
}


/* =============================================================================
   Less than 768px
   ========================================================================== */
   
@media only screen and (max-width: 767px) {
	
	body{min-width:0;}
	
	/* Container */
	.container { margin:0 auto; width:456px; overflow:hidden; }
	
	/* Global */
	.container .grid-1,
	.container .grid-2,
	.container .grid-3,
	.container .grid-4,
	.container .grid-5,
	.container .grid-6,
	.container .grid-7,
	.container .grid-8,
	.container .grid-9,
	.container .grid-10,
	.container .grid-11,
	.container .grid-12	{
		width:436px;
		clear: both;
		float: none;
		margin-left: 10px;
		margin-right: 10px;
		display:inline-block;
	  padding-left:0;
	  padding-right:0;
		
		/* IE 6&7 */
		zoom:1;
		*display:inline;
	}
	
	/* Nested children need no padding */
	.grid-1  .grid-1,
	.grid-2  .grid-1, .grid-2  .grid-2,
	.grid-3  .grid-1, .grid-3  .grid-2, .grid-3  .grid-3,
	.grid-4  .grid-1, .grid-4  .grid-2, .grid-4  .grid-3, .grid-4  .grid-4,
	.grid-5  .grid-1, .grid-5  .grid-2, .grid-5  .grid-3, .grid-5  .grid-4, .grid-5  .grid-5,
	.grid-6  .grid-1, .grid-6  .grid-2, .grid-6  .grid-3, .grid-6  .grid-4, .grid-6  .grid-5, .grid-6  .grid-6,
	.grid-7  .grid-1, .grid-7  .grid-2, .grid-7  .grid-3, .grid-7  .grid-4, .grid-7  .grid-5, .grid-7  .grid-6, .grid-7  .grid-7,
	.grid-8  .grid-1, .grid-8  .grid-2, .grid-8  .grid-3, .grid-8  .grid-4, .grid-8  .grid-5, .grid-8  .grid-6, .grid-8  .grid-7, .grid-8  .grid-8,
	.grid-9  .grid-1, .grid-9  .grid-2, .grid-9  .grid-3, .grid-9  .grid-4, .grid-9  .grid-5, .grid-9  .grid-6, .grid-9  .grid-7, .grid-9  .grid-8, .grid-9  .grid-9,
	.grid-10  .grid-1, .grid-10  .grid-2, .grid-10  .grid-3, .grid-10  .grid-4, .grid-10  .grid-5, .grid-10  .grid-6, .grid-10  .grid-7, .grid-10  .grid-8, .grid-10  .grid-9, .grid-10  .grid-10,
	.grid-11  .grid-1, .grid-11  .grid-2, .grid-11  .grid-3, .grid-11  .grid-4, .grid-11  .grid-5, .grid-11  .grid-6, .grid-11  .grid-7, .grid-11  .grid-8, .grid-11  .grid-9, .grid-11  .grid-10, .grid-11  .grid-11,
	.grid-12  .grid-1, .grid-12  .grid-2, .grid-12  .grid-3, .grid-12  .grid-4, .grid-12  .grid-5, .grid-12  .grid-6, .grid-12  .grid-7, .grid-12  .grid-8, .grid-12  .grid-9, .grid-12  .grid-10, .grid-12  .grid-11, .grid-12  .grid-12	{
		padding-left: 0px;
		padding-right: 0px;
	}
	
	.container .push-1, .container .push-2,
	.container .push-3, .container .push-4, 
	.container .push-5, .container .push-6,
	.container .push-7, .container .push-8, 
	.container .push-9, .container .push-10,
	.container .push-11	{
		left: 0;
	}
	.container .pull-1, .container .pull-2,
	.container .pull-3, .container .pull-4,
	.container .pull-5, .container .pull-6,
	.container .pull-7, .container .pull-8,
	.container .pull-9, .container .pull-10,
	.container .pull-11	{
		left: 0;
	}	
}


/* =============================================================================
   Less than 480px
   ========================================================================== */
@media only screen and (max-width: 479px) {
	
	/* Container */
	
	.container { width:300px;}
	
	/* Global */
	
	.container .grid-1,
	.container .grid-2,
	.container .grid-3,
	.container .grid-4,
	.container .grid-5,
	.container .grid-6,
	.container .grid-7,
	.container .grid-8,
	.container .grid-9,
	.container .grid-10,
	.container .grid-11,
	.container .grid-12	{
		width:280px;
	}
}

/* http://sonspring.com/journal/clearing-floats */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after,
.container:before,
.container:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.container:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix,
.container {
  zoom: 1;
}