/* 960 Grid System Modified for Responsive layout 960 Grid System ~ Core CSS. Learn more ~ http://960.gs/ Author: InkThemes Licensed under GPL and MIT. */ /* Forces backgrounds to span full width, even if there is horizontal scrolling. Increase this if your layout is wider. Note: IE6 works fine without this fix. */ /* `Container >> 24 Columns -----------------------------------*/ .container_24 { margin-left: auto; margin-right: auto; width: 1240px; } /* Each columns are measured For their specific size. */ .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: 29.1%; } .container_24 .grid_8 { width: 33.4%; } .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.993%; } .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: 99.2%; } /* `Grid >> 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, .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: 5px; margin-right: 5px; } /* `Grid >> Children (Alpha ~ First, Omega ~ Last) -----------------------------------*/ .alpha { margin-left: 0; } .omega { margin-right: 0; } /* `Clear Floated Elements -----------------------------------*/ /* 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 { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .clearfix:after { clear: both; } /* The following zoom:1 rule is specifically for IE6 + IE7. Move to separate stylesheet if invalid CSS is a problem. */ .clearfix { zoom: 1; } /* This query is applied for Protait Tablet ipad */ @media only screen and (min-width: 960px) and (max-width: 1260px) { .container_24 { margin-left: auto; margin-right: auto; width: 960px; } /* `Grid >> 24 Columns -----------------------------------*/ .container_24 .grid_1 { width: 30px; } .container_24 .grid_2 { width: 70px; } .container_24 .grid_3 { width: 110px; } .container_24 .grid_4 { width: 150px; } .container_24 .grid_5 { width: 190px; } .container_24 .grid_6 { width: 230px; } .container_24 .grid_7 { width: 270px; } .container_24 .grid_8 { width: 276px; } .container_24 .grid_9 { width: 350px; } .container_24 .grid_10 { width: 390px; } .container_24 .grid_11 { width: 430px; } .container_24 .grid_12 { width: 470px; } .container_24 .grid_13 { width: 510px; } .container_24 .grid_14 { width: 550px; } .container_24 .grid_15 { width: 590px; } .container_24 .grid_16 { width: 600px; } .container_24 .grid_17 { width: 670px; } .container_24 .grid_18 { width: 710px; } .container_24 .grid_19 { width: 750px; } .container_24 .grid_20 { width: 790px; } .container_24 .grid_21 { width: 830px; } .container_24 .grid_22 { width: 870px; } .container_24 .grid_23 { width: 910px; } .container_24 .grid_24 { width: 950px; } } @media only screen and (min-width: 768px) and (max-width: 960px) { .container_24 { margin-left: auto; margin-right: auto; width: 768px; } /* Each columns are measured For their specific size. */ .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: 99%; } } /* This query is applied for landscape ipad, Mobile */ @media only screen and (min-width: 480px) and (max-width: 767px) { .container_24 { width: 480px; } /* `Grid 1 to 12 columns Moved to 100% width Acroding to container width In landscape tablet screen */ .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 { width: 100%; } /* Grid 13 to 24 columns Fixed in 470px in minimum Width 480px to maximum 767px Screen */ .container_24 .grid_13 { width: 470px; } .container_24 .grid_14 { width: 470px; } .container_24 .grid_15 { width: 470px; } .container_24 .grid_16 { width: 470px; } .container_24 .grid_17 { width: 470px; } .container_24 .grid_18 { width: 470px; } .container_24 .grid_19 { width: 470px; } .container_24 .grid_20 { width: 470px; } .container_24 .grid_21 { width: 470px; } .container_24 .grid_22 { width: 470px; } .container_24 .grid_23 { width: 470px; } .container_24 .grid_24 { width: 470px; } } /* This query is applied for protait ipad, Mobile */ @media only screen and (max-width: 480px) { .container_24 { width: 300px; } /* Grid 1 to 24 columns are Fixed in mobile layout */ .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: 97%; } }