/*!
 * custom TNG css
 * (dnelson, 2017)
 */

@font-face {
    font-family: 'bebas_neueregular';
    src: url('../fonts/BebasNeue-webfont.eot');
    src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BebasNeue-webfont.woff') format('woff'),
         url('../fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('../fonts/BebasNeue-webfont.svg#bebas_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#pt_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_thin';
    src: url('../fonts/Roboto-Thin-webfont.eot');
    src: url('../fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Thin-webfont.woff') format('woff'),
         url('../fonts/Roboto-Thin-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Thin-webfont.svg#pt_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_light';
    src: url('../fonts/Roboto-Light-webfont.eot');
    src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Light-webfont.woff') format('woff'),
         url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Light-webfont.svg#pt_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_bold';
    src: url('../fonts/Roboto-Bold-webfont.eot');
    src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Bold-webfont.svg#pt_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_lightitalic';
    src: url('../fonts/Roboto-LightItalic-webfont.eot');
    src: url('../fonts/Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-LightItalic-webfont.woff') format('woff'),
         url('../fonts/Roboto-LightItalic-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-LightItalic-webfont.svg#pt_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* -------------------------------------- general -------------------------------------- */

.downwarn {
  background-color: #b00; 
  width: 100%; 
  height: 50px; 
  position: fixed; 
  top: 0;
  z-index:99999;
  text-align: center;
  overflow: hidden;
}
.downwarn .downhead {
  /*font-size: 150%;*/
  font-weight: bold;
} 
.downwarn p {
  font-size: 125%;
  font-family: 'roboto', Helvetica, serif;
  margin-top: 10px;
  color: white;  
}

html {
  height: 100%;
}
body {
  padding-top: 50px;
  padding-bottom: 20px;
  height: 100%;
}
body.black {
  background-color: black;
}
body.exp3d {
  margin: 0;
  padding: 0;
  /*overflow: hidden;*/
}

p,h1,h2,h3,h4,td,ul,label,input,button {
      /* global font override other than navbar (TBD) */
      font-family: 'roboto', Helvetica, serif;
}
p {
  font-size: 110%;
}
ul {
  font-size: 110%;
}
footer {
      color: #bbb;
}
.hcl {
      color: #a92301;
}
.hnl {
      margin-top: 60px;
      margin-bottom: 30px;
}

/* original orange link theme (light:#f97301, dark:#b93301)
   orange/pumpkin (flat ui): (light:#f39c12, dark:#d35400)
   green: (light:#27ae60, dark:#078e40)
   red: (light:#d0493b, dark:#b71c0c)
*/

  p a, h2 a, h1 a, ul a, span a, table a, div a {
    color: #f39c12;
    text-decoration: none;
  }
  p a:hover, h2 a:hover, ul a:hover, h1 a:hover, span a:hover, table a:hover {
    color: #d35400;
    transition: color 0.3s;
    -moz-transition: color 0.3s;
    -webkit-transition: color 0.3s;
    -o-transition: color 0.3s;
  }

  .form-group .btn-primary {
    border: none;
    background-color: #f39c12;
  }

  .form-group .btn-primary:hover {
    border: none;
    background-color: #d35400;
  }

/* color user_login box buttons like box color */
  .alert-warning .btn-primary {
    border: 1px solid #a47e3c;
    background-color: #d4ae6c;
  }
  .alert-warning .btn-primary:hover {
    border: 1px solid #a47e3c;
    background-color: #a47e3c;
  }

textarea.form-control:focus, input.form-control:focus, select.form-control:focus {   
      border-color: rgba(249, 115, 1, 0.6);
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 5px rgba(249, 115, 1, 0.4);
      outline: 0 none;
}
.top-buffer {
      margin-top: 60px;
}
.top-buffer-sm {
      margin-top: 20px;
}
.top-x {
      padding-top: 0px;
}
#footer-right {
  display: inline-block;
  float: right;
  margin-top: -6px;
}
#footer-right img {
  opacity: 0.5;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;    
}
#footer-right img:hover {
  opacity: 1.0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;  
}

p.just {
  text-align: justify;
}
div.just p {
  text-align: justify;
}

/* -------------------------------------- navbar -------------------------------------- */


@media (max-width: 992px) {
      /* this media chunk to change navbar collapse size to a new value */
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

.navbar, .navbar ul {
      margin: 0;
      font-family: 'bebas_neueregular', sans-serif;
      /*font-family: 'roboto_bold', sans-serif;*/
}

@media (min-width: 768px) {
  /* only for the home page (with banner), semi-transparent navbar becomes opaque for smallest screens */
  .navbar-home { 
      background-color:rgba(0,0,0,0.6) !important;
  }
}

.navbar-brand {
    font-size: 42px;
    padding-right: 70px;
}
.navbar-collapse {
      font-size: 18px;
}

@media /*DISABLED */(max-width: 1200px) {
  .navbar-brand {
    /*font-size: 36px;*/
    padding-right: 20px;
  }
  .navbar-collapse {
    /*font-size: 16px;*/
  }
  .navbar li {
    margin-right: -6px;
    
  }
}

.navbar li {
      padding-left: 0px;
}

.user-settings {
  width: 50px;
  height: 50px;
  padding: 14px;
  opacity: 0.6;
  background-position: center center;
  background-repeat: no-repeat;
}
.gear1 {
  background-image: url(../images/icon-settings1.png);
}
.gear2 {
  background-image: url(../images/icon-settings2.png);
}
.gear3 {
  background-image: url(../images/icon-settings3.png);
}
.gear4 {
  background-image: url(../images/icon-settings4.png);
}
.navbar-collapse .active {
  opacity: 1.0;
  background-color: #000;
}
.user-settings:hover {
  opacity: 1.0;
}

.navbar-collapse.in {
    max-height: none;
    padding-bottom: 10px;
}

/* for explore landing page only:; */
#exp_home_li {
  font-size: 42px;
}
@media (max-width: 992px) {
  #exp_home_li {
    display: none;
  }
}

@media (min-width: 992px) {
  .navbar_exp .navbar-nav_exp  {
    display: inline-block;
    margin-bottom: -6px;
    float: none;
    text-align:center;
  }
  .navbar-collapse_exp {
    text-align:center;
  }
  .navbar-header_exp {
    display: none;
  }
}

/* -------------------------------------- banner -------------------------------------- */

.banner {
	position: relative;
	width: 100%;
	overflow: hidden;
      margin-top: -50px;
      margin-bottom: 15px;
	
	text-align: center;
	color: rgba(255,255,255,.6);
	/* text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3); */
	/* background: #5b4d3d; */
	box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}
.banner ul {
      list-style: none;
      width: 400%;
      margin: 0;
      padding: 0;
}
.banner ul li {
      display: block;
      float: left;
      width: 26%;
      height: 450px;
      /* box-shadow: inset 0 -3px 6px rgba(0,0,0,.5); */
}

.banner h1 {
      margin-top: 140px;
      font-size: 52px;
      color: #fff;
      text-shadow: 1px 1px 5px rgba(0,0,0,1.0);
}
.banner p {
      color: #ddd;
      font-size: 24px;
      text-shadow: 1px 1px 3px rgba(0,0,0,1.0);
}

.banner .dots {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 20px;
}
.banner .dots li
{
      display: inline-block;
      width: 10px;
      height: 10px;
      margin: 0 4px;
      
      text-indent: -999em;
      
      border: 2px solid #fff;
      border-radius: 6px;
      
      cursor: pointer;
      opacity: .4;
      
      -webkit-transition: background .5s, opacity .5s;
      -moz-transition: background .5s, opacity .5s;
      transition: background .5s, opacity .5s;
}
.banner .dots li.active
{
      background: #fff;
      opacity: 1;
}

/* -------------------------------------- home page -------------------------------------- */
.newslist {
      padding-bottom: 10px;
}
.newsdate {
      padding-left: 10px;
      font-family: 'roboto_bold', Helvetica, serif;
      margin-top: 6px;
      margin-bottom: 1px;
}
.newsitem {
      padding-left: 30px;
      display: inline-block;
}

.resp-video {
      position: relative;
      padding-top: 25px;
      padding-bottom: 57.25%;
      height: 0;
      margin-bottom: 16px;
      overflow: hidden;
}

.resp-video iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
}

.press-video {
      margin-top: 12px;
}
.introi {
  padding-top: 0px;
  margin-top: -22px;
  margin-bottom: 0;
}

.homestats {
  width: 60%;
  margin: 1em auto;
  font-size: large;
}
.homestats td {
}
.homestats td:nth-child(1) {
  text-align: right; /* first column */
  width: 70%;
}
.homestats td:nth-child(2) {
  text-align: left; /* second column */
}

/* -------------------------------------- about -------------------------------------- */

h1.about_simname {
  font-size:24em;
  margin:-20px 0;
}

h1.cluster_simname {
  font-size: 14em;
}

@media (max-width: 1200px) {
  h1.about_simname {
    font-size:20em;
    margin:-15px 0;
  }
  h1.cluster_simname {
    font-size: 8em;
  }
}
@media (max-width: 992px) {
  h1.about_simname {
    font-size:8em;
    margin:0;
  }
}

h1.about_simname3 {
  font-size:20em;
  margin:-20px 0;
}

@media (max-width: 1200px) {
  h1.about_simname3 {
    font-size:16em;
    margin:-15px 0;
  }
}
@media (max-width: 992px) {
  h1.about_simname3 {
    font-size:6em;
    margin:0;
  }
}

h3 {
      padding-top: 15px;
}
h4 {
      padding-top: 10px;
      padding-bottom: 10px;
}
.pdesc {
      font-family: 'roboto_bold', Helvetica, serif;
}
.img-cen {
      margin: 0 auto;
}

/* -------------------------------------- people -------------------------------------- */
.pname {
  padding-top: 20px;
}

.pcontact {
  padding-left: 20px;
  margin-bottom: 0;
  padding-bottom: 0;
  color: #555;
  font-size: 100%;
}
.pcontact a { /* website links */
  color: #904201; 
}

img.img-responsive {
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0 auto;
}

.comment-table {
  border: 1px solid #ddd;
  padding: 5px;
  margin-top: 10px;
  width: 100%;
}
.comment-table td,th {
  padding: 4px;
  margin: 4px;
}
.comment-table th {
      background-color:#bbb;
}
.comment-table tr:nth-child(odd) {
      background-color:#eee;
}
.comment-table tr:nth-child(even) {
      background-color:#ddd;
}

.face {
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #333;
    width: 140px;
    height: 140px;
    margin: 20px;
    background-size: cover;
    float: left;
}

#f_dylan    { background-image: url(../images/people_dylan2.jpg);    }
#f_lars     { background-image: url(../images/people_lars.jpg);     }
#f_volker   { background-image: url(../images/people_volker.jpg);   }
#f_annalisa { background-image: url(../images/people_annalisa.jpg); }
#f_jill     { background-image: url(../images/people_jill.jpg);     }
#f_ruediger { background-image: url(../images/people_ruediger2.jpg); }
#f_shy      { background-image: url(../images/people_shy.jpg);      }
#f_mark     { background-image: url(../images/people_mark2.jpg);     }
#f_paul     { background-image: url(../images/people_paul2.jpg);     }
#f_rainer   { background-image: url(../images/people_rainer.jpg);   }
#f_federico { background-image: url(../images/people_federico2.jpg); }

/* -------------------------------------- results -------------------------------------- */
.paperlist {
      padding: 5px;
}
.paperlist ul {
  margin-left: -10px;
}
.paperlist p.title {
      font-family: 'roboto', Helvetica, serif;
      margin: 6px 20px 0px 10px;
}
.paperlist p.auth {

      font-family: 'roboto_lightitalic', Helvetica, serif;
      padding-left: 10px;
      padding-bottom: 2px;
      margin: 0;
}
.paperlist p.ref {
      padding-left: 10px;
      padding-bottom: 10px;
      font-size: 12px;
      margin: 0;
      color: #999;
}

/* -------------------------------------- press -------------------------------------- */
.vlist {
      padding: 5px;
}
.vlist p.title {
      font-family: 'roboto_thin_italic', Helvetica, serif;
      margin: 0px 40px 0px 0px;
}
.vlist p.auth {
      font-family: 'roboto_thin', Helvetica, serif;
      padding-top: 15px;
      margin: 0;
}

/* -------------------------------------- media -------------------------------------- */
.mediabox {
      padding: 15px;
      text-align: center;
}
.mediabox p.desc {
      font-size: 12px;
      margin: 0;
      padding: 8px 28px 0px 28px;
      text-align: justify;
}
.mediabox p.credit {
      display: none;
      /*
      opacity: 0.6;
      margin: 0 0 -8px 250px;
      text-align: right;
      display: inline-block;
      width: auto;
      font-size: 10px;*/
      /*-webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);*/
}
.moviebox {
  padding: 8px;
  border: 1px solid #eee;
  transition: border 0.3s;
  -moz-transition: border 0.3s;
  -webkit-transition: border 0.3s;
  -o-transition: border 0.3s;
}
.moviebox:hover {
  padding: 8px;
  border: 1px solid #888;
  transition: border 0.3s;
  -moz-transition: border 0.3s;
  -webkit-transition: border 0.3s;
  -o-transition: border 0.3s;
}

.mtime {
  color: #aaaaaa;
}

/* -------------------------------------- explore (landing) ------------------------------ */
#explore_container {
  background-color: black;
  height: auto;
  padding: 50px;
  text-align: center;
}

.explore_box {
  text-align: center;
  display: inline-block;
  margin: 0;
  color: #555;
  transition: color 0.5s;
  -moz-transition: color 0.5s;
  -webkit-transition: color 0.5s;
  -o-transition: color 0.5s;
}

.explore_box:hover {
  text-decoration: none;
  color: #ccc;
  transition: color 0.5s;
  -moz-transition: color 0.5s;
  -webkit-transition: color 0.5s;
  -o-transition: color 0.5s;
}

.explore_box img {
  opacity: 0.9;
  -webkit-filter: grayscale(20%);
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
}
.explore_box:hover img {
  opacity: 1.0;
  -webkit-filter: grayscale(0%);
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
}

#explore_box_left {
  padding: 10px 60px 20px 0px;
}

#explore_box_center {
  border-left: 1px solid #555;
  border-right: 1px solid #555;
  padding: 10px 60px 20px 60px;
}

#explore_box_right {
  padding: 10px 0px 20px 60px;
}

.exp_label {
  font-size: 13em;
  margin-top: -30px;
  margin-bottom: 0;
}

@media (max-width: 1400px) {
  #explore_container {
    padding: 0;
  }
  #explore_box_left {
    padding: 0;
  }
  #explore_box_center {
    padding: 0;
  }
  #explore_box_right {
    padding: 0;
  }
}

@media (max-width: 1050px) {
  /* no longer room to show all 3 side by side */
  #explore_container {
    width: 700px;
    margin: 0 auto;
  }
  #explore_box {
  }
  .exp_label {
    float: right;
    margin-top: 150px;
  }
  #explore_box_left {
    border: none;
  }
  #explore_box_center {
    border: none;
  }
  #explore_box_right {
    border: none;
  }
}

/* -------------------------------------- cluster -------------------------------------- */

#f_dylan2    { background-image: url(../images/people_dylan2.jpg);    }
#f_annalisa2 { background-image: url(../images/people_annalisa.jpg); }
#f_reza      { background-image: url(../images/people_reza_ayromlou.jpg); }
#f_wonki     { background-image: url(../images/people_wonki_lee.jpg); }
#f_katrin    { background-image: url(../images/people_katrin_lehle.jpg); }
#f_eric      { background-image: url(../images/people_eric_rohr.jpg); }
#f_nhut      { background-image: url(../images/people_nhut_truong.jpg); }
#f_blank     { background-image: url(../images/people_placeholder.png); }

a.oanchor {
  display: block;
  position: relative;
  top: -60px;
  visibility: hidden;
}
.about-sidenav { /* first nav level */
  text-align: right;
}
.about-sidebar .nav > li > a { /* all nav levels */
  display: inline-block;
  background-color: #ffead5;
  color: #888;
  padding: 6px 8px;
  margin-bottom: 2px;
  font-size: 120%;
}
.about-sidebar .nav > li > a:hover,
.about-sidebar .nav > li > a:focus {
  text-decoration: none;
  background-color: #ffd5b2; /* dark #ffc390 */
}
.about-sidebar .nav > .active > a,
.about-sidebar .nav > .active:hover > a,
.about-sidebar .nav > .active:focus > a {
  color: #000;
  background-color: #ffd5b2; /* medium #ffd5b2 */
  border-left: 12px solid #df9360; /* dark #ffc390 */
  margin-left: 0px;
  margin-right: 0px;
}

/* affix side nav only when screen width is sufficient */
@media (min-width: 1780px) {
  .about-sidebar {
    position: fixed;
    left: 50px;
    top: 80px;
    width: 220px;
  }
}
@media (min-width: 1920px) {
  .about-sidebar {
    left: 150px;
  }
}
@media (min-width: 2120px) {
  .about-sidebar {
    left: 250px;
  }
}
@media (min-width: 2420px) {
  .about-sidebar {
    left: 350px;
  }
}
/* expand to fill width for small screens */
@media (max-width: 1780px) {
  .about-sidebar.affix {
    position: static;
  }
  .about-sidebar .nav > li > a {
    display: block;
  }
  .about-sidenav {
    text-align: left;
  }
}