////////////////////////////////////////////////////////////////////////////////
// Layout Styling
// --------------------
// This partial defines CSS classes to create a table-free layout, with 
// 1-3 columns, depending on whether blocks are enabled in the left or right
// columns.
//
// We use a negative margin technique, adapted from the Zen Columns layout 
// method (http://drupal.org/node/201428). The page is loaded in this order:
//   1. Header
//   2. Content
//   3. Navigation menus
//   4. Sidebar Left
//   5. Sideabr Right
//
// Only CSS that affects the layout (positioning) of major elements should be
// listed here. Most visual styling should go in _custom.scss.
////////////////////////////////////////////////////////////////////////////////

#page { // Remove 'auto' and the width to switch to a fluid width.
  width: $page_width;
  margin: 0 auto;
  @media screen and (max-width : 800px) {
    width: 100%;
  }
  @media screen and (max-width : 480px) {
    width: 100%;
    margin: $navigation_height 0px 0px 0px;
  }
}

body, #page {
  height:100%; // Page height fills the screen and footer at the bottom.
}
body {
  @media screen and (max-width : 800px) {
    background: #fff;
    word-wrap: break-word;
    -webkit-text-size-adjust: none;
  }
}
html, body {
  @media screen and (max-width : 800px) {
    margin: 0;
    padding: 0;
    border: 0;
    padding: 0px;
  }
  @media screen and (max-width : 480px) {
    margin: 0;
    padding: 0;
    border: 0;
    padding: 0px;
  }
}

#main {
  padding-bottom: $footer_height;
  position: relative;
  @media screen and (max-width : 800px) {
    padding-bottom: 0px;
  }
  @media screen and (max-width : 480px) {
    padding-bottom: 0px;
    position: static;
  }
}

#content {
  float: left;
  width: 100%;
  margin-right: -100%;
  padding: 0;
}

.sidebar {
  float: left;
}

#sidebar-second {
  float: right;
  @media screen and (max-width : 800px) {
    float: none;
    clear: both;
    width: auto;
    margin: 0px;
    padding: 5px;
  }
}

#footer {
  position: absolute;
  bottom: 0px;
  height: $footer_height;
  width: $page_width;
  float: none;
  clear: both;
  @media screen and (max-width : 800px) {
    position: relative;
    width: 100%;
  }
  @media screen and (max-width : 480px) {
    position: relative;
    width: 100%;
  }
}

.sidebar, #sidebar-first, #sidebar-second {
  @media screen and (max-width : 480px) {
    float: none;
    clear: both;
    width: auto;
    margin: 0px;
    padding: 5px;
  }
}
#content #content-inner.center {
  @media screen and (max-width : 480px) {
    margin: 0px;
    padding: 5px;
  }
}

//
// Layout Helpers
//
#header,
#footer,
.mission,
.breadcrumb,
.node {
  clear: both;
}

//
// Column widths
//
.two-sidebars,
.sidebar-first {
  .center {
    margin-left: percentage($first_sidebar_width / $page_width);
  }
}

#sidebar-first {
  width: percentage($first_sidebar_width / $page_width);
  margin-right: -$first_sidebar_width;
  @media screen and (max-width : 480px) {
    margin-right:0;
    width:100%;
  }
}

.two-sidebars,
.sidebar-second {
  .center {
    margin-right: $second_sidebar_width;
  }
}

#sidebar-second {
  width: $second_sidebar_width;  
  @media screen and (max-width : 480px) {
    margin-right:0;
    width:100%;
  }
}

//
// Columns Inner
// -------------
// You can change the padding inside the columns without changing the
// width of them by just usinbg the INNER div of each column
//
.inner {
  padding: 0;
}

//
// Navigation styles 
// -----------------
// The navigation is loaded after the content, so we need to make space
// for it, equal to its height, so if you change the height of the navigation,
// remember to adapt the margin top of the content and sidebars.
//
#navigation {
  float: left;
  margin-left: 0;
  margin-right: -100%;
  padding: 0;
  width: 100%;
  height: $navigation_height;
  @media screen and (max-width : 480px) {
    clear: both;
    padding: 5px;
    position: absolute;
    top: 0px;
  }
}

// Navigation height
.with-navigation {
  #content,
  .sidebar {
    margin-top: $navigation_height;
  }
  #content {
    @media screen and (max-width : 480px) {
      margin-top: 0px;
    }
  }
}

