@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
 */

$navHeight: 26px;

body {
  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #ecedef url('../img/bg.png') 0 0 repeat;
}

.container {
  margin: 80px auto 120px;
  width: 640px;
}

nav {
  height: $navHeight;
  text-align: center;

  ul {
    border-width: 1px;
    border-style: solid;
    border-color: #d5d5d5 #d2d2d2 #cdcdcd;
    border-radius: 3px;
    @include inline-block;
    @include box-shadow(0 1px 1px rgba(black, .04));
  }

  li {
    float: left;
    border-left: 1px solid #d2d2d2;

    &:first-child {
      border-left: 0;
      a { border-radius: 3px 0 0 3px; }
    }

    &:last-child a { border-radius: 0 3px 3px 0; }
  }

  a {
    display: block;
    position: relative;
    padding: 0 14px;
    height: $navHeight;
    line-height: $navHeight;
    font-size: 11px;
    font-weight: bold;
    color: #666;
    text-decoration: none;
    text-shadow: 0 1px white;
    background: #fafafa;
    @include linear-gradient(top, #fcfcfc, #f0f0f0);
    @include box-shadow(inset 0 0 0 1px #fafafa);

    &:hover {
      color: #333;
      z-index: 2;
      @include box-shadow(inset 0 0 0 1px #fafafa, 0 0 3px rgba(black, .3));
    }
  }

  li.active a, a:active {
    color: #333;
    background: white;
    @include box-shadow(inset 0 0 3px rgba(black, .1));
  }

  .badge {
    display: block;
    position: absolute;
    top: -12px;
    right: 3px;
    line-height: 16px;
    height: 16px;
    padding: 0 5px;
    font-family: Arial, sans-serif;
    color: white;
    text-shadow: 0 1px rgba(black, .25);
    border: 1px solid;
    border-radius: 10px;
    @include box-shadow(inset 0 1px rgba(white, .3), 0 1px 1px rgba(black, .08));

    & {
      $color: #67c1ef;
      background: $color;
      border-color: darken($color, 12%);
      @include linear-gradient(top, lighten($color, 15%), $color);
    }

    &.green {
      $color: #77cc51;
      background: $color;
      border-color: darken($color, 12%);
      @include linear-gradient(top, lighten($color, 15%), $color);
    }

    &.yellow {
      $color: #faba3e;
      background: $color;
      border-color: darken($color, 12%);
      @include linear-gradient(top, lighten($color, 15%), $color);
    }

    &.red {
      $color: #fa623f;
      background: $color;
      border-color: darken($color, 2%);
      @include linear-gradient(top, lighten($color, 15%), $color);
    }
  }
}