_resrouces.scss

// https://gist.githubusercontent.com/squarestar/b7673d7a7f214bcc6f2f/raw/_resrouces.scss
// https://gist.github.com/squarestar/b7673d7a7f214bcc6f2f
//========================================================================================
// FUNCTIONS <editor-fold desc="FUNCTIONS" defaultstate="collapsed">
//----------------------------------------------------------------------------------------

@function append($item, $append) {
	@if $item {
		$appended: #{$item}unquote(',') $append;
	} @else {
		$appended: $append;
	}
	@return $appended;
}

@function compact($list) {
	$newList: ();
	@each $element in $list {
		@if $element {
			@if $newList == () {
				$newList: $element;
			} @else {
				$newList: append($newList, $element);
			}
		}
	}
	@return $newList;
}

@mixin _Prefix($property, $value) {
	@each $prefix in -webkit, -moz, -ms, -o {
		#{$prefix}-#{$property}: $value;
	}
	#{$property}: $value;
}

@mixin _PrefixValue($property, $value) {
	@each $prefix in -webkit, -moz, -ms, -o {
		#{$property}: #{$prefix}-#{$value};
	}
	#{$property}: $value;
}


//</editor-fold>

//========================================================================================
// THE BOX MODEL <editor-fold desc="THE BOX MODEL" defaultstate="collapsed">
//----------------------------------------------------------------------------------------
@mixin BoxSizing ($sizing: border-box) {
	@include _Prefix('box-sizing', $sizing);
}
//</editor-fold>

//========================================================================================
// COLOURS, GRADIENTS, SHADOWS <editor-fold desc="COLOURS, GRADIENTS, SHADOWS" defaultstate="collapsed">
//----------------------------------------------------------------------------------------
@mixin Selection ($bgcolor: #000, $color: #fff) {
	::-moz-selection 	{ background: $bgcolor; color: $color; text-shadow: none; }
	::selection 		{ background: $bgcolor; color: $color; text-shadow: none; }
}

@mixin LinkColors ($default, $hover, $visited: $default, $focus: $hover, $active: $hover) {
	a {
		color: $default;
		&:link 		{ color: $default; }
		&:visited 	{ color: $visited; }
		&:hover 	{ color: $hover; }
		&:active 	{ color: $active; }
		&:focus 	{ color: $focus; }
	}
}

@mixin LinkBGColors ($default, $hover, $visited: $default, $focus: $default, $active: $hover) {
	a {
		background-color: $default;
		&:link 		{ background-color: $default; }
		&:visited 	{ background-color: $visited; }
		&:hover 	{ background-color: $hover; }
		&:active 	{ background-color: $active; }
		&:focus 	{ background-color: $focus; }
	}
}

// @include BoxShadow (x, y, blur, spread, color, inset)
@mixin BoxShadow ($x: 0, $y: 0, $blur: 1px, $spread: 1px, $color: #000, $inset: false) {
	@if $x == none {
		$boxShadow: none;
	} @else if $x == inherit {
		$boxShadow: inherit;
	} @else {
		$boxShadow: $x $y $blur $spread $color;
	}
	@if $inset == inset {
		 @include _Prefix(box-shadow, inset $boxShadow);
	} @else {
		@include _Prefix(box-shadow, $boxShadow);
	}
}

@mixin BoxShadowMult ($shadow-1, $shadow-2, $shadow-3: false, $shadow-4: false, $shadow-5: false, $shadow-6: false, $shadow-7: false, $shadow-8: false, $shadow-9: false, $shadow-10: false) {
	$newList: $shadow-1;
	@each $element in $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10 {
		@if $element {
			$newList: append($newList, $element);
	    }		
	}
	$boxShadow: $newList;
	//$boxShadow: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
	@include _Prefix(box-shadow, $boxShadow);
}

@mixin TextShadow ($x: 0, $y: 0, $blur: 1px, $color: #000) {
	@if $x == none {
		$textShadow: none;
	} @else if $x == inherit {
		$textShadow: inherit;
	} @else {
		$textShadow: $x $y $blur $color;
	}
	@include _Prefix(text-shadow, $textShadow);
}

// Text Outline

@mixin TextOutline ($dist, $color, $blur: 0) {
	$top: -$dist -$dist $blur $color;
	$bottom: $dist $dist $blur $color;
	$right: -$dist $dist $blur $color;
	$left: $dist -$dist $blur $color;
	$textShadow: #{$top}unquote(',') #{$right}unquote(',') #{$bottom}unquote(',') #{$left};
	@include _Prefix(text-shadow, $textShadow);
}

@mixin SimpleGradient ($direction1: top, $direction2: false, $start: #666, $end: #ccc, $fallback: false) {
	@if $fallback {
		background-color: $fallback;
	} @else {
		background-color: ($start + $end) / 2;
	}
	@if $direction2 {
		@each $prefix in -webkit, -moz, -ms, -o {
			background: #{$prefix}-linear-gradient($direction1 $direction2, $start, $end);
		}
		background-image: linear-gradient(to $direction1 $direction2, $start, $end);
	} @else {
		@each $prefix in -webkit, -moz, -ms, -o {
			background-image: #{$prefix}-linear-gradient($direction1, $start, $end);
		}
		background-image: linear-gradient(to $direction1, $start, $end);
	}
}

@mixin FullGradient ($angle, $start, $mid, $end, $fallback: #ccc) {
//@mixin WeightedTransparentGradient ($angle, $start, $mid, $end, $fallback) {
	background-color: $fallback;
	$fuckwitAngle: $angle - 90;
	background: -webkit-linear-gradient($fuckwitAngle, $start, $mid, $end);
	@each $prefix in -moz, -ms, -o {
		background: #{$prefix}-linear-gradient($angle, $start, $mid, $end);
	}
	background: linear-gradient($angle, $start, $mid, $end); // W3C
}

@mixin AngledGradient ($angle, $start, $end, $fallback: #ccc) {
//@mixin WeightedTransparentGradient ($angle, $start, $mid, $end, $fallback) {
	background-color: $fallback;
	@each $prefix in -webkit, -moz, -ms, -o {
		background: #{$prefix}-linear-gradient($angle, $start, $end);
	}
	background: linear-gradient($angle, $start, $end); // W3C
}

@mixin Opacity ($value: 1, $filterValue: $value * 100) {
	opacity: 	$value; // Chrome 4+, FF2+, Saf3.1+, Opera 9+, IE9, iOS 3.2+, Android 2.1+
	filter: 	alpha(opacity=$filterValue); // IE6-IE8
}

// Some pre built colour packs
// Format is: (background) (complement) (foreground) 
$color-3pack-maliwan: hsl(195, 70%, 40%), hsl(40, 100%, 48%), white;

//</editor-fold>

//========================================================================================
// SHAPES, BORDERS AND TRANSFORMS <editor-fold desc="SHAPES, BORDERS AND TRANSFORMS" defaultstate="collapsed">
//----------------------------------------------------------------------------------------
@mixin BorderImage ($url, $application, $fit, $width: 3px) {
	@each $prefix in -webkit, -moz, -o {
		#{$prefix}-border-image: url($url) $application / $width $fit;
	}
	border-image: url($url) $application / $width $fit;
}

$defaultRadius: 10px;
@mixin Rounded($radius1: $defaultRadius, $direction: all, $radius2: false) {
	$r_1: $radius1;
	$r_2: $radius2;

	$RA1: 0; $RA2: 0; $RA3: 0; $RA4: 0;

	@if $direction == tl	{ $RA1: $r_1; }
	@if $direction == tr	{ $RA2: $r_1; }
	@if $direction == br	{ $RA3: $r_1; }
	@if $direction == bl	{ $RA4: $r_1; }

	@if $direction == t		{ $RA1: $r_1; $RA2: $r_1; }
	@if $direction == r		{ $RA2: $r_1; $RA3: $r_1; }
	@if $direction == b		{ $RA3: $r_1; $RA4: $r_1; }
	@if $direction == l		{ $RA4: $r_1; $RA1: $r_1; }
	@if $direction == dnw	{ $RA1: $r_1; $RA3: $r_1; }
	@if $direction == dne	{ $RA2: $r_1; $RA4: $r_1; }

	@if $direction == nw	{ $RA1: $r_1; $RA2: $r_1; $RA4: $r_1; }
	@if $direction == ne	{ $RA1: $r_1; $RA2: $r_1; $RA3: $r_1; }
	@if $direction == se	{ $RA2: $r_1; $RA3: $r_1; $RA4: $r_1; }
	@if $direction == sw	{ $RA1: $r_1; $RA3: $r_1; $RA4: $r_1; }

	$border: $RA1 $RA2 $RA3 $RA4;

	@if $direction == all { $border: $r_1; }

	@if $r_2 {
		$RB1: 0; $RB2: 0; $RB3: 0; $RB4: 0;

		@if $direction == tl	{ $RB1: $r_2; }
		@if $direction == tr	{ $RB2: $r_2; }
		@if $direction == br	{ $RB3: $r_2; }
		@if $direction == bl	{ $RB4: $r_2; }

		@if $direction == t		{ $RB1: $r_2; $RB2: $r_2; }
		@if $direction == r		{ $RB2: $r_2; $RB3: $r_2; }
		@if $direction == b		{ $RB3: $r_2; $RB4: $r_2; }
		@if $direction == l		{ $RB4: $r_2; $RB1: $r_2; }
		@if $direction == dnw	{ $RB1: $r_2; $RB3: $r_2; }
		@if $direction == dne	{ $RB2: $r_2; $RB4: $r_2; }

		@if $direction == nw	{ $RB1: $r_2; $RB2: $r_2; $RB4: $r_2; }
		@if $direction == ne	{ $RB1: $r_2; $RB2: $r_2; $RB3: $r_2; }
		@if $direction == se	{ $RB2: $r_2; $RB3: $r_2; $RB4: $r_2; }
		@if $direction == sw	{ $RB1: $r_2; $RB3: $r_2; $RB4: $r_2; }

		$border: #{$RA1 $RA2 $RA3 $RA4} / #{$RB1 $RB2 $RB3 $RB4};

		@if $direction == all	{ $border: #{$r_1} / #{$r_2}; }
	}

	-webkit-border-radius: $border;
			border-radius: $border;
}

@mixin Circle () {
	@include Rounded(999px);
}

@mixin Triangle($direction, $size, $color:false, $proportion: 1.618) {
	display: block;
	height: 0;
	width: 0;
	@if $color == false {
		$color: #999;
	}
	$divided: $size / $proportion;
	@if $direction == up or $direction == down {
		border-left: $divided solid transparent;
		border-right: $divided solid transparent;
	}

	@if $direction == left or $direction == right {
		border-top: $divided solid transparent;
		border-bottom: $divided solid transparent;
	}

	@if $direction == up {
		border-bottom: $size solid $color;
		border-top: none;
	}

	@if $direction == down {
		border-top: $size solid $color;
		border-bottom: none;
	}

	@if $direction == left {
		border-right: $size solid $color;
		border-left: none;
	}

	@if $direction == right {
		border-left: $size solid $color;
		border-right: none;
	}

	@if $direction == up-left or $direction == up-right {
		border-top: $divided solid $color;
	}

	@if $direction == down-left or $direction == down-right {
		border-bottom: $divided solid $color;
	}

	@if $direction == up-left or  $direction == down-left {
		border-right: $size solid transparent;
	}

	@if $direction == up-right or $direction == down-right {
		border-left: $size solid transparent;
	}
}

@mixin Trapezoid($size, $color, $proportion: 1.618) {
	@include BoxSizing(content-box);
	display: block;
	$divided: $size / $proportion;
	border-bottom: $size solid $color;
	border-left: $divided solid transparent;
	border-right: $divided solid transparent;
	height: 0;
	width: $size;
}

@mixin ArrowCurved ($direction, $size, $color: red) {
	$tailRadius: $size * 2;
	$tailThickness: $size / 3;
	$tailHeight: $size * 1.333;

	display: block;
	position: relative;
	left: $size;
	height: 0;
	width: 0;
	margin-right: $size;
	transform: rotate(10deg);
	border-right: $size solid $color;
	border-top: $size solid transparent;

	&:after {
		content: "";
		position: absolute;
		width: $tailHeight;
		height: $tailHeight;
		left: -$size;
		top: -$tailHeight;
		transform: rotate(45deg);
		border-color: $color transparent transparent;
		border-radius: $tailRadius 0 0 0;
		border-right: 0 solid transparent;
		border-style: solid;
		border-width: $tailThickness 0 0;
	}
}

@mixin SearchGlass ($size:32px, $color: red, $text: text) {
	@include BoxSizing();
	$thickness: $size * .05;
	$circleRadius: $size * .35;
	$circleSize: $size * .5;
	$handleLength: $size * .3;
	$handleThickness: $size * .08;
	$margin: $size / 4;

	display: block;
	position: relative;
	height: $circleSize;
	width: $circleSize;
	border: $thickness solid $color;
	border-radius: $circleRadius;
	font-size: $size;
	text-indent: $size * .8;
	line-height: $size * .55;
	margin: 0 $margin $margin 0;

	&:before {
		content: "";
		position: absolute;
		height: $handleThickness;
		width: $handleLength;
		right: -($handleLength * .85);
		bottom: -($handleLength * .46);
		transform: rotate(45deg);
		background-color: $color;
	}
	@if $size > 40px {
		$connectorBorder: $size / ($size + 1px);
		$connectorThickness: $handleThickness - $thickness;
		$connectorPosition:  -$size / ($size *.75);;

		&:after {
			content: "";
			position: absolute;
			height: $connectorThickness;
			width:  $connectorThickness;
			right: $connectorPosition;
			bottom: $connectorPosition;
			border-color: $color;
			border-width: $connectorBorder;
			border-style: solid;
			transform: rotate(45deg);
		}
	}
}

@mixin Rotate($angle) {
	@each $prefix in -webkit, -moz, -ms, -o {
		#{$prefix}-transform: rotate($angle);
	}
	 transform: rotate($angle);
	 zoom: 1;
}

// $axes is a list ($x:1, $y:1)
@mixin Scale($x, $y:false) {
	@if $y == false {
		$y: $x;
	}
	@each $prefix in -webkit, -moz, -ms, -o {
		#{$prefix}-transform: scale($x, $y);
	}
	transform: scale($x, $y);
}

@mixin Move($x, $y:false) {
	@if $y == false {
		$y: $x;
	}
	@each $prefix in -webkit, -moz, -ms, -o {
		#{$prefix}-transform: translate($x, $y);
	}
	transform: translate($x, $y);
}

//</editor-fold>

//========================================================================================
// TYPOGRAPHY & ICONS <editor-fold desc="TYPOGRAPHY & ICONS" defaultstate="collapsed">
//----------------------------------------------------------------------------------------
@mixin Font($handle, $fileHandle, $weight: false, $style: false) {
	$eot: quote("#{$fileHandle}.eot");
	$woff: quote("#{$fileHandle}.woff");
	$ttf: quote("#{$fileHandle}.ttf");
	//$otf: quote(#{$fileHandle}.otf);
	$iefont: unquote("#{$eot}?");
	@font-face {
		font-family: quote($handle);
		src: url($eot);
		src: url($iefont) format('eot'),
			 url($woff) format('woff'),
			 url($ttf) format('truetype');
			 //url($otf) format('opentype');
		//$font-files: font-url($iefont) unquote("format('eot')"), $font-files;
		//src: $font-files;
		@if $weight { font-weight: $weight; }
		@if $style { font-style: $style; }
	}
}

@mixin HeadingScale($scale) {
	// Initial values are based on normalize.css 
	// http://necolas.github.com/normalize.css/
	$inv: 1/$scale;
	h1 {
	    font-size: 2em * $scale;
	    margin: 0.67em * $inv 0;
	}
	h2 {
	    font-size: 1.5em * $scale;
	    margin: 0.83em * $inv 0;
	}
	h3 {
	    font-size: 1.17em * $scale;
	    margin: 1em * $inv 0;
	}
	h4 {
	    font-size: 1em * $scale;
	    margin: (1.33 * $scale)em 0;
	}
	h5 {
	    font-size: 0.83em * $scale;
	    margin: 1.67em * $inv 0;
	}
	h6 {
	    font-size: 0.67em * $scale;
	    margin: 2.33em * $inv 0;
	}
}

// Creates a linear gradient of <hX> size & margin size-rules.
// Biggest change is to <h1>, reducing in effect to zero change to <h6>
@mixin HeadingSizes($scale: 1, $max: 6) {
	$headings: (2 .67) (1.5 .83) (1.17 1) (1 1.33) (.83 1.67); // ref: h6 (.67 2.33);
	$diff: $scale - 1;
	@each $ord in 1, 2, 3, 4, 5 {
		$inv: 6 - $ord;
		$mult: $inv / 5;
		$scale: 1 + ($diff * $mult);
		@if $ord <= $max {
			h#{$ord} {
				$heading: nth($headings, $ord);
				$f: nth($heading, 1);
				$f: $f * $scale;
				$m: nth($heading, 2);
				$m: $m * $scale;
				font-size: #{$f}em;
				margin: #{$m}em 0;
			}
		}
	}
}

// Returns a list of the heading elements with optional internal element(s)
@function H($el:false)
{
	$h: ();
	$newList: ();
	@each $ord in 1,2,3,4,5,6 {
		@if $el {
			$h: h#{$ord $el};
		} @else {
			$h: h#{$ord};
		}
		$newList: append($newList, $h, comma);
	}
	@return $newList;
}

// Creates single prop: val; entry for each of the heading sizes, or optionally for
// an element contained within them (h1 a, h2 a, ...)
@mixin H($prop, $val, $el:false) {
	$list: H($el);
	#{$list} {
		#{$prop}: $val;
	}
}

// Creates multiple prop: val; entries for each of the heading sizes, or optionally for
// an element contained within them (h1 a, h2 a, ...)
@mixin Hx($props, $el:false) {/**/
	$list: H($el);
	#{$list} {
		$length: length($props);
		$i: 0;

		@for $i from 1 through $length {
			$pair: nth($props, $i);
			$prop: nth($pair, 1);
			$val: nth($pair, 2);
			#{$prop}: $val;
		}
	}
}

@mixin RoundedSquareIcon($size, $radius: false) {
	//@include BoxSizing(content-box);
	@if $radius == small {
		$the_radius: $size / 16;
	} @else if $radius == medium {
		$the_radius: $size / 12;
	} @else if $radius == large {
		$the_radius: $size / 8;
	} @else if $radius == xxl {
		$the_radius: $size / 4;
	} @else if $radius {
		$the_radius: $radius;
	} @else {
		$the_radius: $size / 16;
	}
	@include Rounded($the_radius);
	display: block;
	height: $size;
	overflow: hidden;
	text-decoration: none;
	width: $size;
}

@mixin Facebook($size: 64px, $radius: small) {
	@include RoundedSquareIcon($size);
	position: relative;
	background: none repeat scroll 0 0 #3C5A98;
	border-color: #3C5A98;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
	color: #FFFFFF;
	font-family: arial, sans-serif;
	font-size: 64px;
	line-height: 66px;
	font-weight: bold;
	letter-spacing: 10px;
	text-indent: 34px;
	text-transform: lowercase;
}

@mixin Twitter($size: 64px, $radius: small) {
	$offset: $size / 16;
	@include RoundedSquareIcon($size);
	@include SimpleGradient(center, top, #DBF7F8, #88E1E6);
	@include BoxShadow(0, 0, $offset, 0, rgba(0, 0, 0, 0.4) );
	@include TextOutline($offset, $offset, $offset / 3, #FFFFFF);
	border-color: #A8EAEC;
	color: #76DDF8;
	$fontSize: $size - $offset;
	font: bold #{$fontSize}/#{$fontSize} Tahoma,sans-serif;
	letter-spacing: $size / 1.5;
	position: relative;
	text-indent: $size / 3;
	text-transform: lowercase;
}

@mixin Rss($size: 64px, $radius: small) {
	@include RoundedSquareIcon($size, $radius);
	@include SimpleGradient(center, top , #F19242, #E36443);
	@include BoxShadow(0, 0, 4px, 0, rgba(0, 0, 0, 0.4) );
	position: relative;
	width: $size;
	color: #FFFFFF;
	border-color: #EA6635;
	font-size: $size;
	font-weight: bold;
	text-indent: -186px;
	text-transform: lowercase;

	//$third: $size / 3;
	$sixth: $size / 6;
	$third: $sixth * 2;
	$fifth: $size / 5;
	$bigRadius: $sixth * 5;
	&:after {
		content: "";
		position: absolute;
		width: $third;
		bottom: $sixth;
		height: $third;
		left: $sixth;
		border-color: #FFFFFF;
		border-radius: 0 $bigRadius 0 0;
		border-style: double;
		$width: $fifth * 2;
		border-width: $width $width 0 0;
	}
	&:before {
		content: "";
		position: absolute;
		width: $fifth;
		bottom: $sixth;
		height: $fifth;
		left: $sixth;
		background-color: #FFFFFF;
		border-radius: $fifth;
	}
}
//</editor-fold>

//========================================================================================
// LAYOUT <editor-fold desc="LAYOUT" defaultstate="collapsed">
//----------------------------------------------------------------------------------------
@mixin BackgroundSize ($x: 100%, $y: 100%) {
	-webkit-background-size:	$x $y; // Saf3-4
	-moz-background-size:		$x $y; // FF3.6
	 background-size:			$x $y; // Opera, IE9, Saf5, Chrome, FF4
}

@mixin Columns ($cols, $gap) {
	-webkit-column-count: 	$cols; 	// Saf3, Chrome
	-moz-column-count: 		$cols; 	// FF3.5+
	 column-count: 			$cols; 	// Opera 11+
	-webkit-column-gap: 	$gap; 	// Saf3, Chrome
	-moz-column-gap: 		$gap; 	// FF3.5+
	 column-gap: 			$gap; 	// Opera 11+
}

//</editor-fold>

//========================================================================================
// MISCELLANEOUS <editor-fold desc="MISCELLANEOUS" defaultstate="collapsed">
//----------------------------------------------------------------------------------------
@mixin Animation ($args) {
	@each $prefix in -webkit, -moz, -ms, -o {
		#{$prefix}-animation: $args;
	}
	animation: $args;
}

@mixin DoubleBorder($side, $width, $color1, $color2, $style: solid) {

	& {
		position: relative;
		border-#{$side}-style: $style;
		border-#{$side}-width: $width;
		border-#{$side}-color: $color2;

		&:after {
			content: '';
			position: absolute;
			#{$side}: 0;
			border-#{$side}-style: $style;
			border-#{$side}-width: $width;
			border-#{$side}-color: $color1;

			@if $side == left {
				height: 100%;
				top: 0;
			} @else if $side == right {
				height: 100%;
				top: 0;
			} @else if $side == top {
				width: 100%;
				left: 0;
			} @else if $side == bottom {
				width: 100%;
				left: 0;
			}
		}
	}
}
//</editor-fold>

//========================================================================================
// BACKGROUND SPRITE <editor-fold desc="BACKGROUND SPRITE" defaultstate="collapsed">
//----------------------------------------------------------------------------------------
// $xord: the horizontal position of the sub-image
// $yord: the vertical position of the sub-image
// $ycount: the number of rows that each group of sub-images takes up
// $size: the size of the sub-image in px (assumes a square sub-image)
// $imgUrl: the image url
@mixin bg-sprite($xord, $yord, $ycount, $size, $imgUrl) {
	background-image: url('#{$imgUrl}');
	$x: -($xord * $size) + $size;
	$y: -($yord * $size) + $size;
	background-position: $x $y;

	&:hover,
	&:focus,
	&:active {
		$y1: $y - ($size * $ycount);
		background-position: $x $y1;
	}
}
//</editor-fold>

//========================================================================================
// HELPERS <editor-fold desc="HELPERS" defaultstate="collapsed">
//----------------------------------------------------------------------------------------
@mixin Clearfix () {
	&:before,
	&:after { content: " "; display: table; }
	&:after { clear: both; }
	*zoom: 1; //For IE 6/7 only
}

// Hide only visually, but have it available for screenreaders: h5bp.com/v
@mixin VisuallyHidden($focusable: false) {
	
	@if $focusable == true {
		&:active,
		&:focus {
			overflow: visible;
			clip: auto;
			position: static;
			width: auto;
			height: auto;
			margin: 0;
		}
	} @else {
		overflow: hidden;
		clip: rect(0 0 0 0);
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
	}
}

@mixin Transition($property, $duration, $function: false, $delay: false) {
	$transisition: $property $duration;
	@if $function {
		@if $delay {
			$transisition: $property $duration $function $delay;		
		} @else {
			$transisition: $property $duration $function;
		}
	}
	@if $property == none {
		$transition: none;
	}
	@each $prefix in -webkit, -moz, -ms, -o {
		#{$prefix}-transition: $transisition;
	}
}

@mixin _button()
{
	display: inline-block;
	margin: 0;
	white-space: nowrap;
	text-decoration: none;
	text-align: center;
}

@mixin Button($radius: 4px, $dark: #333, $light: #ddd, $textColor: false) {
	@include _button();
	height: 1.55em;
	padding: .05em .65em 1px;
	border-radius: $radius;
	border-width: 1px;
	border-style: solid;
	background-color: $dark;
	background-image: linear-gradient(to bottom, $light, $dark);
	$top: lighten($light, 10%);
	$bottom: darken($dark, 20%);
	$right: lighten($bottom, 20%);
	$left: darken($top, 10%);
	border-color: $top $right $bottom $left;
	@include BoxShadow(0, 0, 3px, transparentize($top, 30%), inset);
	@if $textColor {
		color: $textColor;
	} @else {
		color: lighten($top, 10%);
	}
	@include TextShadow(0, 1px, 0, transparentize($bottom, 50%) );

	&:hover {
		@include AngledGradient(5deg, $dark, $light, $dark);
		@include TextShadow(0, 1px, 0, $bottom);
		@include BoxShadowMult(0 0 3px transparentize($top, 50%) inset, 0 0 3px transparentize($top, 50%), 0 0 3px transparentize($top, 50%) );
	}

	&:active {
		background-image: linear-gradient(to bottom, $light, $dark);
		@include BoxShadow(0, 0, 3px, transparentize($top, 30%), inset);
	}
}

@mixin ModifyButtonColor($dark: #333, $light: #ddd, $textColor: false) {
	background-color: $dark;
	background-image: linear-gradient(to bottom, $light, $dark);
	$top: lighten($light, 10%);
	$bottom: darken($dark, 20%);
	$right: lighten($bottom, 20%);
	$left: darken($top, 10%);
	border-color: $top $right $bottom $left;
	@include BoxShadow(0, 0, 3px, transparentize($top, 30%), inset);
	@if $textColor {
		color: $textColor;
	} @else {
		color: lighten($top, 10%);
	}
	@include TextShadow(0, 1px, 0, transparentize($bottom, 50%) );

	&:hover {
		//$bottom: lighten($bottom, 10%);
		//$top: darken($top, 10%);
		@include AngledGradient(5deg, $dark, $light, $dark);
		@include TextShadow(0, 1px, 0, $bottom);
		@include BoxShadowMult(0 0 3px transparentize($top, 50%) inset, 0 0 3px transparentize($top, 50%), 0 0 3px transparentize($top, 50%) );
	}

	&:active {
		background-image: linear-gradient(to bottom, $light, $dark);
		@include BoxShadow(0, 0, 3px, transparentize($top, 30%), inset);
	}
}

@mixin WPbutton($fontSize: 12px) {
	@include _button();
	border-radius: $fontSize / 4;
	border: 1px solid;
	cursor: pointer;
	font-size: $fontSize;
	font-family: inherit;
	font-weight: inherit;
}

@mixin WPbuttonSecondaryStructure($fontSize: 12px) {
	@include WPbutton($fontSize);
	height: $fontSize * 2;
	line-height: ($fontSize * 2) - $fontSize / 12;
	padding: 0 ($fontSize * .9) ($fontSize / 12);
}

@mixin WPbuttonSecondary($fontSize: 12px) {
	@include WPbuttonSecondaryStructure($fontSize);
	border-color: #BBB;
	color: #333;
	text-shadow: 0 1px 0 #fff;
	@include SimpleGradient(top, false, #FEFEFE, #F4F4F4);
	
	&:hover {
		@include SimpleGradient(top, false, #fff, #F3F3F3);
		border-color: #999;
		color: #222;
	}
}

@mixin WPbuttonPrimaryStructure($fontSize: 12px) {
	@include WPbutton($fontSize);
	//height: ($fontSize * 2.5);
	//line-height: 2.4;
	//padding: 0 $fontSize ($fontSize / 6);
	padding: ($fontSize / 3) $fontSize;}

@mixin WPbuttonPrimary($fontSize: 12px) {
	@include WPbuttonPrimaryStructure($fontSize);
	background-color: #21759B;
	background-image: linear-gradient(to bottom, #2A95C5, #21759B);
	border-color: #21759B #21759B #1E6A8D;
	box-shadow: 0 1px 0 rgba(120, 200, 230, 0.5) inset;
	color: #FFFFFF !important;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) !important;

	&:hover {
		background-color: #278AB7;
		background-image: linear-gradient(to bottom, #2E9FD2, #21759B);
		border-color: #1B607F;
		box-shadow: 0 1px 0 rgba(120, 200, 230, 0.6) inset;
		color: #fff;
		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
	}
}

@mixin LikeWPbuttonPrimary($fontSize: 12px, $color: #21759B) {
	@include WPbuttonPrimaryStructure($fontSize);
	background-color: $color;
	background-image: linear-gradient(to bottom, lighten($color,10%), $color);
	border-color: $color $color darken($color,4%);
	$shadowColorSolid: adjust-hue($color, -3);
	$shadowColor: transparentize($shadowColorSolid, .5);
	box-shadow: 0 1px 0 $shadowColor inset;
	color: #FFFFFF !important;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) !important;
	
	&:hover {
		background-color: lighten($color,7%);
		background-image: linear-gradient(to bottom, lighten($color,13%), $color);
		border-color: darken($color,7%);
		box-shadow: 0 1px 0 transparentize($shadowColorSolid, .4) inset;
		color: #fff;
		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
	}
}

@mixin ModifyWPbuttonPrimaryColor($color) {
	background-color: $color;
	background-image: linear-gradient(to bottom, lighten($color,10%), $color);
	border-color: $color $color darken($color,4%);
	$shadowColorSolid: adjust-hue($color, -3);
	$shadowColor: transparentize($shadowColorSolid, .5);
	box-shadow: 0 1px 0 $shadowColor inset;
	
	&:hover {
		background-color: lighten($color,7%);
		background-image: linear-gradient(to bottom, lighten($color,13%), $color);
		border-color: darken($color,7%);
		box-shadow: 0 1px 0 transparentize($shadowColorSolid, .4) inset;
	}
}

@mixin LikeWPbuttonSecondary($fontSize: 12px, $color: #fefefe) {
	@include WPbuttonSecondaryStructure($fontSize);
	border-color: darken($color, 30%);
	color: darken($color, 70%);
	@include SimpleGradient(top, false, $color, darken($color, 15%) );
	
	&:hover {
		@include SimpleGradient(top, false, lighten($color, 5%), darken($color, 10%) );
		border-color: darken($color, 38%);
		color: darken($color, 80%);
	}
}

@mixin ModifyWPbuttonSecondaryColor($color) {
	border-color: darken($color, 30%);
	color: darken($color, 70%);
	@include SimpleGradient(top, false, $color, darken($color, 15%) );
	
	&:hover {
		@include SimpleGradient(top, false, lighten($color, 5%), darken($color, 10%) );
		border-color: darken($color, 38%);
		color: darken($color, 80%);
	}
}

//</editor-fold>
@mixin Dummy(){}