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

html, body { min-height: 100%; }

body {
  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #dbdede;
  @include radial-gradient(center, circle cover, #dbdede, #bfbdbe);
}

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

.widget {
  position: relative;
  height: 36px;
  @include inline-block;

  &:before {
    content: '';
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: -6px;
    right: -6px;
    border-radius: 25px;
    @include linear-gradient(top, rgba(black, .05),
                                  rgba(white, .05) 20%,
                                  rgba(white, .6));
    @include box-shadow(inset 0 1px 2px rgba(black, .3),
                        0 1px rgba(white, .8));
  }

  ul {
    position: relative;
    padding: 0 14px;
    overflow: hidden;
    background: #eee;
    border: 1px solid;
    border-color: #a1a1a1 #909090 #808080;
    border-radius: 20px;
    @include linear-gradient(top, #eee, #ececec 40%, #cecece 70%, #a8a8a8);
    @include box-shadow(0 1px 2px rgba(black, .35));

    &::before {
      content: '';
      position: absolute;
      top: -48px;
      left: 0;
      right: 0;
      height: 110px;
      border-radius: 55px;

      // Won't work in WebKit until this bug is fixed: https://bugs.webkit.org/show_bug.cgi?id=72619
      background-image: -moz-linear-gradient(top , rgba(white, .5), rgba(white, .3));
      -moz-transform: scaleY(0.2);
    }
  }

  li {
    float: left;
    padding: 8px 10px;
  }

  a {
    display: block;
    position: relative;
    width: 20px;
    height: 20px;
    background: #adadad;
    border-radius: 10px;
    @include hide-text;
    @include box-shadow(inset 0 1px 3px 1px rgba(black, .5),
                        inset 0 5px 5px rgba(black, .1),
                        0 1px 1px rgba(white, .6));

    &:hover { background: #bfbfbf; }
  }

  .active a, a:active {
    height: 18px;
    width: 18px;
    background: #508fee;
    border: 1px solid #1f2128;
    border-color: rgba(black, .7);
    @include linear-gradient(top, #83bcff, #508fee 40%, #1644c2);
    @include box-shadow(inset 0 0 0 1px rgba(white, .12),
                        0 1px 1px rgba(white, .6));
  }
}