html, body
{
    margin:10px 0px;
    padding:0px;
    text-align:center;
    background-color: #EEEEEE;
}

table
{
    /* border: 1px solid black; */
    /* border-collapse: collapse; */
}
th,td
{
    /* border: 1px solid black; */
    padding: 5px;
    text-align: center;
}

table {
  border-collapse: collapse;
}
table td, table th {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  border-top: 0;
  border-left: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}
.bold-top > td, .bold-top > th {
    border-top: 2px solid black;
}

#content 
{
    width:auto;
    max-width:960px;
    min-width:800px;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    margin:0 auto;
    text-align:left;
    /* border:1px solid #777; */
    background-color: white;
    box-shadow: 0px 1px 5px #999;
    font-family: 'Open Sans', sans-serif;
    font-size: 10.5pt;
    /* line-height: 2; */
    -webkit-text-size-adjust: none;
}

#content-inner
{
    padding:15px 0;
}

#teaseimg
{
    height:auto;
    width:50%;
    box-shadow: 0px 0px 10px #444444;
    border:1px solid #000000;
}

hr.smooth
{
    border: 0;
    height: 1px;
    width: 100%;
    background: #333;
    background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:    -moz-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:     -ms-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:      -o-linear-gradient(left, #ccc, #333, #ccc); 
}

a:link { color: #0066CC; text-decoration: none }
a:visited { color: #743399; text-decoration: none }
a:hover { color: #FF4B33; text-decoration: none }
a:active { color: #FF4B33; text-decoration: none }

.setup-images img {
    max-height: 75vw;
}

.figure {
    max-width: 800px;
    margin: 0 auto;
    margin-top: 0.8em;
}

.figure-half {
    width: max(calc(50% - 20px), 400px);
    margin: 0 auto;
    margin-top: 0.8em;
    float: left;
    padding: 10px;
    text-align: center;
}

.figure-half-container {
    display: flex; 
    align-items: center;
    flex-wrap: wrap;
}

.figure-5 {
    max-width: max(calc(41.66% - 20px), 333px);
    margin: 0 auto;
    margin-top: 0.8em;
    float: left;
    padding: 10px;
    text-align: center;
}

.figure-7 {
    max-width: max(calc(58.33% - 20px), 466px);
    margin: 0 auto;
    margin-top: 0.8em;
    float: left;
    padding: 10px;
    text-align: center;
}

.figure > table, .figure-half > table, .figure-5 > table, .figure-7 > table {
    margin: 0 auto;
}

.figure-caption {
    font-size: 9.5pt;
    text-align: center;
}

.teaser .figure-caption {
    margin-left: 2em;
    margin-right: 2em;
}


/* Some of this has been copied from http://www.mpi-inf.mpg.de/resources/rgbz-camera/ */
/* Sections of the page. */
.section { margin: 4em 2em 0.5em 2em; line-height: 130%; }
.section h2 { margin-top: 1.25em; margin-bottom: 0.75em; }

/* Reduce section margins on very narrow screens, e.g., phones */
/* This must be here so that other classes overwriting .section margins, e.g., .head, could do so. If we place this at the end of the file, they won't have any effect as we would have overwritten them with this media query */
@media screen and (max-width: 400px) {
    .section {
        margin-left: 1em;
        margin-right: 1em;
    }
    .teaser .figure-caption {
        margin-left: 1em;
        margin-right: 1em;
    }
}

/* Logo section. */
.logos { margin: 1.5em 0; text-align: center; margin-top:5px; margin-bottom:10px; }
.logos img { vertical-align:top; margin:0 1.25em; border:0; }

/* Page header. */
.head { text-align: center; margin: 0.5em 0; padding: 0.5em 0; background-color:#e9e9e9; text-shadow: 1px 1px 3px #cccccc; }
.head { color: #111; }
.head h1 { font-size: 24pt; line-height:27pt; margin: 10px 0; }
.head h1 a { text-decoration:none; }
.authors { font-size: 12pt; margin: 0 0 1em 0; }
.affiliations { font-size: 11pt; margin: -0.5em 0 10pt 0; }
.venue { font-style:italic; font-size: 12pt; margin: 1em 0 1em 0; }
.tagline { font-style:italic; font-size: 10.5pt; margin: 1em 0 1em 0; }

/* Specific section styling. */
.teaser { margin: 1.5em 0; text-align: center; }
div.content-primary .teaser p img { display: block; float: none; border: 0; margin: 4em auto 1em auto; }
.abstract { line-height: 130%; }
.abstract p { margin-top: 0; line-height: 150%; }
.downloads ul { margin-top: 0.5em; margin-bottom: -52.5px; }
.list ul { margin-top: 0.5em; }
.bibtex pre
{
    margin-bottom: 0;
    font-family: Consolas, Monaco, monospace;
    white-space: pre-wrap; /* CSS 3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* IE 5.5+ */
    width: 90%;
    color: #444;
    padding: 10px;
    background: #eee;
    border: 1px solid #ccc;
    overflow: auto;
}
.acknowledgments { line-height: 130%; }
.acknowledgments p { margin-top: 0; }
.contact { line-height: 130%; }

.heading { margin: 2.5em 0; text-align: center; }
.datasets { width: 650px; margin: 3em auto; }
.datasets ul { padding-bottom: 1em; }
.dataset { float: left; width: 204px; margin: 5px 10px 15px 0px; text-align: center; }
.dataset h2 { display: inline; }
.dataset img { border: 2px solid #222; margin: 0.25em auto; display: block; }
.backlink { text-align: center; }


/* Display lists in a grid of fixed size. This is useful when lists have associated images. */
/* Idea from http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/ */
li.grid
{
    width: auto;
    /* height: 100px; */
    /* border: 1px solid #000; */
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    zoom: 1;
    *display: inline;
    _height: 100px;
}
/* Formatting for each item in a 2D grid. This is used typically in the downloads section. */
.griditem
{
    font-size: 10pt;
    text-align: center;
    padding: 5px 5px 5px 5px;
}
.griditem img
{
    text-align: center;
    height:100px;
    width:auto;
    border: 1px solid #eee;
    box-shadow: 0px 0px 2px #444444;
}

/* /* some typographic changes * /*/
/* .section h2 {*/
/*     margin-top: 1em;*/
/*     margin-bottom: 0.5em;*/
/* }*/

/* .abstract {*/
/*     line-height: 1.5em;*/
/* }*/
/* /* end here* /*/

/* Fix padding that makes centered download list off-centered. Especially noticeable on narrow screens, e.g., phones */
.downloads ul {
    padding-left: 0px;
    padding-inline-start: 0px;
}

@media screen and (max-width: 960px) {
    /* Remove vertical margins around the content */
    html, body {
        margin-top: 0px;
        margin-bottom: 0px;
    }
}

@media screen and (max-width: 929px) {
    /* Add a gap between logos when they stack vertically */
    .logos img {
        margin-bottom: 10px;
    }
}

/* Fix the page for the phones & other <=800px devices, e.g. iPad */
@media screen and (max-width: 860px) {
    /* Content no longer takes 810px minimum, it should take the screen width */
    #content {
        min-width: inherit;
    }

    /* Resize videos to fill the screen width instead of fixed 810x480 */
    .figure, .figure > img, .figure > video,
    .figure-half, .figure-half > img, .figure-half > video,
    .figure-5, .figure-5 > img, .figure-5 > video,
    .figure-7, .figure-7 > img, .figure-7 > video {
        width: 100%;
        height: auto;
    }

    /* Remove padding from nested sections, e.g., bibtex */
    .section > .section {
        margin-left: 0em;
        margin-right: 0em;
    }
}

/* Fix the page for the phones & other <466px devices */
@media screen and (max-width: 466px) {
    .logos img {
        height: 9vw;
    }
}