n
---
# This is the custom style sheet for remark
---
$fa-font-path: "../fonts/font-awesome/";
@import 'fontawesome.min.css';
@import "remark-base";
$body-font: 22pt;
$list-font: 20pt;
$code-font: 18pt;
$mediumsmall-font: 16pt;
$title-font: 28pt;
$footnote-font: 12pt;
$blue: #0066ff;
$lightblue: #39d;
$lightgreen: #2c7;
$turqouise: #1b9;
$purple: #95b;
$violet: #ffe6ff;
$red: #e83a83;
$orange: #e82;
$yellow: #ec0;
$lightest: #ffffff;
$light: #F1f1f1;
$background: #E2e2e2;
$medium: #999;
$mediumdark: #555;
$dark: #333;
$darkest: #222222;
$highlight:  #5c8a8a;

strong {
    color: $highlight;
}

.comment{
    visibity: hidden;
}

.slidein {
    animation: 3s ease-in 1s 2 reverse both paused slidein;
}

.object_fit {
    object-fit: contain;
}

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

.caption-frame {
    position: top;
    float:top;
    width: 100%;
    height: 200px;
}

.remark-slide-scaler {
    top:0 !important;
    height:inherit;
}

 
.remark-slide .remark-slide-content remark-container {
    height:inherit !important;
}


pre {
  margin: .5em 0;
}

ul {
    font-size: $list-font;
}
																					   
.remark-code {
    font-family: 'Ubuntu Mono';
    font-size: $code-font;
    transform: scale(1.0);
}

.remark-inline-code{
  /* background: #F5F5F5; /* lighter */
  font-family: 'Ubuntu Mono';
  font-size: $code-font;
  background: #e7e8e2; /* darker */
  border-radius: 3px;
  padding: 4px;
}


.jax{
    font: inherit; font-size: 100%; background: inherit; border: inherit;
}


/******************************
/** Tables
******************************/

table {
  border: 2px solid $lightest;
  text-align: left;
  table-layout:fixed;
  border-collapse: collapse;
}

table td, table th {
  padding: 3px 4px;
}
table tbody td {
  font-size: 0.7em;
}
// table tr:nth-child(even) {
//   background: $light;
// }
table thead {
    background: $dark;
    color: $light;
    border-bottom: 4px solid $dark;
    border-left: none;
    border-right: none;
}

table thead th {
  font-size: 0.7em;
  font-weight: bold;
  color: $light;
  border-left: 2px solid $dark;
}
table thead th:first-child {
  border-left: none;
}

table tfoot {
  font-weight: bold;
  color: $light;
  border-top: 4px solid $dark;
}

table tfoot td {
  font-size:0.7em;
}

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

.quote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}

.inverse {
  background:  $dark;
  color:  $medium;
  text-shadow: 0 0 20px $dark;
  h1, h2 {
      color: $light;
  }
  .p {
      font-size: 1.5em;
  }
  .footnote {
      font-size: $footnote-font;
      background-color: $lightest;
      bottom: 12px;
      left: 20px;
      z-index: 2;
  }
  .footnotelarge {
      font-size: $list-font;
      background-color: $lightest;
      bottom: 12px;
      left: 20px;
      z-index: 2;
  }

}


.title {
  color: $dark;
  float: left;
  font-size: $title-font;
  padding-left: 1em;
}

.remark-slide-content {
    background-position: right;
    font-size: $body-font;
}

.body {
    width: 95%;
    float: left;
    font-size: $body-font;
}

body.compact {
  width: 85%;
  float: left;
  font-size: $body-font - 8px;
  padding-left: 1em;
}

.font-medium {
    font-size: $list-font !important;
}
.font-mediumsmall {
    font-size: $mediumsmall-font !important;
}

.font-smaller {
    font-size: $body-font -8pt !important;
}

.font-small {
    font-size: $footnote-font !important;
}

.bold{
    font-weight: bold;
}

.blue {
  color: $blue;
}

.red {
  color: $red;
}

.white {
  color: $lightest;
}

.contrast71 {
    color: #2E2EFF;
    background: #FFFFFF;
    font-size: 12pt;
}

.contrast41 {
    color: #6161FF;
    background: #FFFFFF;
    font-size: 14pt;
    font-weight: bold;
}

.badcontrast{
    color:#CACAFF;
    background: #FFFFFF;
}

.highlight {
  color: $highlight;
  background: $lightest;
}

.darklight {
  color: $mediumdark;
  background: $lightest;
}
.greylight {
  color: $medium;
  background: $lightest;
}
.lowlight {
  color: $light;
  background: $lightest;
}

.medium {
  font-size: 1.5em;
}

.overlay {
    position: absolute;
    top: 0;
    z-index: 10;
    width: 740px;
    height: 372px;
    background: rgba(0,0,0,0.6);
    transform: skew(200.25deg);
    left: 300px;
}

.corner-ribbon{
  width: 200px;
  background-color: $lightblue;
  color: $darkest;
  position: absolute;
  top: 25px;
  left: -50px;
  text-align: center;
  line-height: 50px;
  letter-spacing: 1px;
  color: $light;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.corner-ribbon.sticky{
  position: fixed;
}

.corner-ribbon.shadow{
  box-shadow: 0 0 3px rgba(0,0,0,.3);
}

/* Different positions */

.corner-ribbon.brtl{
  top: 240px;
  left: 100px;
  font-size: $body-font;
  width: 1200px;
  line-height: 100px;
  transform: rotate(-45deg);
  z-index: 10;
  -webkit-transform: rotate(-45deg);
}

.corner-ribbon.tl{
  top: 25px;
  left: -350px;
  font-size: $body-font;
  width: 1000px;
  transform: rotate(-45deg);
  z-index: 10;
  -webkit-transform: rotate(-45deg);
}

.corner-ribbon.tlbr{
    top: auto;
    left: auto;
    bottom: 240px;
    right: 100px;
    font-size: $body-font;
    width: 1200px;
    line-height: 100px;
    transform: rotate(45deg);
    z-index: 10;
    -webkit-transform: rotate(45deg);
}

.corner-ribbon.tr{
  top: 100px;
  left: 500px;
  font-size: $body-font;
  width: 1000px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  z-index: 10;
}

.corner-ribbon.top-left{
  top: 25px;
  left: -50px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.corner-ribbon.top-right{
  top: 25px;
  right: -50px;
  left: auto;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-left{
  top: auto;
  bottom: 25px;
  left: -50px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-right{
  top: auto;
  right: -50px;
  bottom: 25px;
  left: auto;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

/* Colors */

.corner-ribbon.white{background: $light; color: $dark;}
.corner-ribbon.black{background: $darkest;}
.corner-ribbon.grey{background: $medium;}
.corner-ribbon.blue{background: $lightblue;}
.corner-ribbon.green{background: $lightgreen;}
.corner-ribbon.turquoise{background: $turqouise;}
.corner-ribbon.purple{background: $purple;}
.corner-ribbon.red{background: $red;}
.corner-ribbon.orange{background: $orange;}
.corner-ribbon.yellow{background: $yellow;}


html.remark-container, body.remark-container {
  height: 100%;
  width: 100%;
  -webkit-print-color-adjust: exact;
}

.remark-container {
  background: #d7d8d2;
  margin: 0;
  overflow: hidden;
}
.remark-container:focus {
  outline-style: solid;
  outline-width: 1px;
}
.remark-container:-webkit-full-screen {
  width: 100%;
  height: 100%;
}



/**********/
/* Slides */
/**********/


.remark-code-line {
  min-height: 1em;
}

.remark-code-line-highlighted {
    background-color: $violet;
    color:$darkest;
}
.remark-code-span-highlighted {
    background-color:  $violet;
    color:$darkest;
    padding: 1px 2px 2px 2px;
}

.remark-visible {
  display: block;
  z-index: 2;
}

.remark-fading {
  display: block;
  z-index: 1;
  .remark-slide-scaler {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}

/************/
/* Backdrop */
/************/

.remark-backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  background: #000;
  z-index: 2;
}

/*****************/
/* Pause overlay */
/*****************/

.remark-pause {
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
  display: none;
  position: absolute;
  z-index: 1000;

  .remark-pause-lozenge {
    margin-top: 30%;
    text-align: center;

    span {
      color: $lightest;
      background: $dark;
      border: 2px solid $darkest;
      border-radius: 20px;
      padding: 20px 30px;
      font-family: Helvetica, arial, freesans, clean, sans-serif;
      font-size: 42pt;
      font-weight: bold;
    }
  }
}

.remark-container.remark-presenter-mode.remark-pause-mode {
  .remark-pause {
    display: block;
  }
  .remark-backdrop {
    display: block;
    opacity: 0.5;
  }
}

.upper_left {
	position: absolute;
	top: 0;
	left: 0;
	width: 200px;
}
.upper_right {
	position: absolute;
	top: 100;
	right: 0%;
	width: 640px;
}
.lower_left {
	position: absolute;
	bottom: 10%;
	width: 200px;
	left: 0;
}
.lower_right {
	bottom: 10%;
	right: 10%;
	width: 200px;
	position: absolute;
}

/* Two-column layout */
.left-column {
    color: $dark;
    width: 20%;
    float: left;
    height: 92%;
    h2:last-of-type, h3:last-child {
	color: $darkest;
    }
    font-size: $body-font;
}

.right-column {
    width: 75%;
    float: left;
    padding-top: 1em;
    padding-left: 1em;
    font-size: $body-font;
}

.left-column-half {
  color: $dark;
  width: 45%;
  float: left;
  h2:last-of-type, h3:last-child {
      color: $darkest;
  }
  padding-left: 1em;
}

.right-column-half {
  width: 45%;
  float: left;
  h2:last-of-type, h3:last-child {
    color: $dark;
  }
  padding-left: 1em;
}

.left-column40 {
  width: 35%;
  float: left;
  padding-left: 1em;
}

.left-column50 {
  width: 45%;
  float: left;
  padding-left: 1em;
}


.left-column60 {
  width: 55%;
  float: left;
  padding-left: 1em;
}

.right-column20 {
  width: 15%;
  float: left;
  padding-left: 1em;
}

.right-column30 {
  width: 25%;
  float: left;
  padding-left: 1em;
}


.right-column40 {
  width: 35%;
  float: left;
  padding-left: 1em;
}

.right-column55 {
  width: 54%;
  float: left;
  padding-left: 1em;
}


.middle-column {
  width: 55%;
  float: left;
  padding-left: 1em;
}


.right-column-staff {
  width: 54%;
  float: left;
  padding-top: 2em;
}

.column {
  float: left;
  width: 31%;
  margin: 1%
}

.doublecolumn {
  float: left;
  margin: 1%;
  width: 64%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.centerv {
    position: absolute;
    transform: translate(-0%,50%);
}
.centerh {
    text-align: center;
}

.blackback {
    background-color: darker;
}

.footnote {
    font-size: $footnote-font;
    background-color: $lightest;
    bottom: 12px;
    left: 20px;
    z-index: 2;
}

.footnotelarge {
    font-size: $list-font;
    background-color: $lightest;
    bottom: 12px;
    left: 20px;
    z-index: 2;
}

.bottom {
    bottom: 5px;
    float: left;
    position: absolute;
}