/* ----------------------------------------------------------------------
Style sheet for bible2.net BibleStudio4
------------------------------------------------------------------------*/


/* --- Layout --- */

.searchresult {
    position: absolute;
    top: 8.5em;
    bottom: 0;
    width: 95%;
    overflow: auto;
}
.books {
    position: absolute;
    top: 8.5em;
    bottom: 0;
    width: 95%;
    overflow: auto;
}

.bibletext {
    position: absolute;
    top: 4em;
    bottom: 0;
    overflow: auto;
}

/* --- Styling --- */

#app
{
  font-size: 0.8rem !important;
}
#app h2,
#app h3
{
  margin-top: 0.5rem;
  margin-bottom: .5rem;
  font-size: 1rem !important;
}

.left {
    padding: 0 0.5em 0 1em;
}
.right {
    /* padding moved to pairview for background color */
}
.topHalf,
.bottomHalf {
  width: 97%; /* room for margin, shadow, scrollbar */
  margin: 0.5em; /* all directions, for shadow */
  padding: 0; /* no left/right padding - allow .bibletext width 100% for narrow texts */
  background-repeat: repeat;
}

.topHalf.focussed,
.bottomHalf.focussed {
  box-shadow: 0 0 0 0 #ffffff, 0 0 0 0 #ffffff, 0 3px 10px 0 rgba(0, 0, 0, 0.5);
}

.topHalf h2,
.bottomHalf h2 {
    font-weight: normal; /* not focussed, override */
}

.topHalf.focussed h2,
.bottomHalf.focussed h2 {
    font-weight: 700; /* default */
}

.Bible1 nav,
.Bible2 nav {
    font-size: 80%;
}

.Bible1 {
  background-image: url(/images/backgroundpattern_second.png);
}
.Bible2 {
  background-image: url(/images/backgroundpattern_first.png);
}

/*
.Info {
  position: fixed;

  top: 3em;
  right: 10em;
  z-index: 2000;
}
*/

#pairview .logo {
    float: left;
    padding: 0 0.5em;
}

.bibleView .logo {
    float: left;
    padding: 0.5em;
}

.bibleView .title,
.bibletext {
    padding-left: 60px;
}

.bibletext {
    padding-right: 5em;
    width: 100%; /* needed for narrow texts, otherwise scrollbar shown not at right border */
}

.Bible1 .selected,
.bible1Selected {
/*
    color: #3333ff;
*/
    background-color: #ccfffe; /* background is #ccffff */
}
.Bible2 .selected,
.bible2Selected {
/*
    color: Maroon;
*/
    background-color: #feea9d; /* background is #feea8d */
}

h3.chapterNumber {
/*
    font-size: 3em;
*/
    font-weight: bold;
    line-height: 0;
    position: relative;
    left: -2em;
    top: 0.65em;
    color: #e35b00; /* TODO for now, like link */
}
/* TODO
h3.chapterNumber a {
    color: #e35b00;
}
*/

p.verse {
  margin: 0 0 3px;
}
.verseGroup {
  cursor: pointer;
}
.vn {
  color: #c00000;
  font-size: .83em;
  vertical-align: super;
}
.fn {
    color: #6c757d; /* darkgray */
    font-size: 0.85em;
    line-height: 1.2em;
    margin: 0.7em 3em;
}

.leftSelect {
    padding-top: 1em;
    padding-bottom: 1em;
}

.searchControl .goSearch,
.searchControl .clearFilter {
  width: 3em;
  line-height: 1;
}
.searchControl .clearFilter {
  /* from Bootstrap 3 .close */
  font-weight: 700;
  color: #000;
  text-shadow: 0 1px 0 #fff;
}
.searchControl .badge {
  min-width: 2em;
}

.searchControl .controls1 {
  margin-bottom: 0;
}

.searchControl .bibleSelectButton {
  line-height: 1;
}

.searchBibleRef {
  color: gray;
}

#Bible1 a.xrefBibleRef,
#Bible1 a.xrefBibleRef:focus,
#Bible1 a.xrefBibleRef:hover {
    color: #0033ff; /* @color-first */
}
#Bible1 a.xrefBibleRef:hover {
    background-color: #ccfffe; /* light blue */
}
#Bible1 a.xrefBibleRef:visited {
    color: #032a54; /* dark blue*/
}


#Bible2 a.xrefBibleRef,
#Bible2 a.xrefBibleRef:focus,
#Bible2 a.xrefBibleRef:hover {
  color: #c00000; /* b2_red */;
}
#Bible2 a.xrefBibleRef:hover {
  background-color: #ffda2d; /* @b2_yellow */
}
#Bible2 a.xrefBibleRef:visited {
    color: maroon; /* @color-second */
}

.searchresult td {
  padding: 0;
  cursor: pointer;
}
.searched {
    background-color: #faffbd; /* rgb(250, 255, 189); Firefox input:-internal-autofill-selected*/
    color: inherit; /* override if used in badge */
}
.searchresult .selected {
/*
    font-weight: bold;
    color: gray !important;
    border:1px solid red;
*/
    background-color: lightgray;
    color: black;
}

.bibleRefControl input {
    width: 10em;
}

.books td {
    vertical-align: top;
}

.books .bookBtn {
    width: 100%;
    min-height: 2em;
    text-align: left;
    padding: 0 1em;
    margin-bottom: 0.1em;
}
@media (max-width: 1600px) { 
  .books .bookBtn {
    font-size: 90%;
    text-align: left;
    padding: 0 0.5em;
  }
}
@media (max-width: 1200px) { 
  .books .bookBtn {
    font-size: 80%;
    text-align: center;
    padding: 1em 0.1em;
  }
}

.filtered,
.highlighted {
    background-color: #c8ffc8; /* lighter green */
    color: inherit; /* override if used in badge */
}

#pairview {
    padding: 0 1em 0 0.5em;
    height: 100%;
    overflow-y: auto;
}

#pairview h3 {
    font-size: 0.8rem !important;
    font-weight: bold;
}

#pairview .verseSection {
    min-height: 15em;
    margin-bottom: 2em;
}

#pairview .card {
    /* .indented */
    margin-left: 5%;
    width: 95%;
}

.card Parol .SL {
    margin: 0;
}

.card .Verse .text {
    margin-bottom: 0;
}

.card .Verse .bibleRef {
    margin: 0;
}

#setXRef {
    /* #fdf1e9 b2_brighter_orange */
    /* #f0ffd8 b2_brighter_green */ 
    background-color: #f0ffd8;
    font-weight: bold;
    color: #3e3e3e;/* b2_darkgreen */
}
p.btnSetXRef {
    margin-left: 5%;
}
.isXRef {
    /* #f0ffd8; bible2 red */
    /* #8ae400 b2_lightgreen */
    /* rgba(240,255,216) = #f0ffd8 b2_brighter_green */
    /* 2019-05-04 HS: same as Logora.css isOwn */
    background-color: rgba(240,255,216, 0.3);
}

.rateEdit {
    /* .indented */
    margin-left: 5%;
    width: 95%;

}
.rateEdit button {
    padding: 1px 6px;
    font-size: .75rem;
}
.rateEdit button.close {
    font-size: 1.5rem; /* keep Bootstrap close button */
}

td.rate span.glyphicon {
    color: #fff;
    padding: 0 0.2rem;
    top: 2px;
}

#Comment {
    font-size: 0.8rem;
    /* .indented */
    margin-left: 5%;
    width: 95%;
}

#rateList table,
#noRatings {
    /* .indented */
    margin-left: 5%;
    width: 95%;
    font-size: 80%;
}

#rateList table {
    /* .indented */
    margin-left: 5%;
    width: 95%;
}

#rateList td.rate {
    width: 2em;
}

td.user,
td.comment code {
    font-size: 100%;
}

#rateList td.updated {
    width: 6em;
    padding-left: 0;
    padding-right: 0;
}