//------------------------- For CSS Gradients -------------------------
@import "compass/css3/images";


//------------------------- Style Guide -------------------------
$basefonts: '"Helvetica", Arial, sans-serif';

$white: #fff;
$gray50: #808080;
$gray80: #ccc;

$fontsmall: .875rem;


//------------------------- Settings -------------------------
$font1: #{$basefonts};
$font2: #{$basefonts};
$font3: #{$font1};

$color1: #51596a; // Link
$color2: #a66f71; // Heading
$color3: #394552; // Title

//------------------------- Text Style -------------------------
@mixin textstyle1 {
}

//------------------------- Border Style -------------------------
@mixin borderstyle1 {
    border: $one-unit solid hsla(0, 0%, 0%, .35) {
        left: none;
        right: none;
    }
}

// Dark Border
@mixin borderstyle1 ($topwidth: $one-unit, $rightwidth: $one-unit, $bottomwidth: $one-unit, $leftwidth: $one-unit, $style: solid, $alpha: .35) {
    border: {
        top-width: $topwidth;
        right-width: $rightwidth;
        bottom-width: $bottomwidth;
        left-width: $leftwidth;
        style: $style;
        color: hsla(0, 0%, 0%, $alpha);
    }
}

%borderstyle1 {
    @include borderstyle1;
}

//------------------------- Transitions -------------------------
@mixin transition ($property: all, $duration: .125s, $easing: ease) {
	-webkit-transition: $property $duration $easing;
	-moz-transition: $property $duration $easing;
	-ms-transition: $property $duration $easing;
	-o-transition: $property $duration $easing;
	transition: $property $duration $easing;
}

// Example of @extend Directive
%transition-bg {
    @include transition(background-color);
}