div#masthead
{
    background: white;
    overflow: hidden;
}

div#masthead section div.tagline span
{
    color: #555;
}

div#masthead div.product_icons
{
    text-align: center;
    padding: 30px 0 50px;
}

div#masthead div.product_icons a
{
    display: inline-block;
    color: #fff;
    text-align: center;
    text-decoration: none;
    padding: 0 10px;
}

div#masthead div.product_icons span
{
    font-size: 1.4em;
    color: #999;
    font-weight: bold;
}

div#masthead div.product_icons img
{
    display: block;
    width: 256px;
}

div.product-picker
{
    display: inline-block;
    padding-top: 10px;
}

div.product-picker a
{
    display: block;
    text-decoration: none;
    font-size: 1.4em;
    color: #999;
    font-weight: bold;
}

div.product-picker span
{
    display: block;
    height: 1px;
    background-color: #ccc;
    margin-top: 10px;
    margin-bottom: 10px;
}

div.product-picker a img
{
    display: inline-block;
    width: 64px;
    vertical-align: middle;
    margin-right: 8px;
}

@media only screen and (max-width: 540px)
{
    /* This helps prevent horizontal scroll
    on short pages, like Login */
    html
    {
        min-height: 120vh;
    }
}

p.notes
{
    font-size: 0.85em;
    font-style: italic;
    color: #777;
}

input[type=password]
{
    font-family: "Lato", Arial, sans-serif;
    font-size: 16px;
    padding: 2px;
    border: 1px solid #ddd;
    -webkit-appearance: none;
    border-radius: 1px;
}
input[type=password]
{
    width: 220px;
}
textarea
{
    width: 220px;
}

input[type=radio]
{
    position: relative;
    top: -2px;
    display: inline-block;
    margin-right: 5px;
}

input[type=submit]:disabled,
input[type=button]:disabled,
button:disabled,
button:hover:disabled
{
    cursor: default;
    background-color: #ccc;
}

section.form tr td:first-child,
section.form tr th:first-child,
form section tr td:first-child,
form section tr th:first-child
{
    width: 175px;
}

tr.email td,
tr.name td
{
    padding-top: 10px;
}

tr.password td
{
    padding-top: 15px;
}

form section h3.account,
form section h3.business
{
    margin-top: 1em;
}

b.total
{
    font-size: 1.2em;
    color: #777;
    letter-spacing: 0.5px;
}

#buyform .buttons .card:disabled
{
    background-color: #ccc;
    margin-right: 0.5em;
}

label.license-valid
{
    color: inherit;
}

label.license-invalid
{
    color: red;
}

a.button,
button
{
    margin-top: 0.5em;
    display: inline-block;
    padding: 8px 15px;
    border-radius: 3px;
    color: #fff;
    background-color: #999;
    border: none;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: normal;
    letter-spacing: 0.5px;
    cursor: pointer;
    -webkit-appearance: none;
    transition: background-color 0.15s ease-in-out;
    -webkit-transition: background-color 0.15s ease-in-out;
}

a.button:hover,
button:hover
{
    background-color: #777;
}

@media only screen and (max-width: 820px)
{
    header nav button
    {
        margin-left: 20px;
    }
}

nav a:focus,
nav button:focus,
#logo:focus
{
    outline-color: #c2c2c2;
}

/*
The following positioning is all to ensure the account nav is right
aligned with the header nav edge. This is complicated by the fact that
the header logo on the left hangs over a bit for the icon, and the nav
hangs over on the right a little to be balanced.
*/
main section nav
{
    float: right;
    position: relative;
    right: -30px;
    top: 5px;
}

@media only screen and (max-width: 1200px)
{
    main section nav
    {
        right: calc(0px - ((100vw - 1140px) / 2));
    }
}

@media only screen and (max-width: 1140px)
{
    main section nav
    {
        right: 0;
    }
}

main section nav form
{
    display: inline;
}

main section nav button
{
    display: inline-block;
    transition: color 0.15s ease-in-out;
    -webkit-transition: color 0.15s ease-in-out;
    margin: 0 0 0 8px;
    text-transform: none;
    letter-spacing: 0;
}

main section nav a,
main section nav button
{
    text-decoration: none;
    background-color: #bbb;
    border-radius: 1.5px;
    padding: 4px 8px 5px;
    color: #fff;
    margin-left: 8px;
}
main section nav a:hover,
main section nav button:hover
{
    background-color: #aaa;
    color: #fff;
}

table.items {
    min-width: 100%;
    margin-top: 15px;
    border-spacing: 0;
    position: relative;
}

@media only screen and (max-width: 820px)
{
    table.items
    {
        min-width: 760px;
    }

    div.scroller
    {
        overflow-x: auto;
    }
}

table.items tr:nth-child(even) {
    background-color: #f9f9f9;
}

table.items td, table.items th {
    padding: 3px 10px;
}

table.items th, table.items td {
    text-align: center;
    border-bottom: 1px solid #ddd;
}

table.items td.shrink, table.items th.shrink {
    width: 0;
    padding: 0;
}

table.search
{
     width: auto;
}

table.search td
{
     vertical-align: middle;
}

table.items button,
table.items .button,
table.search button
{
    margin: 3px;
    padding: 5px 12px;
}

button.danger
{
    background: #c91d1d;
}

button.danger:hover,
button.danger:focus
{
    background: #b31919;
}

.message {
    margin-top: 20px;
    padding: 5px 15px 5px 15px;
    border-radius: 3px;
}

.message::before {
    font-weight: bold;
    padding-right: 15px;
}

.message.error::before {
    content: 'ERROR';
}

.message.error {
    background-color: #f3bebe;
}

.message.info::before {
    content: 'NOTICE';
}

.message.info {
    background-color: #bcdcff;
}

.spacer {
    margin-top: 40px;
    margin-bottom: 40px;
}

hr {
    border-color: #e9e9e9;
    border-style: solid;
}

.disabled b.total {
    color: #ccc;
}


/* Browser-specific tweaks */
html {
    -webkit-tap-highlight-color: transparent;
}

/* firefix */
button::-moz-focus-inner {
    border: 0;
}