// Ideally, variables should be initialized in a partial. We're setting
// variables here to make the mixin usage more transparent.
$legacy-support-for-ie6: false;
$legacy-support-for-ie7: false;

// Import Zen Grids.
@import "zen";

$zen-column-count: 12;
$zen-gutter-width: 20px;


//
// Skip link styling
//
@media all and (min-width: 480px) {
  #skip-link a {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
      clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
    }
    clip: rect(1px, 1px, 1px, 1px);

    &:active,
    &:focus {
      position: static !important;
      clip: auto;
      height: auto;
      width: auto;
      overflow: auto;
    }
  }
}

#header,
#main,
#footer {
  margin: {
    left: auto;
    right: auto;
  }
  max-width: 1100px;
}

#main {
  @include zen-grid-container();
}

#content aside {
  font-weight: bold;
  font-style: italic;
  font-size: 1.2em;
  @include zen-grid-flow-item(1, 3);
  float: left;
  margin: {
    top: (1em/1.2);
    bottom: (1em/1.2);
  }
}

//
// Horizontal navigation bar
@media all and (min-width: 480px) {
  $zen-column-count: 1;
  $navbar-height: 4em;

  #main {
    padding-top: $navbar-height;
  }
  #main-menu {
    @include zen-grid-item(1, 1);
    margin-top: -$navbar-height;
    height: $navbar-height;
  }
}

@media all and (min-width: 480px) and (max-width: 639px) {
  $zen-column-count: 2;

  #content {
    @include zen-grid-item(2, 1);
  }
  #aside1 {
    @include zen-clear(); // Clear left-floated elements (#content)
    @include zen-grid-item(1, 1);
  }
  #aside2 {
    @include zen-grid-item(1, 2);
  }
}

@media all and (min-width: 640px) and (max-width: 799px) {
  $zen-column-count: 3;

  #content {
    @include zen-grid-item(2, 1);
  }
  #aside1 {
    @include zen-grid-item(1, 1, right); // Position from the right
  }
  #aside2 {
    @include zen-clear(); // Clear left-floated elements (#content)
    @include zen-grid-item(2, 1);
  }
}

@media all and (min-width: 800px) and (max-width: 959px) {
  $zen-column-count: 3;

  #content {
    @include zen-grid-item(2, 1);
  }
  #aside1 {
    @include zen-grid-item(1, 1, right); // Position from the right
  }
  #aside2 {
    @include zen-clear(right); // Clear right-floated elements (#aside1)
    @include zen-grid-item(1, 1, right);
  }
}

@media all and (min-width: 960px) {
  $zen-column-count: 5;

  #content {
    @include zen-grid-item(3, 2);
  }
  #aside1 {
    @include zen-grid-item(1, 1);
  }
  #aside2 {
    @include zen-grid-item(1, 5);
  }
}