body {
    font: 100% Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 20px 50px;
}
a {
    color: #333;
}
ol, ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1 {
    text-transform: uppercase;
}
h1:after {
    content: ':';
    font-size: 140.625%; /* 45px / 32px */
}

@-webkit-keyframes dropNav {
    from { left: -800px; }
    60%  { left: 10px; }
    to   { left: 0; }
}
@keyframes dropNav {
    from { left: -800px; }
    60%  { left: 10px; }
    to   { left: 0; }
}

#nav {
    position: relative;

    -webkit-animation: dropNav .23s ease-out;
            animation: dropNav .23s ease-out;
}
#nav li {
    width: 400px;
    margin-bottom: 2px;

    font-size: 87.5%; /* 14px */
    text-align: right;
}
#nav b {
    float: left;
}
#nav a {
    display: block;
    padding: 7px 12px 5px;
    overflow: hidden;

    background-color: #fbd606;
    text-decoration: none;

    -webkit-transition: all .15s;
            transition: all .15s;
}
#nav a:hover,
#nav a:focus {
    color: #fff;
    background-color: #333;
}
#nav a:active {
    background-color: #fff;
}