/** wwsb.css
 *  
 *  @brief CSS for laying out the WWSB multi-panel view.
 *  
 *  *******
 *  @see views/WWSB_sample_outline.html for some layouts, IDs, and classes.
 *  *******
 *
 *  @see ColumnManager, ColumnBase, and subclasses.
 *  @author [unknown]
 */
td.studyBibleTD {
  vertical-align: top;
}

td.studyCommentaryTD {
  vertical-align: top;
}

#wwsb-top {
  width: 100%;
  background-color: grey;
  height: 31px;
}

// Outer wrapper to group all the panels together
// \nee this was div.wwsb-panes-wrapper in CCEL 2.
//
table.wwsb-panel-wrapper {
  border: none;
}

// Container for each *individual* panel (controls + hint + contents)
div.wwsb-panel-container {
  width: 49%;
  vertical-align: top;
}

// Conventionally a Bible version
#wwsb-left.wwsb-panel-container {
  float: left;
}

// Defaults to a commentary, but often changes
#wwsb-right.wwsb-panel-container {
  float: right;
}

// One-liner disposable instructions (between control bar and content)
.wwsb-hint {
  background-color: #ffffaa;
  padding: 3px;
}
.wwsb-hint img {
  float: right;
  margin: 2px;
  height: 15px;
}

#wwsb-pref-link {
  float: right;
  margin: 3px 5px;
}

#menu-passage .col-3 {
  padding-left: 0px;
}

#passage-chooser-input-wrapper {
  padding-left: 0px;
  padding-right: 0px;
}

#search-input {
  width: 100%;
  display: inline-block;
  border: 1pt solid #9f9f9f;
}

a:hover #wwsb-search-pref-div {
  text-decoration: none;
}

#wwsb-search-pref-div {
  display: inline-block;
}

#search-div {
  /* 28px (gear) + some visual padding */
  padding-right: 28px;
  clear: none;

  height: 10px;
}

/* The gear icon thingy */
#wwsb-pref {
  margin-top: -5px;
  float: right;
  font-size: 30pt;
}

#menu-passage .menu-passage-dropdowns > ul.multicolumn > li > ul ul {
  width: 450px !important;
}

#menu-passage .menu-passage-dropdowns > ul.multicolumn > li > ul li {
  width: 150px;
}

.menu-passage-dropdowns > * {
  float: none;
  display: inline-block;
  vertical-align: top;
}

// Contains the content (of any panel), excluding controls, hints,...
// Its only child is .wwsb-panel-meat.
.wwsb-panel {
  width: 100%;
  background: white;

  padding: 0pt;
  margin: 0pt;
}
// http://goingspare.wordpress.com/2007/04/06/css-padding-and-width/
// The only child of .wwsb.panel. Still needed?
.wwsb-panel-wrapper {
  padding: 12pt;
}

.wwsb-panel-wrapper .book-content {
  margin: auto !important;
  font-size: inherit !important;
}

.wwsb-panel-wrapper .book-content span.pb {
  /* Override -32pt from books.css:.book-content span.pb */
  margin-left: -8pt;
}

/* In WWSBland, t0 through t5 classes are applied to inline thingies
not block containers. So that makes their use slightly more
complicated...  */
.wwsb-panel-wrapper .book-content .poem,
.wwsb-panel-wrapper .book-content .verse {
  /*    margin-left: 2.5em; */
}
.wwsb-panel-wrapper .book-content .t0 {
  margin-left: -2.5em;
}
.wwsb-panel-wrapper .book-content .t1,
.wwsb-panel-wrapper .book-content .t {
  margin-left: -1.5em;
}
.wwsb-panel-wrapper .book-content .t2 {
  margin-left: 0.5em;
}
.wwsb-panel-wrapper .book-content .t3 {
  margin-left: 1.5em;
}
.wwsb-panel-wrapper .book-content .t4 {
  margin-left: 2.5em;
}
.wwsb-panel-wrapper .book-content .t5 {
  margin-left: 3.5em;
}

.form-item {
  display: inline;
}

.active-verse {
  background-color: rgba(225, 215, 139, 0.5);
  border-top: 1px solid #fff1dd;
  border-bottom: 1px solid #fff1dd;
}

.section-heading {
  font-weight: bold;
  margin-bottom: 0.5em;
}

.subject-item {
  margin: 0 0 0 0;
}

.list-item {
  text-indent: -2em;
  margin-left: 4em;
  margin-bottom: 0px;
  margin-top: 0px;
}

.list-item img {
  vertical-align: text-bottom;
}

.list-head {
  margin-top: 0px;
  margin-bottom: 0.25em;
}

.list-heading {
  padding-left: 14px;
  background: url('/img/plus.jpg') no-repeat left center;
}

.hidden-items {
  display: none;
}

.expanding {
  background-image: url('/img/dot.jpg') !important;
}
.expanded {
  background-image: url('/img/minus.jpg') !important;
}

.wwsb-header {
  margin-top: 3px;
  padding: 5px;
  text-align: center;
  background-color: lightgrey;
}

.center {
  text-align: center;
}

.passage-header {
  float: left;
  width: 50%;
  padding-top: 1px !important;
}

.scripture-top {
  padding-top: 4px;
  width: 100%;
  text-align: center;
}
.scripture-top > * {
  margin: 1pt 4pt;
}
.scripture-top.nav {
  flex-wrap: unset;
}

.stars {
  margin-left: 0.5em;
  white-space: nowrap;
  display: inline-block;
}

#wwsb-pref-menu {
  display: none; /* Hide by default */
}

.wwsb-menu a {
  display: block;
}
/* But not for in-menu descriptions of stuff: */
.wwsb-menu .wwsb-menu-description a {
  display: inline;
}
.wwsb-menu-description {
  max-width: 30em;
}

.popup-header {
  display: none;
}

.wwsb-hymns ul,
.wwsb-hymns li {
  margin-left: 0pt;
  padding-left: 0pt;
}
.wwsb-hymns li {
  list-style: none;
}

/*
 * When inlining a superfish menu, it has to be pretended that the top level is actually a sublevel.
 */
.wwsb-menu-dropdown,
.wwsb-menu {
  position: absolute;
  top: 0px;
  left: 0px;
}
.wwsb-menu {
  border: 1px solid black;
  background-color: white;
  padding: 3px;
}

.wwsb-menu-dropdown {
  background-color: white;
  padding: 0px;
  border: none;
}

.visible-menu {
  display: block !important;
  visibility: visible;
  z-index: 10;
}

.input-error {
  background-color: #ff9797;
}
.input-success {
  background-color: #ddffdd;
}

/* override .indent from another stylesheet since
   it causes horizontal scroll bars in the columns  */
.indent {
  margin-left: 25px !important;
  left: 0px !important;
}

.top-item {
  height: 31px;
}

.controllinks #wwsb-scripture-version-wrapper {
  display: inline-block;
}

.controllinks #wwsb-scripture-version-wrapper > ul > li {
  position: static;
}

.wwsb-menu-dropdown {
  background: transparent;
}

#wwsb-scripture-version-wrapper > ul > li > ul {
  position: relative;
  top: 0em;
}

.copyright {
  color: gray;
  font-size: 10px;
  line-height: 100%;
}

// WWSB uses 'sup' for footnote numbers.
// When notes are shown inline, we need to prevent showing the footnote
// number twice (once for the reference, and once for the footnote itself).
sup {
  //vertical-align: top;
  font-weight: bold;
  color: red;
}
sup.NoteRef {
  //color:red;
}

input {
  border-style: none;
}

input.with-border {
  border: 1px solid black;
}

button {
  background-color: lightgrey;
  color: #bf5a26;
  border-style: none;
}

input.disabled {
  color: gray;
}

h3 {
  margin: 5px 0px !important;
}

.js-sync-heights {
}

.wwsb-links-old {
  margin-top: 1em;
  font-size: 75%;
}

/* begin star styling */
.star-count {
  color: #444444;
}

.stars,
.star {
  text-indent: 0pt;
}
/* end star styling */

/* See https://stackoverflow.com/questions/12956937/
*/

note {
  display: block;
  width: 25%;
  float: right;
  color: blue;
  border: thin blue solid;
  padding: 2pt;
  font-size: 8pt;
}
note:before {
  float: none;
  position: relative;
  //content:"*";
}

span.Footnote {
  color: red;
  display: block;
}

#studyContent td,
#studyControls td,
#studyWarnings td {
  padding: 5pt;
  width: 50%;
}

.columnScroll {
  overflow: auto;
  height: 80vh;
  max-height: 600px;
  padding-left: 20px;
  padding-right: 20px;
}

.footnote {
  font-family: serif;
}

.popover.fade {
	max-width: 500px;
}

table.wwsb-panel-wrapper {
	table-layout: fixed;
}

#studyControls.navbar {
	box-shadow: unset;
    flex-wrap: unset;
}
#main.container {
	max-width: unset;
}
#main .dropdown-menu.bg-secondary  {
  background-color: white!important;
}
.popover .dropdown-menu.bg-secondary  {
  background-color: white!important;
}
#main .dropdown-menu.bg-secondary .nav-link a {
  padding: .5rem 1rem;
}
.popover .dropdown-menu.bg-secondary .nav-link a {
  padding: .5rem 1rem;
}

#main .dropdown-menu.bg-secondary a.text-light {
  color: var( --ccel-red )!important;
}

.popover .dropdown-menu.bg-secondary a.text-light {
  color: var( --ccel-red )!important;
}

.popoverexit {
	float: right;
}
.mobarrow {
  display: none;
  font-size: 40pt;
}
.hideOnLoad {
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
   opacity: 1;
}
.shrinkOnLoad {
  -webkit-transition: margin .5s ease-in-out;
  -moz-transition: margin .5s ease-in-out;
  -ms-transition: margin .5s ease-in-out;
  -o-transition: margin .5s ease-in-out;
  -webkit-transition: padding .5s ease-in-out;
  -moz-transition: padding .5s ease-in-out;
  -ms-transition: padding .5s ease-in-out;
  -o-transition: padding .5s ease-in-out;
}
@media only screen and (max-width: 555px) {
  #previous {
    display: none;
  }
  #next {
    display: none;
  }
  .mobarrow {
    display: unset;
    margin: 5px;
  }
  .popoverexit {
	font-size: 30px;
  }
  .popover.fade {
	max-width: 85%;
	font-size: 10pt;
  }
  div#main {
    margin-top: -30px;
  }
  #studyWarnings {
    display: none;
  }
  #wwsb-pref-menu {
    font-size: 14px;
  }
  #wwsb-pref-menu li.nav-link {
    font-size: 14px;
  }
  #studyControls li.nav-link a {
    margin-left: 10px;
    font-size: 14px;
  }
  #StudyNavBarMain a {
    font-size: 14px;
  }
  #wwsb-scripture-passage {
    margin-top: -6px;
  }
  #studyContent > * {
    display: block;
  }
  #studyContent {
    margin-top: -30px;
    display: table-cell;
  }
  #studyContent td {
    width: 100%;
    max-height: 225px;
    overflow: hidden;
    padding-bottom: 10px;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
  }
  #wwsb-right-panel {
    background-color: #deddb4;
  }
  .columnScroll {
    max-height: 225px;
    padding-bottom: 5px;
    padding-left: 0px;
    padding-right: 0px;
  }
  #studyControls.navbar {
    box-shadow: 0 0 5px #000;
    border-left: 1px solid black;
    border-right: 1px solid black;
    margin-bottom: -4px;
  }
  .landingpage-heading.landingpage-study {
    margin-bottom: 0px;
    padding: 10px 10px 0px 0px;
  }
}
@media only screen and (max-width: 440px) {
  .popover.fade {
	min-width: 75%;
  }
  #main.pr-3 {
    padding-left: 0px!important;
  }
  #studyControls.navbar {
	padding: unset;
  }
}
@media only screen and (max-width: 380px) {
  .popover.fade {
	min-width: 95%;
  }
  .scripture-top > * {
    margin: 2px 3px;
  }
}