/* paths */
/* We can't use absolute paths here, because those are dependent on Django's
STATIC_URL setting. However, django-compressor consistently places the compiled
CSS into ${STATIC_URL}/CACHE/css/ regardless of compilation mode, so we can
reliably use relative paths to get back to STATIC_URL. */
/* grid settings */
/* screen breakpoints */
/* 800px */
/* 900px */
/* 1200px */
/* 1600px */
/* colours */
/* darker to lighter */
/* misc sizing */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }
  .visuallyhidden:active, .visuallyhidden:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto; }

.visuallyvisible {
  clip: none;
  height: auto;
  width: auto;
  margin: auto;
  overflow: visible;
  position: initial; }

.hallotoolbar {
  position: absolute;
  z-index: 5;
  margin-top: 4em;
  margin-left: 1.2em; }
  .hallotoolbar.affixed {
    position: fixed;
    margin-top: 0; }

/* full is added to hallotoolbar when invoked on a field set to the full layout style */
.hallotoolbar.full {
  margin-left: 20px; }

/* stream-field is added to hallotoolbar when invoked on a field within a stream-field */
.hallotoolbar.stream-field {
  margin-top: -1em;
  margin-left: 0; }
  .hallotoolbar.stream-field.affixed {
    margin-top: 0; }

.hallotoolbar button {
  border-radius: 0;
  height: 2.4em; }

.richtext {
  font-family: Bitter, Georgia, serif;
  padding-top: 4em;
  min-height: 50px;
  overflow: hidden;
  line-height: 1.5em;
  /* Resetting various html tags that have been messed with by Wagtail's main css */
  /* Delete controls on embedded blocks with contenteditable="false" */
  /* Set some reasonable default heading styles. These can be overridden in site-specific custom CSS
    to make them better reflect their appearance on the front-end (however, it's arguably better for editors
    NOT to be thinking about a specific visual appearance when they choose heading levels...) */
  /* shouldn't be used */
  /*
    These styles correspond to the image formats defined in wagtailimages/formats.py,
    so that images displayed in the rich text field receive more or less the same
    styling that they would receive on the site front-end.

    Wagtail installations that define their own image formats (in a myapp.image_formats module)
    should ideally use the insert_editor_css hook to pass in their own custom CSS to have those
    images render within the rich text area in the same styles that would appear on the front-end.
    */ }
  .richtext h1 {
    text-transform: none; }
  .richtext h2 {
    text-transform: none;
    display: block !important; }
  .richtext h1 span {
    font-weight: normal;
    color: inherit; }
  .richtext *:before, .richtext *:after {
    display: none; }
  .richtext ol, .richtext ul {
    margin: 1em 0;
    padding: 0 0 0 40px; }
  .richtext li {
    display: list-item !important; }
  .richtext ul li {
    list-style-type: disc !important; }
  .richtext ol li {
    list-style-type: decimal !important; }
  .richtext .rich-text-deletable {
    position: relative; }
    .richtext .rich-text-deletable a.delete-control {
      position: absolute;
      right: 0;
      cursor: pointer;
      display: none; }
      .richtext .rich-text-deletable a.delete-control:before {
        background-color: rgba(255, 255, 255, 0.8); }
      .richtext .rich-text-deletable a.delete-control:hover:before {
        background-color: white; }
  .richtext.inEditMode .rich-text-deletable a.delete-control {
    display: block; }
  .richtext h1, .richtext h2, .richtext h3, .richtext h4, .richtext h5, .richtext h6 {
    font-family: inherit; }
  .richtext h2 {
    font-size: 2em;
    line-height: 1.2em;
    clear: both; }
  .richtext h3 {
    font-size: 1.7em;
    line-height: 1.194em; }
  .richtext h4 {
    font-size: 1.5em;
    line-height: 1.267em; }
  .richtext h5 {
    /* used for large body text, not really heading */
    font-size: 1.2em;
    line-height: 1.278em; }
  .richtext hr {
    border-bottom: 1px solid #ccc;
    border-top: none;
    border-left: none; }
  .richtext .richtext-image {
    margin-top: 3px;
    /* close as possible to match line-height space above p */ }
    .richtext .richtext-image img {
      width: 100%; }
    .richtext .richtext-image figcaption {
      display: block;
      width: 100%;
      text-align: left;
      margin-top: 16px;
      margin-bottom: 16px; }
    .richtext .richtext-image.small {
      max-width: 45%; }
    .richtext .richtext-image.left {
      float: left;
      margin-right: 16px; }
    .richtext .richtext-image.right {
      float: right;
      margin-left: 16px; }

@media screen and (min-width: 50em) {
  .hallotoolbar.full {
    margin-left: 50px; } }
