/* STEM Workforce Stories Style Sheet */
/* Smooth scroll: There is a javascript alternative in scripts.js if needed */
html {
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5 {
    font-family: 'Noto Sans JP', sans-serif;
}

p a {
    text-decoration: underline;
    color: #2A54A7;
}

a.nav-link{
    color: #222222 !important;
    font-size: 1.2rem;
}
a.nav-link.disabled {
    color: #AAAAAA !important;
}

button.btn-outline-dark a {
    color: #222222;
}


a:hover, a.nav-link:hover, li.active > a.nav-link {
    color:#2A54A7 !important;
    text-decoration: none;
}


li.active > a.nav-link {
    border-bottom: 2px solid #2A54A7;
}


/*
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
      color:#CC6600 !important;
      background-color: #fff;
      border: 1px solid #ddd;
      border-bottom-color: transparent;
      cursor: default; 
}
*/

button.btn-outline-dark:hover a, button.btn-outline-dark a:hover, a.btn-outline-dark:hover, table thead {
    background-color: #dddddd;
}

.jumbotron {
    box-sizing: border-box;
    background-image:url(../images/HomePage_cropped.png);
    background-size: cover;
    background-position: 0% 20%;
    min-height:300px;
}

.videocards {
    text-align:center;
}

.videocards img {
    width: 100%;
    margin-bottom:10px;
}

.video-fluid {
  width: 100%;
  height: auto;
}

hr.divider {
    width:80%; 
    margin:14px auto;
}

.transcript {
  float:left;
}

.ngss-align {
  float:right;
}

.transcript i, .ngss-align i, #ngss_alignment_list i {
  font-size: 1.5rem; 
  color: #2A54A7;
}

#ngss_alignment_list img {
  width:120px;
}

#ngss_alignment_list div.media {
  margin-bottom: 32px;
}

#footer_content {
    border-top:1px solid #eee; 
}

/* Style changes to the Able Player */
/* Remove the box shadow from the player */
.able {
    box-shadow: none;
    margin-top:0;
}

/* The time and "paused" at the bottom of the player were getting cut off */
.able-status-bar {
    height: 1.75em;
    min-height: 1.75em;
}

/* Styles for Questions and Answers sections */
/* Temporarily remove the Q and A sections */
#QandA, #ask-q-btn {
  display:none;
}

.q-and-a {
    font-family: 'Noto Sans JP', sans-serif;
    font-size:1.5rem; 
    text-align:center; 
    width:2.5rem; 
    /* margin-right:1rem; */
    margin-bottom:20px;
    padding:0.25rem 0 0.5rem 0;
    border:1px solid #ccc;
    float:left;
    border-radius: 4px;
    background-color:#2A54A7;
    color: white;
}
.div-a {
    margin-left:3.5rem;
}
.p-q {
    padding-left:3.5rem;
    font-style:italic;
}
.p-a {
    padding-left:7rem;
    font-style:italic;
}

.p-q .sign, .p-a .sign {
    font-style:normal;
}

@media only screen and (min-width: 768px) {
    .all-q-and-a {
        padding-left:3rem;
    }
}


/* Speech bubble CSS: adapted from https://codepen.io/mchernin34/pen/ojXvLq?editors=1100 */
/* ============================================================================================================================
== RECTANGLE-BORDER STYLE WITH CURVE
** ============================================================================================================================ */

.rectangle-speech-border {
  position:relative;
  padding:16px 16px 0 16px;
  margin:1em 0 3em;
  border:1px solid #343a40;
  text-align:center;
  font-style:italic;
  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

/* creates larger curve */
.rectangle-speech-border:before {
  content:"";
  position:absolute;
  z-index:10;
  height:30px;
  bottom:-30px;
  border-style:solid;
  border-color:#343a40;
  background:transparent;
  display:block;
}

.rectangle-speech-border.leftside:before {
  left:76px;
  width:44px;
  border-width:0 0 1px 1px;
  /* css3 */
  -webkit-border-bottom-left-radius:80px 50px;
  -moz-border-radius-bottomleft:80px 50px;
  border-bottom-left-radius:80px 50px;
  /* reduce the damage in FF3.0 */
}

.rectangle-speech-border.rightside:before {
  right:76px;
  width:44px;
  border-width:0 1px 1px 0;
  /* css3 */
  -webkit-border-bottom-right-radius:80px 50px;
  -moz-border-radius-bottomright:80px 50px;
  border-bottom-right-radius:80px 50px;
  /* reduce the damage in FF3.0 */
}

/* creates smaller curve */
.rectangle-speech-border:after {
  content:"";
  position:absolute;
  z-index:10;
  bottom:-30px;
  height:30px;
  border-style:solid;
  border-color:#343a40;
  background:transparent;
  display:block;
}

.rectangle-speech-border.leftside:after {
  left:100px;
  width:22px;
  border-width:0 0 1px 1px;
  /* css3 */
  -webkit-border-bottom-left-radius:40px 50px;
  -moz-border-radius-bottomleft:40px 50px;
  border-bottom-left-radius:40px 50px;
  /* reduce the damage in FF3.0 */
}

.rectangle-speech-border.rightside:after {
  right:100px;
  width:22px;
  border-width:0 1px 1px 0;
  /* css3 */
  -webkit-border-bottom-right-radius:40px 50px;
  -moz-border-radius-bottomright:40px 50px;
  border-bottom-right-radius:40px 50px;
  /* reduce the damage in FF3.0 */
}


/* creates a white rectangle to cover part of the oval border*/
.rectangle-speech-border > :first-child:after {
  content:"";
  position:absolute;
  bottom:-10px;
  width:24px;
  height:15px;
  background:#fff;
}

.rectangle-speech-border.leftside > :first-child:after {
  left:76px;
}

.rectangle-speech-border.rightside > :first-child:after {
  right:76px;
}

.cite {
  position: absolute;
  bottom: -3rem;
  font-style:normal;
}

.leftside .cite {
  left: 142px;
}

.rightside .cite {
  right: 142px;
}



/* blue (#3366CC) and orange (#CC6600) */