.index {
    margin:150px auto auto auto;
}

.index-author, .index-title {
    margin:0 auto 0 auto;
}

.index-author, .index-title.about {
    margin:10px 0 0 0;
    font-family: 'Didact Gothic', sans-serif;
    font-size:14pt;
    text-align:center;
}

.index-author.about.author .popout {
    font-size:11pt;
    position: relative;
    bottom:8px;
    left:5px
}

.index-author,
.index-title.about a,
.index-author.author a {
    color:#000;
    text-decoration:none;
}

.index-author.about.author {
    font-family: 'Caveat', cursive;
    font-size:28pt;
    text-align:center;
}

.synopsis .frame .word-count {
    font-family: 'Caveat', cursive;
    font-size:14pt;
    margin:10px 0 40px 0;
}

.toc {
    padding:10px 0 0 0;
    margin:20px 0 0 0;
}

.toc .part {
    margin: 3px 0 0 0;
}

.index-title.about.email a:hover,
.index-author.author a:hover {
    color:#666;
}

.about.box .index-title.about.back {
    margin:35px 0 0 0;
}

.index .frame .about.box {
    margin:30px 0 0 0;
}

.back {
   color:#668;
   font-weight:bold;
   margin:0 0 0 5px;
}

.header > .author-name {
   font-family: 'Caveat', cursive;
   color:#668;
   float:right;
   position:relative;
   left:-15px;
}

.header > .author-name a {
    color:#000;
    text-decoration:none;
}

.back:hover {
   color:#000;
   font-weight:bold;
}

.frame {
    width:800px;
    margin:0 auto 0 auto;
}

.author {
    font-family: 'Caveat', cursive;
    font-size:22pt;
    text-align:center;
}

.cold-word:hover,
a.cold-word:hover {
    color:#115599;
    cursor:pointer;
}

.rulers-word:hover,
a.rulers-word:hover {
    color:#994400;
    cursor:pointer;
}

.human-word:hover,
a.human-word:hover {
    color:#227722;
    cursor:pointer;
}

.title > a {
    text-decoration:none;
    color:#000;
}

.book .frame .title {
    margin:80px 0 20px 0;
}

.bookname-place-maker {
    font-family: 'Didact Gothic', sans-serif;
    font-size:13pt;
    position:relative;
    bottom:5px;
    left:5px;
}

.book .frame .divider {
    border-top: 1px solid #000;
    margin:30px auto 0 auto;
    width:200px;
}

.book .frame .divider.top {
    margin:30px auto 30px auto;
}

.book .frame .one-sentence {
    margin:35px auto 0 auto;
    width:350px;
    font-family: 'Caveat', cursive;
    font-size:20pt;
    text-align:center;
    text-style:italic;
}

.book .frame .row {
    text-align:center;
    padding:10px 0 10px 0;
}

.book .frame .row .link {
    font-family: 'Caveat', cursive;
    font-size:19pt;
    text-align:center;
    width:100px;
    display:inline;
    margin:20px 15px 0 0;
    padding:2px 14px 2px 14px;
}


.synopsis .frame .title {
    font-size:17pt;
    margin:80px 0 0 0;
    text-align: left;
}

.synopsis .frame .text {
    width:600px
}

.synopsis .frame .text .header {
    margin:20px 0 0 0;
    font-family: 'Didact Gothic', sans-serif;
    font-size:14pt;
    font-weight:bold;
}

.synopsis .frame .text .para {
    margin:10px 0 0 0px;
    text-indent:8px;
    line-height:22px;
}

.synopsis .frame .text .para > a,
.frame .text .toc a {
    color:#000;
    text-decoration:none;
    border-bottom: 1px dashed #aaa;
}

.frame .text .toc .part .child {
    margin:0 0 0 15px;
}

.frame .text .toc .part .popout {
    font-size:9pt;
}


.frame .text .toc .part .media-name {
    font-style:italic;
}

.synopsis .frame .text .para.last {
    margin:10px 0 100px 0;
}


.book .frame .row .cold.link:hover {
    background-color:#eefcff;
    border-radius:5px;
    animation: fadeColdBackground 5s;
    animation-fill-mode: forwards;
}

.book .frame .row .cold.link:not( :hover ){
    background-color:#fff;
    border-radius:5px;
    animation: fadeColdBack 5s;
    animation-fill-mode: forwards;
}

@keyframes fadeColdBackground {
  from { background-color: #fff; }
  to { background-color: #84caff; }
}

@keyframes fadeColdBack {
  from { background-color:#84caff; }
  to { background-color:  #fff; }
}


.book .frame .row .rulers.link:hover {
    background-color:#fcaa99;
    border-radius:5px;
    animation: fadeRulersBackground 5s;
    animation-fill-mode: forwards;
}

.book .frame .row .rulers.link:not( :hover ){
    background-color:#fff;
    border-radius:5px;
    animation: fadeRulersBack 5s;
    animation-fill-mode: forwards;
}

@keyframes fadeRulersBackground {
  from { background-color: #fff; }
  to { background-color: #ffca84; }
}

@keyframes fadeRulersBack {
  from { background-color:#ffca84; }
  to { background-color:  #fff; }
}


.book .frame .row .human.link:hover {
    background-color:#8fbf8f;
    border-radius:5px;
    border:1px solid #fff;
    animation: fadeHumanBackground 4s;
    animation-fill-mode: forwards;
}

.book .frame .row .human.link:not( :hover ){
    background-color:#fff;
    border-radius:5px;
    border:1px solid #fff;
    animation: fadeHumanBack 4s;
    animation-fill-mode: forwards;
}

@keyframes fadeHumanBackground {
  from { background-color: #fff; }
  to { background-color:#8fbf8f; }
}

@keyframes fadeHumanBack {
  from { background-color:#8fbf8f; }
  to { background-color:  #fff; }
}

.book .frame .row .human.link.not-yet:hover {
    border:1px dashed #225522;
}

.not-yet {
    border:1px dashed #fff;
}


.book .frame .row .link > a {
    text-decoration:none;
    color:#000;
}

.title {
    font-family: 'Didact Gothic', sans-serif;
    font-size:30pt;
    margin:40px 0 0 0;
    text-align:center;
}

.character {
    margin:100px auto auto auto;
}

.book .frame .row .link.character-link {
    font-size:16pt;
}

.billboard img {
    width:100%;
    animation: fadeImage 4s;
}

@keyframes fadeImage {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.caption {
    font-family: 'Caveat', cursive;
    font-size:14pt;
    text-align:center;
    margin:0px 0 100px 0;
    padding:5px 0 5px 0;
    background-color:#22222b;
    color:#fff;
}

.caption.human {
    background-color:#222b22;
}

.caption.cold {
    background-color:#22222b;
}

.caption.rulers {
    background-color:#2e2222;
}

.caption > a {
    text-decoration:none;
    color:#fff
}

.caption.cold > a:hover {
    color:#aaccff;
}

.caption.rulers > a:hover {
    color:#ffccaa;
}

.caption.human > a:hover {
    color:#ccffaa;
}

.header {
    padding: 8px 0 0px 0px;
}

.book .header {
   height: 30px;
}

.header.rulers {
    background-color:#ffca84;
    border-bottom: 1px solid #dba;
}

.header.cold {
    background-color:#84caff;
    border-bottom: 1px solid #abd;
}

.header.human {
    background-color:#8fbf8f;
    border-bottom: 1px solid #9a5;
}

.coming-soon {
    font-style:italic;
    font-family: 'Caveat', cursive;
    font-size:16pt;
    text-align:center;
}

body {
    margin:0;
}