html
{
    margin: 0;
    padding: 0;
    background: black;
    
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.35;
    color: #DDD;
}

body
{
    margin: 0;
    padding: 0;
    
    -webkit-text-size-adjust: 100%;
}

h1
{
    margin-top: 0.5em;
    margin-bottom: 0.25em;
}

a img
{
    border: none;
}

a:link,
a:visited
{
    color: #6C3;
}
a:hover,
a:active,
a:focus
{
    color: #9F9;
}

section
{
    margin: 2em 0.75em;
}

dt
{
    margin-top: 3em;
    
    font-size: 1.1em;
    font-weight: bold;
}
dt:first-child
{
    margin-top: 1em;
}

dd
{
    margin: 1em 0;
    
    color: #AAA;
}

dd.image
{
    text-align: center;
}

small
{
    font-size: 0.7em;
    color: #666;
}

/* !-- Forms -- */

form div
{
    margin: 1em 0;
}

form dt
{
    margin-top: 1em;
    
    font-size: 1em;
}

form dd
{
    margin-top: 0.25em;
    margin-bottom: 0;
}

input[type="text"],
input[type="email"],
input[type="submit"],
textarea
{
    box-sizing: border-box;
    width: 100%;
    border-radius: 4px;
    
    font-size: 1em;
}

input[type="text"],
input[type="email"],
textarea
{
    padding: 0.25em;
    background: #333;
    border: 1px solid #666;
    
    color: white;
}

textarea
{
    vertical-align: top; /* Remove extra space below */
}

input[type="submit"]
{
    padding: 0.5em 0.75em;
    background: #6C3;
    border: none;
    -webkit-appearance: none;
    
    color: white;
    cursor: pointer;
}

div.actions
{
    margin: 1em 0;
    
    text-align: center;
}

.success
{
    color: #6C3;
}

.error
{
    color: #FB0;
}

dd.error
{
    margin-top: 0;
    font-style: italic;
}

#form-support
{
    margin-top: 2em;
}

/* !-- Sections -- */

header
{
    text-align: center;
}

#hero
{
    width: 280px;
    margin: 0 auto;
}

#hero img
{
    display: block;
}

section#tagline
{
    margin: 0;
    padding: 0.1em 0.75em;
    background: #333;
    
    text-align: center;
}

section#download
{
    margin-top: 2em;
    margin-bottom: 2em;
    
    text-align: center;
    line-height: 1.2;
}

section#download div#badges a
{
    margin: 0 5px;
}

section#download p
{
    width: 80%;
    margin: 0.5em auto;
}

section#download,
section#faq,
section#support
{
    padding-bottom: 20px;
    background: transparent url('../images/separator.png') center bottom no-repeat;
    background-size: 50px 10px;
}

section#faq dd
{
    clear: left;
}

.illustration-markers
{
    overflow: auto;
    width: 100%;
    max-width: 500px;
    margin: 1em auto;
    
    font-size: 0.7em;
    text-align: center;
}

.illustration-markers span
{
    display: block;
    float: left;
    width: 25%;
}

.illustration-markers img
{
    padding: 0 5px;
}

footer
{
    margin: 2em 0.75em;
    line-height: 1.35;
    
    color: #666;
}

/* !-- Content -- */

.status
{
    font-weight: bold;
}
.status.realtime
{
    color: hsl(194, 90%, 70%);
}
.status.ahead
{
    color: hsl(108, 85%, 70%);
}
.status.delayed
{
    color: hsl(40, 90%, 70%);
}

.status.scheduled,
strong.keyword
{
    color: #EEE;
}

/* !-- DESKTOP Version -- */

@media screen and (min-width: 800px) {

html
{
    max-width: 1200px;
    margin: 0 auto;
    
    line-height: 1.5;
}

section,
footer
{
    margin-left: 0;
    margin-right: 0;
}

input[type="text"],
input[type="email"],
input[type="submit"],
textarea
{
    width: auto;
}

div.intro
{
    float: left;
    clear: left;
    position: fixed;
    width: 320px;
}

section#download
{
    background: none;
}

div.main
{
    margin-left: 350px;
    margin-right: 1em;
    padding-top: 90px;
}

}