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;
}

a
{
    color: #6690cc;
}
a:hover
{
    color: #4075bf;
}

p
{
    margin: 0.6em 0;
}

ul
{
    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
{
    font-family: "Roboto Mono", monospace;
    font-size: 14px;
    background-color: #f3f3f3;
    border-radius: 2px;
    padding: 1px 5px;
}

table.selectors
{
    width: 100%;
}

table.selectors td,
table.selectors th
{
    padding: 5px 3px;
    line-height: 26px; /* provides a consistent baseline with <code> and text */
    border-bottom: 1px solid #ddd;
}

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;
}

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
{
    font-size: 1em;
}

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;
}

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;
}
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;
}

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)
{
    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: 20px 0;
    }
}

/**
 * General
 */

 p.note
 {
     color: #fff;
     padding: 0.5em 0 0.5em 1em;
     border-radius: 3px;
     background-color: #7a94b8;
     font-style: italic;
 }
 p.note a
 {
    color: #fff;
 }

/**
 * Homepage
 */
div#masthead
{
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#A9C8C8', endColorstr='#A8B3C2')"; /* IE 8-9 */
    background: linear-gradient(135deg, #A9C8C8 0%, #A8B3C2 100%);
    overflow: hidden;
}

div#masthead section
{
    width: 1200px;
    margin: 25px auto 0;
}
div#masthead section.screencast
{

}
div#masthead section.screencast div.wrap
{
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
/* 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. */
html.plat_osx div#masthead section.screencast div.wrap
{
    border-radius: 0.333% 0.333% 0 0 / 0.694% 0.694% 0 0;
}
html.plat_linux div#masthead section.screencast div.wrap
{
    border-radius: 0.5% 0.5% 0 0 / 1.042% 1.042% 0 0;
}

#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
{
    font-size: 34px;
    line-height: 50px;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
}
div#masthead section div.tagline span
{
    padding: 0 10px 5px;
    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: 22px;
    background-color: rgba(32, 32, 32, 0.8);
}

html.plat_linux #screencast-title-bar
{
    height: 28px;
}
html.plat_windows #screencast-title-bar
{
    height: 30px;
}

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#masthead div.download
{
    text-align: center;
    margin: 20px auto 0;
}
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: #888;
    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: #777;
}
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;
}

div.feature
{
    float: left;
    width: 45%;
}
div.feature.odd
{
    clear: left;
    padding-left: 2.5%;
}
div.feature.even
{
    margin-left: 5%;
    padding-right: 2.5%;
}
div.feature h3
{
    margin-bottom: 0.5em;
}
div.feature p
{
    margin: 0.8em 0;
}

h2.love
{
    text-align: center;
    margin: 1.2em 0 0;
    font-size: 34px;
    line-height: 54px;
    font-weight: normal;
}
h2.love span
{
    padding: 2px 10px 3px;
    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: 820px)
{
    div.feature.odd,
    div.feature.even
    {
        float: none;
        width: auto;
        margin-left: 0;
        padding: 0;
    }
    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;
    }
}
@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;
        padding-top: 20px;
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
        max-width: 100%;
    }
    div#masthead section.screencast
    {
        padding-top: 0;
    }
    #screencast-title-bar
    {
        width: 100%;
        height: auto;
        box-sizing: border-box;
    }
    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
{
    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;
}

/**
 * Buy
 */

form section
{
    background-color: #fff;
    border-radius: 3px;
    padding: 10px 15px 15px;
    border: 1px solid #ddd;
    width: 400px;
    margin: 1.5em 0;
}
form section > h3:first-child
{
    margin-top: 0;
}
form section *:last-child
{
    margin-bottom: 0;
}
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 a
{
    font-size: 0.85rem;
    line-height: 1.2rem;
    top: 4px;
    left: 10px;
    color: #888;
    position: absolute;
    text-transform: uppercase;
}
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;
}

div.column
{
    float: left;
    margin-right: 4em;
    margin-bottom: 1em;
}
div.column:last-child
{
    margin-left: 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.mth,
table.api td.rtn
{
    font-family: "Roboto Mono", monospace;
}
table.api td.dsc tt,
table.api td.dsc code
{
    font-size: 14px;
}
table.api td.dsc p:first-child
{
    margin-top: 0;
}

dl.enum
{
    margin-left: 20px;
    max-width: 800px;
    line-height: 1.4;
}
a.properties,
a.attributes
{
    display: block;
    margin: 5px 0 0 20px;
}
dl.enum.properties,
dl.enum.attributes,
dl.enum.settings
{
    background-color: #fbfbfb;
    border: 1px solid #eee;
    padding: 12px 18px
}
dl.properties dd > code,
dl.attributes dd > code,
dl.enum.properties dd > code,
dl.enum.attributes dd >code,
dl.enum.settings 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;
    border-bottom: 1px solid #ccc;
    float: left;
    clear: left;
    color: #222;
}
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: 25px;
}
dl.enum dd p:first-child
{
    margin-top: 0;
}
dl.enum dd p,
dl.enum dd ul
{
    margin: 0.5em 0;
}
dl.enum dd h4
{
    margin: 0.5em 0 0 0;
    font-weight: normal;
    font-style: italic;
}
dl.enum dd div.example
{
    font-style: italic;
    border-left: 1px solid #ddd;
    padding-left: 10px;
}
dl.enum dd dl
{
    margin: 10px 0 5px 20px;
    background-color: #fbfbfb;
    border: 1px solid #eee;
    padding: 12px 18px;
}
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;
}

/* CSS for prism.js */

.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;
}