compass-recipes 0.2.2 → 0.3.0.alpha.1

data/stylesheets/recipes/shared/_user-select.scss

@@ -0,0 +1,6 @@
+@mixin user-select($select) {
+    $select: unquote($select);
+    @include experimental(user-select, $select,
+     -moz, -webkit, not -o, not -ms, -khtml, official
+    );
+}

data/stylesheets/recipes/ui/_button.scss

@@ -0,0 +1,122 @@
+/**
+* Buttons mixins
+* 
+* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+*
+* @link http://webdesign.tutsplus.com/articles/design-theory/principles-for-successful-button-design/
+*/
+@import "recipes/ui/button/state-selectors";
+@import "recipes/ui/button/style/default";
+/*
+ * source for code
+http://lab.simurai.com/css/buttons/
+http://brandonmathis.com/projects/fancy-buttons/demo/
+https://github.com/ubuwaits/css3-buttons/blob/gh-pages/scss/buttons.scss
+http://nicolasgallagher.com/lab/css3-animated-button/
+
+ * source for predefined buttons
+http://forrst.com/posts/CSS_Button_Contest-5J1
+http://houseofbuttons.tumblr.com/
+http://ubuwaits.github.com/css3-buttons/
+https://github.com/maxart/CSS3-Push-Button/blob/master/style.css
+*/
+
+/*
+A button is defined by multiples attributes:
+typography
+colors
+shape (round, oval, brackets, skew, back, knife, shield, drop, morph)
+size (+predefined: xs, s, m, l, xl, xxl)
+hover/active/disabled effect
+material (glossy, glass, texture ?)
+*/
+
+// here are predefined values (default for all buttons)
+//$ui-button-xxx: value;
+
+@mixin ui-button(
+    // color
+    $color: #e8e8e8,
+
+    // shape & material
+    $style: default,
+    //
+
+    // typo
+    $font-weight: bold,
+    // size
+    $margin: 0,
+    $padding: .2em .4em,
+
+    $outline: none,
+    $vertical-align: middle,
+    $white-space: nowrap,
+
+    // this is a button right ?
+    $cursor: pointer,
+    // disable text selection
+    $user-select: none
+)
+{
+    font-weight: $font-weight;
+    margin: $margin;
+    padding: $padding;
+
+    outline: $outline;
+    vertical-align: $vertical-align;
+    white-space: $white-space;
+    
+    cursor: $cursor;
+
+    -webkit-user-select: $user-select;
+    -moz-user-select: $user-select;
+    user-select: $user-select;
+
+    //$mixinName: ui-button-normal-state-#{$style};
+    @include ui-button-normal-state( //#{$mixinName}
+        $color,
+        $style
+    );
+    @include ui-button-hover-state(
+
+    );
+    @include ui-button-active-state(
+
+    );
+    @include ui-button-disabled-state(
+
+    );
+}
+
+@mixin ui-button-normal-state(
+    $color: #e8e8e8,
+    $border-radius: .2em
+)
+{
+    @include border-radius($border-radius);
+}
+
+@mixin ui-button-hover-state()
+{
+    @include ui-button-hover-selector()
+    {
+        border: 1px solid #444;
+        @include background(linear-gradient(#fff, #ccc));
+    }
+}
+
+@mixin ui-button-active-state()
+{
+    @include ui-button-active-selector()
+    {
+        @include background(linear-gradient(#E3E3E3 40%, #F9F9F9 70%));
+    }
+}
+
+@mixin ui-button-disabled-state()
+{
+    @include ui-button-disabled-selector()
+    {
+        color: #ccc;
+    }
+}

data/stylesheets/recipes/ui/_convex.scss

@@ -1,9 +1,16 @@
+/**
+ * UI convex effect from one color
+ *
+ * @todo merge with ui-button ?
+ *
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
 @mixin ui-convex($color: #ddd, $button-effect: true, $opacity-top: .5, $opacity-bottom: 0, $color-mix: #fff)
 {
     background: $color; // fallback
     
     // the original idea was to just add a layer of transparent white to make the convex effect
-    // but this didn't work with css3/pie module, so I've used sass color function to get the same result
+    // but this didn't work with css3/pie module, so I've used sass_extensions color functions to get the same result
     //@include background($color linear-gradient(transparentize($color-mix, $opacity-top ), transparentize($color-mix, $opacity-bottom )));
     
     $opacity-top: percentage(1-$opacity-top);

data/stylesheets/recipes/ui/_glossy.scss

@@ -1,5 +1,17 @@
+/**
+ * UI Glossy helper
+ *
+ * @deprecated
+ * @todo Remove in 0.4
+ * @see background/gradients
+ *
+ * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+ */
 @mixin ui-glossy($color: #000, $opacity: .6, $border-width: .1em, $border-color-top: rgba(255,255,255,.5), $border-color-bottom: rgba(85,85,85,.6))
 {
+
+    @warn '@mixin ui-glossy has been deprecated: Use background-gradient mixin/functions instead.';
+
     border-left: 0;
     border-right: 0;
     
@@ -9,16 +21,5 @@
     outline: $border-width solid rgba(0,0,0,.6);
     background: $color;
     background: transparentize($color, $opacity);
-    //background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(112,112,112,.55)), color-stop(.49, rgba(56,56,56,.46)), color-stop(.51, rgba(0,0,0,.58)), to(rgba(0,0,0,.58)));
-    //background: -moz-linear-gradient(rgba(112,112,112,.55), rgba(56,56,56,.46) 49%, rgba(0,0,0,.58) 51%, rgba(0,0,0,.58));
-    //background: linear-gradient(rgba(112,112,112,.55), rgba(56,56,56,.46) 49%, rgba(0,0,0,.58) 51%, rgba(0,0,0,.58));
     @include background(linear-gradient(rgba(112,112,112,.55), rgba(56,56,56,.46) 49%, rgba(0,0,0,.58) 51%, rgba(0,0,0,.58) 51%));
-}
-    @mixin ui-glossy-inset {
-        -moz-border-radius: .5em;
-        border-radius: .5em;
-        background: -webkit-gradient(linear,0 0, 0 100%,from(#020304),to(#252627));
-        background: -moz-linear-gradient(#020304,#252627);
-        background: linear-gradient(#020304,#252627);
-        border: .1em solid #454545; 
-    }
+}

data/stylesheets/recipes/ui/_gradient.scss

@@ -1,4 +1,8 @@
 /**
+ * UI simple gradient from one color
+ *
+ * @todo merge with ui-button ?
+ *
  * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
  */
 @mixin ui-gradient($color: #ddd, $lighten-top: 10%, $darken-bottom: 10%)

data/stylesheets/recipes/ui/_helper.scss

@@ -0,0 +1 @@
+@import "recipes/ui/helper/arrow";

data/stylesheets/recipes/ui/_keyboard.scss

@@ -0,0 +1,106 @@
+/**
+ * Keyboard key touch
+ * A simple stylesheet for rendering beautiful keyboard-style elements.
+
+ * @author Michael Hüneburg http://michaelhue.com/keyscss
+ * @link https://github.com/michaelhue/keyscss (commit 76bb603e921d0145362e0f60eabb79d4f69cbda0)
+ *
+ * @author Maxime Thirouin @MoOx maxime.thirouin@gmail.com
+*/
+
+// Base style, essential for every key
+@mixin ui-keyboard-key-requirements($font-size: .85em, $line-height: 1, $font-family: "Lucida Grande")
+{
+    padding: .2em .3em;
+    min-width: 1em;
+    font: normal $font-size/$line-height $font-family, Lucida, Arial, sans-serif;
+    text-align: center;
+    @include border-radius(.25em);
+    border: none;
+
+    display: inline;
+    display: inline-block;
+    text-decoration: none;
+    cursor: default;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    //@include user-select(none);
+
+    &[title]
+    {
+        cursor: help;
+    }
+}
+
+// it's will be nice to manage color schema with mixin like
+// key-light, key-dark but, we can't @include them with a variable
+// it's not yet possible to make a @include key-#{$color-schema};
+@mixin ui-keyboard-key-color-schema($color-schema: light)
+{
+    @if ($color-schema == dark)
+    {
+        // Dark style for display on light background.
+        background: rgb(80, 80, 80);
+        @include background(linear-gradient(rgb(60, 60, 60), rgb(80, 80, 80)));
+        color: rgb(250, 250, 250);
+        text-shadow: -1px -1px 0 rgb(70, 70, 70);
+        @include box-shadow(inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3));
+    }
+    @elseif ($color-schema == light)
+    {
+        // Light style for display on dark background
+        background: rgb(250, 250, 250);
+        @include background(linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255)));
+        color: #444;
+        text-shadow: 0 0 2px rgb(255, 255, 255);
+        /*@include box-shadow(
+            inset 0 0 1px #fff,
+            inset 0 0 .4em rgb(200, 200, 200),
+            0 .1em 0 rgb(130, 130, 130),
+            0 .11em 0 rgba(#000, .4),
+            0 .1em .11em rgba(#000, .9)
+                );
+        */
+        @include box-shadow(
+            inset 0 0 25px #e8e8e8,
+            0 1px 0 #c3c3c3,
+            0 2px 0 #c9c9c9,
+            0 2px 3px #333
+        );
+        text-shadow: 0px 1px 0px #f5f5f5;
+    }
+}
+
+@mixin ui-keyboard-key-rules-large($color-schema: light, $default: true)
+{
+    &,
+    &.#{$color-schema},
+    .#{$color-schema}-keys &
+    {
+        @include ui-keyboard-key-color-schema($color-schema);
+    }
+}
+
+@mixin ui-keyboard-kbd($default-color-schema: light)
+{
+    $alternate-color-schema: dark;
+    @if ($default-color-schema == dark)
+    {
+        $alternate-color-schema: light;
+    }
+
+    kbd,
+    .kbd
+    {
+        @include ui-keyboard-key-requirements;
+        @include ui-keyboard-key-rules-large($alternate-color-schema, false);
+        @include ui-keyboard-key-rules-large($default-color-schema);
+    }
+}
+
+@mixin ui-keyboard-key($default-color-schema: light)
+{
+    @include ui-keyboard-key-requirements;
+    @include ui-keyboard-key-color-schema($default-color-schema);
+}

data/stylesheets/recipes/ui/_menu.scss

@@ -0,0 +1 @@
+@import "recipes/ui/menu/dropdown";

data/stylesheets/recipes/ui/_overlay.scss

@@ -0,0 +1,22 @@
+/**
+ * Ui background overlay inspired by Google Chrome modal overlay
+ * 
+ * @author Maxime Thirouin @MoOx maxime.thirouin@gmail.com
+ */
+
+@import "recipes/background/radial-overlay";
+
+@mixin ui-overlay($z-index: 10)
+{
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    
+    z-index: $z-index;
+    
+    
+    
+    @include background-radial-overlay;
+}

data/stylesheets/recipes/ui/_separator.scss

@@ -0,0 +1,37 @@
+/**
+ * <hr /> separator style
+ *
+ * @author Chris Coyier @chriscoyier
+ * @link http://jsfiddle.net/chriscoyier/GaEzp/35/
+ *
+ * @author Maxime Thirouin @MoOx maxime.thirouin@gmail.com
+ */
+
+@mixin ui-separator-gradient($color: rgba(#000, .75), $color-alt: rgba(#000, 0), $height: 1px)
+{
+    border: 0; //cancel default <hr> style
+    height: $height;
+    background: opacify($color, 1); // fallback
+    @include background(linear-gradient(left, $color-alt, $color, $color-alt));
+}
+
+@mixin ui-separator-dashed($color: #999, $color-alt: #ccc, $height: 1px)
+{
+    border: 0; //cancel default <hr> style
+    border-bottom: $height dashed $color-alt;
+    background: $color;
+}
+
+@mixin ui-separator-dropshadow($color: #000, $height: 6px)
+{
+    border: 0; //cancel default <hr> style
+    height: $height;
+    box-shadow: inset 0 $height $height -#{$height} $color;
+}
+
+@mixin ui-separator-shadow($color: #000, $height: 10px, $spread: 1px)
+{
+    border: 0; //cancel default <hr> style
+    height: 0;
+    box-shadow: 0 0 $height $spread $color;
+}

data/stylesheets/recipes/ui/border/_bevel.scss

@@ -1,5 +1,8 @@
+// @todo Remove in .4
+
 @mixin ui-border-bevel($width, $color, $variation: 15%)
 {
+    @warn 'ui-border-bevel has been deprecated. Please use effects/bevel mixins instead';
     border: $width solid $color;
     border-top-color: lighten($color, $variation);
     border-bottom-color: darken($color, $variation);

data/stylesheets/recipes/ui/button/_state-selectors.scss

@@ -0,0 +1,40 @@
+/**
+* Buttons selector mixins
+*
+* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+*/
+
+// normal state is completly useless
+/*
+@mixin ui-button-normal-selector()
+{
+    &
+    {
+        @content;
+    }
+}
+*/
+
+@mixin ui-button-hover-selector()
+{
+    &:not([disabled]):hover
+    {
+        @content;
+    }
+}
+
+@mixin ui-button-active-selector()
+{
+    &:not([disabled]):active
+    {
+        @content;
+    }
+}
+
+@mixin ui-button-disabled-selector()
+{
+    &[disabled]
+    {
+        @content;
+    }
+}

data/stylesheets/recipes/ui/button/style/_default.scss

@@ -0,0 +1,12 @@
+@mixin ui-button-normal-state-default()
+{
+    text-shadow: 0 1px 0 lighten($color, 60%);
+
+    // background
+    @include background(linear-gradient(lighten($color, 10%) 40%, darken($color, 10%) 70%));
+    border: 1px solid darken($color, 40%);
+    @include box-shadow(0 1px 0 rgba(lighten($color, 60%), .5) inset);
+
+    //shape
+    @include border-radius(3px);
+}

data/stylesheets/recipes/ui/button/style/todo/_bonbon.scss

@@ -0,0 +1,489 @@
+
+
+/* BonBon Buttons 1.1 by simurai.com
+
+1.1 Added unprefixed attributes, :focus style, <button> support
+1.0 Released
+
+Usage:
+
+    Default button:             <a href="" class="button">Label</a>
+    More fancy with icon:         <a href="" class="button orange glossy" data-icon="★">Label</a>
+
+Following additional class names are supported:
+
+    Color:         orange, pink, blue, green, transparent
+    Font:         serif
+    Material:     glossy, glass
+    Size:         xs, xl
+    Shape:         round, oval, brackets, skew, back, knife, shield, drop, morph
+    Icon only:     icon
+    Disabled:    disabled
+
+*/
+
+
+@import url(http://fonts.googleapis.com/css?family=Droid+Sans:bold+Lobster);
+@import url(http://fonts.googleapis.com/css?family=Lobster);
+@import url(pictos/pictos.css);
+@import url(writesocial/font-face/stylesheet.css);
+
+
+/* -------------- THE button -------------- */
+.button {
+
+/* text */
+    text-decoration:         none;
+    font:                     24px/1em 'Droid Sans', sans-serif;
+    font-weight:             bold;
+    text-shadow:             rgba(255,255,255,.5) 0 1px 0;
+    -webkit-user-select:     none;
+    -moz-user-select:         none;
+    user-select:             none;
+
+
+/* layout */
+    padding:                 .5em .6em .4em .6em;
+    margin:                 .5em;
+    display:                 inline-block;
+    position:                 relative;
+
+    -webkit-border-radius:     8px;
+    -moz-border-radius:     8px;
+    border-radius:     8px;
+
+/* effects */
+    border-top:         1px solid rgba(255,255,255,0.8);
+    border-bottom:         1px solid rgba(0,0,0,0.1);
+
+    background-image:     -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png);
+    background-image:     -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(noise.png);
+    background-image:     gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png);
+
+    -webkit-transition: background .2s ease-in-out;
+    -moz-transition:     background .2s ease-in-out;
+    transition:         background .2s ease-in-out;
+
+/* color */
+    color:                 hsl(0, 0%, 40%) !important;
+    background-color:     hsl(0, 0%, 75%);
+
+    -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
+                        hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
+                        rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
+    -moz-box-shadow:     inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
+                        hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
+                        rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
+    box-shadow:             inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
+                        hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
+                        rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
+}
+
+/* -------------- button (tag) -------------- */
+
+button.button {
+    border-left: none;
+    border-right: none;
+}
+button.button:hover {
+    cursor: pointer;
+}
+
+
+/* -------------- icon -------------- */
+.button:before {
+    font:             1.2em/0 'Pictos', sans-serif;
+    content:         attr(data-icon); /* gets the icon value from the custom data attribute and puts it infront of the button label */
+    margin-right:     0.4em;
+}
+.button.social:before {
+    font:             2em/.5em 'writesocialRegular', sans-serif;
+    vertical-align: -.08em;
+    margin-right:     0.25em;
+}
+
+
+/* icon only */
+.icon {
+    font-weight: normal;
+    font-style: normal;
+    text-indent:     -999em;
+}
+.icon:before, .icon.social:before {
+    margin-right:     0;
+    display:         block;
+    height:         0;
+    text-indent:     0px;
+}
+
+
+
+/* -------------- colours -------------- */
+
+.button.orange {
+    color:                 hsl(39, 100%, 30%) !important;
+    background-color:     hsl(39, 100%, 50%);
+
+    -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
+                            hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
+                            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
+    -moz-box-shadow:     inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
+                            hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
+                            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
+    box-shadow:             inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
+                            hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
+                            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
+}
+.button.orange:hover {     background-color: hsl(39, 100%, 65%); }
+
+
+.button.blue {
+    color:                 hsl(208, 50%, 40%) !important;
+    background-color:     hsl(208, 100%, 75%);
+
+    -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
+                            hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
+                            rgba(0,0,0,0.2) 0 .5em 5px;    /* drop shadow */
+    -moz-box-shadow:     inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
+                            hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
+                            rgba(0,0,0,0.2) 0 .5em 5px;    /* drop shadow */
+    box-shadow:         inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
+                            hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
+                            rgba(0,0,0,0.2) 0 .5em 5px;    /* drop shadow */
+}
+.button.blue:hover {     background-color: hsl(208, 100%, 83%); }
+
+.button.green {
+    color:                 hsl(88, 70%, 30%) !important;
+    background-color:     hsl(88, 70%, 60%);
+    -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
+                            hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
+                            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
+    -moz-box-shadow:     inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
+                            hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
+                            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
+    box-shadow:             inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
+                            hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
+                            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
+}
+.button.green:hover {     background-color: hsl(88, 70%, 75%); }
+
+.button.pink {
+    color:                 hsl(340, 100%, 30%) !important;
+    background-color:     hsl(340, 100%, 75%);
+    -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
+                            hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
+                            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
+    -moz-box-shadow:     inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
+                            hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
+                            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
+    box-shadow:         inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
+                            hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
+                            rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
+}
+.button.pink:hover {     background-color: hsl(340, 100%, 83%); }
+
+
+
+.button.transparent {
+    color:     rgba(0,0,0,0.5) !important;
+}
+.button.transparent, .button.transparent:hover, .button.transparent:active {
+    background-color: transparent;
+    background-image: none;
+}
+.button.transparent:hover {
+    opacity: .9;
+}
+
+
+
+/* -------------- States -------------- */
+
+.button:hover {
+    background-color:     hsl(0, 0%, 83%);
+}
+
+
+
+.button:active {
+    background-image:     -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
+    background-image:     -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
+    background-image:     gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
+
+    -webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
+                            rgba(0,0,0,0.4) 0 .1em 1px, /* border */
+                            rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
+    -moz-box-shadow:     inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
+                            rgba(0,0,0,0.4) 0 .1em 1px, /* border */
+                            rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
+    box-shadow:         inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
+                            rgba(0,0,0,0.4) 0 .1em 1px, /* border */
+                            rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
+
+    -webkit-transform:     translateY(.2em);
+    -moz-transform:     translateY(.2em);
+    transform:             translateY(.2em);
+}
+
+.button:focus {
+    outline: none;
+    color: rgba(254,255,255,0.9) !important;
+    text-shadow: rgba(0,0,0,0.2) 0 1px 2px;
+}
+
+.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover {
+    opacity:             .5;
+    cursor:             default;
+    color:                 rgba(0,0,0,0.2) !important;
+    text-shadow:         none !important;
+    background-color:     rgba(0,0,0,0.05);
+    background-image:     none;
+    border-top:         none;
+
+    -webkit-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */
+                            rgba(0,0,0,0.3) 0 .1em 1px, /* border */
+                            rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
+    -moz-box-shadow:     inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */
+                            rgba(0,0,0,0.3) 0 .1em 1px, /* border */
+                            rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
+    box-shadow:         inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */
+                            rgba(0,0,0,0.3) 0 .1em 1px, /* border */
+                            rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
+
+    -webkit-transform:     translateY(5px);
+    -moz-transform:     translateY(5px);
+    transform:             translateY(5px);
+}
+
+/* -------------- Fonts -------------- */
+
+.serif {
+    font-family: 'Lobster', serif;
+    font-weight:             normal;
+}
+
+
+/* -------------- Sizes -------------- */
+
+.xs { font-size: 16px; }
+.xl { font-size: 32px; }
+
+
+/* -------------- Materials -------------- */
+
+.button.glossy:after, .button.glass:after {
+    content:     "";
+    position:     absolute;
+    width:         90%;
+    height:     60%;
+    top:         0;
+    left:         5%;
+
+    -webkit-border-radius:     .5em .5em 1em 1em / .5em .5em 2em 2em;
+    -moz-border-radius:     .5em .5em 1em 1em / .5em .5em 2em 2em;
+    border-radius:             .5em .5em 1em 1em / .5em .5em 2em 2em;
+
+    background-image:         -webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),
+                                color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );
+    background-image:         -moz-linear-gradient(left, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.5) );
+    background-image:         gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),
+                                color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );
+}
+.button.glossy:active:after,
+.button.glass:active:after,
+.button.disabled:after,
+.button[disabled]:after
+ { opacity: .6; }
+
+.button.icon.glossy:after,
+.button.icon.glass:after { height: 75% ; }
+
+/* -------------- Glass + Transparent -------------- */
+.button.glass {
+    text-shadow: rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,0.18) 0 .18em .15em;
+}
+.button.glass:active {
+    text-shadow: rgba(255,255,255,.3) 0 1px 0, rgba(0,0,0,0.15) 0 .18em .15em;
+}
+
+
+/* -------------- Shapes -------------- */
+
+/* round */
+.round, .round.glossy:after, .round.glass:after {
+    border-top: none;
+    -webkit-border-radius:     1em;
+    -moz-border-radius:     1em;
+    border-radius:             1em;
+}
+
+/* oval */
+.oval {
+    border-top:             none;
+    padding-left:             .8em;
+    padding-right:             .8em;
+    -webkit-border-radius:     5em / 2em;
+    -moz-border-radius:     5em / 2em;
+    border-radius:             5em / 2em;
+}
+.oval.glossy:after, .oval.glass:after {
+    top:                     5%;
+    -webkit-border-radius:     5em / 2em 2em 1em 1em;
+    -moz-border-radius:     5em / 2em 2em 1em 1em;
+    border-radius:             5em / 2em 2em 1em 1em;
+}
+.oval.icon {
+    padding-left:             .8em;
+    padding-right:             .8em;
+    -webkit-border-radius:     1.5em / 1em;
+    -moz-border-radius:     1.5em / 1em;
+    border-radius:             1.5em / 1em;
+}
+.oval.icon.glossy:after, .oval.icon.glass:after {
+    -webkit-border-radius:     1.5em / 1em;
+    -moz-border-radius:     1.5em / 1em;
+    border-radius:             1.5em / 1em;
+}
+
+/* brackets */
+.brackets, .brackets.glossy:after, .brackets.glass:after {
+    border-top:             none;
+    -webkit-border-radius:     .5em / 1em;
+    -moz-border-radius:     .5em / 1em;
+    border-radius:             .5em / 1em;
+}
+
+/* skew */
+.skew {
+    border-top:             none;
+    padding-right:             1.2em;
+    padding-left:             0.8em;
+    -webkit-border-radius:     5em 1em / 5em 1em;
+    -moz-border-radius:     5em 1em / 5em 1em;
+    border-radius:             5em 1em / 5em 1em;
+}
+.skew.glossy:after, .skew.glass:after {
+    left: 10%;
+    -webkit-border-radius:     7em 1em / 5em 1em;
+    -moz-border-radius:     7em 1em / 5em 1em;
+    border-radius:             7em 1em / 5em 1em;
+}
+.skew.icon {
+    padding-right:             .9em;
+    padding-left:             .8em;
+}
+
+/* back */
+.back, .back.glossy:after, .back.glass:after {
+    border-top-color:         rgba(255,255,255,0.5);
+    -webkit-border-radius:     1.6em 1.6em 1em 1em / 4em 4em 1em 1em;
+    -moz-border-radius:     1.6em 1.6em 1em 1em / 4em 4em 1em 1em;
+    border-radius:             1.6em 1.6em 1em 1em / 4em 4em 1em 1em;
+}
+.back.glossy:after, .back.glass:after {
+     left:     6%;
+     width:    88%;
+}
+
+/* knife */
+.knife {
+    padding-left: 1.5em;
+    -webkit-border-radius:     .2em .5em .5em 8em / .2em .5em .5em 5em;
+    -moz-border-radius:     .2em .5em .5em 8em / .2em .5em .5em 5em;
+    border-radius:             .2em .5em .5em 8em / .2em .5em .5em 5em;
+}
+.knife.glossy:after, .knife.glass:after {
+    left:                     3%;
+    width:                     97%;
+    -webkit-border-radius:     .1em .5em .5em 8em / .1em .5em .5em 2em;
+    -moz-border-radius:     .1em .5em .5em 8em / .1em .5em .5em 2em;
+    border-radius:             .1em .5em .5em 8em / .1em .5em .5em 2em;
+}
+.knife.glossy.icon:after, .knife.glass.icon:after {
+    left:                     5%;
+    width:                     95%;
+    -webkit-border-radius:     .5em .5em 1em 6em / .5em .5em 1em 4em;
+    -moz-border-radius:     .5em .5em 1em 6em / .5em .5em 1em 4em;
+    border-radius:             .5em .5em 1em 6em / .5em .5em 1em 4em;
+}
+
+/* shield */
+.shield, .shield.glossy:after, .shield.glass:after {
+    -webkit-border-radius:     .4em .4em 2em 2em / .4em .4em 3em 3em;
+    -moz-border-radius:     .4em .4em 2em 2em / .4em .4em 3em 3em;
+    border-radius:             .4em .4em 2em 2em / .4em .4em 3em 3em;
+}
+.shield {
+    padding-left:     .8em;
+    padding-right:     .8em;
+}
+.shield.icon {
+    padding-left:     .6em;
+    padding-right:     .6em;
+}
+
+/* drop */
+.drop {
+    border-top: none;
+    -webkit-border-radius:     2em 5em  2em .6em / 2em 4em 2em .6em;
+    -moz-border-radius:     2em 5em  2em .6em / 2em 4em 2em .6em;
+    border-radius:             2em 5em  2em .6em / 2em 4em 2em .6em;
+}
+.drop.glossy:after, .drop.glass:after {
+    left: 4%;
+    -webkit-border-radius:     2em 6em  2em 1em / 2em 4em 2em 2em;
+    -moz-border-radius:     2em 6em  2em 1em / 2em 4em 2em 2em;
+    border-radius:             2em 6em  2em 1em / 2em 4em 2em 2em;
+}
+.drop.icon {
+    padding-right: .6em;
+}
+
+
+/* morph */
+.morph {
+    border-top: none;
+    -webkit-border-radius:     5em / 2em;
+    -moz-border-radius:     5em / 2em;
+    border-radius:             5em / 2em;
+    -webkit-transition:     -webkit-border-radius .3s ease-in-out;
+    -moz-transition:         -moz-border-radius .3s ease-in-out;
+    transition:             -moz-border-radius .3s ease-in-out;
+}
+.morph:hover {
+    -webkit-border-radius:     .4em .4em 2em 2em / .4em .4em 3em 3em;
+    -moz-border-radius:     .4em .4em 2em 2em / .4em .4em 3em 3em;
+    border-radius:             .4em .4em 2em 2em / .4em .4em 3em 3em;
+}
+.morph:active {
+    -webkit-border-radius:     .3em;
+    -moz-border-radius:     .3em;
+    border-radius:             .3em;
+}
+.morph:after {
+    display: none;
+}
+
+
+
+
+/* Some ugly hacks for FF.
+Thanks to David Hund for some help - http://valuedstandards.com/static/test/buttons/ */
+@-moz-document url-prefix() {
+    .button { text-align: center; }
+    .icon { padding: .5em 1em; }
+    .icon:before { margin-left: -.42em; float: left; }
+    .social.icon:before { margin-left: -.22em; }
+
+    .drop.icon { padding-right: 1.1em; }
+    .shield.icon { padding-left: 1.1em; padding-right: 1.1em; }
+    .skew.icon { padding-right: 1.4em; padding-left: 1.3em; }
+    .oval.icon { padding-left: 1.3em; padding-right: 1.3em;    }
+    .knife { padding-left: 2em; }
+}
+
+
+
+
+/* Damn, this became a fat baby..  */