/* use Charis SIL - Regular in .woff format */
@font-face {
    font-family: CharisSILW;
    src: url(../fonts/CharisSIL-R.woff);
}
/* use Charis SIL - Italic in .woff format */
@font-face {
    font-family: CharisSILW;
    font-style: italic;
    src: url(../fonts/CharisSIL-I.woff);
}

@font-face {
    font-family: CharisSILW;
    font-weight: bold;
    src: url(../fonts/CharisSIL-B.woff);
}

@font-face {
    font-family: CharisSILW;
    font-weight: bold;
    font-style: italic;
    src: url(../fonts/CharisSIL-BI.woff);
}

/** General presentation **/
body {font-family: CharisSILW, serif;}

h1,h2,h3,h4,h5,h6 {color: darkred; font-family: sans-serif;}
h6 {font-style: italic;}
h1 a, h2 a, h3 a, h4 a {color: darkred;  text-decoration: none;}
header a {color: gray;}
.subheading {color: gray; font-style: italic;}
a:hover {text-decoration: underline;}

h1 { font-size: 2em;}
h2 { font-size: 1.78em;}
h3 { font-size: 1.44em;}
h4 { font-size: 1.2em;}
h5 { font-size: 1em;}
h6 { font-size: 1em;}


#mainNav ul.navigation li a:before {background-color: gray;}
#mainNav ul.navigation li a:before, #header #navbar ul.navigation li a:after {background-color: gray;}

.signature {
    margin-top: 2em;
    text-align: right;
    margin-right: 2em;
}

.properName {font-variant: small-caps;}

/* LAYOUT */
body {display: flex; flex-flow: row wrap;}

header {flex: 0 0 100%;}
#mainNav {flex: 0 0 100%;}
#navAux {display: none; }
main {flex: 4 1 20em;}
#sidebar {flex: 1 1 10em; padding: 4pt;}
footer {flex: 0 0 100%;}
.modular-row {flex: 1 1 100%;}
.searchGroup {display: inline;}

/* Menu layout */
#mainNav li {display: inline-block;}

/* Site title part */
header.showcase {margin-bottom: 3pt;}
.site_title {padding: 8px;}
.site_title {display: flex; flex-flow: wrap; }
.site_title .logo {flex: 0 0 auto; margin: 0pt; padding: 0pt;}
.site_title .page_title {color: white; flex: 0 0 auto; 
                         margin: 0pt; padding: 0pt;}
.site_title h1 {color: white; flex: 0 0 100%;
                margin: 0pt; padding: 0pt;
                text-shadow: 3px 2px black;
}
.site_title h2 {color: white; flex: 0 0 100%; 
                font-style: italic; font-family: CharisSILW, serif;
                margin: 0pt; padding: 0pt;
                text-shadow: 3px 2px black;
}

.site_title .buttons {
    flex: 0 0 auto;
    align-self: flex-end;

}
.site_title .button {
    font-family: sans-serif;
    background-color: red;
    padding: 3pt;
    margin-left: 2pt;
    margin-right: 2pt;
    border-radius: 4pt;
    color: white;
}

.site_title a.button {
    text-decoration: none;
}


/* Forum */

.comment {
    margin-left: 1em;
    margin-top: 2em;
    border-left: 10px solid #F0F2F4;
    padding-left: 1ex;
}

.date {
    /*display: inline-block;*/
    margin: 3pt;
    float: right;
    background-color: #F0F2F4;
    padding: 4pt;
    border-radius: 4pt;    
    font-family: sans-serif;
    font-style: italic;
    font-size: small;
}

/*
 * lists of summaries in main page.
 */
main .large-list-item {
    border-collapse: collapse;
    border-top: solid #F0F2F4;
}

/*
* prevent pictures from being too large.
*/
img {max-width: 100%;}

img.align-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1ex;
}

/** A few of those CSS from the Antimatter template */
.tags a {
    display: inline-block;
    background-color: lightgray;
    font-size: 1ex;
    border: 1px none #1BB3E9;
    border-radius: 3px;
    padding: 0.1rem 0.4rem;
    margin-left: 1em;  
    margin-bottom: 0.2rem;
    text-transform: uppercase;
    text-decoration: none;
    color: black;
}

.tags a:hover {
    text-decoration: underline;
}

blockquote {
    border-left: 10px solid #F0F2F4; }
blockquote p {
    font-size: 1.1rem;
    color: #999; }
blockquote cite {
    display: block;
    text-align: right;
    color: #666;
    font-size: 1.2rem; }

blockquote > blockquote > blockquote {
    margin: 0; }
blockquote > blockquote > blockquote p {
    padding: 15px;
    display: block;
    font-size: 1rem;
    margin-top: 0rem;
    margin-bottom: 0rem; }
blockquote > blockquote > blockquote > p {
    margin-left: -71px;
    border-left: 10px solid #F0AD4E;
    background: #FCF8F2;
    color: #df8a13; }
blockquote > blockquote > blockquote > p a {
    color: #b06d0f; }
blockquote > blockquote > blockquote > p a:hover {
    color: #f2b866; }
blockquote > blockquote > blockquote > blockquote > p {
    margin-left: -94px;
    border-left: 10px solid #D9534F;
    background: #FDF7F7;
    color: #b52b27; }
blockquote > blockquote > blockquote > blockquote > p a {
    color: #8b211e; }
blockquote > blockquote > blockquote > blockquote > p a:hover {
    color: #de6764; }
blockquote > blockquote > blockquote > blockquote > blockquote > p {
    margin-left: -118px;
    border-left: 10px solid #5BC0DE;
    background: #F4F8FA;
    color: #28a1c5; }
blockquote > blockquote > blockquote > blockquote > blockquote > p a {
    color: #1f7e9a; }
blockquote > blockquote > blockquote > blockquote > blockquote > p a:hover {
    color: #70c8e2; }
blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > p {
    margin-left: -142px;
    border-left: 10px solid #5CB85C;
    background: #F1F9F1;
    color: #3d8b3d; }
blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > p a {
    color: #2d672d; }
blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > p a:hover {
    color: #6ec06e; }

code,
kbd,
pre,
samp {
    font-family: "Inconsolata", monospace; }

code {
    background: #f9f2f4;
    color: #9c1d3d; }

pre {
    padding: 2rem;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 3px; }
pre code {
    color: #237794;
    background: inherit; }

/* End of templates from antimatter */

/*
    .list-item h4.p-name {color: inherit;}
    .list-item h4.p-name a.u-url {color: inherit;}
*/

/* Tutorial */

.tutorialVideo {
    width: 100%;
    text-align: center;
}
.tutorialVideo video {
    max-width: 100%;
}

/* Forum */

.forumList {margin-top: 2em;}
.forumList .forum .description{
    margin-left: 1em;
    font-style: italic;
}

/* Navigation page */

.navPage .description {
    margin-left: 2em;
    font-size: smaller;
    font-style: italic;
}


/* Bug */
.bugWorkaround {
    margin-left: 1em;
    border: solid red 1pt;
    border-radius: 2ex;
    font-style: italic;
    padding: 1ex;
}

/* Download */
.download_section ul {list-style-type: none; margin-top: 2em;}
.download_section li {
    margin: 1ex;
    margin-left: 2em;    
}
.download_section li a { text-decoration: none;}
.download_section li a:hover { text-decoration: underline;}

.download_section li a { color: darkred;}

/* Navigation */
.nav {
    padding: 4pt;
    background-color: black;
    color: white;
}
.nav a:visited {color: white; text-decoration: none;}
.nav a {color: white;  text-decoration: none; margin: 2pt;}

/* align-items, align-self, and justify-content */

/* Responsive presentation of the site */

/* Large screen */
@media (min-width: 400pt){
    .navButton img {vertical-align:middle;}
    .short.nav {display: none;}
    .full.nav {}
    .full.nav .navButton {
        padding-right: 2pt;
        align-items: center;
        justify-content: flex-end;        
    }
    .full.nav .navButton div {display: inline-block;}
    #sidebar {padding-left: 1ex;}
    #sidebar {border-left: #F0F2F4 solid 2pt; margin-left: 2ex;}
    #sidebar {color: #555555;}
}

/* Small screen */
@media (max-width: 399pt){
    header img, .subheading {display: none;}    
    .short.nav {display: flex; flex-direction: row;}
    .short.nav .navButton {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
    }
    .short.nav .navButton:last-child {
        margin-left: auto;
    }
    .short.nav img, .short.nav i {
        display: block; flex: 0 0 auto;
        padding-bottom: 2pt;
    }
    .short.nav .label {
        display: block; 
        flex: 0 0 auto; 
        font-size: small;
    }

    .full.nav {
        display: none;        
    }

    .short.nav .dropdown:hover {
        position: relative;
    }
    .short.nav .dropdown-content {
        display:none;
        position: absolute;
        right: 2pt;
        top: 2pt;
        background: black;
        padding: 4pt;
        text-align: center;
    }
    .short.nav .dropdown-content ul {
        list-style-type: none;
        padding: 0em;
        margin: 0em;
    }

    .short.nav .dropdown-content li {
        display: block;
        padding: 3pt;        
    }

    .short.nav .dropdown:hover .dropdown-content {
        display:block;
    }


    .signature {
        margin-top: 2em;
        text-align: left;
        margin-right: auto;
    }


}

.navButton:hover, .dropdown-content li:hover {
    text-decoration: underline;
}

.form-field .input {
    width: 100%;
}

.form-field input {
    width: 100%;
}

.form-field textArea {
    height: 20ex;
}

/* Center images in markdown.*/
img.centerme {
  display:block;
  margin: 0 auto;
}

img.floatme {
    float: right;
    margin: 1ex;
}

/* Search form */

.complexForm {
    margin-top: 1ex;
    margin-bottom: 1ex;
    margin-left: 2em;
}
.complexForm details {
    padding: 5pt;
    border: 1pt solid red;
    padding-bottom: 1em;
}

.complexForm label {
    padding: 2pt;
    font-family: sans-serif;
    font-weight: bold;
    display: block;
    width: 100%;
}

.complexForm .hint {
    font-style: italic;
    width: 100%;
}

.complexForm select {
    width: 100%;
    height: 3em;
}

.complexForm input {
    width: 100%;
}

.complexForm button {
    width: 100%;    
    font-family: sans-serif;
    font-weight: bold;
    padding: 2pt;
}

/*
 * listing
 */

.listing h1 { font-size: 1.78em;}
.listing h2 { font-size: 1.44em;}
.listing h3 { font-size: 1.2em;}
.listing h4 { font-size: 1em;}
.listing h5 { font-size: 1em;}
.listing h6 { font-size: 1em;}

/* sidebar */

#sidebar h1 { font-size: 1.78em;}
#sidebar h2 { font-size: 1.44em;}
#sidebar h3 { font-size: 1.2em;}
#sidebar h4 { font-size: 1em;}
#sidebar h5 { font-size: 1em;}
#sidebar h6 { font-size: 1em;}

#sidebar>section {margin-bottom: 2em;}