@charset "UTF-8"; /* define the character encoding early */

/* CSS Stylesheet for paint.net documentation | http://www.getpaint.net/doc/latest/
    Heights in em's  ( therefore scaleable with font)
    Widths in %
    Typography in em's
    Compressed with HIGH setting at http://csscompressor.com/
----------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline
}

:focus {
    outline: 0
}

body {
    line-height: 1;
    color: #000;
    background: #fff;
    font-size: 18px
}

ol, ul {
    list-style: none
}

table {
    border-collapse: separate;
    border-spacing: 0
}

caption, th, td {
    text-align: left;
    font-weight: 400
}

blockquote:before, blockquote:after, q:before, q:after {
    content: ""
}

blockquote, q {
    quotes: "" ""
}

img {
    max-width: 100%;
    height: auto;
    width: auto\9;
    border: none
}
    /*highlight any IMG tags lacking an ALT attribute*/
    /*
        img:not([alt]) {
        border: 4px red dashed !important;
    }
    */

    /*highlight any IMG tags that are broken*/
    /*
    img:after {
        content: "\f1c5" " " attr(alt);
        color: red;
    }
    */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, section, pre {
    display: block
}

html, body {
    width: 100%;
    height: 100%;
    background-color: #fff;
    color: #000;
    font: 16px/1.65em 'Segoe UI',Candara,'Bitstream Vera Sans',"DejaVu Sans","Bitstream Vera Sans","Trebuchet MS",Verdana,"Verdana Ref",sans-serif;
    font-weight: 300;
    font-style: normal
}

p {
    font-size: .875em;
    margin-top: .5em
}

ol {
    list-style: decimal;
    padding: 1em 4em;
    margin: 1em 4em;
    text-indent: 1em
}

ul li {
    font-size: .9375em
}

.boxlayout {
    padding: 1em;
    width: 100%;
    margin: -1em auto 2em auto;
}

.boxlayout th {margin-left:5em;}

    .boxlayout td {
        width: 40em;
        font-size: 86%;
        margin: 0 2em;
        padding: 0 !important; 
    }

        .boxlayout td a {
            text-decoration: none !important;
            padding: 0.25em 0.75em;
            color: #333 !important;
            border-radius: .25em;
        }

            .boxlayout td a:hover {
                background: #999;
                color: #fff !important;
            }

a, a:hover, a:focus {
    text-decoration: none;
    transition: all 150ms ease-in;
}

small {
    font-size: .75em;
    color: #6b6b6b;
    display: block
}

strong {
    font-weight: 600
}

em {
    font-style: italic
}

code, pre {
    font-family: 'Anonymous Pro',Monaco,monospace;
    font-size: .75em;
    color: #404040;
    margin: 1em;
    padding: 1em;
    background-color: #EAEAEA;
    white-space: pre-wrap;
}

Msbutton {
    border: 1px solid #858585;
    border-radius: .4em;
    font-size: .875em;
    background-color: #f5deb3;
    padding: .125em .5em
}

PrimSec {
    font-weight: 400;
    color: #004900
}

MenuItem, Tool, ToolOption, Control {
    font-size: .9375em;
    font-weight: 500;
    color: #20007A
}

Control {
    color: #44001D
}

kbd, Window {
    font-family: serif
}

key {
    border: 1px solid #858585;
    border-radius: .25em;
    padding: .125em .5em;
    background-color: #d7d7d7
}

Window {
    border: 1px solid #858585;
    border-top: 3px solid #BCBCBC;
    border-radius: 3px;
    padding: .125em .35em;
    background-color: #fff;
    font-size: .85em;
    color: #1e1e1e
}

header {
    width: 100%;
    background: #38a9e3 url(../images/logo.png) no-repeat 1.25em .75em;
    height: 100px;
    color: #fff;
    text-indent: 5em;
    padding-top: .25em;
    border-bottom: 2px solid #974dea
}

    header h1 {
        font-size: 2em;
        line-height: 1.25em;
        cursor: pointer
    }

    header h2 {
        font-size: 1.2em
    }

    header a {
        color: inherit
    }

#searchboxwrapper {
    float: right;
    padding-top: 1em;
    margin-right: .25em;
    width: 34%;
    max-width: 300px;
    text-indent: 0
}

input[type=text], input[type=submit] {
    float: right;
    margin-top: .25em;
    margin-right: .625em
}

input[type=text] {
    width: 75%
}

#main-content {
    max-width: 96%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2em 2.5em
}

    #main-content > h1, #main-content > h2, #main-content > h3 {
        clear: both;
        font-size: 1.625em;
        font-weight: 400;
        padding: 1em 0
    }

    #main-content h2 {
        font-size: 1.25em;
        font-weight: 300;
        padding-bottom: .24em;
        padding-top: 1.5em;
    }

    #main-content h3 {
        font-size: 1.125em;
        padding: 2.25em 0 .25em
    }

    #main-content h4 {
        padding: 1.25em 0 .25em
    }

    #main-content a {
        text-decoration: underline;
    }

        #main-content a:hover, #main-content a:focus {
            text-decoration: underline
        }

.notebox img, .warningbox img {
    max-width: 94%;
    margin: 2.25em 0;
    clear: both;
}

.notebox, .tipbox, .examplebox, .warningbox {
    width: 92%;
    margin: 2.5em auto 1.5em;
    padding: 0.5em 1em 1.25em 1em;
    border-radius: 1em;
    box-shadow: 3px 3px 6px #BBB;
    text-align: center
}

.tipbox {
    background: #DAFADA url(../images/icontip.png) no-repeat 20px 8px;
    border: 1px solid #ADF7AD
}

.notebox {
    background: #FFFFD4 url(../images/iconnote.png) no-repeat 20px 8px;
    border: 1px solid #FFE6C1
}

.examplebox {
    background: #fff url(../images/iconexample.png) no-repeat 20px 8px;
    border: 1px solid #E5D0F2
}

.warningbox {
    background: #FFD4D4 url(../images/iconwarning.png) no-repeat 20px 8px;
    border: 1px solid #FFA3A3
}

    .notebox h1, .tipbox h1, .examplebox h1, .warningbox h1 {
        float: left;
        margin: 0;
        font-size: 1.125em;
        font-weight: 300;
        padding-left: 2.75em;
    }

    .notebox p, .tipbox p, .examplebox p, .warningbox p {
        clear: both;
        padding: 0.5em 2em;
        text-align: center;
    }

figure {
    margin-top: 3em;
    margin-bottom: 1em;
    border: none;
    text-align: center;
    clear: both;
}

figcaption {
    font-size: 15px;
    font-weight: 300;
    color: #6b6b6b;
    display: block;
    margin-top: .25em;
}

table {
    display: block;
    max-width: 94%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 1.25em
}

    table p, table h2, table h3 {
        white-space: normal;
        padding-bottom: 0
    }

td, th {
    padding: .625em
}

th {
    font-size: 1.125em
}

.spectable {
    margin: 1em;
    padding: 1em;
    border:1px solid #CCC;
    font-size:0.8em;
    line-height:1em;
}

    .spectable thead {
        font-size: 1.25em;
        font-weight:900
    }

#adcontainer {
    clear: both;
    margin: 1.25em auto .25em;
    max-width: 728px;
    height: 90px;
    background: #ddd
}

#google_translate_element {
    clear: both;
    display: block;
    float: right;
    margin: .25em 5%;
    width: 130px;
    height: 53px;
    font-family: 'Segoe UI';
}

footer {
    clear: both;
    display: block;
    background: #38a9e3 url(../images/logo.png) no-repeat right .5em;
    border-top: 2px solid #974dea;
    padding: 1.5em 2.5em;
    text-align: right;
    font-size: .625em;
    line-height: 1.25em;
    color: #fff
}

    footer p {
        margin-right: 6em
    }

    footer a:hover {
        color: #eee;
        text-decoration: underline
    }

#page-count {
    text-align: left;
    font-size: 1.25em
}

.storeversion {
    background-color: gainsboro;
    padding: 2em;
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    opacity: .96
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.fixed-header + .content {
    padding-top: 100px;
}

.main-content > h1:before, .main-content > h2:before, .main-content > h3:before {
    display: block;
    content: " ";
    margin-top: -85px;
    height: 105px;
    visibility: hidden;
}

.shortcut {
    font-size: 75%;
    line-height: 2.75em;
}

    .shortcut::before {
        content: " keyboard shortcut: press ";
    }

    .shortcut::after {
        content: "";
    }

nav {
    height: 46px;
    background: #292f36;
    z-index: 10;
    cursor: default
}

    nav ul {
        list-style-type: none;
        max-width: 750px;
        margin: 0 auto;
        line-height: .9em
    }

        nav ul li {
            display: block;
            position: relative;
            float: left
        }

    nav li ul {
        display: none
    }

    nav ul li a {
        display: block;
        padding: .75em;
        text-decoration: none;
        white-space: nowrap;
        color: #fff
    }

        nav ul li a:hover {
            background: #2c3e50
        }

    nav li:hover > ul {
        display: block;
        position: absolute;
        box-shadow: 3px 3px 5px #888;
        opacity: .98;
        z-index: 10
    }

    nav li:hover li {
        float: none
    }

    nav li:hover a {
        background: #1bc2a2
    }

    nav li:hover li a:hover {
        background: #2c3e50
    }

    nav ul ul ul {
        left: 100%;
        position: relative;
        top: 0
    }

.NavRight1:hover {
    border-left: 6px solid #38a9e3
}

.NavRight2:hover {
    border-left: 6px solid #e9b144
}

.NavRight3:hover {
    border-left: 6px solid #974dea
}

.NavRight4:hover {
    border-left: 6px solid #38e395
}

.NavRight5:hover {
    border-left: 6px solid #e3387c
}

.Main_MenuItem:hover {
    background: #2c3e50
}

.Main_MenuItem {
    display: block;
    padding: .75em;
    text-decoration: none;
    white-space: nowrap;
    color: #fff
}

@media (min-width: 680px) {
    body {
        font-size: 18px
    }
}

@media (max-width: 575px) {
    .fixed-header {
        position: relative
    }

    nav ul li {
        width: 100%;
        background: #292f36
    }

    nav {
        font-size: 16px
    }

    #adcontainer {
        display: none
    }
}

@media (max-width: 520px) {
    .threeColumn {
        font-size: 82%;
    }
}

@media (min-width: 1800px) {
    body {
        font-size: 20px
    }
}

@media (min-width: 2150px) {
    body {
        font-size: 21px
    }
}

@media (min-width: 2500px) {
    body {
        font-size: 22px
    }
}