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

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

body {
  font: 12px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #282537;
  @include radial-gradient(top, circle cover, #3c3b52, #252233 80%);
}

.month-picker {
  margin: 100px auto;
  width: 600px;
  text-align: center;
}

.month-picker-fieldset {
  display: inline-block;
  padding: 0 7px;
  background: rgba(black, .4);
  border-radius: 5px;
  @include box-shadow(inset 0 0 0 1px rgba(black, .7),
                      inset 0 2px 2px rgba(black, .3),
                      0 1px rgba(white, .1));

  > input {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
  }
}

.month-picker-label, .month-picker-nav {
  display: inline-block;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 25px;
  vertical-align: top;
  cursor: pointer;
}

input:focus + .month-picker-label, .month-picker-nav:focus {
  outline: 2px solid  rgb(94, 158, 215);
  outline: 5px auto -webkit-focus-ring-color;
}

.month-picker-label {
  position: relative;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 200;
  color: #8d8ba6;
  text-transform: uppercase;
  text-shadow: 0 1px 1px black;

  &, &:before { @include transition(.15s ease-out); }

  &:before {
    content: '';
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: -2px;
    right: -2px;
    border: 2px solid;
    border-color: #e4e0fb #b6b1d1 #b6b1d1;
    border-radius: 6px;
    opacity: 0;
    @include box-shadow(0 0 1px rgba(black, .2));
  }

  input:checked + & {
    color: white;
    background: #302e42;
    @include linear-gradient(top, #302e42, #29253b);

    &:before { opacity: 1; }
  }
}

.month-picker-nav {
  width: 25px;
  font-size: 16px;
  font-weight: bold;
  color: rgba(black, .7);
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px rgba(white, .1);
}
