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

/*
 * Copyright (c) 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', Verdana, sans-serif;
  color: #404040;
  background: #9aa8b2;
  @include radial-gradient(circle cover, #aeb8c1, #8c979f 80%);
}

.container {
  margin: 80px auto;
  padding: 20px;
  text-align: center;
  background: #f5f5f5;
  @include linear-gradient(top, #fdfdfd, #eee);
  @include box-shadow(inset 0 1px white,
                      inset 0 -1px rgba(white, .6),
                      0 1px 3px rgba(black, .1),
                      0 0 1px 1px rgba(black, .08));
}

.button {
  display: inline-block;
  vertical-align: top;
  min-width: 60px;
  line-height: 35px;
  padding: 0 20px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px rgba(black, .2);
  background: #8c96a4;
  border: 1px solid;
  border-color: #8c8f9a #78828b #6e6e6e;
  @include linear-gradient(top, #a9b5c4, #848d9b 90%);
  @include box-shadow(inset 0 1px rgba(white, .15),
                      inset 0 0 1px 1px rgba(white, .15),
                      0 1px 1px rgba(black, .1));

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

  & + & {
    position: relative;
    margin-left: -1px;
  }

  &:active {
    background: #848d9b;
    border-color: #6e6e6e #78828b #78828b;
    @include box-shadow(inset 0 1px 2px rgba(black, .1),
                        0 1px rgba(white, .3));
  }
}

.button-blue {
  background: #6990d1;
  border-color: #687ebb #5f74a6 #4e6198;
  @include linear-gradient(top, #8eb7e0, #5f85cc 90%);

  &:active {
    background: #5f85cc;
    border-color: #4e6198 #5f74a6 #5f74a6;
  }
}