@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: #444 url('../img/bg.png') 0 0 repeat;
}

.container {
  margin: 50px auto;
  width: 640px;

  .cal { margin: 0 auto; }
}

.cal {
  display: block;
  width: 216px;
  @include box-shadow(1px 1px 3px rgba(black, .4));

  a { text-decoration: none; }

  caption {
    display: block;
    line-height: 32px;
    font-weight: bold;
    color: #e2e2e2;
    text-align: center;
    text-shadow: 0 -1px black;
    background: #333;
    background: rgba(black, .35);
    border-top: 1px solid #333;
    border-bottom: 1px solid #313131;
    @include box-shadow(inset 0 1px rgba(white, .04));

    a {
      display: block;
      line-height: 32px;
      padding: 0 10px;
      font-size: 15px;
      color: #e2e2e2;

      &:hover { color: white; }
    }

    .prev { float: left; }
    .next { float: right; }
  }

  th, td {
    width: 30px;
    text-align: center;
    text-shadow: 0 1px rgba(white, .8);

    &:first-child { border-left: 0; }
  }

  th {
    line-height: 20px;
    font-size: 8px;
    color: #696969;
    text-transform: uppercase;
    background: #f3f3f3;
    border-left: 1px solid #f3f3f3;
  }

  td {
    font-size: 11px;
    font-weight: bold;
    border-top: 1px solid #c2c2c2;
    border-left: 1px solid #c2c2c2;

    a {
      clear: both;
      display: block;
      position: relative;
      width: 30px;
      line-height: 28px;
      color: #666;
      @include linear-gradient(top, #eaeaea, #e5e5e5 60%, #d9d9d9);
      @include box-shadow(inset 1px 1px rgba(white, .5));
    }

    a:hover, &.off a { background: #f3f3f3; }

    &.off a { color: #b3b3b3; }

    &.active a, a:active {
      margin: -1px;
      color: #f3f3f3;
      text-shadow: 0 1px rgba(black, .3);
      background: #6dafbf;
      border: 1px solid #598b94;
      @include box-shadow(inset 0 0 10px rgba(black, .05));
    }

    &.active:first-child a, &:first-child a:active { border-left: 0; margin-left: 0; }
    &.active:last-child a, &:last-child a:active { border-right: 0; margin-right: 0; }
  }

  tr:last-child { td.active a, td a:active { border-bottom: 0; margin-bottom: 0; } }
}