/*****
See https://liao961120.github.io/slides/xaringan/index.html for example slide.
*****/


/* Title Slide */

.title-slide {
  background-position: center; 
  background-size: cover;
}


.title-slide .bg-text{
  position: absolute;
  top: 45%;
  left: 15%;
  text-align: left;
  color: #F7F8FA;
}

.title-slide .remark-slide-number {
  display: none;
}


.remark-slide-number {
  /* bottom: 18px; right: 20px; opacity: 0.5; position: absolute; */ 
  font-size: 90%;
}



/* Background glow color around main slide container */
.remark-slide-scaler {
  -moz-box-shadow: 0 0 0px #000;   /* Firefox */
  -webkit-box-shadow: 0 0 0px #000;   /* chrome  Safari */
}



.footnote {
  position: absolute;
  bottom: 1em;
  padding-right: 4em;
  font-size: 60%;
  font-weight: normal;
}





/* footnote */
a, a > code {
  color: #485fc7;  /* #F2EBE6 */
  text-decoration: no;  /* underline  */
}




/* Code block and syntax highlighting ;  Style (.hljs- XXX) */

.hljs-tomorrow  .hljs { 
   color: black;
   font-size: 18px;
   font-weight: normal; 
   line-height: 130%; 
   background: #f8f8f8;
   /* border: 1px solid #000; */
}


/* Output of Code chunk  */
.remark-code {
  font-size: 60%;
  display: block;
  overflow-x: auto;
  color: #2c8475;
  font-weight: normal;
  margin-top: -1em;
}


/* Color of inline code, i.e. `code` */

.remark-inline-code { 
    color: #dc264f; 
    /* #c7264f #ba2121 #f92672 */
    background: #f9f2f4;
    padding: 0.15em;
    font-weight: 500;
    font-size: 90%;
}


/* Code Chunk Highlight */
.remark-code-line-highlighted { 
   background-color: rgb(206, 233, 255);   /*light blue*/ 
}



/* quote using > */
blockquote {
  border-left: solid 5px #d7d7d7;
  padding-left: 1em;
  color: #819198;
  font-size: 80%;
  text-align: left;
}

.box-quote {
  display: block;
  margin-top: 0.1em;
  margin-bottom: 0.2em;
  margin-left: 10px;
  margin-right: 10px;
  border-left: solid 10px #a1b70d;
  border-top: solid 3px #a1b70d;
  border-bottom: solid 3px #a1b70d;
  border-right: solid 3px #a1b70d;
 /* border-right: solid 2px #0148A4; */
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
  /* background-color: #e64626; */
  color: #e64626;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 0px;
  padding-bottom: 0px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.box-quote > h1:first-of-type {
  margin-top: 10px;
  margin-bottom: 5px;
}
.box-quote > h2:first-of-type {
  margin-top: 10px;
  margin-bottom: 5px;
}
.box-quote > h3:first-of-type {
  margin-top: 10px;
  margin-bottom: 5px;
}




/* rectangle content boxes */

.box { 
    box-sizing: border-box;
    background-color: #e2e2e2;
}

.box-red,
.box-yellow,
.box-blue,
.box-green,
.box-purple,
.box-gray,
.box-grey {
  box-sizing: border-box;
  border-radius: 10px; /* Rounded edges */
  margin: 0 0 10px; /*top, l & r, bottom */
  overflow: hidden;
  padding: 3px 15px 3px 15px;
  width: 100%;
}

.box-red { background-color: #ffcccc; }
.box-yellow { background-color: #fef5c4; }
.box-blue { background-color: #F0F8FF; }
.box-green { background-color: #d9edc2; }
.box-purple { background-color: #e2e2f9; }
.box-gray { background-color: #e2e2e2; }
.box-grey {	background-color: #F5F5F5; }

.box-red .remark-inline-code,
.box-yellow .remark-inline-code,
.box-blue .remark-inline-code,
.box-green .remark-inline-code,
.box-purple .remark-inline-code,
.box-gray .remark-inline-code,
.box-grey .remark-inline-code { 
  background: none;
}




/* Inverse Colors */

.inverse { 
  color: white;
  background-color: #369aa0; 
  text-shadow: 0px 0px 0px #FF0000;
}

.inverse h1, .inverse h2, .inverse h3 {
  color: white;
}

.inverse .remark-slide-number {
  display: none;
}

.inverse .remark-inline-code {
    color: #00b2fa;
    text-shadow: 0px 0px 0px #FF0000;
}



.bg-blue {
  color: white;
  background-color: #0148a4;
  text-shadow: 0px 0px 0px #FF0000;
}

.bg-blue .remark-slide-number {
  display: none;
}

.bg-blue a, a > code {
  color: white;
}





.pull-left {
  float: left;
  width: 48%;
  margin-top: -5px;
  text-align: left;
}

.pull-right {
  float: right;
  width: 48%;
  margin-top: -5px;
  text-align: left;
}



/* table of content */
/* only primary header is colored   */
.toc {
  text-align: center;
}
.toc h1, .toc h2, .toc h3, .toc h4 { color: #a5a5a5; }
.toc h1:last-of-type,
.toc h2:last-of-type { color: #007457; }


/* reference page class */
.refpage  p {
  text-align: left;
}




/* Sidebar Layout: grey out */

.left-column {
  color: #777777;
  width: 20%;
  height: 92%;
  float: left;
}

.right-column {
  width: 75%;
  float: right;
  padding-top: 1em;
}

.left-column h2, .left-column h3, .left-column h4 { color: #a5a5a5; }
.left-column h2:last-of-type,
.left-column h3:last-child,
.left-column h4:last-child { color: #007457; }




/* Two Column Layout*/
.pull-left h2, .pull-left h3, .pull-left h4 { color: #824323; }
.pull-right h2, .pull-right h3, .pull-right h4 { color: #824323; }




/* scroll down to show the whole lot */
/* height, specifies the size of scroll box  */
.scroll-output {
  margin-top: -10px;
  height: 60%;
  overflow-y: scroll;
}



.black { color: black; }
.white { color: white; }
.orange { color: orange; }
.gray { color: gray; }
.grey { color: gray; }

.red { color: red; }
.yellow { color: yellow; }
.blue { color: blue; }
.green { color: #007457; } /* nefu-green */

.sydney-red { color: #e64626; }
.sydney-yellow { color: #FFB800; }
.sydney-blue { color: #0148A4; }





.hr2 {
   width: 80%;
   height: 3px;
   /* margin-top: -30px; */
   margin-left: auto;
   margin-right: auto;
   background-color: #eb811b;
   border: 0 none; 
}


.indent1 { text-indent: 1em; }
.indent2 { text-indent: 2em; }
.indent3 { text-indent: 3em; }
.indent4 { text-indent: 4em; }


.xxl { font-size: 160% }
.xl { font-size: 140% }
.l { font-size: 120% }
.s { font-size: 80% }
.ss { font-size: 60% }



.img90 { width: 90%;}
.img80 { width: 80%;}
.img70 { width: 70%;}
.img60 { width: 60%;}
.img50 { width: 50%;}
.img40 { width: 40%;}
.img30 { width: 30%;}
.img20 { width: 20%;}
.img10 { width: 10%;}