.e2-note,
.e2-note-list,
.e2-note-splitter {
  margin: 0 0 60px;
}

.e2-note h1 {
  transition-property: (font-size, line-height);
  transition-duration: var(--time);
  transition-timing-function: ease-out;
  color: var(--headingsColor);
  font-size: var(--noteTitleFontSize);
  line-height: var(--noteTitleLineHeight);
  font-weight: bold;
  max-width: 720px;
  margin: 0 0 8px;
  padding-right: 25px;
  word-break: break-word;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.e2-note h1 a,
.e2-note h1 a:visited {
  color: var(--headingsColor);
  border-color: var(--headingsUnderlineColor);
}

.e2-note h1 a:hover,
.e2-note h1 a.hover {
  color: var(--hoverColor);
  border-color: var(--hoverUnderlineColor);
}

.e2-nonpublic-label {
  display: table-cell;
  font-family: var(--smallFontFamily);
  font-size: var(--smallFontSize);
  line-height: var(--smallLineHeight);
  font-weight: normal;
  border-radius: 3px;
  background: var(--headingsColor);
  color: var(--backgroundColor);
  padding: 1px 5px;
  position: relative;
  top: -2px;
}

.e2-note-favourite-title:after {
  content: '★';
  position: absolute;
  display: inline-block;
  margin-left: .33em;
  margin-top: .07em;
  font-size: 80%;
}

.e2-note .admin-links-floating {
  margin-top: -3px;
  z-index: 100;
  transition-property: (margin-top);
  transition-duration: .25s;
  transition-timing-function: ease-out;
  background: var(--backgroundColor);
  padding: 5px 0 5px 8px;
  border-radius: 30px 0 0 30px;
}

.e2-note-author-picture img {
  width: 40px;
  height: 40px;
  border-radius: 20px; 
}

.e2-note-author-name {
  font-size: var(--noteTextFontSize);
  line-height: var(--noteTextLineHeight);
  color: var(--boldColor);
  font-weight: bold;
  margin: 0 0 4px 0;
}

.e2-note-text {
  font-size: var(--noteTextFontSize);
  line-height: var(--noteTextLineHeight);
  margin: 0 0 16px 0;
}

.e2-note-text p,
.e2-note-text ul,
.e2-note-text ol,
.e2-note-text li,
.e2-note-text blockquote,
.e2-note-text table {
  font-family: var(--noteMainFontFamily);
}

.e2-note-likes {
  font-size: 0;
  margin: 0 0 10px 0;
}

.e2-follow-button,
.e2-follow-button:visited {
  display: none;
}

.e2-follow-button-visible {
  display: inline-block;
}

.e2-note-follow-button,
.e2-note-follow-button:visited {
  background: var(--followButtonBackground);
  color: var(--followButtonTextColor);
  transition: background var(--time) ease-out, color var(--time) ease-out, fill var(--time) ease-out;
  line-height: 20px;
  font-size: 14px;
  border-radius: 3px;
  border: 0;
  height: 22px;
  margin: 0 10px 10px 0;
  vertical-align: top;
  padding: 1px 8px;
}

.e2-note-follow-button:hover,
.e2-note-follow-button.hover {
  background: var(--followButtonHoverBackground);
  color: var(--followButtonTextColor);
}

.e2-note-meta {
  margin: 0 0 6px 0;
  font-size: var(--smallFontSize);
  line-height: var(--smallLineHeight);
  font-family: var(--smallFontFamily);
}

.e2-note-meta mark {
  border-radius: .2em;
  padding-bottom: .1em;
}

.e2-note-publish-preview {
  max-width: 480px;
  background: var(--sheetBackgroundColor);
  border-radius: var(--borderRadius);
  padding: 12px;
  margin-bottom: 24px;
}

.e2-note-publish-preview .e2-note-thumbs {
  white-space: nowrap;
  overflow: scroll;
  -ms-overflow-style: none;
}

.e2-note-publish-preview .e2-note-thumbs::-webkit-scrollbar {
  display: none;
}

@media #{$AreFormsVertical} {
  .e2-note-publish-preview {
    width: 100%;
  }
}

.e2-note-snippet {
  margin: 0 0 40px;
  font-size: var(--noteTextFontSize);
  line-height: var(--noteTextLineHeight);
}

.e2-note-snippet:last-child {
  margin: 0;
}

.e2-note-snippet h1 {
  color: var(--headingsColor);
  font-size: 100%;
  line-height: inherit;
  font-weight: bold;
  max-width: 720px;
  padding-right: 25px;
  margin: 0;
  word-break: break-word;
  word-wrap: break-word;
}

.e2-note-snippet h1 a,
.e2-note-snippet h1 a:visited {
  padding-top: .4em; // unified hover with thumbs
  color: var(--headingsColor);
  border-color: var(--headingsUnderlineColor);
}

.e2-note-snippet h1 a:hover,
.e2-note-snippet h1 a.hover {
  color: var(--hoverColor);
  border-color: var(--hoverUnderlineColor);
}

.e2-note-snippet p {
  max-width: 720px;
  margin: 0 0 4px 0;
}

.e2-note-thumbs {
  padding-bottom: 4px;
  margin: 0;
}

.e2-note-thumb {
  display: inline-block;
  // width: 80px;
  // height: 80px;
  // background: center no-repeat;
  // background-size: cover;
  margin: 0 4px 4px 0;
  vertical-align: bottom;
}

.e2-note-thumb img {
  display: block;
}

.e2-note-thumb-dimmed {
  opacity: .4;
}

.e2-note-visibility-toggle {
  margin: 0 0 20px;
}

.e2-note-hidden h1,
.e2-note-hidden article,
.e2-note-hidden .e2-text h2,
.e2-note-hidden .e2-text h3,
.e2-note-hidden .e2-text b,
.e2-note-hidden .e2-text  .loud,
.e2-note-hidden .e2-note-snippet-text {
  color: var(--disabledColor);
}

.e2-note-list .e2-note-hidden {
  opacity: .2;
}