@import url("https://fonts.googleapis.com/css?family=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: 250%;
  font-family: 'Fira Sans', Karla, 'Roboto Condensed', 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: #fafafa;
}

.section {
  background-color: #fafafa;
}



.book .book-body .page-wrapper .page-inner section.normal {
    display: block;
    background-color: #fafafa;
    color: #585858;
    padding: 5px 15px;
    font-family: 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: #fafafa;
    -webkit-transition: left 250ms ease;
    -moz-transition: left 250ms ease;
    -o-transition: left 250ms ease;
    transition: left 250ms ease;
}

/* link effects */
.book .book-body .page-wrapper .page-inner section.normal a {
    color: #3D68FF;
    background-image: linear-gradient(180deg,transparent 90%, #FFD43D 0);
    background-size: 0 100%;
    background-repeat: no-repeat;
    text-decoration: none;
    -webkit-transition: background-size .4s ease;
    -moz-transition: background-size .4s ease;
    -ms-transition: background-size .4s ease;
    -o-transition: background-size .4s ease;
    transition: background-size .4s ease;
    border-bottom: 0px solid;
}

.book .book-body .page-wrapper .page-inner section.normal a:hover {
  text-decoration: none;
    background-size: 100% 100%;
    cursor: pointer;
}

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

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

.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: #fafafa;
    /* background: 0 0; */
}

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

/* Rather than resize the header, just get rid of line */
.book.with-summary .book-header.fixed {
  background-color: #fafafa;
  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: #fafafa;
}

/* 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: #fafafa;  /*#6197D5*/
  background-color: #3C303E;
}

/* 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: #3C303E;
  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: #fafafa;  /*#6197D5*/
  background-color: #3C303E;
  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;
}


.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:#3C303E;
  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;
}

.arc {
  display: block;
  width:30%; 
  padding:5px 0; 
  margin: 0 0 10px 0;
}

.cscar {
  display: block;
  width:21%; 
  padding:5px 0; 
  margin: 0 0 10px 0;
}

/* 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: #3C303E;
  background-color: transparent;
}

/* text highlights */
.emph {
  color: #E32D00 ;  /*#ff5500 #D14300*/
  font-weight: 500;
}

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

.func {
  color: #007020;   /*#007199 #00CBB6; #984ea3; can just use `` instead*/
  font-weight: bold;
}

.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; 
}