compass-recipes 0.3.0.alpha.1 → 0.3.0.alpha.2

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

@@ -1,6 +0,0 @@
-@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

@@ -1,122 +0,0 @@
-/**
-* 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/button/_state-selectors.scss

@@ -1,40 +0,0 @@
-/**
-* 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

@@ -1,12 +0,0 @@
-@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

@@ -1,489 +0,0 @@
-
-
-/* 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..  */