* {
    padding:0px;
    margin:0px;
}

html {
}

body {
    font-size:1em;
    color: #333333;
    font-family:Arial, sans-serif;

    background-image:url("img/eo_logo_fronde.svg");
    background-repeat:no-repeat;
    background-position:bottom right;
}

.logo {
    font-family: 'Comfortaa', monospace;
    font-style:normal;
    font-weight:400;
}

.logo_eo {
    font-family: 'Comfortaa', monospace;
    font-style:normal;
    font-weight:700;
}

pre {
    display:inline;
    /* overflow-wrap:break-word; */
    white-space: pre-wrap;
}

.command {
    background-color:#333;
    color:lightgrey;
    padding:2px;
    margin:0.2em;
    border:thin solid white;
}

#alt {
    font-size:0.75em;
    float:left;
    width:20%;
    max-width:40ch;
    height:100%;
    text-align:center;
    margin-right:5%;
    background-color:#3771c8;
    color:#aef;
    position:fixed;
    top:0;
    left:0;
    overflow-y:auto;
}

#toc {
}


#main {
    float:right;
    width:78%;
    padding-right:1em;
    padding-bottom:1em;
}

#header_logo {
    background-image:url("img/paradiseo_logo.svg");
    height:30ch;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-align:center;
    vertical-align:text-bottom;
}

#header_logo em.logo {
    display:none;
}

#slogan {
    text-align:center;
    font-weight:normal;
    font-style:italic;
    padding:1em;
}

nav {
    text-align:left;
    clear:both;
}

nav p {
    margin-top:2em;
    margin-bottom:0em;
}

nav ul {
    margin-top:0em;
}

nav#menu {
    padding:0.5em;
    /* height:100%; */
}

nav a {
    color: white;
    font-weight: normal;
    text-decoration: none;
    outline:none;
}

nav a:hover {
    color: white;
    font-weight: normal;
    text-decoration: underline;
}

blockquote {
    padding-left:1em;
    border-left: 2px solid blue;
    color:gray;
}

table.examples {
    margin-right:0.5em;
}

ul.publications em {
    font-weight:bold;
    color:#f0f;
}

h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl,
fieldset, address { margin:0.75em 0;}

h1 {
    font-size:2em;
    border-bottom:3px solid #3771c8;
    margin-top:2em;
}

h2 {
    font-size:1.39em;
    border-bottom:thin solid #eee;
}

h3 {font-size:1.1em;}

h4 {font-size:1em;}

li, dd {
    margin-left:2em;
}

table > caption {
    font-weight:bold;
}

table {
    padding:0.5em;
    border:thin solid lightgray;
    border-left:0.2em solid #3366CC;
}

a {
    color: #3366CC;
    /*background-color: #FFFFFF;*/
    font-weight: normal;
    text-decoration: none;
    outline:none;
}

a:hover {
    color: #0033CC;
    /*background-color: #FFFFFF;*/
    font-weight: normal;
    text-decoration: underline;
}

.excerpt {
    font-size: 1.3em;
    background-color:#3771c8;
    color:white;
    padding:1em;
    border: thin solid black;
    display:block;
    margin:1em;
    box-shadow: 10px 10px 15px #074198;
}

.excerpt em {
    font-weight: bold;
}

.excerpt a {
    color:white;
    text-decoration:underline;
}

ul#menu {
    clear:both;
    margin: 0;
    padding: 0;
    list-style: none;
/*width:650px;*/
}

ul#menu li {
    margin: 0;
    padding:0;
    float: left;
    width:16.5%;
    text-align: center;
}

ul#menu li a {
    display: block;
    font-size: 0.75em;
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
    background: #5588CC;
    padding: 2px 0px 2px 0px;
    padding: 0em 1em 0em 1em;
}

ul#menu li a:hover { background: #3366CC; color: #FFFFFF; }
ul#menu a.selected:link { background: #3366CC; color: #FFFFFF; }
ul#menu a.selected:visited { background: #3366CC; color: #FFFFFF; }

.collapsible {
    background-color: #eee;
    color:#36C;
    cursor: pointer;
    padding: 0.2em;
    border: thin solid #ccc;
    text-align: left;
    outline: none;
    font-size: 0.75em;
    margin-left:2em;
    max-width:50%;
}

.active, .collapsible:hover {
    background-color: #ddd;
    color:#03C;
    /* text-decoration: underline; */
}

.collapsible:after {
    content: "\002B  ";
    font-weight: bold;
    float: left;
    margin-left: 5px;
}

.active:after {
    content: "\2212  ";
}

.details {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #fbfbfb;
    border: thin solid #ccc;
    margin-left:2em;
}

figure {
    text-align:center;
    padding:1em;
    border:thin solid lightgray;
    box-shadow: 5px 10px 18px #ddd;
    /* min-width:400px; */
    max-width: 60%;
    margin:1em;
    margin-left:20%
}

figcaption {
    font-size: 0.75em;
    max-width: 90%;
    margin-left:5%;
}

.code {
    width:95%;
    height:70ch;
    resize:vertical;
    overflow-y:scroll;
    box-shadow: 10px 10px 10px #888;
    background-color:#2b2b2b;
    color: #d4cfc9; 
    border:thin solid black;
    white-space: pre;
}

.vimCodeElement { /* white-space: pre-wrap; */ font-family: monospace; color: #d4cfc9; background-color: #2b2b2b; }
.String { color: #cc7844; background-color: #272935; padding-bottom: 1px; }
.Character { color: #da4939; }
.Number { color: #519f50; }
.LineNr { color: #6b758f; background-color: #272935; padding-bottom: 1px; }
.Statement { color: #da4939; font-weight: bold; }
.Type { color: #6d9cbe; }
.Repeat { color: #da4939; }
.Include { color: #6d9cbe; }
.Exception { color: #da4939; }
.StorageClass { color: #ffc66d; }
.cppOperator { color: #b6b3eb; }
.cppSTL { color: #f4f1ed; }
.cppBraces { color: #ffc66d; }
.cppStatement { color: #ffc66d; }
.cppEndline { color: #6b758f; }

.table {
    padding:1em;
    border:thin solid lightgray;
    box-shadow: 5px 10px 18px #ddd;
    width:60%;
    max-width: 40em;
    margin-left:20%
}

figure.table table {
    width:100%;
}

a.comment-indicator:hover + comment { background:#ffd; position:absolute; display:block; border:1px solid black; padding:0.5em;  } 
a.comment-indicator { background:red; display:inline-block; border:1px solid black; width:0.5em; height:0.5em;  } 
comment { display:none;  } 

@media (min-resolution: 192dpi) {
    body {
        font-size:1.5em;
    }
    #alt {
        font-size:1em;
    }
}

@media only screen and (max-width: 50em), screen and (min-resolution: 192dpi) and (max-width: 75em)  {
    #alt {
        clear:left;
        width:100%;
        max-width:100%;
        height:auto;
        text-align:left;
        position:relative;
    }

    #shortcuts {
        margin-left:30%;
    }

    #toc_header {
        width:100%;
        display:block;
    }

    #toc ol {
        counter-reset: LIST-ITEMS 0;
    }

    .toc_section:before
    {
        float:left;
        content: counter( LIST-ITEMS ) ".";
        counter-increment: LIST-ITEMS;
    }
    .toc_section {
        display:inline-block;
        vertical-align:top;
        *display:list-item;
    }

    #main {
        clear:left;
        width:95%;
        padding-left:1em;
        padding-right:1em;
        text-align:justify;
    }

    pre {
        text-align:left;
    }

    figure {
        max-width:90%;
        margin-left:5%;
    }

    .table {
        padding:1em;
        border:thin solid lightgray;
        box-shadow: 5px 10px 18px #ddd;
        width:80%;
        max-width: 30em;
        margin-left:5%
    }
}

@media only screen and (min-width: 90em) {
    #main {
    }

    .details {
        font-size:0.80em;
        color:gray;
        box-shadow: inset 5px 5px 5px #ddd;
    }

    #Plan .excerpt {
        width:80%;
        margin-left:5%;
    }

    /* QUICKSTART */

    #Quickstart {
        text-align:justify;
        display:grid;
        grid-template-columns:1fr 1fr;
        grid-gap:2em;
    }

    #Quickstart h1 {
        grid-row:1;
        grid-column-start:1;
        grid-column-end:3;
    }

    #Quickstart #Download {
        grid-row:2;
        grid-column:1;
    }

    #Quickstart #Build {
        grid-row:3;
        grid-column:1;
    }

    #Quickstart #Develop {
        grid-row:4;
        grid-column:1;
    }

    #Quickstart #Gethelp {
        grid-row:5;
        grid-column:1;
    }

    #Quickstart .code {
        grid-row-start:2;
        grid-row-end:6;
        grid-column:2;
        height:110ch;
        max-height:95vh;
    }

    /* RATIONALE */

    #Rationale {
        display:grid;
        grid-template-columns:1fr 1fr;
        grid-gap:2em;
        text-align:justify;
    }

    #Rationale .collapsible {
        display:none;
    }

    #Rationale .details {
        max-height:100%;
        width:80%;
    }

    #Rationale h1 {
        grid-row:1;
        grid-column-start:1;
        grid-column-end:3;
    }

    #Rationale #Optimization {
        grid-row:2;
        grid-column:1;
    }

    #Rationale #Optimization_details {
        grid-row:2;
        grid-column:2;
    }

    #Rationale #Metaheuristics {
        grid-row:3;
        grid-column:1;
    }

    #Rationale #Metaheuristics_details {
        grid-row:3;
        grid-column:2;
    }

    #Rationale #Why {
        grid-row:4;
        grid-column-start:1;
        grid-column-end:3;
    }

    #Rationale #Why_fullfeatured {
        grid-row:5;
        grid-column:1;
    }

    #Rationale #Why_fullfeatured_details {
        grid-row:5;
        grid-column:2;
    }

    #Rationale #Why_efficiency {
        grid-row:6;
        grid-column:1;
    }

    #Rationale #Why_efficiency_details {
        grid-row:6;
        grid-column:2;
    }

    #Rationale #Fast {
        grid-row:7;
        grid-column:1;
    }

    #Rationale #Fast_details {
        grid-row:7;
        grid-column:2;
        margin-top:15ch;
    }

    /* FEATURES */

    #Features {
        display:grid;
        grid-template-columns:1fr 1fr;
        grid-gap:2em;
        text-align:justify;
    }

    #Features .collapsible {
        display:none;
    }

    #Features .details {
        max-height:100%;
        width:80%;
    }

    #Features figure {
        max-width:100%;
        margin-left:1em;
    }

    #Features h1 {
        grid-row:1;
        grid-column-start:1;
        grid-column-end:3;
    }

    #Features #ComponentBased {
        grid-row:2;
        grid-column:1;
    }

    #Features #ComponentBased_details {
        grid-row:2;
        grid-column:2;
    }

    #Features #LargeChoice {
        grid-row:3;
        grid-column:1;
    }

    #Features #LargeChoice_details {
        grid-row:3;
        grid-column:2;
    }

    #Features #Portability {
        grid-row:4;
        grid-column:1;
    }
 
    #Features #Portability_details {
        grid-row:4;
        grid-column:2;
    }

    #Features #VS {
        grid-row:5;
        grid-column-start:1;
        grid-column-end:3;
    }

    #Features #VS figure {
        margin-left:15%;
    }

    /* DOCUMENTATION */

    #Documentation {
        display:flex;
        flex-wrap: wrap;
    }

    #Documentation div {
        margin:1em;
    }

    #Documentation #Articles {
        flex: 1 1 25em;
    }

    #Documentation #Presentations {
        flex: 1 1 25em;
    }

    #Documentation #Tutorials {
        flex: 1 1 30em;
    }

    #Documentation #API {
        flex: 1 1 25em;
    }

    #Documentation #Examples {
        flex: 1 1 25em;
    }

    /* DOCUMENTATION */

    #Code {
        display:flex;
        flex-wrap: wrap;
    }

    #Code div {
        margin:1em;
    }

    #Code #Downloads {
        flex: 1 1 20em;
        text-align:justify;
    }

    #Code #Dependencies {
        flex: 1 1 40em;
        text-align:justify;
    }

    #Code #Compilation {
        flex: 1 1 40em;
        text-align:justify;
    }

    #Code #Licenses_Contribute {
        flex: 1 1 20em;
    }

    /* HISTORY */

    #History {
        display:grid;
        grid-template-columns:1fr 2fr;
        grid-gap:2em;
    }

    #History h1 {
        grid-row:1;
        grid-column-start:1;
        grid-column-end:3;
    }

    #History #Institution {
        grid-row:2;
        grid-column:1;
    }

    #History #Authors {
        grid-row:2;
        grid-column:2;
    }

}

@media only print {

    #header_logo {
        background-image:none;
        height:100%;
    }
    #header_logo em.logo {
        display:block;
        font-size:5em;
    }

    body {
        background:none;
        font-size:11pt;
    }

    a {
        color:black;
        font-style:italic;
    }

    #main a::after{
        content: " [" attr(href) "] ";
        color:#888;
    }

    h1 a {
        display:none;
    }

    h2 a {
        display:none;
    }

    h2 {
        border-bottom:thin solid black;
        margin-top:2ch;
    }

    h3 {
        margin:2ch 0;
    }

    #alt {
        clear:left;
        width:100%;
        max-width:100%;
        height:auto;
        text-align:left;
        position:relative;
        background-color:transparent;
        color:black;
    }

    #alt * {
        color:black;
    }

    #shortcuts {
        display:none;
    }

    #toc_header {
        display:none;
    }

    #main {
        counter-reset: heading;
        clear:left;
        width:95%;
        padding-left:1em;
        padding-right:1em;
        text-align:justify;
    }

    h1:before {
        content: counter(heading)". ";
        counter-increment: heading;
    }
    h1 {
        counter-reset: subheading;
    }
    h2:before {
        content: counter(heading)"." counter(subheading)". ";
        counter-increment: subheading;
    }

    .excerpt {
        box-shadow:none;
        border:2pt solid #3771c8;
        background-color:white;
        color: #3771c8;
        page-break-inside:avoid;
    }

    .command {
        background-color:white;
        color:black;
        border:none;
    }

    .collapsible {
        color:gray;
    }

    .details {
        background-color:white;
        color:gray;
        font-size:0.8em;
        max-height:100%;
    }

    figure {
        max-width:90%;
        margin-left:5%;
        box-shadow:none;
    }

    .table {
        padding:1em;
        border:thin solid lightgray;
        box-shadow: 5px 10px 18px #ddd;
        width:80%;
        max-width: 30em;
        margin-left:5%
    }

    #cmaes * {
        background-color:white;
    }

    .vimCodeElement {
        background-color:white;
        color:#444;
    }

    .code  {
        background-color:white;
        color:black;
        height:100%;
        overflow-y:auto;
        white-space: pre-wrap;
        box-shadow:none;
    }

    .cppSTL {color:black;}
    .cppStatement {color:#dfa64d;}
    .StorageClass {color:#dfa64d;}

    .table {
        margin-left:20%;
        box-shadow:none;
    }

    .comment-indicator {
        display:none;
    }

    comment {
        display:none;
    }
}