@import "compass/css3";

// variables
$link-color: #333;
$link-bg-hover: #f20081;
$link-bg-active: adjust-hue($link-bg-hover, -136%);
$font-stack: 'helvetica neue', helvetica, arial, sans-serif;
$inset-text: 0 1px 1px rgba(white, 0.72);


// demo styles
body {
  background: url('http://efdezigns.com/images/wild_oliva.png') repeat center top;
  text-align: center;
}

.pagination {
	margin-top: 200px;
}


// pagination styles
.pagination {
	font-weight: bold;
	font-size: 16px;
	font-family: $font-stack;

	a {
		padding: 8px 16px;
		border: 1px solid lighten(black, 15%);
		border-radius: 3px;
		@include background(linear-gradient(top, darken(white, 11%), darken(white, 28%)));
		box-shadow: 0 0 6px rgba(black, 0.6), inset 0 1px rgba(white, .4);
		color: $link-color;
		text-decoration: none;
		text-shadow: $inset-text;

		&:hover {
			@include background(linear-gradient(top, darken($link-bg-hover, 5%), darken($link-bg-hover, 16%)));
			color: darken($link-bg-hover, 40%);
		}

		&.active {
			@include background(linear-gradient(top, darken($link-bg-active, 5%), darken($link-bg-active, 20%)));
			color: darken($link-bg-active, 40%);

			&:hover { cursor: default; }
		}
	}

	.prev {
		&:before {
			content: "« ";
			font-weight: normal;
		}
	}

	.next {
		&:after {
			content: " »";
			font-weight: normal;
		}
	}

	.next, .prev {
		&:hover {
			border-color: lighten(black, 8%);
			@include background(linear-gradient(top, lighten(black, 15%), lighten(black, 10%)));
			box-shadow: 0 0 6px rgba(black, 0.6), inset 0 1px rgba(white, .1);
			color: darken(white, 8%);
			text-shadow: none;
		}
	}
}