/* 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 {
  /* Some of this is copied from the jQuery UI style, forcing those styles to apply to this selector. Without it, if your cursor is placed above a button while it's appearing, the CSS from jQuery UI won't immediately be applied. */
  border-radius: 0;
  height: 2.4em;
  border: 1px solid #d9d9d9;
  background: white;
  font-weight: normal;
  color: #404040;
}

.hallotoolbar button:hover {
  border: 1px solid #49c0c1;
  background: #43b1b0;
  font-weight: normal;
  color: white;
}

.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.200em;
  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;
  }
}
