@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: #26272c;
}

.container {
  margin: 80px auto;
  width: 400px;
  text-align: center;

  .pagination { margin: 15px 0; }
}

.pagination {
  padding: 8px;
  background-clip: padding-box;
  border: 1px solid;
  border-color: #070809 #0d0e0f #131517;
  border-color: rgba(black, .8) rgba(black, .65) rgba(black, .5);
  border-radius: 3px;
  @include inline-block;
  @include linear-gradient(top, rgba(black, .12), rgba(black, 0));
  @include box-shadow(0 1px rgba(white, .05));

  > a, > span {
    float: left;
    margin-left: 5px;
    padding: 0 6px;
    min-width: 17px;
    line-height: 27px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #d4d4d4;
    text-align: center;
    text-decoration: none;
    border: 1px solid black;
    border-radius: 3px;
  }

  :first-child { margin-left: 0; }

  > a {
    text-decoration: none;
    text-shadow: 0 1px black;
    background-clip: padding-box;
    border-color: rgba(black, .9);
    @include linear-gradient(top, rgba(white, .04), rgba(white, 0));
    @include box-shadow(inset 0 0 0 1px rgba(white, .04),
                        inset 0 1px rgba(white, .04),
                        inset 0 -1px rgba(black, .15),
                        0 1px 1px rgba(black, .1));
    @include transition(.1s ease-out);

    &:hover {
      background-color: #333;
      background-color: rgba(white, .05);
    }
  }

  > span, > a:active {
    color: #eee;
    text-shadow: 0 -1px black;
    background: #1c1c1c;
    background: rgba(white, .01);
    border-color: black rgba(black, .65) rgba(black, .6);
    @include box-shadow(inset 0 1px rgba(black, .05),
                        inset 0 2px 2px rgba(black, .3),
                        0 1px rgba(white, .06));
  }

  .prev, .next {
    font-family: Noteworthy, Arial, sans-serif;
    font-size: 14px;
  }
}

.pagination-blue {
  background-color: rgba(0, 5, 50, .1);
  > a { background-color: rgba(170, 170, 255, .01); }
  > a.hover { background-color: rgba(120, 130, 255, .08); }
}
