@import "blueprint/reset";
// The blue color scheme
@import "partials/blue";
@import "blueprint";
@import "compass";

@mixin module {
  background: $module_background_color;
  border: 1px solid $module_border_color;
}

body {
  @include blueprint-typography(true);
  @include blueprint-utilities;
  @include blueprint-debug;
  @include blueprint-interaction;
  
  background: $background_color;
  text-align: center;
}

#container {
  margin: 0 auto;
  padding: 1em 2em 1em;
  text-align: center;
  width: 800px;
}

form {
  @include blueprint-form;
  
  input[type=text] {
    @include module;
    color: inherit;
    &:hover {
      border-color: $input_hover_border_color;
    }
    &:focus {
      border-color: $input_focus_border_color;
    }
  }
  
  input[type=submit] {
    background: $loud_button_background_color;
    border: 1px solid $loud_button_border_color;
    color: $loud_button_color;
    cursor: pointer;
    font-weight: bold;
    padding: 5px;
    &:focus {
      border-color: $loud_button_focus_border_color;
    }
  }
}

.alert {
  @include error;
}

h1 a {
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

.item {
  @include inline-block;
  padding: 10px;
  text-align: center;
  vertical-align: top;
  width: 100px;
  img {
    display: block;
    height: 80px;
    margin: 0 auto;
    width: 80px;
  }
}