demo.css

*{margin:0;padding:0}a img{border:none}body{background:#fff;color:#000;line-height:1.4}a:focus,input:focus,textarea:focus,button:focus{outline:none}::-moz-focus-inner{border:0}h1,h2,h3,h4,h5,h6{font-weight:400}li{list-style:none}cite{font-style:normal}.is-tapped,:active{-webkit-transition:none!important;transition:none!important}body{-webkit-tap-highlight-color:rgba(255,255,255,0)}body,input{font-family:Cuprum,sans-serif;font-size:20px}body{background:#f8f8f8}.center-content{width:900px;margin:0 auto;padding:10px}.center-content:after{content:"";display:table;clear:both}.title-section{position:relative;padding-left:60px;margin:30px 0 40px}.title-section .logo{width:50px;height:50px;position:absolute;top:0;left:0}.title-section .name{padding-top:4px;font-size:42px;line-height:1}.title-section .desc{font-size:20px;color:#555}.title-section .button{display:inline-block;padding:0 10px 0 40px;height:40px;line-height:40px;background:#fff;background:-webkit-gradient(linear,top left,bottom left,from(#fff),to(#f0f0f0));background:-webkit-linear-gradient(#fff,#f0f0f0);background:linear-gradient(#fff,#f0f0f0);border-radius:2px;text-decoration:none;position:absolute;top:8px;left:500px;-webkit-transition:color 200ms;transition:color 200ms}.title-section .button::before{content:" ";width:22px;height:24px;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAwCAYAAABqkJjhAAACOUlEQVRo3u2Yv2sUQRTHP+/NbsIp/gAhV4idIvgDxHRiRAULC0kn/ge2YmHUP0FLQYwICVZioYWKQUmpKATSi1ZapDB4YpEi3ozFxvMS9nd2bwfZB6+6mXmfe/P2O/MG0s0BDmEdo3OMcZT67AhG5xDWB3ELWcDU0EQ3BL/EGMcrBD2GsBQbKwhO515F4VbsIn9d9SkAISdRncHoPLAM9GLG94BljM6jOkMYTkZB9El6DG5TgPhh6mKjcNXZmEQmmJjdNG0ie/ID4342DuxcLz9w335uHNjaL0WGH2i8hiOGnBlWbjae4dwMAec8yO6GFnM+x9fJD1+AJWJJLYlpHHvxxFzEMp0MrHoF3yyDadWb+h3cX2T1X7XG39B8NMk46fy0FrgFzgQWvnnI+TUlw/LRQx3+kAzs3DvvgK19n/xjt7vTu4MjYkqV6EV/TjkWs7dgnIPeAEcsufTjrgdd852iXevbBoHflFXqRw3Azm5PVgLOAt9HALpCwJm82+8QybpaXkJ4WYMSPDeGi4W7kQ23GL2fnfXgFMoNjD4oDGj0Ncp1wvAEYMpte2fLO4TwrOQfzvLq+74hv+Y/8DiHNwVwTjJmXC1Rt5erhTZ6b2jx3zgkof8DYa3ER7ZWLXCns39LEIvIAhMT3cGYHeEksLANdaj8av8YsDVqbg1ttbBSI3RNLdTmeo5zO0pgyTVqF/v4xRTKBRyHAIPoJ0Re0e+/qDV2FZMqeimSclvevku0wC1wC/xfAf8BDtWhECYhyAoAAAAASUVORK5CYII=') no-repeat;-webkit-background-size:22px 24px;background-size:22px 24px;position:absolute;top:8px;left:12px;-webkit-transition:opacity 200ms;transition:opacity 200ms}.title-section .button,.title-section .button.was-tapped:hover,.title-section .button.was-tapped:active{-webkit-box-shadow:0 1px 8px rgba(0,0,0,.3);box-shadow:0 1px 8px rgba(0,0,0,.3);-webkit-transform:none;-ms-transform:none;transform:none;color:#333}.title-section .button::before,.title-section .button.was-tapped:hover::before,.title-section .button.was-tapped:active::before{opacity:.8}.title-section .button:hover{color:#000}.title-section .button:hover::before{opacity:1}.title-section .button:active,.title-section .button.is-tapped{-webkit-box-shadow:0 0 3px rgba(0,0,0,.5);box-shadow:0 0 3px rgba(0,0,0,.5);-webkit-transform:translateY(1px);-ms-transform:translateY(1px);transform:translateY(1px)}.section-title{font-weight:400;font-size:26px;padding-bottom:10px;color:#333}.example-section,.howto-section{float:left;width:450px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.example-section{padding-left:60px}.example-section .text-input{border:none;height:34px;line-height:1;padding:0 8px;width:260px;margin-left:-8px;color:#000;background:#fff;border-radius:2px;position:relative;z-index:2}.example-section .text-input,.example-section .text-input.was-tapped:hover,.example-section .text-input.was-tapped:active{-webkit-box-shadow:0 1px 8px rgba(0,0,0,.2);box-shadow:0 1px 8px rgba(0,0,0,.2);-webkit-transform:none;-ms-transform:none;transform:none}.example-section .text-input:active,.example-section .text-input.is-tapped{-webkit-box-shadow:0 0 3px rgba(0,0,0,.3);box-shadow:0 0 3px rgba(0,0,0,.3);-webkit-transform:translateY(1px);-ms-transform:translateY(1px);transform:translateY(1px)}.example-section .case,.example-section .name{height:34px;line-height:34px}.example-section .form{position:relative}.example-section .cases{padding-top:26px}.example-section .case{position:relative;color:#333}.example-section .name{position:absolute;top:1px;right:100%;margin-right:11px;font-size:15px;color:#4787ed}.example-section .genders{margin-left:-8px}.example-section .gender-link{display:inline-block;font-size:15px;padding:0 8px;color:#aaa;height:32px;line-height:32px;-webkit-transition:background 200ms,color 200ms;transition:background 200ms,color 200ms;cursor:pointer;border-radius:0 0 2px 2px;-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0}.example-section .gender-link:hover{background:#eee;color:#999}.example-section .gender-link:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95);-webkit-transition:none;transition:none}.example-section .gender-input{display:none}.example-section .gender-input:checked+.gender-link{color:#333}.example-section .gender-input:checked+.gender-link:hover{color:#222}.howto-section{padding-left:50px;font-size:18px}.howto-section .step{padding-bottom:20px;list-style:decimal}.howto-section .code{font-size:14px;background:#fff;font-family:"PT Mono",monospace;margin:6px 0 0 -8px;padding:4px 8px;-webkit-box-shadow:0 1px 5px rgba(0,0,0,.15);box-shadow:0 1px 5px rgba(0,0,0,.15);border-radius:2px;overflow:auto}.howto-section .string{color:#4787ed}.howto-section .comment{color:#666}.howto-section .line{display:block}.howto-section .link{display:inline-block;color:#4787ed;text-decoration:none;line-height:1;border-bottom:1px solid rgba(71,135,237,.4);-webkit-transition:border 200ms;transition:border 200ms}.howto-section .link:hover{border-bottom-color:#4787ed}.howto-section .link:active{-webkit-transform:translateY(2px);-ms-transform:translateY(2px);transform:translateY(2px)}