html
{
    margin: 0 2em;
    padding: 0;
    background-color: #FFF;
    color: #333;
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 1em;
    line-height: 1.2em;
}
body
{
    margin: 0 auto;
    min-width: 728px;
    max-width: 60em;
}
div.adsense
{
    text-align: center;
    padding: 0.5em 0;
}
.fifty
{
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
    margin: 0;
    padding: 0;
}
#introduction
{
    text-align: center;
}
#survey
{
    border-radius: 10px;
    padding: 1em 2em;
    margin: 1em 0;
    color: #FFF;
    background: #FF8000;
    /**
     * See: http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html
     */
    background-image: -ms-linear-gradient(top, #EBA139 0%, #FF8000 100%); /* IE10 */
    background-image: -moz-linear-gradient(top, #EBA139 0%, #FF8000 100%); /* Mozilla Firefox */
    background-image: -o-linear-gradient(top, #EBA139 0%, #FF8000 100%); /* Opera */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EBA139), color-stop(1, #FF8000)); /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-linear-gradient(top, #EBA139 0%, #FF8000 100%); /* Webkit (Chrome 11+) */
    background-image: linear-gradient(top, #EBA139 0%, #FF8000 100%); /* Proposed W3C Markup */
}
#tweet
{
    border-radius: 10px;
    padding: 0.5em;
    margin: 1em 0;
    text-align: center;
    vertical-align: top;
    color: #FFF;
    background-color: #628AAF;
}
@media only screen and (max-device-width: 480px)
{
    html
    {
        margin: 0;
    }
    body
    {
        margin: 0;
        min-width: inherit;
        max-width: inherit;
    }
    #heading,
    #introduction,
    #tweet,
    #survey,
    #results
    {
        margin: 0.5em;
        padding: 0.5em;
    }
    div.adsense
    {
        border-bottom: none;
        padding: 0;
    }
    .fifty
    {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}
h1,
h2,
h3
{
    font-weight: 400;
    text-align: center;
}
h1
{
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    margin: 0;
    padding: 0.5em 0;
    line-height: 120%;
    font-size: 2em;
}
h1 strong
{
    font-weight: 700;
}
#footer
{
    margin: 1em 0 0 0;
    padding: 0.5em 0;
}
#footer div.addthis_toolbox
{
    width: 320px;
    margin: 0 auto;
}
@-webkit-keyframes anim-a
{
    0%
    {
        font-size: 5em;
    }
    20%
    {
        font-size: 5em;
    }
    100%
    {
        opacity: 1;
    }
}
@-webkit-keyframes anim-b
{
    0%
    {
        opacity: 0;
    }
    50%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}
#results
{
    text-align: center;
    margin: 2em 0;
}
#results h2
{
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    font-size: 2em;
    font-weight: 700;
    -webkit-animation-name: anim-a;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 1s;
}
#results p
{
    -webkit-animation-name: anim-b;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 3s;
}
#results .age
{
    font-weight: 700;
}
li
{
    margin: 0.25em 0;
}
input
{
    font-size: 1em;
    font-family: 'Lato', sans-serif;
}
label
{
    color: #000;
}
input:checked + label
{
    font-weight: bolder;
}
.buttons
{
    text-align: center;
}
.buttons input
{
    font-size: 1em;
    padding: 1em;
    font-weight: 700;
}
.instructions
{
    color: #000;
    font-weight: 700;
}