/* Theme Name: MikeAndrewsOpen V3 Theme URI: Author: Whiteboard Development Team Author URI: Description: Version: 3.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: Text Domain: MikeAndrewsOpen This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ /* =Reset -------------------------------------------------------------- */ /* Reset.css */ /*====================================== reset.css is here ========================================*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0;} table { border-collapse:collapse; border-spacing:0;} fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal;} ol,ul { list-style:none;} caption,th {text-align:left;} h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:bold;} q:before,q:after {content:'';} abbr,acronym { border:0;} .clear{clear:both; font-size:1px;line-height:1px; display:block; height:0;} .clrflt{clear:both;} .last {margin:0 !important;} .pad_last{padding:0 !important;} .no_bg {background:none !important;} /**************************************************************************************/ a {color:#000; text-decoration:none; outline:0 none;} a:hover {color:#000; text-decoration:none;} h1 {font-size:24px;} h2 {font-size:22px;} h3 {font-size:18px;} h4 {font-size:16px;} h5 {font-size:14px;} h6 {font-size:12px;} /*----------------------------------------------------------------------------------*/ html { -webkit-text-size-adjust: 100%;} body {color:#b1b1b1; font-family:"Arial", Verdana, Tahoma; font-size:12px;} .flt_lt {float:left; display:inline;} .flt_rt {float:right; display:inline;} /* ---------------------------------------------------------------------------------*/ @font-face { font-family: 'Cardo'; src: url('/Fonts/Cardo/Cardo.eot?#iefix') format('embedded-opentype'), url('/Fonts/Cardo/Cardo.woff') format('woff'), url('/Fonts/Cardo/Cardo.ttf') format('truetype'), url('/Fonts/Cardo/Cardo.svg#Cardo') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Cardo-Bold'; src: url('/Fonts/Cardo-Bold/Cardo-Bold.eot?#iefix') format('embedded-opentype'), url('/Fonts/Cardo-Bold/Cardo-Bold.woff') format('woff'), url('/Fonts/Cardo-Bold/Cardo-Bold.ttf') format('truetype'), url('/Fonts/Cardo-Bold/Cardo-Bold.svg#Cardo-Bold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Cardo-Italic'; src: url('/Fonts/Cardo-Italic/Cardo-Italic.eot?#iefix') format('embedded-opentype'), url('/Fonts/Cardo-Italic/Cardo-Italic.otf') format('opentype'), url('/Fonts/Cardo-Italic/Cardo-Italic.woff') format('woff'), url('/Fonts/Cardo-Italic/Cardo-Italic.ttf') format('truetype'), url('/Fonts/Cardo-Italic/Cardo-Italic.svg#Cardo-Italic') format('svg'); font-weight: normal; font-style: normal; } /* ----------------------- layout ----------*/ .wrapper { width:100%; margin:0 auto;} .container { width:1200px; margin:0 auto; } /*-------------------------------------------*/ .menu { position:absolute; top:112px; right:15px; display:none; cursor:pointer; } /* ------------------ HEADER HERE -------------------*/ .header { width:100%; background:#ffffff; display:block; padding:0px 0 23px 0; margin:0;} .header_in { width:1200px; margin:0 auto; display:block;} #logo { width:416px; float:left; display:inline-block; padding:0; margin:10px 0 0 7px;} #logo a { display:block; padding:0; margin:0;} .header_in_rt { width:552px; float:right; display:inline-block; padding:0; margin:0 0 0px 0; text-align:right;} .header_in_rt span { display:block; padding:0; margin:0;} /* ---------------------------------------------------------*/ /* ------------------------- NAVIGATION HERE ---------------*/ #navigation { width:100%;position:relative; background:#fff;z-index:999999999; position:relative;} #nav { width:810px; float:right; display:inline-block; background:#fff; padding:0; margin:0; } #nav ul { display:inline-block; padding:0; margin:0;} #nav ul li { float:left; display:inline-block; padding:0; margin:0 0px 0 0;} #nav ul li a { font-family: 'Open Sans', sans-serif;font-size:12px; line-height:18px; color:#7a7b7b; font-weight:700; display:block; letter-spacing:2.1px; padding:13px 10px 17px 11px; text-transform:uppercase; } #nav ul li a span {} #nav ul li a:hover { background:#f9f9f9;color:#000000; } #nav ul li.current-menu-item a { color:#a12021;} #nav ul li:hover a { background:#f9f9f9;color:#000000;} #nav ul li .inner_nav { width:100%; background:#f9f9f9 !important; display:none; padding:19px 0 19px 0; margin:0; position:absolute; top:48px; left:0; z-index:9999; } #nav ul li .inner_nav_in { width:1200px; text-align:center; margin:0 auto; display:block;} #nav ul li .inner_nav_in ul { display:inline-block !important; padding:0 !important; margin:0 0 0 22px !important;} #nav ul li .inner_nav_in ul li { float:left ; display:inline-block; padding:0; margin:0 50px 0 0;} #nav ul li .inner_nav_in ul li a { font-family: 'Open Sans', sans-serif;font-size:14px; line-height:16px; color:#a12021; font-weight:400; display:block; padding:0 !important; margin:0 !important; letter-spacing:0.1px;} #nav ul li .inner_nav_in ul li a:hover, .inner_nav_in ul li a.active { color:#000000;} #nav ul li:hover .inner_nav { display:block;} /* ---------------------------------------------------------*/ .banner { width:100%; background:url(images/blue_ban_img.jpg) no-repeat center top; background-size:cover;padding:0; position:relative; z-index:999;} .banner_in { width:420px; margin:0px; display:inline-block; padding:50px 0 50px 0; position:relative;} .banner_in h5 { font-family: 'Open Sans', sans-serif;font-size:34.97px; line-height:36px; color:#ffffff; font-weight:700; display:block;} .banner_in h1 { font-family: 'Cardo-Bold';font-size:70.94px; line-height:59px; color:#ffffff; font-weight:normal; display:block; letter-spacing:2.1px; word-spacing:4.1px;} .banner_in h2 { font-family: 'Cardo';font-size:57.95px; line-height:60px; color:#ffffff; font-weight:normal; display:block; letter-spacing:2.9px; border-bottom:1px solid #fff; padding:0 0 20px 0; margin:0 0 25px 6px;} .banner_in p { font-family: 'Open Sans';font-size:16px; text-align:justify; line-height:24px; color:#ffffff; display:block; font-weight:normal; padding:0; margin:30px 0 32px 0; text-shadow: 2px -1px 2px rgba(0, 0, 0, 1);} .banner_in a { width:340px; background:#a12021; font-family: 'Open Sans', sans-serif;font-size:17.15px; line-height:20px; color:#ffffff; font-weight:700; display:block; padding:15px 0 15px 19px; margin:0; letter-spacing:0.1px;} .banner span { position:absolute;left:45.5%;bottom:47px; display:block;} .register { width:115px; display:block; position:fixed; top:319px; right:0px; background:#a12021; border:1px solid #ffffff; padding:15px 0 15px 0; z-index:99999999; } .register a { font-family: 'Open Sans', sans-serif;font-size:20.01px; line-height:24px; color:#f9f9f9; font-weight:700; display:block; text-align:center;} .register span { font-family: 'Open Sans', sans-serif;font-size:16.68px; line-height:18px; color:#f9f9f9; font-weight:300; display:block; font-style:italic; text-align:center;} /* ------------------------ MIAN CONTENT HERE --------------*/ .main_content { width:100%; /*background:url(images/transprent_bg.png) no-repeat center top;*/ padding:0; margin:0px 0 0 0; padding:50px 0 41px 0; position:relative; z-index:9999;} .main_content_main { width:100%; padding:0px; margin:0; background:#fff;} .main_content_in { width:1200px; margin:0 auto; padding:0; display:block;} .section1 { width:595px; float:left; background:url(images/section1_img1.png) no-repeat center top; display:block; padding:21px 0 0 30px; margin:0 0 50px 15px; position:relative; min-height:410px;} .section1 h3 { font-family: 'Cardo';font-size:68px; line-height:66px; color:#ffffff; font-weight:normal; display:none; font-weight:normal; padding:0; letter-spacing:2.1px;} .section1 h3 span { font-family: 'Open Sans', sans-serif;font-size:33px; line-height:31px; color:#ffffff; font-weight:700; display:block; padding:0 0 0 69px; background:url(images/br_bg.png) no-repeat left 16px;} .section1_hr { width:592px; position:absolute; top:0; left:0; display:block; padding:21px 0 27px 32px;} .section1_hr p { font-family: 'Open Sans', sans-serif;font-size:14px; line-height:19px; color:#ffffff; font-weight:400; display:none; padding:45px 9px 0 0; margin:0 0 50px 0;} .section1_hr a { font-family: 'Open Sans', sans-serif;font-size:15px; line-height:17px; color:#ffffff; font-weight:400; display:none; padding:15px 0 15px 0; margin:0; background:#a12021; text-transform:uppercase; width:140px; text-align:center; border:1px solid #ffffff;} .section1:hover .section1_hr { display:block; background:url(images/pink_bg1.png) repeat;} .section1:hover .section1_hr p { display:block;} .section1:hover .section1_hr a { display:block;} .section1:hover h3 { display:block;} .section1:hover .section1 h3 span { display:block;} .section1:hover .themike { display:none;} .section2 { width:487px; background:url(images/section2_img1.png) no-repeat center top; float:right; display:inline-block; position:relative; min-height:257px; padding:174px 0 0 57px; margin-bottom:50px;} .section2 h2 { font-family: 'Cardo-Bold';font-size:41px; font-weight:bold; line-height:40px; color:#ffffff; display:block; padding:0 3px 19px 19px; margin:0; letter-spacing:2.1px;} .section2_hr { width:506px; display:block; position:absolute; top:0; left:0; padding:174px 0 0 38px; min-height:257px;} .section2_hr span { font-family: 'Open Sans', sans-serif;font-size:14px; line-height:17px; color:#ffffff; font-weight:400; display:none; padding:0 0 24px 0; margin:0;} .section2_hr a { font-family: 'Open Sans', sans-serif;font-size:15px; line-height:17px; color:#ffffff; font-weight:400; display:none; padding:14px 0 14px 0; margin:0 0 0 106px; background:#323334; border:1px solid #fff; width:250px; text-align:center;} .section2:hover .section2_hr { display:block; background:url(images/gray_bg.png) repeat; } .section2:hover .section2_hr span { display:block;} .section2:hover .section2_hr a { display:block;} .section3 { width:595px; background:url(images/section3_img1.png) no-repeat center top; display:inline-block; padding:21px 0 0 30px; margin:0 0 40px 15px; position:relative; min-height:305px;} .section3 h2 { font-family: 'Cardo-Bold';font-size:47px; font-weight:bold; line-height:50px; color:#ffffff; display:block; padding:0 0 10px 0; margin:0; margin-top:110px; text-align:center;} .section3_hr { width:562px; position:absolute; top:0; left:0; display:block;padding:21px 30px 35px 30px;} .section3_hr span { font-family: 'Open Sans', sans-serif;font-size:14px; line-height:17px; color:#ffffff; font-weight:400; display:none; padding:0 0 21px 0; margin:0; text-align:center;} .section3_hr a { font-family: 'Open Sans', sans-serif;font-size:15px; line-height:17px; color:#ffffff; font-weight:400; display:none; padding:14px 0 14px 0; margin:0 auto; background:#323334; border:1px solid #fff; width:120px; text-align:center;} .section3:hover .section3_hr { display:block;background:url(images/gray_bg1.png) repeat; } .section3:hover .section3_hr span { display:block;} .section3:hover .section3_hr a { display:block;} .section4 { width:541px; float:right; display:inline-block; padding:0px; margin:0 0 40px 15px; background:#f9f9f9; } .oursponcers { width:289px; float:left; display:inline-block; padding:36px 0 0 0; margin:0;} .oursponcers h3 { font-family: 'Cardo-Bold';font-size:35px; line-height:37px; color:#000000; font-weight:normal; display:block; padding:0 0 10px 0; margin:0 ; word-spacing:4.1px; letter-spacing:2.1px;} .oursponcers a { font-family: 'Open Sans', sans-serif;font-size:15px; line-height:17px; color:#000000; font-weight:400; display:block; padding:14px 0 14px 0; border:1px solid #000000; width:204px; text-align:center; } .university { width:260px; float:right; display:inline-block;} .university a { display:block; padding:0;margin:0;} .section5 { width:588px; height:220px; float:left; display:inline-block; padding:40px 0 0 32px; margin:10px 0 0 15px; background:#f9f9f9; padding:40px 0 48px 32px;} .oursponcers { width:289px; float:left; display:inline-block; padding:36px 0 0 0; margin:0;} .oursponcers h3 { font-family: 'Cardo-Bold';font-size:35px; line-height:37px; color:#000000; font-weight:normal; display:block; padding:0 0 10px 0; margin:0; word-spacing:4.1px; letter-spacing:2.1px;} .oursponcers a { font-family: 'Open Sans', sans-serif;font-size:15px; line-height:17px; color:#000000; font-weight:400; display:block; padding:14px 0 14px 0; border:1px solid #000000; width:204px; text-align:center; } .university { width:260px; float:right; display:inline-block;} .university a { display:block; padding:0;margin:0;} .section6 { width:541px; display:inline-block; float:right; padding:0px; margin:0; position:relative; } .section6 h2 { font-family: 'Cardo-Bold';font-size:47px; line-height:50px; color:#ffffff; font-weight:normal; display:block; padding:0 0 10px 0; margin:0; text-align:center;} .section6_hr { width:541px; display:block; position:absolute; top:0; left:0; padding:64px 0 27px 0;} .section6_hr span { font-family: 'Open Sans', sans-serif;font-size:14px; line-height:17px; color:#ffffff; font-weight:400; display:none; padding:0 0 21px 0; margin:0; text-align:center;} .section6_hr a { font-family: 'Open Sans', sans-serif;font-size:15px; line-height:17px; color:#ffffff; font-weight:400; display:none; padding:14px 0 14px 0; margin:0 auto; background:#323334; border:1px solid #fff; width:120px; text-align:center;} .section6:hover .section6_hr { display:block;background:url(images/gray_bg1.png) repeat; } .section6:hover .section6_hr span { display:block;} .section6:hover .section6_hr a { display:block;} .section7 { width:588px; float:left; display:inline-block; padding:0px; margin:0;margin-top: 50px; margin-left: 20px; } .section8 { width:541px; display:inline-block; float:right; padding:0px; margin:0; position:relative; } /* ---------------------------------------------------------*/ /* ------------------ FOOTER HERE --------------------------*/ .footer { width:100%; background:url(images/ft_bg.jpg) no-repeat center top #fff; display:block; padding:37px 0 16px 0; margin:0; } .footer_in { width:1200px; margin:0 auto; display:block;} .footer_in a { display:block; padding:0 0 0 96px; margin:0 auto 18px; text-align:center;} .footer_in p { font-family: 'Open Sans', sans-serif;font-size:14px; line-height:17px; color:#ffffff; font-weight:700; display:block; padding:0 0 0 72px;text-align:center; margin:0 auto;} .footer_in p a { font-family: 'Cardo-Bold';font-size:14px; line-height:16px; color:#ffffff; font-weight:normal; display:inline-block; padding:0; margin:0; } .copy {} /* ---------------------------------------------------------*/ #aboutmike { width: 75%; float: right; padding-left: 20px; padding-bottom: 40px; } .footer { display:inline-block; } .dvinner { float:left; width: 100%; background: transparent url("images/blue_ban_img.jpg") no-repeat scroll center top; padding: 98px 0px 139px; position: relative; z-index: 999; margin:0; padding:0; } .dvinner .main_content_main { margin:0 auto; max-width:1200px; } .dvinner .container { float:left; padding:2%; margin-bottom:20px; width:96%; min-height: 575px; background-color:#fff; opacity:0.9; color:#7A7B7B; font-size:16px; line-height:20px; -webkit-box-shadow: 0px 2px 17px 1px #ccc; -moz-box-shadow: 0px 2px 17px 1px #ccc; box-shadow: 0px 2px 17px 1px #ccc; } .dvinner .container p { margin-bottom:15px; } .dvinner .container h1.entry-title { padding-bottom:20px; color:#A12021; } .alignleft { float: left; } .dvinner .container #center { float:left; width:40%; } .dvinner .container #center2 { float:left; } #mc_embed_signup { width:400px; max-width:90%; } #mc_embed_signup .mc-field-group input { max-width:96%; } .dvinner .container iframe, .dvinner .container img, #aboutus_slider { max-width:100% !important; } .banner_in h3 { font-family: 'Cardo';font-size:103px; line-height:103px; color:#ffffff; font-weight:normal; display:block; font-weight:normal; padding:0;} .banner_in h3 span { position:relative; left:0; bottom:0; font-family: 'Open Sans', sans-serif;font-size:50px; line-height:50px; color:#ffffff; font-weight:600; display:block; padding:0 0 0 109px; background:url(images/br_bg2.png) no-repeat left 25px;} .banner_in a.btnBan { width:135px; background:#a12021; font-family: 'Open Sans', sans-serif;font-size:19px; font-weight:normal; line-height:20px; color:#ffffff; display:block; padding:10px 0 10px 0px; margin:0 auto; margin-top:40px; letter-spacing:0.1px; border:solid 1px #fff; text-align:center;} .banner_in_red { float:right; padding-top:10px; width:260px; height:550px; color:#fff; font-family:'Open Sans'; font-size:15px; text-align:center; background-color:#a12021; } .btnBanBlack { width:180px; background:#323334; font-family: 'Open Sans', sans-serif;font-size:15px; font-weight:normal; line-height:16px; color:#ffffff; display:block; padding:10px 0 10px 0px; margin:0 auto; margin-top:7px; letter-spacing:0.1px; border:solid 1px #fff; text-align:center; } .themike { margin-top:130px; } .redTitle { margin-top:5px; width:100%; text-align:center; font-family: 'Cardo'; font-size:20px; text-transform:uppercase; line-height:20px; color:#a12021; } 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; -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: 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; } button.minimal:hover { background: #d9d9d9; -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; } button.minimal:active { background: #d0d0d0; -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; } /* clean gray *******************************************************************************/ button.clean-gray { 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); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc'); border: 1px solid #ccc; border-bottom: 1px solid #bbb; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; color: #333; 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; } button.clean-gray:hover { 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); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dddddd', EndColorStr='#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; -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-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); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#7fbf4d', EndColorStr='#63a62f'); border: 1px solid #63a62f; border-bottom: 1px solid #5b992b; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -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: 16px "Trebuchet MS", Arial, Helvetica, sans-serif; text-align: center; padding-top: 10px; padding-right: 20px; padding-bottom: 8px; padding-left: 20px; } button.cupid-green:hover { 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); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#76b347', EndColorStr='#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; } button.cupid-green:active { border: 1px solid #5b992b; border-bottom: 1px solid #538c27; -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 green (inspired by okcupid.com) *******************************************************************************/ button.cupid-green2 { 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); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#7fbf4d', EndColorStr='#63a62f'); border: 1px solid #63a62f; border-bottom: 1px solid #5b992b; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -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: bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif; text-align: center; padding-top: 10px; padding-right: 30px; padding-bottom: 8px; padding-left: 30px; margin: 9px; min-width:400px; } button.cupid-green2:hover { 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); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#76b347', EndColorStr='#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; } button.cupid-green2:active { border: 1px solid #5b992b; border-bottom: 1px solid #538c27; -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-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); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d7e5f5', EndColorStr='#cbe0f5'); border-top: 1px solid #abbbcc; border-left: 1px solid #a7b6c7; border-bottom: 1px solid #a1afbf; border-right: 1px solid #a7b6c7; -webkit-border-radius: 12px; -moz-border-radius: 12px; -ms-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; -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: 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; } button.cupid-blue:hover { 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); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ccd9e8', EndColorStr='#c1d4e8'); border-top: 1px solid #a1afbf; border-left: 1px solid #9caaba; border-bottom: 1px solid #96a3b3; border-right: 1px solid #9caaba; -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; } button.cupid-blue:active { border: 1px solid #8c98a7; -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) *******************************************************************************/ button.blue-pill { 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); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#a5b8da', EndColorStr='#7089b3'); border-top: 1px solid #758fba; border-right: 1px solid #6c84ab; border-bottom: 1px solid #5c6f91; border-left: 1px solid #6c84ab; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; -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: 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 1px #64799e; text-transform: uppercase; width: 150px; } button.blue-pill:hover { 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); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9badcc', EndColorStr='#687fa6'); border-top: 1px solid #6d86ad; border-right: 1px solid #647a9e; border-bottom: 1px solid #546685; border-left: 1px solid #647a9e; -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; } button.blue-pill:active { border: 1px solid #546685; -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-color: #A01D0A; background-image: -webkit-gradient(linear, left top, left bottom, from(#A01D0A 0), to(#A01D0A 50%)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #A01D0A 0, #A01D0A 50%, #811707 50%, #811707 100%); background-image: -moz-linear-gradient(top, #A01D0A 0, #A01D0A 50%, #811707 50%, #811707 100%); background-image: -ms-linear-gradient(top, #A01D0A 0, #A01D0A 50%, #811707 50%, #811707 100%); background-image: -o-linear-gradient(top, #A01D0A 0, #A01D0A 50%, #811707 50%, #811707 100%); background-image: linear-gradient(top, #A01D0A 0, #A01D0A 50%, #811707 50%, #811707 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#A01D0A', EndColorStr='#811707',GradientType=0); border: 0; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; color: #fcfcfc; font: 16px "Trebuchet MS", Arial, Helvetica, sans-serif; padding: 3px 10px 4px 10px; text-align: center; text-shadow: 0px -1px 1px #a64767; width: 200px; } button.dribbble:hover { background-color: #D7270F; background-image: -webkit-gradient(linear, left top, left bottom, from(#b31f0a 0), to(#b31f0a 50%)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #b31f0a 0, #b31f0a 50%, #A01D0A 50%, #A01D0A 100%); background-image: -moz-linear-gradient(top, #b31f0a 0, #b31f0a 50%, #A01D0A 50%, #A01D0A 100%); background-image: -ms-linear-gradient(top, #b31f0a 0, #b31f0a 50%, #A01D0A 50%, #A01D0A 100%); background-image: -o-linear-gradient(top, #b31f0a 0, #b31f0a 50%, #A01D0A 50%, #A01D0A 100%); background-image: linear-gradient(top, #b31f0a 0, #b31f0a 50%, #A01D0A 50%, #A01D0A 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#b31f0a', EndColorStr='#A01D0A',GradientType=0); cursor: pointer; } button.dribbble:active { background-color: #D7270F; background-image: -webkit-gradient(linear, left top, left bottom, from(#b31f0a 0), to(#b31f0a 50%)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #b31f0a 0, #b31f0a 50%, #A01D0A 50%, #A01D0A 100%); background-image: -moz-linear-gradient(top, #b31f0a 0, #b31f0a 50%, #A01D0A 50%, #A01D0A 100%); background-image: -ms-linear-gradient(top, #b31f0a 0, #b31f0a 50%, #A01D0A 50%, #A01D0A 100%); background-image: -o-linear-gradient(top, #b31f0a 0, #b31f0a 50%, #A01D0A 50%, #A01D0A 100%); background-image: linear-gradient(top, #b31f0a 0, #b31f0a 50%, #A01D0A 50%, #A01D0A 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#b31f0a', EndColorStr='#A01D0A',GradientType=0); } /* slick black *******************************************************************************/ button.slick-black { 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%); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#b31f0a', EndColorStr='#A01D0A',GradientType=0); border: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -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: lighter 22px "helvetica neue", helvetica, arial, sans-serif; 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-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-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-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%); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee432e', EndColorStr='#b51700',GradientType=0); border: 1px solid #951100; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -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: 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, 0.8); width: 150px; } button.thoughtbot:hover { 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%); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#db504d', EndColorStr='#cb0500',GradientType=0); cursor: pointer; } button.thoughtbot:active { 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%); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d43c28', EndColorStr='#9c1500',GradientType=0); -webkit-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 *******************************************************************************/ button.punch { background: #4162a8; border-top: 1px solid #38538c; border-right: 1px solid #1f2d4d; border-bottom: 1px solid #151e33; border-left: 1px solid #1f2d4d; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -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: 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; } button.punch:hover { -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 { -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-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%); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; color: #fff; 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; } button.blue-candy:hover { 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; } 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-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: 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; } button.purple-candy:hover { 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; } 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-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; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -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: bold 12px "helvetica neue", helvetica, arial, sans-serif; padding: 7px 0; text-shadow: 0 -1px 1px #1a5ad9; width: 150px; } button.shiny-blue:hover { 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; -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-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; -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; border-radius: 16px; -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: normal 11px "lucida grande", sans-serif; line-height: 1; padding: 3px 5px; text-align: center; text-shadow: 0 -1px 1px #3275bc; width: 112px; -webkit-background-clip: padding-box; } button.download-itunes:hover { 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; -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; } button.download-itunes:active { background: #3282d3; border: 1px solid #154c8c; border-bottom: 1px solid #0e408e; -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; } button[disabled].download-itunes, button[disabled].download-itunes:hover, button[disabled].download-itunes:active { 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; -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; } button.download-itunes::-moz-focus-inner { border: 0; padding: 0; } /* skip (inspired by okcupid iphone interface) *******************************************************************************/ button.skip { 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; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -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: 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; } button.skip:hover { 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 { -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; } /* minimal indent (inspired by okcupid iphone interface) *******************************************************************************/ div.indent { 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); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e2e2e2', EndColorStr='#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; } button.minimal-indent { 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; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -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; } button.minimal-indent:hover { 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 { -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; } /* webkit badge *******************************************************************************/ button.webkit-badge { 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)); color: #fff; font-family: "hoefler text", georgia, serif; font-size: 30px; font-style: italic; font-weight: lighter; height: 88px; line-height: 1; padding: 0; text-align: center; text-shadow: 0px -1px 1px #3d0700; width: 150px; -webkit-mask-image: url("../images/badge.png"); -webkit-mask-position: left top; -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; } 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)); } /* webkit seal *******************************************************************************/ button.webkit-seal { background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #9e76e8), color-stop(1, #6224de)); color: #fff; height: 90px; color: #fff; font-family: "helvetica neue", helvetica, arial, sans-serif; font-size: 13px; font-weight: bold; line-height: 1; padding: 0; text-align: center; text-shadow: 0px -1px 1px #473569; width: 150px; -webkit-mask-image: url("../images/seal.png"); -webkit-mask-position: center center; -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; } 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)); } /* webkit check *******************************************************************************/ button.webkit-check { background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #779be9), color-stop(1, #2463de)); color: #fff; height: 88px; line-height: 1; padding: 0; text-align: center; text-indent: -9999px; text-shadow: 0px -1px 1px #3d0700; width: 150px; -webkit-mask-image: url("../images/check.png"); -webkit-mask-position: center center; -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; } button.webkit-check:active { 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], button[disabled]:hover, button[disabled]:active { background: #999; border: 0; -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; }