book.css

@import url("https://fonts.googleapis.com/css?family=Bitter|Alex+Brush|Roboto|Roboto+Mono|Roboto+Condensed|Open+Sans|Lato|Lora|Fira+Sans|Yellotail");

/* title page */
.book .book-body .page-wrapper .page-inner section.normal h1.title {
  font-size: 500%;
  font-family: 'Alex Brush', Karla, 'Roboto Condensed', 'Fira Sans', Lora, Lato, Roboto, sans;
  font-style: normal;
  font-weight: 100;
}

.book .book-body .page-wrapper .page-inner section.normal .author .noem {
  display: block;
  margin: 0 0 10px 0;
  font-size:  125%;
  font-style:  normal;
  font-variant:  small-caps;
  font-weight: 200;
  font-family: 'Roboto Condensed', 'Fira Sans', Roboto, 'Open Sans', sans;
}


.book .book-body .page-wrapper .page-inner section.normal a.uri {
  display: block;
  margin: 0 0 10px 0;
  font-size:  75%;
  font-style:  normal;       /* ignored thanks to bootstrap random enforcement of em*/
  font-variant:  small-caps;
  font-family:  Roboto, 'Open Sans', sans;
}

.book .book-body .page-wrapper .page-inner section.normal h4.date {
  font-style: normal;
  font-size:  100%;
  font-family: 'Open Sans', sans;
}

/* main */

.book  {
  background-color: #fffff8;
}

.section {
  background-color: #fffff8;
}



.book .book-body .page-wrapper .page-inner section.normal {
    display: block;
    background-color: #fffff8;
    color: #585858;
    padding: 5px 15px;
    font-family: Bitter, Roboto, 'Helvetica Neue', sans-serif;
    word-wrap: break-word;
    overflow: hidden;
    line-height: 1.7;
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
}

.book .book-body {
    background: #fffff8;
    -webkit-transition: left 250ms ease;
    -moz-transition: left 250ms ease;
    -o-transition: left 250ms ease;
    transition: left 250ms ease;
}

/* link effects */
/*
https://stackoverflow.com/questions/28623446/hover-effect-expand-bottom-border
uri class is for urls
*/

.book .book-body .page-wrapper .page-inner section.normal a:active,
.book .book-body .page-wrapper .page-inner section.normal a:focus,
.book .book-body .page-wrapper .page-inner section.normal a:hover {
    outline: 0;
    text-decoration: none;
}

.book .book-body .page-wrapper .page-inner section.normal a,
.book .book-body .page-wrapper .page-inner section.normal a.uri {
    display: inline-block;
    color: #1f65b7;
    text-decoration: none;
}

.book .book-body .page-wrapper .page-inner section.normal a::after,
.book .book-body .page-wrapper .page-inner section.normal a.uri::after {
    content: '';
    display: block;
    width: 0;
    height: 1.75px;
    background: #990024;
    transition: width .3s;
}

.book .book-body .page-wrapper .page-inner section.normal a:hover::after,
.book .book-body .page-wrapper .page-inner section.normal a.uri:hover::after{
    width: 100%;
    //transition: width .3s;
}





.body-inner {
    background-color: #fffff8;
}

.book .book-body .page-wrapper {
    position: relative;
    outline: 0;
    background-color: #fffff8;
}

.book .book-body .page-wrapper .page-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0 40px;
}

.book .book-header {
    overflow: visible;
    height: 48px;    /* adjust to match title space*/
    padding: 0 8px;
    z-index: 2;
    font-family: Roboto sans-serif;
    font-size: .85em;
    color: #7e888b;
    background-color: #fffff8;
    /* background: 0 0; */
}

/* only way to set bgcolor of top bar?*/
.book-body.fixed {
  background-color: #fffff8;
}

/* Rather than resize the header, just get rid of line */
.book.with-summary .book-header.fixed {
  background-color: #fffff8;
  font-variant: small-caps;
  /*font-family: Stalemate Roboto Sans; ignored as all it is doing is taking from index title*/
  border-bottom: 0 solid rgba(0,0,0,.07);  /*just remove it; this makes height in .book-header above moot*/
  border-bottom-width: 0;
  border-bottom-style: solid;
  border-bottom-color: rgba(0, 0, 0, 0.07);
}

i {
  background-color: #fffff8;
}

/* toc area general */
.book .book-summary {
    position: absolute;
    font-family: "Open Sans", 'Helvetica Neue', Roboto, sans-serif;
    top: 0;
    left: -300px;
    bottom: 0;
    z-index: 1;
    width: 300px;
    color: #364149;  /**/
    background: #f5f5f540; /* #eaf5fb;  #d9edf7#bdcadb #3572D9 #fafafa*/
    border-right: 1px solid rgba(0,0,0,.07);
    -webkit-transition: left 250ms ease;
    -moz-transition: left 250ms ease;
    -o-transition: left 250ms ease;
    transition: left 250ms ease;
}

/* nav/menu area */
.book .book-summary ul.summary li a, .book .book-summary ul.summary li span {
    display: block;
    padding: 10px 25px;
    border-bottom: none;
    color: #364149; /**/
    background: 0 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    font-family: Lato,'Roboto Condensed', sans;
    /* font-variant: small-caps; */
}


.book .book-summary ul.summary li a:hover, .book .book-summary ul.summary li.active>a {
  color: #fffff8;  /*#6197D5*/
  background-color: #990024;
}

/* so that before and after aren't treated the same as the toc, because why would they? */
.book .book-summary ul.summary li.before a {
  color: #990024;
  text-decoration: none;
  font-size: 125%;
  font-variant: small-caps;
  font-family: 'Roboto Condensed', 'Helvetica Neue', 'Open Sans', Roboto, sans-serif;
  font-weight: 500;
}


.book .book-summary ul.summary li.before a:hover,
.book .book-summary ul.summary li.before li.active>a {
  color: #fffff8;  /*#6197D5*/
  background-color: #990024;
  text-decoration: none;
}

.book .book-summary ul.summary li.after a, .book .book-summary ul.summary li.after a:hover {
  background-color: transparent;
}

/* divider line for the title before and other stuff  after toc */
.book .book-summary ul.summary li.divider{
    height:1px;
    margin:7px 0;
    overflow:hidden;
    background:rgba(0,0,0,.07)
}

.book .book-body .page-wrapper .page-inner section.normal pre {
    overflow: auto;
    word-wrap: normal;
    margin: 0 0 1.275em;
    padding: .85em 1em;
    background: #fafafa;
    border-radius: 10px;
}



.book .book-body .page-wrapper .page-inner section.normal code,
.book .book-body .page-wrapper .page-inner section.normal pre {
    font-family: 'Roboto Mono', Monaco, Consolas, "Liberation Mono", Menlo, 'Courier New', monospace;
    direction: ltr;
    border: none;
    color: inherit;
}

.book .book-body .page-wrapper .page-inner section.normal .note {
  background-color: #fafafa;
  /*background-image: url('../img/R.ico');*/
  font-size: 80% ;
  margin: auto;
  font-weight: 500;
  max-width: 75%;
  border-width: 10px;
  border-color: #bfbfbf;
  box-shadow: 10px 10px 5px #EBEBEB; /*#888888*/
  padding: 1em;
}

/* headers */

h1, h2, h3, h4, h5 {
  color:#990024;
  font-family: 'Roboto Condensed';
}

/* notes */

.img-note {
  vertical-align: central;
  width: 2em;
}

.footnotes {
  color: #00000080;
}


/* code */

/* logical NA */
.ot {
 color: #337ab7;
}

/* char/string */
.ch, .st {
 color: #aa5500;
}

/* args */
.dt {

}

/* package */
code span.st {
 color: #aa5500;
}

/* float, other */
.fl, .dv {
 color: #23527c;
}

/* override pygments setting code to a tag */
.book .book-body .page-wrapper .page-inner section.normal pre code a {
  color: #585858;
}

/* img */

img {
  display: block;
  margin: 0 auto;
  background: transparent;
}

/* zoom for img*/
.zoom {
    transition: all .3s;
}

.zoom:hover {
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}


/* creative commons, github icons */
.fab .fa-creative-commons, .fa-creative-commons-sa, .fa-creative-commons-by, .fa-github, .fa-lg {
  color: #990024;
  background-color: transparent;
}

/* text highlights */
.book .book-body .page-wrapper .page-inner section.normal em, .emph {
  color: #990024BF;  /*#E32D00 #ff5500 #D14300*/
  font-weight: 500;
  font-style: normal;
}

/* pack func and objclass colors initially come from hcl(seq(90,360, length.out=4), c=80, l=80); redone for contrast*/
.pack {
  /* color: #1f65b7; #990071 #AC9CFF #e41a1c*/
  font-weight: 500;
}

.pack::before {
  content: "{"
}

.pack::after {
  content: "}"
}

.func {
  font-family: 'Roboto Mono', Monaco, Consolas, "Liberation Mono", Menlo, 'Courier New', monospace;
  color: #007020;   /*#007199 #00CBB6; #984ea3; can just use `` instead*/
  font-weight: 500;
}

.objclass {
  color:  #947100;  /*#AAB400 #4daf4a; #FFC5D0*/
  font-weight: 500;
}

/* miscellaneous */

.col2 {
  columns: 2 200px;         /* number of columns and width in pixels*/
  -webkit-columns: 2 200px; /* chrome, safari */
  -moz-columns: 2 200px;    /* firefox */
}
.col3 {
  columns: 3 100px;
  -webkit-columns: 3 100px;
  -moz-columns: 3 100px;
}

.plotly {
  margin-left: 5%;
  margin-right: 5%;
}

/*.plotly html-widget {
  width: 100%;
}*/

.d3heatmap {
  margin-left: 5%;
  margin-right: 5%;
  width: 75%;
}


/* tables */

table {
  margin: auto;
}

.book .book-body .page-wrapper .page-inner section.normal table tr:nth-child(2n) {
    background-color: white;
}

div.datatables {
    margin-left: auto;     /* to center them when full is not necessary. */
    margin-right: auto;
}

.book .book-body .page-wrapper .page-inner section.normal .outro {
  text-align: center;
  line-height: 500px; /* <-- this is what you must define */
  vertical-align: bottom;
  font-size: 150%;
  color: hotpink;
  font-family: yellowtail;
  height: 300px;
  background-image: url('../img/mc_sunset_2.png');
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
}

/* formulas*/
.MJXc-display {
  padding: 10px 0px 10px 0px !important;
}

/* References */
div.csl-entry {
  padding: 5px;
}