* {
    box-sizing: border-box;
}
body {
    padding: 0;
    margin: 0;
    color: #666;
    background: #fafafa;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    line-height: 1.4
}

header {
    display: block;
    padding: 3em 3em 2em 3em;
    background-color: #fff
}

header p {
    margin: 0 0 0 0;
}

nav {
    font-size: .7em;
    display: block;
    width: 100%;
    margin: 0 0 2em 0
}

nav a {
    display: inline-block;
    text-decoration: none;
    margin-left: 2em;
    color: #0f7595;
    white-space: nowrap
}

nav a:hover {
    text-decoration: underline
}

nav a.current {
    font-weight: bold;
    text-decoration: underline;
    color: #666
}

section {
    border-top: 1px solid #eee;
    padding: 2em 3em 0 3em
}

ul {
    margin: 0;
    padding: 0
}

.icon-boxes li {
    display: inline-block;
    background-color: #fff;
    position: relative;
    margin: 0 2em 2em 0;
    vertical-align: top;
    border: 1px solid #ccc;
    padding: 1em 1em 1em 1em;
    cursor: default
}

.icon-box {
    margin: 0;
    width: 144px;
    height: 144px;
    position: relative;
    background: #ccc url(data:image/gif;base64,R0lGODlhDAAMAIAAAMzMzP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQjk4OTI0MUY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQjk4OTI0MkY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNCOTg5MjNGRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCOTg5MjQwRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAAAwADAAAAhaEH6mHmmzcgzJAUG/NVGrfOZ8YLlABADs=) top left repeat;
    border: 1px solid #ccc;
    display: table-cell;
    vertical-align: middle;
    text-align: center
}
.icon-box.inverted {
    background: black;
}

.icon {
    display: inline;
    display: inline-block
}

.snippet-popover {
    position: absolute;
    display: none;
    opacity: 0;
    bottom: 0;
    left: 0;
    background: white;
    border: 1px solid #ccc;
    padding: 16px;
    z-index: 1;
    transition: all .3s;
}
.snippet-popover.active {
    display: block;
    opacity: 1;
}

pre {
    margin: 0;
    margin-bottom: 20px;
}

h2 {
    margin: 0;
    padding: 5px 0;
    font-size: 1em;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

h4 {
    margin: 0;
}

footer {
    display: block;
    margin: 0;
    padding: 0 3em 3em 3em
}

footer p {
    margin: 0;
    font-size: .7em
}

footer a {
    color: #0f7595;
    margin-left: 0
}