footer, header, section {
    display: block
}

html, body, h1, ul, ul li, footer p {
    list-style: none;
    margin: 0;
    padding: 0
}

html, input, textarea, kbd, samp {
    font: 14px/1.4 Helvetica, Arial
}

html {
    background: #3d3d3d
}

body {
    width: 840px;
    margin: 2em auto;
    background: #fff;
    padding: 20px 40px;
    -moz-box-shadow: 0 0 2em #000;
    -webkit-box-shadow: 0 0 2em #000;
    box-shadow: 0 0 2em #000
}

a {
    text-decoration: none;
    padding: 2px 1px 0;
    border-bottom: 1px solid #d3d3d3;
    color: #000
}

a:hover, a:focus {
    border-color: #3d3d3d
}

textarea, #result, input {
    width: 828px;
    height: 100px;
    border: 1px solid #3d3d3d;
    padding: 5px
}

#result {
    background: #ffffe0
}

samp {
    border-left: .4em solid #aaa;
    padding-left: .7em
}

input {
    cursor: pointer;
    float: right;
    height: 30px;
    width: 100px;
    position: relative;
    top: -7px;
    background: #3d3d3d;
    color: #d3d3d3
}

input:focus, input:hover {
    background: #d3d3d3;
    color: #3d3d3d
}

.js input {
    display: none
}

#about, #about samp, #about kbd, footer {
    font-size: 14px
}

.js #about > * {
    display: none
}

.js #about h1 {
    display: block
}

ul li {
    display: inline
}

ul li::after {
    content: ', '
}

ul li:last-child::after {
    content: '.'
}

section {
    width: 100%;
    overflow: hidden
}

.hidden h1 {
    color: #666
}

h1, textarea, p, #keyboard, ul {
    margin: 0 0 1em
}

footer {
    margin-top: 1em;
    clear: both
}

header h1 {
    font-size: 22px
}

section h1 {
    font-size: 16px
}

ol, ol li {
    list-style: none;
    margin: 0;
    padding: 0
}

ol {
    display: block;
    clear: both;
    position: relative;
    width: 840px
}

ol kbd {
    font-family: 'VAG Rounded', 'Century Gothic', Arial;
    font-size: 12px
}

ol li {
    float: left;
    background: #000;
    border: 2px solid #aaa;
    padding: 2px 7px 1px;
    color: #fff;
    text-align: center;
    width: 39px;
    height: 47px;
    line-height: 45px;
    margin-right: 2px;
    margin-bottom: 2px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition-property: border, color;
    -webkit-transition-duration: .5s;
    -webkit-transition-timing-function: ease-in-out
}

#row-1 li {
    width: 40px;
    height: 20px;
    line-height: 18px
}

#row-2 li.delete {
    width: 53px
}

#row-3 li.tab {
    width: 53px
}

#row-4 li.caps-lock {
    width: 63px
}

#row-4 li.return {
    width: 88px
}

#row-5 li.shift {
    width: 105px
}

#row-6 li {
    width: 36px
}

#row-6 li.cmd {
    width: 46px
}

#row-6 li.space {
    width: 300px
}

#row-6 li.up, #row-6 li.right, #row-6 li.down, #row-6 li.left {
    position: absolute;
    height: 20px;
    line-height: 18px;
    right: 0;
    top: 27px
}

#row-6 li.up {
    top: 0;
    right: 54px
}

#row-6 li.down {
    right: 54px
}

#row-6 li.left {
    right: 108px
}

ol li.clickable {
    cursor: pointer;
    color: #3c3
}

ol li:hover, ol li:focus {
    border-color: #090;
    color: #d3d3d3
}

.js #keyboard {
    margin-top: 1em
}

html#ios {
    -webkit-text-size-adjust: none;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d0d0d0), to(#a7a7a7));
    min-height: 100%
}

html#ios, #ios input, #ios textarea, #ios kbd, #ios samp {
    font-size: 18px
}

#ios body {
    width: 98%;
    margin: 0;
    padding: 0 2%;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: transparent
}

#ios textarea, #ios #result, #ios input {
    width: 95%;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px
}

#ios #keyboard {
    zoom: 33%;
    width: 100%
}

#ios ol {
    width: 850px
}

#ios #keyboard ol kbd {
    font-size: 6px
}

#ios iframe {
    width: 100% !important
}

#ios #copy {
    overflow: hidden;
    margin: 13px auto 0;
    width: 100%
}

#ios #copy div {
    -webkit-border-radius: 4px;
    border-radius: 4px;
    float: left;
    margin-right: 4px;
    border: 1px solid #d3d3d3;
    width: 20px;
    height: 20px;
    padding: 10px 10px 8px;
    margin: 0 5px 13px;
    font-size: 25px;
    line-height: 18px;
    text-align: center;
    text-shadow: rgba(255, 255, 255, .8) 0 1px 0;
    border: 1px solid #777;
    color: #000;
    background: #fff
}

#ios #copy p {
    margin: 0
}

#ios footer {
    margin: 0 8px 1em;
    text-shadow: 1px 1px 1px #999
}

#ios footer a {
    color: #222;
    border-color: #222
}