/* Style for my homepage. */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Fonts. */
body {
    font-size: 100%;
    font-family: Arial;
    background-color: #EEEAE3;
    background-image: url(""); /* image by NASA: https://www.nasa.gov/jpl/spitzer/pia18472 */
    background-repeat: repeat;
    background-attachment: fixed;
    text-align: justify;
}

h1 {
    font-size: 2.5em;
}

h2 {
    padding-top: 50px;
    margin-bottom: 30px;
    margin-top: 0;
}

h3 {
    margin-bottom: 20px;
    margin-top: 30px;
}

h3.gameproject {
    margin-bottom: 5px;
}

/* Links in text. */
a {
    color: #1F299E;
    text-decoration: none;
    transition: 0.2s color;
}

a:hover {
    text-decoration: underline;
    color: #1F299E;
}

.navbar, .bottombar
{
    color: white;
}

/* For all the centered elements. */
.centerelement {
    max-width: 1000px;
    margin: auto; /* centers the element */
}

.bottombar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    z-index: 10;
    display: none; /* Only make this visible for narrow screens (below). */
}

.bottombar div {
    background-color: #4F57B2;
}

/* Navbar container (to control positioning more easily). */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    z-index: 10;
}

/* Navigation bar. */
.navbar ul {
    list-style-type: none;
    padding: 0;
    overflow: hidden;
    background-color: #4F57B2;
}

.navbar p {
    padding: 0;
    color: white;
    font-size: 80%;
    background-color: #7F89FA;
    overflow: hidden; /* To make the floats inside count for height of the container. */
    border-bottom-style: solid;
    border-width: 2px;
    border-color: #4F57B2;
}

.updated {
    padding: 2px;
    padding-left: 30px;
    float: left;
}

.titletag {
    padding: 2px;
    float: left;
}

.designed {
    padding: 2px;
    float: right;
}

.backgroundref {
    float: right;
}

.backgroundref a {
    text-align: right;
    color: white;
}

.navbar li {
    display: block;
    width: 130px; /* Adjust this if you want to make navboxes wider. */
    float: left;
    padding: 0;
}

.navbar li a, .bottombar a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: .5s background-color;
}

.navbar ul ul a {
    background-color: #4F57B2;
}

.navbar li a:hover, .bottombar a:hover {
    background-color: #7F89FA;
}
.navbar li a.active:hover {
    background-color: #7F89FA;
}

.active {
    background-color: #7F89FA;
}

/* Dropdowns: */
.navbar li ul {
    position: absolute; /* A trick, not an actual positioning. */
    width: inherit;
    display: block;
    display: none;
}

.navbar li:hover ul {
    display: block;
}

.navbar li li {
    float: none;
}

/** For all actual content on the page. ******************************/
.content {
    background-color: white;
    color: #161719;
    padding-top: 67px; /* for navbar */
    padding-bottom: 80px;
}
.content div { /* for some added padding */
    padding-left: 10%;
    padding-right: 15%;
}

.content ul {
    margin-bottom: 30px;
    margin-top: 0;
    list-style-type: none;
    padding: 0;
}

/* To make the central background black all the way down. */ 
.canvas {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    z-index: -10;
}

.canvas div {
    background-color: white;
    height: 100%;
}

/* List classes. */
.content .followed_list {
    margin-left: 15px;
    list-style-type: disc;
}

.publ, .talk, .conf, .pos, .edu, .work, .grant, .misc, .school, .class, .version, .superv {
    position: relative;
    padding-left: 150px;
    margin-bottom: 30px;
}

.publ:first-child {
    padding-left: 0;
}

.writings {
    position: relative;
    padding-left: 70px;
    margin-bottom: 30px;
}

.prof, .followed {
    margin-bottom: 15px;
}

.teaching {
    margin-bottom: 10px;
}

.teaching:first-child {
    margin-bottom: 20px;
    margin-top: -10px;
}
.teaching:last-child {
    margin-top: 20px;
}

.time {
    position: absolute;
    left: 0px;
    width: 130px;
}

.place:before, .granter:before, .amount:before, .arxiv:before, .ref:before {
    content: ", ";
}

.title {
    font-weight: bold;
}

.description, .note {
    font-size: 90%;
    display: block;
    margin-top: 3px;
}

.teaching .time {
    position: static;
    display: inline-block;
    width: 170px;
}
.teaching .link {
    display: inline-block;
    width: 100px;
}
.teaching .title {
    display: inline-block;
    width: 300px;
}
.teaching .credits {
}

/* Useful small stuff. */
.nowrap {
    white-space: nowrap;
}

/* My picture. */
.mypic {
    float: right;
    margin-left: 50px;
    margin-right: 0;
    margin-bottom: 20px;
    width: 300px;
}

/* Front page contents. */
div.index_wrapper {
    padding-left: 10%;
    padding-right: 10%;
}

p.intro {
    margin-top: 0;
    margin-bottom: 30px;
}

p.tight {
    margin-top: 0;
    margin-bottom: 10px;
}

/* Code snippets. */
code.block {
    color: black;
    background: #CBCBCB;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    display: block;
    white-space: pre-wrap;
}

ul.downloads, ul.versions {
    margin-bottom: 20px;
    margin-top: 0;
    padding: 0;
}

.downloads li {
    margin-bottom: 5px;
}

.versions li {
    margin-bottom: 15px;
}

/* To make anchors work correctly with the floating menu. */
a.anchor {
    display: block;
    position: relative;
    top: -67px;
    visibility: hidden;
}

/* Change layout for a narrow screen (e.g. mobile phone): */
@media screen and (max-width: 700px){
    .navbar {position: static;}
    .navbar li {float: none; width: 100%;}
    .navbar li:hover ul {display: none;}
    .content {padding-top: 30px;}
    .time {position: static;}
    .time:after {content: " \a"; white-space: pre;}
    .teaching .time, .teaching .link, .teaching .title, .teaching .credits {width: auto; display: inline;}
    .teaching .link:after {content: " "}
    .teaching .credits:before {content: ", "}
    .publ, .talk, .conf, .pos, .edu, .work, .grant, .misc, .school, .writings, .version, .superv {position:static; padding-left: 0px;}
    .mypic {display: none;}
    .bottombar {display: inline;}
    .content {padding-bottom: 100px;} /* for bottombar (and more) */
    .content div {padding-left: 5%; padding-right: 5%;}
    div.intro {padding: 0;}
    .content ul {margin: 0;}
    ul.downloads, ul.versions {margin-bottom: 20px}
    h2 {padding-top: 40px; margin-bottom: 50px; text-align: center;}
    h3 {text-align: center;}
    .designed {display: none;}
    .updated {float: right; padding-left: 2px;}
}