// imports
@import "blueprint/colors";
@import "compass/reset";
@import "compass/css3";
@import "compass/utilities";

// variables
$font-color: hsl(0, 6%, 90%);
$link-color: $font-color;
$link-hover-color: hsl(32, 100%, 50%);
$border-color: black;
$background-normal: hsl(204, 25%, 35%);
$background-menu-normal: hsl(0, 0%, 20%);
$background-menu: color-stops(lighten($background-menu-normal, 15%),
  $background-menu-normal 25%, darken($background-menu-normal, 15%));
$background-button: color-stops(lighten($background-normal, 15%),
  $background-normal 75%, darken($background-normal, 5%));
$background-button-hover: color-stops(lighten($background-normal, 5%),
  $background-normal 75%, darken($background-normal, 15%));
// some defaults for functions
$default-text-shadow-color: hsl(0, 10%, 50%);
$default-text-shadow-h-offset: 2px;
$default-text-shadow-v-offset: 2px;
$default-text-shadow-blur: 2px;
$default-border-radius: 2px;

body {background: $background-normal; color: $font-color;}
#menu, #messages, #content {
  padding-left: 3em;
  padding-right: 3em;
}
#messsages, #content {
  padding-top: 1em;
}
#menu {
  @include background-image(linear-gradient($background-menu));
  li {
    float: left;
    display: inline-block;
  }
  :after {
    content: '';
    clear: both;
    display: block;
  }
  a {
    color: $link-color;
    padding: 1em;
    display: block;
    text-decoration: none;
    font-weight: bold;
    @include single-text-shadow;
    &:hover {
      color: $link-hover-color;
    };
  }
}
#messages {
  padding-top: 1em;
  .message {
    border: 1px solid black;
    padding: 0.5em;
  }
  .error {
    @extend .message;
    background-color: $error-bg-color;
    border-color: $error-border-color;
    color: $error-color;
  }
  .warning {
    @extend .message;
    background-color: $notice-bg-color;
    border-color: $notice-border-color;
    color: $notice-color;
  }
  .notice {
    @extend .message;
    background-color: $success-bg-color;
    border-color: $success-border-color;
    color: $success-color;
  }
}
#content {
  .buttons {
    clear: both;
  }
  .fields {
    clear: both;
    .main {
      width: 74%;
      float: left;
      textarea {
        width: 100%;
        height: 25em;
        @include box-sizing(border-box);
      }
    }
    .further {
      float: right;
      width: 24%;
    }
    .further:after {
      content: '';
      clear: both;
    }
    label, input, select {
      display: block;
    }
    label {
      font-size: 120%;
      font-weight: bold;
    }
    input, select {
      width: 100%;
    }
  }
  button {
    padding: 0.5em;
    margin: 0.1em;
    border: 1px solid $border-color;
    color: $link-color;
    font-weight: bold;
    @include background-image(linear-gradient($background-button));
    &:hover {
      @include background-image(linear-gradient($background-button-hover));
    }
    &:active {
      position: relative;
      top: 1px;
    }
  }
  a {
    color: $link-color;
    font: {
      weight: bold;
      decoration: none;
    }
  }
}
#login {
  text-align: center;
  .login {
    padding: 1em;
    font-weight: bold;
    font-family: Sans;
  }
  > div {
    width: 18em;
    margin: auto;
  }
}