/*
â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€“â€“â€“â€“â€“â€“â€“â€“
Base:MQFramework by Chris Johnson
â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€“â€“â€“â€“â€“â€“â€“â€“
MQFramework is a responsive "snap" web framework
that will degrade from wide-screen monitors all
the way down to mobile devices. It uses 
"media-queries" which can be found within the 
CSS3 specification.

/////////////////////////////////////////////////
 Grid Sizes
/////////////////////////////////////////////////
â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€“â€“â€“â€“â€“â€“â€“â€“
Grid - 1140px - Wide
-------------------------------------------------
1 2 3 4 5 6 7 8 9 10 11 12
75 170 265 360 455 550 646 749 835 930 1025 1120
-------------------------------------------------
â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€“â€“â€“â€“â€“â€“â€“â€“
Grid - 960px - Normal
-------------------------------------------------
1 2 3 4 5 6 7 8 9 10 11 12
60 140 220 300 380 460 540 620 700 780 860 940
-------------------------------------------------
â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€“â€“â€“â€“â€“â€“â€“â€“
Grid - 768px - iPad
-------------------------------------------------
1 2 3 4 5 6 7 8 9 10 11 12
44 108 172 236 300 364 428 492 556 620 684 748
-------------------------------------------------
â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€“â€“â€“â€“â€“â€“â€“â€“
Grid - 480px - iPhone Wide
â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€“â€“â€“â€“â€“â€“â€“â€“
â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€“â€“â€“â€“â€“â€“â€“â€“
Grid - 300px - iPhone
â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€“â€“â€“â€“â€“â€“â€“â€“
â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€“â€“â€“â€“â€“â€“â€“â€“
Print
â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€”â€“â€“â€“â€“â€“â€“â€“â€“

*/

.container { width:1140px;margin:0px auto;padding:0px;position:relative;}
.row {margin-bottom:15px;}

.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;position:relative;margin-left:10px;margin-right:10px;
-webkit-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    -ms-transition: all 1s ease-in; }

.container .grid_1 { width:75px; }
.container .grid_2 { width:170px; }
.container .grid_3 { width:265px; }
.container .grid_4 { width:360px; }
.container .grid_5 { width:455px; }
.container .grid_6 { width:550px; }
.container .grid_7 { width:645px; }
.container .grid_8 { width:740px; }
.container .grid_9 { width:835px; }
.container .grid_10 { width:930px; }
.container .grid_11 { width:1025px; }
.container .grid_12 { width:1120px; }

.mobile-only{display:none;}
.ipad-only{display:none;}
.desktop-only{display:inline;}
.desktop-only-alt{display:block;}

.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,
.push_12, .pull_12 {
	position:relative;
}

.container .prefix_1 { padding-left:95px; }
.container .prefix_2 { padding-left:190px; }
.container .prefix_3 { padding-left:285px; }
.container .prefix_4 { padding-left:380px; }
.container .prefix_5 { padding-left:475px; }
.container .prefix_6 { padding-left:570px; }
.container .prefix_7 { padding-left:665px; }
.container .prefix_8 { padding-left:760px; }
.container .prefix_9 { padding-left:855px; }
.container .prefix_10 { padding-left:950px; }
.container .prefix_11 { padding-left:1045px; }

.container .push_1 { left:95px; }
.container .push_2 { left:190px; }
.container .push_3 { left:285px; }
.container .push_4 { left:380px; }
.container .push_5 { left:475px; }
.container .push_6 { left:570px; }
.container .push_7 { left:665px; }
.container .push_8 { left:760px; }
.container .push_9 { left:855px; }
.container .push_10 { left:950px; }
.container .push_11 { left:1045px; }


@media only screen and (min-width: 960px) and (max-width: 1139px) {
	.container{width:960px;}
	.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; }
	
	.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; } 
	
	.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; }
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.container{width:768px;}
	.container .grid_1 {width:44px;}
	.container .grid_2 {width:108px;}
	.container .grid_3 {width:172px;}
	.container .grid_4 {width:236px;}
	.container .grid_5 {width:300px;}
	.container .grid_6 {width:364px;}
	.container .grid_7 {width:428px;}
	.container .grid_8 {width:492px;}
	.container .grid_9 {width:556px;}
	.container .grid_10 {width:620px;}
	.container .grid_11 {width:684px;}
	.container .grid_12 {width:748px;}
	
	.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; }
	
	.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; }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.container{width:460px;}
	.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:100%;display:block;float:none;position:relative;margin-left:0px;margin-right:0px; }
	.ipad-only{display:block;}
	.desktop-only{display:none;}
	
	.container .prefix_1 { padding-left:0; }
	.container .prefix_2 { padding-left:0; }
	.container .prefix_3 { padding-left:0; }
	.container .prefix_4 { padding-left:0; }
	.container .prefix_5 { padding-left:0; }
	.container .prefix_6 { padding-left:0; }
	.container .prefix_7 { padding-left:0; }
	.container .prefix_8 { padding-left:0; }
	.container .prefix_9 { padding-left:0; }
	.container .prefix_10 { padding-left:0; }
	.container .prefix_11 { padding-left:0; }
	.container .push_1 { left:0; }
	.container .push_2 { left:0; }
	.container .push_3 { left:0; }
	.container .push_4 { left:0; }
	.container .push_5 { left:0; }
	.container .push_6 { left:0; }
	.container .push_7 { left:0; }
	.container .push_8 { left:0; }
	.container .push_9 { left:0; }
	.container .push_10 { left:0; }
	.container .push_11 { left:0; }
	
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
	.container{width:280px;}
	.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:100%;display:block;float:none;position:relative;margin-left:0px;margin-right:0px; }
	.mobile-only{display:block;}
	.desktop-only{display:none;}
	
	.container .prefix_1 { padding-left:0; }
	.container .prefix_2 { padding-left:0; }
	.container .prefix_3 { padding-left:0; }
	.container .prefix_4 { padding-left:0; }
	.container .prefix_5 { padding-left:0; }
	.container .prefix_6 { padding-left:0; }
	.container .prefix_7 { padding-left:0; }
	.container .prefix_8 { padding-left:0; }
	.container .prefix_9 { padding-left:0; }
	.container .prefix_10 { padding-left:0; }
	.container .prefix_11 { padding-left:0; }
	
	.container .push_1 { left:0; }
	.container .push_2 { left:0; }
	.container .push_3 { left:0; }
	.container .push_4 { left:0; }
	.container .push_5 { left:0; }
	.container .push_6 { left:0; }
	.container .push_7 { left:0; }
	.container .push_8 { left:0; }
	.container .push_9 { left:0; }
	.container .push_10 { left:0; }
	.container .push_11 { left:0; }
}
@media print{
	body{width:95%;}
}

.margin_top_5 { margin-top:5px !important; }
.margin_top_15 { margin-top:15px !important; }
.margin_top_25 { margin-top:25px !important; }
.margin_top_30 { margin-top:30px !important; }
.margin_top_35 { margin-top:35px !important; }
.margin_top_45 { margin-top:45px !important; }
.margin_top_60 { margin-top:60px !important; }
.margin_top_90 { margin-top:90px !important; }
.margin_top_120 { margin-top:120px !important; }

.margin_bottom_5 { margin-bottom:5px !important; }
.margin_bottom_15 { margin-bottom:15px !important; }
.margin_bottom_25 { margin-bottom:25px !important; }
.margin_bottom_30 { margin-bottom:30px !important; }
.margin_bottom_35 { margin-bottom:35px !important; }
.margin_bottom_45 { margin-bottom:45px !important; }
.margin_bottom_60 { margin-bottom:60px !important; }
.margin_bottom_90 { margin-bottom:90px !important; }
.margin_bottom_120 { margin-bottom:120px !important; }

.padding_top_15 { padding-top:15px !important; }
.padding_top_30 { padding-top:30px !important; }
.padding_top_45 { padding-top:45px !important; }
.padding_top_60 { padding-top:60px !important; }
.padding_top_90 { padding-top:90px !important; }
.padding_top_120 { padding-top:120px !important; }
.padding_top_130 { padding-top:130px !important; }

.padding_bottom_15 { padding-bottom:15px !important; }
.padding_bottom_30 { padding-bottom:30px !important; }
.padding_bottom_45 { padding-bottom:45px !important; }
.padding_bottom_60 { padding-bottom:60px !important; }
.padding_bottom_90 { padding-bottom:90px !important; }
.padding_bottom_120 { padding-bottom:120px !important; }
.padding_bottom_130 { padding-bottom:130px !important; }

.clear { clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0; }
.clearfix:before,
.clearfix:after { content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0; }
.clearfix:after { clear:both; }
.clearfix { zoom:1; }

