body
{
    /* background-color: #003366; */
    /* background-color: #4e4e75; */
    /* background-color: #202060; */
    /* background-color: #8080dd; */
    /* background-color: #6688bb; */
    /* background-color: #ccccff; */
    /* background-color: #b0b0d0; */                /* Purple */
    /* background-color: #eeeeee; */                /* Gray */
    /* background-color: #00529b; */                /* PMS 287 */
    /* background-color: #004A8D; */                /* PMS 288 */
    /* background-color: #00295C; */                /* PMS 289 */
    /* background-color: #6882A3; */
    /* background-color: #406080; */
    /* background-color: #A04040; */
    background-color: #104060;
    padding: 0ex 0ex 0ex 0ex;
    margin: 0ex 0ex 0ex 0ex;
}

div                 { padding: 5px; }
div.body
{
    font-family: sans-serif;
    font-size: 100%;
    color: black;
    margin: 2% 2% 2% 2%;
    /* margin: 0ex 6ex 0ex 6ex; */
    padding: 0.5ex 2ex 1ex 2ex;
    background-color: white;
    border: solid 1px;
    border-color: black;
    /* border-color: #888888; */
    /* background-color: #E4EEF0; */
    /* background-color: #FDFEE9; */
}

div.sidebar
{
    float: right;
    /* width: 25%; */
    border: solid 1px;
    background: #ffffbb;
    margin: 0ex 0ex 1ex 3ex;
    padding: 1ex 1ex 1ex 1ex;
    font-size: 90%;
}
ul.compact              { padding: 0 0 0 5ex; margin: 0 0 0 0; }
ul.compactbottom        { padding-bottom: 0ex; margin-bottom: 0ex; }

div#body-header
{
    padding: 1ex;
    margin-left: -2ex;
    margin-right: -2ex;
    font-size: 80%;
    background-color: #ffffaa;
    height: 2ex;                    /* FIXME: need better solution */
}

#email                  { padding-top: 2em; }

span#controls
{
    float: right;
}

/* Breadcrumbs */
span#breadcrumbs
{
    float: left;
}

#breadcrumbs ul
{
    margin-left: 0;
    padding-left: 0;
    display: inline;
    border: none;
}

#breadcrumbs ul li
{
    margin-left: 0;
    padding-left: .5ex;
    border: none;
    list-style: none;
    display: inline;
}

#breadcrumbs ul li:after
{
    content: "\0020 \00BB \0020";
}

#breadcrumbs ul li.last:after
{
    content: " ";
}

/* Either span or div */
span.lastmodified
{
    padding: 0.2ex 0.5ex 0.2ex 0.5ex;
    font-size: 80%;
    border: dashed 1px #dddddd;
}

div.info                    { font-size: 80%; margin-bottom: 2ex; }

div#info h1                 { margin-top: 0ex; margin-bottom: 0ex; }
div#info #title             { padding-top: 0ex; }

div#photo-div               { float: left; margin-left: 5ex; margin-right: 5ex; }
img#photo-img               { padding: 5px; border: silver solid 1px; }

.infolabel
{
    width: 10ex;
    float: left;
    vertical-align: middle;
    margin: 0ex 0ex 0ex 0ex;
    padding: 0ex 0ex 0ex 0ex;
}

#main-content div p                       { margin-left: 2.5ex; margin-bottom: -1ex; margin-top: .5ex; }
#main-content div#activities              { clear: both; margin-bottom: 0; padding-bottom: 0; }
.front div#publications                   { clear: left; }
/* #main-content div#publications            { float: left; } */

div.label
{
    width: 4ex;
    text-align: right;
    margin: 0ex 1ex 0ex 0ex;
    float: left;
}

.citation .book                           { padding: 0; }

@media (min-width: 1201px)
{
#header                                   { display: flex; flex-direction: row; }
#info                                     { width: 35%; margin-top: 4ex; }
#bio                                      { margin-top: 4ex; }
#bio                                      { display: flex; }

.front div#manuscripts                    { width: 45%; float: right; }

#main-content div#teaching                { width: 45%; float: left; }
/*#main-content div#software                { width: 45%; } [> float: right; } <]*/

.publication .label                       { width: 5ex; }
.publication .citation                    { padding-left: 8ex; }
.publication .label img                   { border: none; margin-top: 1ex; }
}
@media (max-width: 1200px)
{
#header                                   { display: flex; flex-direction: row; }
#info                                     { width: 60%; }
#bio                                      { display: flex; }

.infolabel                                { display: none; }
.info                                     { display: none; }
#title                                    { display: none; }
#academic                                 { display: none; }

div#about                                 { text-align: justify; }
div.abstract                              { text-align: justify; }

#photo-div                                { display: none; }
img#photo-img                             { display: none; }

#main-content div#teaching                { display: none; }

.publication .label                       { display: none; }
.publication .citation                    { padding-left: -4ex; margin-left: 0ex; }
}
@media (max-width: 767px)
{
#header                                   { display: flex; flex-direction: column; }
#info                                     { width: 100%; }
#bio                                      { display: none; }
.publication .label                       { display: none; }
}

div.citation                              { text-align: left; }

#main-content div#about                   { clear: both; }
#main-content div#software h2 a           { text-decoration: none; }
#main-content div#teaching table          { margin-left: 2.5ex; margin-bottom: -1ex; margin-top: .5ex; }
#main-content div.clear                   { clear: both; }

h2                              { margin-bottom: 0ex; }
span.pubname                    { font-style: italic; }

div.authors                     { margin-top: -.5ex; margin-bottom: 1.5ex; }
.downloads td
{
    background: #ffffff;    font-size: 90%;
    margin: 1ex;
    /*float: left;            vertical-align: middle;  */
    /*display: table-cell;*/
}
.downloads img                { border: none; vertical-align: middle; margin: 1ex; }
.downloads .label             { vertical-align: middle; text-align: right; }
.downloads .txt               { vertical-align: middle; top: 50%; margin-top: 1em; text-align: left; }
div.update                      { background: #ffffaa; width: 80%; padding: 3ex; }
div.abstract                    { margin-top: 1.5ex; clear: both; }
div.reference                   { margin: -1ex 0ex 0ex 0ex; }
.reference .citation            { padding-left: 6ex; }

/* div.publication                 { padding-top: .9ex; } */
.citation .book                 { font-size: 90%; padding-top: 0; }
.manuscript .citation           { padding-top: 1.5ex; }

.citation table                 { border: 0px; }

div.figure                      { text-align: center; }
div.figure    img               { padding-left: 5%; padding-right: 5%; max-width: 90%; }

div.downloadtype
{
    width: 20ex;
    float: left;
    vertical-align: middle;
    margin: 0ex 0ex 0ex 0ex;
    padding: 0ex 0ex 0ex 0ex;
}

div.book span.name              { font-weight: bold; }


#photo-div  { order: 1; }
#info       { order: 2; }
#bio        { order: 3; }

/* Bio */

#bio {
    flex-direction: column;
    width: 28em;
    /*float: right;*/
}

#bio > ul {
    list-style-type: none;
    width: 100%;
    margin: 1em auto 1em auto
}

li {
}

#bio > .wrapper {
    width: 90%;
    margin: 0em auto 0em auto
}

.wrapper {
    display: flex;
    padding: 0;
}

.years {
    width: 7em;
    margin-left: 3%;
}
.job {
    flex: 1;
}
.annotation {
    display: flex;
    flex-direction: column;
    font-size: 90%;
}
#bio .label {
    width: 7em;
    margin-left: 3%;
    padding-left: 1em;
}
.content {
}
.delim {
    flex: 1;
}
.institution {
    padding-left: 2em;
    padding-right: 2em;
}