Github sign-in form example

dabblet.css

/**
 * Github sign-in form example
 */
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;}

body {font: 13px Helvetica, arial, freesans, clean, sans-serif;line-height: 1.4;color: #333;
}

a {color: #4183C4;text-decoration: none;}
a:active, a:focus {outline: none;text-decoration: underline;}

input[type="text"].focus,input[type="text"]:focus, .focused .drag-and-drop, 
input[type="password"].focus,input[type="password"]:focus, 
input[type="email"].focus,input[type="email"]:focus, 
textarea.focus, textarea:focus {
border-color: #51A7E8;
box-shadow: rgba(81, 167, 232, 0.5) 0 0 5px,inset rgba(0, 0, 0, 0.2) 0 1px 1px;
background-color: white;
}

.login-form form input[type="submit"] {display: inline-block;height: 34px;padding: 0;position: relative;top: 1px;margin-left: 10px;font-family: Helvetica, arial, freesans, clean, sans-serif;font-weight: bold;font-size: 12px;color: #333;text-shadow: 1px 1px 0 white;white-space: nowrap;border: none;overflow: visible;background-color: #E1E1E1;background-image: -moz-linear-gradient(white, #E1E1E1);background-image: -webkit-linear-gradient(white, #E1E1E1);background-image: linear-gradient(white, #E1E1E1);background-repeat: repeat-x;border-bottom: 1px solid #EBEBEB;border-radius: 4px;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);cursor: pointer;margin-left: 1px;padding: 0px 13px;-webkit-font-smoothing: subpixel-antialiased !important;
}

.login-form form input[type="submit"]:hover {color: white;text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);border-bottom-color: #0770A0;background-color: #0770A0;background-image: -moz-linear-gradient(#0CA6DD, #0770A0);background-image: -webkit-linear-gradient(#0CA6DD, #0770A0);background-image: linear-gradient(#0CA6DD, #0770A0);background-repeat: repeat-x;
}

#login {width: 31em;}
.login-form {margin: 5em auto;}
.login-form h1 {position: relative;color: white;font-size: 16px;font-weight: bold;background-color: #6C8393;background-image: -moz-linear-gradient(#7F95A5, #6C8393);background-image: -webkit-linear-gradient(#7F95A5, #6C8393);background-image: linear-gradient(#7F95A5, #6C8393);background-repeat: repeat-x;border: 1px solid #6E8290;border-bottom: 1px solid #586873;border-radius: 3px 3px 0 0;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);margin: 0;padding: 8px 18px;-webkit-font-smoothing: antialiased;
}
.login-form h1 a {font-size: 70%;font-weight: normal;color: #E9F1F4;text-shadow: none;}
.login-form .formbody {padding: 2em;
background-color: white;
margin: 0 0 1em 0;
overflow: hidden;
border-style: solid;
border-width: 0 1px 1px 1px;
border-color: #E9F1F4 #D8DEE2 #D8DEE2;
border-radius: 0 0 3px 3px;
}
.login-form form label,.login-form form .label, label.standard {
font-size: 110%;color: #2F424E;
text-shadow: 0 -1px 0 rgba(100, 100, 100, 0.1);
display: inline-block;
cursor: text;
}

.login-form form label a {font-size: 90%;}
.login-form form input.text {font-size: 110%;}
.login-form form input.text, .login-form form textarea {padding: 5px;
margin: .2em 0 1em 0;
background-color: white;
}

input.text {padding: 1px 0;}

input[type="text"],input[type="password"], input[type="email"], textarea {
border: 1px solid #CCC;border-radius: 3px;outline: none;
background: #FAFAFA none;box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 1px;
}

.login-form form input[type="submit"] {
display: inline-block;height: 34px;padding: 0;position: relative;
top: 1px;margin-left: 10px;
font-family: Helvetica, arial, freesans, clean, sans-serif;
font-weight: bold;
font-size: 12px;color: #333;text-shadow: 1px 1px 0 white;
white-space: nowrap;border: none;
overflow: visible;
background-color: #E1E1E1;
background-image: -moz-linear-gradient(white, #E1E1E1);
background-image: -webkit-linear-gradient(white, #E1E1E1);
background-image: linear-gradient(white, #E1E1E1);
background-repeat: repeat-x;border-bottom: 1px solid #EBEBEB;
border-radius: 4px;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
cursor: pointer;margin-left: 1px;
padding: 0px 13px;-webkit-font-smoothing: subpixel-antialiased !important;
}

button.classy.oauth,a.button.classy.oauth, .login-form form .submit_btn input {
color: white;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
background-color: #3A7999;
background-image: -moz-linear-gradient(#4794BC, #3A7999);
background-image: -webkit-linear-gradient(#4794BC, #3A7999);
background-image: linear-gradient(#4794BC, #3A7999);
background-repeat: repeat-x;
border-bottom-color: #438BB1;
}

dabblet.html

<div id="login" class="login-form">    
<form accept-charset="UTF-8" action="/session" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="authenticity_token" type="hidden" value="egNwg97qxYbXdqKzKBBNawHqoO0daH8aLCc44sy7zO8=" />
</div>      
<h1>        Sign in          <a href="https://github.com/plans">(Pricing and Signup)</a>      
</h1>    
<div class="formbody">        
<label for="login_field">Username or Email<br />          
<input autocapitalize="off" autofocus="autofocus" class="text" id="login_field" name="login" style="width: 21em;" tabindex="1" type="text" />        
</label>
       <label for="password">          Password 
       <a href="/sessions/forgot_password">(forgot password)</a>          
       <br />          
       <input autocomplete="disabled" class="text" id="password" name="password" style="width: 21em;" tabindex="2" type="password" />        </label>
       <label class='submit_btn'>          
       <input id="return_to" name="return_to" type="hidden" value="/login/oauth/authorize?client_id=da931d37076424f332ef&amp;scope=gist%2Cuser" />                    
       <input name="commit" tabindex="3" type="submit" value="Sign in" />        
       </label>    
       </div>
       </form>
       </div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}