@import '../../shared/mixins',
        '../../shared/reset',
        '../../shared/about-light';

/*
 * Copyright (c) 2012-2013 Thibaut Courouble
 * http://www.cssflow.com
 *
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 */

$siteWidth: 540px;
$headerHeight: 37px;

// Blue
$bodyBackgroundColor: #10abd7;
$headerBackgroundColor: #1d2e35;

// Green
// $bodyBackgroundColor: #09d797;
// $headerBackgroundColor: #1d3335;

// Purple
// $bodyBackgroundColor: #9f97d7;
// $headerBackgroundColor: #242735;

body {
  padding-top: $headerHeight;
  font: 13px/18px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  font-weight: normal;
  color: #404040;
  background: $bodyBackgroundColor;
}

.container {
  width: $siteWidth;
  margin: 0 auto;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: $headerHeight;
  line-height: $headerHeight;
  color: #ddd;
  text-shadow: 0 -1px black;
  background: lighten($headerBackgroundColor, 4%);
  border-bottom: 1px solid #191919;
  @include linear-gradient(top, lighten($headerBackgroundColor, 4%),
                                lighten($headerBackgroundColor, 3%) 50%,
                                $headerBackgroundColor 50%,
                                darken($headerBackgroundColor, 1%));
  @include box-shadow(inset 0 0 1px rgba(white, .1), 0 0 3px rgba(black, .8));

  a {
    @include transition(.1s ease-out);
    @include transition-property(background, color);
  }

  h1 {
    float: left;

    a {
      display: block;
      padding: 0 15px;
      font-size: 16px;
      color: #eee;
      text-decoration: none;

      &:hover { color: white; }
    }
  }

  nav {
    float: right;
    border-left: 1px solid lighten($headerBackgroundColor, 10%);
    border-left: 1px solid rgba(white, .05);
    border-right: 1px solid #111;

    li { float: left; }

    a {
      display: block;
      padding: 0 15px;
      color: #d0d9de;
      text-decoration: none;
      border-left: 1px solid #191919;
      border-right: 1px solid lighten($headerBackgroundColor, 10%);
      border-right: 1px solid rgba(white, .05);
      cursor: pointer;

      &:hover {
        background: lighten($headerBackgroundColor, 10%);
        background: rgba(white, .1);
      }

      &.icon {
        padding-left: 40px;
        background-position: 12px 11px;
        background-repeat: no-repeat;
      }

      &.tasks { background-image: url('../img/tasks.png'); }
      &.messages { background-image: url('../img/messages.png'); }
      &.settings { background-image: url('../img/settings.png'); }
    }

    li.active a, a:active {
      padding-right: 16px;
      background-color: darken($headerBackgroundColor, 1%);
      border-right: 0;
      @include box-shadow(inset 0 0 3px rgba(black, 0.7));
    }

    span {
      display: inline-block;
      vertical-align: text-top;
      margin-left: 10px;
      padding: 0 5px;
      line-height: 16px;
      font-size: 11px;
      color: white;
      text-shadow: 0 1px #902a27;
      background: #e93631;
      border-radius: 2px;
      @include linear-gradient(top, #f65d5f, #e93631);
      @include box-shadow(inset 0 1px rgba(white, .2), 0 1px rgba(black, .2));
    }
  }
}