/* Variable Grid System. Learn more ~ http://www.spry-soft.com/grids/ Based on 960 Grid System - http://960.gs/ 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. */ /* Containers ----------------------------------------------------------------------------------------------------*/ .container_24 { margin-left: auto; margin-right: auto; width: 1008px; } /* 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; position: relative; margin-left: 4px; margin-right: 4px; } .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, .push_13, .pull_13, .push_14, .pull_14, .push_15, .pull_15, .push_16, .pull_16, .push_17, .pull_17, .push_18, .pull_18, .push_19, .pull_19, .push_20, .pull_20, .push_21, .pull_21, .push_22, .pull_22, .push_23, .pull_23, .push_24, .pull_24 { position:relative; } /* Grid >> Children (Alpha ~ First, Omega ~ Last) ----------------------------------------------------------------------------------------------------*/ .alpha { margin-left: 0; } .omega { margin-right: 0; } /* Grid >> 24 Columns ----------------------------------------------------------------------------------------------------*/ .container_24 .grid_1 { width:34px; } .container_24 .grid_2 { width:76px; } .container_24 .grid_3 { width:118px; } .container_24 .grid_4 { width:160px; } .container_24 .grid_5 { width:202px; } .container_24 .grid_6 { width:244px; } .container_24 .grid_7 { width:286px; } .container_24 .grid_8 { width:328px; } .container_24 .grid_9 { width:370px; } .container_24 .grid_10 { width:412px; } .container_24 .grid_11 { width:454px; } .container_24 .grid_12 { width:496px; } .container_24 .grid_13 { width:538px; } .container_24 .grid_14 { width:580px; } .container_24 .grid_15 { width:622px; } .container_24 .grid_16 { width:664px; } .container_24 .grid_17 { width:706px; } .container_24 .grid_18 { width:748px; } .container_24 .grid_19 { width:790px; } .container_24 .grid_20 { width:832px; } .container_24 .grid_21 { width:874px; } .container_24 .grid_22 { width:916px; } .container_24 .grid_23 { width:958px; } .container_24 .grid_24 { width:1000px; } /* Prefix Extra Space >> 24 Columns ----------------------------------------------------------------------------------------------------*/ .container_24 .prefix_1 { padding-left:42px; } .container_24 .prefix_2 { padding-left:84px; } .container_24 .prefix_3 { padding-left:126px; } .container_24 .prefix_4 { padding-left:168px; } .container_24 .prefix_5 { padding-left:210px; } .container_24 .prefix_6 { padding-left:252px; } .container_24 .prefix_7 { padding-left:294px; } .container_24 .prefix_8 { padding-left:336px; } .container_24 .prefix_9 { padding-left:378px; } .container_24 .prefix_10 { padding-left:420px; } .container_24 .prefix_11 { padding-left:462px; } .container_24 .prefix_12 { padding-left:504px; } .container_24 .prefix_13 { padding-left:546px; } .container_24 .prefix_14 { padding-left:588px; } .container_24 .prefix_15 { padding-left:630px; } .container_24 .prefix_16 { padding-left:672px; } .container_24 .prefix_17 { padding-left:714px; } .container_24 .prefix_18 { padding-left:756px; } .container_24 .prefix_19 { padding-left:798px; } .container_24 .prefix_20 { padding-left:840px; } .container_24 .prefix_21 { padding-left:882px; } .container_24 .prefix_22 { padding-left:924px; } .container_24 .prefix_23 { padding-left:966px; } /* Suffix Extra Space >> 24 Columns ----------------------------------------------------------------------------------------------------*/ .container_24 .suffix_1 { padding-right:42px; } .container_24 .suffix_2 { padding-right:84px; } .container_24 .suffix_3 { padding-right:126px; } .container_24 .suffix_4 { padding-right:168px; } .container_24 .suffix_5 { padding-right:210px; } .container_24 .suffix_6 { padding-right:252px; } .container_24 .suffix_7 { padding-right:294px; } .container_24 .suffix_8 { padding-right:336px; } .container_24 .suffix_9 { padding-right:378px; } .container_24 .suffix_10 { padding-right:420px; } .container_24 .suffix_11 { padding-right:462px; } .container_24 .suffix_12 { padding-right:504px; } .container_24 .suffix_13 { padding-right:546px; } .container_24 .suffix_14 { padding-right:588px; } .container_24 .suffix_15 { padding-right:630px; } .container_24 .suffix_16 { padding-right:672px; } .container_24 .suffix_17 { padding-right:714px; } .container_24 .suffix_18 { padding-right:756px; } .container_24 .suffix_19 { padding-right:798px; } .container_24 .suffix_20 { padding-right:840px; } .container_24 .suffix_21 { padding-right:882px; } .container_24 .suffix_22 { padding-right:924px; } .container_24 .suffix_23 { padding-right:966px; } /* Push Space >> 24 Columns ----------------------------------------------------------------------------------------------------*/ .container_24 .push_1 { left:42px; } .container_24 .push_2 { left:84px; } .container_24 .push_3 { left:126px; } .container_24 .push_4 { left:168px; } .container_24 .push_5 { left:210px; } .container_24 .push_6 { left:252px; } .container_24 .push_7 { left:294px; } .container_24 .push_8 { left:336px; } .container_24 .push_9 { left:378px; } .container_24 .push_10 { left:420px; } .container_24 .push_11 { left:462px; } .container_24 .push_12 { left:504px; } .container_24 .push_13 { left:546px; } .container_24 .push_14 { left:588px; } .container_24 .push_15 { left:630px; } .container_24 .push_16 { left:672px; } .container_24 .push_17 { left:714px; } .container_24 .push_18 { left:756px; } .container_24 .push_19 { left:798px; } .container_24 .push_20 { left:840px; } .container_24 .push_21 { left:882px; } .container_24 .push_22 { left:924px; } .container_24 .push_23 { left:966px; } /* Pull Space >> 24 Columns ----------------------------------------------------------------------------------------------------*/ .container_24 .pull_1 { left:-42px; } .container_24 .pull_2 { left:-84px; } .container_24 .pull_3 { left:-126px; } .container_24 .pull_4 { left:-168px; } .container_24 .pull_5 { left:-210px; } .container_24 .pull_6 { left:-252px; } .container_24 .pull_7 { left:-294px; } .container_24 .pull_8 { left:-336px; } .container_24 .pull_9 { left:-378px; } .container_24 .pull_10 { left:-420px; } .container_24 .pull_11 { left:-462px; } .container_24 .pull_12 { left:-504px; } .container_24 .pull_13 { left:-546px; } .container_24 .pull_14 { left:-588px; } .container_24 .pull_15 { left:-630px; } .container_24 .pull_16 { left:-672px; } .container_24 .pull_17 { left:-714px; } .container_24 .pull_18 { left:-756px; } .container_24 .pull_19 { left:-798px; } .container_24 .pull_20 { left:-840px; } .container_24 .pull_21 { left:-882px; } .container_24 .pull_22 { left:-924px; } .container_24 .pull_23 { left:-966px; } /* `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: 768px) and (max-width: 960px) { .container_24 { margin-left: auto; margin-right: auto; width: 744px; } /* 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: 296px; } /* 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: 98%; } }