/* general */

body, html {
    background: white;
    height: 100%;
    margin: 0;
    overflow: hidden;
    position: relative;
}

#spinner {
    color: #F97C17;
    display: table;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
}

button::-moz-focus-inner {
    border: none;
}

/* app */

brick-appbar {
    background: #F97C17;
    border-bottom: 1px solid #EEE;
    position: relative;
}

brick-appbar h1, brick-appbar button {
    color: #FFFFFF;
}

#sub-header {
    background: #F4F4F4;
    box-shadow: 0 0 1px #EEE;
    color: #A1A1A1;
    padding: 0.5rem 2rem;
    position: relative;
    z-index: 10;
}

brick-deck > brick-card {
    background: white;
}

/* toolbar */

#toolbar {
    padding: 0;
}

#toolbar button {
    background: transparent;
    border: none;
    padding: 0.8rem 0;
}

#toolbar button:disabled {
    color: #DDD;
}

#toolbar button:active:enabled {
    color: #FF9500;
}

/* main */

#main {
    overflow: hidden;
    height: 100%;
}

#main #reader {
    height: 100%;
    overflow: auto;
    z-index: 10; /* needed for weird scrollbar not woriking issue */
}

ul#reader-verses {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul#reader-verses li {
    border-bottom: 1px solid #EEE;
    margin: 0 1rem;
    padding: 7px 0;
}

ul#reader-verses li span.verse-number {
    color: #AAA;
    font-size: 80%;
    margin: 10px;
}

ul#reader-verses li[data-selected="true"]:not(.copyright) span.verse-text {
    background: #222;
    color: #FFF;
}

ul#reader-verses li.copyright {
    border: none;
    text-align: center;
}

ul#reader-verses li.copyright a {
    color: #222;
    font-size: 75%;
    text-decoration: none;
}

/* text selector */

#text-selector {
    background: white;
    transform-style: flat;
    width: 100%;
    z-index: 1;
}

#text-selector brick-tabbar {
    border-top: 1px solid #EEE;
}

#text-selector .selected-indicator {
    background: #F97C17;
}

#text-selector brick-tabbar-tab button {
    background: transparent;
    border: none;
    display: block;
    font-size: 100%;
    height: 100%;
    width: 100%;
}

#text-selector brick-deck {
    overflow: hidden;
}

#text-selector brick-card {
    background: white;
    overflow-y: auto;
}

#text-selector brick-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: auto;
    height: auto;
}

#text-selector brick-card#books-list ul li a {
    border-bottom: 1px solid #EEE;
    cursor: pointer;
    display: block;
    margin: 0 10px;
    padding: 10px 5px;
}

#text-selector brick-card#books-list ul li:last-child a {
    border-bottom: none;
}

#text-selector brick-card#chapters-list ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

#text-selector brick-card#chapters-list ul > li {
    flex-grow: 1;
    margin: 1.5rem;
    width: 1.5rem;
}

#text-selector brick-card#chapters-list ul > li a {
    display: block;
    line-height: 1.5rem;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

#text-selector brick-card ul > li a.selected,
#text-selector brick-card ul > li a:active {
    background-color: #b2f2ff;
}
