:root {
  --pre-bg-color:       #f8f9fa;
}

html {
    position: relative;
    min-height: 100%;
    background-color: #fff;
}

body {
    /* Margin bottom by footer height */
    margin: 0;
    margin-bottom: 120px;
    font-family: "Roboto", "Tahoma", Arial, sans-serif;
}

a {
   /* MPI color scheme for links */
   color: #29485d;
}

li > * {
    /* Bullet point content gets very ugly on small screen sizes if we justify */
    text-align: left;
}

/* Hack to avoid the e of DeOS make the line height ugly on small screens. */
sup {
    line-height: 0;

    /* The following rules (or similar) likely come from browser
     * style and are not needed
     */
    font-size: 0.83em;
    vertical-align: super;
}

/* Main wrapper, centered */

.container {
    width: auto;
    max-width: 680px;
    margin: 0 auto;

    padding: 0 15px; /* padding left and right */
    margin-top: 20px;
}

/* Footer */

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 90%;
    opacity: 80%;
}

footer > .container {
    margin-top: 0;
}

footer p {
    text-align: left;
}

/* Header and navbar */

header {
    font-size: 110%;
}

header.container {
    margin-bottom: 30px;
}

header > hr {
    margin: 0px;
}

nav {
    display: flex;
    justify-content: space-between;

    /* size properties */
    margin-top: 28px;
    margin-bottom: 12px;
}

.navbar-left {
    display: flex;
    align-self: flex-start;
    min-width: 70px;
}

.navbar-right {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-self: flex-start;
}

.navbar-item {
    /* center items */
    display: flex;
    justify-content: center;
    align-items: center; 

    /* size properties */
    height: 30px;
}

.navbar-item > * {
}

.navbar-right > .navbar-item {
    margin-left: 10px;
}

.page-header {
    margin-bottom: 20px;
    border-bottom: 1px solid #bbb;
}

/* Member lists */

.person {
    display: flex;
    margin-bottom: 10px;
    margin-left: 20px;
}

.person-picture {
    display: flex;
    align-self: flex-start;
    width: 60px;
    height: 60px;
    border-style: solid;
    border-width: 2px;
}

.person-no-picture-available {
    background-color: lightgrey;
    font-size: 30px;
    color: #29485d;
    opacity: 0.4;
}

.person-no-picture-available > span {
    margin: auto auto;
}

.person-text {
    display: flex;
    align-self: flex-end;
    margin:auto 10px;
}