header nav main aside footer { display: block; }
span.avoidwrap { display:inline-block; }

/* TITLE */

#title {
    margin: 5pt 0 0 40pt;
    overflow: hidden;
}
#title a {
    color: #1F82C9;
    font-size: 38pt;
    font-weight: 900;
}
#title a span {
    color: #1D649B;
}
#subtitle {
    margin: 0 0 0 2.2em;
    position: relative;
    top: -0.85em;
}
#subtitle, #subtitle a {
    color: #000060;
    font-size: 18pt;
    font-weight: bold;
}
#title a:link, #title a:visited, #title a:hover {
    text-decoration: none;
}
@media all and (max-width: 50em) {
    #title {
        margin: 5pt 0 0 5pt;
    }
    #title a {
        font-size: 30pt;
    }
    #subtitle, #subtitle a {
        font-size: 14pt;
    }
}


/* NAVBAR */

#navbar
{
    display: flex;
    flex-flow: row wrap;
    padding: 4pt;
    background: #000060;
    color:white;
}
#navbar div
{
    display: inline-block;
    padding-left: 4em;
}
#navbar a:link, #navbar a:visited
{
    color:white;
}
#navbar-2
{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    padding: 1pt;
}
#navbar-2 div
{
    display: inline-block;
    padding-right: 4em;
}
#navbar-2 a:link, #navbar-2 a:visited
{
    color:#888;
}
@media all and (max-width: 50em) {
    #navbar div
    {
        padding-left: 1.5em;
    }
    #navbar div:first-child
    {
        padding-left: 2pt;
    }
    #navbar-2 div
    {
        padding-right: 2em;
    }
}


/* CONTENT & SIDEBAR */

#outer {
    background: #EEEEEE;
    margin: 12pt 32pt;
    padding: 8pt;
}
#inner {
    background: white;
    margin: 0;
    padding: 4pt 6pt;
}
#container {
    display: flex;
    flex-flow: row wrap;
}
main {
    flex: 1;
    padding-right: 10pt;
    margin-top: 10pt;
    margin-bottom: 10pt;
}
#sidebar {
    flex: 0.3;
    border-left: solid #AAAAAA 1.5pt;
    padding: 0pt 10pt 0pt 10pt;
}
#sidebar p {
    line-height: 100%;
    margin: 0.3em 0;
}
@media all and (max-width: 50em) {
    #outer {
        background: transparent;
        margin: 12pt 0pt;
        padding: 0pt;
    }
    #inner {
        background: white;
        margin: 0;
        padding: 4pt 6pt;
    }
    #container {
        flex-flow: column;
    }
    #sidebar {
        border-top: solid #AAAAAA 1.5pt;
        border-left: 0;
    }
}

#sidebar .header {
    font-size: 11pt;
    font-weight: bold;
    margin-top: 1em;
}
#sidebar ul {
    list-style: disc outside none;
    padding-left: 1em;
    margin-top: 8pt;
    margin-bottom: 12pt;
}
#sidebar li {
    margin-bottom: 1pt;
}

#cnthdr, #cntftr {
    background: #AAAAAA;
    color: #000060;
    font-size: 8pt;
    font-weight: 600;
    margin: 0;
    padding: 2pt;
    width: 100%;
}
td#cnthdr_right, td#cntftr_right {
    text-align: right;
}
#breadcrumbs, #cntftr {
    font-size: 8pt;
    margin: 0;
}
#cnthdr a:link, #cnthdr a:visited, #cnthdr a:hover,
#cntftr a:link, #cntftr a:visited, #cntftr a:hover {
    color: #000060;
}


ul.pipedlist
{
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.pipedlist li
{
    display: inline;
    padding: 0;
    margin: 0;
    margin-right: 1em;
}
ul.pipedlist li:before
{
    content: "\00BB \0020";
}


/* List of text */
table {
    font-size: 1em;
}
.textlist td {
    padding: 4pt 10pt;
}
.textlist p.intro {
    font-size: .9em;
    font-style: italic;
}
.textlist p.author {
    font-size: .9em;
    color: #AAAAAA;
    color: #606060;
}
.textlist p {
    margin: 0;
}

/* .border: simple table with borders */
/* .namevalue: table with two cols - one with a name and the second with an description */
.border {
    border-collapse: collapse;
}
.namevalue {
    border: 1px #AAAAAA solid;
}
.namevalue td, .namevalue th, .border td, .border th {
    padding: 3pt;
    vertical-align: top;
    text-align: left;
}
.border td, .border th {
    border: 1px #AAAAAA solid;
    padding-right: 18pt;
}
.namevalue td.name {
    font-weight: bold;
    padding-right: 10pt;
}
.border th, .namevalue th {
    background: #CCCCCC;
    font-weight: bold;
}
tr.two, .hl {
    background: #EEEEEE;
}
td > p.small {
    margin-bottom: 0;
}

/* Linux style Shell prompt, source code */
pre.shell, pre.source {
    border: 1px #AAAAAA solid;
    margin-right: 4pt;
    padding: 2pt;
}
.prompt {
    color: #994444;
    font-size: 1em;
    font-weight: bold;
}
.comment {
    color: #449944;
    font-style: italic;
}

/* Code, local Filenames */
code, .path, .program {
    color: #994444;
    font-family: monospace;
}
.quote {
    font-style: italic;
    margin: .5em 2em;
}
.keystroke, .output {
    color: #444499;
    font-family: monospace;
}
hr.seperator {
    border: 1px #AAAAAA solid;
    margin: 15pt 0;
    width: 50%;
}


/* general options for text */
body {
    background-color: white;
    font-family: "DejaVu Sans", "Verdana", sans-serif;
    font-size: 10pt;
    margin: 0;
    padding: 0;
}

h2 {
    font-size: 13pt;
    margin-top: 1.9em;
    clear: both;
}
main h2:first-child {
    margin-top: 0pt;
}
h3 {
    font-size: 11pt;
    margin-top: 1.6em;
}
h4 {
    font-size: 10pt;
}
small, p.small {
    font-size: 7pt;
}
p.small {
    margin-top: 2pt;
}
main ul {
    padding-left: 2em;
}
main ul li {
    margin: 0.3em 0;
}
pre {
    white-space: pre-wrap;
}

.journal {
    color: #444;
    font-weight: bold;
}


/* HYPERLINKS */

a:link, a:visited {
    color: #1D649B;
    text-decoration: none;
    font-weight: bold;
}
a:link:hover {
    text-decoration: underline;
}
a.unstyled:link, a.unstyled:visited,
a.person:link, a.person:visited,
.datalist a.arxiv:link, .datalist a.arxiv:visited{
    color: black;
    font-weight: normal;
}
/* a.person:link, a.person:visited { */
/*     color: #444; */
/* } */

a[href^="http:"], a[href^="https:"] {
    background: url(/images/ext.png) right center no-repeat;
    padding-right: 14px;
}
a[href^="mailto:"] {
    background: url(/images/extm.png) right center no-repeat;
    padding-right: 14px;
}
a.video {
    background: url(/images/video.png) left center no-repeat;
    padding-left: 14px;
    padding-right: 0;
}