body
{
    background-color: #eee; /* Applying here to style overscroll */
    font-family: "Lato", Arial, sans-serif;
    margin: 0;
    line-height: 1.6;
    color: #555;
    font-size: 16px;
    min-width: 480px;
}
main
{
    display: block;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f9f9f9', endColorstr='#ffffff')"; /* IE 8-9 */
    background: linear-gradient(180deg, #f9f9f9 0%, #fff 250px);
    background-color: #fff; /* Real background color */
    overflow: hidden;
}
main > section
{
    position: relative;
}

a
{
    color: #6690cc;
}
a:hover
{
    color: #4075bf;
}
a:not([href]),
a:not([href]):hover
{
    color: inherit;
}

p
{
    margin: 0.6em 0;
}

ul,
ol
{
    padding-left: 1.8em;
}

table
{
    border-collapse: collapse;
}
td
{
    vertical-align: top;
}
th
{
    vertical-align: top;
    text-align: left;
    font-weight: normal;
}

label
{
    display: block;
}

pre
{
    background-color: #f6f6f6;
    border-radius: 3px;
    padding: 3px 8px;
    overflow-x: auto;
}
pre > code
{
    padding: 0;
    background-color: transparent;
}

tt,
code,
span.setting,
span.command,
span.key,
span.property,
span.attribute,
span.element,
span.method,
span.attribute
{
    font-family: "Roboto Mono", monospace;
    font-size: 14px;
    background-color: #f3f3f3;
    border-radius: 2px;
    padding: 1px 5px;
}

span.parameter
{
    font-family: "Roboto Mono", monospace;
    font-size: 14px;
    font-weight: bold;
}

span.data-type
{
    font-style: italic;
    font-family: "Roboto Mono", monospace;
    font-size: 14px;
    background-color: #f3f3f3;
    border-radius: 2px;
    /* Smaller padding on left due to italic slant */
    padding: 1px 5px 1px 4px;
}

input[type=text],
input[type=email],
input[type=number],
textarea
{
    font-family: "Lato", Arial, sans-serif;
    font-size: 16px;
    padding: 2px;
    border: 1px solid #ddd;
    -webkit-appearance: none;
    border-radius: 1px;
}
input[type=text],
input[type=email]
{
    width: 220px;
}
input[type=number]
{
    width: 50px;
}
textarea
{
    font-family: "Roboto Mono", monospace;
    font-size: 14px;
}
input[type=button],
input[type=submit]
{
    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;
    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;
}
input[type=button]:hover,
input[type=submit]:hover
{
    background-color: #777;
}

h1
{
    font-size: 34px;
    line-height: 54px;
    font-weight: normal;
    margin-bottom: 0.5em;
    margin-top: 0.7em;
}
h1 > span
{
    padding: 2px 10px 3px;
    background-color: rgba(0, 0, 0, 0.05);
    position: relative;
    left: -10px;
    color: #666;
    border-radius: 3px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
h1 a,
h1 a:hover
{
    text-decoration: none;
    color: #555;
}
h2
{
    color: #777;
    font-size: 1.5em;
    font-weight: normal;
    margin-top: 1em;
    margin-bottom: 0.4em;
}
h1 + h2
{
    margin-top: 0.7em;
}
h2 a,
h2 a:hover
{
    text-decoration: none;
    color: #777;
}
h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h1 span.key,
h2 span.key,
h3 span.key,
h4 span.key,
h5 span.key
{
    font-size: 1em;
    text-transform: none;
}

h3
{
    font-size: 1.2em;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: normal;
    margin-top: 0.7em;
    margin-bottom: 0.4em;
}
h4
{
    font-size: 1.1em;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: normal;
    margin-top: 0.8em;
    margin-bottom: 0.5em;
}
h5
{
    font-size: 1.0em;
    color: #888;
    letter-spacing: 0.5px;
    font-weight: normal;
    margin-top: 0.8em;
    margin-bottom: 0.5em;
}

header > section,
footer > section,
main > section
{
    width: 1200px;
    margin: 0 auto;
    position: relative;
}
main > section
{
    width: 1140px;
    background-image: url(/images/icon_grey_top.svg);
    background-repeat: no-repeat;
    background-position: right 32px bottom 0;
    background-size: 256px auto;
    min-height: 350px;
    padding-bottom: 100px;
}
main > section:after
{
    content: "";
    display: table;
    clear: both;
}

html.hq main > section
{
    background-image: none;
}

div.primary
{
    float: left;
    max-width: 100%;
}
div.primary > section
{
    max-width: 800px;
}
/* This emulates the margin collapsing when the div.primary is not present */
div.primary > p:first-child,
div.primary > section:first-child > p:first-child
{
    margin-top: 0;
}

header
{
    background-color: #4B4B4B;
    padding: 18px 0 12px;
}

header > section:after
{
    content: "";
    display: table;
    clear: both;
}

header a#logo
{
    float: left;
}
header a#logo img
{
    width: 220px;
    height: 28px;
    display: block;
    border: none;
    transition: opacity 0.15s ease-in-out;
    -webkit-transition: opacity 0.15s ease-in-out;
}
header a#logo:hover img
{
    opacity: 0.8;
}

/*
The Sublime HQ logo doesn't have symbol, so the space
for that is empty compared to Sublime Text and Sublime
Merge. We relatively position it when space gets tight
so that there isn't an unnatural gap. We leave the space
in the logo for desktop browsers so the word "Sublime"
is always aligned between the three sites. */
@media only screen and (max-width: 1200px)
{
    html.hq > section
    {
        max-width: 1140px;
    }
    html.hq a#logo
    {
        position: relative;
        left: -30px;
    }
}
@media only screen and (max-width: 1140px)
{
    html.hq > section
    {
        max-width: 100%;
    }
}

header nav
{
    float: right;
    line-height: 22px;
}

header nav a
{
    color: #fff;
    text-decoration: none;
    margin-left: 32px;
    display: inline-block;
    transition: color 0.15s ease-in-out;
    -webkit-transition: color 0.15s ease-in-out;
}

header nav a:hover
{
    color: #ddd;
}

header nav a:first-child
{
    margin-left: 0;
}

header nav span.vr
{
    display: inline-block;
    width: 1px;
    margin-left: 32px;
    background-color: rgba(255, 255, 255, 0.5);
    height: 22px;
    vertical-align: bottom;
}

footer > section
{
    width: 1140px;
    padding: 20px 0;
    background-image: url(/images/icon_grey_bottom.svg);
    background-repeat: no-repeat;
    background-position: right 32px top 0;
    background-size: 256px auto;
    min-height: 128px;
}

html.hq footer > section
{
    background-image: none;
}

aside
{
    float: left;
    max-width: calc(100% - 848px);
    margin-left: 48px;
    margin-bottom: 32px;
}
aside h3
{
    margin-bottom: 0.5em;
}
aside > h3:first-child
{
    margin-top: 0;
}
aside p
{
    margin: 0.5em 0;
}
aside > p:first-child
{
    margin-top: 0;
}

aside #callout
{
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 10px 15px;
    color: #555;
    height: 130px;
    overflow: hidden;
    line-height: 1.2;
    margin-bottom: 20px;
    max-width: 220px;
}
aside #callout a
{
    color: #555;
    text-decoration: none;
    display: block;
}
aside #callout img#merge-screenshot
{
    max-width: 450px;
    margin-top: 8px;
    width: 450px;
    display: block;
}
aside #callout img.icon
{
    position: relative;
    width: 20px;
    top: 4px;
    margin-right: 3px;
}
aside #callout span.subhead
{
    font-size: 0.9em;
    opacity: 0.8;
}

main > section > section,
article
{
    max-width: 800px;
    clear: left;
}

kbd
{
    font-family: "Roboto Mono", monospace;
    background-color: #f3f3f3;
    color: #333;
    border-radius: 2px;
    padding: 1px 5px;
    font-size: 14px;
}

span.keys span.mouse
{
    font-style: italic;
}

span.keys i
{
    padding: 0 2px;
    font-style: normal;
}

span.keys b
{
    background-color: #f3f3f3;
    border-radius: 2px;
    padding: 1px 6px;
    border: 1px solid #ccc;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #fff inset;
    display: inline-block;
    font-size: 0.9em;
    color: #444;
    font-weight: normal;
}

span.feature
{
    font-style: italic;
    color: #333;
}

span.file,
span.symbol
{
    font-family: "Roboto Mono", monospace;
    font-size: 14px;
    border-bottom: 1px dotted #aaa;
}

span.file b,
span.symbol b
{
    color: #333;
}

span.menu
{
    background-color: #f3f3f3;
    color: #333;
    border-radius: 2px;
    padding: 1px 5px;
}
span.menu i
{
    color: #aaa;
    font-style: normal;
    font-size: 0.6em;
    padding: 0 2px 0 3px;
    position: relative;
    top: -1px;
}

html.plat_linux span.keys.mac,
html.plat_windows span.keys.mac
{
    display: none;
}
html.plat_osx span.keys.pc
{
    display: none;
}

@media only screen and (max-width: 550px)
{
    div.new-feature
    {
        width: auto;
    }

    header nav span.vr.sub-nav
    {
        margin-left: 0px;
        width: 0;
        height: 8px;
        display: block;
    }
    header nav span.vr.sub-nav + a
    {
        margin-left: 0px;
    }
}
@media only screen and (max-width: 820px)
{
    /*
    This has to be defined like this so it has greater specificity than
    later rules in other stylesheets that do not apply to narrow windows */
    body header
    {
        padding: 15px 0;
    }
    header nav
    {
        float: none;
        clear: left;
        padding-top: 15px;
    }
    header nav a
    {
        margin-left: 20px;
    }
    header nav span.vr
    {
        margin-left: 20px;
    }
}
@media only screen and (max-width: 1160px)
{
    main > section
    {
        background-position: right 20px bottom 0;
        background-size: 192px auto;
    }
    footer > section
    {
        background-position: right 20px top 0;
        background-size: 192px auto;
        min-height: 112px;
    }
}
@media only screen and (max-width: 1240px)
{
    header > section,
    footer > section,
    main > section
    {
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
        max-width: 100%;
    }
}
@media only screen and (max-width: 1100px)
{
    aside
    {
        float: none;
        clear: both;
        max-width: 100%;
        margin: 0;
        padding: 40px 0 20px;
    }
}

/**
 * General
 */

 p.note
 {
     color: #fff;
     padding: 0.5em 0.8em 0.5em 0.8em;
     border-radius: 3px;
     background-color: #7a94b8;
     font-style: italic;
 }
 p.note a
 {
    color: #fff;
 }
 p.note span.setting
 {
    background-color: rgba(255, 255, 255, 0.3);
 }

/**
 * Homepage
 */
div#masthead
{
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#5c4785', endColorstr='#428a8a')"; /* IE 8-9 */
    background: linear-gradient(-40deg,#9a326b 0,#42668a 100%);
    overflow: hidden;
}

div#masthead section
{
    width: 1200px;
    margin: 25px auto 0;
}
div#masthead section.screencast
{
    clear: right;
    margin-top: 0;
    padding-top: 25px;
}
div#masthead section.screencast div.wrap
{
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    position: relative;
}
/* These styles have the box corners follow the title bar corner radius
 * so that the box-shadow doesn't leave empty sharp corners. Percentages
 * are used so when the width is scaled for narrow viewports, the radius
 * is still correct. */
div#masthead section.screencast div.wrap.plat_osx
{
    border-radius: 0.79% 0.79% 0 0 / 1.57% 1.57% 0 0;
}
div#masthead div.wrap.plat_osx #title-overlay
{
    border-radius: 0.82% 0.82% 0 0 / 1.35% 1.35% 0 0;
}

div#masthead section.screencast div.wrap.plat_linux
{
    border-radius: 0.7% 0.7% 0 0 / 1.4% 1.4% 0 0;
}
div#masthead div.wrap.plat_linux #title-overlay
{
    border-radius: 0.7% 0.7% 0 0 / 1.1% 1.1% 0 0;
}

div#masthead > section
{
    position: relative;
}

section#merge-footer
{
    min-height: auto;
}

section#merge-footer #callout
{
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 10px 15px;
    color: #555;
    width: 300px;
    height: 150px;
    overflow: hidden;
    line-height: 1.2;
    margin: 30px auto 0;
}
section#merge-footer #callout a
{
    color: #555;
    text-decoration: none;
    display: block;
}
section#merge-footer #callout img#merge-screenshot
{
    max-width: 450px;
    margin-top: 8px;
    width: 450px;
    display: block;
}
section#merge-footer #callout img.icon
{
    position: relative;
    width: 20px;
    top: 4px;
    margin-right: 3px;
}
section#merge-footer #callout span.subhead
{
    font-size: 0.9em;
    opacity: 0.8;
}

#anim_container
{
    position: relative;
    overflow: hidden;
}
#fallback
{
    position: relative;
    display: none;
}
#title-overlay
{
    padding-top: 13%;
    color: #fff;
    background-color: rgba(32, 32, 32, 0.8);
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 2em;
    transition: opacity 0.2s ease-in-out;
    -webkit-transition: opacity 0.2s ease-in-out;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
}
#title-overlay.show
{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100), progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80202020', endColorstr='#80202020')"; /* IE 8 */
    opacity: 1;
}
#title-overlay div
{
    text-align: center;
    max-width: 896px; margin: 0 auto;
}
#title-overlay div span.feature
{
    color: #ddd;
}


div#masthead section div.tagline
{
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    font-weight: bold;
    font-size: 3em;
    line-height: inherit;
}
div#masthead section div.tagline span
{
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.1);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    border-radius: 3px;
}

#screencast-title-bar
{
    width: 1200px;
    margin: 0 auto;
    display: block;
    height: 28px;
    background-color: rgba(32, 32, 32, 0.8);
}
#screencast-title-bar.plat_linux
{
    height: 47px;
}
#screencast-title-bar.plat_windows
{
    height: 28px;
}

canvas
{
    display: block;
}

section.screencast-meta
{
    width: auto;
    margin: 0 auto;
    padding: 10px 40px 15px;
    font-size: 0.9em;
    color: #777;
    background-color: #fff;
    min-height: 105px;
    max-width: 1200px;
    box-sizing: border-box;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
    position: relative;
    background-image: none;
}
section.screencast-meta .captions > div > b
{
    display: block;
    margin-bottom: 5px;
}
section.screencast-meta .buttons
{
    position: absolute;
    right: 1px;
    top: 5px;
}
section.screencast-meta .buttons a
{
    text-decoration: none;
    color: #999;
    transition: color 0.15s ease-in-out;
    -webkit-transition: color 0.15s ease-in-out;
}
section.screencast-meta .buttons a:hover
{
    color: #666;
}
section.screencast-meta .buttons svg
{
    fill: currentColor;
    padding: 2px 4px;
}
section.screencast-meta .buttons #button-play
{
    display: none;
}
section.screencast-meta #indicators
{
    position: absolute;
    text-align: center;
    top: -3px;
    width: 100%;
}
section.screencast-meta a
{
    text-decoration: none;
    padding: 2px 4px;
    display: inline-block;
}
section.screencast-meta a .jump
{
    border-radius: 2px;
    background-color: #ccc;
    height: 4px;
    width: 35px;
    display: inline-block;
    transition: background-color 0.15s ease-in-out;
    -webkit-transition: background-color 0.15s ease-in-out;
}
section.screencast-meta a.active .jump
{
    background-color: #888;
}
section.screencast-meta a:hover .jump
{
    background-color: #666;
}

div.theme-selector
{
    position: absolute;
    top: -10px;
}

div.os-selector
{
    position: absolute;
    top: -10px;
    right: 0;
}

div.theme-selector a,
div.os-selector a
{
    border: 1px solid #ccc;
    background-color: rgba(238, 238, 238, 0.8);
    text-decoration: none;
    color: #666;
    font-size: 0.8em;
}

div.theme-selector a#theme-selector-dark,
div.os-selector a#os-selector-linux
{
    border-right: none;
    padding: 0 8px 1px 12px;
    border-radius: 3px 0 0 3px;
    float: left;
}

div.os-selector a#os-selector-linux
{
    float: right;
}

div.os-selector a#os-selector-mac
{
    border-left: none;
    border-right: none;
    padding: 0 8px 1px 12px;
    border-radius: 0;
    float: right;
}

div.theme-selector a#theme-selector-light,
div.os-selector a#os-selector-windows
{
    border-left: none;
    padding: 0 12px 1px 10px;
    border-radius: 0 3px 3px 0;
    float: right;
}

div.theme-selector a.current,
div.os-selector a.current
{
    background-color: rgba(204, 204, 204, 0.8);
}

div#masthead div.download
{
    text-align: center;
    margin: 20px auto 25px;
}
div.download div
{
    display: inline-block;
}
div.download .button
{
    padding-left: 20px;
}

div.download .button span
{
    display: none;
}
div.download .button a
{
    display: inline-block;
    background-color: #407fbf;
    color: #fff;
    border-radius: 3px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 15px;
    transition: background-color 0.15s ease-in-out;
    -webkit-transition: background-color 0.15s ease-in-out;
}
div.download .button a:hover
{
    background-color: #369;
}
div.download .current_version,
div.download .changelog
{
    margin-left: 20px;
    color: rgba(255, 255, 255, 0.8);
}
div.download .changelog
{
    padding-right: 20px;
}
div.download .changelog a
{
    color: rgba(255, 255, 255, 0.8);
}
html.plat_windows.arch_64 div.download .button span.win.show_64
{
    display: block;
}
html.plat_windows.arch_32 div.download .button span.win.show_32
{
    display: block;
}
html.plat_linux div.download .button span.linux
{
    display: block;
}
html.plat_osx div.download .button span.mac
{
    display: block;
}

h2.love
{
    text-align: center;
    margin: 1.2em 0 0;
    font-size: 34px;
    line-height: 54px;
    font-weight: normal;
}
h2.love span
{
    padding: 3px 10px;
    background-color: rgba(0, 0, 0, 0.05);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    border-radius: 3px;
}

@media only screen and (max-width: 1240px)
{
    div.os-selector {
        right: 20px;
    }
}
@media only screen and (max-width: 1024px)
{
    div#masthead section div.tagline
    {
        text-align: left;
    }

    div#masthead div.download
    {
        text-align: left;
    }

    div#masthead div.download .button
    {
        padding-left: 0;
    }
}

@media only screen and (max-width: 820px)
{
    div.download .button,
    div.download .current_version,
    div.download .changelog
    {
        display: block;
        padding: 0;
        margin: 0;
    }
    div.download .button
    {
        margin-bottom: 5px;
    }
    #title-overlay
    {
        font-size: 1.4em;
    }
    img
    {
        max-width: 100%;
        width: auto;
        height: auto;
    }

    div#masthead section div.tagline
    {
        font-size: 30px;
        line-height: 46px;
        text-align: center;
    }

    div#masthead div.download
    {
        text-align: center;
    }

    div#masthead #merge-screenshot
    {
        position: absolute;
        top: 5px;
        left: 200px;
    }
}
@media only screen and (max-width: 700px)
{
    div.new-feature
    {
        width: auto;
    }
}
@media only screen and (max-width: 1000px)
{
    section.screencast-meta
    {
        padding-top: 20px;
    }
    #title-overlay
    {
        font-size: 1.6em;
    }
}
@media only screen and (max-width: 1240px)
{
    div#masthead section
    {
        /* Account for switch to border-box */
        width: 1240px;
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
        max-width: 100%;
    }
    #screencast-title-bar
    {
        width: 100%;
        height: auto;
        box-sizing: border-box;
    }
    #screencast-title-bar.plat_linux, #screencast-title-bar.plat_windows
    {
        height: auto;
    }
    section.screencast-meta
    {
        width: auto;
        margin: 0 20px;
        padding-left: 20px;
        padding-right: 20px;
    }
    section.screencast-meta div.captions
    {
        max-width: 100%;
    }
    canvas
    {
        max-width: 100%;
    }
}

/**
 * Download pages
 */

div.release-date
{
    margin-top: -1em;
    font-style: italic;
    margin-bottom: 1em;
    font-size: 0.9em;
    color: #888;
}

div.downloads
{
    margin: 1em 0;
    background-color: #fff;
    border-radius: 3px;
    padding: 10px 15px 15px;
    border: 1px solid #ddd;
}
div.downloads *:first-child
{
    margin-top: 0;
}
div.downloads *:last-child
{
    margin-bottom: 0;
}

section#changelog article
{
    padding: 1em 1em 0.5em;
    border-top: 1px solid #ddd;
}
section#changelog article h3
{
    margin-top: 0;
}
section#changelog article h4,
article.post h4
{
    margin: 0.7em 0 0.3em;
}
section#changelog article ul.topic,
article.post ul.topic,
article.changelog ul.topic
{
    margin: 0.3em 0;
}
section#changelog article.current
{
    border-left: 3px solid #A8B3C2;
}

p.eval,
p.beta,
p.windows-only
{
    font-style: italic;
    color: #777;
}

p.latest
{
    margin-bottom: 0;
    font-weight: bold;
    color: #777;
}

p.newer,
p.unmaintained
{
    font-size: 1.1em;
    color: #fff;
    padding: 0.5em 0 0.5em 1em;
    border-radius: 3px;
    background-color: #d69d5c;
}
p.unmaintained
{
    background-color: #bd7575;
}
p.newer a,
p.unmaintained a
{
    color: #fff;
}

#dl
{
    margin-top: 0.2em;
    list-style-type: circle;
}

html.plat_osx #dl_osx,
html.plat_linux #dl_linux,
html.plat_windows.arch_64 #dl_win_64,
html.plat_windows.arch_32 #dl_win_32
{
    list-style-type: disc;
    font-weight: bold;
}

#direct-downloads
{
    display: none;
}
#direct-downloads.show
{
    display: block;
}
#direct-downloads em,
#direct-downloads em a
{
    color: #777;
}

/**
 * Blog
 */

article.post h2
{
    margin-top: 1em;
}
aside + article.post h2
{
    margin-top: 0;
}
div.meta span
{
    display: inline-block;
    font-size: 0.9em;
    font-style: italic;
}

div.meta span.date
{
    color: #999;
}
div.meta span.author
{
    margin-right: 2em;
    color: #999;
}
div.meta span.by
{
    color: #aaa;
    margin-left: 0.3em;
    margin-right: 0.1em;
}
article.post div.meta
{
    margin-top: -1em;
    margin-bottom: 1em;
}
article.post
{
    border-top: 1px solid #ddd;
    margin-bottom: 2em;
}
aside + article.post
{
    border-top: none;
}
h1 + div.meta
{
    margin-top: -1.1em;
    margin-bottom: 1em;
}
div.rss
{
    padding-top: 20px;
    float: right;
    width: calc(100% - 848px);
    margin-bottom: 0;
}
a.rss img
{
    width: 16px;
    height: 16px;
    border: none;
    position: relative;
    bottom: -3px;
    padding-right: 5px;
    display: inline;
}
@media only screen and (max-width: 1100px)
{
    div.rss
    {
        width: auto;
        padding-right: calc(100% - 800px);
        float: right;
        box-sizing: border-box;
    }
    a.rss
    {
    }
}
aside section.archives h3
{
    margin-top: 0;
}
div.primary:after
{
    content: "";
    display: table;
    clear: both;
}
a.blog_nav.left
{
    padding-right: 10px;
}
a.blog_nav.left img
{
    padding-right: 3px;
}
a.blog_nav.right img
{
    padding-left: 3px;
}

article.changelog
{
    border-left: 3px solid #A8B3C2;
    padding: 0.5em 1em 0.5em;
}
article.changelog > h3:first-child
{
    margin-top: 0;
}

/**
 * Buy
 */

section.form,
form section
{
    background-color: #fff;
    border-radius: 3px;
    padding: 10px 15px 15px;
    border: 1px solid #ddd;
    width: 400px;
    margin: 1.5em 0;
}
section.form > h3:first-child,
form section > h3:first-child
{
    margin-top: 0;
}
section.form *:last-child,
form section *:last-child
{
    margin-bottom: 0;
}
section.form h3,
form section h3
{
    margin-bottom: 0.3em;
    margin-top: 0.5em;
}

form table
{
    width: 100%;
}
form td,
form th
{
    padding: 2px 0;
}
form th
{
    padding-right: 10px;
}
form#f
{
    margin-top: 1.5em;
}
#buyform .price
{
    font-weight: bold;
}
#buyform .buttons
{
    margin-top: 0.5em;
}
#buyform .buttons .card
{
    background-color: #A8B3C2;
    margin-right: 0.5em;
}
#buyform .buttons .card:hover
{
    background-color: #8796ab;
}
#buyform .buttons .paypal
{
    background-color: #A8B3C2;
}
#buyform .buttons .paypal:hover
{
    background-color: #8796ab;
}
#quantity_section
{
    margin-top: 1em;
    margin-bottom: 1.8em;
}
#quantity_section table
{
    width: auto;
}
#quantity_section th
{
    padding-right: 10px;
}
#quantity_section tr.pricing
{
    font-size: 0.85em;
    color: #777;
    font-style: italic;
}
#quantity_section tr.pricing th
{
    text-align: right;
}

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

.license-for td
{
    padding-top: 10px;
}
.info_msg
{
    font-size: smaller;
    color: #777;
    font-style: italic;
}

pre.license_key
{
    margin: 1em 0;
    background-color: #fff;
    border-radius: 3px;
    padding: 10px 15px 15px;
    border: 1px solid #ddd;
}

/**
 * Docs
 */

body.docs h1
{
    margin-bottom: 22px;
}
body.docs:not(.top-level) h1 span
{
    display: inline-block;
    line-height: 42px;
    top: 4px;
    padding-top: 18px;
    min-width: 125px;
}
body.docs h1 > span > nav
{
    font-size: 0.85rem;
    line-height: 1.2rem;
    top: 4px;
    left: 10px;
    color: #888;
    position: absolute;
    padding-left: 0;
    transition: padding-left 100ms 50ms;
}
body.docs h1 > span > nav > a
{
    text-transform: uppercase;
    display: inline;
    color: #888;
}
body.docs h1 > span > nav > a:hover
{
    color: #666;
}
body.docs h1 > span > nav > a.divider
{
    margin-left: 1em;
    border-left: 1px solid #bbb;
}
body.docs h1 > span > nav > a.jump
{
    margin-left: 1em;
}
body.docs h1 > span > nav::before
{
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 18px;
    height: 16px;
    background-image: url(/favicon.ico);
    background-repeat: no-repeat;
    background-position: left 0 top 2px;
    background-size: 16px auto;
    opacity: 0;
    transition: opacity 50ms 0ms;
}
body.docs.dev-build h1 span
{
    min-width: 200px;
}
body.docs.top-level h1
{
    margin-bottom: 0.5em;
}
body.docs.top-level h1 span
{
    padding-top: 2px;
    top: 0;
}

body.docs h2
{
    border-bottom: 1px dotted #ddd;
}

body.docs main > section > section.wide
{
    max-width: none;
    overflow-x: auto;
}

span.best-value,
body.docs span.new,
article.changelog span.new,
body.docs span.updated
{
    color: white;
    padding: 0 5px 0;
    border-radius: 2px;
    font-size: 0.8em;
    display: inline-block;
    margin-left: 0.8em;
}
span.best-value,
body.docs span.new,
article.changelog span.new
{
    background-color: #f09642;
}
body.docs span.updated
{
    background-color: #92c3c3;
}
article.changelog h3 span.new
{
    font-size: 0.8rem;
    text-transform: none;
    position: relative;
    top: -2px;
}

div.column
{
    float: left;
    margin-right: 3em;
    margin-bottom: 1em;
}
div.column:last-child
{
    margin-right: 0;
}
div.column h3
{
    margin-top: 0;
}

div.column.half
{
    margin-right: 4%;
    width: 48%;
}
div.column.half.odd
{
    clear: left;
}
div.column.half.even
{
    margin-right: 0;
}

@media (max-width: 1024px)
{
    div.column,
    div.column.half,
    div.column.half.odd,
    div.column.half.even
    {
        clear: none;
        float: none;
        margin: 0;
        width: auto;
    }
}

table.api
{
    padding-top: 1em;
    width: 100%;
    border-spacing: 0;
    margin-bottom: 1em;
    line-height: 1.2;
}

table.api th
{
    background-color: #eee;
    padding: 5px 6px;
    text-align: left;
    vertical-align: top;
}

table.api th:first-child
{
    width: 30%;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
table.api th:last-child
{
    width: 56%;

    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

table.api td
{
    padding: 5px 6px;
    vertical-align: top;
    font-size: 0.9em;
    line-height: 1.4;
    border-bottom: solid 1px #ddd;
}

table.api td.tags,
table.api th.tags
{
    width: 65px;
    text-align: right;
}

table.enum
{
    width: 100%;
    margin: 15px 0 15px 10px;
}
table.enum td,
table.enum th
{
    padding: 5px 3px;
    line-height: 26px; /* provides a consistent baseline with <code> and text */
    border-bottom: 1px solid #ddd;
}
table.enum th
{
    font-weight: bold
}

table.selectors td.scope_name
{
    width: 35%;
}
table.selectors td.selector
{
    width: 35%;
}

table.selectors td.scope_name,
table.selectors td.selector
{
    padding-right: 20px;
    font-family: "Roboto Mono", monospace;
    font-size: 14px;
}

div.added
{
    font-style: italic;
    color: #999;
}

div.versions
{
    /* JS is used to unhide since JS is required for this functionality */
    display: none;
    position: absolute;
    top: 11px;
    right: 0;
}
div.versions.enabled
{
    display: block;
}
div.versions.enabled.pinned
{
    position: fixed;
    top: 7px;
    /* 100vw - (100vw - 100%) calculates the width without scroll bar */
    right: calc(((100vw - (100vw - 100%) - 1140px) / 2));
    z-index: 3;
}
body.docs h1.pinned
{
    position: relative;
    z-index: 2;
}
body.docs h1.pinned div.background
{
    background: rgba(241, 241, 241, 0.929);
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
body.docs h1.pinned > span
{
    background-color: transparent;
    position: fixed;
    top: 0;
    margin-top: 0;
    left: calc(((100vw - (100vw - 100%) - 1140px) / 2) - 10px);
}
body.docs h1.pinned > span > nav
{
    padding-left: 18px;
    transition: padding-left 100ms 0ms;
    min-width: 250px;
}
body.docs h1.pinned > span > nav::before
{
    transition: opacity 200ms 100ms;
    opacity: 1.0;
}

@media only screen and (max-width: 1240px)
{
    body.docs h1.pinned > span
    {
        left: calc(((100vw - (100vw - 100%) - 1140px) / 2) + 10px);
    }
    div.versions.enabled.pinned
    {
        right: calc(((100vw - (100vw - 100%) - 1140px) / 2) + 20px);
    }
}
@media only screen and (max-width: 1240px)
{
    div.versions
    {
        right: 20px;
    }
}
@media only screen and (max-width: 1140px)
{
    body.docs h1.pinned > span
    {
        left: 10px;
    }
    div.versions.enabled.pinned
    {
        right: 20px;
    }
}

@media only screen and (max-width: 700px)
{
    body.docs h1 > span
    {
        max-width: calc(100vw - (100vw - 100%) - 60px);
    }
    div.versions.enabled
    {
        text-align: right;
    }
    div.versions.enabled span.expanded
    {
        display: none;
    }
    div.versions.enabled a.ver-sel
    {
        display: none;
        float: right;
        clear: right;
        line-height: 1.2em;
        margin-top: 3px;
    }
    div.versions.enabled.expanded a.ver-sel,
    div.versions.enabled a.ver-sel.active
    {
        display: block;
    }
}

section.filtered,
table.api tr.filtered,
table.api dt.filtered,
table.api dd.filtered,
li.filtered,
dt.filtered,
dd.filtered,
div.filtered,
span.filtered,
pre.filtered,
ul.filtered,
p.filtered,
h2.filtered,
h3.filtered,
h4.filtered
{
    opacity: 0.4;
}

span.outlined
{
    border-radius: 3px;
    background-color: #eee;
    padding-bottom: 2px;
    box-shadow: 2px 0 0 1px #eee, -2px 0 0 1px #eee;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

div.alternate-dir
{
    background-color: #f3f3f3;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 10px 15px 15px;
    font-style: italic;
    color: #777;
}
div.alternate-dir p
{
    margin-top: 0;
}
div.alternate-dir ul
{
    margin-bottom: 0;
}

div.versions a.ver-sel
{
    color: white;
    background-color: #999;
    border-radius: 3px;
    padding: 1px 8px 2px;
    text-decoration: none;
}
div.versions a.ver-sel:hover
{
    background-color: #777;
}

div.versions a.ver-sel.active
{
    background-color: #f09642;
}

span.build,
span.python,
span.proprietary,
span.platform,
span.required
{
    display: inline-block;
    line-height: 1.2;
    color: white;
    border-radius: 3px;
    font-size: 13px;
    padding: 1px 3px 1px;
    font-style: normal;
    text-transform: uppercase;
    position: relative;
    top: -1px;
}

h2 span.build,
h2 span.python,
h2 span.proprietary,
h2 span.platform,
h3 span.build,
h3 span.python,
h3 span.proprietary,
h3 span.platform,
h4 span.build,
h4 span.python,
h4 span.proprietary,
h4 span.platform
{
    margin-left: 8px;
    position: relative;
    top: -2px;
}

h4 span.build,
h4 span.python,
h4 span.proprietary,
h4 span.platform
{
    top: -1px;
}

span.build
{
    background-color: #92c3c3;
}
p.available_since span.added
{
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    line-height: 1.2;
    padding: 2px 5px 2px;
    display: inline-block;
    font-style: italic;
    background-color: #e8f2f2;
    color: #777;
}
p.available_since span.version
{
    background-color: #92c3c3;
    display: inline-block;
    line-height: 1.2;
    color: white;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    padding: 2px 5px 2px;
}

span.python
{
    background-color: #876bc7;
}

span.python.filtered
{
    display: none;
}

span.platform
{
    background-color: #4285f0;
}

span.proprietary
{
    background-color: #e0876c;
}

span.build.removed
{
    display: none;
}
.filtered span.build.removed
{
    display: inline-block;
}

.filtered.hide_on_filter
{
    display: none;
}

.tab.filtered,
.tab-content.filtered
{
    display: none;
}

.switchers
{
    display: none;
}
.switchers.enabled
{
    display: block;
}

pre.cli
{
    white-space: pre-wrap;
}

table.api dl.parameters dt
{
    font-family: "Roboto Mono", monospace;
}
table.api dl.parameters dt span.build
{
    font-family: "Lato", Arial, sans-serif;
}
table.api dl.parameters dd
{
    margin-left: 2em;
}

div.pre_constructed,
div.custom_built
{
    float: left;
    width: 48%;
}
div.pre_constructed
{
    margin-right: 4%;
}

table.api td.rtn
{
    min-width: 100px;
}

table.api td.mth,
table.api td.rtn
{
    font-family: "Roboto Mono", monospace;
}
table.api td.rtn
{
    font-size: 0.9em;
    color: #888;
}
table.api td.rtn > span.data-type,
table.api td.rtn > code
{
    color: #555;
}
table.api td.rtn > em
{
    display: block;
    font-size: 0.8em;
    padding-left: 4px;
}
table.api td.mth
{
    padding-left: 24px;
    text-indent: -18px;
}
table.api td.dsc tt,
table.api td.dsc code,
table.api td.dsc span.setting,
table.api td.dsc span.command,
table.api td.dsc span.key,
table.api td.dsc span.property,
table.api td.dsc span.attribute,
table.api td.dsc span.element,
table.api td.dsc span.parameter,
table.api td.dsc span.method,
table.api td.dsc span.attribute,
table.api td.dsc span.data-type,
table.api td.dsc span.file,
table.api td.rtn code,
table.api td.rtn span.data-type
{
    font-size: 0.9em;
}
table.api td.dsc p:first-child
{
    margin-top: 0;
}

dl.enum
{
    margin-left: 10px;
    max-width: 800px;
    line-height: 1.4;
}
a.properties,
a.attributes
{
    display: block;
    margin: 5px 0 0 10px;
}
dt > span + span.data-type
{
    display: inline-block;
    margin-left: 0.5em;
    opacity: 0.7;
}
dt span.required
{
    margin-left: 0.5em;
    font-style: normal;
    background-color: #4db352;
}
table.kinds th
{
    font-weight: bold;
}
table.kinds th.icon
{
    min-width: 2.5em;
}
table.kinds td
{
    vertical-align: middle;
    line-height: 1.2;
}
span.kind_container
{
    display: inline-block;
    background-color: #3e474f;
    padding: 0;
    cursor: default;
}
span.kind
{
    display: block;
    font-weight: bold;
    font-style: italic;
    padding: 0 5px 3px;
    min-width: 1em;
    text-align: center;
}
table.completions_popup
{
    min-width: 300px;
    line-height: 1.2;
}
table.completions_popup td,
table.completions_popup th
{
    padding: 0;
}
table.completions_popup td.help
{
    vertical-align: middle;
    padding: 0 5px;
}
table.completions_popup tr.selected td.trigger,
table.completions_popup tr.selected td.annotation
{
    background-color: #656c72;
}
table.completions_popup td.trigger
{
    min-width: 150px;
    padding: 2px 5px;
    font-family: "Roboto Mono", monospace;
    font-size: 0.9em;
    color: #d8dee9;
    vertical-align: middle;
    background-color: #3e474f;
}
table.completions_popup td.annotation
{
    text-align: right;
    font-style: italic;
    padding: 0 8px;
    font-family: "Roboto Mono", monospace;
    font-size: 0.9em;
    color: #d8dee9aa;
    vertical-align: middle;
    background-color: #3e474f;
}
table.completions_popup td.details
{
    font-size: 0.8em;
    padding: 6px 5px 5px;
    background-color: #2f373f;
}
table.completions_popup td.details span.kind_name
{
    color: #d8dee9;
    border: 1px solid #6699cc;
    border-radius: 2px;
    padding: 0 3px;
    margin-right: 8px;
    font-style: italic;
    line-height: 1.0;
}
table.completions_popup td.details a
{
    color: #6699cc;
    text-decoration: underline;
}

ol.tuple
{
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}
ol.tuple > li:first-child
{
    counter-reset: tuplecounter -1;
}
ol.tuple > li
{
    counter-increment: tuplecounter;
}
ol.tuple > li:before
{
    opacity: 0.8;
    content: counter(tuplecounter) ") ";
    text-indent: 0.5em;
    float: left;
    width: 2em;
}

dl.enum dd p.properties
{
    margin: 0.5em 0 0.5em 10px;
}

dl.enum.settings,
dl.enum.keys
{
    margin-left: 10px;
}

dl.properties dd > code,
dl.attributes dd > code,
dl.enum.properties dd > code,
dl.enum.attributes dd >code
{
    background-color: #ececec;
}
/* clear children */
dl.enum:after,
dl.enum dl:after
{
    content: "";
    display: table;
    clear: both;
}

dl.enum dt
{
    display: block;
    margin: 12px 0 8px 0;
    background: none;
    float: left;
    clear: left;
    color: #222;
}
dl.enum dd dl > dt > span.property,
dl.enum dd dl > dt > span.attribute,
dl.enum dd dl > dt > span.element,
dl.enum dd dl > dt > span.setting
{
    font-family: "Roboto Mono", monospace;
    font-size: 14px;
    border-bottom: 1px solid #ccc;
}
dl.enum dt:first-child,
dl.enum dt + dt
{
    margin-top: 0;
}
dl.enum dt:last-child
{
    margin-bottom: 0;
}
dl.enum dt em,
dl.enum dd code em
{
    opacity: 0.6;
}
dl.enum dd
{
    clear: left;
    margin-left: 5px;
    padding-left: 15px;
}
dl.enum > dd
{
    border-left: 1px solid #ddd;
}
dl.enum dd p:first-child
{
    /* Since dt is floated left, we use padding instead of margin */
    padding-top: 5px;
}
dl.enum dd p,
dl.enum dd ul,
dl.enum dd ol
{
    margin: 0.5em 0;
}
dl.enum dd h4
{
    margin: 0.5em 0 0 0;
    font-weight: normal;
    font-style: italic;
    font-size: 16px;
    text-transform: none;
}
dl.enum dd div.example
{
    font-style: italic;
    border-left: 1px solid #ddd;
    padding-left: 10px;
}
dl.enum dd dl
{
    margin: 5px 0 5px 10px;
    background-color: #fbfbfb;
    padding: 10px;
}
dl.enum dd dl dt
{
    margin: 5px 0 0 0;
}
dl.enum dd dl dt a
{
    font-family: "Lato", Arial, sans-serif;;
    font-size: 1rem;
    text-decoration: none;
}
dl.repositories dt
{
    margin-left: 20px;
    font-weight: bold;
    color: #777;
}
dl.repositories dd
{
    margin-left: 20px;
}
dl.repositories dd pre
{
    margin-top: 8px;
    white-space: pre-wrap;
}

pre.gpg-key,
pre.install
{
    margin-left: 20px;
    white-space: pre-wrap;
}

table.settings
{
    border-spacing: 8px 8px;
}

table.settings td
{
    vertical-align: top;
    border-spacing: 8px 8px;
}
table.settings td.setting
{
    font-family: "Roboto Mono", monospace;
    font-size: 14px;
    padding-right: 1em;
}

table.controls
{
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
}
table.controls.min
{
    width: auto;
}
table.controls.min th,
table.controls.min td
{
    padding-left: 25px;
    padding-right: 25px;
}
table.controls th,
table.controls td
{
    padding: 4px 5px;
    text-align: center;
    border-left: 1px solid #ddd;
}
table.controls th:first-child,
table.controls td:first-child
{
    border-left: none;
}
table.controls thead
{
    border-bottom: 1px solid #ddd;
}
table.controls thead th
{
    background-color: #f3f3f3;
    font-weight: bold;
}
table.controls th.platform
{
    color: #777;
    font-size: 0.9em;
    font-style: italic;
    padding-bottom: 0;
}
table.controls td.keys
{
    padding-bottom: 8px;
}
table.controls tr.command td.keys
{
    padding-top: 8px;
}
table.controls th.command
{
    vertical-align: middle;
}
table.controls tr.command td,
table.controls tr.command th
{
    border-bottom: 1px solid #ddd;
}
table.controls tr.command:last-child td,
table.controls tr.command:last-child th
{
    border-bottom: none;
}
table.controls td.menu,
table.controls td.palette
{
    vertical-align: middle;
}

section.modules div.column
{
    min-width: 150px;
}
section.modules:after
{
    content: "";
    display: table;
    clear: both;
}

/* Fonts */

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: local('Lato Italic'), local('Lato-Italic'),
       url('/fonts/lato-v16-latin-italic.woff2') format('woff2'),
       url('/fonts/lato-v16-latin-italic.woff') format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'),
       url('/fonts/lato-v16-latin-regular.woff2') format('woff2'),
       url('/fonts/lato-v16-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'),
       url('/fonts/lato-v16-latin-700.woff2') format('woff2'),
       url('/fonts/lato-v16-latin-700.woff') format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: local('Lato Bold Italic'), local('Lato-BoldItalic'),
       url('/fonts/lato-v16-latin-700italic.woff2') format('woff2'),
       url('/fonts/lato-v16-latin-700italic.woff') format('woff');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Mono'), local('RobotoMono-Regular'),
       url('/fonts/roboto-mono-v7-latin-regular.woff2') format('woff2'),
       url('/fonts/roboto-mono-v7-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Mono Bold'), local('RobotoMono-Bold'),
       url('/fonts/roboto-mono-v7-latin-700.woff2') format('woff2'),
       url('/fonts/roboto-mono-v7-latin-700.woff') format('woff');
}

/* TEMP: backwards compat styles ; */

body.docs h1 > span > a
{
    font-size: 0.85rem;
    line-height: 1.2rem;
    top: 4px;
    left: 10px;
    color: #888;
    position: absolute;
    padding-left: 0;
    transition: padding-left 100ms 50ms;
    text-transform: uppercase;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #777;
}

.token.punctuation {
    color: #444;
}

.token.null,
.token.operator,
.token.boolean {
    color: #ba8baf;
}
.token.property {
    color: #3c97dd;
}
.token.number,
.token.tag {
    color: #d2322d;
}
.token.string {
    color: #9dbf40;
}
.token.selector {
    color: #ba8baf;
}
.token.attr-name {
    color: #f09642;
}
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    color: #9dbf40;
}

.token.attr-value,
.token.keyword,
.token.control,
.token.directive,
.token.unit {
    color: #9dbf40;
}

.token.statement,
.token.regex,
.token.atrule {
    color: #9dbf40;
}

.token.placeholder,
.token.variable {
    color: #3c97dd;
}

.token.important {
    color: #d2322d;
    font-weight: bold;
}

.token.entity {
    cursor: help;
}

.section {
    clear: both;
    padding: 20px;
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;
    max-width: 1060px;
    display: flex;
    justify-content: center;
}

div.section.group.narrow {
    padding: 10px;
}

section.screencast-meta {
    color: #444;
    margin-bottom: 16px;
}

.section img
{
    display:block;
    margin: auto;
    max-width:100%;
    max-height:100%;
}
.section img.screenshot
{
    border-radius: 4px;
    width: 100%;
    max-width: 480px;
    height: auto;
}
.section img.icon
{
    max-height: 80px;
}

main > section.swimlane
{
    max-width: 1200px;
    width: auto;
    padding: 0;
    background-image: none;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.08);
    border-radius: 4px 4px 0 0;
}

body#homepage footer > section,
body#download-thanks footer > section
{
    box-sizing: border-box;
    max-width: 1200px;
    width: auto;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}
@media only screen and (max-width: 1240px)
{
    main > section.swimlane
    {
        width: auto;
        margin-left: 20px;
        margin-right: 20px;
    }

    body#homepage footer > section,
    body#download-thanks footer > section
    {
        width: auto;
        margin-left: 20px;
        margin-right: 20px;
    }
}

section.swimlane > section
{
    max-width: none;
    padding: 20px 0;
}

section.swimlane > section:nth-child(even)
{
    background-color: #856a93;
    color: white;
}

section.swimlane > section:last-child
{
    background-image: url(/images/icon_grey_top.svg);
    background-repeat: no-repeat;
    background-position: right 32px bottom 0;
    background-size: 256px auto;
}
@media only screen and (max-width: 1240px)
{
    section.swimlane > section:last-child
    {
        background-position: right calc() bottom 0;
    }
}
@media only screen and (max-width: 1160px)
{
    section.swimlane > section:last-child
    {
        background-position: right 20px bottom 0;
        background-size: 192px auto;
    }
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 0 0 0 4%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF SIX  */
.span_6_of_6 {
    width: 100%;
}

.span_5_of_6 {
    width: 82.66%;
}

.span_4_of_6 {
    width: 62.66%;
}

.span_3_of_6 {
    width: 48%;
}

.span_2_of_6 {
    width: 30.66%;
}

.span_1_of_6 {
    width: 13.33%;
}


.section.features
{
    display: block;
    margin-top: 2em;
}

.features .feature
{
    width: 16.66%;
    float: left;
    margin: 0;
}

img.social_icon
{
    position: absolute;
    right: 1rem;
    width: 1rem;
    height: 1rem;

}

img.profile_picture
{
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 1px 1px 5px #3a3a3a4d;
    margin: 0px auto 8px auto;
}

.review
{
    display: inline-block;
    position: relative;
    background-color: white;
    border-radius: 4px;
    box-shadow: 1px 1px 5px #3a3a3a4d;
    padding: 1em;
}

.review_header
{
    display: flex;
    flex-direction: column;
    text-align: center;
}

a.reviewer
{
    text-decoration: none;
    color: #888;
    font-size: 0.8rem;
}

.review_body
{
    display: flex;
    flex-direction: column;
    color: #555;
}

.twitter_follow i {
    position: relative;
    top: 2px;
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("/icons/twitter.svg");
}

.twitter_follow a:hover
{
    background-color: #0c7abf;
    color: white;
}

.twitter_follow a
{
    display: inline-block;
    height: 20px;
    box-sizing: border-box;
    padding: 1px 8px 1px 6px;
    background-color: #1b95e0;
    color: white;
    border-radius: 3px;
    font-weight: 500;
    cursor: pointer;
    font-size: 0.8rem;
    text-decoration: none;
}

.collapse_image
{
    justify-items: center;
    display: flex;
}

@media only screen and (max-width: 820px) {
    div.theme-selector { top: -48px;  }
    div.theme-selector a { line-height: 3.8; }
    .col:first-child { margin-left: auto; }
    .col {  margin: 1% auto; }
    .span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6 { width:100%; max-width:480px; }
    .section { display: flex; flex-flow: column; }
    .image{order:2;}
    .collapse_image {display: none;}
    .text{order:1;}
    .section img {margin: auto; }
}

@media only screen and (max-width: 1024px)
{
    .features .feature
    {
        width: 33.33%;
    }
    .features .feature:nth-of-type(3n+1)
    {
        clear: left;
    }
}
@media only screen and (max-width: 640px)
{
    .features .feature
    {
        width: 50%;
    }
    .features .feature:nth-of-type(2n+1)
    {
        clear: left;
    }
    .features .feature:nth-of-type(3n+1)
    {
        clear: none;
    }
    /* Overrides base CSS to make all images on phones 100% width */
    .features .feature img {
        width: initial;
    }
}

section.swimlane .span_6_of_6 h2
{
    margin-top: 0;
}
section.swimlane h2
{
    font-weight: bold;
    font-size: 2em;
    margin-top: 0.5em;
}
section.swimlane h2.centered
{
    margin-top: 0;
    text-align: center;
    color: white;
}

section.swimlane h3
{
    text-align: center;
    font-size: 1.5em;
    margin-top: 0;
}

div.badge
{
    margin: auto;
    width: 120px;
    min-height: 135px;
    padding: 12px;
    text-align: center;
    font-size: 1em;
    color: #555;
}
div.badge img
{
    margin-bottom: 0.8em;
}

header a#logo img
{
    width: 220px;
    height: 28px;
}

div.download
{
    text-align: center;
}

div.download a.other_platforms,
a.direct_downloads
{
    display: inline-block;
    margin: 10px auto 0;
    color: white;
}

a.direct_downloads:hover
{
    color: #d1d1d1;
}


a.direct_downloads:not([href]):hover
{
    color: inherit;
}


.masthead-direct-downloads
{
    max-width: 500px;
    margin: 0 auto;
    background-color: white;
    display: block;
    box-shadow: 0 0 20px rgba(0,0,0,0.08);
    border-radius: 4px;
}

div.download .button {
    padding-left: 0px;
}

img.product_card_icon
{
    width: 5em;
    height: 5em;
    border: 2px solid white;
    margin: 0px 20px 0px 0px;
}

.product_card
{
    min-height: 13em;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: white;
    border-radius: 4px;
    box-shadow: 1px 1px 5px #3a3a3a4d;
    padding: 1em;
    color: #555;
}

.product_card_header
{
    display: flex;
    align-items: center;
}

.product_card_body
{
    display: block;
}

.product_card_buttons
{
    margin-top: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product_card_buttons > div.download
{
    margin: 0 1em;

}

.footer_start
{
    display: block;
    float: left;
    width: 50%;
}
.footer_end
{
    display: block;
    float: left;
    width: 50%;
    text-align: end;
}