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

/*
 * 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;
$navHeight: 36px;
$navBackgroundColor: #464b4c;

body {
  font: 13px/18px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #ecedef;
}

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

header {
  padding-top: 100px;
  background: #3d4144 url('../img/bg.png') 0 0 repeat;
  border-bottom: 5px solid #ddd;
}

nav {
  height: $navHeight;
  background: $navBackgroundColor;
  border-top: 1px solid darken($navBackgroundColor, 7%);
  border-bottom: 1px solid darken($navBackgroundColor, 10%);
  @include linear-gradient(top, $navBackgroundColor, darken($navBackgroundColor, 3%));
  @include box-shadow(inset 0 1px rgba(white, .06));

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

  ul {
    float: left;
    border-left: 1px solid darken($navBackgroundColor, 7%);
    border-left: 1px solid rgba(black, .20);
    border-right: 1px solid lighten($navBackgroundColor, 3%);
    border-right: 1px solid rgba(white, .06);
  }

  li { float: left; }

  a {
    display: block;
    padding: 0 20px;
    line-height: $navHeight;
    color: #ddd;
    text-decoration: none;
    text-shadow: 0 -1px darken($navBackgroundColor, 10%);
    border-left: 1px solid lighten($navBackgroundColor, 3%);
    border-left: 1px solid rgba(white, .06);
    border-right: 1px solid darken($navBackgroundColor, 7%);
    border-right: 1px solid rgba(black, .20);
    cursor: pointer;

    &:hover {
      background: lighten($navBackgroundColor, 3%);
      background: rgba(white, .05);
    }
  }

  li.active a, li.active a:hover, a:active {
    padding: 0 21px;
    line-height: $navHeight - 3px;
    color: #eee;
    background: darken($navBackgroundColor, 8%);
    border-left: 0;
    border-right: 0;
    border-bottom: 3px solid #48a9c0;
    @include linear-gradient(top, lighten($navBackgroundColor, 1%), darken($navBackgroundColor, 8%));
    @include box-shadow(inset 0 -1px darken($navBackgroundColor, 20%), inset 0 -1px 8px rgba(black, .2));
  }

  li.green a, li.green a:active { border-bottom-color: #56c93d; }
  li.red a, li.red a:active { border-bottom-color: #a54e49; }
  li.purple a, li.purple a:active { border-bottom-color: #c052b9; }
  li.yellow a, li.yellow a:active { border-bottom-color: #c0bb30; }
}