* { box-sizing: border-box; padding:0; margin: 0; }
body{font-family:Verdana,Arial,sans-serif;color:#fff;font-size:12px;background:#333 url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAZAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAgICAgICAgICAwMDAwMDAwMDAwEBAQEBAQECAQECAgIBAgIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMD/8AAEQgABQAFAwERAAIRAQMRAf/EAFYAAQAAAAAAAAAAAAAAAAAAAAoBAQAAAAAAAAAAAAAAAAAAAAAQAAEDAgcAAAAAAAAAAAAAAAMCExQSBAABETIjJDURAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AGpdmTrn6u9CFtwIDdZLe3Ivniv0DMYaJEhohBMNjwH/2Q==)}
form{background:#112;width:300px;margin:30px auto;border-radius:.4em;border:1px solid #191919;overflow:hidden;position:relative;box-shadow:0 5px 10px 5px rgba(0,0,0,.4)}
form:after{content:"";display:block;position:absolute;height:1px;width:100px;left:20%;background:linear-gradient(left,#111,#444,#b6b6b8,#444,#111);background:-moz-linear-gradient(left,#111,#444,#b6b6b8,#444,#111);top:0}
form:before{content:"";display:block;position:absolute;width:8px;height:5px;border-radius:50%;left:34%;top:-7px;box-shadow:0 0 6px 4px #fff}
.inset{padding:20px;border-top:1px solid #19191a}
form h1{font-size:18px;text-shadow:0 1px 0 #000;text-align:center;padding:15px 0;border-bottom:1px solid rgba(0,0,0,1);position:relative}
form h1:after{content:"";display:block;width:250px;height:100px;position:absolute;top:0;left:50px;pointer-events:none;transform:rotate(70deg);-ms-transform:rotate(70deg);-webkit-transform:rotate(70deg);background:linear-gradient(50deg,rgba(255,255,255,.15),rgba(0,0,0,0));background:-moz-linear-gradient(50deg,rgba(255,255,255,.15),rgba(0,0,0,0));background:-o-linear-gradient(50deg,rgba(255,255,255,.15),rgba(0,0,0,0));background:-webkit-linear-gradient(50deg,rgba(255,255,255,.15),rgba(0,0,0,0))}
label{color:#ccc;display:block;padding-bottom:9px}
input[type=password],input[type=text]{color:#112;font-size:14px;font-weight:700;width:100%;padding:8px 5px;background:linear-gradient(#aaa,#fff);background:-moz-linear-gradient(#aaa,#fff);border:1px solid #222;box-shadow:0 1px 0 rgba(255,255,255,.1);border-radius:.3em;margin-bottom:25px;margin-right:none}
input[type=password]:hover,input[type=text]:hover,label:hover~input[type=password],label:hover~input[type=text]{background:#f5f5f5}
label[for=remember]{color:#fff;display:inline-block;padding-bottom:0;padding-top:5px}
input[type=checkbox]{display:inline-block;vertical-align:top}
.p-container{padding:0 20px 20px}
.p-container:after{clear:both;display:table;content:""}
.p-container span{display:block;float:left;color:#0d93ff;padding-top:8px}
input[type=submit]{padding:5px 20px;border:1px solid rgba(0,0,0,.4);text-shadow:0 -1px 0 rgba(0,0,0,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 10px 10px rgba(255,255,255,.1);border-radius:.3em;background:#0184ff;color:#fff;float:right;font-weight:700;cursor:pointer;font-size:13px}
input[type=submit]:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -10px 10px rgba(255,255,255,.1)}