/** * @file * Positioning for responsive layout . * * Define CSS classes to create a table-free, 3-column, 2-column, or single * column layout depending on whether blocks are enabled in the left or right * columns. * * This layout uses the Zen Grids plugin for Compass: http://zengrids.com */ /* * Center the page. */ /* line 44, ../../../../sass/sass/layouts/responsive-sidebars.scss */ #page, .region-bottom { /* For screen sizes larger than 1200px, prevent excessively long lines of text by setting a max-width. */ margin-left: auto; margin-right: auto; max-width: 1200px; } /* * Apply the shared properties of grid items in a single, efficient ruleset. */ /* line 62, ../../../../sass/sass/layouts/responsive-sidebars.scss */ #header, #content, #navigation, .region-sidebar-first, .region-sidebar-second, #footer { padding-left: 10px; padding-right: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; } /* * Containers for grid items and flow items. */ /* line 52, ../../../../sass/sass-extensions/zen-grids/stylesheets/zen/_grids.scss */ #header:before, #header:after, #main:before, #main:after, #footer:before, #footer:after { content: ""; display: table; } /* line 56, ../../../../sass/sass-extensions/zen-grids/stylesheets/zen/_grids.scss */ #header:after, #main:after, #footer:after { clear: both; } /* * Navigation bar */ @media all and (min-width: 480px) { /* line 81, ../../../../sass/sass/layouts/responsive-sidebars.scss */ #main { padding-top: 3em; /* Move all the children of #main down to make room. */ position: relative; } /* line 85, ../../../../sass/sass/layouts/responsive-sidebars.scss */ #navigation { position: absolute; top: 0; /* Move the navbar up inside #main's padding. */ height: 3em; width: 100%; } } @media all and (min-width: 480px) and (max-width: 959px) { /* * Use 3 grid columns for smaller screens. */ /* * The layout when there is only one sidebar, the left one. */ /* line 104, ../../../../sass/sass/layouts/responsive-sidebars.scss */ .sidebar-first #content { /* Span 2 columns, starting in 2nd column from left. */ float: left; width: 66.66667%; margin-left: 33.33333%; margin-right: -100%; } /* line 108, ../../../../sass/sass/layouts/responsive-sidebars.scss */ .sidebar-first .region-sidebar-first { /* Span 1 column, starting in 1st column from left. */ float: left; width: 33.33333%; margin-left: 0%; margin-right: -33.33333%; } /* * The layout when there is only one sidebar, the right one. */ /* line 118, ../../../../sass/sass/layouts/responsive-sidebars.scss */ .sidebar-second #content { /* Span 2 columns, starting in 1st column from left. */ float: left; width: 66.66667%; margin-left: 0%; margin-right: -66.66667%; } /* line 122, ../../../../sass/sass/layouts/responsive-sidebars.scss */ .sidebar-second .region-sidebar-second { /* Span 1 column, starting in 3rd column from left. */ float: left; width: 33.33333%; margin-left: 66.66667%; margin-right: -100%; } /* * The layout when there are two sidebars. */ /* line 132, ../../../../sass/sass/layouts/responsive-sidebars.scss */ .two-sidebars #content { /* Span 2 columns, starting in 2nd column from left. */ float: left; width: 66.66667%; margin-left: 33.33333%; margin-right: -100%; } /* line 136, ../../../../sass/sass/layouts/responsive-sidebars.scss */ .two-sidebars .region-sidebar-first { /* Span 1 column, starting in 1st column from left. */ float: left; width: 33.33333%; margin-left: 0%; margin-right: -33.33333%; } /* line 140, ../../../../sass/sass/layouts/responsive-sidebars.scss */ .two-sidebars .region-sidebar-second { /* Start a new row and span all 3 columns. */ float: left; width: 100%; margin-left: 0%; margin-right: -100%; padding-left: 0; padding-right: 0; clear: left; } /* line 145, ../../../../sass/sass/layouts/responsive-sidebars.scss */ .two-sidebars .region-sidebar-second .block { padding-left: 10px; padding-right: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; } /* line 148, ../../../../sass/sass/layouts/responsive-sidebars.scss */ .two-sidebars .region-sidebar-second .block:nth-child(3n+1) { /* Span 1 column, starting in the 1st column from left. */ float: left; width: 33.33333%; margin-left: 0%; margin-right: -33.33333%; clear: left; } /* line 152, ../../../../sass/sass/layouts/responsive-sidebars.scss */ .two-sidebars .region-sidebar-second .block:nth-child(3n+2) { /* Span 1 column, starting in the 2nd column from left. */ float: left; width: 33.33333%; margin-left: 33.33333%; margin-right: -66.66667%; } /* line 155, ../../../../sass/sass/layouts/responsive-sidebars.scss */ .two-sidebars .region-sidebar-second .block:nth-child(3n) { /* Span 1 column, starting in the 3rd column from left. */ float: left; width: 33.33333%; margin-left: 66.66667%; margin-right: -100%; } } @media all and (min-width: 960px) { /* * Use 5 grid columns for larger screens. */ /* * The layout when there is only one sidebar, the left one. */ /* line 173, ../../../../sass/sass/layouts/responsive-sidebars.scss */ .sidebar-first #content { /* Span 4 columns, starting in 2nd column from left. */ float: left; width: 80%; margin-left: 20%; margin-right: -100%; } /* line 177, ../../../../sass/sass/layouts/responsive-sidebars.scss */ .sidebar-first .region-sidebar-first { /* Span 1 column, starting in 1st column from left. */ float: left; width: 20%; margin-left: 0%; margin-right: -20%; } /* * The layout when there is only one sidebar, the right one. */ /* line 187, ../../../../sass/sass/layouts/responsive-sidebars.scss */ .sidebar-second #content { /* Span 4 columns, starting in 1st column from left. */ float: left; width: 80%; margin-left: 0%; margin-right: -80%; } /* line 191, ../../../../sass/sass/layouts/responsive-sidebars.scss */ .sidebar-second .region-sidebar-second { /* Span 1 column, starting in 5th column from left. */ float: left; width: 20%; margin-left: 80%; margin-right: -100%; } /* * The layout when there are two sidebars. */ /* line 201, ../../../../sass/sass/layouts/responsive-sidebars.scss */ .two-sidebars #content { /* Span 3 columns, starting in 2nd column from left. */ float: left; width: 60%; margin-left: 20%; margin-right: -80%; } /* line 205, ../../../../sass/sass/layouts/responsive-sidebars.scss */ .two-sidebars .region-sidebar-first { /* Span 1 column, starting in 1st column from left. */ float: left; width: 20%; margin-left: 0%; margin-right: -20%; } /* line 209, ../../../../sass/sass/layouts/responsive-sidebars.scss */ .two-sidebars .region-sidebar-second { /* Span 1 column, starting in 5th column from left. */ float: left; width: 20%; margin-left: 80%; margin-right: -100%; } }