/*
  overrides of bootstrap defaults
*/
@media (min-width: 576px) { .card-columns { column-count: 1; column-gap: 0; } }
@media (min-width: 768px) { .card-columns { column-count: 2; column-gap: 16px; } }

.container { padding-right: 10px; padding-left: 10px; }
@media (min-width:  576px){ .container { max-width:   none; } }
@media (min-width:  768px){ .container { max-width:   none; } }
@media (min-width:  992px){ .container { max-width: 1140px; } }
@media (min-width: 1200px){ .container { max-width: 1140px; } }

DIV.narrow-card-container { width: 96%; padding-right: 15px; padding-left: 15px; }
@media (min-width:  576px){ DIV.narrow-card-container { max-width:   none; } }
@media (min-width:  768px){ DIV.narrow-card-container { max-width:  768px; } }
@media (min-width:  992px){ DIV.narrow-card-container { max-width:  768px; } }
@media (min-width: 1200px){ DIV.narrow-card-container { max-width:  768px; } }

div.card-columns > div.card > div.card-body > h1.card-title { font-size: 1.5rem!important; }
div.card-columns > div.card > div.card-body > h2.card-title { font-size: 1.25rem!important; }
div.card-columns > div.card > div.card-body { padding-top: 0.5rem; }
div.card-columns > div.card { max-width: 552px; }

blockquote { border-left: 2px solid #6c757d; padding-left: 10px; margin-top: 2rem; margin-bottom: 2rem; }

figure > img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
}

/* contents */
/* ** FILM LIST PAGE ** */
/* ** FILM PAGE ** */
/* ** PERSONNEL PAGE ** */
/* ** CONTENT PAGES ** */
/* ** LOGIN PAGE ** */

/*
  https://www.w3schools.com/css/css_padding.asp
   4. top, right, bottom, left
   3. top, l/r, bottom
   2, top/bottom, l/r

  top padding for fixed nav bar
  also href target for return to top of page
*/
/* div.anchor { padding: 3.5rem 0 0 0; margin: 0; } */

/* for internal page links,
   to compensate for height of fixed header
*/
DIV.anchor:target::before {
  content: "";
  display: block;
  height: 3.5rem; /* fixed header height*/
  margin: -3.5rem 0 0; /* negative fixed header height */
  padding: 0;
}

DIV.clear-left { margin: 0; padding: 0; height: 0; clear: left; }

/* identifier of target id=top */
DIV#top    { padding: 3.5rem 0 0; margin: 0; }
DIV#fixed-footer-pad { padding: 7rem 0 0; margin: 0; }

P.top { font-size: 0.9rem; }
DIV.content-page   P.top { margin-top: 3rem; margin-left: 0.75rem; }
DIV.film-credits   P.top { margin-left: 0.75rem; }
DIV.personnel-page P.top { margin-top: 2rem; margin-left: 0; }
DIV.personnel-page H2 { font-size: 2.25rem; /* font-weight: 600; */ }

footer {
  padding: 0.25rem 0 0.5rem; margin: 0;
  background-color: #fff; /* #fdfdfd; */ /* #fff is navbar-light from light bootstrap */
  border-top: 2px solid #dee2e6;  /* color same as border-top from light bootstrap */
}
footer P { text-align: center; margin-bottom: 0.25rem; }
footer DIV.container { text-align: center; margin-bottom: 0.25rem; }
#footer-links { font-size: 0.8rem; margin-left: 0.5rem; }
#copyright-notice { font-size: 0.9rem; }

/* "span" or "a" */
.personnel-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.navbar-loginstatus { padding: 0 12px; }
.navbar-loginstatus #navbar-loginname { font-weight: 600; }







/* ** FILM LIST PAGE ** *************************************************** */

IMG.card-img-top { background: #ffffcc; }

.card-columns H2.film-title {
  font-size: 1.5rem;
  /* margin-top: 0.25rem; */
}

.card-columns H2.film-title .film-year {
  font-size: 0.9rem;
}

.card-columns H3.film-credits-list-label {
  font-size: 0.9rem; line-height: 1.7; /* 1.5 from body, 1.2 from H3 */
  /* font-size: 1rem; line-height: 1.5; */
  float: left; clear: left;
  margin-top:    0;
  margin-bottom: 0.1rem;
  margin-right:  0.3rem;
  margin-left:   0.5rem;
}

.card-columns UL.film-credits-list {
  list-style-type: none; margin-bottom: 0.1rem; padding: 0;
}

.card-columns UL.film-credits-list LI {
  display: inline;
  margin: 0 0.1rem; /* gap between personnel links */
  padding: 0;
}

.card-columns DIV.tv-guide-capsule { margin: 0.75rem 0 0; display: none; }
.film-feature DIV.tv-guide-capsule { margin: 0.25rem 0 1.25rem; }

DIV.tv-guide-capsule P {
  font-size: 0.9rem;
  margin: 0 0.25em 0.5em;
}

P.subtitles {
  background-image: url("../images/closed_captioning_symbol.png");
  /* background-attachment: scroll; */ /* (default) */
  background-position: 2px 1px;
  background-repeat: no-repeat;
  border-radius: 0.2rem;
  padding: 2px 8px 12px 60px;
  min-height: 38px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 1.5rem;
  /* width: 356px; */
  /* margin-right: 2.5rem; */
  color: #6c757d;
  /*background-color: #000000; color: #dee2e6;*/
}

.btn-vimeo {
  /* background-color: #ffffff; background-position: 138px 10px; border-color: #00adef; color: #00adef; */
  /*
  background-color: #00adef; background-position: 138px -54px; border-color: #00adef; color: #ffffff;
  background-image: url("../images/vimeo_blue_white_hover_110x32.png");
  */
  /* background-color: #ffffff; background-position: 90px 0px; border-color: #00adef; color: #00adef; */
  background-color: #00adef; background-position: 120px -43px; border-color: #00adef; color: #ffffff;
  background-image: url("../images/vimeo_blue_white_hover_90x25.png");

  background-repeat: no-repeat;
  font-size: 24px;
  font-weight: bold;
  padding: 3px 120px 5px 18px;
  margin-left: 1rem;
  border-radius: 0.4rem;
  border-width: 2px;
}

.btn-vimeo:hover {
  /* background-color: #00adef; background-position: 138px -54px; border-color: #00adef; color: #ffffff; */
  /*
  background-color: #ffffff; background-position: 138px 10px; border-color: #00adef; color: #00adef;
  */
  /* background-color: #00adef; background-position: 90px -50px; border-color: #00adef; color: #ffffff; */
  background-color: #ffffff; background-position: 120px 7px; border-color: #00adef; color: #00adef;
}



/* ** FILM PAGE ** ******************************************************** */

UL.film-page-links {
  list-style-type: none; margin-bottom: 0.1rem; padding: 0 0 0 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

UL.film-page-links LI {
  display: inline;
  margin: 0 0.2rem; /* gap between film page links */
  padding: 0 0.1rem;
}

H1.film-title {
  margin-top: 0.5rem;
}

H1.film-title .film-year {
  font-size: 1.0rem;
  vertical-align: middle;
  /* line-height: 2.75rem; */
  padding-left: 0.5rem;
}

DIV.film-description {
  margin-bottom: 1.5rem;
  margin-right: 4.5rem;
}

DIV.film-credits H2 {
  margin: 1.5rem 0 0.75rem;
  border-bottom: 2px solid #dee2e6;
}

DIV.film-credits DL.credits {
  margin-left: 0.25rem;
}

DIV.film-credits DL.credits DT {
  float: left;
  clear: left;
  line-height: 1.25rem;
  margin: 0.1rem 0 0.5rem;
  text-align: right;
  width: 14rem;
}

DIV.film-credits DL.credits DD {
  margin: 0 0 0 15rem;
  line-height: 1.5rem;
}

DIV.film-credits DL.credits DD UL {
  display: block; list-style-type: none; margin-bottom: 0.5rem; padding: 0;
}

DIV.film-credits DL.credits DD UL LI {
  display: block; margin: 0; padding: 0;
}

H3.cast-list-label {
  margin-left: 12.5rem;
  margin-bottom: 0;
}

DL.cast-list {
  margin-left: 5rem;
  margin-bottom: 2rem;
}

DL.cast-list DT {
  float: left;
  clear: left;
  font-weight: 400;
  text-align: left;
}

DL.cast-list DD {
  margin: 0 0 0.25rem 12rem;
  /* font-weight: 500; */
  line-height: 1.5rem;
}

P.attn {
  background-color: #ffffcc;
  background-image: url("../images/spoiler_warning_icon.png");
  /* background-attachment: scroll; */ /* (default) */
  background-position: 6px 0.3rem;
  background-repeat: no-repeat;
  border-radius: 0.3rem;
  padding: 0.4rem 18px 0.5rem 44px;
  margin-left: 0.3rem;
  margin-right: 1.2rem;
  display: inline-block;
  border: 1px solid #eeeeee;
  color: #6c757d;
}
P.attn B { color: #212529; }

H5.spoiler-warning {
  background-color: #ffffaa;
  background-image: url("../images/spoiler_warning_icon.png");
  /* background-attachment: scroll; */ /* (default) */
  background-position: 6px 2px;
  background-repeat: no-repeat;
  border-radius: 0.3rem;
  padding: 9px 18px 11px 44px;
  display: inline-block;
  font-size: 15px;
  color: #6c757d;
  border: 1px solid #eeeeee;
}

SPAN.spoilers-label {
  font-size: 14px;
  color: #212529;
}



/* ** PERSONNEL PAGE ** *************************************************** */

UL.personnel-page-top-links {
  list-style-type: none; margin-bottom: 0.1rem; padding: 0 0 0 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

UL.personnel-page-top-links LI {
  display: inline;
  margin: 0 0.2rem; /* gap between film page links */
  padding: 0 0.1rem;
}

UL.personnel-page-top-links LI B {
  font-size: 0.9rem;
}

DIV.personnel-bio-container {
  margin: 0 0 2rem 0;
}

DIV.personnel-page H4 {
  border-bottom: 2px solid #dee2e6;
  margin: 1.5rem 0 0.6rem;
}

DIV.personnel-page UL.credits,
DIV.personnel-page DL.credits {
  margin-left: 0.75rem;
}

DIV.personnel-page DL.credits DT {
  float: left;
  clear: left;
  line-height: 1.25rem;
  margin: 0.1rem 0 0.5rem;
  text-align: left;
  width: 17rem;
}

DIV.personnel-page DL.credits DD {
  margin: 0 0 0 18rem;
  line-height: 1.5rem;
}

DIV.personnel-page UL.credits,
DIV.personnel-page DL.credits DD UL {
  display: block; list-style-type: none; margin-bottom: 0.5rem; padding: 0;
}

DIV.personnel-page UL.credits LI,
DIV.personnel-page DL.credits DD UL LI {
  display: block; margin: 0 0 0.1rem; padding: 0;
}

DIV.personnel-page UL.credits LI,
DIV.personnel-page DT {
  font-weight: 500;
}

DIV.personnel-page UL.credits LI { float: left; padding-right: 1rem; }

DIV.personnel-page UL.credits LI .film-year,
DIV.personnel-page DT .film-year {
  font-weight: 400;
  font-size: 0.8rem;
}

DIV.personnel-list-page H1 { margin-bottom: 1.5rem; }

DIV.personnel-list-page UL {
  display: block;
  float: left;
  list-style-type: none;
  margin-bottom: 0.5rem; padding: 0;
  width: 25%;
}

DIV.personnel-list-page UL LI {
  display: block; margin: 0 0 0.5rem 0; padding: 0 0.5rem; text-align: center; /* min-height: 28px; */
}

/* DIV#personnel-columns { margin-bottom: 0.75rem; } */

DIV#superapple-notice {
  margin-top: 0.75rem; text-align: center;
}

DIV#superapple-notice P {
  text-align: left; width: auto;
  padding-left: 60px; padding-top: 10px;
  background-image: url("../images/sa-icon-54x56.png");
  height: 56px;
  background-position: top left;
  background-repeat: no-repeat;
  display: inline-block;
  line-height: 1.2rem;
  font-size: 0.9rem;
}

DIV.personnel-superapple-designation {
  /* background-image: url("../images/sa-icon-54x56.png"); min-height: 56px; */
  /* background-image: url("../images/sa-icon-26x28-filled.png"); */
  background-image: url("../images/sa-icon-26x28.png");
  min-height: 28px;
  background-position: top left;
  background-repeat: no-repeat;
  padding-left: 30px;
  margin-left: 0.5rem;
  margin-bottom: 0.5rem;
}

SPAN.superapple {
  /* background-image: url("../images/sa-icon-26x28-filled.png"); */
  background-image: url("../images/sa-icon-19x20-filled.png");
  /* min-height: 28px; */
  background-position: top right;
  background-repeat: no-repeat;
  padding-right: 22px;
  overflow: visible;
}


/* ** CONTENT PAGES ** **************************************************** */

@media print {
  DIV.noprint, FOOTER { display: none; }
}

DIV.home-page H1,
DIV.home-page H3,
DIV.home-page H5,
DIV.personnel-list-page H1,
DIV.content-page DIV.introduction-text H1,
DIV.content-page DIV.introduction-text H3,
DIV.content-page DIV.introduction-text H5,
DIV.home-page-menu,
P.home-page-menu,
P.home-page-main-menu,
P.home-page-login-instruction {
  text-align: center;
}

DIV.home-page-footer-menu {
  margin: 3.5rem 0 0;
}

P.home-page-menu,
P.home-page-main-menu,
P.home-page-login-instruction {
  margin-bottom: 1.5rem;
}

P.home-page-menu A,
P.home-page-main-menu A {
  margin: 0 0.75rem;
}

/* DIV.content-page DIV.card { padding-bottom: 2.0rem; } */

DIV.personnel-page H1,
DIV.content-page H1,
DIV.content-page H2 {
  margin-bottom: 1.0rem;
}

DIV.content-page H2 {
  margin-top: 0.25rem;
}

DIV.content-page H3 {
  margin-top: 2.0rem;
  margin-bottom: 1.0rem;
}

DIV.content-page H4 {
  margin-top: 1.75rem;
  margin-bottom: 1.0rem;
}


DIV.login-page { margin-left: 1.5rem; }

DIV.login-page H1 {
  margin-top: 0;
  margin-bottom: 0.1rem;
}

DIV.login-page H3 {
  margin-top: 0;
  margin-left: 0.25rem;
  margin-bottom: 1.0rem;
}


DIV.home-page H1, DIV.personnel-page H1 { margin-top: 1.25rem; }
DIV.content-page DIV.introduction-text H1 { margin-top: 1.5rem; }
DIV.home-page H1,
DIV.content-page DIV.introduction-text H1 {
  font-size: 3.0rem;
  font-weight: 700;
}

DIV.home-page H3, DIV.content-page DIV.introduction-text H3 { font-weight: 700; }
DIV.home-page H3 { margin-top: -0.75rem; margin-bottom: 1.5rem; font-size: 1.75rem; }
DIV.content-page DIV.introduction-text H3 { margin-top: 1.0rem; margin-bottom: 2.5rem; }

DIV.home-page H5 {
  font-size: 1.25rem;
  font-style: italic;
  margin-top: 0.75rem;
  font-weight: 450;
}

DIV.home-page-content-container {
  background-color: #ffffcc;
  background-image: url("../images/mp_panthers_espanol.png");
  /* background-attachment: scroll; */ /* (default) */
  background-position: 20px 7px;
  background-repeat: no-repeat;
  margin: 0 2rem 1.5rem;
  border: 1px solid rgba(0,0,0,0.125);
  padding: 0.5rem 1rem 0.5rem 190px;
  /* text-align: center; */
}

DIV.introduction-text { margin: 0 2.5rem 2.5rem; }
DIV.dvd-extras-text { margin: 0 1.25rem 1.25rem; }
H4.dvd-extras-list-heading, DIV.content-page H4.dvd-extras-list-heading { margin-bottom: 0.5rem; }
UL.dvd-extras-list, UL.dvd-extras-list-main { list-style: square; padding-inline-start: 30px; }

DIV.dvd-extras-text H3 SPAN.film-year { font-size: 1.25rem; font-weight: normal; display: none; }
UL.dvd-extras-list LI SPAN.film-year,
DIV.dvd-extras-text OL LI SPAN.film-year,
DIV.dvd-extras-text P SPAN.film-year { font-size: 0.9rem; }

UL.dvd-extras-list LI { margin-bottom: 0.25rem; }
UL.dvd-extras-list-main LI { margin-bottom: 0.75rem; }

UL.login-options LI { margin-bottom: 1.0rem; }

P.signature {
  /* text-align: right; */
  padding-left: 70%;
}

UL#colophon-cookies-list LI { margin-bottom: 0.75rem; }

DIV.content-page DL { margin-bottom: 1rem; margin-left: 0.75rem; }
DIV.content-page DL DT { margin-top: 0.75rem; }
DIV.content-page DL DD { margin-bottom: 0.25rem; margin-left: 0.5rem; }

DIV.bechdel { margin-bottom: 1rem; }
DIV.bechdel P, DIV.bechdel OL LI { margin-bottom: 0.25rem; }

DIV.film-faults { margin-bottom: 1rem; }
DIV.film-faults UL { list-style: square; padding-inline-start: 20px; }
DIV.film-faults P, DIV.film-faults UL LI { margin-bottom: 0.25rem; }


/* ** LOGIN PAGE ** ******************************************************* */

OL LI { margin-bottom: 0.75rem; }

#okta-sign-in { margin-top: 0; margin-bottom: 0.5rem; margin-left: 0; margin-right: 0; width: 340px; }

#okta-sign-in .auth-header {
  background-image: linear-gradient(rgba(255, 255, 204, 0.9), rgba(255, 255, 255, 0.5)), url("/images/tv-static.gif");
  background-color: #ffffcc;
  padding: 0 0 3px; }
#okta-sign-in.no-beacon .auth-header { padding-bottom: 3px; }

#okta-sign-in .auth-org-logo { max-height: 64px; }

#okta-sign-in .auth-content { padding: 0 1.5rem 20px; }
#okta-sign-in.no-beacon .auth-content { padding-top: 0; }

#okta-sign-in .o-form-head { font-size: 18px; color: #333333; }

#okta-sign-in.auth-container.main-container .margin-btm-30 { margin-bottom: 9px; }

#okta-sign-in .o-form-button-bar { width: 92%; margin-left: 4%; }
#okta-sign-in .o-form-button-bar .button,
#okta-sign-in .o-form-button-bar .button-primary {
  height: auto; width: 100%; margin-left: 0;
  line-height: 2.5rem; color:  #33a; font-weight: bold; }

/* #okta-sign-in .social-auth-button.link-button { height: auto; line-height: 1em; } */

#okta-sign-in.auth-container .button-primary { background-image: linear-gradient(rgba(255, 255, 204, 1), rgba(255, 255, 204, 0.5)); }

#okta-sign-in.auth-container .button-primary:focus { background-image: linear-gradient(rgba(255, 255, 204, 0.8), rgba(255, 255, 255, 1)), url("/images/tv-static.gif"); }
#okta-sign-in.auth-container .button-primary:hover { background-image: linear-gradient(rgba(255, 255, 204, 0.8), rgba(255, 255, 255, 1)), url("/images/tv-static.gif"); }

/* forgot password */
#okta-sign-in.auth-container a.email-button {
  color: #33a; font-weight: bold;
  height: auto; line-height: 2.5rem;
  width: 92%; margin-left: 4%; }