/**
 * styles.css - Styles for public-facing pages
 * 
 * @package   JinaDare
 * @author    David Eastwick
 * @copyright 2008-2020 David Eastwick
 * @license   Proprietary
 */

@font-face {
    font-family: 'garamond';
    src: url(fonts/garamond.otf);
}

@font-face {
    font-family: 'lumos';
    src: url(fonts/lumos.otf);
}

html, body {
    background: center/cover url(img/parchment.jpg);
    min-height: 100vh;
    min-width: 100vw;
    display: table;
    font-size: 10px;
    line-height: 1.5em;
    color: #333;
    margin: 0;
    padding: 0;
}

main {
    display: table-cell;
    vertical-align: middle;
    margin: 3rem;
}

section {
    position: relative;
    margin: auto;
    max-width: 70rem;
}

section header {
    margin-bottom: 3rem;
}

section header h1 {
    font: normal 3rem/1em lumos;
    letter-spacing: normal;
}

section header a, section header a:active, section header a:visited {
    color: #333;
}

section ul a, section ul a:active, section ul a:visited {
    display: inline-block;
    margin: 1rem;
    padding: 1rem 2rem;
    border-radius: 1rem;
    background: #333;
    opacity: 0.7;
    color: #eee;
}

section ul a i {
    color: #eee;
}

section ul a:hover, section ul a:hover i {
    background: #b36c00;
    color: #fff;
}

section footer {
    position: relative;
    bottom: 0;
}

section footer nav {
    text-align: center;
}

section footer nav a {
    padding: 0 1rem;
}

footer {
    position: fixed;
    left: 0;
    bottom: 1rem;
    font: 1.5rem/1.5em garamond;
    width: 100%;
    text-align: center;
    color: #333;
}

h1 {
    margin: 0;
    text-align: center;
    font: 5rem/1.5em lumos;
    letter-spacing: 3px;
}

h1 img {
    display: block;
    width: 400px;
    height: 150px;
    margin: auto;
}

h1 small {
    display: block;
    font: normal 3rem/1em lumos;
}

h2 {
    font: normal 2rem/1.5em garamond;
    text-align: center;
    margin: 2em 1em;
}

hr {
    width: 150px;
    height: 44px;
    background: url(img/flourish.png);
    border: none;
}

p, li {
    text-align: center;
    font: 2.2rem/1.5em garamond;
}

ul {
    margin: 0;
    padding-inline-start: 0;
}

li {
    text-align: center;
    list-style-type: none;
    margin: 1rem 0;
    padding: 0;
}

li i {
    margin-right: 1rem;
}

a, a:active, a:visited {
    color: #b36c00;
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    color: #b36c00;
    text-decoration: none;
}

dialog h1 {
    font: 36px/1em lumos;
    letter-spacing: normal;
    margin-top: 2rem;
    text-align: center;
}

dialog h1 i {
    padding-right: 3px;
}

dialog h1 span {
    padding-left: 3px;
    color: #A1A1A1;
}

dialog ol {
    margin: 0;
    padding: 2rem 0;
}

dialog li {
    text-align: center;
    list-style-type: none;
    font: 1.5rem lumos;
}

dialog li div, dialog li a {
    display: block;
    font: 2rem/1.7em garamond;
}

#audiobook {
    text-align: center;
    margin-bottom: 4em;
}

#audiobook header {
    font: 2rem/1em lumos;
    margin: 3rem 0 1rem;
}

#audiobook header h1 {
    font: 4rem/1.3em lumos;
    margin-top: 1rem;
}

#audiobook audio {
    width: 100%;
    margin: 3rem 0;
    border: 1px solid #333;
    border-radius: 3rem;
}

#audiobook audio::-webkit-media-controls-panel {
    background: center/200% url(img/parchment.jpg);
}

#audiobook nav {
    margin-bottom: 3rem;
}

#audiobook nav a,
#audiobook nav b {
    display: inline-block;
    font-size: 3rem;
    padding: 2rem;
    cursor: pointer;
}

#audiobook a i, #audiobook b i {
    color: #333;
}

#audiobook b.disabled i {
    color: #ccc;
    cursor: auto;
}

#audiobook #pause {
    display: none;
}

.justify {
    text-align: justify;
}

.dropcap {
    font: 10rem/1em lumos;
    float: left;
    margin: -1rem 0;
}

.indent {
    text-indent: 4rem;
}

.small {
    font-size: 1.7rem;
}

.important {
    color: #C00;
    font-style: italic;
}

.ebook {
    text-align: left;
    padding-left: 3rem;
    line-height: 0.3em;
    margin: 1em;
}

.ebook img {
    float: left;
}

.ebook span {
    position: relative;
    top: 10rem !important;
    left: 2rem;
}

.web, .mobi, .epub, .pdf, .zip {
    color: #b36c00;
    text-decoration: none;
    cursor: pointer;
}

.web:hover, .mobi:hover, .epub:hover, .pdf:hover, .zip:hover {
    color: #b36c00;
    text-decoration: none;
}

@media screen and (max-width: 70rem) {

    main {
        display: table-cell;
        vertical-align: middle;
        padding: 1rem 2rem 3rem;
        font-size: 2rem;
    }

    section {
        margin: 0;
        max-width: inherit;
    }

    section header h1 {
        font-size: 1.5rem;
    }

    section footer nav {
        margin: 1em 0 5px;
    }

    section footer nav a {
        padding: 0;
    }

    section footer nav img {
        width: 8rem;
        height: auto;
        padding: 0 1rem;
    }

    footer {
        position: relative;
        margin-top: 2em;
        font-size: 1rem;
    }

    dialog {
        padding: 10px 15px;
    }

    h1 {
        font: 3rem/1em lumos;
        margin-top: 2rem;
    }

    h1 small {
        font: 2rem/1em lumos;
    }

    h1 img {
        width: 275px;
        height: auto;
    }

    h2 {
        font: normal 2rem/1.5em garamond;
        text-align: center;
        margin: 2em 0;
    }

    hr {
        width: 100px;
        height: 29px;
        background: url(img/flourish-small.png);
    }

    p, li {
        font: 1.7rem/1.3em garamond;
    }

    ul {
        margin: 1em 0;
    }

    #signature {
        width: 12rem;
    }

    #audiobook header h1 {
        margin-top: 24px;
        font: 3rem/1em lumos;
    }

    #audiobook audio {
        width: 100%;
    }

    #audiobook nav a,
    #audiobook nav b {
        font-size: 2rem;
        padding: 2rem;
    }

    #audiobook nav span {
        display: block;
        margin-top: 1rem;
    }

    .indent {
        text-indent: 2rem;
    }

    .dropcap {
        font: 7rem/1em lumos;
        margin-top: 0;
    }

    .small {
        font-size: 1rem;
    }

    .ebook {
        text-align: left;
        clear: both;
        font-size: 0.8em;
    }

}