/* Main page */

body,form,table { font-family: Source Serif Pro; font-size: 12pt; }
body { padding-left: 30px; padding-right: 30px; }
@media not print {
    body { background-image: url(../img/bg.jpg); }
}

#wrapper { background-color: #FFF; width: 950px; margin: 10px auto; padding: 10px; }

#header { width: 950px; margin-left: auto; margin-right: auto; }
#slogan { font-style: italic; font-size: 20pt; font-weight: 400; margin-bottom: 10px; }
#headerline { min-height: 4px; background-color: #C30; width: 950px; margin-left: auto; margin-right: auto; }
.hdrsep { padding-left: 5px; padding-right: 5px; }
.hdritem { cursor: pointer; font-weight: 500; font-size: 14pt; }
.nr { font-weight: 600; }

#footerline { min-height: 4px; background-color: #C30; width: 950px; margin-left: auto; margin-right: auto; margin-top: 50px; }
#copyright { font-size: 10pt; text-align: center; width: 950px; margin-left: auto; margin-right: auto; display: inline-block; }

div.panel { margin: 10px; display: none; width: 900px; margin-left: auto; margin-right: auto; }
.hglow { box-shadow: 0px 0px 0px 0px white; transition: box-shadow 1s; }
.hglow:hover { box-shadow: 0px 0px 5px 5px #FD0; }
p.formItem { font-size: 18pt; font-weight: 600; }
div.readingbox {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

div.sublinks { width: 950px; text-align: center; font-size: 13pt; margin-top: 4px; }
a.sublink { text-decoration: none; color: #C30; }



/* Intepretation pages */

span.prevlink { color: blue; cursor: pointer; }
span.nextlink { color: blue; cursor: pointer; }

.dcCard     { z-index: 100; position: absolute; }
.dcTop      { z-index: 100; position: absolute; text-align: center; width: 100px; max-width: 100px; }
.dcBottom   { z-index: 100; position: absolute; text-align: center; width: 100px; max-width: 100px; }
.dcLeft     { z-index: 100; position: absolute; text-align: right; width: 100px; max-width: 100px; }
.dcRight    { z-index: 100; position: absolute; text-align: left; width: 100px; max-width: 100px; }
.dcPosition { font-style: italic; opacity: 0.6; }
.dcTitle    { font-style: normal; }
.dcSelected { font-weight: 600; color: #C30; }
.dcRadiant  { z-index: 99; }

#headline { text-align: center; margin-top: 1em; }
h2.rubric { text-align: justify; }

div.staticSpread {
/*    background-color: #80D5F1; */
    background-image: url(../img/mat.jpg);
    border: 1px solid #70B5D1;
    position: relative;
    overflow: hidden;
}
div.summary { font-size: 14pt; }
p.summary { text-align: justify; }
p.full { text-align: justify; }
#largeCard { position: relative; top: -10px; left: 10px; }
div.slink {
    display: table-cell;
    position: absolute;
    min-width: 50px;
    top: 0px;
    background-color: #000;
    color: #FFF;
    height: 100%;
    opacity: 5%;
    transition: opacity 0.25s;
    text-align: center;
    cursor: pointer;
}
div.slink:hover { opacity: 30%; }
img.ssarrow { position: absolute; }
#prevlink { left: 0px;  }
#nextlink { right: 0px; }
#bottomnav { margin-top: 2em; }
.bottomarrow {
    color: #FFF;
    background-color: #000;
    padding: 2px 8px;
    position: relative;
    bottom: 8px;
    transition: background-color 0.25s;
    cursor: pointer;
    text-align: center;
    width: 125px;
}
.bottomarrow:hover { background-color: #C30; }
#bottomprev { float: left;  }
#bottomnext { float: right; }
.toparrow {
    color: #FFF;
    background-color: #000;
    padding: 2px 8px;
    position: relative;
    transition: background-color 0.25s;
    cursor: pointer;
    text-align: center;
    width: 125px;
}
.toparrow:hover { background-color: #C30; }
#topprev { float: left;  }
#topnext { float: right; }
#topnav { margin: 4px 0px 40px 0px; }


/* Print-Friendly Page */

#pfcontainer p { text-align: justify; }
#pfcontainer p.summary { font-size: 13pt; }
#pfcontainer h1 { margin-top: 48pt; }
#pfcontainer img.largeCard { width: 200px; }
div.pflink { font-style: italic; font-size: 20pt; font-weight: 400; position: relative; bottom: 10px; }

/* DynamicSpread */

.floater {
    z-index: 500;
    position: absolute;
    display: inline-block;
    padding: 10pt;
    background-color: #555;
    color: white;
    border: 2px solid white;
    opacity: 0%;
    transition: opacity 1s;
    user-select: none;
    cursor: pointer;
}

.slimfloater {
    z-index: 500;
    position: absolute;
    display: inline-block;
    padding: 4pt 10pt;
    background-color: #555;
    color: white;
    border: 2px solid white;
    opacity: 0%;
    transition: opacity 1s;
    user-select: none;
 }

.bigredbtn {
    cursor: pointer;
    color: white;
    background-color: #C30;
    padding: 10px 20px;
    border-radius: 10px;
    opacity: 0%;
    position: absolute;
    display: inline-block;
    transition: opacity 1s, box-shadow 0.5s;
    font-size: 18pt;
}

/* Tour */

div.sectionTitle { text-align: center; font-size: 16pt; font-style: italic; font-weight: 600; margin-top: 1em; }
div.articleTitle { text-align: center; font-size: 20pt; font-weight: 700; margin-top: 0.5em; }
div.tcbody { text-align: justify; }
img.tourside { float: right; }
table.tcset { margin-left: auto; margin-right: auto; background-image: url(../img/mat.jpg); padding: 10px; }
table.tcset td { padding: 15px; }
table.tcmajor { border-spacing: 20px; margin-left: 40px; margin-right: 40px; }
.tcarrow {
    color: #FFF;
    background-color: #000;
    padding: 2px 8px;
    position: relative;
    bottom: 8px;
    transition: background-color 0.25s;
    cursor: pointer;
    text-align: center;
    width: 125px;
    display: inline-block;
}
.tcarrow:hover { background-color: #C30; }