/* * Responsive Grid System * Author: http://www.inkthemes.com * * Inspiration and based on: * http://960.gs and http://fluid24.org/ */ /* #Main wrapper to contain all elements ================================================== */ /* #Container class ================================================== */ .container_24 { max-width:1484px; margin:0 auto; position: relative;padding: 0; } /* #24 Grid columns reset defaults ================================================== */ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19, .grid_20, .grid_21, .grid_22, .grid_23, .grid_24 { display: inline; float: left; margin-left:0; margin-right:0; } /* #Sub grids 1 to 24 ================================================== */ .container_24 .grid_1 { width: 3.167% ;} .container_24 .grid_2 { width: 7.333% ;} .container_24 .grid_3 { width: 11.5% ;} .container_24 .grid_4 { width: 15.667% ;} .container_24 .grid_5 { width: 19.833% ;} .container_24 .grid_6 { width: 24% ;} .container_24 .grid_7 { width: 28.167% ;} .container_24 .grid_8 { width: 32.333% ;} .container_24 .grid_9 { width: 36.5% ;} .container_24 .grid_10 { width: 40.667% ;} .container_24 .grid_11 { width: 44.833% ;} .container_24 .grid_12 { width: 49% ;} .container_24 .grid_13 { width: 53.167% ;} .container_24 .grid_14 { width: 57.333% ;} .container_24 .grid_15 { width: 61.5% ;} .container_24 .grid_16 { width: 65.667% ;} .container_24 .grid_17 { width: 69.833% ;} .container_24 .grid_18 { width: 74% ;} .container_24 .grid_19 { width: 78.167% ;} .container_24 .grid_20 { width: 82.333% ;} .container_24 .grid_21 { width: 86.5% ;} .container_24 .grid_22 { width: 90.667% ;} .container_24 .grid_23 { width: 94.833% ;} .container_24 .grid_24 { width: 97%; margin:0 1.5% 0 1.5%;} /* #Special Classes for sub element ================================================== */ /* (Alpha ~ First, Omega ~ Last) */ .alpha { margin-left: 0; margin-right: 1%; } .omega { margin-right: 0; margin-left: 1%; } /* #Clear Floated Elements ================================================== */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /* #Clearfix ================================================== */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 959px) { } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 767px */ @media only screen and (min-width: 480px) and (max-width: 767px) { } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (max-width: 767px) { .container_24 .grid_1 , .container_24 .grid_2 , .container_24 .grid_3 , .container_24 .grid_4 , .container_24 .grid_5 , .container_24 .grid_6 , .container_24 .grid_7 , .container_24 .grid_8 , .container_24 .grid_9, .container_24 .grid_10 , .container_24 .grid_11 , .container_24 .grid_12 , .container_24 .grid_13 , .container_24 .grid_14 , .container_24 .grid_15 , .container_24 .grid_16, .container_24 .grid_17 , .container_24 .grid_18 , .container_24 .grid_19 , .container_24 .grid_20 , .container_24 .grid_21, .container_24 .grid_22, .container_24 .grid_23 , .container_24 .grid_24 { width:99%;} /* sub fluid 24 grids 100% */ .container_24 .grid_sub_1, .container_24 .grid_sub_2, .container_24 .grid_sub_3, .container_24 .grid_sub_4, .container_24 .grid_sub_5 , .container_24 .grid_sub_6 , .container_24 .grid_sub_7, .container_24 .grid_sub_8 , .container_24 .grid_sub_9 , .container_24 .grid_sub_10 , .container_24 .grid_sub_11, .container_24 .grid_sub_12 , .container_24 .grid_sub_13 , .container_24 .grid_sub_14 , .container_24 .grid_sub_15 , .container_24 .grid_sub_16 , .container_24 .grid_sub_17 , .container_24 .grid_sub_18 , .container_24 .grid_sub_19 , .container_24 .grid_sub_20 , .container_24 .grid_sub_21 , .container_24 .grid_sub_22 , .container_24 .grid_sub_23, .container_24 .grid_sub_24 { width:100% ;} .sub_alpha {margin-right:0;} .sub_omega {margin-left:0;} .sub_middle {margin-left:0;margin-right:0;} }