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

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

.container {
  margin: 50px auto;
  width: 640px;
  text-align: center;

  .dropdown { text-align: left; }
}

.dropdown {
  $color: #363d47;
  position: relative;
  height: 27px;
  background: $color;
  border: 1px solid;
  border-color: darken($color, 7%) darken($color, 8%) darken($color, 9%);
  border-radius: 3px;
  @include inline-block;
  @include linear-gradient(top, lighten($color, 9%), $color);
  @include box-shadow(inset 0 1px rgba(white, .1), 0 1px 2px rgba(black, .15));

  a {
    font-size: 12px;
    text-decoration: none;
    text-shadow: 0 1px black;
  }

  > a {
    float: left;
    position: relative;
    height: 27px;
    line-height: 26px;
    padding: 0 12px;
    color: #ecf0f1;
    border-radius: 2px 0 0 2px;

    &:before {
      content: '';
      display: inline-block;
      vertical-align: -2px;
      width: 10px;
      height: 11px;
      margin-right: 10px;
      background: url('../img/settings.png') 0 0 no-repeat;
    }

    &:hover {
      background: lighten($color, 4%);
      background: rgba(white, .04);
    }

    &:active { background: darken($color, 1%); }
  }

  div {
    float: left;
    height: 27px;
    width: 26px;
    background: url('../img/toggle.png') 9px 9px no-repeat;
    border-left: 1px solid darken($color, 6%);
    border-color: rgba(black, .4);
    @include box-shadow(inset 1px 0 rgba(white, .08));

    &:hover {
      @include box-shadow(inset 1px 0 rgba(white, .04), inset 26px 26px rgba(black, .1));
      ul { display: block; }
    }
  }

  ul {
    display: none;
    position: absolute;
    top: 27px;
    left: -1px;
    right: -1px;
    background: darken($color, 7%);
    border: 1px solid darken($color, 10%);
    border-radius: 0 0 3px 3px;
    @include box-shadow(0 1px 2px rgba(black, .2));

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

    a {
      display: block;
      line-height: 28px;
      padding: 0 10px 1px;
      color: #b2b8c4;
      border-top: 1px solid transparent;

      &:hover {
        color: white;
        text-shadow: 0 1px rgba(black, .7);
        background: #426ebf;
        border-color: #78aad5;
        @include linear-gradient(top, #5e9ace, #416cb8);
      }
    }
  }
}