@import url(//fonts.googleapis.com/css?family=Philosopher:400,700&subset=latin,cyrillic);

/* Resets */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/* Layout */
#canvas {
    position: absolute;
    width: 100%;
    height: 100%;
}

#header {
    position: fixed;
    width: 100%;
    height: 45px;
    z-index: 100;
    background-color: #fff;
    border-bottom: 1px solid #d0d0d0;
}

#main {
    position: relative;
    margin-top: 45px;
    height: calc(100% - 45px);
    width: 100vw;
    overflow-x: hidden;
}

.page-wrapper {
    background-color: #fff;
    position: relative;
    margin-left: 400px;
    z-index: 10;
}

.page-wrapper-home {
}

.center {
    text-align: center;
}

#nav-button.open {
    left: 400px;
    top: 50px;
}

#nav-button span {
    background-color: #fff;
}

/* Top */
.topnav ul {
    padding-left: 1rem;
    margin: 0;
}

.topnav ul li {
    font-family: Philosopher, serif;
    display:inline-block;
    font-weight: 700;
    padding: 0.85rem;
    height: 44px;
}

.topnav a:hover,
.sectionnav-wrapper a:hover {
    color: #08e;
    color: #c7c7c7;
}

.topnav li:hover,
.sectionnav-wrapper li:hover {
    background-color: #f0f0f0;
}

.topnav li.nav-active:hover,
.sectionnav-wrapper li.nav-active:hover {
    background-color: #08e;
    background-color: #c7c7c7;
    color: #fff;
}

.topnav li.nav-active,
.sectionnav-wrapper .nav-active {
    background-color: #08e;
    background-color: #c7c7c7;
    color: #fff;
}

/* Sections */
.sectionnav-wrapper {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-family: "PT Sans", sans-serif;
    width: 180px;
    position: fixed;
    z-index: 20;
    height: 100%;
    background-color: #fff;
    font-size: 11pt;
    font-weight: bold;
    /* background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent 5px), #fff;*/
    background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent 2px), #fff;
    background-color: #fafafa;
    transition: left 0.3s ease-in-out;
}

.sectionnav-wrapper ul {
    padding: 0;
    margin: 0;
}

.sectionnav-wrapper a li {
    border-bottom: 1px solid #e0e0e0;
    list-style: none;
    height: 50px;
    padding: 10px 0 10px 10px;
    color: #707070;
    font-size: 12pt;
}

.sectionnav-wrapper a {
    text-decoration: none;
}

/* Formatting */
html,
body {
    background-color: #fff;
    color: #404040;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6,
html,
body {
    font-family: "Palatino Linotype", Georgia, serif;
    font-family: "PT Sans", sans-serif;
    font-size: 12pt;
}

.content>h1,
.content>h2,
.content>h3,
.content>h4,
.content>h5,
.content>h6,
.content>p,
.content>table,
.content>ul,
.content>ol,
.content>aside,
.content>dl,
.content>pre {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.content {
    max-width: 40rem;
    margin-left: 15%;
    margin-right: 15%;
}

.content h1 {
    font-family: Philosopher, serif;
    font-size: 32pt;
    border-top: 3px solid #f0f0f0;
    border-bottom: none;
    margin-top: 2rem;
    margin-bottom: 3rem;
    font-weight: 400;
    color: #444;
    text-align: center;
}

.content h2 {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

.content h3 {
    border: none;
    background-image: none;
    font-size: 14pt;
    margin-top: 2rem;
}

ul li {
    list-style: circle;
}

.content li {
    margin-left: 1em;
    padding-left: 1em;
}

/* Compensate for fixed header on anchor targets */
.content h1:before,
.content h2:before {
    display: block;
    content: " ";
    height: 60px;
    visibility: hidden;
}

/* Special cases */
.content .single-file:first-of-type h1 {
    border-top-width: 0;
    margin-top: 0;
}

.content h1+h2 {
    margin-top: -50px;
}

/* Play subsection special cases */
.content h1 + h4 {
    text-align: right;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.content h1 + h4 + h4,
.content h1 + h4 + h4 + h4 {
    font-weight: 400;
    text-align: right;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.content h1 + h4 + blockquote,
.content h1 + h4 + h4 + blockquote,
.content h1 + h4 + h4 + h4 + blockquote {
    margin-top: 2rem;
}

#header a {
    text-decoration: none;
    color: #505050;
}

#header p {
    font-family: Philosopher, serif;
    font-size: 12pt;
    font-weight: 700;
    margin-left: 20px;
    margin-right: 20px;
}

/* Home Page */
h1.home,
h2.home {
    font-family: "Palatino Linotype";
    font-family: "PT Sans", sans-serif;
    font-family: Philosopher, serif;
    color: #fff;
    margin-top: 10%;
    padding: 5% 30% 0 5%;
}

h1.home {
    font-size: 64pt;
    padding-bottom: 0;
}

h2.home {
    font-size: 2vmin;
    padding-top: 0;
}

.page-wrapper-home {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    z-index: 10;
    display: flex;
    flex-flow: row;
}

.page-wrapper-home a {
    text-decoration: none;
    position: relative;
    height: 100%;
    width: 50%;
}

.page-wrapper-home .tile {
    position: relative;
    height: 100%;
}

.page-wrapper-home .tile .back {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.page-wrapper-home .tile .fore {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 10;
}

.page-wrapper-home .tile p {
    font-weight: 700;
    font-size: 3vmin;
    color: #fff;
    text-transform: uppercase;
    padding: 0 30% 5% 5%;
    line-height: 1.2em;
    font-family: "PT Sans", sans-serif;
    font-family: Philosopher, serif;
}

img.bkg {
   min-width: 100%;
   min-height: 100%;
   object-fit: cover;
   object-position: 70%;
}

.bright80 { filter: grayscale(50%) brightness(80%); }
.bright90 { filter: grayscale(50%) brightness(90%); }

/* Travel */

.travelnav {
    font-family: Philosopher, serif;
    display: inline-block;
    margin-left: 2vw;
}

#travelslides {
    height: 100%
}

#travelslides .slide img {
   max-width: 100%;
   max-height: calc(100vh - 45px);
   margin: 0 auto;
}

/* Copy */
.content p {
    margin: 0;
}

.content p + p {
    margin-top: 1rem;
}

.content table td {
    padding: 2px 4px;
}

.content table tr:nth-child(even) > td {
    background-color: #f9f9f9;
}

.content blockquote {
    background-color: #fff;
    color: #a0a0a0;
    border-left: 4px solid #f30;
    float: none;
    padding: 0;
    text-shadow: none;
    width: 100%;
    margin-bottom: 1rem;
}

.content blockquote > p {
    background-color: #fff;
    border: 0;
    color: #a0a0a0;
    padding: 0 1em;
    font-weight: 700;
    line-height: 1.3em;
    font-size: 1.25rem;
    font-style: italic;
}

.content blockquote > p + p {
    margin-top: 1rem;
}

/* Image captions */
/* Ensure break before caption */
.content img + em {
    font-size: 90%;
    color: #707070;
    display: block;
}

.page-wrapper .dark-box {
    width: 40%;
    background-color: #f0f0f0;
    border-left: 1px solid #ccc;
}

.header-right {
    float: right;
}

/* Remove right column from base theme */
.dark-box { display: none; }

.content a {
    text-decoration: none;
    border-bottom: 1px solid #f30;
    color: #333;
}

.content a:hover {
    border-bottom: 3px solid #f30;
}

.content pre {
    width: auto;
    float: none;
    background-color: #fafafa;
    text-shadow: none;
    margin: 2em 0;
    padding: 1.5em;
    border: 1px solid #f0f0f0;
    white-space: pre-wrap;
}

/* The <code> tag on its own is being re-purposed for comments */
.content code {
    background-color: #ffb;
    padding: 3px 10px;
    font-size: 12pt;
    border-radius: 3px;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.1);
}

/* Treat <code> inside <pre> as citations */
.content pre > code {
    font-family: "Palatino Linotype", serif;
    font-family: "PT Sans", sans-serif;
    font-size: 12pt;
    line-height: 1.3em;
    color: #404040;
    text-shadow: none;
    box-shadow: none;
    border-radius: 0;
    word-break: normal;
}

.content th,
.content td {
    font-size:10pt;
}

/* Hugo shortcodes */
/* Theatre scripts */

.script {
    border: 1px solid #f0f0f0;
    background-color: #fafafa;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    clear: both;
}

.script h4 {
    font-size: 12pt;
    font-weight: 400;
    margin-top: -1rem;
}

.script h4:first-of-type {
    margin-top: 1rem;
}

.script p {
    margin-bottom: 0;
    margin-left:5rem;
    position: relative;
    top: -2.1rem;
    white-space: pre-line;
}

.script p:first-child {
    top: 0;
}

/* Script switcher */
input[type="radio"] {
	margin-bottom:0.5rem;
}

input.switch-short,
input.switch-long {
    display: none;
    visibility: hidden;
}

input.switch-short:checked ~ #alt-short,
input.switch-long:checked ~ #alt-long {
	display: inherit;
	visibility: show;
}

input.switch-short:checked ~ #alt-long,
input.switch-long:checked ~ #alt-short {
	display: none;
	visibility: hidden;
}

label.switch {
    float:right;
    position: relative;
    top: 1px;
    margin-left: 0.3rem;
    display: inline-block;
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    padding: 0.2rem 0.4rem;
    background-color: #eaeaea;
    color: #808080;
}

input.switch-short:checked + label,
input.switch-long:checked + label {
    background-color: #fafafa;
    color: #404040;
}

div.script-spacer {
    margin-top: 1rem;
}

/* Collapsible content */
input.toggle-collapse {
    display: none;
	visibility: hidden;
}

label.toggle-collapse {
    width: 3rem;
    height: 1.2rem;
    float: right;
    margin-top: -2.5rem;
    padding: 0.1rem 0.2rem;
    text-align: center;
    border: 1px solid #f0f0f0;
    background-color: #fafafa;
	display: inline-block;
}

label.toggle-collapse::before {
	content: "Hide";
}

input.toggle-collapse:checked ~ label.toggle-collapse::before {
	content: "Show";
}

.collapse {
	display: inherit;
	visibility: visible;
}

input.toggle-collapse:checked ~ .collapse {
	display: none;
	visibility: hidden;
}

/* Override Tocify styles set by Docuapi */

.tocify-wrapper {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-family: "PT Sans", sans-serif;
    position: fixed;
    width: 400px;
    top: initial;
    bottom: initial;
    height: 100%;
    font-size: 11pt;
    border-right: 1px solid #f0f0f0;
    /* background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent 3px), #fafafa; */
    background-color: #fafafa;
    z-index: 30;
}

.tocify-wrapper.tocify-home {
    width: 180px;
}

.tocify-wrapper .tocify-subheader {
    display: block;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent 2px), linear-gradient(to top, rgba(0, 0, 0, 0.1), transparent 2px), #f3f3f3;
}

.tocify-wrapper .tocify-focus,
.tocify-wrapper li {
    color: #505050;
    transition-property: none;
}

.tocify-wrapper .tocify-focus {
    background-color: #f30;
    background-color: #08e;
    background-color: #c7c7c7;
    color: #fff;
    box-shadow: none;
}

.tocify-wrapper li {
    font-size: 11pt;
}

.tocify-wrapper .tocify-subheader .tocify-item a {
    font-size:10pt;
}

.tocify-wrapper li:hover {
    background-color: #e0e0e0;
    color: #08e;
    color: #c7c7c7;
}

.tocify-wrapper li.tocify-focus:hover {
    background-color: #08e;
    background-color: #c7c7c7;
    color: #fff;
}

.tocify {
    position: relative;
    left: 180px;
    width: 220px;
}

/* Media

There are media settings in the original CSS file that are in effect
neutralized by this only because they are less restrictive. They are not
overridden however and could be re-activated if max-width is changed.
*/

@media (max-width: 930px) {
    /*
    .sectionnav-wrapper {
        left: -200px;
    }
    */
    /*
    .sectionnav-wrapper.open {
        left:0;
    }
    */
    .tocify-wrapper {
        left: -400px;
    }
    .tocify-wrapper.open {
        left: 0px;
    }
    .page-wrapper {
        margin-left: 0;
    }
    #nav-button {
        display: block;
        top: 50px;
    }
    .tocify-wrapper .tocify-item>a {
        padding-top: 0.3em;
        padding-bottom: 0.3em
    }
    h2.home {
        font-size: 3.5vmin;
    }
    .page-wrapper-home .tile p {
        font-size: 4vmin;
    }


}

@media (max-width: 640px) {
    .content {
        margin-left: 5%;
        margin-right: 5%;
    }
}

@media (max-width: 500px) {
    #header {
        position: absolute;
    }

    .header-right {
        display: none;
    }

    .page-wrapper-home {
        flex-flow: column;
    }

    h1.home {
        font-size: 48pt;
    }
    h2.home {
        font-size: 6vmin;
    }

    .page-wrapper-home a {
        width: 100%;
        height: 50%;
    }

    .page-wrapper-home .tile p {
        font-size: 7vmin;
    }

    .content pre {
        margin: 2em 0;
    }
}