// This import applies a global reset to any page that imports this stylesheet.
@import "blueprint/reset";
// To configure blueprint, edit the partials/base.sass file.
@import "partials/base";
// Import all the default blueprint modules so that we can access their mixins.
@import "blueprint";
// Import the non-default scaffolding module.
@import "blueprint/scaffolding";
// Import the humpyard module
@import "humpyard/base";

// To generate css equivalent to the blueprint css but with your configuration applied, uncomment:
@include blueprint;

//Recommended Blueprint configuration with scoping and semantic layout:

@include blueprint-scaffolding("#hy-body");
@include humpyard-base;

body.hy-logged-in {
  form {
    // TODO: remove blueprint dependencies
    // for our own jquery-ui froms
    // write our own macros for form layout
    @include blueprint-form-layout;
    @include blueprint-form-borders(#bbb, #666, #ccc);
    @include blueprint-form-sizes(400px, 400px, 250px);
  }
}

#hy-body {
  @include blueprint-typography(true);
  @include blueprint-utilities;
  @include blueprint-debug;
  @include blueprint-interaction;
  // Remove the scaffolding when you're ready to start doing visual design.
  // Or leave it in if you're happy with how blueprint looks out-of-the-box

  padding: 10px;
  font-size: 14px;
  
  .flash {
    border-width: 1px;
    border-style: solid;
    border-color: #999;
    background: #ccc;
    padding: 5px;
  }
  #flash_error {
    border-color: #f99;
    background: #fcc;    
  }

  form {
    @include blueprint-form;
  }
  .container {
    @include container;
  }
  #header, #footer {
    @include column($blueprint_grid_columns)
  }
  #footer {
    border-top: 1px solid $font_color;
  } 
  #sidebar {
    // One third of the grid columns, rounding down. With 24 cols, this is 8.
    $sidebar_columns: floor($blueprint_grid_columns / 6);
    @include column($sidebar_columns);
    p {
      @include box;
    }
  }
  #content {
    // Two thirds of the grid columns, rounding up.
    // With 24 cols, this is 16.
    $content_columns: ceil(5 * $blueprint_grid_columns / 6);
    // true means it's the last column in the row
    @include column($content_columns, true);

    .box-element {
      background: #ddd;
      padding: 5px;
      .box-element-content {
        border: 1px solid #fdd;
        background: #fff;
      }
    }
  }
}