/* CSS Document */ /*======================================================================= ❤❤❤ A Beautifully Responsive UI Kit. Perfected by Digital Surgeons. ❤❤❤ ========================================================================*/ /*======================================================================= Buttons ========================================================================*/ /* Buttons */ .btn { margin: 10px 5px; } .btn, .skiplink { display: inline-block; width: auto; background: #f2f2f2; -webkit-appearance: none; padding: 0 !important; text-align: center; } .btn a, .btn input, .btn button, .skiplink a, .skiplink input, .skiplink button { display: block; padding: 0 18px; color: white; height: 100%; } .btn input, .btn button, .skiplink input, .skiplink button { background: none; border: none; font-size: 100%; cursor: pointer; } .btn.xlarge, .skiplink.xlarge { font-size: 30px; font-size: 1.875rem; height: 66px; line-height: 64px; } .btn.xlarge a, .skiplink.xlarge a { position: relative; padding: 0 30px; } .btn.xlarge.icon-left a, .skiplink.xlarge.icon-left a { padding-left: 66px; } .btn.xlarge.icon-left a:before, .skiplink.xlarge.icon-left a:before { left: 20px; } .btn.xlarge.icon-right a, .skiplink.xlarge.icon-right a { padding-right: 66px; } .btn.xlarge.icon-right a:after, .skiplink.xlarge.icon-right a:after { right: 20px; } .btn.large, .skiplink.large { font-size: 26px; font-size: 1.625rem; height: 58px; line-height: 56px; } .btn.large a, .skiplink.large a { position: relative; padding: 0 26px; } .btn.large.icon-left a, .skiplink.large.icon-left a { padding-left: 58px; } .btn.large.icon-left a:before, .skiplink.large.icon-left a:before { left: 17.33333px; } .btn.large.icon-right a, .skiplink.large.icon-right a { padding-right: 58px; } .btn.large.icon-right a:after, .skiplink.large.icon-right a:after { right: 17.33333px; } .btn.medium, .skiplink.medium { font-size: 16px; font-size: 1rem; height: 36px; line-height: 34px; } .btn.medium a, .skiplink.medium a { position: relative; padding: 0 16px; } .btn.medium.icon-left a, .skiplink.medium.icon-left a { padding-left: 36px; } .btn.medium.icon-left a:before, .skiplink.medium.icon-left a:before { left: 10.66667px; } .btn.medium.icon-right a, .skiplink.medium.icon-right a { padding-right: 36px; } .btn.medium.icon-right a:after, .skiplink.medium.icon-right a:after { right: 10.66667px; } .btn.medium a, .skiplink.medium a { padding: 0 18px; } .btn.small, .skiplink.small { font-size: 10px; font-size: 0.625rem; height: 23px; line-height: 21px; } .btn.small a, .skiplink.small a { position: relative; padding: 0 10px; } .btn.small.icon-left a, .skiplink.small.icon-left a { padding-left: 23px; } .btn.small.icon-left a:before, .skiplink.small.icon-left a:before { left: 6.66667px; } .btn.small.icon-right a, .skiplink.small.icon-right a { padding-right: 23px; } .btn.small.icon-right a:after, .skiplink.small.icon-right a:after { right: 6.66667px; } .btn.small a, .skiplink.small a { padding: 0 10px; } .btn.oval, .skiplink.oval { -webkit-border-radius: 1000px; -moz-border-radius: 1000px; -ms-border-radius: 1000px; -o-border-radius: 1000px; border-radius: 1000px; } .btn.pill-left, .skiplink.pill-left { -webkit-border-radius: 500px 0 0 500px; -moz-border-radius: 500px 0 0 500px; -ms-border-radius: 500px 0 0 500px; -o-border-radius: 500px 0 0 500px; border-radius: 500px 0 0 500px; } .btn.pill-right, .skiplink.pill-right { -webkit-border-radius: 0 500px 500px 0; -moz-border-radius: 0 500px 500px 0; -ms-border-radius: 0 500px 500px 0; -o-border-radius: 0 500px 500px 0; border-radius: 0 500px 500px 0; } .btn.primary, .skiplink.primary { background: #3085d6; border: 1px solid #3085d6; } .btn.primary:hover, .skiplink.primary:hover { background: #5b9ede; } .btn.primary:active, .skiplink.primary:active { background: #236bb0; } .btn.secondary, .skiplink.secondary { background: #42a35a; border: 1px solid #42a35a; } .btn.secondary:hover, .skiplink.secondary:hover { background: #5bbd73; } .btn.secondary:active, .skiplink.secondary:active { background: #337f46; } .btn.default, .skiplink.default { background: #f2f2f2; border: 1px solid #f2f2f2; color: #555555; border: 1px solid #f2f2f2; } .btn.default:hover, .skiplink.default:hover { background: white; } .btn.default:active, .skiplink.default:active { background: #d8d8d8; } .btn.default:hover, .skiplink.default:hover { border: 1px solid #e5e5e5; } .btn.default a, .btn.default input, .btn.default button, .skiplink.default a, .skiplink.default input, .skiplink.default button { color: #555555; } .btn.info, .skiplink.info { background: #4a4d50; border: 1px solid #4a4d50; } .btn.info:hover, .skiplink.info:hover { background: #63676a; } .btn.info:active, .skiplink.info:active { background: #313436; } .btn.danger, .skiplink.danger { background: #ca3838; border: 1px solid #ca3838; } .btn.danger:hover, .skiplink.danger:hover { background: #d56060; } .btn.danger:active, .skiplink.danger:active { background: #a32c2c; } .btn.warning, .skiplink.warning { background: #fff200; border: 1px solid #fff200; color: #644405; } .btn.warning:hover, .skiplink.warning:hover { background: rgb(255, 250, 153);} .btn.warning:active, .skiplink.warning:active { background: #f4a60e; } .btn.warning a, .btn.warning input, .btn.warning button, .skiplink.warning a, .skiplink.warning input, .skiplink.warning button { color: #644405; } .btn.success, .skiplink.success { background: #58c026; border: 1px solid #58c026; } .btn.success:hover, .skiplink.success:hover { background: #72d940; } .btn.success:active, .skiplink.success:active { background: #44951e; } .btn.metro, .metro .btn, .metro .skiplink, .btn.metro:hover, .metro .btn:hover, .metro .skiplink:hover, .skiplink.metro:hover, .btn.metro:active, .metro .btn:active, .metro .skiplink:active, .skiplink.metro:active, .skiplink.metro { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } .btn.metro.rounded, .metro .rounded.btn, .metro .rounded.skiplink, .metro .rounded.btn:hover, .metro .rounded.skiplink:hover, .rounded.skiplink.metro:hover, .metro .rounded.btn:active, .metro .rounded.skiplink:active, .rounded.skiplink.metro:active, .skiplink.metro.rounded { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .btn.pretty, .pretty .btn, .pretty .skiplink, .btn.pretty:hover, .pretty .btn:hover, .pretty .skiplink:hover, .skiplink.pretty:hover, .btn.pretty:active, .pretty .btn:active, .pretty .skiplink:active, .skiplink.pretty:active, .skiplink.pretty { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .btn.pretty.squared, .pretty .squared.btn, .pretty .squared.skiplink, .pretty .squared.btn:hover, .pretty .squared.skiplink:hover, .squared.skiplink.pretty:hover, .pretty .squared.btn:active, .pretty .squared.skiplink:active, .squared.skiplink.pretty:active, .skiplink.pretty.squared { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } .btn.pretty.primary, .pretty .primary.btn, .pretty .primary.skiplink, .pretty .primary.btn:hover, .pretty .primary.skiplink:hover, .primary.skiplink.pretty:hover, .pretty .primary.btn:active, .pretty .primary.skiplink:active, .primary.skiplink.pretty:active, .skiplink.pretty.primary { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #85b7e7), color-stop(100%, #2a85dc)); background-image: -webkit-linear-gradient(#85b7e7, #2a85dc); background-image: -moz-linear-gradient(#85b7e7, #2a85dc); background-image: -o-linear-gradient(#85b7e7, #2a85dc); background-image: linear-gradient(#85b7e7, #2a85dc); box-shadow: inset 0 0 3px #f0f6fc; border: 1px solid #1f5e9b; } .pretty .primary.btn:hover, .pretty .primary.skiplink:hover, .primary.btn.pretty:hover, .primary.skiplink.pretty:hover, .pretty .primary.btn:hover:active, .pretty .primary.skiplink:hover:active, .skiplink.pretty.primary:hover { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a2d4fc), color-stop(100%, #54b2fe)); background-image: -webkit-linear-gradient(#a2d4fc, #54b2fe); background-image: -moz-linear-gradient(#a2d4fc, #54b2fe); background-image: -o-linear-gradient(#a2d4fc, #54b2fe); background-image: linear-gradient(#a2d4fc, #54b2fe); box-shadow: inset 0 0 3px white; border: 1px solid #0e90f8; } .pretty .primary.btn:active, .pretty .primary.skiplink:active, .pretty .primary.btn:active:hover, .pretty .primary.skiplink:active:hover, .primary.btn.pretty:active, .primary.skiplink.pretty:active, .skiplink.pretty.primary:active { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2a85dc), color-stop(100%, #85b7e7)); background-image: -webkit-linear-gradient(#2a85dc, #85b7e7); background-image: -moz-linear-gradient(#2a85dc, #85b7e7); background-image: -o-linear-gradient(#2a85dc, #85b7e7); background-image: linear-gradient(#2a85dc, #85b7e7); box-shadow: inset 0 0 3px white; } .btn.pretty.primary a, .pretty .primary.btn a, .pretty .primary.skiplink a, .pretty .primary.btn:hover a, .pretty .primary.skiplink:hover a, .primary.skiplink.pretty:hover a, .pretty .primary.btn:active a, .pretty .primary.skiplink:active a, .primary.skiplink.pretty:active a, .btn.pretty.primary input, .pretty .primary.btn input, .pretty .primary.skiplink input, .pretty .primary.btn:hover input, .pretty .primary.skiplink:hover input, .primary.skiplink.pretty:hover input, .pretty .primary.btn:active input, .pretty .primary.skiplink:active input, .primary.skiplink.pretty:active input, .btn.pretty.primary button, .pretty .primary.btn button, .pretty .primary.skiplink button, .pretty .primary.btn:hover button, .pretty .primary.skiplink:hover button, .primary.skiplink.pretty:hover button, .pretty .primary.btn:active button, .pretty .primary.skiplink:active button, .primary.skiplink.pretty:active button, .skiplink.pretty.primary a, .skiplink.pretty.primary input, .skiplink.pretty.primary button { text-shadow: 0 1px 1px #1a5186; } .btn.pretty.secondary, .pretty .secondary.btn, .pretty .secondary.skiplink, .pretty .secondary.btn:hover, .pretty .secondary.skiplink:hover, .secondary.skiplink.pretty:hover, .pretty .secondary.btn:active, .pretty .secondary.skiplink:active, .secondary.skiplink.pretty:active, .skiplink.pretty.secondary { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80cb92), color-stop(100%, #3ca957)); background-image: -webkit-linear-gradient(#80cb92, #3ca957); background-image: -moz-linear-gradient(#80cb92, #3ca957); background-image: -o-linear-gradient(#80cb92, #3ca957); background-image: linear-gradient(#80cb92, #3ca957); box-shadow: inset 0 0 3px #daf0e0; border: 1px solid #2c6d3c; } .pretty .secondary.btn:hover, .pretty .secondary.skiplink:hover, .secondary.btn.pretty:hover, .secondary.skiplink.pretty:hover, .pretty .secondary.btn:hover:active, .pretty .secondary.skiplink:hover:active, .skiplink.pretty.secondary:hover { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a1d3ad), color-stop(100%, #68c07d)); background-image: -webkit-linear-gradient(#a1d3ad, #68c07d); background-image: -moz-linear-gradient(#a1d3ad, #68c07d); background-image: -o-linear-gradient(#a1d3ad, #68c07d); background-image: linear-gradient(#a1d3ad, #68c07d); box-shadow: inset 0 0 3px #f8fcf9; border: 1px solid #469659; } .pretty .secondary.btn:active, .pretty .secondary.skiplink:active, .pretty .secondary.btn:active:hover, .pretty .secondary.skiplink:active:hover, .secondary.btn.pretty:active, .secondary.skiplink.pretty:active, .skiplink.pretty.secondary:active { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3ca957), color-stop(100%, #80cb92)); background-image: -webkit-linear-gradient(#3ca957, #80cb92); background-image: -moz-linear-gradient(#3ca957, #80cb92); background-image: -o-linear-gradient(#3ca957, #80cb92); background-image: linear-gradient(#3ca957, #80cb92); box-shadow: inset 0 0 3px #ecf8ef; } .btn.pretty.secondary a, .pretty .secondary.btn a, .pretty .secondary.skiplink a, .pretty .secondary.btn:hover a, .pretty .secondary.skiplink:hover a, .secondary.skiplink.pretty:hover a, .pretty .secondary.btn:active a, .pretty .secondary.skiplink:active a, .secondary.skiplink.pretty:active a, .btn.pretty.secondary input, .pretty .secondary.btn input, .pretty .secondary.skiplink input, .pretty .secondary.btn:hover input, .pretty .secondary.skiplink:hover input, .secondary.skiplink.pretty:hover input, .pretty .secondary.btn:active input, .pretty .secondary.skiplink:active input, .secondary.skiplink.pretty:active input, .btn.pretty.secondary button, .pretty .secondary.btn button, .pretty .secondary.skiplink button, .pretty .secondary.btn:hover button, .pretty .secondary.skiplink:hover button, .secondary.skiplink.pretty:hover button, .pretty .secondary.btn:active button, .pretty .secondary.skiplink:active button, .secondary.skiplink.pretty:active button, .skiplink.pretty.secondary a, .skiplink.pretty.secondary input, .skiplink.pretty.secondary button { text-shadow: 0 1px 1px #255a32; } .btn.pretty.default, .pretty .default.btn, .pretty .default.skiplink, .pretty .default.btn:hover, .pretty .default.skiplink:hover, .default.skiplink.pretty:hover, .pretty .default.btn:active, .pretty .default.skiplink:active, .default.skiplink.pretty:active, .skiplink.pretty.default { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f3f1f1)); background-image: -webkit-linear-gradient(#ffffff, #f3f1f1); background-image: -moz-linear-gradient(#ffffff, #f3f1f1); background-image: -o-linear-gradient(#ffffff, #f3f1f1); background-image: linear-gradient(#ffffff, #f3f1f1); box-shadow: inset 0 0 3px white; border: 1px solid #cccccc; } .pretty .default.btn:hover, .pretty .default.skiplink:hover, .default.btn.pretty:hover, .default.skiplink.pretty:hover, .pretty .default.btn:hover:active, .pretty .default.skiplink:hover:active, .skiplink.pretty.default:hover { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #ffffff)); background-image: -webkit-linear-gradient(#ffffff, #ffffff); background-image: -moz-linear-gradient(#ffffff, #ffffff); background-image: -o-linear-gradient(#ffffff, #ffffff); background-image: linear-gradient(#ffffff, #ffffff); box-shadow: inset 0 0 3px white; border: 1px solid #d9d9d9; } .pretty .default.btn:active, .pretty .default.skiplink:active, .pretty .default.btn:active:hover, .pretty .default.skiplink:active:hover, .default.btn.pretty:active, .default.skiplink.pretty:active, .skiplink.pretty.default:active { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f3f1f1), color-stop(100%, #ffffff)); background-image: -webkit-linear-gradient(#f3f1f1, #ffffff); background-image: -moz-linear-gradient(#f3f1f1, #ffffff); background-image: -o-linear-gradient(#f3f1f1, #ffffff); background-image: linear-gradient(#f3f1f1, #ffffff); box-shadow: inset 0 0 3px white; } .btn.pretty.default a, .pretty .default.btn a, .pretty .default.skiplink a, .pretty .default.btn:hover a, .pretty .default.skiplink:hover a, .default.skiplink.pretty:hover a, .pretty .default.btn:active a, .pretty .default.skiplink:active a, .default.skiplink.pretty:active a, .btn.pretty.default input, .pretty .default.btn input, .pretty .default.skiplink input, .pretty .default.btn:hover input, .pretty .default.skiplink:hover input, .default.skiplink.pretty:hover input, .pretty .default.btn:active input, .pretty .default.skiplink:active input, .default.skiplink.pretty:active input, .btn.pretty.default button, .pretty .default.btn button, .pretty .default.skiplink button, .pretty .default.btn:hover button, .pretty .default.skiplink:hover button, .default.skiplink.pretty:hover button, .pretty .default.btn:active button, .pretty .default.skiplink:active button, .default.skiplink.pretty:active button, .skiplink.pretty.default a, .skiplink.pretty.default input, .skiplink.pretty.default button { text-shadow: 0 1px 1px white; } .btn.pretty.info, .pretty .info.btn, .pretty .info.skiplink, .pretty .info.btn:hover, .pretty .info.skiplink:hover, .info.skiplink.pretty:hover, .pretty .info.btn:active, .pretty .info.skiplink:active, .info.skiplink.pretty:active, .skiplink.pretty.info { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7b8085), color-stop(100%, #464d54)); background-image: -webkit-linear-gradient(#7b8085, #464d54); background-image: -moz-linear-gradient(#7b8085, #464d54); background-image: -o-linear-gradient(#7b8085, #464d54); background-image: linear-gradient(#7b8085, #464d54); box-shadow: inset 0 0 3px #bdc0c2; border: 1px solid #252728; } .pretty .info.btn:hover, .pretty .info.skiplink:hover, .info.btn.pretty:hover, .info.skiplink.pretty:hover, .pretty .info.btn:hover:active, .pretty .info.skiplink:hover:active, .skiplink.pretty.info:hover { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aeb3b6), color-stop(100%, #808e98)); background-image: -webkit-linear-gradient(#aeb3b6, #808e98); background-image: -moz-linear-gradient(#aeb3b6, #808e98); background-image: -o-linear-gradient(#aeb3b6, #808e98); background-image: linear-gradient(#aeb3b6, #808e98); box-shadow: inset 0 0 3px #f1f2f3; border: 1px solid #60676b; } .pretty .info.btn:active, .pretty .info.skiplink:active, .pretty .info.btn:active:hover, .pretty .info.skiplink:active:hover, .info.btn.pretty:active, .info.skiplink.pretty:active, .skiplink.pretty.info:active { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #464d54), color-stop(100%, #7b8085)); background-image: -webkit-linear-gradient(#464d54, #7b8085); background-image: -moz-linear-gradient(#464d54, #7b8085); background-image: -o-linear-gradient(#464d54, #7b8085); background-image: linear-gradient(#464d54, #7b8085); box-shadow: inset 0 0 3px #cbcdce; } .btn.pretty.info a, .pretty .info.btn a, .pretty .info.skiplink a, .pretty .info.btn:hover a, .pretty .info.skiplink:hover a, .info.skiplink.pretty:hover a, .pretty .info.btn:active a, .pretty .info.skiplink:active a, .info.skiplink.pretty:active a, .btn.pretty.info input, .pretty .info.btn input, .pretty .info.skiplink input, .pretty .info.btn:hover input, .pretty .info.skiplink:hover input, .info.skiplink.pretty:hover input, .pretty .info.btn:active input, .pretty .info.skiplink:active input, .info.skiplink.pretty:active input, .btn.pretty.info button, .pretty .info.btn button, .pretty .info.skiplink button, .pretty .info.btn:hover button, .pretty .info.skiplink:hover button, .info.skiplink.pretty:hover button, .pretty .info.btn:active button, .pretty .info.skiplink:active button, .info.skiplink.pretty:active button, .skiplink.pretty.info a, .skiplink.pretty.info input, .skiplink.pretty.info button { text-shadow: 0 1px 1px #191a1b; } .btn.pretty.danger, .pretty .danger.btn, .pretty .danger.skiplink, .pretty .danger.btn:hover, .pretty .danger.skiplink:hover, .danger.skiplink.pretty:hover, .pretty .danger.btn:active, .pretty .danger.skiplink:active, .danger.skiplink.pretty:active, .skiplink.pretty.danger { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #df8989), color-stop(100%, #d03232)); background-image: -webkit-linear-gradient(#df8989, #d03232); background-image: -moz-linear-gradient(#df8989, #d03232); background-image: -o-linear-gradient(#df8989, #d03232); background-image: linear-gradient(#df8989, #d03232); box-shadow: inset 0 0 3px #faeded; border: 1px solid #8f2626; } .pretty .danger.btn:hover, .pretty .danger.skiplink:hover, .danger.btn.pretty:hover, .danger.skiplink.pretty:hover, .pretty .danger.btn:hover:active, .pretty .danger.skiplink:hover:active, .skiplink.pretty.danger:hover { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f79696), color-stop(100%, #f64a4a)); background-image: -webkit-linear-gradient(#f79696, #f64a4a); background-image: -moz-linear-gradient(#f79696, #f64a4a); background-image: -o-linear-gradient(#f79696, #f64a4a); background-image: linear-gradient(#f79696, #f64a4a); box-shadow: inset 0 0 3px white; border: 1px solid #e21212; } .pretty .danger.btn:active, .pretty .danger.skiplink:active, .pretty .danger.btn:active:hover, .pretty .danger.skiplink:active:hover, .danger.btn.pretty:active, .danger.skiplink.pretty:active, .skiplink.pretty.danger:active { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d03232), color-stop(100%, #df8989)); background-image: -webkit-linear-gradient(#d03232, #df8989); background-image: -moz-linear-gradient(#d03232, #df8989); background-image: -o-linear-gradient(#d03232, #df8989); background-image: linear-gradient(#d03232, #df8989); box-shadow: inset 0 0 3px white; } .btn.pretty.danger a, .pretty .danger.btn a, .pretty .danger.skiplink a, .pretty .danger.btn:hover a, .pretty .danger.skiplink:hover a, .danger.skiplink.pretty:hover a, .pretty .danger.btn:active a, .pretty .danger.skiplink:active a, .danger.skiplink.pretty:active a, .btn.pretty.danger input, .pretty .danger.btn input, .pretty .danger.skiplink input, .pretty .danger.btn:hover input, .pretty .danger.skiplink:hover input, .danger.skiplink.pretty:hover input, .pretty .danger.btn:active input, .pretty .danger.skiplink:active input, .danger.skiplink.pretty:active input, .btn.pretty.danger button, .pretty .danger.btn button, .pretty .danger.skiplink button, .pretty .danger.btn:hover button, .pretty .danger.skiplink:hover button, .danger.skiplink.pretty:hover button, .pretty .danger.btn:active button, .pretty .danger.skiplink:active button, .danger.skiplink.pretty:active button, .skiplink.pretty.danger a, .skiplink.pretty.danger input, .skiplink.pretty.danger button { text-shadow: 0 1px 1px #7b2121; } .btn.pretty.warning, .pretty .warning.btn, .pretty .warning.skiplink, .pretty .warning.btn:hover, .pretty .warning.skiplink:hover, .warning.skiplink.pretty:hover, .pretty .warning.btn:active, .pretty .warning.skiplink:active, .warning.skiplink.pretty:active, .skiplink.pretty.warning { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbdca0), color-stop(100%, #fbba3a)); background-image: -webkit-linear-gradient(#fbdca0, #fbba3a); background-image: -moz-linear-gradient(#fbdca0, #fbba3a); background-image: -o-linear-gradient(#fbdca0, #fbba3a); background-image: linear-gradient(#fbdca0, #fbba3a); box-shadow: inset 0 0 3px white; border: 1px solid #de960a; color: #644405; } .pretty .warning.btn:hover, .pretty .warning.skiplink:hover, .warning.btn.pretty:hover, .warning.skiplink.pretty:hover, .pretty .warning.btn:hover:active, .pretty .warning.skiplink:hover:active, .skiplink.pretty.warning:hover { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #feecca), color-stop(100%, #ffd37d)); background-image: -webkit-linear-gradient(#feecca, #ffd37d); background-image: -moz-linear-gradient(#feecca, #ffd37d); background-image: -o-linear-gradient(#feecca, #ffd37d); background-image: linear-gradient(#feecca, #ffd37d); box-shadow: inset 0 0 3px white; border: 1px solid #fcb834; } .pretty .warning.btn:active, .pretty .warning.skiplink:active, .pretty .warning.btn:active:hover, .pretty .warning.skiplink:active:hover, .warning.btn.pretty:active, .warning.skiplink.pretty:active, .skiplink.pretty.warning:active { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbba3a), color-stop(100%, #fbdca0)); background-image: -webkit-linear-gradient(#fbba3a, #fbdca0); background-image: -moz-linear-gradient(#fbba3a, #fbdca0); background-image: -o-linear-gradient(#fbba3a, #fbdca0); background-image: linear-gradient(#fbba3a, #fbdca0); box-shadow: inset 0 0 3px white; } .btn.pretty.warning a, .pretty .warning.btn a, .pretty .warning.skiplink a, .pretty .warning.btn:hover a, .pretty .warning.skiplink:hover a, .warning.skiplink.pretty:hover a, .pretty .warning.btn:active a, .pretty .warning.skiplink:active a, .warning.skiplink.pretty:active a, .btn.pretty.warning input, .pretty .warning.btn input, .pretty .warning.skiplink input, .pretty .warning.btn:hover input, .pretty .warning.skiplink:hover input, .warning.skiplink.pretty:hover input, .pretty .warning.btn:active input, .pretty .warning.skiplink:active input, .warning.skiplink.pretty:active input, .btn.pretty.warning button, .pretty .warning.btn button, .pretty .warning.skiplink button, .pretty .warning.btn:hover button, .pretty .warning.skiplink:hover button, .warning.skiplink.pretty:hover button, .pretty .warning.btn:active button, .pretty .warning.skiplink:active button, .warning.skiplink.pretty:active button, .skiplink.pretty.warning a, .skiplink.pretty.warning input, .skiplink.pretty.warning button { text-shadow: 0 1px 1px #fbdca0; } .btn.pretty.success, .pretty .success.btn, .pretty .success.skiplink, .pretty .success.btn:hover, .pretty .success.skiplink:hover, .success.skiplink.pretty:hover, .pretty .success.btn:active, .pretty .success.skiplink:active, .success.skiplink.pretty:active, .skiplink.pretty.success { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #91e26a), color-stop(100%, #56c620)); background-image: -webkit-linear-gradient(#91e26a, #56c620); background-image: -moz-linear-gradient(#91e26a, #56c620); background-image: -o-linear-gradient(#91e26a, #56c620); background-image: linear-gradient(#91e26a, #56c620); box-shadow: inset 0 0 3px #e0f7d5; border: 1px solid #3b8019; } .pretty .success.btn:hover, .pretty .success.skiplink:hover, .success.btn.pretty:hover, .success.skiplink.pretty:hover, .pretty .success.btn:hover:active, .pretty .success.skiplink:hover:active, .skiplink.pretty.success:hover { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #96e570), color-stop(100%, #64df29)); background-image: -webkit-linear-gradient(#96e570, #64df29); background-image: -moz-linear-gradient(#96e570, #64df29); background-image: -o-linear-gradient(#96e570, #64df29); background-image: linear-gradient(#96e570, #64df29); box-shadow: inset 0 0 3px #e5f9db; border: 1px solid #479f1d; } .pretty .success.btn:active, .pretty .success.skiplink:active, .pretty .success.btn:active:hover, .pretty .success.skiplink:active:hover, .success.btn.pretty:active, .success.skiplink.pretty:active, .skiplink.pretty.success:active { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #56c620), color-stop(100%, #91e26a)); background-image: -webkit-linear-gradient(#56c620, #91e26a); background-image: -moz-linear-gradient(#56c620, #91e26a); background-image: -o-linear-gradient(#56c620, #91e26a); background-image: linear-gradient(#56c620, #91e26a); box-shadow: inset 0 0 3px #f0fbea; } .btn.pretty.success a, .pretty .success.btn a, .pretty .success.skiplink a, .pretty .success.btn:hover a, .pretty .success.skiplink:hover a, .success.skiplink.pretty:hover a, .pretty .success.btn:active a, .pretty .success.skiplink:active a, .success.skiplink.pretty:active a, .btn.pretty.success input, .pretty .success.btn input, .pretty .success.skiplink input, .pretty .success.btn:hover input, .pretty .success.skiplink:hover input, .success.skiplink.pretty:hover input, .pretty .success.btn:active input, .pretty .success.skiplink:active input, .success.skiplink.pretty:active input, .btn.pretty.success button, .pretty .success.btn button, .pretty .success.skiplink button, .pretty .success.btn:hover button, .pretty .success.skiplink:hover button, .success.skiplink.pretty:hover button, .pretty .success.btn:active button, .pretty .success.skiplink:active button, .success.skiplink.pretty:active button, .skiplink.pretty.success a, .skiplink.pretty.success input, .skiplink.pretty.success button { text-shadow: 0 1px 1px #316b15; } /*===================================================================== Resize your buttons (Works in conjunction with .primary, .secondary, .tertiary button styles as well!) =======================================================================*/ .small.btn { font-size: 12px; line-height: 24px !important; height: 24px; } .medium.btn { font-size: 16px; line-height: 40px !important; height: 40px; } .large.btn { font-size: 30px; line-height: 65px !important; height: 65px; } /* Mobile Buttons */ @media only screen and (max-width: 767px) { .btn { display: block; } button.btn { width: 100%; padding-left: 0px; padding-right: 0px; } .btn.primary, .btn.secondary, .btn.tertiary, .btn.large { width: 100% !important; } .btn.medium { min-width: 75% !important; } } @media only screen and (min-width:768px) and (max-width: 939px) { /* Style adjustments for viewports between 768px and 940px */ .btn.shrink a { font-size: 90%; } } /* Correct FF button padding, thx ZURB */ @-moz-document url-prefix(http://) { input[type=submit].button::-moz-focus-inner, button.button::-moz-focus-inner { border: 0; padding: 0; } input[type=submit].small.button { padding: 7px 20px 8px; } input[type=submit].medium.button { padding: 8px 34px 9px; } input[type=submit].large.button { padding: 9px 48px 10px; } } /* -------------------------------------------------- Alerts -------------------------------------------------- */ li.alert-box { display: block; padding: 6px 7px; font-size: 16px; background: #eee; border: 1px solid rgba(0,0,0,0.1); margin-bottom: 12px; } .alert-box.info { background: #3085d6; border: 1px solid #3085d6; color: #fff; } .alert-box.alert { background: #91e26a; border: 1px solid #58c026; color:#fff; } .alert-box.error { background-color: #c00000; color: #fff } .alert-box a.close { color: #000; position: absolute; right: 4px; top: 0px; font-size: 18px; opacity: 0.2; padding: 4px; } .alert-box a.close:hover { opacity: 0.4; } /*======================================================================= Pagination ========================================================================*/ ul.pagination { display: block; height: 24px; margin-left: -5px; } ul.pagination li { float: left; display: block; height: 24px; color: #999; font-size: 15px; margin-left: 5px; } ul.pagination li a { display: block; padding: 6px 7px 4px; color: #555; } ul.pagination li.current a, ul.pagination li:hover a { border-bottom: solid 2px #00a6fc; color: #141414; } ul.pagination li.unavailable a { cursor: default; color: #999; } ul.pagination li.unavailable:hover a { border-bottom: none; } /*======================================================================= Tabs ========================================================================*/ .tabs { display: block; } .tabs ul { margin: 0; padding: 0; height: 30px; border-bottom: 1px solid #1d692d; } .tabs li { display: block; width: auto; padding: 0; margin: 0 10px 0 0; line-height: 30px; float: left; color: #999; cursor: default; } .tabs li a { display: block; width: auto; height: 29px; padding: 0 9px; line-height: 30px; border: 1px solid #1d692d; margin: 0 -1px 0 0; color: #05390a; text-shadow: 0 1px 1px #77d58e; background: #5dbb73; } .tabs li a:hover { text-decoration: none; } .tabs li.active a { height: 30px; font-weight: bold; background: #ebffef; border-width: 1px 1px 0 1px; text-shadow: 0 1px 1px #fff; } .tabs div { display: none; padding: 20px 10px; } .tabs div.active { display: block; } .tabs li:last-child { margin-right: 0; } /**** Pretty Tab Styles ****/ .pretty.tabs ul { display: table; width: 100%; border: 1px solid #999; border-radius: 4px 4px 0 0; -webkit-box-shadow: inset 0 1px 1px #fff; box-shadow: inset 0 1px 1px #fff; background: #ccc; /* Old browsers */ background: -moz-linear-gradient(top, #eee 0%, #ccc 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(100%,#ccc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #eee 0%,#ccc 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #eee 0%,#ccc 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #eee 0%,#ccc 100%); /* IE10+ */ background: linear-gradient(top, #eee 0%,#ccc 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */ } .pretty.tabs li { display: table-cell; float: none; text-align: center; } .pretty.tabs li a { padding: 0; font-size: 16px; height: 52px; line-height: 52px; color: #444; border: none; border-right: 1px solid #999; text-shadow: 0 1px 1px #fff; font-weight: bold; background: transparent; } .pretty.tabs li:last-child a { border-right: none; } .pretty.tabs li.active a { font-weight: bold; color: #fff; position: relative; border: none; text-shadow: 0 2px 1px #1d692d, 0 1px 1px #1d692d ; -webkit-box-shadow: inset 0 1px 1px #94dda6, 0 1px 0 #1d692d, 0 -1px 0 #1d692d, 1px 0 0 #1d692d, -1px 0 0 #1d692d ; box-shadow: inset 0 1px 1px #94dda6, 0 1px 0 #1d692d, 0 -1px 0 #1d692d, 1px 0 0 #1d692d, -1px 0 0 #1d692d ; background: #5dbb73; /* Old browsers */ background: -moz-linear-gradient(top, #5dbb73 0%, #2d9047 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5dbb73), color-stop(100%,#2d9047)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* IE10+ */ background: linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5dbb73', endColorstr='#2d9047',GradientType=0 ); /* IE6-9 */ } .pretty.tabs ul li.active:first-child a { border-radius: 4px 0 0 0; margin-left: 0; } .pretty.tabs ul li.active:last-child a { border-radius: 0 4px 0 0; } .ie7 .pretty.tabs > ul { width: 100%; height: 51px; } .ie7 .pretty.tabs > ul li { display: block; float: left; margin: 0; } .ie7 .pretty.tabs > ul li a { padding: 0 20px; } /**** Pill Tabs ****/ .pill.tabs { height: auto; } .pill.tabs li, .pill.tabs li, .pretty.pill.tabs li { float: none; height: auto; } .pill.tabs li a { display: block; width: auto; height: auto; padding: 15px 20px; line-height: 1; border: solid 0 #ccc; border-width: 1px 1px 0; margin: 0; color: #555; background: #eee; font-size: 15px; font-size: 1.5rem; } .pill.tabs li a.active { height: auto; margin: 0; border-width: 1px 0 0; background: #fff; } .pretty.pill.tabs { border-bottom: solid 1px #eee; height: auto; } .pretty.pill.tabs li a { padding: 15px 20px; border: none; border-left: 1px solid #eee; border-right: 1px solid #eee; border-top: 1px solid #eee; background: #fff; } .pretty.pill.tabs li a.active { border: none; background: #00a6fc; color: #fff; margin: 0; position: static; top: 0; height: auto; } .pretty.pill.tabs li.active:first-child a { margin: 0; } @media only screen and (max-width: 767px) { .pretty.tabs ul { border-radius: 4px; overflow: hidden; } .pretty.tabs li a { height: 36px; line-height: 36px; font-size: 14px; } } /* Vertically Align Stuff */ .valign { display: table; width: 100%; } .valign > div, .valign > article { display: table-cell; vertical-align: middle; }​ /*======================================================================= ======================================================================== ❤❤❤ A Beautifully Responsive UI Kit. Perfected by Digital Surgeons. ❤❤❤ ======================================================================== ========================================================================*/ /*======================================================================= Form Styles ========================================================================*/ form { margin: 0 0 18px; } form label { display: block; font-size: 16px; line-height: 18px; cursor: pointer; margin-bottom: 9px; } form .field { position: relative; margin-bottom: 10px; } form dt { margin: 0; } .field .text input, .field .text input[type="search"], form textarea { font-size: 14px; font-family: "Lucida Grande", sans-serif; width: 100%; border: none; box-shadow: none; -webkit-box-shadow: none; border: none; padding: 0; margin: 0; outline: none; resize: none; } form textarea { height: 150px; } .field .text input[type="search"] { -webkit-appearance: textfield; } .field .text, .field .search, .field .textarea { position: relative; font-size: 14px; padding: 8px 10px; outline: none !important; background: #fff; -webkit-box-shadow: inset 0 2px 3px #ccc, 0 1px 0 #f4fff6 ; box-shadow: inset 0 2px 3px #ccc, 0 1px 0 #f4fff6 ; border: 1px solid #b7b7b7; border-radius: 4px; } .field .text.oval { border-radius: 1000px; } .field .search { padding: 2px 10px; line-height: 24px; margin-bottom: 0; border: 1px solid #1d692d; -webkit-box-shadow: 0px 1px 1px #94dda6, inset 0 1px 3px #888 ; box-shadow: 0px 1px 1px #94dda6, inset 0 1px 3px #888 ; } label + .text, label + textarea, label + select, label + div.dropdown, select + div.dropdown { margin-top: -9px; } .field.error .text, .field.error .textarea { margin-top: 45px; -webkit-box-shadow: inset 0 2px 3px #feb9a2, 0 1px 0 #f4fff6 ; box-shadow: inset 0 2px 3px #feb9a2, 0 1px 0 #f4fff6 ; -webkit-transition-duration: .2s; /* Saf3.2+, Chrome */ -moz-transition-duration: .2s; /* FF4+ */ -ms-transition-duration: .2s; /* IE10 */ -o-transition-duration: .2s; /* Opera 10.5+ */ transition-duration: .2s; } .field.error .text, .field.error .textarea, .field.error input, .field.error textarea { color: #cd4225; background: #ffdace; } form .msg { display: block; opacity: 0; height: 0; width: 100%; overflow: hidden; } form .error > .msg { opacity: 1; height: auto; overflow: visible; position: absolute; top: 0px; display: block; width: 100%; background: #b72a18; color: #fff; font-weight: 500; font-size: 14px; text-align: center; padding: 8px 0; border-radius: 4px; -webkit-transition-duration: .2s; /* Saf3.2+, Chrome */ -moz-transition-duration: .2s; /* FF4+ */ -ms-transition-duration: .2s; /* IE10 */ -o-transition-duration: .2s; /* Opera 10.5+ */ transition-duration: .2s; } form .error .msg .caret { left: 50%; top: 100%; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 5px solid #b72a18; opacity: 1; } /* Form Picker Element (