/*
  henningkerstan.org - main.css
  Copyright (c) 2017 Henning Kerstan.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
*/

@font-face{
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather/Merriweather-Regular.ttf') format('truetype');
}

@font-face{
  font-family: 'Merriweather Sans';
  src: url('../fonts/Merriweather_Sans/MerriweatherSans-Regular.ttf') format('truetype');
}

@font-face{
  font-family: 'Roboto Mono';
  src: url('../fonts/Roboto_Mono/RobotoMono-Regular.ttf') format('truetype');
}

* {
  font-family: 'Merriweather' ;
}

html {
  min-height: 100%;
}

body {
  background-color: rgb(249,249,249);

  display: flex;
  flex-direction: column;
  align-items: center;

  margin: 0;

  min-height: 100vh;
}

main {
  max-width: 60em;
  margin: 3em .5em;
  padding: 0;

  /* justify and hyphenate */
  text-align: justify;
  -ms-hyphens: auto;
  -webkit-hypens: auto;
  hyphens: auto;

  /* flex parent */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;


  /* flex child */
  justify-content: center;
  flex: 1;

  min-height: 100%;
}

img.profile-picture {
  max-width: 14em;
  width: 80%;
  max-height: auto;
  margin: 10px;
  align-self: center;
  border-radius: 2%;
  margin: 1em;
}

body > header,
body > footer{
  background-color: rgb(55,55,55);
  color: white;
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-family: 'Merriweather Sans';
  position: relative;
  padding: 0;
  flex: none;
}

body > header {
  top: 0;
  height: auto;
  font-variant: small-caps;
  font-size: 1.2em;
  text-transform: lowercase;
}

body > footer {
  font-size: small;
  background-color: rgb(37,37,38);
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0em 0;
  bottom: 0;
}


section {
  flex: 3 1 0%;
  text-align: justify;
}

h1, h2, h3 {
  font-family: 'Merriweather Sans';
  text-align: left;
  text-justify: left;
}

h1 {
  font-size: 1.5em;
  border-bottom: 2px solid rgb(220,220,220);
  margin-top: 1.2em;
}

a {
  color: rgb(5,148,203);
  text-decoration: none;
}

p {
  color: rgb(30,30,30);
}

body > header h1 {
  font-size: 1em;
  border: none;
  margin: 0;
  padding: 0;
}

body > header a {
  padding: none;
  margin: none;
  display: block;
  color: white;
  text-align: center;
  text-transform: lowercase;
  text-decoration: none;
  font-family: 'Merriweather Sans';
  font-variant: small-caps;
  margin: 0;

  /* height + padding-top + padding bottom determines the total height of menu bar

  this ensures that the whole area in the menu is hoverable/clickable*/
  height: 2.2em;
  padding: .8em .7em 0em .7em;
}


h2 {
  font-size: 1em;
  border: none;
  margin: 1.5em 0 .5em 0;
  padding: 0;
}

a:hover {
  /*text-decoration: underline;*/
  /*border-bottom: 1px dotted rgb(2, 83, 125);*/
  border-bottom: 1px dotted crimson;
  color: crimson;
  transition: all ease-in-out .15s;
}

ul {
  display: flex;
  flex-direction: column;
  margin: 0;
}

ol {
  display: flex;
  flex-direction: column;
}

/* main ul > li::before{
  font-family: 'FontAwesome';
  content: '\f0da  ';
} */

main ul > li {
  list-style: circle;
  margin: .4em 0;
}



/* the main page title */
main > header,
main > footer {
  width: 100%;
}

main > header {
    margin: 0 0 2em;
}
main > footer {
  border-bottom: 1px solid rgb(150,150,150);
}

main > article {
  max-width: 40em;
  flex-grow: 2;
  margin: 0 1em 0 0;
  padding: 0;
}

main > aside {
  flex-grow: 1;
  min-width: 10em;
  max-width: 40em;

  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
}


main > aside > h1 {
  border: none;
  font-size: small;
}

main > aside > nav {
  /* border-left: 2px solid gray; */
  padding: 0 .5em;
}

main > aside > nav > ul {
  padding: 0;
  margin: 0;
}

main > aside > nav ul > li {
  list-style: none;
}

main > header > h1,
main > header > h2{
  display: flex;
  justify-content: center;
  flex-direction: column;

  padding: 0 5px 10px;
  margin: 0;
  border: none;
}

main > header > h1 {
  text-transform: lowercase;
  font-variant: small-caps;
  font-size: 2em;
}


main > header > p {
  border-top: 2px solid rgb(55,55,55);
  margin: 0;
  padding: .5em;
  font-family: 'Merriweather Sans';
  font-size: small;
  text-align: left;
  color: rgb(55,55,55);
}


/* The JavaScript warning box */
#noJS {
  margin: 3em;
  background-color: yellow;
}


/* The main navigation menu */
.sitetitle-wrapper,
.headnav-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font: inherit;
}

/* align title to left */
/* only necessary for small screens */

.headnav-wrapper a {
  display: block;
  color: white;
  text-align: center;
  text-transform: lowercase;
  text-decoration: none;
  font-family: 'Merriweather Sans';
  font-variant: small-caps;
  margin: 0;


  /* height + padding-top + padding bottom determines the total height of menu bar

  this ensures that the whole area in the menu is hoverable/clickable*/
  height: 2.2em;
  padding: .8em .7em 0em .7em;
}

code {
  font-family: 'Roboto Mono', monospace;
  border-radius: 0%;
  padding: 0em;
}

pre > code {
  color: rgb(249,249,249);
  background: transparent;
}

pre {
  background: rgb(55,55,55);
}

.sitetitle-wrapper a:hover, a:focus, a:active,
.headnav-wrapper a:hover, a:focus, a.active{
  text-decoration: none;
  border: none;
  /*background-color: crimson;*/
  background-color: crimson;
  color: rgb(55,55,55);
  transition: all ease-in-out .15s;
}

.sitetitle-wrapper a.menu-open-icon,
.sitetitle-wrapper a.menu-close-icon {
  display: none;
}

/* the actual navigation menu */
.headnav ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  background-color: rgb(55,55,55);
  list-style: none;
}

.headnav li {
  list-style: none;
}

.headnav ul li {
  position: relative;
  padding: 0;
}

.headnav ul ul {
  display: none;
  position: absolute;
  padding: 0em;
  width: 100%;
  top: auto;
  left: 0em;
  min-width: 10em;
}

.headnav ul li.main-menu-item.active > a{
  background-color: gray;
  color: rgb(55,55,55);
}

.headnav ul li.main-menu-item.active > a:hover{
  color: rgb(55,55,55);
  background-color: crimson;
}

.headnav ul.main-menu-submenu.active {
  display: block;
}

.headnav ul li:hover ul{
  /*display: block;*/
}

.headnav ul ul a {
  text-align: left;
  padding: .8em .7em 0em .7em;
}


/* hide the menu icon for bigger screens */
.headnav .icon {
    display: none;
}


/* the contact bar */
.contact-details li{
  list-style: none;
}

ul.contact-details {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.contact-details li::before {
  content: '';
}

.contact-details li {
  display: flex;
  flex-wrap: wrap;
  padding: .5em 1em 0 0;
}

.contact-details a {
  margin: 0;
}

/* the body > footer bar */
/* The main navigation menu */

.footnav-copyright,
.footnav-other {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

img.cc-icon{
  opacity: 1;
}

p.license-text,
.license-text a,
.license-text span,
.license-text em {
  font-family: "Merriweather Sans";
}

p.license-text {
  font-size: small;
}

body > footer ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0em;

  margin: 0;
  list-style: none;
}

body > footer li {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body > footer a {
  display: inline-block;
  float: left;
  color: white;
  text-align: center;
  padding: 0 0.5em;
  text-decoration: none;
  font-family: 'Merriweather Sans';
  margin: 0;

  height: 1.6em;
  padding: .4em .7em 0em .7em;
}

body > footer p {
  display: block;
  float: left;
  color: white;
  text-align: left;
  padding: 0 0.5em;
  text-decoration: none;
  font-family: 'Merriweather Sans';
  margin: 0;
}

body > footer a:hover,
body > footer a:focus,
body > footer a:active {
  background-color: crimson;
  border: none;
  color: rgb(55,55,55);
}


h2 a.readmore {
  font-family: 'Merriweather Sans';
}


/* bibtex specials */
.bibtex-meta{
  background-color: beige;
}

h2.publication-title{
  margin: .2em 0;
}

p.authors,
p.publication-meta {
  /*font-family: "Merriweather Sans";*/
  margin: .5em 0;
  padding: 0;
}

p.publication-meta {
  color: gray;
  font-size: 70%;
}

aside > p.publication-meta {
  color: black;
  font-size: normal;
}

p.publication-abstract-short {
  ;
}

p.authors {
  font-family: "Merriweather Sans";
}

p.publication-meta em {
  font: inherit;
  font-style: italic;
}

.publication {
  /*background-color:rgb(235,235,235);*/
  margin: 2.5em 0em;
  /*font-family: "Merriweather Sans";
  */
}

.publication ul {
  font: inherit;
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: left;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.publication li::before,
.publication-urls li::before {
  content: '';
}


.publication li,
.publication-urls li {
  font: inherit;
  list-style: none;
  margin: 0 0em 0 0;
  padding: .25em 0;
}

ul.publication-urls {
    flex-direction: column;
    justify-content: left;
    text-align: left;
    padding: 0;
}

.publication li > a {
  margin: .5em 1em 0 0;
}

ul.latest-posts {
  padding: 0;
}

.latest-posts li::before{
  font-family: "FontAwesome";
  font-size: small;
  content: "\f1ea";
}

.latest-posts li {
  list-style: none;
  margin: .5em 0;
  padding: 0;
}

.latest-posts li > small {
  padding: .5em;
}


/* TODO: reduce to 600px? */
@media screen and (max-width: 60em) { /* article: 40 em max, aside: 10em (min)*/
  body > header,
  body > footer {
    flex-direction: column;
    height: auto;
  }

  body > footer {
    font-size: .7em;
  }

  main {
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
  }

  main > header {
    order: 1;
  }

  main > aside {
    order: 2;
  }

  main > article {
    order: 3;
    margin: 0;
  }


  .headnav-wrapper{
    display:none;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
  }


  .headnav-wrapper.show-headnav{
    display:block;
  }

  .headnav {
    flex-grow: 1;
  }

  .headnav ul {
    flex-direction: column;
  }

  .headnav ul ul {
    display: none;
    position: relative;
    top: auto;
    left: 0em;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
  }

  .headnav a {
    text-align: left;
  }

  .sitetitle-wrapper a.menu-open-icon {
    display: block;
  }

  .sitetitle-wrapper a.menu-open-icon.hidden {
    display: none;
  }

  .sitetitle-wrapper a.menu-close-icon {
    display: block;
  }

  .sitetitle-wrapper a.menu-close-icon.hidden{
    display: none;
  }

  .sitetitle-wrapper a.menu-close-icon {
    background-color: gray;
    color:rgb(55,55,55);
  }

  .publication {
    text-align:left;
  }

  .publication ul {
    flex-direction: column;
  }

  img.profile-picture{
    align-self: center;
  }

}