body { font-size: 20px; color: #212529; font-family: 'Lora', 'Times New Roman', serif; }

p { line-height: 1.5; margin: 30px 0; }

p a { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { font-weight: 800; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; }

a { color: #212529; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; }

a:focus, a:hover { color: #007bff; }

blockquote { font-style: italic; color: #6c757d; }

.section-heading { font-size: 36px; font-weight: 700; margin-top: 60px; }

.caption { font-size: 14px; font-style: italic; display: block; margin: 0; padding: 10px; text-align: center; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; }

::-moz-selection { color: #fff; background: #007bff; text-shadow: none; }

::selection { color: #fff; background: #007bff; text-shadow: none; }

img::selection { color: #fff; background: transparent; }

img::-moz-selection { color: #fff; background: transparent; }

.flex-body { display: flex; }

@media only screen and (max-width: 992px) { .flex-body { flex-direction: column; } }

#mainNav { position: absolute; border-bottom: 1px solid #e9ecef; background-color: black; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; }

#mainNav .navbar-brand { font-weight: 800; color: #fff; }

#mainNav .navbar-toggler { font-size: 12px; font-weight: 800; padding: 13px; text-transform: uppercase; color: #fff; }

#mainNav .navbar-nav > li.nav-item > a { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }

@media only screen and (min-width: 992px) { #mainNav { border-bottom: 1px solid transparent; background: black; }
  #mainNav .navbar-brand { padding: 10px 20px; color: #fff; }
  #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover { color: rgba(255, 255, 255, 0.8); }
  #mainNav .navbar-nav > li.nav-item > a { padding: 10px 20px; color: #fff; }
  #mainNav .navbar-nav > li.nav-item > a:focus, #mainNav .navbar-nav > li.nav-item > a:hover { color: rgba(255, 255, 255, 0.8); } }

@media only screen and (min-width: 992px) { #mainNav { -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; transition: background-color 0.2s; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; }
  #mainNav.is-fixed { /* when the user scrolls down, we hide the header right above the viewport */ position: fixed; top: -67px; -webkit-transition: -webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s; transition: transform 0.2s; border-bottom: 1px solid white; background-color: rgba(255, 255, 255, 0.9); }
  #mainNav.is-fixed .navbar-brand { color: #fff; }
  #mainNav.is-fixed .navbar-brand:focus, #mainNav.is-fixed .navbar-brand:hover { color: #007bff; }
  #mainNav.is-fixed .navbar-nav > li.nav-item > a { color: #fff; }
  #mainNav.is-fixed .navbar-nav > li.nav-item > a:focus, #mainNav.is-fixed .navbar-nav > li.nav-item > a:hover { color: #007bff; }
  #mainNav.is-visible { /* if the user changes the scrolling direction, we show the header */ -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } }

/* Docs specific css */
.index_blog_body { justify-content: left; }

.doc-body { margin-top: 10px; margin-left: 8px; margin-right: 8px; }

/*  ALL OF THE CSS FROM THE GATSBY SITE FOR REFERENCE
    This is for the documentation page
    
import styled from '@emotion/styled';

export const StyledHeading = styled('h1')`
  font-size: 32px;
  line-height: 1.5;
  font-weight: 500;
  border-left: 2px solid #1ed3c6;
  padding: 0 16px;
  flex: 1;
  margin-top: 0;
  padding-top: 0;
  color: ${props => props.theme.colors.heading};
`;

export const Edit = styled('div')`
  padding: 1rem 1.5rem;
  text-align: right;

  a {
    font-size: 14px;
    font-weight: 500;
    line-height: 1em;
    text-decoration: none;
    color: #555;
    border: 1px solid rgb(211, 220, 228);
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s ease-out 0s;
    text-decoration: none;
    color: rgb(36, 42, 49);
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(116, 129, 141, 0.1) 0px 1px 1px 0px;
    height: 30px;
    padding: 5px 16px;
    &:hover {
      background-color: rgb(245, 247, 249);
    }
  }
`;

export const StyledMainWrapper = styled.div`
  max-width: 750px;
  color: ${props => props.theme.colors.text};

  ul,
  ol {
    -webkit-padding-start: 40px;
    -moz-padding-start: 40px;
    -o-padding-start: 40px;
    margin: 24px 0px;
    padding: 0px 0px 0px 2em;

    li {
      font-size: 16px;
      line-height: 1.8;
      font-weight: 400;
    }
  }

  a {
    transition: color 0.15s;
    color: ${props => props.theme.colors.link};
  }

  code {
    border: 1px solid #ede7f3;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.9375em;

    background: ${props => props.theme.colors.background};
  }

  @media (max-width: 767px) {
    padding: 0 15px;
  }
`;

*/
.btn { font-size: 14px; font-weight: 800; padding: 15px 25px; letter-spacing: 1px; text-transform: uppercase; border-radius: 0; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; }

.btn-primary { background-color: #007bff; border-color: #007bff; }

.btn-primary:hover, .btn-primary:focus, .btn-primary:active { color: #fff; background-color: #0069d9 !important; border-color: #0069d9 !important; }

.btn-lg { font-size: 16px; padding: 25px 35px; }

header.masthead { background-color: #003e80; background: linear-gradient(180deg, #80bdff 0%, #003e80 100%); background-repeat: no-repeat; background-origin: padding-box; background-size: cover; background-attachment: scroll; background-position: center 25%; }

header.masthead .subheading { line-height: 1.6 !important; }

header.masthead *, header.masthead .post-heading * { text-shadow: 0 0 80px rgba(0, 0, 0, 0.8); }

footer { padding: 20px 0; line-height: 1em; }

hr.background--light { border-color: #000 !important; }

.btn.background--light { color: initial !important; }

.btn { margin-bottom: 6px; }

.btn-sm { font-size: 12px; padding: 5px 10px; }

.btn-xs { font-size: 12px; padding: 1px 5px; }

.right-border { border-right: 1px solid #eeeeee; }

p { margin: 0 0 1rem 0; }

.sidebar li { margin-bottom: 8px; }

.post-title { margin-bottom: 0; word-break: break-word; }

.post-subtitle { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1.5rem; }

.post-list > a { color: #333333; }

.post-list > a:hover, .post-list > a:focus { text-decoration: none; color: #337ab7; }

.post-list > a > .post-title { margin-top: 10px; margin-bottom: 6px; }

.post-list > a > .post-subtitle { margin: 0; font-weight: 300; margin-bottom: 6px; }

.post-list > .post-meta { color: #777777; font-size: 16px; font-style: italic; margin-top: 0; }

.post-list > .post-meta > a { text-decoration: none; color: #333333; }

.post-list > .post-meta > a:hover, .post-list > .post-meta > a:focus { color: #337ab7; text-decoration: underline; }

.post-heading { word-break: break-word; }

.post-heading .subheading { margin-bottom: 0; }

.post-heading .meta { margin-top: 30px; }

.post-heading .tags { margin-top: 30px; }

.post-heading .tags .btn { border-color: #222222; }

.panel .table pre { margin: 0px; border: none; border-top-left-radius: 0px; border-top-right-radius: 0px; }

.badge { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }

/* Awsome same-height Bootstrap columns from http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height */
/* vertical alignment styles */
.col-top { vertical-align: top; }

.col-middle { vertical-align: middle; }

.col-bottom { vertical-align: bottom; }

/* columns of same height styles */
.container-xs-height { display: table; padding-left: 0px; padding-right: 0px; }

.row-xs-height { display: table-row; }

.col-xs-height { display: table-cell; float: none; }

@media (min-width: 768px) { .container-sm-height { display: table; padding-left: 0px; padding-right: 0px; }
  .row-sm-height { display: table-row; }
  .col-sm-height { display: table-cell; float: none; } }

@media (min-width: 992px) { .container-md-height { display: table; padding-left: 0px; padding-right: 0px; }
  .row-md-height { display: table-row; }
  .col-md-height { display: table-cell; float: none; } }

@media (min-width: 1200px) { .container-lg-height { display: table; padding-left: 0px; padding-right: 0px; }
  .row-lg-height { display: table-row; }
  .col-lg-height { display: table-cell; float: none; } }

.sidebar-container .current-page { font-weight: bold; }

.SideBar { width: 298px; margin: 0px 22px; }

.SideBar .left-sidebar { margin-top: 10px; width: 100%; height: 100vh; overflow: auto; position: fixed; padding-left: 0px; position: -webkit-sticky; position: -moz-sticky; position: sticky; top: 0; padding-right: 0; -webkit-box-shadow: -1px 0px 4px 1px rgba(175, 158, 232, 0.4); }

@media only screen and (min-width: 992px) { .SideBar .left-sidebar { display: block; } }

@media only screen and (max-width: 992px) { .SideBar .left-sidebar { height: auto; } }

.SideBar .left-sidebar-toggler { margin-top: 16px; padding: 0.25rem 0.75rem; line-height: 1; }

@media only screen and (min-width: 992px) { .SideBar .left-sidebar-toggler { display: none; } }

.SideBar .left-sidebar-toggler:hover, .SideBar .left-sidebar-toggler:focus { text-decoration: none; }

@media only screen and (max-width: 992px) { .SideBar { width: auto; } }

.doc-index { margin-top: 10px; }

/* ALL OF THE CSS FROM THE GATSBY SITE FOR REFERENCE
    This is for the sidebase, the one on the left displaying 
    all of the available documenation and the sidebar on the right 
    that we have not done that will show the contents of the 
    specific documentation page

 import styled from '@emotion/styled';

export const StyledHeading = styled('h1')`
  font-size: 32px;
  line-height: 1.5;
  font-weight: 500;
  border-left: 2px solid #1ed3c6;
  padding: 0 16px;
  flex: 1;
  margin-top: 0;
  padding-top: 0;
  color: ${props => props.theme.colors.heading};
`;

export const Edit = styled('div')`
  padding: 1rem 1.5rem;
  text-align: right;

  a {
    font-size: 14px;
    font-weight: 500;
    line-height: 1em;
    text-decoration: none;
    color: #555;
    border: 1px solid rgb(211, 220, 228);
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s ease-out 0s;
    text-decoration: none;
    color: rgb(36, 42, 49);
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(116, 129, 141, 0.1) 0px 1px 1px 0px;
    height: 30px;
    padding: 5px 16px;
    &:hover {
      background-color: rgb(245, 247, 249);
    }
  }
`;

export const StyledMainWrapper = styled.div`
  max-width: 750px;
  color: ${props => props.theme.colors.text};

  ul,
  ol {
    -webkit-padding-start: 40px;
    -moz-padding-start: 40px;
    -o-padding-start: 40px;
    margin: 24px 0px;
    padding: 0px 0px 0px 2em;

    li {
      font-size: 16px;
      line-height: 1.8;
      font-weight: 400;
    }
  }

  a {
    transition: color 0.15s;
    color: ${props => props.theme.colors.link};
  }

  code {
    border: 1px solid #ede7f3;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.9375em;

    background: ${props => props.theme.colors.background};
  }

  @media (max-width: 767px) {
    padding: 0 15px;
  }
`;

*/