@page screenplay, screenplay-title {
  size: letter;
  margin-top: 1in;
  margin-right: 1in;
  margin-bottom: 0.75in;
  margin-left: 1.5in;
}

@page screenplay {
  @top-right-corner {
    font-family: "Courier Prime", "Courier", "Courier Final Draft", "Courier New";
    font-size: 12pt;
    content: counter(page) ".";
    vertical-align: bottom;
    padding-bottom: 1em;
  }
}

@page screenplay:first {
  @top-right-corner {
    content: normal;
  }
}

.screenplay {
  page: screenplay;
  counter-reset: page;
  font-family: "Courier Prime", "Courier", "Courier Final Draft", "Courier New";
  font-size: 12pt;
  line-height: 1;
  max-width: 6in;
  margin: 1em auto;
  -webkit-text-size-adjust: none;
}

.screenplay h1, .screenplay h2, .screenplay h3, .screenplay h4, .screenplay h5, .screenplay h6 {
  font-weight: inherit;
  font-size: inherit;
}

.screenplay a {
  color: inherit;
  text-decoration: none;
}

.screenplay .underline {
  text-decoration: underline;
}

.screenplay .title-page {
  display: block;
  page: screenplay-title;
  page-break-after: always;
  margin: 0 auto 1em;
}

.screenplay .title-page .title {
  text-align: center;
}

@media print {
  .screenplay .title-page .title {
    margin-top: 3.5in;
    margin-bottom: 4in;
  }
}

.screenplay .title-page .title h1 {
  text-transform: uppercase;
  text-decoration: underline;
}

.screenplay hr {
  page-break-after: always;
}

@media print {
  .screenplay hr {
    visibility: hidden;
  }
}

.screenplay mark {
  background-color: yellow;
}

.screenplay mark:before {
  content: '*';
  width: 0.5in;
  position: absolute;
  right: 0;
}

.screenplay del:before {
  content: '*';
  width: 0.5in;
  position: absolute;
  right: 0;
}

.screenplay .section {
  width: 100%;
  margin: 0;
  clear: both;
}

.screenplay .section-heading {
  display: block;
  text-align: center;
}

.screenplay .section-heading:hover {
  color: white;
  background-color: black;
}

.screenplay .scene {
  margin-top: 2em;
  width: 100%;
}

.screenplay .scene-heading {
  margin-bottom: 0;
  clear: both;
  page-break-after: avoid;
}

.screenplay .scene-heading:hover {
  color: white;
  background-color: black;
}

.screenplay .action {
  margin: 1em 0;
  clear: both;
  white-space: pre-wrap;
  orphans: 2;
  widows: 2;
}

.screenplay .dialog {
  width: 75%;
  max-width: 4in;
  margin-top: 0;
  margin-bottom: 1em;
  margin-left: 17%;
  clear: both;
}

.screenplay .dialog .character {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 25%;
}

.screenplay .dialog .lines {
  max-width: 3.5in;
  margin-top: 0;
  margin-bottom: 0;
  white-space: pre-wrap;
  orphans: 2;
  widows: 2;
}

.screenplay .dialog .paren {
  max-width: 2in;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 15%;
  text-indent: -0.6em;
  page-break-inside: avoid;
  page-break-after: avoid;
}

.screenplay .dual-dialog {
  display: inline-block;
  width: 100%;
}

.screenplay .dual-dialog .dialog {
  max-width: 50%;
  margin-left: 0;
  float: left;
  clear: none;
}

.screenplay .dual-dialog .dialog .lines {
  width: 95%;
}

.screenplay .trans {
  max-width: 2in;
  margin-left: 63%;
  clear: both;
  page-break-before: avoid;
}

.screenplay .note {
  display: block;
  font-size: 11pt;
  font-family: "Comic Sans MS", "Marker Felt", "sans-serif";
  line-height: 1.5;
  background-color: lightgoldenrodyellow;
  padding: 1em;
}

.screenplay .synopsis {
  display: block;
  margin-top: 0;
  color: grey;
  font-style: italic;
}

.screenplay .center {
  text-align: center;
  width: 100%;
  white-space: pre-wrap;
}