/** @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. */
#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. */
#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. */
#header:before, #header:after, #main:before, #main:after, #footer:before, #footer:after { content: ""; display: table; }
#header:after, #main:after, #footer:after { clear: both; }

/* Navigation bar */
@media all and (min-width: 480px) { #main { padding-top: 3em; /* Move all the children of #main down to make room. */ position: relative; }
  #navigation { position: absolute; top: 0; /* Move the navbar up inside #main's padding. */ height: 3em; width: 100%; } }
@media all and (min-width: 0px) and (max-width: 959px) { /* Use 3 grid columns for smaller screens. */
  /* The layout when there is only one sidebar, the left one. */
  .sidebar-first #content { /* Span 2 columns, starting in 2nd column from left. */ float: left; width: 66.66667%; margin-left: 33.33333%; margin-right: -100%; }
  .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. */
  .sidebar-second #content { /* Span 2 columns, starting in 1st column from left. */ float: left; width: 66.66667%; margin-left: 0%; margin-right: -66.66667%; }
  .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. */
  .two-sidebars #content { /* Span 2 columns, starting in 2nd column from left. */ float: left; width: 66.66667%; margin-left: 33.33333%; margin-right: -100%; }
  .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%; }
  .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; }
  .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; }
  .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; }
  .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%; }
  .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%; } }
/* When left sidebar menu collapses to responsive expandable, push [the rest of the] left sidebar down to bottom */
@media all and (min-width: 0px) and (max-width: 804px) { .sidebar-first #content, .two-sidebars #content { /* Span 2 columns, starting in 2nd column from left. */ float: left; width: 100%; margin-left: 0%; margin-right: -100%; }
  .sidebar-first .region-sidebar-first, .two-sidebars .region-sidebar-first { /* Span 1 column, starting in 1st column from left. */ float: left; width: 100%; margin-left: 0%; margin-right: -100%; padding-left: 0; padding-right: 0; clear: left; }
  .sidebar-first .region-sidebar-first .block, .two-sidebars .region-sidebar-first .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; } }
@media all and (min-width: 960px) { /* Use 5 grid columns for larger screens. */
  /* The layout when there is only one sidebar, the left one. */
  .sidebar-first #content { /* Span 4 columns, starting in 2nd column from left. */ float: left; width: 80%; margin-left: 20%; margin-right: -100%; }
  .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. */
  .sidebar-second #content { /* Span 4 columns, starting in 1st column from left. */ float: left; width: 80%; margin-left: 0%; margin-right: -80%; }
  .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. */
  .two-sidebars #content { /* Span 3 columns, starting in 2nd column from left. */ float: left; width: 60%; margin-left: 20%; margin-right: -80%; }
  .two-sidebars .region-sidebar-first { /* Span 1 column, starting in 1st column from left. */ float: left; width: 20%; margin-left: 0%; margin-right: -20%; }
  .two-sidebars .region-sidebar-second { /* Span 1 column, starting in 5th column from left. */ float: left; width: 20%; margin-left: 80%; margin-right: -100%; } }