body {
    margin: 0;
    color: #303030;
    background-color: #f6f7f7;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.015em;
    font-size: 16px;
}

/* prevent safari / chrome bouncy overscroll */
html, body {
    overscroll-behavior-y: none;
}

header {
    position: fixed;
    top: 0;
    height: 56px;
    width: 100%;
    overflow-x: visible; /* for the dropdown menu */
    background-color: #303030;
    color: #ffffff;
    border-bottom: 1px solid #303030;
    box-shadow: 0px 1px 3px 1px rgba(48, 48, 48, 0.3), inset rgba(255, 255, 255, 0.2) 0 1px 1px;
}

header h1 {
    display: inline;
    line-height: 56px;
    font-size: 1.6em;
    font-weight: normal;
    letter-spacing: 0.02em;
    border-bottom: 0;
    padding-bottom: 0;
}

a.external {
    padding-right: 1em;
    background: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22%230062FA%22%20d%3D%22M1.5%204.518h5.982V10.5H1.5z%22%2F%3E%3Cpath%20d%3D%22M5.765%201H11v5.39L9.427%207.937l-1.31-1.31L5.393%209.35l-2.69-2.688%202.81-2.808L4.2%202.544z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M9.995%202.004l.022%204.885L8.2%205.07%205.32%207.95%204.09%206.723l2.882-2.88-1.85-1.852z%22%20fill%3D%22%230062FA%22%2F%3E%3C%2Fsvg%3E) no-repeat right center;
}

a.external:hover {
    background: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22%230062FA%22%20d%3D%22M1.5%204.518h5.982V10.5H1.5z%22%2F%3E%3Cpath%20d%3D%22M5.765%201H11v5.39L9.427%207.937l-1.31-1.31L5.393%209.35l-2.69-2.688%202.81-2.808L4.2%202.544z%22%20fill%3D%22%230062FA%22%2F%3E%3Cpath%20d%3D%22M9.995%202.004l.022%204.885L8.2%205.07%205.32%207.95%204.09%206.723l2.882-2.88-1.85-1.852z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E) no-repeat right center;
}

@media (max-width: 980px) {
    body { font-size: 14px; }
    header h1 { display: none; }
    header > nav > ul > li > a { padding: 0 10px !important; }
    .content h1 { display: block; }
    .content .filler { height: 0; }
    .menu { width: 240px !important; }
    .content { margin: 70px 10px 30px 250px !important; }
    .menu > div { margin: 10px !important; }
    .content-nav { margin: 0 10px 30px 250px !important; }
}

@media (max-width: 640px) {
    body { font-size: 12px; }
    .menu { width: 200px !important; }
    .content { margin: 60px 0 30px 200px !important; }
    .menu > div { margin: 10px !important; }
    .content-nav { margin: 0 20px 30px 220px !important; }
}

@media (min-width: 980px) {
    header h1 { display: inline; }
    .content h1:first-of-type { display: none; }
    .content .filler { height: 30px !important; }
}

.logo {
    padding: 0 20px;
    float: left;
    line-height: 56px;
}

.logo::first-letter {
    text-transform: uppercase;
}

.logo * {
    color: inherit;
    text-decoration: none;
}

.logo *:hover {
    color: inherit;
    text-decoration: none;
}

header > nav.switch-menu {
    display: none;
    float: left;
}

header > nav > ul {
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

header > nav > ul > li {
    float: left;
    display: block;
}

header > nav > ul > li > a {
    color: #ffffff;
    display: block;
    padding: 0 13px;
    line-height: 56px;
}

header > nav > ul > li > a.active,
header > nav > ul > li > a:hover {
    color: #0062FA;
    background: #303030;
}

header > nav .version {
    margin: 0 20px;
}

.content-menu {
    margin-left: 280px;
    padding-left: 40px;
}

.menu {
    display: block;
    position: fixed;
    top: 60px;
    left: 0;
    margin: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    width: 280px;
}

.menu > div, .content > div {
    margin: 30px 20px;
}

.menu > div {
    margin-bottom: 140px;
}

.menu > .info {
    padding: 10px;
    margin-bottom: 30px;
}

.content {
    max-width: 1000px;
    margin: 90px 20px 30px 300px;
    padding-bottom: 20px;
}

/* multi-page version */
.main > .content {
    height: 100%;
}

/* single-page version */
body > .content {
    margin: 20px;
    padding: 10px;
}

.content-nav {
    max-width: 1000px;
    height: 60px;
    margin: 0 20px 60px 300px;
}

.content-nav > .previous {
    float: left;
}

.content-nav > .next {
    float: right;
}

.box-decorator {
    background-color: #ffffff;
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

a.disabledLink {
    display: none;
}

/* ------------ */
/* HEADER LINKS */
/* ------------ */

a.deep-link > span.deep-link {
    background-image: url("anchor.svg");
    background-repeat: no-repeat;
    background-position: bottom center;
    /*background-color: red;*/
    display: inline-block;
    width: 16px;
    height: 16px;
    /*
     We are adding a lot of margin on top of title anchors (used as links)
     let space above the anchor for the "title banner" of the website.

     This would look ugly if actually displayed (65px of white space above
     all title anchors), and we cannot cancel it we a negative margin on the
     same element (does not work in firefox), so we cancel it with a negative
     margin-top on anchors links (see -35px higher in this file).
     */
    padding-top: 65px;
}

h1 a.deep-link,
h2 a.deep-link,
h3 a.deep-link,
h4 a.deep-link {
    margin-right: 5px;
    opacity: 0.1;
    /*
     We remove 40px from 65px to end up with a reasonable 25px margin title.
     */
    display: inline-block;
    margin-top: -40px;
}

h1:hover a.deep-link,
h2:hover a.deep-link,
h3:hover a.deep-link,
h4:hover a.deep-link {
    opacity: 1;
}


h1, h2, h3, h4 {
    padding-top: 0;
}

h1, h2, h3, h4 {
    padding-bottom: 0.3em;
    border-bottom: 2px solid #f6f7f7;
}

/* ----------------------- */
/* MARKDOWN MENU & CONTENT */
/* ----------------------- */

.content p {
    line-height: 1.6em;
}

/* markdown tables */
.content table {
    margin-top: 20px;
}
.content table td, .content table th {
    border-bottom: 1px solid #e1e5e6;
    border-right: 1px solid #e1e5e6;
    margin: 0;
    padding: 2px 10px;
}
/* alternating colors */
.content table tr:nth-child(2n), th {
    background-color: #E1E5E6;
}

.menu li {
    padding: 5px 0;
    line-height: 1.4em;
}

.menu div > ol > li > a {
    font-weight: bold;
    font-variant: small-caps;
    line-height: 2.2em;
    font-size: 18px;
}

.menu ul, .menu ol {
    margin-left: -40px;
    list-style-type: none;
}

.menu > div > ul,
.menu > div > ol {
    margin-left: -40px;
}

.menu ul ul, ol ol {
    margin-left: -30px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.version.page {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
}


a {
    color: #0062FA;
    text-decoration: none;
    transition: 0.3s;
}

.menu a {
    color: #303030;
}

a:hover,
a:active {
    color: #0062FA;
    text-decoration: none;
}

a.current {
    color: #ffffff;
    text-decoration: none;
    background-color: #0062FA;
    padding: 5px;
    left: -5px;
    position: relative;
}

a.previous:hover,
a.previous:active,
a.next:hover,
a.next:active {
    text-decoration: underline;
}

code {
    color: #5e6464;
    background-color: #f8f8f8;
    padding: 1px 3px;
    border: none;
    border-radius: 3px;
    -webkit-box-shadow: 1px 1px 2px 0 #afb3b4;
    -moz-box-shadow: 1px 1px 2px 0 #afb3b4;
    box-shadow: 1px 1px 2px 0 #afb3b4;
}

pre > code {
    display: block;
    /*border: 1px solid #ccc;*/
    background-color: #ffffff;
    margin: 1em;
    border: 1px solid #E1E5E6;
    padding: 1em 1em;
    max-width: 100%;
    overflow: auto

}

blockquote {
    background: rgba(174, 199, 232, 0.2);
    border-left: 15px solid rgba(174, 199, 232, 0.7);
    color: #1E77B4;
    padding: 5px 10px;
    margin: 1em;
}

.content img {
    max-width: 100%;
    -webkit-box-shadow: 3px 3px 15px 0 #AFB3B4;
    -moz-box-shadow: 3px 3px 15px 0 #AFB3B4;
    box-shadow: 3px 3px 15px 0 #AFB3B4;
    border: 1px solid #AFB3B4;
    display: block;
}

em {
    background-color: rgba(174, 199, 232, 0.2);
}

/* ------------------------ */
/* WEBKIT SCROLLBAR STYLING */
/* ------------------------ */

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}
::-webkit-scrollbar-thumb {
    background: #5e6464;
    border: 0;
    border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
    background: #000000;
}
::-webkit-scrollbar-thumb:active {
    background: #000000;
}
::-webkit-scrollbar-track {
    background: #e1e5e6;
    border: 0;
    border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
    background: #e1e5e6;
}
::-webkit-scrollbar-track:active {
    background: #e1e5e6;
}
::-webkit-scrollbar-corner {
    background: transparent;
}

/* --------------- */
/*  VERSION POPUP  */
/* --------------- */

#popupLayer {
    z-index: 1000;
    display: none;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000000;
    opacity: 0.7;
}
#versionPopup {
    z-index: 1001;
    display: none;
    border: 1px solid #000000;
    background-color: #ffffff;
    position: fixed;
    /* center the element */
    top: 100px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    height: 450px;
    max-height: 80%;
    width: 400px;
    overflow-y: hidden;
    box-shadow: 3px 3px 5px 0 #000000;
}
#versionList {
    height: 415px;
    overflow-y: auto;
    overflow-x: hidden;
}
#versionList a:hover {
    text-decoration: underline;
}
#versionPopup .head {
    padding: 5px 10px;
    background-color: #303030;
    height: 25px;
    color: #ffffff;
}
#versionClose {
    display: block;
    float: right;
    cursor: pointer;
}
#versionClose:hover {
    background-color: #ffffff;
    color: #303030;
}

/* ---------------- */
/*  DROP-DOWN MENU  */
/* ---------------- */

.burger-container {
    display: block;
    float: right;
    margin-top: 9px;
}

.burger-bar {
    width: 30px;
    height: 4px;
    background-color: #ffffff;
    margin: 5px 0;
    transition: 0.3s;
}

a:hover .burger-bar {
    background-color: #0062FA;
}

.dropdown-menu {
    float: right;
    padding: 0 20px;
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.dropdown-menu:hover {
    background-color: #1D4481;
}

.dropdown-button {
    border: none;
    cursor: pointer;
    background-color: transparent;
    height: 55px;
    padding: 0;
}

.dropdown-text {
    float: left;
    line-height: 55px;
    font-size: 18px;
    margin-right: 10px;
    color: #ffffff;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    right: 0; /* Right-aligned Dropdown Content */
    display: none;
    position: absolute;
    background-color: #f8f8f8;
    min-width: 340px;
    box-shadow: 0 8px 16px 0 rgba(48,48,48,0.2);
    z-index: 1000;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: #303030;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content .separator {
    border-bottom: 2px solid #e1e5e6;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    color: #0062FA;
    background-color: #f6f7f7;
}

/* Show the dropdown menu on hover */
.dropdown-menu:hover .dropdown-content {
    display: block;
}