/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* End of reset */ * { margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box } html,body { height:100% } body { font:14px/21px 'Open Sans',"Lucida Sans","Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif; overflow-y:auto } header,section,footer { display:block; width:100% } footer { color:#484848; font-weight:300 } strong { font-weight:700 } .hidden { visibility:hidden; display:block; height:0 } .tooltip { color:#a50022; display:none; margin:.5em 0 } a { color:#348fd0; text-decoration:none; text-shadow:0 1px 0 rgba(255,255,255,0.5); font-weight:300 } a:hover { color:#000 } h2 { font-size:32px; letter-spacing:-1px; line-height:100% } h3 { font-size:28px; letter-spacing:-0.5px; line-height:100% } .message_screen { background-color:#dadee1 } .message_screen .contents { max-width:430px; margin:0 auto } .message_screen h2 { font-size:20px } .message_screen p { margin-top:20px } body { color:#383838; background-color:#ebeced } #signIn { position:absolute; left:0; top:0; bottom:0; width:425px; padding-right:136px } h2 { font-size:20px } .scheme_section h2 { font-size:16px; margin-bottom:8px } .scheme_section h2.large { margin-top:8px; font-size:24px; font-weight:300 } .scheme_section h2.deemphasize { font-size:13px; font-weight:normal; line-height:18px; letter-spacing:0; text-shadow:none } h3 { font-size:18px } footer { position:absolute; z-index:2; bottom:0; border-top:1px solid #dfe1e2; padding:20px; *padding:20px 0; text-align:center } #footerText { white-space:nowrap; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEGElEQVR4nKWT+VuUVRiGz/+RihqB4oIs+XfYpdmmLSoSVO57CgzLwCAMzDBsohZUlAuYC7jlgqkllUuZaWRaaBlFluZSXvr2HL7zDY/XfLNcMz/cP9/nPtfzqkctU+XhhqnyAPwH7jc/LXfBHXAb/N2ULX+BP8Efjdnye2OW/AZ+Bb80ZMm1hkz5GfxUnylX6jPkR/AD+D6QIZcCU+Q78G3dFDkPvq5Ll7PgjD9dvgJf+CeL0uJ/wT0j/gfcarLEN8HgkDhLBsANLYb0OoT9RnwVYi29DPoClvgipBeM+BtwToshPA2+hFSLT/kmy2dA3aPaW1Q7SLU3qLY/WJvpWHuBas9RrRb3Qvi5EZ/wTZJPayeJuk219jcP2N9saq9R7ZUotfY3n6ZvPmXEJyE9bsQ94EjtRFE3qXaAaq9T7VWq7RuqzbBqA6G19jf30jfr2uMQHgNHjfhQzUQ5CFS0UV2mb75IowpX20u1J6j2KKSHIfzEiPfXTJC93gmioo3qEn3z+SFx5NqTVNtDtVp8AOzzWuIusNubJqo/gRMarh0e1TGqPUS1WtwN9hjxzuo02QFUtFFFOiGn2sNUa39zlxHvgvBjI+6oHi/bqsaL6ov1hPyhJ+Q0qgNU20W1WtwJtldZ4i3gQ/2AaKOKdEJOo+qm2p3BWku8FXykxevHyQfgPaCijSrSCTmNahfVdlCtFrdD+L4Rt1aOk3cqU0VFG1WkEwqOimo7qXYL1WpxG3gXUi3eBFr0A6KNKtIJOY1qK9Xa39xqxJvBRi32pEqzJ0UagQodVewn5DSqdqptpVot3gBhkxHXV6RIXcVTopxGFesJOY2qjWo3Ua0WN4CAEftATTkekMgJOY1qM9U2U20AQj+oNeLq8mRZD1QiJxQyKs/wNzfQN/uM2AtxlRF73MlS7n5SVCIn5DQq65utWh/VanElqDDiMlBShgdEPCEQ6YScRuWn2mqqrYDQDUqN2FU2VgqBSuSE7FoelZdqPVRbCmkxKDLidaVj5W2gEjkhp1FVuq1vdtM361otLoBw7ZB4jKwGK0vGiErkhOxaHpWbal1Uq8VrIF1lxMvB0pLRouI9oXCjsr+5IPjNVu0qCFeAZZBq8eLi0bIQqHhPKNyoCqh2NdVq8RIIFxnxW8VJ8oYrSVS8JxRuVGuodjnVavECSN90WeI8kOsaJSq2E0oOqQ03qhVUu5hqtTgfvA5pbtEoyQFzgYr3hNZS7UqqXUK19jfnGfF8COcZ8WtFI+WVwpGi4j2hcKNaQLX2N+cY8RxIXy20xLPBS4UjRIWckDu2E3p8VMO1+VSbQ7Va/DKYpcUFI+QF8BxQ8Z5QuFHND9ZCTLWzUPsihM8b8bPrnpDpQMV7QuFGNYdqZ1OtFs8EM4z4GTAN/A8F6GiJnCbrbQAAAABJRU5ErkJggg=='); background-size:18px 18px; background-repeat:no-repeat; padding-left:32px } .table { display:table; width:100%; height:100% } .table .vertical { display:table-cell; vertical-align:middle } .scheme_section { font-size:13px; position:absolute; top:15px; bottom:15px; left:15px; width:250px; overflow-y:auto } .scheme_section.vcenter { position:static; overflow-y:visible; padding-right:1px } .scheme_section p { margin-top:8px } #content { position:absolute; overflow:hidden; left:0; right:0; top:0; bottom:61px; _width:100%; _height:250px } section { display:block; position:absolute; top:0; left:0; bottom:0; right:0; z-index:0; width:100%; height:100% } section>.contents { display:table-cell; vertical-align:middle; height:250px } #message { position: absolute; width: 250px; } .message_screen { z-index:-1; -ms-filter:"alpha(opacity=0)"; opacity:0; -webkit-transition-property:all; -moz-transition-property:all; -ms-transition-property:all; -o-transition-property:all; transition-property:all; -webkit-transition-duration:.25s; -moz-transition-duration:.25s; -ms-transition-duration:.25s; -o-transition-duration:.25s; transition-duration:.25s; -webkit-transition-delay:.25s; -moz-transition-delay:.5s; -ms-transition-delay:.5s; -o-transition-delay:.5s; transition-delay:.5s } .message_screen .vertical { padding:0 20px } .message_screen img { display:block; margin:0 auto 30px } #signIn .table { background-color:#f9f9f9; border-right:1px solid #bfbfbf; box-shadow:0 1px 5px 6px #dfdfdf; padding:0 20px } .arrowContainer { position:absolute; width:136px; right:0; top:0; bottom:0 } .arrow { display:block; position:absolute; top:0; bottom:0; left:-1px; right:0; background-image:url('data:image/png;base64,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'); background-repeat:no-repeat; background-position:center } .wikiinfo { position:absolute; left:400px; top:0; bottom:0; right:20px; overflow:hidden; z-index:10 } .wikiinfo.dark,.wikiinfo.dark a { color:#000 } .wikiinfo.light,.wikiinfo.light a { color:#fff } .wikiinfo strong { font-size:18px; line-height:24px; text-shadow:0 1px #fff } .wikiinfo img { display:block; margin:0 auto; max-height:100px; max-width:100px } .wikiinfo h2,.wikiinfo h3 { line-height:1.2em; margin:10px 0 0 0; text-shadow:none } .wikiinfo h2 { margin:10px 0 0 0 } .wikiinfo h3 { font-size:16px; margin-top:0 } .wikiinfo .vertical { display:table-cell; text-align:center; max-width:0 } @media screen and (max-width:640px) { html,body { -webkit-text-size-adjust:none } body { height:100%; background:#eff0f2 none; font-family:'Fira Sans','Feura Sans','Open Sans','Lucida Sans','Lucida Grande','Lucida Sans Unicode',Verdana,sans-serif } h1,h2,h3,h4,h5,h6 { letter-spacing:normal } footer,.persona_intro { display:none } a { color:#0095dd; text-shadow:none } .scheme_section a { font-size:13px } button,.submit button,.buttonrow a { min-width:105px; font-size:16px; line-height:38px; padding:0 10px; border-radius:2px; float:right; font-weight:400; color:#333; text-shadow:1px 1px 0 rgba(255,255,255,0.3); text-transform:capitalize; text-align:center; cursor:pointer; white-space:nowrap; border-radius:3px; border:1px solid #a6a6a6; box-shadow:none } button,.submit button { background:#30bed9; background-image:-webkit-gradient(linear,left top,left bottom,from(#00caf2),to(#0ac)); background-image:-webkit-linear-gradient(top,#00caf2,#0ac); background-image:-moz-linear-gradient(top,#00caf2 0,#0ac); background-image:-ms-linear-gradient(top,#00caf2,#0ac); background-image:-o-linear-gradient(top,#00caf2,#0ac); background-image:linear-gradient(top,#00caf2,#0ac); border-color:#008eab } button:hover,button:focus,button:active,.submit button:hover,.submit button:focus,.submit button:active { background-image:none; background-color:#018cab; border-color:#008aaa; box-shadow:none } button.negative,.submit button.negative { background-color:#b70404; background-image:-webkit-gradient(linear,left top,left bottom,from(#b50404),to(#830b0b)); background-image:-webkit-linear-gradient(top,#b50404,#830b0b); background-image:-moz-linear-gradient(top,#b50404 0,#830b0b); background-image:-ms-linear-gradient(top,#b50404,#830b0b); background-image:-o-linear-gradient(top,#b50404,#830b0b); background-image:linear-gradient(top,#b50404,#830b0b); color:#fff; text-shadow:none; border-color:#820000 } button.negative:hover,button.negative:focus,button.negative:active,.submit button.negative:hover,.submit button.negative:focus,.submit button.negative:active { box-shadow:none; background-image:none; text-shadow:none; color:#fff; background-color:#890707 } button[disabled],button[disabled]:hover,.button[disabled]:hover,button[disabled]:focus,.button[disabled]:focus,button[disabled]:active,.button[disabled]:active,.submit_disabled button,.submit_disabled .button,.submit_disabled button:hover,.submit_disabled .button:hover,.submit_disabled button:focus,.submit_disabled .button:focus,.submit_disabled button:active,.submit_disabled .button:active,.submit_disabled .submit button,.submit_disabled .submit .button,.submit_disabled .submit button:hover,.submit_disabled .submit .button:hover,.submit_disabled .submit button:focus,.submit_disabled .submit .button:focus,.submit_disabled .submit button:active,.submit_disabled .submit .button:active { color:#c7c7c7; cursor:default; background:#e7e7e7; box-shadow:none; text-shadow:none; border-color:#a6a6a6 } .buttonrow a { background-color:#fafafa; background-image:-webkit-gradient(linear,left top,left bottom,from(#fafafa),to(#ccc)); background-image:-webkit-linear-gradient(top,#fafafa,#ccc); background-image:-moz-linear-gradient(top,#fafafa,#ccc); background-image:-ms-linear-gradient(top,#fafafa,#ccc); background-image:-o-linear-gradient(top,#fafafa,#ccc); background-image:linear-gradient(top,#fafafa,#ccc); box-shadow:none; border:1px solid #b6b6b5 } .buttonrow a:hover,.buttonrow a:focus,.buttonrow a:active { background-image:none; background-color:#018cab; border-color:#008aaa } .buttonrow>.right { margin:0 } .buttonrow>button,.buttonrow>button.right { margin:0 -10px 0 10px } input[type=email],input[type=password],input[type=text] { font-size:17px; padding:9px 5px; border-radius:5px; border:1px solid #e3e3e3; box-shadow:0 0 1px 1px #e3e3e3 } input[type=email]:focus,input[type=password]:focus,input[type=text]:focus { border:1px solid #0096dc; box-shadow:0 0 5px 0 #0096dc } input[type=text].invalid,input[type=email].invalid,input[type=password].invalid { border:1px solid #a50022; box-shadow:none } #authentication_email { background-image:url('https://login.persona.org/v/0a9faad451/dialog/i/persona_watermark.png'); background-size:auto 100%; background-repeat:no-repeat; background-position:left top; padding-left:60px } .buttonrow>button,.buttonrow>a { min-width:50% } #authentication_email::-webkit-input-placeholder { color:transparent } #authentication_email::-webkit-input-placeholder { color:transparent } #authentication_email::-moz-placeholder { color:transparent } #authentication_email:-moz-placeholder { color:transparent } #authentication_email:-ms-input-placeholder { color:transparent } #authentication_email::input-placeholder { color:transparent } section { position:fixed; display:none } #formWrap { position:static; display:block } .scheme_section h2 { font-size:19px; margin:20px 0 15px 0 } .inputs>li>label { font-size:15px } .vertical>strong { font-size:20px } .isMobile,.returning .isReturning,.start .isStart,.addressInfo .isAddressInfo { display:block } .isDesktop,.returning .isDesktopOrStart { display:none!important } label.isDesktop { visibility:hidden; display:block; height:0; width:0; overflow:hidden } label.isDesktop+input[type=text],label.isDesktop+input[type=password],label.isDesktop+input[type=email] { margin-top:0 } .wikiinfo { display:none; overflow:inherit; width:100%; position:static; padding:10px; text-align:center; left:0; border-bottom:1px solid #bcbcbc; box-shadow:0 -1px #fff inset } .rpBackground { background-color:#dcdcdc } .showMobileFavicon .wikiinfo { display:block } .wikiinfo img { max-width:32px; max-height:32px; display:inline; margin:0 10px 0 0; vertical-align:middle } .wikiinfo h2,.wikiinfo h3 { margin:0 5px; height:auto; line-height:32px; font-size:20px; display:inline; vertical-align:baseline } .wikiinfo h3 { font-size:16px } .wikiinfo .vertical { height:auto; line-height:32px; vertical-align:middle } .tospp,.tospp a { font-size:8.375pt } #signIn { position:static; width:auto; padding:0 } #signIn .table { background-color:#eff0f2; box-shadow:none } #signIn .vertical { position:static; display:block } #signIn form { padding:0 } #error,.black { background:#3b3b3b; background:rgba(64,64,64,.95); color:#fff; text-align:left } #error { padding-bottom:80px } #error a:hover,.black a:hover { color:#30b2d9 } #error h2,.black h2 { text-align:left; text-shadow:none; font-weight:300; font-size:18px; border-bottom:1px solid #656161; letter-spacing:.25px; padding-bottom:10px } #error h3,#error p.emphasis,.black h3,.black p.emphasis { text-shadow:none; font-weight:300; font-size:22px; letter-spacing:.25px; padding-bottom:10px; line-height:1.3 } #error .emphasis,.black p.emphasis { color:#fff } #error .buttonrow,.lightbox .buttonrow { background-color:#3a3a3a; padding:20px 25px; position:fixed; bottom:0; left:0; right:0 } #error .buttonrow button,.lightbox .buttonrow button { color:#414343; text-shadow:1px 1px #fff; background:#30bed9; width:100%; margin:0; padding:0 } .waiting #wait,.delay #delay,.error #error,.loading #load { display:block } .delay #wait,.error #wait,.error #delay { display:none } #emailList { border-bottom:1px dotted #cbcbcb; padding-bottom:15px; margin-bottom:15px } #emailList>li>label { margin:0; padding:8px 0 } #emailList>li>label,#emailList>li:only-child>label.selected { background-image:url('https://login.persona.org/v/77e5d5d4c5/dialog/i/persona_watermark_sm.png'); background-repeat:no-repeat; background-position:center left; padding:4px 0 4px 40px; margin:5px 0 } #emailList>li>label.selected { background-image:url('https://login.persona.org/v/29d9e089cb/dialog/i/persona_watermark_dark_sm.png') } #emailList>li input[type=radio] { display:none } #signIn .buttonrow { position:absolute; left:0; right:0; padding:20px 20px 20px 10px; background-color:#dcdcdc; border-top:1px solid #bcbcbc; box-shadow:0 1px #fff inset; margin:0 } .scrollButtonRow #signIn .buttonrow { bottom:0 } #signIn .submit>p { font-size:14px; display:block; margin-top:20px } #signIn .submit>p:first-child { padding:0; margin-top:0 } #content { position:static; overflow:visible } .vertical { position:static } .scheme_section { position:static; width:100%; font-size:14px; overflow:visible } .scheme_section p { margin-top:0 } .scheme_section>p { margin:17px 0 10px 0 } .submit #cancel.emphasize,#signIn .submit #cancel.emphasize { line-height:22px } #error .vertical { width:auto } #error .vertical>div { display:block; height:auto; padding:10px } #error .lighter { color:#fff } a.emphasize { font-size:14px; padding:5px; margin-top:10px } #your_computer_content li { margin:15px 0; min-height:40px; text-align:center } #your_computer_content button { display:block; margin:0 auto; color:#fff; text-shadow:none } .inputs>li { margin-top:12px } #error.unsupported,#error.cookies_disabled { display:block; position:absolute; top:0; left:0; right:0; bottom:0; padding:10px } .lightbox { padding:5px 5px 80px 5px } .message_screen h2 { font-size:14pt; line-height:22px } } /* Authentication Scheme Buttons - based on persona buttons */ /* Link body */ .scheme-button { color: #fff; display: inline-block; font-size: 14px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; line-height: 1.1; overflow: hidden; position: relative; text-decoration: none; text-shadow: 0 1px rgba(0,0,0,0.5), 0 0 2px rgba(0,0,0,0.2); background: #297dc3; background: -moz-linear-gradient(top, #43a6e2, #287cc2); background: -ms-linear-gradient(top, #43a6e2, #287cc2); background: -o-linear-gradient(top, #43a6e2, #287cc2); background: -webkit-linear-gradient(top, #43a6e2, #287cc2); background: linear-gradient(top, #43a6e2, #287cc2); -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2); -ms-box-shadow: 0 1px 0 rgba(0,0,0,0.2); -o-box-shadow: 0 1px 0 rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2); box-shadow: 0 1px 0 rgba(0,0,0,0.2); margin-bottom: -10px; margin-left: 10px; margin-right: 10px; } .scheme-button:hover{ background: #21669f; background: -moz-linear-gradient(top, #3788b9, #21669f); background: -ms-linear-gradient(top, #3788b9, #21669f); background: -o-linear-gradient(top, #3788b9, #21669f); background: -webkit-linear-gradient(top, #3788b9, #21669f); background: linear-gradient(top, #3788b9, #21669f); color: white; } .scheme-button:active, .scheme-button:focus{ top: 1px; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .scheme-button span{ display: inline-block; padding: 5px 10px 5px 40px; } /* Icon (persona) */ .persona-button span:after{ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAPCAYAAAA/I0V3AAAA4klEQVR42o2RWaqEMBRE3YaCiDjPwQGcd9CrysLv4wTyoLFD90dxqbp1EgdPRB7Kskznea6Zn/aPoKoqUUrJOI5m4l2QBfSyLHKep1zXZSae3An1fS/7vst931bGkzuhaZrsLVbGkzuheZ7lOI6HyJ2QUkqv6yrbtv0LT+6E7G0UrfBfP3lZlpoXH4ZBmHgn5Pv+KwxDfqp0XQdgJp6c/RsUBIGOokiSJDE/s21bACbe5Ozp0TdAHMdSFIXUdS1N01C2wpObPT36HifwCJzI0iX29Oh7XP0E3CB9L01TzM+i/wePv4ZE5RtAngAAAABJRU5ErkJggg==) 10px center no-repeat; content: ''; display: block; width: 31px; position: absolute; bottom: 0; left: -3px; top: 0; z-index: 10; } /* Icon (twitter) */ .twitter-button span:after{ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAuIwAALiMBeKU/dgAAActpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+QWRvYmUgSW1hZ2VSZWFkeTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KKS7NPQAAAlFJREFUSA3tlT1rlEEQgO+NihI/EFGQdIKNtaSwEFL4C0Qh/gA//oliI9hY2NuIZaxEWxVLEStRu5CYxhjNx935PHs7m33v7j3QUhx4MrOzszO7s3tver1/RZq/PchwOCxrm6YZzspTAusgE8xayPxcjo/kJQ/rBnWumXaVqBXX5a+D3GQ9bg3qCW2CD6AGcSoLxE6xrzB3GTZhBf8HfEewj2OvoSclJzTxAtyGU0bpzxyKVYzvQi2fGTyAx7CU100egMmDeXIReweewckqcVqE7zqE7IaRtcVujK+JCwy/2uPLVXjBomU4ES3DdwmUvZHq9dGifITXGqyxtfEwdJX+p0kCHkEt7xjcA0/xPE8M0NLPY9W1yIVd2pValKpwwVmfQW/BOpzOvotoUdydRJJYp3ad0jpB3S5fkjIPtsoCtsHFdUtMHgUwi2xgfYnRRKuc4HilIPYt2IRoRbQmNFNJHO9l+yU6bRRdckXRopks7cO+Dz/Al1YXY1hEv4WUO3mzDXbrpOMVo7/GfwNb5+/DuPoeGKbxLtqEb+EJKHRq7FWN/Pt/2UUqjD4PvrJPsA1K7NoT/EyeUVuXzMB4Dlqn2M+crWkB+Hy6W2CBX2DBKOa9LUci7NkFqsBzBN+Eh/AKNmCavMHp9ysJ9njrY6pXX3T08juz3s0FWISjYO93wN/Oe1iBpyxwHL/u+j51F+k8Hjs7TNTZzDH0NqzCV5Jrm9wn6z+fzgLGTQgLOwtHsDFQvsrh79JTE5LA/sYXoP6MGO+4z+5bn46uAv/9f9yB3zm4QJRhHIX3AAAAAElFTkSuQmCC) 4px center no-repeat; content: ''; display: block; width: 31px; position: absolute; bottom: 0; left: -3px; top: 0; z-index: 10; } /* Icon (github) */ .github-button span:after{ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAABBNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgICAgICAgICAgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIj4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpPC94bXA6Q3JlYXRvclRvb2w+CiAgICAgICAgIDx4bXBNTTpEb2N1bWVudElEPnhtcC5kaWQ6RERCMUIwOUY4NkNFMTFFM0FBNTJFRTMzNTJEMUJDNDY8L3htcE1NOkRvY3VtZW50SUQ+CiAgICAgICAgIDx4bXBNTTpEZXJpdmVkRnJvbSByZGY6cGFyc2VUeXBlPSJSZXNvdXJjZSI+CiAgICAgICAgICAgIDxzdFJlZjppbnN0YW5jZUlEPnhtcC5paWQ6RTUxNzhBMkE5OUEwMTFFMjlBMTVCQzEwNDZBODkwNEQ8L3N0UmVmOmluc3RhbmNlSUQ+CiAgICAgICAgICAgIDxzdFJlZjpkb2N1bWVudElEPnhtcC5kaWQ6RTUxNzhBMkI5OUEwMTFFMjlBMTVCQzEwNDZBODkwNEQ8L3N0UmVmOmRvY3VtZW50SUQ+CiAgICAgICAgIDwveG1wTU06RGVyaXZlZEZyb20+CiAgICAgICAgIDx4bXBNTTpJbnN0YW5jZUlEPnhtcC5paWQ6RERCMUIwOUU4NkNFMTFFM0FBNTJFRTMzNTJEMUJDNDY8L3htcE1NOkluc3RhbmNlSUQ+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgqBOjEgAAADH0lEQVRIDZWVzUuVQRTGu6kFJlFRBmKYfRhu+7CVVtCiNi6CPiDalVGgG1v0QdEfEi3bhLgIiigiqo0WbYI+FokStVAoWoVW3n6/cY5Nt0vYA897zpx5zjkz7zt3bmVZDarVakOlUvlpGL8Tsw8ehjvhJrgSzsIP8CW8Bx+TM4k1ZzHf8V9AsNwgthVeg+/hUqBOfWvOT3XqNahkQS/i8aLyfOHXc8t583pznVRvsRETsYN+/Jmi0nf8n3lssVo65fycTob5/bnRwo4INORAH340mMX/BgPRKMZhy7h684R1+nLdVN9vsBG+gAG3fRQOw1cRxH6Bn7KNsPMXoPryNVtvo40afYDzcBecgyvgOKflNtYFjGL2whk4DT15rs6PvAGOoZ3AqvUk7oHWsd45eN2JrXASini3N/EbYP1TQmYJdVlvnog61t3iTvbDDliFZdF5VmiCq3buz9NCAKQ4Or9NOW8d5zrgAXcyYiUQH3EaP45h2RR9faBPOvOg+SLqjdhkIoWqVY+ruGMpbLmy+tWLaOjNhyLqTbiC9qyNVX+sGRel/ulG/qea/HYnmnLQdyhqxwvRpT9r85ts4mUnokm6fxZC//WMfI+1iPGsTaZS6Pfp6eJ9dnJi5rHxO8qS+kZd1nei2FFTb8omYzmob/cueNoYiT8o4G+g7iEw7rw69eAM3A7nofXEuKfoBBSuXApPxmW41J00ob0C474ra52wSRuM++kW/jD8DMUzeBEehM0uC5t2hV0FD8GrcAwGbBC/Eeu2mWfiYFZ8xR6HXvklnjJYm7Vxa68j9qgU4Vu8bDKUGuTEFibv5oQp7GZ4DD6Bz+GRrPMbpO+Qx5cYC694i4v4Ed7Hb0lNcGJl3fivobiRizTjr07C4kEscs4qBh4Qm2jFO9idayStryudBOxu+BYKX9EQ9L+iJyfE94gm55gT7iTwBsfrfrGufgIT0cirfzQysh1UhB/Fw56v0XnZbsvaOMKp/uIDQTRqxD8JH0AxkBOjeNiBhenqQ+wpmK4UbP0G0akU4K+BPXB9bhKvK+x65vbCdPKy5q8GvwD3BqLoPnaIbQAAAABJRU5ErkJggg==) 4px center no-repeat; content: ''; display: block; width: 31px; position: absolute; bottom: 0; left: -3px; top: 0; z-index: 10; } /* Icon (google) */ .google-button span:after{ background: url(data:image/png;base64,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) 4px center no-repeat; background-size: 18px; content: ""; display: block; width: 31px; position: absolute; bottom: 0; left: 0; top: 0; z-index: 10; } /* Icon background */ .scheme-button span:before{ content: ''; display: block; height: 100%; width: 20px; position: absolute; bottom: 0; left: 0; top: 0; z-index: 1; background: #42a9dd; background: -moz-linear-gradient(top, #50b8e8, #3095ce); background: -ms-linear-gradient(top, #50b8e8, #3095ce); background: -o-linear-gradient(top, #50b8e8, #3095ce); background: -webkit-linear-gradient(top, #50b8e8, #3095ce); background: linear-gradient(top, #50b8e8, #3095ce); -moz-border-radius: 3px 0 0 3px; -ms-border-radius: 3px 0 0 3px; -o-border-radius: 3px 0 0 3px; -webkit-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .google-button span:before{ background: white; } /* Triangle */ .scheme-button:before{ background: #42a9dd; content: ''; display: block; height: 26px; width: 26px; position: absolute; left: 2px; top: 50%; margin-top: -13px; z-index: 0; background: -moz-linear-gradient(-45deg, #50b8e8, #3095ce); background: -ms-linear-gradient(-45deg, #50b8e8, #3095ce); background: -o-linear-gradient(-45deg, #50b8e8, #3095ce); background: -webkit-linear-gradient(-45deg, #50b8e8, #3095ce); background: linear-gradient(-45deg, #3095ce, #50b8e8); /* flipped for updated spec */ -moz-box-shadow: 1px -1px 1px rgba(0,0,0,0.1); -ms-box-shadow: 1px -1px 1px rgba(0,0,0,0.1); -o-box-shadow: 1px -1px 1px rgba(0,0,0,0.1); -webkit-box-shadow: 1px -1px 1px rgba(0,0,0,0.1); box-shadow: 1px -1px 1px rgba(0,0,0,0.1); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .google-button:before{ background: white; } /* Inset shadow (required here because the icon background clips it when on the `a` element) */ .scheme-button:after{ content: ''; display: block; height: 100%; width: 100%; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 10; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3); -ms-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3); -o-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3); } /* ======================================================== * Dark button * ===================================================== */ .scheme-button.dark{ background: #3c3c3c; background: -moz-linear-gradient(top, #606060, #3c3c3c); background: -ms-linear-gradient(top, #606060, #3c3c3c); background: -o-linear-gradient(top, #606060, #3c3c3c); background: -webkit-linear-gradient(top, #606060, #3c3c3c); background: linear-gradient(top, #606060, #3c3c3c); } .scheme-button.dark:hover{ background: #2d2d2d; background: -moz-linear-gradient(top, #484848, #2d2d2d); background: -ms-linear-gradient(top, #484848, #2d2d2d); background: -o-linear-gradient(top, #484848, #2d2d2d); background: -webkit-linear-gradient(top, #484848, #2d2d2d); background: linear-gradient(top, #484848, #2d2d2d); } .scheme-button.dark span:before{ /* Icon BG */ background: #d34f2d; background: -moz-linear-gradient(top, #ebac45, #d34f2d); background: -ms-linear-gradient(top, #ebac45, #d34f2d); background: -o-linear-gradient(top, #ebac45, #d34f2d); background: -webkit-linear-gradient(top, #ebac45, #d34f2d); background: linear-gradient(top, #ebac45, #d34f2d); } .scheme-button.dark:before{ /* Triangle */ background: #d34f2d; background: -moz-linear-gradient(-45deg, #ebac45, #d34f2d); background: -ms-linear-gradient(-45deg, #ebac45, #d34f2d); background: -o-linear-gradient(-45deg, #ebac45, #d34f2d); background: -webkit-linear-gradient(-45deg, #ebac45, #d34f2d); background: linear-gradient(-45deg, #d34f2d, #ebac45); /* flipped for updated spec */ } /* ======================================================== * Orange button * ===================================================== */ .scheme-button.orange{ background: #ee731a; background: -moz-linear-gradient(top, #ee731a, #d03116); background: -ms-linear-gradient(top, #ee731a, #d03116); background: -o-linear-gradient(top, #ee731a, #d03116); background: -webkit-linear-gradient(top, #ee731a, #d03116); background: linear-gradient(top, #ee731a, #d03116); } .scheme-button.orange:hover{ background: #cb6216; background: -moz-linear-gradient(top, #cb6216, #b12a13); background: -ms-linear-gradient(top, #cb6216, #b12a13); background: -o-linear-gradient(top, #cb6216, #b12a13); background: -webkit-linear-gradient(top, #cb6216, #b12a13); background: linear-gradient(top, #cb6216, #b12a13); } .scheme-button.orange span:before{ /* Icon BG */ background: #e84a21; background: -moz-linear-gradient(top, #f7ad27, #e84a21); background: -ms-linear-gradient(top, #f7ad27, #e84a21); background: -o-linear-gradient(top, #f7ad27, #e84a21); background: -webkit-linear-gradient(top, #f7ad27, #e84a21); background: linear-gradient(top, #f7ad27, #e84a21); } .scheme-button.orange:before{ /* Triangle */ background: #e84a21; background: -moz-linear-gradient(-45deg, #f7ad27, #e84a21); background: -ms-linear-gradient(-45deg, #f7ad27, #e84a21); background: -o-linear-gradient(-45deg, #f7ad27, #e84a21); background: -webkit-linear-gradient(-45deg, #f7ad27, #e84a21); background: linear-gradient(-45deg, #e84a21, #f7ad27); /* flipped for updated spec */ }