/**
 * ----------------------------------------------------------------------------
 *  MASTER SCENE SCREENWRITING GUIDE: Main stylesheet
 * ----------------------------------------------------------------------------
 *
 * @author Ken Briscoe
 * @file /scriptwriting/css/style.css
 * @copyright 2017
 * @since 2024-10-16
 *
 * ------------------------------------
 */

/* COLORS */
/*
  --- Original MSSG Colors ---
  BG: 202020
  Text: f0f0f0
  Dark grey: 505050;
  Highlight BG (blue): 0072a8
  Highlight Text (red): ea3815
  Borders (orange): ffa52c
  Gold: e0d2ac

  --- Presentation Colors ---
  BG: 202020
  Off-white: f0f0f0
  Light grey: c0c0c0
  Medium grey: 909090
  Dark grey: 404040
  Red: ea3815
  Gold: e0d2ac
  Blue: 0072a8
  Orange: ff6600

  --- SignumNOVA COLORS ---
  BG: 272822
  Text (body, p, ul, ol): 909090
  H1: a19e99
  H2: 4184a3
  Links: a7b3bb - hover: ea3815 - visited: 909090
  Form fields: BG c0c0c0
  Menu links: 707070
  Logo (letters): 4184a3
  Logo (dot & wave): a19e99
*/

/* FONTS */
@import url("https: //fonts.googleapis.com/css?family=Open+Sans: 400,400italic,900&subset=latin,latin-ext");

/* DEFAULTS */

html,
body,
div,
img,
p,
h1,
h2,
h3,
h4,
h5,
ul,
table {
  display: block;
  position: relative;
  float: left;
  clear: both;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  border: 0;
}

body {
  color: #c0c0c0; /*f0f0f0*/
  background: #202020; /*272822*/
  font-size: 100%;
  font-style: normal;
  font-weight: normal;
  font-family: "Open Sans", Arial, sans-serif;
}

div {
}

img {
}

p {
  margin:0 1em 1em 0;
  font-size: 0.8rem;
}

h1 {
	color: #4184a3; /*0072a8*/
  background: transparent;
	font-size: 1.5rem;
  font-weight: normal;
  letter-spacing: 0.1em;
  /*text-transform: uppercase;*/
	text-shadow: none;
  margin: 1rem 0 0.5rem 0;
  padding: 0;
}

h2 {
  color: #4184a3; /*0072a8*/
  background: transparent;
  font-size: 1.3rem;
  font-weight: normal;
  letter-spacing: 0.1em;
	text-shadow: none;
	margin: 1.5rem 1rem 1rem 0;
  padding-bottom: 0.3rem;
	border-bottom: 1px dashed #505050;
}

h3 {
  color: #e0d2ac;
  background: transparent;
  font-size: 1.1rem;
  font-weight: normal;
  letter-spacing: 0.1rem;
  margin: 1rem 0 0.5rem 0;
}

h4 {
  color: #ea3815;
  background: transparent;
  font-size: 1.0rem;
  font-weight: normal;
  font-style: normal; /*italic*/
  letter-spacing: 0.1rem;
  margin: 1rem 0 0.5rem 0;
}

/* H5 & H6 are not currently processed in the markdown module. */
h5 {
}

h6 {
}

code,
pre {
  font-family: "Courier New", Courier, monospace;
}

sup {
  font-size: 0.8rem;
}

ul {
  list-style-type: square;
  margin: 0 0 0 1rem;
}

li {
  margin: 0 0 0.5rem 0;
  font-size: 0.8rem;
}

span {
}

a {
  color: #0072a8;
  background: transparent;
  font-style: normal;
  font-weight: normal;
  text-decoration: underline;
}

a:link { }
a:visited {color: #909090;}
a:active {color: #ea3815;}
a:hover, a:focus {color: #ea3815;}

table {
  border-collapse: collapse;
  border-spacing: 0;
  background: transparent;
  margin-bottom: 1rem;
  border:1px solid #505050;
}

tr {
  margin: 0;
  padding: 0;
  border: 0;
  color: #505050;
  background-color: #f0f0f0;
}

tr:nth-child(odd) {background-color: #f0f0f0;}
tr:nth-child(even) {background-color: #e0e0e0;}
tr:hover {color: #202020; background-color: #ffa52c;}

th {
  margin: 0;
  padding: 0.125rem 0.4rem;
  border: 0;
  color: #f0f0f0;
  background: #0072a8;
  font-size: 0.8rem;
  font-weight: normal;
  text-align: center;
}

td {
  margin: 0;
  padding: 0.1rem 0.3rem;
  border: 0;
  vertical-align: top;
  font-size: 0.8rem;
}


 * ------------------------------------
 *  FORM
 * ------------------------------------
*/

form,
form fieldset,
form label,
form input,
textarea,
select {
  display:block;
  position:relative;
  float:left;
  clear:both;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  border:0;
  font-size:1.0rem
}

form {
}

form fieldset {
  color:#f0f0f0;
  background:#505050;
  border:1px solid #c0c0c0;
  border-radius:0.5em;
  margin:0.3rem 25% 0.625rem 0;
  padding:0.625rem 1rem 1.25rem 1rem;
}

form fieldset legend {
  color:#f0f0f0;
  font-size:1.3rem;
  margin:0.2rem 0 0 1rem;
}

/* label */
form label {
  width:100%;
  margin:1.6rem 1rem 0.3rem 0;
  text-align:left;
}

/* inputs */
form input {
  padding:0.5rem 0.7rem;
  color:#505050;
  background:#e0e0e0;
  border:1px solid #909090;
  border-radius:0.45rem;
}
form input[type='text'] {}
form input[type='email'] {}
form input[type='password'] {background:#e0e0e0;}
form input[type='file'] {padding:0.5rem; border:none;}
form input[type='checkbox'] {width:1.0em; height:1.0em; margin:0.3rem 0.625rem 0 0;}
form input[type='radio'] {width:1.0em; height:1.0em; margin:0.3rem 0 0 1rem;}
form input[type='submit'] {
  margin:1rem 0 1rem 1rem;
  color:#333333;
  font-size:1.5rem;
  text-transform:uppercase;
  cursor:pointer;
  padding:0.5rem 0.7rem;
  background:linear-gradient(180deg, #fff, #fff 75%, #cdcdcd);
  box-shadow:0.2rem 0.2rem 0.15rem #202020;
  border-radius:0.45rem;
}
form input[type='reset'] {
  margin:1rem 0 1rem 0;
  color:#505050;
  font-size:1.2rem;
  cursor:pointer;
  padding:0.45rem 1rem 0.45rem 1rem;
  background:linear-gradient(180deg, #fff, #fff 75%, #cdcdcd);
  box-shadow:0.2rem 0.2rem 0.15rem #202020;
  border-radius:0.45rem;
}
form input[type='button'] {
  margin:1rem 0 1rem 0;
  color:#505050;
  font-size:1.1rem;
  cursor:pointer;
  margin:0 1.6rem 0 0;
  padding:0.45rem 1rem 0.45rem 1rem;
  background:linear-gradient(180deg, #fff, #fff 75%, #cdcdcd);
  box-shadow:0.2rem 0.2rem 0.15rem #202020;
  border-radius:0.45rem;
}

/* textarea */
form textarea {
  width:95%;
  margin:0;
  padding:0.5rem;
  overflow:auto;
  color:#505050;
  background:#f0f0f0;
  font-family:"Open Sans", "Courier New", Courier, monospace;
  border:1px solid #c0c0c0;
}

/* select */
form select {
  color:#505050;
  background:#f0f0f0;
  border:1px solid #c3c3c3;
}


/**
 * ------------------------------------
 *  PAGE LAYOUT
 * ------------------------------------
*/

#page_box {
  width: 100%;
  height: 100%;
  background: transparent;
}

#header_box {
  width: 100%;
  height: auto;
  background: #0072a8; /*4184a3*/
}

#header_title {
  width: auto;
  margin: 1rem 1rem 1rem 0.5rem;
  color: #f0f0f0;
  background: transparent;
  font-family: "Open Sans", Arial, Helvetica;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
}

#header_subtitle {
  width: auto;
  margin: 0 1rem 1rem 0.5rem;
  color: #f0f0f0;
  background: transparent;
  font-family: "Open Sans", Arial, Helvetica;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0;
}

#main_content_box {
  width: auto;
  margin: 0 0 0 0.5rem;
}

#footer_box {
  width: 100%;
  height: 100%;
  color: #f0f0f0;
  background: #0072a8; /*4184a3*/
}

#footer_content {
  margin: 1rem 1rem 1rem 0.5rem;
}

.software_box {
  width: auto; /*auto*/
  height: auto;
  margin: 0.5rem 20% 0.5rem 0%;
  padding: 1rem;
  font-size: 0.8rem;
  font-style: normal; /*italic*/
  background: #202020;
  color: #c0c0c0;
  border: 0.150rem dotted #e0d2ac;
  border-radius: 0.7rem;
}

.note_box {
  width: auto; /*auto*/
  height: auto;
  margin: 0.5rem 20% 1rem 0%; /*0.5rem 1.5rem 1rem 1rem*/
  padding: 1rem;
  font-size: 0.8rem;
  font-style: normal; /*italic*/
  background: #505050;
  color: #d0d0d0;
  border: 0.150rem dotted #e0d2ac;
  border-radius: 0.7rem;
  /*box-shadow: 0 0 0.25rem #999;*/
}

.markdown_hr {
  width: 95%;
  margin: 0 0 3rem 0;
  border-bottom: 0.125rem dotted #ffa52c;
}

p .highlight {
  color: #202020;
  background: linear-gradient(45deg, #c0c020, #707020);
}


/**
 * ------------------------------------
 *  TABLE OF CONTENTS
 * ------------------------------------
*/

#toc_menu {
  width: 100%;
  margin: 2rem 0 1rem 0;
}

#toc_icon {
  clear: none;
  margin: 0.2rem 0 0 0;
}

#toc_text {
  color: #f0f0f0;
  clear: none;
  /*margin: 0.15rem 0 0 0.2rem;*/
  margin: 0 0 0 0.5rem;
}

a.toc_menu {
  color: #202020;
  background: transparent;
  text-decoration: none;
}

a.toc_menu:link { }
a.toc_menu:visited {color: #202020;}
a.toc_menu:active {color: #202020;}
a.toc_menu:hover {color: #606060;}

/* The menu contents are initially hidden. */
#toc_box {
  width: 260px;
  margin: 0 100% 1rem 0;
  padding: 1rem 1rem 0.5rem 1rem;
  background: #0072a8;
  border: 1px solid #999;
  border-radius: 0.5rem;
  box-shadow: 0 0 0.25rem #999;
}

.toc_item {
  margin: 0 0 1rem 0;
}

a.toc_link {color: #f0f0f0; text-decoration: none;}
a.toc_link:link { }
a.toc_link:visited {color: #f0f0f0;}
a.toc_link:active {color: #ffa52c;}
a.toc_link:hover {color: #ffa52c; font-weight:700; text-decoration: underline;}


/**
 * ------------------------------------
 *  SCRIPT FORMATTING
 * ------------------------------------
*/

.script {
  width: 285px;
  height: auto;
  margin: 0 100% 1rem 0;
  padding: 0 0.2rem 0.5rem 0.2rem;
  font-size: 0.6rem;
  font-family: "Courier New", Courier, monospace;
  color: #303030;
  background: #f0f0f0;
  border: 0.1rem dotted #000;
  border-radius: 0.5rem;
  box-shadow: 0 0 0.5rem #999;
}

.script .scene_heading {margin: 3.13% 0 0 0; text-transform: uppercase;}
.script .action {margin: 1.56% 0 0 0;}
.script .character {margin: 1.56% 0 0 33.33%; text-transform: uppercase;}
.script .parenthetical {margin: 0 33.33% 0 25%;}
.script .dialogue {margin: 0 21.67% 0 16.67%;}
.script .transition {margin: 1.56% 0 0 75%; text-transform: uppercase;}
.script .shot {margin: 3.13% 0 0 0; text-transform: uppercase;}
.script .newact,
.script .endact {
  width:100%;
  text-align: center;
  text-decoration: underline;
  text-transform: uppercase;
}
.script .newact {margin: 1.56% 0 0 0;}
.script .endact {margin: 3.13% 0 0 0;}

/*   For MORE & CONT'D, use 'character' style. */

/* Dual Dialogue */
.script .dual_dialogue_left {
  margin:1.56% 0 0 0;
  width:50%;
  clear:left;
}
.script .dual_dialogue_right {
  margin:1.56% 0 0 0;
  width:50%;
  clear:right;
}
.script .dd_character {
  margin:0 0 0 41.67%;
}
.script .dd_parenthetical {
  margin:0 0 0 8.33%;
}
.script .dd_dialogue {
  margin:0;
}

.script .highlight {
  background: linear-gradient(to right, #ffff99, #ffff00 80%, #ffffcc);
}

/**
 * ------------------------------------
 *  MISC. CLASSES
 *  These classes were all in use at 2018-09-04
 * ------------------------------------
*/

/* Buttons */
a.button_link {
  display: block;
  position: relative;
  float: left;
  clear: both;
  width: auto;
  height: auto;
  margin: 0 0 1rem 0;
  padding: 0.7rem 1rem 0.5rem 1rem;
  color: #505050;
  font-size: 0.9rem;
  font-weight: normal;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  /*background: #f0f0f0 linear-gradient(to bottom, #fff 10%,#ddd 40%,#eee 50%,#aaa 100%);*/
  background: #f0f0f0 linear-gradient(160deg, #fff, #bbb);
  border: 1px solid #909090;
  border-radius: 0.5rem;
}
a.button_link:link {}
a.button_link:visited {}
a.button_link:active {color: #922338;}
a.button_link:hover {color: #922338;}

/* Font - used by markdown */
.bold {font-weight:700; color: #e0d2ac;} /* $pattern = '/__'.$text_char_pattern.'__/'; */
.extrabold {font-weight:900;}
.italic {font-style: normal; font-size:120%; color: #ea3815;} /* $pattern = '/_'.$text_char_pattern.'_/'; */
.underline {text-decoration: underline;} /* $pattern = '/~'.$text_char_pattern.'~/'; */
.centered {width: 100%; text-align:center;}
.right_justify {width: 100%; text-align:right;}

.clear_all {
  position: relative;
  float: left;
  clear: both;
  width: 100%;
  height: auto;
  margin: 1em 0 1em 0;
  border: none;
}

.highlight {background: #ffff00;}
.legal {
  font-size: 0.8rem;
  margin:1em 0 1em 0;
}


/*
 * --------------------------------------------------------
 *    MEDIA QUERIES
 * --------------------------------------------------------
 *
 */

/* Styles to be applied between 320 & 619 */
@media only screen and (max-width: 619px) {

}


/* ----- 620px+ ----- */

@media only screen and (min-width: 620px) {
  #header_title {
    margin: 1% 1% 1% 2%;
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
  }

  #header_subtitle {
    margin: 0 1% 1% 2%;
    font-size: 1.2rem;
  }

  .script {
    width: 560px;
    font-size: 1.0rem;
    padding: 0 0.9rem 0.7rem 1.0rem;
  }

  h1 {
    font-size: 1.5rem;
    margin: 0 0 1rem 0;
  }

  h2 {
    font-size: 1.3rem;
    margin: 1.5rem 1.2rem 1rem 0;
  }

  h3 {
    font-size: 1.1rem;
    margin: 1rem 0 0.5rem 0;
  }

  h4 {
    font-size: 1rem;
    margin: 1rem 0 0.7rem 0;
  }

  p {
    font-size: 1.0rem;
  }

  table {

  }

  th {
    padding: 0.125rem 0.5625rem;
    font-size: 0.9rem;
  }

  td {
    padding: 0.125rem 0.5625rem;
    font-size: 1rem;
  }

  ul {
    margin: 0 0 0.5rem 1.5rem;
  }

  li {
    font-size: 1.0rem;
  }

  .note_box {
    margin: 0.5rem 10% 1rem 0%;
    padding: 1rem;
    font-size: 1rem;
  }

  a.button_link {
    font-size: 1rem;
  }
}


/* ----- 740px+ ----- */

@media only screen and (min-width: 740px) {
  #header_title {
    margin: 1% 1% 1% 3%;
    font-size: 1.7rem;
  }

  #header_subtitle {
    margin: 0 1% 1% 3%;
    font-size: 1.3rem;
  }

  #main_content_box {
    margin: 0 1rem;
  }

  .script {
    width: 620px;
    font-size: 1.1rem;
    padding: 0.5em 2.0rem 1.5rem 2.0rem;
  }

  #footer_content {
    margin: 1rem 1rem 1rem 1rem;
  }
}


/* ----- 880px+ ----- */

@media only screen and (min-width: 880px) {
  #header_title {
    font-size: 1.9rem;
  }

  #header_subtitle {
    font-size: 1.3rem;
  }

  .script {
    width: 620px;
  }

  .note_box {
    margin: 0.5rem 15% 1rem 0%;
    padding: 1rem;
    font-size: 1rem;
  }
}


/* ----- 955px+ ----- */

@media only screen and (min-width: 955px) {
  #header_title {
    margin: 2% 1% 1% 3%;
    font-size: 2.0rem;
  }

  #header_subtitle {
    margin: 0 1% 1% 3%;
    font-size: 1.5rem;
  }
}


/* ----- 1100px+ ----- */

@media only screen and (min-width: 1100px) {
  #header_title {
    font-size: 2.2rem;
  }

  #header_subtitle {
    font-size: 1.7rem;
  }
}


/* ----- 1240px+ ----- */

@media only screen and (min-width: 1240px) {

  .note_box {
    margin: 0.5rem 25% 1rem 0%;
  }

  #header_title {
    margin-left:7%;
  }

  #header_subtitle {
    margin-left:7%;
  }

  #main_content_box {
    max-width: 1000px;
    margin: 0 5% 0 7%;
  }

  #footer_content {
    margin: 3% 5% 2% 7%;
  }
}


/* ----- 1366px+ ----- */

@media only screen and (min-width: 1366px) {

  #main_content_box {
    max-width: 1200px;
  }

  /* Font sizes */
  body {font-size: 170%;}
  h1 {font-size: 160%;}
  h2 {font-size: 145%;}
  h3 {font-size: 130%;}
  h4 {font-size: 120%;}

  p,
  sup,
  li,
  th,
  td,
  .note_box,
  a.button_link {
    font-size: 100%;
  }

  .software_box {
    font-size: 1rem;
    padding:1.5rem 2.5rem 1.5rem 2rem;
  }
}


/* ----- 1900px+ ----- */

@media only screen and (min-width: 1900px) {

  /* Margins & dimensions */
  #header_title,
  #header_subtitle {
    margin-left:10%;
  }

  #main_content_box {
    max-width: 1800px;
    margin: 0 7% 0 10%;
  }

  #footer_content {
    margin: 3% 7% 2% 10%;
  }

  #toc_box {
    width: 500px;
  }

  .script {
    /*width: 1150px;*/
  }

  .note_box {
    margin: 0.5rem 40% 1rem 0%;
    font-size: 0.8rem;
  }

  /* Font sizes */
  body {font-size: 175%;}
  h1 {font-size: 170%;}
  h2 {font-size: 150%;}
  h3 {font-size: 130%;}
  h4 {font-size: 120%;}

  p,
  sup,
  li,
  th,
  td,
  .note_box,
  a.button_link {
    font-size: 100%;
  }

  table {
  }

  th,
  td {
    padding: 0.9rem 1rem;
  }


  .note_box {
    padding: 3rem;
  }

  .script {
    /*font-size: 120%;*/
  }

  form,
  form fieldset,
  form label,
  form input,
  textarea,
  select,
  form input[type='submit'],
  form input[type='button'] {
    font-size: 100%;
  }

  #header_title {
    clear:left;
  }

  #header_subtitle {
    clear:right;
    margin-top:2.4%;
  }

  h2 {margin: 5rem 2rem 3rem 0;}

}

/* ------------------------------------------------------------------------- */