header{width:100%;height:50px;margin-top:0px;text-align:center;background-color:#003366;position:fixed;z-index:2} body{margin:auto;padding:0;color:#000;background:#fff;-webkit-transition:all;-moz-transition:all;-ms-transition:all;-o-transition:all;transition:all;font-family:"Open Sans", Segoe,"Segoe UI", "Lucida Sans Unicode","Lucida Grande", "Avenir","Seravek","Ubuntu", "DejaVu Sans","Trebuchet MS",Verdana,Arial,sans-serif;font-size:14.4px;line-height:170%;text-align:justify;font-weight:400} h1,h2,h3,h4,h5,h6,.title,span.title,.ftheader,span.venue,span.highlight{font-weight:600} h1,h2{margin-bottom:1.2em} h3{margin-bottom:0.6em} ul,ol,dl{float:left;margin:0;padding:5px 10px 6px 30px;width:calc(100% - 30px)} img.img_responsive{width:100%;height:auto;display:block} video.img_responsive{width:100%;height:auto;display:block} .container a:link, .container a:visited, main a:link, main a:visited{color:#0055AA;text-decoration:none} .ftheader a:link, .ftheader a:visited, .ftsubheader a:link, .ftsubheader a:visited{color:#FFFFFF;text-decoration:none} .title a:link, .title a:visited{color:#000000} .authors a:link, .authors a:visited{color:#6e6e6e} .content a:hover, .content a:hover .text, .ftsubheader a:hover{text-decoration:underline} #span.jw{color:#000000;font-weight:600;text-decoration:underline} #span.jw{color:#000000;font-weight:600} span.author,span.tag{white-space:nowrap} .outercontainer{text-align:center} .header,.container,.content,.img,.text,main{display:inline-block;zoom:1;text-align:left;margin-left:auto;margin-right:auto;vertical-align:middle;max-width:1000px} .header,.container,main{min-width:330px} .img,.text{padding-left:10px;padding-right:10px} .header{line-height:50px} .ftheader,.ftsubheader{display:inline-block;color:#FFF} .ftheader{float:left;padding-left:15px;font-size:1.17em} .ftsubheader{float:right;padding-left:10px;padding-right:20px} .outercontainer,.content{padding-top:0px;padding-bottom:0px} .container,.content,main{width:100%} main.body{margin-top:50px} .content{margin-bottom:10px} .heading,.front{text-align:left;position:relative;z-index:1} .heading .img{padding:30px 30px 30px 10px;max-width:30%} .heading .img img{width:200px} .heading span.tag{padding-right:15px} .heading ul{padding-bottom:0px} .publication{padding-top:0px;padding-bottom:20px} .publication .img{max-width:300px;padding-right:0px;padding-top:5px} .publication .text{max-width:650px;text-align:left;vertical-align:top} .authors{font-size:100%;color:#6e6e6e} span.venue,span.highlight, .publication span.tag{padding-right:0px;font-size:100%} span.highlight, span.highlight a:link, span.highlight a:visited{color:#BB2222} span.fullvenue{padding-left:8px} .anchor{border-top:50px solid transparent;margin-top:-50px;scroll-margin-top:50px} .recruit{display:none} /* Publication view toggle: only one visible at a time. Default state (selected): main.js flips display via showPubs(). */ .view{display:none} .view.active{display:block} .group .title{padding-left:12px} .group li{float:left;width:380px} .group li:nth-child(odd){padding-right:80px} .group ul.alumni li{float:left;width:100%} .talk span{float:left;width:320px} .talk iframe{padding-bottom:15px;border:0px} .talk .yt-facade{position:relative;width:300px;height:169px;margin-bottom:15px;cursor:pointer;background:#000;overflow:hidden} .talk .yt-facade img{width:100%;height:100%;object-fit:cover;display:block;border:0} .talk .yt-facade .yt-play{position:absolute;top:50%;left:50%;width:68px;height:48px;margin:-24px 0 0 -34px;background:rgba(0,0,0,0.75);border-radius:10px;transition:background 0.2s} .talk .yt-facade .yt-play:before{content:"";position:absolute;top:50%;left:50%;margin:-10px 0 0 -7px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff} .talk .yt-facade:hover .yt-play,.talk .yt-facade:focus .yt-play{background:#f00} @media only screen and (max-width: 639px) { .ftsubheader{padding-left:5px;padding-right:10px} .heading .img{padding-right:80px} .publication .img{display:none} .talk{display:none} .publication .text{text-align:left} .content,.publication{padding-top:0px;padding-bottom:10px} .group li:nth-child(odd){padding-right:0px} body{font-size:80%} } @media only screen and (min-width: 640px) { .heading .img{padding-right:calc(35px)} .heading .info{padding-right:calc(40% - 350px)} .publication .text{padding-left:calc(10px + 2 * min(0px, calc(1% - 8.5px)))} .publication .text{padding-right:calc(10px + 2 * min(0px, calc(1% - 8.5px)))} .publication .img{width:24%} .publication .text{max-width:72%;text-align:left} }