Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

First pass on conversion to sass

  • Loading branch information...
commit fea7cbd6da96dc104377195c8e5f32a401be5691 1 parent 0ab9815
Chad Mazzola authored
View
1,038 css/buttons.css
@@ -1,371 +1,614 @@
+/* This stylesheet contains only what is necessary to display the example
+ buttons. See buttons.css for the relevant CSS.
+******************************************************************************/
+/* Global Reset
+------------------------------------------------------------------------------*/
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline; }
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block; }
+
+body {
+ line-height: 1; }
+
+ol, ul {
+ list-style: none; }
+
+blockquote, q {
+ quotes: none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none; }
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0; }
+
+/* Page specific
+------------------------------------------------------------------------------*/
+body {
+ background: #fff;
+ color: #333;
+ font-family: "helvetica neue", helvetica, arial, sans-serif; }
+
+div.container {
+ margin: 40px auto;
+ width: 960px; }
+
+a {
+ color: #333;
+ font-weight: bold;
+ text-decoration: none; }
+
+h1 {
+ color: #333;
+ font-size: 38px;
+ font-weight: 300;
+ margin: 24px 0 12px 0; }
+
+p {
+ color: #555;
+ font-size: 16px;
+ font-weight: normal;
+ line-height: 140%;
+ margin: 0 0 12px 0; }
+
+p.credit {
+ border-top: 1px solid #ccc;
+ font-size: 14px;
+ line-height: 140%;
+ margin: 36px 0 12px 0;
+ padding: 6px 0 0 0; }
+
+p.where {
+ margin: 0 0 12px 0; }
+
+.button-collection {
+ border-top: 2px solid #ccc;
+ margin: 24px 0 36px 0;
+ padding: 4px 0 12px 0; }
+
+.button-info {
+ float: left;
+ margin: 0 40px 0 0;
+ width: 245px; }
+ .button-info h2 {
+ color: #222;
+ font-size: 22px;
+ font-weight: normal;
+ margin: 10px 0 6px 0; }
+ .button-info p {
+ font-size: 14px; }
+
+ul.column {
+ float: left;
+ list-style: none;
+ width: 675px; }
+ ul.column ul.column li {
+ background: #ddd;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -ms-border-radius: 5px;
+ -o-border-radius: 5px;
+ border-radius: 5px;
+ float: left;
+ margin: 10px 0 0 10px;
+ display: block;
+ height: 150px;
+ text-align: center;
+ width: 215px; }
+
+button {
+ margin-top: 60px; }
+
+button.webkit-badge {
+ margin-top: 32px; }
+
+button.webkit-check {
+ margin-top: 30px; }
+
+button.webkit-seal {
+ margin-top: 30px; }
+
+button.slick-black {
+ margin-top: 56px; }
+
+button.cupid-green {
+ margin-top: 62px; }
+
+button.cupid-blue {
+ margin-top: 64px; }
+
+button.blue-pill {
+ margin-top: 62px; }
+
+button.dribbble {
+ margin-top: 60px; }
+
+button.thoughtbot {
+ margin-top: 54px; }
+
+button.punch {
+ margin-top: 54px; }
+
+button.fat-letters {
+ margin-top: 20px; }
+
+button.download-itunes {
+ margin-top: 62px; }
+
+/* Clear Floated Elements
+------------------------------------------------------------------------------*/
+.column:after,
+.button-collection:after,
+.clearfix:after {
+ clear: both;
+ content: ' ';
+ display: block;
+ font-size: 0;
+ line-height: 0;
+ visibility: hidden;
+ width: 0;
+ height: 0; }
+
/* general styles */
body {
- text-rendering: optimizeLegibility;
-}
+ text-rendering: optimizeLegibility; }
button:hover {
- cursor: pointer;
-}
+ cursor: pointer; }
button::-moz-focus-inner {
- border:0;
-}
+ border: 0; }
/* minimal
*******************************************************************************/
button.minimal {
background: #e3e3e3;
border: 1px solid #bbb;
- -moz-border-radius: 3px;
-webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ -ms-border-radius: 3px;
+ -o-border-radius: 3px;
border-radius: 3px;
- -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
-webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
+ -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
+ -ms-box-shadow: inset 0 0 1px 1px #f6f6f6;
+ -o-box-shadow: inset 0 0 1px 1px #f6f6f6;
box-shadow: inset 0 0 1px 1px #f6f6f6;
color: #333;
- font-family: "helvetica neue", helvetica, arial, sans-serif;
- font-size: 12px;
- font-weight: bold;
+ font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
line-height: 1;
padding: 8px 0 9px;
text-align: center;
text-shadow: 0 1px 0 #fff;
- width: 150px;
-}
+ width: 150px; }
button.minimal:hover {
background: #d9d9d9;
- -moz-box-shadow: inset 0 0 1px 1px #eaeaea;
-webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
+ -moz-box-shadow: inset 0 0 1px 1px #eaeaea;
+ -ms-box-shadow: inset 0 0 1px 1px #eaeaea;
+ -o-box-shadow: inset 0 0 1px 1px #eaeaea;
box-shadow: inset 0 0 1px 1px #eaeaea;
color: #222;
- cursor: pointer;
-}
+ cursor: pointer; }
button.minimal:active {
background: #d0d0d0;
- -moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
-webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
+ -moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
+ -ms-box-shadow: inset 0 0 1px 1px #e3e3e3;
+ -o-box-shadow: inset 0 0 1px 1px #e3e3e3;
box-shadow: inset 0 0 1px 1px #e3e3e3;
- color: #000;
-}
+ color: #000; }
/* clean gray
*******************************************************************************/
button.clean-gray {
- background: #eee;
- background: -moz-linear-gradient(top, #eee 0%, #ccc 100%);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#ccc));
+ background-color: #eeeeee;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
+ background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
+ background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
+ background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
+ background-image: linear-gradient(top, #eeeeee, #cccccc);
border: 1px solid #ccc;
border-bottom: 1px solid #bbb;
- -moz-border-radius: 3px;
-webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ -ms-border-radius: 3px;
+ -o-border-radius: 3px;
border-radius: 3px;
color: #333;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
- font-size: 11px;
- font-weight: bold;
+ font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
line-height: 1;
padding: 8px 0;
text-align: center;
text-shadow: 0 1px 0 #eee;
- width: 150px;
-}
+ width: 150px; }
button.clean-gray:hover {
- background: #ddd;
- background: -moz-linear-gradient(top, #ddd 0%, #bbb 100%);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#bbb));
+ background-color: #dddddd;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#bbbbbb));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
+ background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
+ background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
+ background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
+ background-image: linear-gradient(top, #dddddd, #bbbbbb);
border: 1px solid #bbb;
border-bottom: 1px solid #999;
cursor: pointer;
- text-shadow: 0 1px 0 #ddd;
-}
+ text-shadow: 0 1px 0 #ddd; }
button.clean-gray:active {
border: 1px solid #aaa;
border-bottom: 1px solid #888;
- -moz-box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee;
- -webkit-box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee;
- box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee;
-}
+ -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+ -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+ -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+ -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+ box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; }
/* cupid green (inspired by okcupid.com)
*******************************************************************************/
button.cupid-green {
- background: #7fbf4d;
- background: -moz-linear-gradient(top, #7fbf4d 0%, #63a62f 100%);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7fbf4d), to(#63a62f));
+ background-color: #7fbf4d;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#7fbf4d), to(#63a62f));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #7fbf4d, #63a62f);
+ background-image: -moz-linear-gradient(top, #7fbf4d, #63a62f);
+ background-image: -ms-linear-gradient(top, #7fbf4d, #63a62f);
+ background-image: -o-linear-gradient(top, #7fbf4d, #63a62f);
+ background-image: linear-gradient(top, #7fbf4d, #63a62f);
border: 1px solid #63a62f;
border-bottom: 1px solid #5b992b;
- -moz-border-radius: 3px;
-webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ -ms-border-radius: 3px;
+ -o-border-radius: 3px;
border-radius: 3px;
- -moz-box-shadow: inset 0 1px 0 0 #96ca6d;
-webkit-box-shadow: inset 0 1px 0 0 #96ca6d;
+ -moz-box-shadow: inset 0 1px 0 0 #96ca6d;
+ -ms-box-shadow: inset 0 1px 0 0 #96ca6d;
+ -o-box-shadow: inset 0 1px 0 0 #96ca6d;
box-shadow: inset 0 1px 0 0 #96ca6d;
color: #fff;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
- font-size: 11px;
- font-weight: bold;
+ font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
line-height: 1;
padding: 7px 0 8px 0;
text-align: center;
text-shadow: 0 -1px 0 #4c9021;
- width: 150px;
-}
+ width: 150px; }
button.cupid-green:hover {
- background: #76b347;
- background: -moz-linear-gradient(top, #76b347 0%, #5e9e2e 100%);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#76b347), to(#5e9e2e));
- -moz-box-shadow: inset 0 1px 0 0 #8dbf67;
+ background-color: #76b347;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#76b347), to(#5e9e2e));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #76b347, #5e9e2e);
+ background-image: -moz-linear-gradient(top, #76b347, #5e9e2e);
+ background-image: -ms-linear-gradient(top, #76b347, #5e9e2e);
+ background-image: -o-linear-gradient(top, #76b347, #5e9e2e);
+ background-image: linear-gradient(top, #76b347, #5e9e2e);
-webkit-box-shadow: inset 0 1px 0 0 #8dbf67;
+ -moz-box-shadow: inset 0 1px 0 0 #8dbf67;
+ -ms-box-shadow: inset 0 1px 0 0 #8dbf67;
+ -o-box-shadow: inset 0 1px 0 0 #8dbf67;
box-shadow: inset 0 1px 0 0 #8dbf67;
- cursor: pointer;
-}
+ cursor: pointer; }
button.cupid-green:active {
border: 1px solid #5b992b;
border-bottom: 1px solid #538c27;
- -moz-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eee;
- -webkit-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eee;
- box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eee;
-}
+ -webkit-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
+ -moz-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
+ -ms-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
+ -o-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
+ box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee; }
/* cupid blue (inspired by okcupid.com)
*******************************************************************************/
button.cupid-blue {
- background: #d7e5f5;
- background: -moz-linear-gradient(top, #d7e5f5 0%, #cbe0f5 100%);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d7e5f5), to(#cbe0f5));
+ background-color: #d7e5f5;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#d7e5f5), to(#cbe0f5));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5);
+ background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5);
+ background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5);
+ background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5);
+ background-image: linear-gradient(top, #d7e5f5, #cbe0f5);
border-top: 1px solid #abbbcc;
border-left: 1px solid #a7b6c7;
border-bottom: 1px solid #a1afbf;
border-right: 1px solid #a7b6c7;
- -moz-border-radius: 12px;
-webkit-border-radius: 12px;
+ -moz-border-radius: 12px;
+ -ms-border-radius: 12px;
+ -o-border-radius: 12px;
border-radius: 12px;
- -moz-box-shadow: inset 0 1px 0 0 #fff;
- -webkit-box-shadow: inset 0 1px 0 0 #fff;
- box-shadow: inset 0 1px 0 0 #fff;
+ -webkit-box-shadow: inset 0 1px 0 0 white;
+ -moz-box-shadow: inset 0 1px 0 0 white;
+ -ms-box-shadow: inset 0 1px 0 0 white;
+ -o-box-shadow: inset 0 1px 0 0 white;
+ box-shadow: inset 0 1px 0 0 white;
color: #1a3e66;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
- font-size: 11px;
- font-weight: normal;
+ font: normal 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
line-height: 1;
padding: 6px 0 7px 0;
text-align: center;
text-shadow: 0 1px 1px #fff;
- width: 150px;
-}
+ width: 150px; }
button.cupid-blue:hover {
- background: #ccd9e8;
- background: -moz-linear-gradient(top, #ccd9e8 0%, #c1d4e8 100%);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccd9e8), to(#c1d4e8));
+ background-color: #ccd9e8;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#ccd9e8), to(#c1d4e8));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #ccd9e8, #c1d4e8);
+ background-image: -moz-linear-gradient(top, #ccd9e8, #c1d4e8);
+ background-image: -ms-linear-gradient(top, #ccd9e8, #c1d4e8);
+ background-image: -o-linear-gradient(top, #ccd9e8, #c1d4e8);
+ background-image: linear-gradient(top, #ccd9e8, #c1d4e8);
border-top: 1px solid #a1afbf;
border-left: 1px solid #9caaba;
border-bottom: 1px solid #96a3b3;
border-right: 1px solid #9caaba;
- -moz-box-shadow: inset 0 1px 0 0 #f2f2f2;
-webkit-box-shadow: inset 0 1px 0 0 #f2f2f2;
+ -moz-box-shadow: inset 0 1px 0 0 #f2f2f2;
+ -ms-box-shadow: inset 0 1px 0 0 #f2f2f2;
+ -o-box-shadow: inset 0 1px 0 0 #f2f2f2;
box-shadow: inset 0 1px 0 0 #f2f2f2;
color: #163659;
- cursor: pointer;
-}
+ cursor: pointer; }
button.cupid-blue:active {
border: 1px solid #8c98a7;
- -moz-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee;
- -webkit-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee;
- box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee;
-}
+ -webkit-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
+ -moz-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
+ -ms-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
+ -o-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
+ box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee; }
/* blue pill (inspired by iTunes)
As of 19 Sep 2010 there is a bug in Chrome/Win affecting this button:
http://code.google.com/p/chromium/issues/detail?id=29427
*******************************************************************************/
button.blue-pill {
- background: #a5b8da;
- background: -moz-linear-gradient(top, #a5b8da 0%, #7089b3 100%);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a5b8da), to(#7089b3));
+ background-color: #a5b8da;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b8da), to(#7089b3));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #a5b8da, #7089b3);
+ background-image: -moz-linear-gradient(top, #a5b8da, #7089b3);
+ background-image: -ms-linear-gradient(top, #a5b8da, #7089b3);
+ background-image: -o-linear-gradient(top, #a5b8da, #7089b3);
+ background-image: linear-gradient(top, #a5b8da, #7089b3);
border-top: 1px solid #758fba;
border-right: 1px solid #6c84ab;
border-bottom: 1px solid #5c6f91;
border-left: 1px solid #6c84ab;
- -moz-border-radius: 18px;
-webkit-border-radius: 18px;
+ -moz-border-radius: 18px;
+ -ms-border-radius: 18px;
+ -o-border-radius: 18px;
border-radius: 18px;
- -moz-box-shadow: inset 0 1px 0 0 #aec3e5;
-webkit-box-shadow: inset 0 1px 0 0 #aec3e5;
+ -moz-box-shadow: inset 0 1px 0 0 #aec3e5;
+ -ms-box-shadow: inset 0 1px 0 0 #aec3e5;
+ -o-box-shadow: inset 0 1px 0 0 #aec3e5;
box-shadow: inset 0 1px 0 0 #aec3e5;
color: #fff;
- font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
- font-size: 11px;
- font-weight: bold;
+ font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
line-height: 1;
- padding: 8px 0 8px 0;
+ padding: 8px 0;
text-align: center;
text-shadow: 0 -1px 1px #64799e;
text-transform: uppercase;
- width: 150px;
-}
+ width: 150px; }
button.blue-pill:hover {
- background: #9badcc;
- background: -moz-linear-gradient(top, #9badcc 0%, #687fa6 100%);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9badcc), to(#687fa6));
+ background-color: #9badcc;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#9badcc), to(#687fa6));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #9badcc, #687fa6);
+ background-image: -moz-linear-gradient(top, #9badcc, #687fa6);
+ background-image: -ms-linear-gradient(top, #9badcc, #687fa6);
+ background-image: -o-linear-gradient(top, #9badcc, #687fa6);
+ background-image: linear-gradient(top, #9badcc, #687fa6);
border-top: 1px solid #6d86ad;
border-right: 1px solid #647a9e;
border-bottom: 1px solid #546685;
border-left: 1px solid #647a9e;
- -moz-box-shadow: inset 0 1px 0 0 #a5b9d9;
-webkit-box-shadow: inset 0 1px 0 0 #a5b9d9;
+ -moz-box-shadow: inset 0 1px 0 0 #a5b9d9;
+ -ms-box-shadow: inset 0 1px 0 0 #a5b9d9;
+ -o-box-shadow: inset 0 1px 0 0 #a5b9d9;
box-shadow: inset 0 1px 0 0 #a5b9d9;
- cursor: pointer;
-}
+ cursor: pointer; }
button.blue-pill:active {
border: 1px solid #546685;
- -moz-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eee;
- -webkit-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eee;
- box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eee;
-}
+ -webkit-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee;
+ -moz-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee;
+ -ms-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee;
+ -o-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee;
+ box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee; }
/* dribbble (inspired by dribbble.com)
*******************************************************************************/
button.dribbble {
- background: #F26895;
- background: -moz-linear-gradient(top, #F26895 0, #F26895 50%, #F15587 50%, #F15587 100%);
- background: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#F26895), to(#F15587));
+ background-color: #f26895;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#f26895 0), to(#f26895 50%));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #f26895 0, #f26895 50%, #f15587 50%, #f15587 100%);
+ background-image: -moz-linear-gradient(top, #f26895 0, #f26895 50%, #f15587 50%, #f15587 100%);
+ background-image: -ms-linear-gradient(top, #f26895 0, #f26895 50%, #f15587 50%, #f15587 100%);
+ background-image: -o-linear-gradient(top, #f26895 0, #f26895 50%, #f15587 50%, #f15587 100%);
+ background-image: linear-gradient(top, #f26895 0, #f26895 50%, #f15587 50%, #f15587 100%);
border: 0;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
color: #fcfcfc;
- font-family: "helvetica neue", helvetica, arial, sans-serif;
- font-size: 16px;
- font-weight: bold;
+ font: bold 16px "helvetica neue", helvetica, arial, sans-serif;
line-height: 1;
padding: 10px 0 12px 0;
text-align: center;
text-shadow: 0px -1px 1px #a64767;
- width: 150px;
-}
+ width: 150px; }
button.dribbble:hover {
- background: #e2558b;
- background: -moz-linear-gradient(top, #e2558b 0, #e2558b 50%, #df3e7b 50%, #df3e7b 100%);
- background: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#e2558b), to(#df3e7b));
- cursor: pointer;
-}
+ background-color: #e2558b;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#e2558b 0), to(#e2558b 50%));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #e2558b 0, #e2558b 50%, #df3e7b 50%, #df3e7b 100%);
+ background-image: -moz-linear-gradient(top, #e2558b 0, #e2558b 50%, #df3e7b 50%, #df3e7b 100%);
+ background-image: -ms-linear-gradient(top, #e2558b 0, #e2558b 50%, #df3e7b 50%, #df3e7b 100%);
+ background-image: -o-linear-gradient(top, #e2558b 0, #e2558b 50%, #df3e7b 50%, #df3e7b 100%);
+ background-image: linear-gradient(top, #e2558b 0, #e2558b 50%, #df3e7b 50%, #df3e7b 100%);
+ cursor: pointer; }
button.dribbble:active {
- background: #c94477;
- background: -moz-linear-gradient(top, #c94477 0, #c94477 50%, #c22b65 50%, #c22b65 100%);
- background: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#c94477), to(#c22b65));
-}
+ background-color: #c94477;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#c94477 0), to(#c94477 50%));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #c94477 0, #c94477 50%, #c22b65 50%, #c22b65 100%);
+ background-image: -moz-linear-gradient(top, #c94477 0, #c94477 50%, #c22b65 50%, #c22b65 100%);
+ background-image: -ms-linear-gradient(top, #c94477 0, #c94477 50%, #c22b65 50%, #c22b65 100%);
+ background-image: -o-linear-gradient(top, #c94477 0, #c94477 50%, #c22b65 50%, #c22b65 100%);
+ background-image: linear-gradient(top, #c94477 0, #c94477 50%, #c22b65 50%, #c22b65 100%); }
/* slick black
*******************************************************************************/
button.slick-black {
- background: #111;
- background: -moz-linear-gradient(top,
- rgba(50, 50, 50, 0.9) 0%,
- rgba(30, 30, 30, 0.9) 50%,
- rgba(20, 20, 20, 0.9) 50%,
- rgba(0, 0, 0, 0.9) 100%);
- background: -webkit-gradient(linear, 0 0, 0 100%,
- color-stop(0, rgba(50, 50, 50, 0.9)),
- color-stop(0.5, rgba(30, 30, 30, 0.9)),
- color-stop(0.5, rgba(20, 20, 20, 0.9)),
- color-stop(1, rgba(0, 0, 0, 0.9)));
+ background-color: rgba(50, 50, 50, 0.9);
+ background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(50, 50, 50, 0.9) 0%), to(rgba(30, 30, 30, 0.9) 50%));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.9) 0%, rgba(30, 30, 30, 0.9) 50%, rgba(20, 20, 20, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
+ background-image: -moz-linear-gradient(top, rgba(50, 50, 50, 0.9) 0%, rgba(30, 30, 30, 0.9) 50%, rgba(20, 20, 20, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
+ background-image: -ms-linear-gradient(top, rgba(50, 50, 50, 0.9) 0%, rgba(30, 30, 30, 0.9) 50%, rgba(20, 20, 20, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
+ background-image: -o-linear-gradient(top, rgba(50, 50, 50, 0.9) 0%, rgba(30, 30, 30, 0.9) 50%, rgba(20, 20, 20, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
+ background-image: linear-gradient(top, rgba(50, 50, 50, 0.9) 0%, rgba(30, 30, 30, 0.9) 50%, rgba(20, 20, 20, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
border: 0;
- -moz-border-radius: 4px;
-webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ -ms-border-radius: 4px;
+ -o-border-radius: 4px;
border-radius: 4px;
- -moz-box-shadow: inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1);
-webkit-box-shadow: inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1);
+ -moz-box-shadow: inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1);
+ -ms-box-shadow: inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1);
+ -o-box-shadow: inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1);
box-shadow: inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1);
color: #fff;
- font-family: "helvetica neue", helvetica, arial, sans-serif;
- font-size: 22px;
- font-weight: lighter;
+ font: lighter 22px "helvetica neue", helvetica, arial, sans-serif;
line-height: 1;
padding: 12px 0;
- text-shadow: 0px -1px 1px rgba(0, 0, 0, .8), 0 1px 1px rgba(255, 255, 255, 0.3);
- width: 150px;
-}
+ text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8), 0 1px 1px rgba(255, 255, 255, 0.3);
+ width: 150px; }
button.slick-black:hover {
- background: #222;
- background: -moz-linear-gradient(top,
- rgba(70, 70, 70, 0.9) 0%,
- rgba(50, 50, 50, 0.9) 50%,
- rgba(40, 40, 40, 0.9) 50%,
- rgba(20, 20, 20, 0.9) 100%);
- background: -webkit-gradient(linear, 0 0, 0 100%,
- color-stop(0, rgba(70, 70, 70, 0.9)),
- color-stop(0.5, rgba(50, 50, 50, 0.9)),
- color-stop(0.5, rgba(40, 40, 40, 0.9)),
- color-stop(1, rgba(20, 20, 20, 0.9)));
- cursor: pointer;
-}
+ background-color: rgba(70, 70, 70, 0.9);
+ background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(70, 70, 70, 0.9) 0%), to(rgba(50, 50, 50, 0.9) 50%));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, rgba(70, 70, 70, 0.9) 0%, rgba(50, 50, 50, 0.9) 50%, rgba(40, 40, 40, 0.9) 50%, rgba(20, 20, 20, 0.9) 100%);
+ background-image: -moz-linear-gradient(top, rgba(70, 70, 70, 0.9) 0%, rgba(50, 50, 50, 0.9) 50%, rgba(40, 40, 40, 0.9) 50%, rgba(20, 20, 20, 0.9) 100%);
+ background-image: -ms-linear-gradient(top, rgba(70, 70, 70, 0.9) 0%, rgba(50, 50, 50, 0.9) 50%, rgba(40, 40, 40, 0.9) 50%, rgba(20, 20, 20, 0.9) 100%);
+ background-image: -o-linear-gradient(top, rgba(70, 70, 70, 0.9) 0%, rgba(50, 50, 50, 0.9) 50%, rgba(40, 40, 40, 0.9) 50%, rgba(20, 20, 20, 0.9) 100%);
+ background-image: linear-gradient(top, rgba(70, 70, 70, 0.9) 0%, rgba(50, 50, 50, 0.9) 50%, rgba(40, 40, 40, 0.9) 50%, rgba(20, 20, 20, 0.9) 100%);
+ cursor: pointer; }
button.slick-black:active {
- background: #000;
- background: -moz-linear-gradient(top,
- rgba(30, 30, 30, 0.9) 0%,
- rgba(20, 20, 20, 0.9) 50%,
- rgba(10, 10, 10, 0.9) 50%,
- rgba(0, 0, 0, 0.9) 100%);
- background: -webkit-gradient(linear, 0 0, 0 100%,
- color-stop(0, rgba(30, 30, 30, 0.9)),
- color-stop(0.5, rgba(20, 20, 20, 0.9)),
- color-stop(0.5, rgba(10, 10, 10, 0.9)),
- color-stop(1, rgba(0, 0, 0, 0.9)));
-}
+ background-color: rgba(30, 30, 30, 0.9);
+ background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(30, 30, 30, 0.9) 0%), to(rgba(20, 20, 20, 0.9) 50%));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(10, 10, 10, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
+ background-image: -moz-linear-gradient(top, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(10, 10, 10, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
+ background-image: -ms-linear-gradient(top, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(10, 10, 10, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
+ background-image: -o-linear-gradient(top, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(10, 10, 10, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
+ background-image: linear-gradient(top, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(10, 10, 10, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%); }
/* thoughtbot (inspired by thoughtbot.com)
*******************************************************************************/
button.thoughtbot {
- background: #c63929;
- background: -moz-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
- background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #ee432e), color-stop(0.5, #c63929), color-stop(0.5, #b51700), color-stop(1, #891100));
+ background-color: #ee432e;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#ee432e 0%), to(#c63929 50%));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
+ background-image: -moz-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
+ background-image: -ms-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
+ background-image: -o-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
+ background-image: linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
border: 1px solid #951100;
- -moz-border-radius: 5px;
-webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -ms-border-radius: 5px;
+ -o-border-radius: 5px;
border-radius: 5px;
- -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333;
- -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333;
+ -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
+ -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
+ -ms-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
+ -o-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
+ box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
color: #fff;
- font-family: "helvetica neue", helvetica, arial, sans-serif;
- font-size: 20px;
- font-weight: bold;
+ font: bold 20px "helvetica neue", helvetica, arial, sans-serif;
line-height: 1;
padding: 12px 0 14px 0;
text-align: center;
- text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);
- width: 150px;
-}
+ text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
+ width: 150px; }
button.thoughtbot:hover {
- background: #cb0500;
- background: -moz-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
- background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #f37873), color-stop(0.5, #db504d), color-stop(0.5, #cb0500), color-stop(1, #a20601));
- cursor: pointer;
-}
+ background-color: #f37873;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#f37873 0%), to(#db504d 50%));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
+ background-image: -moz-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
+ background-image: -ms-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
+ background-image: -o-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
+ background-image: linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
+ cursor: pointer; }
button.thoughtbot:active {
- background: #b30300;
- background: -moz-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
- background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #d43c28), color-stop(0.5, #ad3224), color-stop(0.5, #9c1500), color-stop(1, #700d00));
- -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
+ background-color: #d43c28;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#d43c28 0%), to(#ad3224 50%));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
+ background-image: -moz-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
+ background-image: -ms-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
+ background-image: -o-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
+ background-image: linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
-webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
- box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
-}
+ -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
+ -ms-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
+ -o-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
+ box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4); }
/* punch
*******************************************************************************/
@@ -375,324 +618,397 @@ button.punch {
border-right: 1px solid #1f2d4d;
border-bottom: 1px solid #151e33;
border-left: 1px solid #1f2d4d;
- -moz-border-radius: 4px;
-webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ -ms-border-radius: 4px;
+ -o-border-radius: 4px;
border-radius: 4px;
- -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
- -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
- box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
+ -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
+ -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
+ -ms-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
+ -o-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
+ box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
color: #fff;
- font-family: "helvetica neue", helvetica, arial, sans-serif;
- font-size: 20px;
- font-weight: bold;
+ font: bold 20px "helvetica neue", helvetica, arial, sans-serif;
line-height: 1;
margin-bottom: 10px;
padding: 10px 0 12px 0;
text-align: center;
text-shadow: 0px -1px 1px #1e2d4d;
width: 150px;
- -webkit-background-clip: padding-box;
-}
+ -webkit-background-clip: padding-box; }
button.punch:hover {
- -moz-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
- -webkit-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
- box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
- cursor: pointer;
-}
+ -webkit-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
+ -moz-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
+ -ms-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
+ -o-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
+ box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
+ cursor: pointer; }
button.punch:active {
- -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111;
- -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111;
- box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111;
- margin-top: 58px;
-}
+ -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
+ -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
+ -ms-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
+ -o-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
+ box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
+ margin-top: 58px; }
/* blue candy (inspired by Apple iOS buttons)
*******************************************************************************/
button.blue-candy {
- background: #2260dd;
- background: -moz-linear-gradient(top, #779be9 0%, #376fe0 50%, #2260dd 50%, #2463de 100%);
- background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #779be9), color-stop(0.5, #376fe0), color-stop(0.5, #2260dd), color-stop(1, #2463de));
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- border-radius: 3px;
+ background-color: #779be9;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#779be9 0%), to(#376fe0 50%));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #779be9 0%, #376fe0 50%, #2260dd 50%, #2463de 100%);
+ background-image: -moz-linear-gradient(top, #779be9 0%, #376fe0 50%, #2260dd 50%, #2463de 100%);
+ background-image: -ms-linear-gradient(top, #779be9 0%, #376fe0 50%, #2260dd 50%, #2463de 100%);
+ background-image: -o-linear-gradient(top, #779be9 0%, #376fe0 50%, #2260dd 50%, #2463de 100%);
+ background-image: linear-gradient(top, #779be9 0%, #376fe0 50%, #2260dd 50%, #2463de 100%);
+@includ border-radius(3px);
color: #fff;
- font-family: "helvetica neue", helvetica, arial, sans-serif;
- font-size: 12px;
- font-weight: bold;
+ font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
line-height: 1;
padding: 10px 0 12px 0;
text-align: center;
text-shadow: 0px -1px 1px #2c4d93;
width: 150px;
- -webkit-background-clip: padding-box;
-}
+ -webkit-background-clip: padding-box; }
button.blue-candy:hover {
- background: #1d55c4;
- background: -moz-linear-gradient(top, #6989cf 0%, #3263c7 50%, #1d55c4 50%, #1d55c4 100%);
- background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6989cf), color-stop(0.5, #3263c7), color-stop(0.5, #1d55c4), color-stop(1, #1d55c4));
+ background-color: #6989cf;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#6989cf 0%), to(#3263c7 50%));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #6989cf 0%, #3263c7 50%, #1d55c4 50%, #1d55c4 100%);
+ background-image: -moz-linear-gradient(top, #6989cf 0%, #3263c7 50%, #1d55c4 50%, #1d55c4 100%);
+ background-image: -ms-linear-gradient(top, #6989cf 0%, #3263c7 50%, #1d55c4 50%, #1d55c4 100%);
+ background-image: -o-linear-gradient(top, #6989cf 0%, #3263c7 50%, #1d55c4 50%, #1d55c4 100%);
+ background-image: linear-gradient(top, #6989cf 0%, #3263c7 50%, #1d55c4 50%, #1d55c4 100%);
-webkit-background-clip: padding-box;
- cursor: pointer;
-}
+ cursor: pointer; }
button.blue-candy:active {
background: #1a4aab;
- background: -moz-radial-gradient(50% 31% 0deg,circle cover, rgba(38, 76, 153, 0.4), rgba(11, 23, 46, 0.4)),
- -moz-linear-gradient(top, #5c78b5 0%, #2b57ad 50%, #1a4aab 50%, #1b4bab 100%);
- background: -webkit-gradient(radial, 50% 20%, 75, 50% 50%, 0, from(rgba(38, 76, 153, 0.4)), to(rgba(11, 23, 46, 0.4))),
- -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #5c78b5), color-stop(0.5, #2b57ad), color-stop(0.5, #1a4aab), color-stop(1, #1b4bab));
+ background: -moz-radial-gradient(50% 31% 0deg, circle cover, rgba(38, 76, 153, 0.4), rgba(11, 23, 46, 0.4)), -moz-linear-gradient(top, #5c78b5 0%, #2b57ad 50%, #1a4aab 50%, #1b4bab 100%);
+ background: -webkit-gradient(radial, 50% 20%, 75, 50% 50%, 0, from(rgba(38, 76, 153, 0.4)), to(rgba(11, 23, 46, 0.4))), -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #5c78b5), color-stop(0.5, #2b57ad), color-stop(0.5, #1a4aab), color-stop(1, #1b4bab));
color: #ddd;
- -webkit-background-clip: padding-box;
-}
+ -webkit-background-clip: padding-box; }
/* purple candy
*******************************************************************************/
button.purple-candy {
- background: #6021de;
- background: -moz-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
- background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #9e76e8), color-stop(0.5, #7038e0), color-stop(0.5, #6021de), color-stop(1, #6224de));
- -moz-border-radius: 3px;
+ background-color: #9e76e8;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#9e76e8 0%), to(#7038e0 50%));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
+ background-image: -moz-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
+ background-image: -ms-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
+ background-image: -o-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
+ background-image: linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
-webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ -ms-border-radius: 3px;
+ -o-border-radius: 3px;
border-radius: 3px;
color: #fff;
- font-family: "helvetica neue", helvetica, arial, sans-serif;
- font-size: 12px;
- font-weight: bold;
+ font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
line-height: 1;
padding: 10px 0 12px 0;
text-align: center;
text-shadow: 0px -1px 1px #473569;
width: 150px;
- -webkit-background-clip: padding-box;
-}
+ -webkit-background-clip: padding-box; }
button.purple-candy:hover {
- background: #551dc4;
- background: -moz-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
- background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #8d69cf), color-stop(0.5, #6332c7), color-stop(0.5, #551dc4), color-stop(1, #561fc4));
+ background-color: #8d69cf;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#8d69cf 0%), to(#6332c7 50%));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
+ background-image: -moz-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
+ background-image: -ms-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
+ background-image: -o-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
+ background-image: linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
-webkit-background-clip: padding-box;
- cursor: pointer;
-}
+ cursor: pointer; }
button.purple-candy:active {
background: #4a1aab;
- background: -moz-radial-gradient(50% 31% 0deg,circle cover, rgba(38, 76, 153, 0.4), rgba(11, 23, 46, 0.4)),
- -moz-linear-gradient(top, #7b5cb5 0%, #572bad 50%, #4a1aab 50%, #4b1bab 100%);
- background: -webkit-gradient(radial, 50% 20%, 75, 50% 50%, 0, from(rgba(38, 76, 153, 0.4)), to(rgba(11, 23, 46, 0.4))),
- -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #7b5cb5), color-stop(0.5, #572bad), color-stop(0.5, #4a1aab), color-stop(1, #4b1bab));
+ background: -moz-radial-gradient(50% 31% 0deg, circle cover, rgba(38, 76, 153, 0.4), rgba(11, 23, 46, 0.4)), -moz-linear-gradient(top, #7b5cb5 0%, #572bad 50%, #4a1aab 50%, #4b1bab 100%);
+ background: -webkit-gradient(radial, 50% 20%, 75, 50% 50%, 0, from(rgba(38, 76, 153, 0.4)), to(rgba(11, 23, 46, 0.4))), -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #7b5cb5), color-stop(0.5, #572bad), color-stop(0.5, #4a1aab), color-stop(1, #4b1bab));
color: #ddd;
- -webkit-background-clip: padding-box;
-}
+ -webkit-background-clip: padding-box; }
/* shiny blue (inspired by rdio iphone interface)
*******************************************************************************/
button.shiny-blue {
- background: #2463de;
- background: -moz-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
- background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #759ae9), color-stop(0.5, #376fe0), color-stop(0.5, #1a5ad9), color-stop(1, #2463de));
+ background-color: #759ae9;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#759ae9 0%), to(#376fe0 50%));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
+ background-image: -moz-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
+ background-image: -ms-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
+ background-image: -o-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
+ background-image: linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
border-top: 1px solid #1f58cc;
border-right: 1px solid #1b4db3;
border-bottom: 1px solid #174299;
border-left: 1px solid #1b4db3;
- -moz-border-radius: 4px;
-webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ -ms-border-radius: 4px;
+ -o-border-radius: 4px;
border-radius: 4px;
- -moz-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
-webkit-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
+ -moz-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
+ -ms-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
+ -o-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
color: #fff;
- font-family: "helvetica neue", helvetica, arial, sans-serif;
- font-size: 12px;
- font-weight: bold;
+ font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
padding: 7px 0;
text-shadow: 0 -1px 1px #1a5ad9;
- width: 150px;
-}
+ width: 150px; }
button.shiny-blue:hover {
- background: #0d53de;
- background: -moz-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
- background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #5d89e8), color-stop(0.5, #2261e0), color-stop(0.5, #044bd9), color-stop(1, #0d53de));
- cursor: pointer;
-}
+ background-color: #5d89e8;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#5d89e8 0%), to(#2261e0 50%));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
+ background-image: -moz-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
+ background-image: -ms-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
+ background-image: -o-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
+ background-image: linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
+ cursor: pointer; }
button.shiny-blue:active {
border-top: 1px solid #1b4db3;
border-right: 1px solid #174299;
border-bottom: 1px solid #133780;
border-left: 1px solid #174299;
- -moz-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eee;
- -webkit-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eee;
- box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eee;
-}
+ -webkit-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee;
+ -moz-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee;
+ -ms-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee;
+ -o-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee;
+ box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee; }
/* download itunes
I wrote a blog post about creating this button:
http://robots.thoughtbot.com/post/2718077289/make-css3-buttons-like-a-boss
*******************************************************************************/
button.download-itunes {
- background: #377ad0;
- background: -moz-linear-gradient(top, #52a8e8 0%, #377ad0 100%);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52a8e8), to(#377ad0));
+ background-color: #52a8e8;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#52a8e8), to(#377ad0));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #52a8e8, #377ad0);
+ background-image: -moz-linear-gradient(top, #52a8e8, #377ad0);
+ background-image: -ms-linear-gradient(top, #52a8e8, #377ad0);
+ background-image: -o-linear-gradient(top, #52a8e8, #377ad0);
+ background-image: linear-gradient(top, #52a8e8, #377ad0);
border-top: 1px solid #4081af;
border-right: 1px solid #2e69a3;
border-bottom: 1px solid #20559a;
border-left: 1px solid #2e69a3;
- -moz-border-radius: 16px;
-webkit-border-radius: 16px;
+ -moz-border-radius: 16px;
+ -ms-border-radius: 16px;
+ -o-border-radius: 16px;
border-radius: 16px;
- -moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
+ -moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
+ -ms-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
+ -o-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
+ box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
color: #fff;
- font-family: "lucida grande", sans-serif;
- font-size: 11px;
- font-weight: normal;
+ font: normal 11px "lucida grande", sans-serif;
line-height: 1;
- padding: 3px 0 5px 0;
+ padding: 3px 5px;
text-align: center;
text-shadow: 0 -1px 1px #3275bc;
width: 112px;
- -webkit-background-clip: padding-box;
-}
+ -webkit-background-clip: padding-box; }
button.download-itunes:hover {
- background: #206bcb;
- background: -moz-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3e9ee5), to(#206bcb));
+ background-color: #3e9ee5;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#3e9ee5 0%), to(#206bcb 100%));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
+ background-image: -moz-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
+ background-image: -ms-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
+ background-image: -o-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
+ background-image: linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
border-top: 1px solid #2a73a6;
border-right: 1px solid #165899;
border-bottom: 1px solid #07428f;
border-left: 1px solid #165899;
- -moz-box-shadow: inset 0 1px 0 0 #62b1e9;
-webkit-box-shadow: inset 0 1px 0 0 #62b1e9;
+ -moz-box-shadow: inset 0 1px 0 0 #62b1e9;
+ -ms-box-shadow: inset 0 1px 0 0 #62b1e9;
+ -o-box-shadow: inset 0 1px 0 0 #62b1e9;
+ box-shadow: inset 0 1px 0 0 #62b1e9;
cursor: pointer;
text-shadow: 0 -1px 1px #1d62ab;
- -webkit-background-clip: padding-box;
-}
+ -webkit-background-clip: padding-box; }
button.download-itunes:active {
background: #3282d3;
border: 1px solid #154c8c;
border-bottom: 1px solid #0e408e;
- -moz-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
- -webkit-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
+ -webkit-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
+ -moz-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
+ -ms-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
+ -o-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
+ box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
text-shadow: 0 -1px 1px #2361a4;
- -webkit-background-clip: padding-box;
-}
+ -webkit-background-clip: padding-box; }
button[disabled].download-itunes,
button[disabled].download-itunes:hover,
button[disabled].download-itunes:active {
- background: #dadada;
- background: -moz-linear-gradient(top, #f3f3f3 0%, #dadada 100%);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dadada), to(#f3f3f3));
+ background-color: #dadada;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#dadada), to(#f3f3f3));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #dadada, #f3f3f3);
+ background-image: -moz-linear-gradient(top, #dadada, #f3f3f3);
+ background-image: -ms-linear-gradient(top, #dadada, #f3f3f3);
+ background-image: -o-linear-gradient(top, #dadada, #f3f3f3);
+ background-image: linear-gradient(top, #dadada, #f3f3f3);
border-top: 1px solid #c5c5c5;
border-right: 1px solid #cecece;
border-bottom: 1px solid #d9d9d9;
border-left: 1px solid #cecece;
- color: #8f8f8f;
- box-shadow: none;
- -moz-box-shadow: none;
-webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ -ms-box-shadow: none;
+ -o-box-shadow: none;
+ box-shadow: none;
+ color: #8f8f8f;
cursor: not-allowed;
- text-shadow: 0 -1px 1px #ebebeb;
-}
+ text-shadow: 0 -1px 1px #ebebeb; }
button.download-itunes::-moz-focus-inner {
border: 0;
- padding: 0;
-}
+ padding: 0; }
/* skip (inspired by okcupid iphone interface)
*******************************************************************************/
button.skip {
- background: #36518f;
- background: -moz-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
- background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #8c9cbf), color-stop(0.5, #546a9e), color-stop(0.5, #36518f), color-stop(1, #3d5691));
+ background-color: #8c9cbf;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#8c9cbf 0%), to(#546a9e 50%));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
+ background-image: -moz-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
+ background-image: -ms-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
+ background-image: -o-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
+ background-image: linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
border: 1px solid #172d6e;
border-bottom: 1px solid #0e1d45;
- -moz-border-radius: 5px;
-webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -ms-border-radius: 5px;
+ -o-border-radius: 5px;
border-radius: 5px;
- -moz-box-shadow: inset 0 1px 0 0 #b1b9cb;
-webkit-box-shadow: inset 0 1px 0 0 #b1b9cb;
+ -moz-box-shadow: inset 0 1px 0 0 #b1b9cb;
+ -ms-box-shadow: inset 0 1px 0 0 #b1b9cb;
+ -o-box-shadow: inset 0 1px 0 0 #b1b9cb;
box-shadow: inset 0 1px 0 0 #b1b9cb;
color: #fff;
- font-family: "helvetica neue", helvetica, arial, sans-serif;
- font-size: 16px;
- font-weight: bold;
+ font: bold 16px "helvetica neue", helvetica, arial, sans-serif;
padding: 7px 0 8px 0;
text-decoration: none;
text-align: center;
text-shadow: 0 -1px 1px #000f4d;
- width: 150px;
-}
+ width: 150px; }
button.skip:hover {
- background: #2f477d;
- background: -moz-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
- background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #7f8dad), color-stop(0.5, #4a5e8c), color-stop(0.5, #2f477d), color-stop(1, #364c80));
- cursor: pointer;
-}
+ background-color: #7f8dad;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#7f8dad 0%), to(#4a5e8c 50%));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
+ background-image: -moz-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
+ background-image: -ms-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
+ background-image: -o-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
+ background-image: linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
+ cursor: pointer; }
button.skip:active {
- -moz-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 #fff;
- -webkit-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 #fff;
- box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 #fff;
- cursor: pointer;
-}
+ -webkit-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white;
+ -moz-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white;
+ -ms-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white;
+ -o-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white;
+ box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white;
+ cursor: pointer; }
/* minimal indent (inspired by okcupid iphone interface)
*******************************************************************************/
button.minimal-indent {
- background: #d2d2d2;
- background: -moz-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%);
- background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #f3f3f3), color-stop(0.5, #dddddd), color-stop(0.5, #d2d2d2), color-stop(1, #dfdfdf));
+ background-color: #f3f3f3;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3 0%), to(#dddddd 50%));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%);
+ background-image: -moz-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%);
+ background-image: -ms-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%);
+ background-image: -o-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%);
+ background-image: linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%);
border-right: 1px solid #dfdfdf;
border-bottom: 1px solid #b4b4b4;
border-right: 1px solid #dfdfdf;
- -moz-border-radius: 5px;
-webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -ms-border-radius: 5px;
+ -o-border-radius: 5px;
border-radius: 5px;
- -moz-box-shadow: inset 0 1px 0 0 #fff, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
- -webkit-box-shadow: inset 0 1px 0 0 #fff, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
- box-shadow: inset 0 1px 0 0 #fff, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
- color: #666666;
- font-family: "helvetica neue", helvetica, arial, sans-serif;
- font-size: 16px;
- font-weight: bold;
+ -webkit-box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
+ -moz-box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
+ -ms-box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
+ -o-box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
+ box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
+ color: #666;
+ font: bold 16px "helvetica neue", helvetica, arial, sans-serif;
margin: 0;
padding: 7px 0;
text-shadow: 0 1px 1px #fff;
- width: 150px;
-}
+ width: 150px; }
button.minimal-indent:hover {
- background: #c4c4c4;
- background: -moz-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
- background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #e5e5e5), color-stop(0.5, #d1d1d1), color-stop(0.5, #c4c4c4), color-stop(1, #b8b8b8));
+ background-color: #e5e5e5;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#e5e5e5 0%), to(#d1d1d1 50%));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
+ background-image: -moz-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
+ background-image: -ms-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
+ background-image: -o-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
+ background-image: linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
-webkit-box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3;
-}
+ -moz-box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3;
+ -ms-box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3;
+ -o-box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3;
+ box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3; }
button.minimal-indent:active {
- -moz-box-shadow: inset 0 0 30px 0 #999, 0 1px 0 0 #fff;
- -webkit-box-shadow: inset 0 0 30px 0 #999, 0 1px 0 0 #fff;
- box-shadow: inset 0 0 30px 0 #999, 0 1px 0 0 #fff;
-}
+ -webkit-box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 white;
+ -moz-box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 white;
+ -ms-box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 white;
+ -o-box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 white;
+ box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 white; }
div.indent {
- background: #e2e2e2;
- background: -moz-linear-gradient(top, #e2e2e2 0%, #fafafa 100%);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e2e2e2), to(#fafafa));
- -moz-border-radius: 8px;
+ background-color: #e2e2e2;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#e2e2e2), to(#fafafa));
+ /* Saf4+, Chrome */
+ background-image: -webkit-linear-gradient(top, #e2e2e2, #fafafa);
+ background-image: -moz-linear-gradient(top, #e2e2e2, #fafafa);
+ background-image: -ms-linear-gradient(top, #e2e2e2, #fafafa);
+ background-image: -o-linear-gradient(top, #e2e2e2, #fafafa);
+ background-image: linear-gradient(top, #e2e2e2, #fafafa);
-webkit-border-radius: 8px;
+ -moz-border-radius: 8px;
+ -ms-border-radius: 8px;
+ -o-border-radius: 8px;
border-radius: 8px;
margin: 50px auto 0;
padding: 10px 0;
- width: 170px;
-}
+ width: 170px; }
/* webkit badge
*******************************************************************************/
@@ -711,17 +1027,14 @@ button.webkit-badge {
width: 150px;
-webkit-mask-image: url("../images/badge.png");
-webkit-mask-position: left top;
- -webkit-mask-repeat: no-repeat;
-}
+ -webkit-mask-repeat: no-repeat; }
button.webkit-badge:hover {
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #f37873), color-stop(0.5, #db504d), color-stop(0.5, #cb0500), color-stop(1, #a20601));
- cursor: pointer;
-}
+ cursor: pointer; }
button.webkit-badge:active {
- background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #d43c28), color-stop(0.5, #ad3224), color-stop(0.5, #9c1500), color-stop(1, #700d00));
-}
+ background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #d43c28), color-stop(0.5, #ad3224), color-stop(0.5, #9c1500), color-stop(1, #700d00)); }
/* webkit seal
*******************************************************************************/
@@ -740,17 +1053,14 @@ button.webkit-seal {
width: 150px;
-webkit-mask-image: url("../images/seal.png");
-webkit-mask-position: center center;
- -webkit-mask-repeat: no-repeat;
-}
+ -webkit-mask-repeat: no-repeat; }
button.webkit-seal:hover {
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #8d69cf), color-stop(1, #561fc4));
- cursor: pointer;
-}
+ cursor: pointer; }
button.webkit-seal:active {
- background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 0, from(rgba(38, 76, 153, 0.2)), to(rgba(11, 23, 46, 0.2))), -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #7b5cb5), color-stop(1, #4b1bab));
-}
+ background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 0, from(rgba(38, 76, 153, 0.2)), to(rgba(11, 23, 46, 0.2))), -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #7b5cb5), color-stop(1, #4b1bab)); }
/* webkit check
*******************************************************************************/
@@ -766,17 +1076,14 @@ button.webkit-check {
width: 150px;
-webkit-mask-image: url("../images/check.png");
-webkit-mask-position: center center;
- -webkit-mask-repeat: no-repeat;
-}
+ -webkit-mask-repeat: no-repeat; }
button.webkit-check:hover {
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6989cf), color-stop(1, #1d55c4));
- cursor: pointer;
-}
+ cursor: pointer; }
button.webkit-check:active {
- background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #5c78b5), color-stop(1, #1b4bab));
-}
+ background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #5c78b5), color-stop(1, #1b4bab)); }
/* disabled button styles
works with this markup: <button disabled="disabled">Submit</button>
@@ -786,10 +1093,11 @@ button[disabled]:hover,
button[disabled]:active {
background: #999;
border: 0;
- box-shadow: none;
- -moz-box-shadow: none;
-webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ -ms-box-shadow: none;
+ -o-box-shadow: none;
+ box-shadow: none;
color: #aaa;
cursor: not-allowed;
- text-shadow: none;
-}
+ text-shadow: none; }
View
818 css/screen.css
@@ -1,3 +1,712 @@
+/* general styles */
+body {
+ text-rendering: optimizeLegibility; }
+
+button:hover {
+ cursor: pointer; }
+
+button::-moz-focus-inner {
+ border: 0; }
+
+/* minimal
+*******************************************************************************/
+button.minimal {
+ background: #e3e3e3;
+ border: 1px solid #bbb;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ -ms-border-radius: 3px;
+ -o-border-radius: 3px;
+ border-radius: 3px;
+ -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
+ -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
+ box-shadow: inset 0 0 1px 1px #f6f6f6;
+ color: #333;
+ font-family: "helvetica neue", helvetica, arial, sans-serif;
+ font-size: 12px;
+ font-weight: bold;
+ line-height: 1;
+ padding: 8px 0 9px;
+ text-align: center;
+ text-shadow: 0 1px 0 #fff;
+ width: 150px; }
+
+button.minimal:hover {
+ background: #d9d9d9;
+ -moz-box-shadow: inset 0 0 1px 1px #eaeaea;
+ -webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
+ box-shadow: inset 0 0 1px 1px #eaeaea;
+ color: #222;
+ cursor: pointer; }
+
+button.minimal:active {
+ background: #d0d0d0;
+ -moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
+ -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
+ box-shadow: inset 0 0 1px 1px #e3e3e3;
+ color: #000; }
+
+/* clean gray
+*******************************************************************************/
+button.clean-gray {
+ background: #eee;
+ background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eeeeee), to(#cccccc));
+ border: 1px solid #ccc;
+ border-bottom: 1px solid #bbb;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ color: #333;
+ font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+ font-size: 11px;
+ font-weight: bold;
+ line-height: 1;
+ padding: 8px 0;
+ text-align: center;
+ text-shadow: 0 1px 0 #eee;
+ width: 150px; }
+
+button.clean-gray:hover {
+ background: #ddd;
+ background: -moz-linear-gradient(top, #dddddd 0%, #bbbbbb 100%);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dddddd), to(#bbbbbb));
+ border: 1px solid #bbb;
+ border-bottom: 1px solid #999;
+ cursor: pointer;
+ text-shadow: 0 1px 0 #ddd; }
+
+button.clean-gray:active {
+ border: 1px solid #aaa;
+ border-bottom: 1px solid #888;
+ -moz-box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee;
+ -webkit-box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee;
+ box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee; }
+
+/* cupid green (inspired by okcupid.com)
+*******************************************************************************/
+button.cupid-green {
+ background: #7fbf4d;
+ background: -moz-linear-gradient(top, #7fbf4d 0%, #63a62f 100%);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7fbf4d), to(#63a62f));
+ border: 1px solid #63a62f;
+ border-bottom: 1px solid #5b992b;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ -moz-box-shadow: inset 0 1px 0 0 #96ca6d;
+ -webkit-box-shadow: inset 0 1px 0 0 #96ca6d;
+ box-shadow: inset 0 1px 0 0 #96ca6d;
+ color: #fff;
+ font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+ font-size: 11px;
+ font-weight: bold;
+ line-height: 1;
+ padding: 7px 0 8px 0;
+ text-align: center;
+ text-shadow: 0 -1px 0 #4c9021;
+ width: 150px; }
+
+button.cupid-green:hover {
+ background: #76b347;
+ background: -moz-linear-gradient(top, #76b347 0%, #5e9e2e 100%);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#76b347), to(#5e9e2e));
+ -moz-box-shadow: inset 0 1px 0 0 #8dbf67;
+ -webkit-box-shadow: inset 0 1px 0 0 #8dbf67;
+ box-shadow: inset 0 1px 0 0 #8dbf67;
+ cursor: pointer; }
+
+button.cupid-green:active {
+ border: 1px solid #5b992b;
+ border-bottom: 1px solid #538c27;
+ -moz-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eee;
+ -webkit-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eee;
+ box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eee; }
+
+/* cupid blue (inspired by okcupid.com)
+*******************************************************************************/
+button.cupid-blue {
+ background: #d7e5f5;
+ background: -moz-linear-gradient(top, #d7e5f5 0%, #cbe0f5 100%);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d7e5f5), to(#cbe0f5));
+ border-top: 1px solid #abbbcc;
+ border-left: 1px solid #a7b6c7;
+ border-bottom: 1px solid #a1afbf;
+ border-right: 1px solid #a7b6c7;
+ -moz-border-radius: 12px;
+ -webkit-border-radius: 12px;
+ border-radius: 12px;
+ -moz-box-shadow: inset 0 1px 0 0 #fff;
+ -webkit-box-shadow: inset 0 1px 0 0 #fff;
+ box-shadow: inset 0 1px 0 0 #fff;
+ color: #1a3e66;
+ font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+ font-size: 11px;
+ font-weight: normal;
+ line-height: 1;
+ padding: 6px 0 7px 0;
+ text-align: center;
+ text-shadow: 0 1px 1px #fff;
+ width: 150px; }
+
+button.cupid-blue:hover {
+ background: #ccd9e8;
+ background: -moz-linear-gradient(top, #ccd9e8 0%, #c1d4e8 100%);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccd9e8), to(#c1d4e8));
+ border-top: 1px solid #a1afbf;
+ border-left: 1px solid #9caaba;
+ border-bottom: 1px solid #96a3b3;
+ border-right: 1px solid #9caaba;
+ -moz-box-shadow: inset 0 1px 0 0 #f2f2f2;
+ -webkit-box-shadow: inset 0 1px 0 0 #f2f2f2;
+ box-shadow: inset 0 1px 0 0 #f2f2f2;
+ color: #163659;
+ cursor: pointer; }
+
+button.cupid-blue:active {
+ border: 1px solid #8c98a7;
+ -moz-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee;
+ -webkit-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee;
+ box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee; }
+
+/* blue pill (inspired by iTunes)
+ As of 19 Sep 2010 there is a bug in Chrome/Win affecting this button:
+ http://code.google.com/p/chromium/issues/detail?id=29427
+*******************************************************************************/
+button.blue-pill {
+ background: #a5b8da;
+ background: -moz-linear-gradient(top, #a5b8da 0%, #7089b3 100%);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a5b8da), to(#7089b3));
+ border-top: 1px solid #758fba;
+ border-right: 1px solid #6c84ab;
+ border-bottom: 1px solid #5c6f91;
+ border-left: 1px solid #6c84ab;
+ -moz-border-radius: 18px;
+ -webkit-border-radius: 18px;
+ border-radius: 18px;
+ -moz-box-shadow: inset 0 1px 0 0 #aec3e5;
+ -webkit-box-shadow: inset 0 1px 0 0 #aec3e5;
+ box-shadow: inset 0 1px 0 0 #aec3e5;
+ color: #fff;
+ font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+ font-size: 11px;
+ font-weight: bold;
+ line-height: 1;
+ padding: 8px 0 8px 0;
+ text-align: center;
+ text-shadow: 0 -1px 1px #64799e;
+ text-transform: uppercase;
+ width: 150px; }
+
+button.blue-pill:hover {
+ background: #9badcc;
+ background: -moz-linear-gradient(top, #9badcc 0%, #687fa6 100%);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9badcc), to(#687fa6));
+ border-top: 1px solid #6d86ad;
+ border-right: 1px solid #647a9e;
+ border-bottom: 1px solid #546685;
+ border-left: 1px solid #647a9e;
+ -moz-box-shadow: inset 0 1px 0 0 #a5b9d9;
+ -webkit-box-shadow: inset 0 1px 0 0 #a5b9d9;
+ box-shadow: inset 0 1px 0 0 #a5b9d9;
+ cursor: pointer; }
+
+button.blue-pill:active {
+ border: 1px solid #546685;
+ -moz-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eee;
+ -webkit-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eee;
+ box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eee; }
+
+/* dribbble (inspired by dribbble.com)
+*******************************************************************************/
+button.dribbble {
+ background: #F26895;
+ background: -moz-linear-gradient(top, #f26895 0, #f26895 50%, #f15587 50%, #f15587 100%);
+ background: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#f26895), to(#f15587));
+ border: 0;
+ -moz-border-radius: 6px;
+ -webkit-border-radius: 6px;
+ border-radius: 6px;
+ color: #fcfcfc;
+ font-family: "helvetica neue", helvetica, arial, sans-serif;
+ font-size: 16px;
+ font-weight: bold;
+ line-height: 1;
+ padding: 10px 0 12px 0;
+ text-align: center;
+ text-shadow: 0px -1px 1px #a64767;
+ width: 150px; }
+
+button.dribbble:hover {
+ background: #e2558b;
+ background: -moz-linear-gradient(top, #e2558b 0, #e2558b 50%, #df3e7b 50%, #df3e7b 100%);
+ background: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#e2558b), to(#df3e7b));
+ cursor: pointer; }
+
+button.dribbble:active {
+ background: #c94477;
+ background: -moz-linear-gradient(top, #c94477 0, #c94477 50%, #c22b65 50%, #c22b65 100%);
+ background: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#c94477), to(#c22b65)); }
+
+/* slick black
+*******************************************************************************/
+button.slick-black {
+ background: #111;
+ background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.9) 0%, rgba(30, 30, 30, 0.9) 50%, rgba(20, 20, 20, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
+ background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(50, 50, 50, 0.9)), color-stop(0.5, rgba(30, 30, 30, 0.9)), color-stop(0.5, rgba(20, 20, 20, 0.9)), color-stop(1, rgba(0, 0, 0, 0.9)));
+ border: 0;
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+ -moz-box-shadow: inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1);
+ -webkit-box-shadow: inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1);
+ box-shadow: inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1);
+ color: #fff;
+ font-family: "helvetica neue", helvetica, arial, sans-serif;
+ font-size: 22px;
+ font-weight: lighter;
+ line-height: 1;
+ padding: 12px 0;
+ text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8), 0 1px 1px rgba(255, 255, 255, 0.3);
+ width: 150px; }
+
+button.slick-black:hover {
+ background: #222;
+ background: -moz-linear-gradient(top, rgba(70, 70, 70, 0.9) 0%, rgba(50, 50, 50, 0.9) 50%, rgba(40, 40, 40, 0.9) 50%, rgba(20, 20, 20, 0.9) 100%);
+ background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(70, 70, 70, 0.9)), color-stop(0.5, rgba(50, 50, 50, 0.9)), color-stop(0.5, rgba(40, 40, 40, 0.9)), color-stop(1, rgba(20, 20, 20, 0.9)));
+ cursor: pointer; }
+
+button.slick-black:active {
+ background: #000;
+ background: -moz-linear-gradient(top, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(10, 10, 10, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
+ background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(30, 30, 30, 0.9)), color-stop(0.5, rgba(20, 20, 20, 0.9)), color-stop(0.5, rgba(10, 10, 10, 0.9)), color-stop(1, rgba(0, 0, 0, 0.9))); }
+
+/* thoughtbot (inspired by thoughtbot.com)
+*******************************************************************************/
+button.thoughtbot {
+ background: #c63929;
+ background: -moz-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
+ background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #ee432e), color-stop(0.5, #c63929), color-stop(0.5, #b51700), color-stop(1, #891100));
+ border: 1px solid #951100;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+ -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
+ -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
+ box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
+ color: #fff;
+ font-family: "helvetica neue", helvetica, arial, sans-serif;
+ font-size: 20px;
+ font-weight: bold;
+ line-height: 1;
+ padding: 12px 0 14px 0;
+ text-align: center;
+ text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
+ width: 150px; }
+
+button.thoughtbot:hover {
+ background: #cb0500;
+ background: -moz-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
+ background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #f37873), color-stop(0.5, #db504d), color-stop(0.5, #cb0500), color-stop(1, #a20601));
+ cursor: pointer; }
+
+button.thoughtbot:active {
+ background: #b30300;
+ background: -moz-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
+ background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #d43c28), color-stop(0.5, #ad3224), color-stop(0.5, #9c1500), color-stop(1, #700d00));
+ -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
+ -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
+ box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4); }
+
+/* punch
+*******************************************************************************/
+button.punch {
+ background: #4162a8;
+ border-top: 1px solid #38538c;
+ border-right: 1px solid #1f2d4d;
+ border-bottom: 1px solid #151e33;
+ border-left: 1px solid #1f2d4d;
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+ -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
+ -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
+ box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
+ color: #fff;
+ font-family: "helvetica neue", helvetica, arial, sans-serif;
+ font-size: 20px;
+ font-weight: bold;
+ line-height: 1;
+ margin-bottom: 10px;
+ padding: 10px 0 12px 0;
+ text-align: center;
+ text-shadow: 0px -1px 1px #1e2d4d;
+ width: 150px;
+ -webkit-background-clip: padding-box; }
+
+button.punch:hover {
+ -moz-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
+ -webkit-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
+ box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
+ cursor: pointer; }
+
+button.punch:active {
+ -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111;
+ -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111;
+ box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111;
+ margin-top: 58px; }
+
+/* blue candy (inspired by Apple iOS buttons)
+*******************************************************************************/
+button.blue-candy {
+ background: #2260dd;
+ background: -moz-linear-gradient(top, #779be9 0%, #376fe0 50%, #2260dd 50%, #2463de 100%);
+ background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #779be9), color-stop(0.5, #376fe0), color-stop(0.5, #2260dd), color-stop(1, #2463de));
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ color: #fff;
+ font-family: "helvetica neue", helvetica, arial, sans-serif;
+ font-size: 12px;
+ font-weight: bold;
+ line-height: 1;
+ padding: 10px 0 12px 0;
+ text-align: center;
+ text-shadow: 0px -1px 1px #2c4d93;
+ width: 150px;
+ -webkit-background-clip: padding-box; }
+
+button.blue-candy:hover {
+ background: #1d55c4;
+ background: -moz-linear-gradient(top, #6989cf 0%, #3263c7 50%, #1d55c4 50%, #1d55c4 100%);
+ background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6989cf), color-stop(0.5, #3263c7), color-stop(0.5, #1d55c4), color-stop(1, #1d55c4));
+ -webkit-background-clip: padding-box;
+ cursor: pointer; }
+
+button.blue-candy:active {
+ background: #1a4aab;
+ background: -moz-radial-gradient(50% 31% 0deg, circle cover, rgba(38, 76, 153, 0.4), rgba(11, 23, 46, 0.4)), -moz-linear-gradient(top, #5c78b5 0%, #2b57ad 50%, #1a4aab 50%, #1b4bab 100%);
+ background: -webkit-gradient(radial, 50% 20%, 75, 50% 50%, 0, from(rgba(38, 76, 153, 0.4)), to(rgba(11, 23, 46, 0.4))), -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #5c78b5), color-stop(0.5, #2b57ad), color-stop(0.5, #1a4aab), color-stop(1, #1b4bab));
+ color: #ddd;
+ -webkit-background-clip: padding-box; }
+
+/* purple candy
+*******************************************************************************/
+button.purple-candy {
+ background: #6021de;
+ background: -moz-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
+ background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #9e76e8), color-stop(0.5, #7038e0), color-stop(0.5, #6021de), color-stop(1, #6224de));
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ color: #fff;
+ font-family: "helvetica neue", helvetica, arial, sans-serif;
+ font-size: 12px;
+ font-weight: bold;
+ line-height: 1;
+ padding: 10px 0 12px 0;
+ text-align: center;
+ text-shadow: 0px -1px 1px #473569;
+ width: 150px;
+ -webkit-background-clip: padding-box; }
+
+button.purple-candy:hover {
+ background: #551dc4;
+ background: -moz-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
+ background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #8d69cf), color-stop(0.5, #6332c7), color-stop(0.5, #551dc4), color-stop(1, #561fc4));
+ -webkit-background-clip: padding-box;
+ cursor: pointer; }
+
+button.purple-candy:active {
+ background: #4a1aab;
+ background: -moz-radial-gradient(50% 31% 0deg, circle cover, rgba(38, 76, 153, 0.4), rgba(11, 23, 46, 0.4)), -moz-linear-gradient(top, #7b5cb5 0%, #572bad 50%, #4a1aab 50%, #4b1bab 100%);
+ background: -webkit-gradient(radial, 50% 20%, 75, 50% 50%, 0, from(rgba(38, 76, 153, 0.4)), to(rgba(11, 23, 46, 0.4))), -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #7b5cb5), color-stop(0.5, #572bad), color-stop(0.5, #4a1aab), color-stop(1, #4b1bab));
+ color: #ddd;
+ -webkit-background-clip: padding-box; }
+
+/* shiny blue (inspired by rdio iphone interface)
+*******************************************************************************/
+button.shiny-blue {
+ background: #2463de;
+ background: -moz-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
+ background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #759ae9), color-stop(0.5, #376fe0), color-stop(0.5, #1a5ad9), color-stop(1, #2463de));
+ border-top: 1px solid #1f58cc;
+ border-right: 1px solid #1b4db3;
+ border-bottom: 1px solid #174299;
+ border-left: 1px solid #1b4db3;