/*
 * Copyright 2020 seL4 Project a Series of LF Projects, LLC.
 * SPDX-License-Identifier: GPL-2.0-only
 */

 @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

 body {
   font-family: 'Roboto', Helvetica, sans-serif;
 }

 a {
   color: #56749F;
 }

 a:hover {
   color: #263852 /* neutralDark */
 }

 .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover,
 .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
   background-color: #385378; /* neutral */
 }

 .nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .nav-pills li a:hover {
   background-color: #D6DBE4; /* neutralLighter */
 }

 #page-container {
   position: relative;
   min-height: 100vh;
 }

 #content-wrap {
   padding-bottom: 120px;    /* Footer height */
 }

 footer {
   padding-top: 15px;
   padding-bottom: 15px;
   /*text-align: center;*/
   background-color: #D6DBE4; /* neutralLighter */
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 120px;
 }

 @media screen and (max-width:906px) {
   #content-wrap{
     padding-bottom: 180px;
   }
   footer {
     height: 180px;
   }
 }

 .jumbotron {
   /*color: #000;
   background-image: url('/images/sel4-banner.jpg');
   background-position: 80% 0%;*/
 }

 @media print {
   #site-navigation { display: none; }
   #site-header a[href]:after {
     content: none;
   }
 }

 table.alttable tr:nth-child(even) {
   background-color: #D6DBE4; /* neutralLighter */
 }

 .nav-pills {
   padding-top: 0px;
   margin-bottom: 20px !important;
 }

 .breadcrumb {
   margin-bottom: 0px;
   background-color: #EBEEF5; /* neutralLighter */
 }

 .breadcrumb>li+li:before {
   color: #385378; /* neutral */
 }

 h1 {
   margin-bottom: 0.5em;
 }

 code {
   color: #AC5D55; /* accent */
   background-color: #EBEEF5; /* neutralLightest */
 }

 .hp_grid_container {
 }

 .homepage_grid {
   display: grid;
   display: inline-grid;
   grid-template-columns: auto;
   /*grid-column-gap: 10px;
   grid-row-gap: 10px;*/
   margin: 20px;
   padding: 10px;
 }

 @media screen and (min-width: 60em) {
   .homepage_grid {
     grid-template-columns: repeat(3, 1fr);
   }
 }

 @media (max-width: 60em) {
   .hidden-mobile.homepage_item {
     display: none;
   }
 }

 .homepage_item {
   display: grid;
   grid-template-columns: 1fr;
   /*grid-template-rows: 1fr 0.25fr 0.9fr;*/
   grid-template-rows: 100px 10px 60px;
   grid-template-areas: "hp_pic" "hp_title" "hp_text";
   grid-row-gap: 10px;
   align-content: center;
   justify-self: center;
   padding: 20px;
   border-radius: 10px;

   /* For making the whole div clickable */
   cursor: pointer;
   position: relative;
 }

 .homepage_item:hover {
   background-color: #D6DBE4; /* neutralLighter */
 }

 /* For making the whole div clickable */
 a.divLink {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   text-decoration: none;
   /* Makes sure the link doesn't get underlined */
   z-index: 10;
   /* raises anchor tag above everything else in div */
   background-color: white;
   /*workaround to make clickable in IE */
   opacity: 0;
   /*workaround to make clickable in IE */
   filter: alpha(opacity=0);
   /*workaround to make clickable in IE */
 }

 .hp_pic {
   align-self: center;
   justify-self: center;
   grid-area: hp_pic;
 }

 .hp_title {
   grid-area: hp_title;
   justify-self: center;
   align-self: center;
   font-size:1.6em;
   font-weight: bold;
 }

 .hp_text {
   grid-area: hp_text;
   justify-self: center;
   margin: 10px;
   text-align: center;
 }

 .summit_item{
   grid-template-rows: 350px;
 }

 .people_grid {
   display: grid;
   display: inline-grid;
   grid-template-columns: auto;
   /*grid-column-gap: 10px;
   grid-row-gap: 10px;*/
 }

 @media screen and (max-width: 400px) {
   .people_grid {
     grid-template-columns: repeat(1, 200px);
   }
 }

 @media screen and (min-width: 400px) and (max-width:600px) {
   .people_grid {
     grid-template-columns: repeat(2, 200px);
   }
 }

 @media screen and (min-width: 600px) and (max-width: 800px) {
   .people_grid {
     grid-template-columns: repeat(3, 200px);
   }
 }

 @media screen and (min-width: 800px){
   .people_grid {
     grid-template-columns: repeat(4, 200px);
   }
 }

 .person {
   display: grid;
   grid-template-columns: 1fr;
   /*grid-template-rows: 1fr 0.25fr 0.9fr;*/
   grid-template-rows: 100px 10px;
   grid-template-areas: "person_pic" "person_title"  "person_affiliation";
   grid-row-gap: 20px;
   align-content: center;
   justify-self: center;
   padding: 20px;
   border-radius: 10px;

   /* For making the whole div clickable */
   cursor: pointer;
   position: relative;
 }
 .person:hover {
   background-color: #8897AE; /* neutralLight */
 }


 .person_pic {
   align-self: center;
   justify-self: center;
   grid-area: person_pic;
 }

 .person_title {
   grid-area: person_title;
   justify-self: center;
   align-self: center;
   text-align: center;
   font-size:1.1em;
 }

 .person_title_col {
   color: #8897AE; /* neutralLight */
 }

 .person_affiliation{
   align-self: center;
   justify-self: center;
   grid-area: person_affiliation;
 }

 .person_no_link {
   display: grid;
   grid-template-columns: 1fr;
   /*grid-template-rows: 1fr 0.25fr 0.9fr;*/
   grid-template-rows: 100px 10px;
   grid-template-areas: "person_pic" "person_title" "person_affiliation";
   grid-row-gap: 20px;
   align-content: center;
   justify-self: center;
   padding: 20px;
   border-radius: 10px;

   position: relative;
 }


 /* note the plural */
 .members {
   display: grid;
   grid-template-columns: auto;
   grid-column-gap: 50px;
   align-items: center;
   justify-content: center; /* adjusted */
   width: 100%;
 }

 @media screen and (max-width: 500px) {
   .members {
     grid-template-columns: repeat(1, 220px);
   }
 }

 @media screen and (min-width: 500px) and (max-width:800px) {
   .members {
     grid-template-columns: repeat(2, 220px);
   }
 }

 @media screen and (min-width: 800px){
   .members {
     grid-template-columns: repeat(3, 220px);
   }
 }

 /*single member*/
 members-1 {
   display: grid;
   grid-template-columns: auto;
   grid-column-gap: 50px;
   align-items: center;
   justify-content: center; /* adjusted */
   width: 100%;
 }


 .member {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr 0.25fr 0.25fr;
   grid-column-gap: 25px;
   grid-row-gap: 10px;
   align-content: center;
 }

 @media (max-width: 60em) {
   .hidden-member-mobile {
     display: none;
   }
 }

 .member-pic {
   align-self: center;
   justify-self: center;
   grid-area: 1 / 1 / 2 / 2;
   padding-top: 30px;
 }

 .member-name {
   grid-area: 2 / 1 / 3 / 2;
   /*justify-self: center;*/
   text-align: center;
   font-size:1.2em;
 }

 .member-info {
   grid-area: 3 / 1 / 3 / 2;
   /*justify-self: center;*/
   text-align: center;
   font-size:0.8em;
   font-weight: bold;
 }

 /* note the plural */
 .sponsors {
   display: grid;
   grid-template-columns: auto;
   grid-column-gap: 50px;
   align-items: center;
   justify-content: center; /* adjusted */
   width: 100%;
 }

 @media screen and (max-width: 500px) {
   .sponsors {
     grid-template-columns: repeat(1, 200px);
   }
 }

 @media screen and (min-width: 500px) and (max-width:700px) {
   .sponsors {
     grid-template-columns: repeat(2, 200px);
   }
 }

 @media screen and (min-width: 700px){
   .sponsors {
     grid-template-columns: repeat(3, 200px);
   }
 }

/* Four sponsors */
.sponsors-4 {
   display: grid;
   grid-template-columns: auto;
   grid-column-gap: 50px;
   align-items: center;
   justify-content: center; /* adjusted */
   width: 100%;
 }

@media screen and (min-width: 1000px) {
   .sponsors-4 {
     grid-template-columns: repeat(4, 200px);
   }
 }

 @media screen and (min-width: 500px) and (max-width: 1000px) {
   .sponsors-4 {
     grid-template-columns: repeat(2, 200px);
   }
 }

@media screen and (max-width: 500px) {
   .sponsors-4 {
     grid-template-columns: repeat(1, 200px);
   }
 }

/* Two sponsors */
.sponsors-2 {
  max-width:500px;
  margin-left: auto;
  margin-right: auto;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  grid-template-rows: 100px 20px 20px;
  grid-template-areas:
    "logo1 logo2"
    "name1 d"
    "tier1 tier2";
  align-items: center;
}
.sponsor2-item1 {
  grid-area: logo1;
  text-align: center;
}
.sponsor2-item2 {
  grid-area: logo2;
  text-align: center;
}
.sponsor2-item3 {
  grid-area: name1;
  text-align: center;
}
.sponsor2-item4 {
  grid-area: d;
  text-align: center;
}
.sponsor2-item5 {
  grid-area: tier1;
  text-align: center;
  font-size:0.8em;
}
.sponsor2-item6 {
  grid-area: tier2;
  text-align: center;
  font-size:0.8em;
}


 @media screen and (max-width: 500px) {
   #two-sponsors-in-row {
        display: none;
    }
 }
@media screen and (min-width: 500px) {
   #two-sponsors-in-col {
        display: none;
    }
}
@media screen and (max-width: 500px) {
   #two-sponsors-in-col {
        display: grid;
    }
}

 /*single sponsor*/
 sponsors-1 {
   display: grid;
   grid-template-columns: auto;
   grid-column-gap: 50px;
   align-items: center;
   justify-content: center; /* adjusted */
   width: 100%;
 }


 .sponsor {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr 0.25fr 0.25fr;
   grid-column-gap: 25px;
   grid-row-gap: 10px;
   align-content: center;
 }

 @media (max-width: 60em) {
   .hidden-sponsor-mobile {
     display: none;
   }
 }

 .sponsor-pic {
   align-self: center;
   justify-self: center;
   grid-area: 1 / 1 / 1 / 1;
   padding-top: 30px;
 }

 .sponsor-name {
   grid-area: 2 / 1 / 2 / 2;
   /*justify-self: center'*/
   text-align: center;
   bottom: 0;
   font-size:1.2em;
 }

 .sponsor-info {
   grid-area: 3 / 1 / 3 / 2;
   /*justify-self: center;*/
   text-align: center;
   font-size:0.8em;
   font-weight: bold;
 }

 .governing-container {
   display: grid;
   grid-template-columns: 30px auto;
   grid-gap: 10px 70px;

 }

 .governing-item-pic {
   grid-row-start: 1;
   grid-row-end: span 2;
 }

 .governing-item-heading {
   grid-column-start: 2;
   grid-column-end: 2;
   grid-row-start: 1;
   grid-row-end: span 1;
 }

 .governing-item-text {
   grid-column-start: 2;
   grid-column-end: 2;
   grid-row-start: 2;
   grid-row-end: span 2;
 }

 .bottom-ruler {
   margin-top: 0px;
   margin-bottom:5px;
   border-top:2px solid #96ca50 /* logo green */
 }

 .highlight {
   line-height: 1.3;
   color:#668B37;  /* greenDark */
   font-size:15px;
   font-weight:bold;
 }

 /* yellow background for TBD tasks (used during development) */
 .tbd {
    background-color: yellow;
 }

 .emph {
   color:#668B37;  /* greenDark */
 }


 .join {
   color:#668B37;  /* greenDark */
   font-size:20px;
   font-weight: bold;
 }

 .news {
   width: auto;
   height:auto;
   padding-top:.5em;
   padding-left:10px;
   padding-right:5px;
   margin-top:1em;
   margin-left:60px;
   margin-right:60px;
   border-radius: .7em;
   background-color: #EBEEF5; /* ligher than hover D6DBE4 */
 }

 .news:hover {
   background-color: #D6DBE4; /* neutralLighter */
 }

 .news-column {
   float: left;
   padding: 5px;
 }

 .news-clearfix::after {
   content: "";
   clear: both;
   display: table;
 }

 .news-title {
   width: 75px;
   font-size: 200%;
   line-height: 80%;
 }

 .tag-link {
   width: 6em
 }

 .tag-span{
   display: none;
 }
 .tag-link:hover span {
   display: inline;
 }

 .news-content {
   width: auto;
 }

 .news-item {
   width: auto;
   height:auto;
   padding:.3em;
   margin-top:3rem;
   margin-bottom:.5em;
   border-radius: .4em;
   background-color: #D6DBE4; /* neutralLighter */
   font-weight: bold;
   clear: both;
 }
 .news-item:hover + .hide-tag{
   display: block;
   color: green;
 }

 .news-finish{
     clear:both;
     margin-bottom: 4rem;
 }

 .news-img {
    float: right;
    padding-left: 2rem;
 }

 .news-text-container{
   overflow: hidden;
 }
 #floated-imgs { float: right; }
 #floated-imgs img {display: block; }

 .memberlogopage h1 {
     font-size:50px;
 }
 .memberlogopage h2 {
     font-size:40px;
 }

 .memberlogopage .sponsors {
     margin-top: 30px;
     margin-bottom: 60px;
 }

 table.endorsement-table {
     margin-left: 20px;
 }

 .endorsement-table tr{
     margin-top: 10px;
 }

 .endorsement-table td{
     padding: 10px;
     padding-top: 30px;
     vertical-align: top;
 }

 table.data-table {
     border-collapse: collapse;
     width: 100%;
     word-wrap: break-word;
     border-width: 0px;
 }

 .data-table tr {
     border-width: 0px;
 }

 .data-table th {
     padding: 1ex 2ex 1ex 2ex;
     border-style: solid none solid none;
     border-color: black;
     border-width: 2px;
 }

 .data-table td, td.data-table-right {
     padding: 0.8ex 2ex 0.8ex 2ex;
 }

 td.data-table-right {
     text-align: right;
 }

 td.data-table-right, td.data-mean, td.data-stddev {
     word-wrap: normal;
     white-space: nowrap;
 }

 td.data-mean {
     padding: 0.8ex 0ex 0.8ex 2.5ex;
     text-align: right;
 }

 td.data-stddev {
   padding: 0.8ex 1.5ex 0.8ex 1ex;
 }

 td.monospace {
   font-family: monospace;
 }

 table.summit-talks {
   border-collapse: collapse;
   width: 100%;
 }

 #summit-talks td, #summit-talks th {
   border: 1px solid #ddd;
   padding: 8px;
 }

 td.break {background-color: #D6DBE4;}

 #summit-talks tr:hover {background-color: #ddd;}

 #summit-talks th {
   padding-top: 12px;
   padding-bottom: 12px;
   text-align: left;
   background-color: #96CA4F;
   color: white;
 }
 .summit_chair{
   font-style: italic;
 }
 .summit-abstract-link{
   font-weight: bold;
 }
 h4.summit-abstract-title{
   background-color: #96CA4F;
   color: white;
 }
 p.summit-abstract-type{
   font-style: italic;
 }
 p.summit-abstract-author{
   font-weight: normal;
 }
 span.summit-abstract-presenter{
   color: black;
   text-decoration: underline;
 }
 span.summit-abstract-presenter-bold{
   color: black;
   text-decoration: underline;
   font-weight: bold;
 }
 span.summit-abstract-affiliation{
   font-style: normal;
   color:#808080;
 }
 div.summit-abstract{
   padding-top: 5px;
   padding-bottom: 10px;
 }

 div.summit-abstract-tbd{
   padding-top: 5px;
   padding-bottom: 10px;
   background-color: yellow;
 }

 /*note the plural*/
 .keynotes_grid {
   display: grid;
   display: inline-grid;
   grid-template-columns: 300px 300px;
   align-items: center;
   justify-content: center; /* adjusted */
   width: 100%;
   row-gap: 20px;
   padding-bottom:20px;
   /*grid-column-gap: 10px;
   grid-row-gap: 10px;*/
 }

 @media screen and (max-width: 400px) {
   .keynotes_grid {
     grid-template-columns: repeat(1, 200px);
   }
 }
.keynote_talk {
   grid-area: speaker_talk;
   justify-self: center;
   align-self: center;
   width: 250px;
   font-size:1.1em;
 }

 /*note the plural*/
 .speakers_grid {
   display: grid;
   display: inline-grid;
   grid-template-columns: auto;
   align-items: center;
   justify-content: center; /* adjusted */
   width: 100%;
}

 @media screen and (max-width: 400px) {
   .speakers_grid {
     grid-template-columns: repeat(1, 200px);
   }
 }

 @media screen and (min-width: 400px) and (max-width:600px) {
   .speakers_grid {
     grid-template-columns: repeat(2, 200px);
   }
 }

 @media screen and (min-width: 600px) and (max-width: 800px) {
   .speakers_grid {
     grid-template-columns: repeat(3, 200px);
   }
 }

 @media screen and (min-width: 800px){
   .speakers_grid {
     grid-template-columns: repeat(4, 200px);
   }
 }

 .speaker {
   display: grid;
   grid-template-columns: 1fr;
   /*grid-template-rows: 1fr 0.25fr 0.9fr;*/
   grid-template-rows: 200px 20px 30px;
   grid-template-areas: "speaker_pic" "speaker_title" "speaker_talk";
   grid-row-gap: 20px;
   align-content: center;
   justify-self: center;
   padding: 20px;
   border-radius: 10px;
 }

 .speaker_pic {
   align-self: center;
   justify-self: center;
   grid-area: speaker_pic;
 }

 .speaker_title {
   grid-area: speaker_title;
   justify-self: center;
   align-self: center;
   font-size:1.1em;
 }

 .speaker_title {
   grid-area: speaker_title;
   justify-self: center;
   align-self: center;
   font-size:1.1em;
 }

 .speaker_title_col {
   color: #8897AE; /* neutralLight */
 }

 .speaker_talk {
   grid-area: speaker_talk;
   justify-self: center;
   align-self: center;
   width: 300px;
   font-size:1.1em;
 }

 .youtube_icon{
   width: 40px;
 }

 .previous-summit-links{
   padding: 5px;
 }

 .summit_div{
   padding-top: 10px;
 }
 h5.keynote{
   font-weight: bold;
 }
 p.keynote {
   text-indent: 15px;
 }

 .center {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

.center-imgs {
    text-align:center;
}