Cacher is the code snippet organizer for pro developers

// Colors
$brand-primary:         #036;
$accent-color:          rgba(193,213,229, 1.0);
$light-white:           #FAFAFA;
$white-smoke:           #F5F5F5;
$text-color:            rgb(66, 100, 127);
$link-color:            rgb(93, 123, 147);
$link-hover-color:      darken( $link-color, 15%);
$light-border-color:    lighten( $accent-color, 10%);

//Gradients
$gradient-top:          $light-white;
$gradient-bottom:       $light-border-color;

.wp-pagenavi {
  margin: 10% auto;
  padding: 1%;
  border: 1px solid $light-border-color;
  background: $white-smoke;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: inset 0 2px 1px rgba(0, 0, 0, .08);
  -moz-box-shadow: inset 0 2px 1px rgba(0, 0, 0, .08);
  box-shadow: inset 0 2px 1px rgba(0, 0, 0, .08);

  span.pages {

    &:hover {
      border: 1px solid $accent-color !important;
      -moz-box-shadow: none !important;
      -ms-box-shadow: none !important;
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
    }
  }

  span.current {
    font-weight: bold;
  }

  span, span.current, span.pages, a {
    display: inline-block;
    border: 1px solid $accent-color;
    margin: .5%;
    padding: .8% 2%;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 1px #fff;
    -moz-box-shadow: inset 0 0 1px #fff;
    box-shadow: inset 0 0 1px #fff;
    background: $gradient-top; /* For IE and older browsers */
    background-image: -moz-linear-gradient(top, $gradient-top 0, $gradient-bottom 100%);
    background-image: -ms-linear-gradient(top, $gradient-top 0, $gradient-bottom 100%);
    background-image: -o-linear-gradient(top, $gradient-top 0, $gradient-bottom 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, $gradient-top), color-stop(100%, $gradient-bottom));
    background-image: -webkit-linear-gradient(top, $gradient-top 0, $gradient-bottom 100%);
    background-image: linear-gradient(to bottom, $gradient-top 0, $gradient-bottom 100%);

    &:hover {
      border: 1px solid darken($accent-color, 10%) !important;
      -moz-box-shadow: 0 0 2px rgba(0, 0, 0, .25);
      -ms-box-shadow: 0 0 2px rgba(0, 0, 0, .25);
      -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .25);
      box-shadow: 0 0 2px rgba(0, 0, 0, .25);
    }

  }

}