/* This is a CSS template for a CS project page.
   For academic purposes, this file may be considered to be in public
   domain. So, feel free to reuse.

   Author: Srinath Sridhar (srinaths@umich.edu, srinathsridhar.com)
   Last updated: 2019-Jan for Stanford colors and font
   https://identity.stanford.edu/web-toolkit/
*/

/* Main page */
html, body
{
    margin:10px 0px;
    padding:0px;
    text-align:center;
    background-color: #c9c7c7;
}

/* Global settings for hyperlinks and hr */
a:link { color: #922236; text-decoration: none; }
a:visited { color: #46101a; text-decoration: none; }
a:hover { color: #284980; text-decoration: none; }
a:active { color: #4071c5; text-decoration: none; }
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); 
}

/* Main content div */
#content 
{
    width:auto;
    max-width:1000px;
    min-width:1000px;
    height: auto !important;
    height: 100%;
    /*min-height: 100%;*/
    margin:0 auto;
    text-align:justify;
    border:2px solid #8a887d;
    background-color: white;
    box-shadow: 2px 3px 8px #4e4d78;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 12pt;
    /* line-height: 2; */
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
}
#content-inner
{
    padding:15px 15px;
}

/* For paragraphs */
.publist {width: 900px; margin: 0; margin-top: 10px; margin-bottom: 10px; border: 1px solid #8a887d; padding: 5px; background-color: #f6f3e5;}

/* Tabs control */
/* 1000, 800 . Change below to adjust for main page width*/
div.tabContent { width: 960px; margin: 0 auto; border: 1px solid #8a887d; padding: 0.5em; background-color: #f2f1eb; }
div.tabContent.hide { display: none; }
ul#tabs { list-style-type: none; margin: 30px 0 0 11px; padding: 0 0 0.3em 0; }
ul#tabs li { display: inline; }
ul#tabs li a { color: #42454a; background-color: #e3dfd5; border: 1px solid #8a887d; border-bottom: none; padding: 0.3em; text-decoration: none; }
ul#tabs li a:hover { background-color: #d5d0c0; }
ul#tabs li a.selected { color: #000; background-color: #f2f1eb; font-weight: 500; padding: 0.7em 0.3em 0.38em 0.3em; }

/* Page sections */
/* Some of this has been copied from http://www.mpi-inf.mpg.de/resources/rgbz-camera/ */
.section
{
	margin: 15px 5px 5px 10px;
	line-height: 150%;
	-webkit-font-smoothing: antialiased; 
}

h2 { color: #922236; }

/* Logo section. */
/* .logos { margin: 1.5em 0; text-align: center; margin-top:5px; margin-bottom:10px; width: 150%;} */
.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 2em; background-color:#d7d7d7; text-shadow: 1px 1px 3px #cccccc; }
.head { color: #193f93; }
.head h1 { font-size: 24pt; line-height:27pt; margin: 10px 0; }
.head h1 a { text-decoration:none; }
.authors { font-size: 15pt; margin: 0 0 1em 0; }
.affiliations { font-size: 11pt; margin: -0.5em 0 10pt 0; }
.venue { font-style:bold; font-size: 14pt; margin: 1em 0 1em 0; }

/* Page footer */
.footer { margin: 15px 5px 5px 10px; line-height: 130%; /*margin-left:auto; margin-right:auto;*/ }

/* 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; }
.downloads 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: 80%;
    color: #444;
    padding: 10px;
    background: #eee;
    border: 1px solid #ccc;
    overflow: auto;
    text-align: left;
}
.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; }

/* For displaying projects with a thumbnail image on the left and description on the right */
/* 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.pgrid
{
    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. */
.pgriditem
{
    font-size: 10pt;
    text-align: center;
    padding: 5px 5px 5px 5px;
}
.pgriditem img
{
    text-align: center;
    height:100px;
    width:auto;
    border: 1px solid #eee;
    box-shadow: 0px 0px 2px #444444;
}
#teaseimg
{
    height:auto;
    width:50%;
    box-shadow: 0px 0px 10px #444444;
    border:1px solid #000000;
}

/* 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: 20px;
    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: 11pt;
    text-align: center;
    padding: 5px 5px 5px 5px;
}
.griditem img
{
    text-align: center;
    height:40px;
    width:auto;
    border: 1px solid #eee;
    box-shadow: 0px 0px 2px #444444;
}

/* https://medium.com/swlh/how-to-render-your-3d-models-on-the-web-with-model-viewer-1c389a513855 */

/* The right grid contains the model and occupies 50% of the available space */
.model model-viewer {
    width: 100%;
    height: 320px;
	background-color: #EEE;
	border: 1px solid #000;
}