/*
 * based on the beautiful skeleton gridsystem. getskeleton.com
 */

/* === Small devices === */ 

.container {
	position: relative; 
	width: 300px;
	margin: 0 auto;
	padding: 0; 
}

.container .columns,
.container .column { 
	margin: 0; 
}

.row {
	margin-bottom: 20px;
}

.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; 
}

/* === mobile landscape === */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container {
    	width: 420px;
    }
    .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; 
    }
}

/* === bigger than 768px === */

@media only screen and (min-width: 768px) {
	
	.container .columns,
	.container .column { 
    	float: left; 
    	display: inline; 
    	margin-left: 10px; 
    	margin-right: 10px; 
    }
       
    .alpha.omega {
    	margin-left: 0; 
    	margin-right: 0;
    }
    
    .column.alpha, .columns.alpha {
    	margin-left: 0;
    	margin-right: 10px; 
    }
    
    .column.omega, .columns.omega { 
    	margin-right: 0; 
    	margin-left: 10px; 
    }

}
 
/* === tablet === */ 
@media only screen and (min-width: 768px) and (max-width: 959px) {
    
    .container { 
    	width: 768px; 
    }   
    .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; 
    }

    .container .offset1 { 
    	padding-left: 64px;
    }
    .container .offset2 { 
    	padding-left: 128px; 
    }
    .container .offset3 { 
    	padding-left: 192px; 
    }
    .container .offset4 { 
    	padding-left: 256px; 
    }
    .container .offset5 { 
    	padding-left: 320px; 
    }
    .container .offset6 { 
    	padding-left: 384px; 
    }
    .container .offset7 { 
    	padding-left: 448px; 
    }
    .container .offset8 { 
    	padding-left: 512px; 
    }
    .container .offset9 { 
    	padding-left: 576px; 
    }
    .container .offset10  { 
    	padding-left: 640px; 
    }
    .container .offset11  { 
    	padding-left: 704px; 
    }

}

/* === basic === */

@media screen and (min-width: 960px) and (max-width: 1199px) {
	
	.container { 
		width: 960px; 
	}
    .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: 460px;
    }
    .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; 
    }
 
    .container .offset1 { 
    	padding-left: 80px;  
    }
    .container .offset2 { 
    	padding-left: 160px; 
    }
    .container .offset3 { 
    	padding-left: 240px; 
    }
    .container .offset4 { 
    	padding-left: 320px; 
    }
    .container .offset5 { 
    	padding-left: 400px; 
    }
    .container .offset6 { 
    	padding-left: 480px; 
    }
    .container .offset7 { 
    	padding-left: 560px; 
    }
    .container .offset8 { 
    	padding-left: 640px; 
    }
    .container .offset9 { 
    	padding-left: 720px; 
    }
    .container .offset10 { 
    	padding-left: 800px; 
    }
    .container .offset11 { 
    	padding-left: 880px; 
    }

}

/* === big screen === */

@media screen and (min-width: 1200px) {
	
	.container {
		width: 1140px;
	}
	.container .one.column,
    .container .one.columns {
    	width: 75px;
    }    
    .container .two.columns {
    	width: 170px;
    }
    .container .three.columns {
    	width: 265px;	
    }
    .container .four.columns {
    	width: 360px;
    }
    .container .five.columns {
    	width: 455px;
    }
    .container .six.columns {
    	width: 550px; 
    }
    .container .seven.columns {
    	width: 645px;
    }
    .container .eight.columns {
    	width: 740px;
    }
    .container .nine.columns {
    	width: 835px;
    }
    .container .ten.columns  {
    	width: 930px;
    }
    .container .eleven.columns {
    	width: 1025px;
    }
    .container .twelve.columns {
    	width: 1120px;
    }
    
    .container .offset1 {
    	padding-left: 95px;
    }
	.container .offset2 {
		padding-left: 190px;
	}
	.container .offset3 {
		padding-left: 285px;
	}
	.container .offset4 {
		padding-left: 380px;
	}
	.container .offset5 {
		padding-left: 475px;
	}
	.container .offset6 {
		padding-left: 570px;
	}
	.container .offset7 {
		padding-left: 665px;
	}
	.container .offset8 {
		padding-left: 760px;
	}
	.container .offset9 {
		padding-left: 855px;
	}
	.container .offset10 {
		padding-left: 950px;
	}
	.container .offset11 {
		padding-left: 1045px;
	}

}

/* === clearfix === */
.container:after { 
	content: "\0020"; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden; 
}

.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; 
}

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