/* ---------------------------------------------------------------------------------- ------ ----- ---- --- -- - Defaults & General Styling - -- --- ---- ----- ------ ---------------------------------------------------------------------------------- */ /* ----- ---- --- -- - Default buttons - -- --- ---- ----- */ .buttonPro{ display: inline-block; text-decoration: none; outline: none; cursor: pointer; font: bold 12px/1em HelveticaNeue, Arial, sans-serif; padding: 8px 11px; color: #555; text-shadow: 0 1px 0 #fff; background: #f5f5f5; background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f0f0f0)); background: -moz-linear-gradient(top, #f9f9f9, #f0f0f0); border: 1px solid #dedede; border-color: #dedede #d8d8d8 #d3d3d3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #fbfbfb; -moz-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #fbfbfb; box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #fbfbfb; } .buttonPro:hover, .buttonPro:focus{ color: #555; background: #efefef; background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#e9e9e9)); background: -moz-linear-gradient(top, #f9f9f9, #e9e9e9); border-color: #ccc; -webkit-box-shadow: 0 2px 1px #e0e0e0, inset 0 1px 0 #fbfbfb; -moz-box-shadow: 0 2px 1px #e0e0e0, inset 0 1px 0 #fbfbfb; box-shadow: 0 1px 2px #e0e0e0, inset 0 1px 0 #fbfbfb; } .buttonPro:active{ position: relative; top: 1px; color: #555; background: #efefef; background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#f4f4f4)); background: -moz-linear-gradient(top, #eaeaea, #f4f4f4); border-color: #c6c6c6; -webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #ddd; -moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #ddd; box-shadow: 0 1px 0 #fff, inset 0 0 5px #ddd; } .buttonPro.rounded{ padding: 8px 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } input.buttonPro, button.buttonPro{ *width: auto; /* IE7 Fix */ *overflow: visible; /* IE7 Fix */ } .buttonPro img{ border: none; vertical-align: bottom; } /* ----- ---- --- -- - Small buttons - -- --- ---- ----- */ .buttonPro.small{ padding: 5px 11px; font-size: 11px; font-weight: normal; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .buttonPro.small.rounded{ -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; } /* ----- ---- --- -- - Large buttons - -- --- ---- ----- */ .buttonPro.large{ padding: 12px 15px; font-size: 20px; font-weight: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .buttonPro.large.rounded{ padding: 12px 22px; -webkit-border-radius: 23px; -moz-border-radius: 23px; border-radius: 23px; } /* ------------------------------------------------------------------------ ------ ----- ---- --- -- - Color Variations - -- --- ---- ----- ------ ------------------------------------------------------------------------ */ /* ----- ---- --- -- - Light Blue - -- --- ---- ----- */ .buttonPro.light_blue{ background: #92dbf6; background: -webkit-gradient(linear, left top, left bottom, from(#abe4f8), to(#6fcef3)); background: -moz-linear-gradient(top, #abe4f8, #6fcef3); border-color: #7cbdd5; color: #444; text-shadow: 0 1px 0 #b6e6f9; -webkit-box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 0 #c0ebfa; -moz-box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 0 #c0ebfa; box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 0 #c0ebfa; } .buttonPro.light_blue:hover, .buttonPro.light_blue:focus{ background: #85d6f5; background: -webkit-gradient(linear, left top, left bottom, from(#b1e9fd), to(#66c6ea)); background: -moz-linear-gradient(top, #b1e9fd, #66c6ea); border-color: #66a8bf; -webkit-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #c0ebfa; -moz-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #c0ebfa; box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #c0ebfa; } .buttonPro.light_blue:active{ background: #92dbf6; border-color: #66a8bf; -webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #66a8bf; -moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #66a8bf; box-shadow: 0 1px 0 #fff, inset 0 0 5px #66a8bf; } /* ----- ---- --- -- - Blue - -- --- ---- ----- */ .buttonPro.blue{ background: #377ad0; background: -webkit-gradient(linear, left top, left bottom, from(#52a8e8), to(#377ad0)); background: -moz-linear-gradient(top, #52a8e8, #377ad0); border-color: #4081af #2e69a3 #20559a; color: #fff; text-shadow: 0 1px 1px #4081af; -webkit-box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 1px #72b9eb; -moz-box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 1px #72b9eb; box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 1px #72b9eb; } .buttonPro.blue:hover, .buttonPro.blue:focus{ background: #206bcb; background: -webkit-gradient(linear, left top, left bottom, from(#3e9ee5), to(#206bcb)); background: -moz-linear-gradient(top, #3e9ee5, #206bcb); border-color: #2a73a6 #165899 #07428f; -webkit-box-shadow: 0 1px 0 0 #fff, inset 0 1px 0 0 #62b1e9; -moz-box-shadow: 0 1px 0 0 #fff, inset 0 1px 0 0 #62b1e9; box-shadow: 0 1px 0 0 #fff, inset 0 1px 0 0 #62b1e9; } .buttonPro.blue:active{ background: #3282d3; border-color: #154c8c #154c8c #0e408e; text-shadow: 0 -1px 1px #1d62ab; -webkit-box-shadow: 0 1px 0 0 #fff, inset 0 0 6px 3px #1657b5; -moz-box-shadow: 0 1px 0 0 #fff, inset 0 0 6px 3px #1657b5; box-shadow: 0 1px 0 0 #fff, inset 0 0 6px 3px #1657b5; } /* ----- ---- --- -- - Green - -- --- ---- ----- */ .buttonPro.green{ background: #7fbf4d; background: -webkit-gradient(linear, left top, left bottom, from(#7fbf4d), to(#63a62f)); background: -moz-linear-gradient(top, #7fbf4d, #63a62f); border-color: #63a62f; color: #fff; text-shadow: 0 1px 0 #53961e; -webkit-box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 0 #96d865; -moz-box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 0 #96d865; box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 0 #96d865; } .buttonPro.green:hover, .buttonPro.green:focus{ background: #76b347; background: -webkit-gradient(linear, left top, left bottom, from(#86c755), to(#5ea12a)); background: -moz-linear-gradient(top, #86c755, #5ea12a); border-color: #53961e; -webkit-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #96d865; -moz-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #96d865; box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #96d865; } .buttonPro.green:active{ background: #7fbf4d; border-color: #53961e; -webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #53961e; -moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #53961e; box-shadow: 0 1px 0 #fff, inset 0 0 5px #53961e; } /* ----- ---- --- -- - Red - -- --- ---- ----- */ .buttonPro.red{ background: #e6433d; background: -webkit-gradient(linear, left top, left bottom, from(#f8674b), to(#d54746)); background: -moz-linear-gradient(top, #f8674b, #d54746); border-color: #d1371c #d1371c #9f220d; color: #fff; text-shadow: 0 1px 1px #961a07; -webkit-box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 0 #ff9573; -moz-box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 0 #ff9573; box-shadow: 0 1px 2px #d6d6d6, inset 0 1px 0 #ff9573; } .buttonPro.red:hover, .buttonPro.red:focus{ background: #dd3a37; background: -webkit-gradient(linear, left top, left bottom, from(#ff7858), to(#cc3a3b)); background: -moz-linear-gradient(top, #ff7858, #cc3a3b); border-color: #961a07; -webkit-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ff9573; -moz-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ff9573; box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ff9573; } .buttonPro.red:active{ background: #e6433d; border-color: #961a07; -webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #961a07; -moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #961a07; box-shadow: 0 1px 0 #fff, inset 0 0 5px #961a07; } /* ----- ---- --- -- - Orange - -- --- ---- ----- */ .buttonPro.orange{ background: #ee8f1f; background: -webkit-gradient(linear, left top, left bottom, from(#f5b026), to(#f48423)); background: -moz-linear-gradient(top, #f5b026, #f48423); border-color: #e6791c #e6791c #d86f15; color: #fff; text-shadow: 0 1px 1px #b85300; -webkit-box-shadow: 0 1px 2px #d7e9a4, inset 0 1px 0 #f8d898; -moz-box-shadow: 0 1px 2px #d7e9a4, inset 0 1px 0 #f8d898; box-shadow: 0 1px 2px #d7e9a4, inset 0 1px 0 #f8d898; } .buttonPro.orange:hover, .buttonPro.orange:focus{ background: #e38512; background: -webkit-gradient(linear, left top, left bottom, from(#ffbb33), to(#eb7b1a)); background: -moz-linear-gradient(top, #ffbb33, #eb7b1a); border-color: #d0680c; -webkit-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ffdf9e; -moz-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ffdf9e; box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ffdf9e; } .buttonPro.orange:active{ background: #ee8f1f; border-color: #d0680c; -webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #d0680c; -moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #d0680c; box-shadow: 0 1px 0 #fff, inset 0 0 5px #d0680c; } /* ----- ---- --- -- - Yellow - -- --- ---- ----- */ .buttonPro.yellow{ background: #f9e327; background: -webkit-gradient(linear, left top, left bottom, from(#fceb4c), to(#ebd611)); background: -moz-linear-gradient(top, #fceb4c, #ebd611); border-color: #dcc700 #dcc700 #c2b00b; color: #444; text-shadow: 0 1px 1px #ffff98; -webkit-box-shadow: 0 1px 2px #d7e9a4, inset 0 1px 0 #fee395; -moz-box-shadow: 0 1px 2px #d7e9a4, inset 0 1px 0 #fee395; box-shadow: 0 1px 2px #d7e9a4, inset 0 1px 0 #fee395; } .buttonPro.yellow:hover, .buttonPro.yellow:focus{ background: #ebd611; background: -webkit-gradient(linear, left top, left bottom, from(#fffa58), to(#e1cd00)); background: -moz-linear-gradient(top, #fffa58, #e1cd00); border-color: #cebb10; -webkit-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #fee395; -moz-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #fee395; box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #fee395; } .buttonPro.yellow:active{ background: #f9e327; border-color: #cebb10; -webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #cebb10; -moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #cebb10; box-shadow: 0 1px 0 #fff, inset 0 0 5px #cebb10; } /* ----- ---- --- -- - Pink - -- --- ---- ----- */ .buttonPro.pink{ background: #f87bca; background: -webkit-gradient(linear, left top, left bottom, from(#f87bca), to(#ec56b5)); background: -moz-linear-gradient(top, #f87bca, #ec56b5); border-color: #e54aac #e54aac #cc3695; color: #fff; text-shadow: 0 1px 1px #c02589; -webkit-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #f1b9dd; -moz-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #f1b9dd; box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #f1b9dd; } .buttonPro.pink:hover, .buttonPro.pink:focus{ background: #f075c3; background: -webkit-gradient(linear, left top, left bottom, from(#ff85d3), to(#e34dac)); background: -moz-linear-gradient(top, #ff85d3, #e34dac); border-color: #c02589; -webkit-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #f1b9dd; -moz-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #f1b9dd; box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #f1b9dd; } .buttonPro.pink:active{ background: #f87bca; border-color: #c02589; -webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #c02589; -moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #c02589; box-shadow: 0 1px 0 #fff, inset 0 0 5px #c02589; } /* ----- ---- --- -- - Purple - -- --- ---- ----- */ .buttonPro.purple{ background: #995dc8; background: -webkit-gradient(linear, left top, left bottom, from(#c785e5), to(#995dc8)); background: -moz-linear-gradient(top, #c785e5, #995dc8); border-color: #7c45aa #7c45aa #5d288a; color: #fff; text-shadow: 0 1px 1px #370662; -webkit-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #ce8ded; -moz-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #ce8ded; box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #ce8ded; } .buttonPro.purple:hover, .buttonPro.purple:focus{ background: #8b50ba; background: -webkit-gradient(linear, left top, left bottom, from(#cc8aea), to(#884eb8)); background: -moz-linear-gradient(top, #cc8aea, #884eb8); border-color: #5d288a; -webkit-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ce8ded; -moz-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ce8ded; box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #ce8ded; } .buttonPro.purple:active{ background: #995dc8; border-color: #5d288a; -webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #5d288a; -moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #5d288a; box-shadow: 0 1px 0 #fff, inset 0 0 5px #5d288a; } /* ----- ---- --- -- - Grey - -- --- ---- ----- */ .buttonPro.grey{ background: #969696; background: -webkit-gradient(linear, left top, left bottom, from(#ababab), to(#818181)); background: -moz-linear-gradient(top, #ababab, #818181); border-color: #a0a0a0 #7c7c7c #717171; color: #fff; text-shadow: 0 1px 1px #444; -webkit-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #bebebe; -moz-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #bebebe; box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #bebebe; } .buttonPro.grey:hover, .buttonPro.grey:focus{ background: #868686; background: -webkit-gradient(linear, left top, left bottom, from(#b0b0b0), to(#6f6f6f)); background: -moz-linear-gradient(top, #b0b0b0, #6f6f6f); border-color: #666 #666 #606060; -webkit-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #bebebe; -moz-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #bebebe; box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #bebebe; } .buttonPro.grey:active{ background: #909090; border-color: #606060; -webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #606060; -moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #606060; box-shadow: 0 1px 0 #fff, inset 0 0 5px #606060; } /* ----- ---- --- -- - Black - -- --- ---- ----- */ .buttonPro.black{ background: #525252; background: -webkit-gradient(linear, left top, left bottom, from(#5e5e5e), to(#434343)); background: -moz-linear-gradient(top, #5e5e5e, #434343); border-color: #4c4c4c #313131 #1f1f1f; color: #fff; text-shadow: 0 1px 1px #2e2e2e; -webkit-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #868686; -moz-box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #868686; box-shadow: 0 1px 2px #eaeaea, inset 0 1px 0 #868686; } .buttonPro.black:hover, .buttonPro.black:focus{ background: #4b4b4b; background: -webkit-gradient(linear, left top, left bottom, from(#686868), to(#363636)); background: -moz-linear-gradient(top, #686868, #363636); border-color: #313131; -webkit-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #868686; -moz-box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #868686; box-shadow: 0 0 1px #d6d6d6, inset 0 1px 0 #868686; } .buttonPro.black:active{ background: #525252; border-color: #313131; -webkit-box-shadow: 0 1px 0 #fff, inset 0 0 5px #313131; -moz-box-shadow: 0 1px 0 #fff, inset 0 0 5px #313131; box-shadow: 0 1px 0 #fff, inset 0 0 5px #313131; } /* -------------------------------------------------------------- ------ ----- ---- --- -- - Extras - -- --- ---- ----- ------ -------------------------------------------------------------- */ /* ----- ---- --- -- - Google Buttons - -- --- ---- ----- */ .googleButton{ display: inline-block; text-decoration: none; outline: none; padding: 7px; font: normal 15px/1em arial,sans-serif; color: #000; background: #ededed; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1', endColorstr='#dfdfdf'); background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#dfdfdf)); background: -moz-linear-gradient(top, #f1f1f1, #dfdfdf); border-width: 1px; border-style: solid; border-color: #cccccc #9b9b9b #999999 #cdcdcd; -webkit-box-shadow: 1px 1px 0 #e7e7e7, inset 0 1px 0 #fff, inset 0 -1px 0 #d7d7d7; -moz-box-shadow: 1px 1px 0 #e7e7e7, inset 0 1px 0 #fff, inset 0 -1px 0 #d7d7d7; box-shadow: 1px 1px 0 #e7e7e7, inset 0 1px 0 #fff, inset 0 -1px 0 #d7d7d7; } .googleButton:hover{ color: #000; } .googleButton:active{ color: #000; background: #ccc; filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); border-color: #ccc #999 #999 #ccc; -webkit-box-shadow: 1px 1px 0 #e7e7e7; -moz-box-shadow: 1px 1px 0 #e7e7e7; box-shadow: 1px 1px 0 #e7e7e7; } /* ----- ---- --- -- - Twitter Simple Button - -- --- ---- ----- */ .twitterButton{ display: inline-block; text-decoration: none; outline: none; padding: 6px 9px; font: 300 15px/1em 'Helvetica Neue', Arial, 'Lucida Grande', sans-serif; color: #333; text-shadow: 0 1px 0 #f0f0f0; background: #ebebeb; background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#dddddd)); background: -moz-linear-gradient(top, #fefefe, #dddddd); border-width: 1px; border-style: solid; border-color: #bbb #bbb #999; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 0 #f8f8f8; -moz-box-shadow: 0 1px 0 #f8f8f8; box-shadow: 0 1px 0 #f8f8f8; } .twitterButton:hover, .twitterButton:focus{ color: #333; text-shadow: 0 1px 0 #f0f0f0; background: #e5e5e5; background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#dddddd)); background: -moz-linear-gradient(top, #f0f0f0, #dddddd); border-color: #999 #999 #666; } .twitterButton:active{ color: #333; text-shadow: none; background: #ddd; border-color: #999 #999 #666; } /* ----- ---- --- -- - Twitter Follow Button - -- --- ---- ----- */ .twitterFollowButton{ display: inline-block; text-decoration: none; outline: none; padding: 7px 10px; font: bold 12px/1em 'Helvetica Neue', Arial, 'Lucida Grande', sans-serif; color: #fff; background: #00AE3E; background: -webkit-gradient(linear, left top, left bottom, from(#53d874), to(#00ae3e)); background: -moz-linear-gradient(top, #53d874, #00ae3e); border-width: 1px; border-style: solid; border-color: #339933 #339933 #277827; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 0 #f8f8f8; -moz-box-shadow: 0 1px 0 #f8f8f8; box-shadow: 0 1px 0 #f8f8f8; } .twitterFollowButton:hover, .twitterFollowButton:focus{ color: #fff; background: #dc4b4b; background: -webkit-gradient(linear, left top, left bottom, from(#f15c5d), to(#c63738)); background: -moz-linear-gradient(top, #f15c5d, #c63738); border-color: #aa3333 #aa3333 #962c2c; } .twitterFollowButton:active{ background: #c63738; } /* ----- ---- --- -- - Facebook Simple Button - -- --- ---- ----- */ .facebookButton{ display: inline-block; text-decoration: none; outline: none; padding: 5px 6px; font: bold 11px/1em 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; color: #333; background: #ececec; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f6f6', endColorstr='#e0e0df'); background: -webkit-gradient(linear, left top, left bottom, from(#f5f6f6), to(#e0e0df)); background: -moz-linear-gradient(top, #f5f6f6, #e0e0df); border-width: 1px; border-style: solid; border-color: #999 #999 #888; -webkit-box-shadow: 0 1px 0 #d9d9d9, inset 0 1px 0 #fff; -moz-box-shadow: 0 1px 0 #d9d9d9, inset 0 1px 0 #fff; box-shadow: 0 1px 0 #d9d9d9, inset 0 1px 0 #fff; } .facebookButton:hover{ color: #333; } .facebookButton:active{ color: #333; background: #dddddd; filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); border-color: #999; -webkit-box-shadow: 0 1px 0 #eaeaea; -moz-box-shadow: 0 1px 0 #eaeaea; box-shadow: 0 1px 0 #eaeaea; } /* ----- ---- --- -- - Facebook Confirm Button - -- --- ---- ----- */ .facebookConfirmButton{ display: inline-block; text-decoration: none; outline: none; padding: 5px 6px; font: bold 11px/1em 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; color: #fff; background: #5e77aa; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#637bad', endColorstr='#5972a7'); background: -webkit-gradient(linear, left top, left bottom, from(#637bad), to(#5972a7)); background: -moz-linear-gradient(top, #637bad, #5972a7); border-width: 1px; border-style: solid; border-color: #29447e #29457f #1a356e; -webkit-box-shadow: 0 1px 0 #dddddd, inset 0 1px 0 #8a9cc2; -moz-box-shadow: 0 1px 0 #dddddd, inset 0 1px 0 #8a9cc2; box-shadow: 0 1px 0 #dddddd, inset 0 1px 0 #8a9cc2; } .facebookConfirmButton:hover{ color: #fff; } .facebookConfirmButton:active{ color: #fff; background: #4f6aa3; filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); border-color: #29447e; -webkit-box-shadow: 0 1px 0 #eaeaea; -moz-box-shadow: 0 1px 0 #eaeaea; box-shadow: 0 1px 0 #eaeaea; } /* ----- ---- --- -- - Wordpress Simple Button - -- --- ---- ----- */ .wordpressButton{ display: inline-block; text-decoration: none; outline: none; padding: 6px 11px; font: normal 11px/1em "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif; color: #464646; background: #fff; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f1f1f1)); background: -moz-linear-gradient(top, #fff, #f1f1f1); border: 1px solid #bbb; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; } .wordpressButton:hover, .wordpressButton:focus{ color: #000; border-color: #666; } .wordpressButton:active{ background: #eee; background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fbfbfb)); background: -moz-linear-gradient(top, #ededed, #fbfbfb); color: #000; border-color: #666; } /* ----- ---- --- -- - Wordpress Confirm Button - -- --- ---- ----- */ .wordpressConfirmButton{ display: inline-block; text-decoration: none; outline: none; padding: 6px 11px; font: bold 11px/1em "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); background: #247ca4; background: -webkit-gradient(linear, left top, left bottom, from(#298cba), to(#206d92)); background: -moz-linear-gradient(top, #298cba, #206d92); border: 1px solid #298CBA; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; } .wordpressConfirmButton:hover, .wordpressConfirmButton:focus{ color: #eaf2fa; border-color: #13455b; } .wordpressConfirmButton:active{ background: #216f94; background: -webkit-gradient(linear, left top, left bottom, from(#1d6385), to(#2683ae)); background: -moz-linear-gradient(top, #1d6385, #2683ae); color: #eaf2fa; border-color: #13455b; }