body {
  font-family: DejaVu Sans, Arial, sans-serif;
  font-size: 11pt;
}
#logo {
  width: 64px;
  height: 64px;
}
@media (max-width: 799px) { #logo {
  width: 32px;
  height: 32px;
}}
#header > * {
  vertical-align: middle;
}

/* switch pages
 * turn off sections not needed
 * HOWEVER Doesn't work in Android stock browser, so do this in
 * app.js pageChange()

#loading-page,
#main-page,
#app-title,
#main-sub-page,
#detail-page,
#breadcrums {
  display: none;
}
body[page=loading] > #loading-page {
  display: block;
}
body[page=loading] #header-box {
  display: none;
}
body[page=main] > #main-page {
  display: block;
}
body[page=main] #app-title,
body[page=main-sub-page] #app-title {
  display: inline;
}
body[page=main] #search-header {
  display: none;
}
body[page=detail] > #detail-page {
  display: block;
}
body[page=detail] #breadcrums,
body[page=detail] #search-header {
  display: inline;
}
body[page=main-sub-page] > #main-sub-page {
  display: block;
}
*/


/* main page */

#main-page {
  padding-top: 2em;
}
#app-title {
  font-size: 26pt;
  margin: 0.5em;
}
@media (max-width: 799px) { #app-title {
  font-size: 14pt;
  overflow: hidden;
}}


/* search */

#search {
  border-radius: 20px;
  text-shadow: rgba(0,0,0,0.2) 0 0 5px;
  margin: 1em 1em 3em 1em;
}
#search-mainpage {
  height: 1.4em;
  line-height: 1.4em;
  padding: 2px 4px;
  margin: 0;
}
#search-button {
  height: 100%;
  margin: 0;
}
#search-error {
  color: red;
  margin: 0.5em 0em;
}
#header-box {
  float: right;
  margin: 1em 1em 3em 1em;
  vertical-align: middle;
}
#search-header {
  width: 8em;
  padding: 1px 2px;
  height: 1.2em;
  line-height: 1.2em;
  vertical-align: middle;
}
body:not([page=detail]) #search-header {
  display: none;
}
@media (max-width: 799px) { #search-header {
  display: none;
}}
#search-header[error] {
  background-color: #FF9090;
}

#bible-quick-lookup {
}
#bible-quick-lookup > img {
  width: 32px;
  height: 32px;
  vertical-align: middle;
}

#lang-box > .language {
  margin: 2px;
  padding: 1px;
  border: solid 1px darkgrey;

  cursor: default;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
}

/* header list */

#headerList {
  margin: 1em;
}

@media (min-width: 800px) {
  #headerList {
    float: right;
  }
  #headerList + * + * {
    clear: right;
  }
}


#headerList > .border {
  border-radius: 5px;
  border: 2px solid #cccccc;
  max-height: 10em;
  max-width: 15em;
  overflow: auto;
}

#headerList .headerTitle {
  float: right;
  font-weight: bold;
  margin: 0em 1em;
}
#headerList .closeButton {
  width: 20px;
  height: 20px;
  border: 1px outset ButtonShadow;
  float: right;
  position: static;
  top: 0px;
  right: 0px;
  margin: 3px;
}
#headerList .headerlistbox {
  /* space for button */
  padding-right: 30px;
}
#headerList table.list {
border: none;
}


/* person */

div.person .genealogy {
  float: right;
}
div.person .genealogy + * + * {
  clear: right;
}
@media (max-width: 799px) { div.person .genealogy {
  float: none;
}}


.source-list td {
  max-width: 25em;
}

/* bible lookup */

.bible-books > .row > .book,
.bible-chapters > .row > .chapterNum {
  display: inline-block;
  height: 1.5em;
  white-space: nowrap;
  overflow: hidden;

  border: 1px solid #dcdcdc;
  box-shadow: inset 0px 1px 0px 0px #ffffff;
  cursor: pointer;
  margin: 0.2em 0.2em;
  padding: 0.2em 0.3em;
}
.bible-books > .row > .book {
  width: 3.5em;
}
.bible-chapters > .row > .chapterNum {
  width: 2em;
  text-align: center;
  background-color: #ededed;
}
.bible-chapters > .row > .chapterNum:first-child {
  border-color: darkgrey;
}

.book[group=mose] {
  background-color: #6aff63;
}
.book[group=history] {
  background-color: #acffea;
}
.book[group=wisdom] {
  background-color: yellow;
}
.book[group=gproph] {
  background-color: #82abff;
}
.book[group=sproph] {
  background-color: #a8eaff;
}
.book[group=evang] {
  background-color: #46ff28;
}
.book[group=paul] {
  background-color: #fff4b4;
}
.book[group=letter] {
  background-color: #b4ceff;
}
.book[group=special] {
  background-color: #00ffea;
}
/*#6aff63  #b7ff46 #82e0ff*/

/* bible reader */

#bible-nav-buttons {
  position: absolute;
  top: 3.5em;
  right: 4em;
  height: 0em;
}
@media (max-width: 799px) { #bible-nav-buttons {
  right: 1em;
}}

span.verse-marker {
  font-size: 8pt;
  vertical-align: top;
  color: #7777FF;
  cursor: pointer;

  padding: 0em 0em 0.4em 0em; /* enlarge touch target on mobile */
}

.verse[highlight=true] {
  color: darkred;
}

#detail.bible > div.objects > table {
  display: inline-table;
  margin: 0.5em;
}
#detail.bible > div.objects > div {
  display: inline-block;
  margin: 0.5em;
}

a.verse .sidebar {
  margin-left: 5em;
}
.sidebar .button {
  display: block;
  margin: 1em;
}

.crossrefs > .section-title {
  margin-top: 0.3em;
}

.bible-ref {
  margin: 0.5em 0em;
}
.bible-ref > .name {
  font-weight: bold;
  margin-right: 0.5em;
}

.footnotes > .section-title {
  margin-top: 0.3em;
}

.bible-footnote {
  margin: 0.5em 0em;
}
.bible-footnote > .quote {
  display: block;
  font-weight: 7pt;
  color: darkgrey;
  margin-right: 0.8em;
  vertical-align: top;
}
.bible-footnote > .footnote {
  display: block;
}

.bible-source {
  margin-top: 2em;
}

.bible-source > .ref,
.bible-source > .title {
  margin-top: 1em;
  margin-left: 1em;
}
.bible-source > .title {
  font-weight: bold;
}


/* notes */

textarea.notes {
  width: 100%;
  height: 50em;
}
div.notes div.bibletext {
  min-height: 5em;
}
div.notes div.bibletext span.name {
  margin-right: 1em;
  font-weight: bold;
}
div.notes div.bibletext .add-quote {
  float: right;
}


/* list all */

div.count {
  margin : 1em;
  font-size : smaller;
  color: grey;
}
