@import 'color.css';
@import 'media.css';
@import 'footer.css';
@import 'button.css';
@import 'modal.css';

* {
  font-size: 18px; /* All REM units relative to this */
  box-sizing: border-box;
  font-family: 'Maitree', serif;
  text-rendering: optimizeLegibility;
}

body { margin: 0; }


/* TOP HEADER BAR */
header {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  border-bottom: 1px solid white;
  background-color: var(--ctstem-color-blue);
  color: rgba(255, 255, 255, 0.9);
  width: 100%;
  min-width: 400px;
  line-height: 55px;
  padding: 0 15px 0 50px;
  vertical-align: middle;
  font-size: 1.1rem;
  z-index: 9999;  /* Make sure it's above the side bar */
  font-family: 'Roboto Condensed', sans-serif;
  justify-content: flex-start;
  flex-wrap: wrap;
}
footer * {
  font-size: 15px !important;
  font-family: sans-serif;
}

/* PAGE NAVIGATION */
header nav {
  vertical-align: middle;
  font-family: 'Roboto Condensed', sans-serif;
  /*position: absolute;*/
}

header > div#page_numbers {
  flex: 3 1 auto;
}
header > div#page_numbers nav#numbers {
  text-align: right;
}

header > div.title {
  max-width: 80%;
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
header div, header span {
  font-family: 'Roboto Condensed', sans-serif;
}

header nav.activated {
  background-color: var(--ctstem-color-blue);
}

header nav.activated button {
  color: white;
}

header nav button {
  outline: none;
  border: none;
  background-color: transparent;
  font-size: 1.4rem;
  width: 60px;
  vertical-align: middle;
}
header h1 {
  font-size: 1.5rem;
  display: inline-block;
  vertical-align: middle;
  margin-right: 1rem;
}
/* SIDE NAVIGATION BAR */
header nav#side-nav {
  position: fixed;
  top: 50px;
  right: -350px;  /* this will slide in from the right */
  width: 250px;
  height: 100%;
  background-color: var(--ctstem-color-blue);
  z-index: 0;  /* keep this below the top menu */
  padding-top: 1rem;
  line-height: 100%;
  transition: right 0.5s ease-in-out; /* animate the slide */
}

header nav#side-nav.activated { right: 0px; }

header nav#side-nav ul {
  list-style: none;
  padding-left: 1em;
}

/*header nav#side-nav ul li { padding: 0 0 0.5rem 0; }*/

header nav#side-nav ul {
  padding-left: 1.5em;
}
header nav#side-nav ul li {
  padding: 0.25em 0;
  line-height: 1.25em;
}

header nav#side-nav ul.underlying_curriculum li.current_curriculum a {
  text-decoration: underline;
  color: var(--ctstem-color-yellow);
}
header nav#side-nav li a {
  padding: 0.5rem;
  color: white;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  text-decoration: none;
}

header nav#side-nav li a:hover { text-decoration: underline; }

header nav#side-nav li.divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
  width: 90%;
  padding: 0.05rem;
}


header nav .page-link {
  background-color: rgba(255, 255, 255, 0.3);
  display: inline-block;
  font-size: 0.8rem;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  border-radius: 0.75rem;
  color: white;
  text-align: center;
  border: none;
  margin-left: 0.3rem;
  text-decoration: none;
  vertical-align: middle;
}

header nav .page-link.selected { background-color: white; color: rgb(70, 160, 215); }
header nav .page-link:hover { background-color: rgba(255, 255, 255, 0.8); color: rgb(70, 160, 215); }
header nav .page-link:active { background-color: white; }
header a.navbar-brand img{
  width: 150px;
  margin-right: 50px;
}



/* MAIN SECTION AND BASIC ELEMENTS */
main {
  display: block;
  /*max-width: 1200px;*/
  width: 100%;
  min-width: 400px;
}

.page {
  margin: 95px 7% 0 7%;
}

p {
  font-size: 1rem;
  line-height: 160%;
  font-family: inherit;
  margin: 0 0 1rem 0;
}

p.item {
  margin-top: 3rem;
}

h1, h2, h3, h4, .byline, .page-type {
  font-family: 'Roboto Condensed', sans-serif;
}

h1 {
  font-size: 2rem;
  font-weight: 700;
  font-style: italic;
  margin: 0;
}

h2 {
  font-size: 1.5rem;
  font-weight: 400;
  margin: 2rem 0 0.5rem 0;
}

h3 {
  font-size: 1.2rem;
  font-weight: 400;
  margin: 2rem 0 0.5rem 0;
}
h3.modal-title {
  font-size: 1.5em;
}
h4 {
  font-size: 1rem;
  font-weight: 400;
  margin: 0.5rem 0;
}

hr {
  border-top: 1px solid black;
  border-bottom: none;
  background-color: transparent;
}

h1, h2, h3, h4, .byline, .page-type {
  font-family: 'Roboto Condensed', sans-serif;
}

b, ul, ol, li {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
}

ol li {
  margin-bottom: 1rem;
}

a {
  font-family: inherit;
  font-size: inherit;
  color: rgb(70, 160, 215);
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: red;
}

a.fa-star {
  color: orange;
}
a.fa-star-o {
  color: black;
}


img.preview {
  width: 600px;
  height: 400px;
}

.step_title {
  font-size: 1.2em;
  text-align: center;
}

.question_container {
  margin-bottom: 2em;
}

span.optional {
  font-style: italic;
}
span.mandatory {
  color: red;
}

div.modal td, div.modal th {
  font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 0.8rem !important;
}

div.modal h3 {
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  color: #4e4e4e;
}

div.modal p {
  font-size: 1.25em !important;
}

div.modal .modal-footer .btn{
  font-size: 14px !important;
}

div.modal button.close {
  -webkit-appearance: none;
  padding: 0;
  cursor: pointer;
  background: 0 0;
  border: 0;
  font-size: 3em !important;
}

div.modal-xlg {
  width: 1024px;
}

.save-buttons {
  margin: 2rem 0;
  width: 100%;
  text-align: right;
}

.save-buttons button {
  width: auto;
  padding: 10px 20px;
  background-color: rgb(70, 160, 215);
  color: white;
  border-radius: 5px;
  outline: none;
  border: none;
  font-family: 'Roboto Condensed', sans-serif;
}

.save-buttons button:active { background-color: rgba(70, 160, 215, 0.7); }

.save-buttons button.light { background-color: rgb(153, 153, 153); }
.save-buttons button.light:active { background-color: rgba(153, 153, 153, 0.7); }

.save-buttons button.back {
  float: left;
}

td.add_delete_buttons {
  width: 5em;
  text-align: center;
}
td.add_delete_buttons button {
  margin: 0 0.1em;
}
button.add_attachment, button.delete_attachment {
  width: auto;
  padding: 5px 12px;
  color: white;
  border-radius: 5px;
  outline: none;
  border: none;
  font-family: 'Roboto Condensed', sans-serif;
}
button.delete_attachment {
  background-color: #d9534f;
}

button.add_attachment {
  background-color: #2aabd2;
  margin-top: 1em;
}

/* DATA TABLE */
table.data-table {
  border-collapse: collapse;
  display: inline-block;
  vertical-align: text-top;
}

table.data-table td, table.data-table th {
  font-family: monospace;
  font-size: 0.9rem;
  text-align: right;
  padding: 0.25rem;
  border: 1px solid #ddd;
}

table.data-table th {
  text-align: center;
  background-color: rgb(70, 160, 215);
  color: white;
  font-weight: normal;
}

table.data-table tr:nth-child(even) {
  background-color: #fafafa;
}

div.data-graph {
  width: 550px;
  height: 250px;
  display: inline-block;
  vertical-align: text-top;
}

.canvasjs-chart-credit { display: none; }

/* FORM ELEMENTS */
select {
  width: auto !important;
  min-width: 20em;
}
textarea {
  width: 100%;
  height: 8rem !important;
  background-color: #fffffa;
  font-size: 0.8rem;
  margin-bottom: 1.5rem;
}

input[type="text"] {
  width: 100%;
  height: 2rem;
  background-color: #fffffa;
  font-size: 0.8rem;
}

input[type="text"]:disabled {
  display: none;
}
input[type="text"].other {
  margin-top: 1em;
}

.input_error {
  border: 2px solid var(--ctstem-color-red);
}

.assignment_input input[type="radio"], .assignment_input input[type="checkbox"] {
  margin-left: 0.5em;
}

.mc-options {
  margin: 1.5rem;
  line-height: 170%;
}

.image-option {
  display: inline-block;
  padding: 1rem;
}

.image-option img {
  vertical-align: text-top;
  max-width: 400px;
}
img.image_option {
  vertical-align: top !important;
  max-width: 100%;
  width: 20em;
}

/* FIGURES */
figure {
  margin: 1rem 0;
}

figcaption {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  font-style: italic;
  margin: 0.5rem 0;
}


pre.code {
  background-color: #ddd;
  font-family: monospace;
  padding: 1rem;
  width: 70%;
  margin-left: 3rem;
  border: 1px solid #888;
}


/* FIGURES */
figure {
  margin: 1rem 0;
}

figcaption {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  font-style: italic;
  margin: 0.5rem 0;
}

ul.messages {
  font-size: 1.5em;
  top: 45px;
  padding: 0;
}

div.help {
  font-size: 1em;
}

div.referenced_question_container {
  background-color: #ccc;
  padding: 0.01em 1em;
}
div.question_response_feedback {
  margin: 1em 0;
  padding: 1em 2em;
}
 div.referenced_question_response {
  padding: 0em 2em;
 }

div.question_response_feedback.odd, div.referenced_question_response.odd{
  background-color: #f9f9f9;
}
div.question_response_feedback div.feedback {
  margin-top: 1em;
}
div.question_response_feedback div.text,  div.referenced_question_response div.text {
  margin-left: 2em;
}
hr.light {
  border-top:  1px solid #eee;
}

/* LIKERT ITEM SET */
table.likert {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 0.5em;

  /*border-top: 1px solid #888;
  border-bottom: 1px solid #888;*/
}
table.likert:nth-of-type(odd){
  background-color: #eee;
}

table.likert td, table.likert th {
  font-size: 16px;
  font-family: 'Roboto Condensed', sans-serif;
}

table.likert tr:nth-child(even) {
  background-color: #eee;
}

table.likert td {
  padding: 0.5em;
}

td.likert-prompt {
  padding-right: 1.5em;
  padding-bottom: 1em;
  padding-top: 1em;
  vertical-align: middle;
  width: 53%;
}
td.likert-prompt p {
  margin-bottom: 0;
}

td.likert-number {
  vertical-align: middle;
  text-align: left;
  padding: 1em 0.3em;
  width: 5%;
}

table.likert .likert-option {
  font-weight: normal;
  font-size: 0.7em;
  vertical-align: middle;
  width: 7%;
  text-align: center;
  padding: 0.5em;
}

td.likert-option {
  font-size: 1em;
}
td.likert-option input[type="radio"] {
  cursor: pointer;
}

th.likert-instructions {
  font-weight: 700;
  font-style: italic;
  text-align: left;
  vertical-align: top;
  padding: 1.2em 0.5em 1.2em 0;
  width: 58%;
}
a.add_attachment {
  margin-top: 1em;
}

/* BYLINE AND SOCIAL MEDIA */
.byline {
  font-size: 1.1rem;
  font-weight: 300;
  width: 100%;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  line-height: 3rem;
  margin: 2rem 0;
}

.share-box {
  width: auto;
  float: right;
  height: 3rem;
  vertical-align: middle;
}

.share-button {
  background-color: rgb(70, 160, 215);
  display: inline-block;
  font-size: 1.1rem;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  border-radius: 1rem;
  color: white;
  border: none;
  outline: none;
  margin-left: 0.3rem;
}

.share-button:hover { background-color: #999; }
.share-button:active { background-color: red; }

.credits {
  overflow-y: auto;
}

.credits p {
  margin-top: 0.5em;
  margin-bottom: 0.1em;
}

/* UTILITY BUTTONS */
.util-button {
  display: inline-block;
  font-size: 1.4rem;
  width: 2rem;
  height: 2rem;
  text-align: center;
  margin: 0.5rem 0.4rem 0 0;
  background-color: transparent;
  color: black;
}
.util-button:hover { color: rgb(70, 160, 215); }
.util-button:active { color: red; }

/* OVERVIEW */
.overview .lesson_overview_content {
  display: none;
}

.overview a.lesson_overview_link {
  cursor: pointer;
}

/* STANDARDS BOX */
.standards {
  font-family: Helvetica, sans-serif;
  background-color: #eee;
  line-height: 130%;
  font-size: 13px;
  font-weight: 200;
  padding: 1rem;
  margin: 0;
  border: 1px solid #aaa;
  color: #444;
  max-width: 100%;
  width: 80em;
}

.standards hr {
  border-color: #aaa;
}

.standards h3 {
  font-family: sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.5rem 0;
  margin: 0;
}

.standards ul {
  padding-left: 1rem;
  padding-top: 0;
  margin: 0;
}

.standards li {
  padding: 0.3rem 0 0.3rem 0;
  line-height: 150%;
}

input.datepicker {
  background: url(/static/img/calendar.png) no-repeat right center;
  background-size: 30px;
  background-color: #fff !important;
}
img.image_option {
  height: 20%;
  width: 20%;
  vertical-align: top !important;
  cursor: pointer;
}
img.popup_image {
  width: 100%;
  height: auto;
}

span.ec_lessons .fa-caret-square-o-down {
  color: #3e8f3e;
}

span.ec_lessons .fa-caret-square-o-up{
  color: #e38d13;
}

div.print {
  display: none !important;
}

notes, faq {
  display: none;
}

div.teammates {
  margin-bottom: 2em;
}

div.past_due.warning {
  margin-top: 5.5em;
  text-align: center;
}

div.error {
  margin-left: 2em;
}
ul.errorlist {
  font-size: inherit !important;
}

/* hide iframe until fully loaded */
/*iframe {
  position: absolute;
  top: -9999em;
  visibility: hidden;
}*/


/* STYLES FOR NICE PRINTING */
@media print {
  * { font-size: 13px; }

  header { display: none; }

  #side-nav { display: none; }

  textarea { background-color: white; outline: none; border: 1px solid #ddd; }

  main {
    margin-left: 0;
    margin-top: 2em;
  }

  table.likert td, th { font-size: 11px; }

  td.likert-prompt {
    padding: 0.7em 1.5em 0.7em 0;
  }

  td.likert-number {
    padding: 0.7em 0.3em;
  }

  .page  { margin: 0 1em; }

  .standards { font-size: 11px; }

  .save-buttons { display: none; }

  footer {
    background-color: transparent;
    padding: 0;
    margin: 0.5in 0 0 0;
    border-top: 1px solid #999;
  }

  footer p {
    color: black;
    font-size: 11px;
  }

  footer a { color: black; }

  div.print, notes {
    display: block !important;
  }

  activity {
    display: block !important;
  }

  div.comments, div.compatibility, div.next, div.share-box, div.utility {
    display: none !important;
  }
}