__layout.sass

@import __base.sass
@import compass

$zen_first_sidebar_width: $zen_blueprint_left_units * $blueprint_grid_outer_width
$zen_second_sidebar_width: $zen_blueprint_right_units * $blueprint_grid_outer_width
$zen_content_width: $zen_blueprint_content_units * $blueprint_grid_outer_width - $blueprint_grid_margin
$zen_gutter: $blueprint_grid_margin
$zen_navbar_height: 40px

$zen_page_width: $zen_first_sidebar_width + $zen_content_width + $zen_second_sidebar_width

=zen-region-visibility
  overflow: visible
  // A very nice CSS3 property
  word-wrap: break-word

// !width = width of the region
// !first_margin = first with respect to reading direction.
//   - LTR = left margin
//   - RTL = right margin
// !first = the first side with respect to reading direction
//   - LTR = left
//   - RTL = right

=zen-region($width, $first_margin: 0, $first: left)
  $second: right
  @if $first == "right"
    $second: left
  +float($first)
  width: $width
  margin:
    #{$first}: $first_margin
    #{$second}: -($width + $first_margin)

// The !width and !first_margin arguments are blueprint units.
// The !content argument indicates whether the #content region is part of the
//   width of the region or the margin.
=zen-blueprint-region($width, $content: no, $first_margin: 0, $first: left)
  @if $content == "width"
    +zen-region($width * $blueprint_grid_outer_width - $blueprint_grid_margin, $first_margin * $blueprint_grid_outer_width, $first)
  @else if $content == "margin"
    +zen-region($width * $blueprint_grid_outer_width, $first_margin * $blueprint_grid_outer_width - $blueprint_grid_margin, $first)
  @else
    +zen-region($width * $blueprint_grid_outer_width, $first_margin * $blueprint_grid_outer_width, $first)

=zen-blueprint-layout($content_units: 24, $first_sidebar: 0, $second_sidebar: 0)
  #content
    +zen-blueprint-region($content_units, width, $first_sidebar)
  .region-sidebar-first
    +zen-blueprint-region($first_sidebar)
  .region-sidebar-second
    +zen-blueprint-region($second_sidebar, margin, $first_sidebar + $content_units)
  & .with-navigation
    #content,.region-sidebar-first,.region-sidebar-second
      margin-top: $zen_navbar_height

layout-fixed.sass

// $Id$

// @file
// Layout Styling (DIV Positioning)
//
// 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 is based on the Zen Columns layout method.
//   http://drupal.org/node/201428
//
// Only CSS that affects the layout (positioning) of major elements should be
// listed here.  Such as:
//   display, position, float, clear, width, height, min-width, min-height
//   margin, border, padding, overflow

@import __layout.sass

// Body

//body

#page-wrapper
  // If you want to make the page a fixed width and centered in the viewport,
  // this is the standards-compliant way to do that. See also the ie6.css file
  // for the necessary IE5/IE6quirks hack to center a div.
  margin-left: auto
  margin-right: auto
  width: $zen_page_width
  padding: $zen_gutter

//#page


// Header

#header
  .section
    // Clear the logo
    clear: both
    position: relative

//#logo-title

#logo
  // LTR
  +float

//#site-name

//#site-slogan

//#search-box

// Main (container for everything else)

#main-wrapper
  position: relative

//#main

// Content

#content,
.no-sidebars #content
  +zen-blueprint-region($zen_blueprint_left_units + $zen_blueprint_content_units + $zen_blueprint_right_units, width)

.sidebar-first #content
  +zen-blueprint-region($zen_blueprint_content_units + $zen_blueprint_right_units, width, $zen_blueprint_left_units)

.sidebar-second #content
  +zen-blueprint-region($zen_blueprint_left_units + $zen_blueprint_content_units, width)

.two-sidebars #content
  +zen-blueprint-region($zen_blueprint_content_units, width, $zen_blueprint_left_units)

#content
  .section
    +reset-box-model

// Navbar

#navigation
  +zen-region(100%)
  height: $zen_navbar_height
  // The navbar can have any arbritrary height. We picked one that is twice the
  // line-height pluse 1em: 2 x 1.3 + 1 = 3.6
  // Set this to the same value as the margin-top below.
  //.section

#search-box,
#block-search-0
  position: absolute
  bottom: 0
  text-align: right
  right: 0
  background-color: black
  width: $blueprint_grid_width * 8 + $blueprint_grid_margin * (8 - 1) + $blueprint_grid_margin / 4

#primary
  // Width of search-box
  margin-left: 0

#secondary
  // Width of search-box
  margin-left: 0

#navigation
  // Primary and secondary links
  ul
    // Primary and secondary links
    +reset-box-model
    // A simple method to get navbar links to appear in one line.
    +horizontal-list(10px)
    // There are many methods to get navbar links to appear in one line.
    // Here's an alternate method:
    // +inline-list
    // LTR
    text-align: left

// First sidebar

.region-sidebar-first
  +zen-blueprint-region($zen_blueprint_left_units)
  .section
    +reset-box-model
    // LTR
    margin:
      right: $zen_gutter

// Second sidebar

.region-sidebar-second
  +zen-blueprint-region($zen_blueprint_right_units, margin, $zen_blueprint_left_units + $zen_blueprint_content_units)
  .section
    +reset-box-model
    // LTR
    margin:
      left: $zen_gutter

// Footer

//#footer
  .section

// Closure

// See also the #page-wrapper declaration above that this div shares.
//#closure-blocks

// Markup free clearing

.clearfix
  +pie-clearfix

// Prevent overflowing content

#header,
#content,
#navigation,
.region-sidebar-first,
.region-sidebar-second,
#footer,
#closure-blocks
  +zen-region-visibility

#navigation
  // May need to be removed if using a dynamic drop-down menu
  overflow: hidden

// If a div.clear-block doesn't have any content after it and its bottom edge
// touches the bottom of the viewport, Firefox and Safari will mistakenly
// place several pixels worth of space between the bottom of the div and the
// bottom of the viewport. Uncomment this CSS property to fix this.
// Note: with some over-large content, this property might cause scrollbars
// to appear on the #page-wrapper div.

// #page-wrapper
// {
//   overflow-y: hidden;
// }

.content-newswire,.prime-half
  #content
    +zen-blueprint-region(12, width)
  .region-sidebar-first
    +zen-blueprint-region(6, margin, 12)
    .section
      +reset-box-model
      // LTR
      margin:
        left: $zen_gutter
  .region-sidebar-second
    +zen-blueprint-region(6, margin, 18)
    .section
      +reset-box-model
      // LTR
      margin:
        left: $zen_gutter

.page-admin-build-block
  +zen-blueprint-layout(18, 3, 3)

.layout-full
  #content
    +zen-blueprint-region(24, width)
  .region-sidebar-first,.region-sidebar-second
    +zen-blueprint-region(12, width)
    +reset-box-model
    float: none
    clear: left
    display: block
    .region
      +reset-box-model

.layout-threequarters
  +zen-blueprint-layout(18, 0, 3)

// Edition (home) layouts

.edition-full
  #edition-top
    +container

.edition-full,
.edition-twothirds
  #edition-content
    +column(16)
    .grid-unit
      +column(8)
      &.last
        +last
  #edition-sidebar
    +column(8, true)

.edition-threequarters
  +zen-blueprint-layout(24, 0, 0)
  #edition-content
    +column(18)
    .grid-unit
      +column(9)
      &.last
        +last
  #edition-sidebar
    +column(6, true)

.edition-half
  #edition-content,#edition-sidebar
    +column(12)
  #edition-sidebar
    +last
  #homepage-features-node_content_3
    +column(12)

.with-navigation
  #content, .region-sidebar-first, .region-sidebar-second
    margin-top: $zen_navbar_height


// Prime layouts

.prime-twothirds
  +zen-blueprint-layout(16, 0, 8)
  #content-area
    +span(14)
  #node-sidebar
    +span(5)
    +push(2)

.prime-half,.prime-threequarters
  //#content-area
  #node-sidebar
    +span(5)
    +float-right

// Login

.not-logged-in.section-user
  +zen-blueprint-layout(12)


// Living Palestine

body.section-living
  +zen-blueprint-layout(16, 0, 8)

// Blog

body.section-blog
  +zen-blueprint-layout(16, 0, 8)