@font-face {
    font-family: 'Source Serif Pro';
    font-style: normal;
    font-weight: 400;
    src: url(source_serif_pro.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



html {
    font-family: "Source Serif Pro", serif;
    font-size:110%;

    margin: 0;
    width: 100vw;
    height: 100vh;
}

body {
    margin: 0;
    margin-bottom: 1.5em;
}

a {
    text-decoration: none;
    color: rgb(13, 81, 172);
}

h1, h2, h3, h4 {
    color:#ba3925;
    font-weight:lighter;
}

h2 {
    margin-top: 2.5em;
}

h3 {
    margin-top: 2.0em;
}


/* Table of content */
#table-of-content {
    position: fixed;
    overflow: auto;
    height: 100%;
    left: 0;
    top: 0;
    width: 250px;
    border-right: 1px solid black;
    background-color: #f8f8f7;
    font-size: 0.8em;
}



#table-of-content ul {
    list-style-type: none;
    margin:2em;
    margin-top: 3em;
    padding:0;
}

#table-of-content a,
#navigator-top a {
    color: rgb(1, 7, 97);
}


.iframe-resizable {
    height: 500px;
    width: 800px;
    overflow: auto;
    resize: both;
}

::-webkit-scrollbar-track {
    width: 60px;
}


/* To surround all main content to be centered */
#main-content {
    text-align: justify;
    max-width: 1200px;
    margin: auto;
}

#main-content-margin {
    margin-left: 260px;
    margin-right: 20px;
}



/* Top navigation with previous and next */
#navigator-top {
    position: sticky;
    top: 0;
    background-color: rgba(255, 255, 255, 0.85);
    font-style: italic;
    padding-top: 0.5em;
    border-bottom: 1px solid gray;
    font-size: 0.8em;
    line-height: 1.2em;
    width: 100%;
}

/* Previous element on the left */
.navigator-element-previous{
    float: left;
}

/* Next element on the right */
.navigator-element-next {
    float: right;
}

/* Clear after previous and next links */
.clear-float {
    clear:both;
}


/*Hack for the footnotes*/
#footnotes {
    margin-left: 280px;
    margin-right: 20px;
    font-size: 0.8em;
}

@media (max-width: 600px) {
    #table-of-content {
        display: none;
    }
    #main-content-margin {
        margin-left: 20px;
        margin-right: 20px;
    }
    #footnotes {
        margin-left: 20px;
        margin-right: 20px;
    }
}


/** Wrap word in code */
pre {
    white-space: pre-wrap;
    margin: 0;
    padding: 1.5em;
}


#page-number {
    position: fixed;
    top: 0.5em;
    left: 200px;
    color: rgb(1, 7, 97);
    font-style: italic;
    background-color: rgba(248,248,246,0.8);
}


blockquote {
    border: 2px solid rgb(230,230,230);
    background-color: rgb(240,240,240);
    color: rgb(150,50,50);
    padding-left: 1em;
    padding-right: 1em;
    font-style: italic;
    border-radius: 1em;
}


.center {
    text-align: center;
}

.border img {
    border: 1px solid black;
    box-shadow: 4px 4px 3px 0px #888888;
}


.level_0 {
    display: inline-block;
    margin-bottom: 0.5em;
}

.level_1 {
    display: inline-block;
    margin-left: 1.5em;
}

.level_2 {
    display: inline-block;
    margin-left: 2.5em;
}

.created-page ul{
    list-style-type: none;
}

/********************************************/
/**              CodeRay                    */
/********************************************/

.CodeRay {
    background-color: #f9f9f9;
    font-family: monospace;
    color: #000;
    font-size: 1.1em;
}

span.CodeRay {
    white-space: pre;
    border: 0px;
    padding: 2px
}

table.CodeRay {
    border-collapse: collapse;
    width: 100%;
    padding: 2px
}

table.CodeRay td {
    padding: 1em 0.5em;
    vertical-align: top;
}

.CodeRay .line-numbers {
    border-right: 1px solid #d8d8d8;
    padding: 0 0.5em 0 .25em
}

.CodeRay span.line-numbers {
    display: inline-block;
    margin-right: .5em;
    color: rgba(0, 0, 0, .3)
}

.CodeRay .line-numbers strong {
    color: rgba(0, 0, 0, .4)
}

table.CodeRay {
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
    border: 0;
    background: none
}

table.CodeRay td {
    vertical-align: top;
    line-height: 1.45
}

table.CodeRay td.line-numbers {
    text-align: right
}

table.CodeRay td.line-numbers>pre {
    padding: 0;
    color: rgba(0, 0, 0, .3)
}

table.CodeRay td.code {
    padding: 0 0 0 .5em
}

table.CodeRay td.code>pre {
    padding: 0
}

.CodeRay .debug {
    color: #fff !important;
    background: #000080 !important
}

.CodeRay .annotation {
    color: #007
}

.CodeRay .attribute-name {
    color: #000080
}

.CodeRay .attribute-value {
    color: #700
}

.CodeRay .binary {
    color: #509
}

.CodeRay .comment {
    color: #79A;
    font-style: italic
}

.CodeRay .char {
    color: #04d
}

.CodeRay .char .content {
    color: #04d
}

.CodeRay .char .delimiter {
    color: #039
}

.CodeRay .class {
    color: #458;
    font-weight: bold
}

.CodeRay .complex {
    color: #a08
}

.CodeRay .constant, .CodeRay .predefined-constant {
    color: #008080
}

.CodeRay .color {
    color: #099
}

.CodeRay .class-variable {
    color: #369
}

.CodeRay .decorator {
    color: #b0b
}

.CodeRay .definition {
    color: #099
}

.CodeRay .delimiter {
    color: #000
}

.CodeRay .doc {
    color: #970
}

.CodeRay .doctype {
    color: #34b
}

.CodeRay .doc-string {
    color: #d42
}

.CodeRay .escape {
    color: #666
}

.CodeRay .entity {
    color: #800
}

.CodeRay .error {
    color: #808
}

.CodeRay .exception {
    color: inherit
}

.CodeRay .filename {
    color: #099
}

.CodeRay .function {
    color: #900;
    font-weight: bold
}

.CodeRay .global-variable {
    color: #008080
}

.CodeRay .hex {
    color: #058
}

.CodeRay .integer, .CodeRay .float {
    color: #099
}

.CodeRay .include {
    color: #555
}

.CodeRay .inline {
    color: #000
}

.CodeRay .inline .inline {
    background: #ccc
}

.CodeRay .inline .inline .inline {
    background: #bbb
}

.CodeRay .inline .inline-delimiter {
    color: #d14
}

.CodeRay .inline-delimiter {
    color: #d14
}

.CodeRay .important {
    color: #555;
    font-weight: bold
}

.CodeRay .interpreted {
    color: #b2b
}

.CodeRay .instance-variable {
    color: #008080
}

.CodeRay .label {
    color: #970
}

.CodeRay .local-variable {
    color: #963
}

.CodeRay .octal {
    color: #40e
}

.CodeRay .predefined {
    color: #369
}

.CodeRay .preprocessor {
    color: #579
}

.CodeRay .pseudo-class {
    color: #555
}

.CodeRay .directive {
    font-weight: bold
}

.CodeRay .type {
    font-weight: bold
}

.CodeRay .predefined-type {
    color: inherit
}

.CodeRay .reserved, .CodeRay .keyword {
    color: #000;
    font-weight: bold
}

.CodeRay .key {
    color: #808
}

.CodeRay .key .delimiter {
    color: #606
}

.CodeRay .key .char {
    color: #80f
}

.CodeRay .value {
    color: #088
}

.CodeRay .regexp .delimiter {
    color: #808
}

.CodeRay .regexp .content {
    color: #808
}

.CodeRay .regexp .modifier {
    color: #808
}

.CodeRay .regexp .char {
    color: #d14
}

.CodeRay .regexp .function {
    color: #404;
    font-weight: bold
}

.CodeRay .string {
    color: #d20
}

.CodeRay .string .string .string {
    background: #ffd0d0
}

.CodeRay .string .content {
    color: #d14
}

.CodeRay .string .char {
    color: #d14
}

.CodeRay .string .delimiter {
    color: #d14
}

.CodeRay .shell {
    color: #d14
}

.CodeRay .shell .delimiter {
    color: #d14
}

.CodeRay .symbol {
    color: #990073
}

.CodeRay .symbol .content {
    color: #a60
}

.CodeRay .symbol .delimiter {
    color: #630
}

.CodeRay .tag {
    color: #008080
}

.CodeRay .tag-special {
    color: #d70
}

.CodeRay .variable {
    color: #036
}

.CodeRay .insert {
    background: #afa
}

.CodeRay .delete {
    background: #faa
}

.CodeRay .change {
    color: #aaf;
    background: #007
}

.CodeRay .head {
    color: #f8f;
    background: #505
}

.CodeRay .insert .insert {
    color: #080
}

.CodeRay .delete .delete {
    color: #800
}

.CodeRay .change .change {
    color: #66f
}

.CodeRay .head .head {
    color: #f4f
}