h2 {
  font: oblique 24px/24px georgia;
  float: left;
  margin: 0 10px 5px 0;
  margin-bottom: 5px;
}

h2.red {
  font: 28px/35px georgia, times, serif;
  float: left;
  margin: 0 8px 3px 0;
}

h2.red a {
  color: #9c0000;
}

h2.red a:hover {
  text-decoration: underline;
}

a.see-all {
  color: blue;
  display: block;
  font-size: 14px;
  line-height: 28px;
}

a.see-all:hover {
  color: blue;
}

h3 {
  color: #444;
  font: normal 28px/35px georgia, serif;
  margin: 0 0 8px 8px;
}

h3 .count {
  color: #444;
  font-size: 21px;
}

h4 {
  color: #444;
  font: 600 26px/24px "helvetica neue", arial, sans-serif;
  /*	font: oblique 28px/28px georgia, serif;*/
  float: left;
  margin: 10px 0 4px 0;
  padding: 0 0 8px 0;
}

.submit {
  padding: 5px 10px;
}

a.follow.button {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #333;
  cursor: pointer;
  display: block;
  float: left;
  font-size: 14px;
  line-height: 28px;
  margin: 2px 0 0 10px;
  padding: 0;
  text-align: center;
  width: 80px;
}

a.follow.button:hover {
  background-color: #e8f3fc;
  border-color: #cdd3da;
  color: blue;
}

a.following.button {
  background: #d6ebb6;
  border-color: #a3bb7e;
}

a.following.button:hover {
  background: #bb1b20;
  border-color: #8e090d;
  color: #fff;
}

a.follow.button span,
a.follow.button.following span.text-follow,
a.follow.button.following:hover span.text-following {
  display: none;
}

a.follow.button span.text-follow,
a.follow.button.following span.text-following,
a.follow.button.following:hover span.text-unfollow {
  display: block;
}

a.follow.button span.text-following {
  font-size: 13px;
}

.user-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

#user-sidebar {
  margin-top: 16px;
  max-width: 200px;
  width: 25%;
  float: left;
  margin: 10px 10px 10px 10px;
  z-index: 2;
  position: relative;
}

#user-sidebar .avatar {
  cursor: pointer;
  display: block;
  overflow: hidden;
  margin-bottom: 0;
  height: 200px;
}

#user-sidebar .avatar.missing {
  background: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 5px 5px 0 0;
  height: 155px;
}

#user-sidebar .avatar.missing p {
  color: #777;
  cursor: pointer;
  display: block;
  font: normal 1.8em/1.3 georgia, serif;
  margin-top: 25px;
  padding: 0 20px;
  text-decoration: none;
  text-align: center;
}

#user-sidebar .settings.avatar {
  border-bottom: 1px solid #ccc;
  margin: 0 0 10px 0;
  height: 160px;
}

#user-sidebar .avatar-name {
  background: #f7f7f7;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  -moz-border-radius: 0 0 5px 5px;
  border: 1px solid #bbb;
  border-top: 0 none;
  clear: both;
  /*		color: #9C0000;*/
  color: #333;
  display: block;
  font: 600 16px/32px arial, sans-serif;
  margin: 0 0 10px 0;
  text-align: center;
}

#user-sidebar .avatar-name.noimage {
  background: transparent;
  border: 0 none;
  text-align: left;
  padding-top: 8px;
}

#user-sidebar .avatar-name.active {
  color: #555;
}

#user-sidebar .avatar-name:hover {
  color: blue;
}

.userimage {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  -moz-border-radius: 5px 5px 0 0;
  cursor: pointer;
  display: block;
}

#user-sidebar .settings.avatar img,
#user-sidebar .avatar.missing img {
  display: block;
  margin: 0 auto;
}

#user-sidebar h3 {
  border-bottom: 1px solid #ccc;
  clear: both;
  color: #111;
  font: 600 12px/21px arial;
  margin: 0 0.5em 0.5em 0;
  padding: 1.5em 0 0.25em 0;
  text-transform: uppercase;
}

#user-sidebar li {
  list-style-type: none;
  margin: 0;
  line-height: 18px;
}

#user-sidebar li.number {
  float: left;
  margin: 0 2.8% 0 0;
  padding: 0;
  width: 31%;
}

#user-sidebar li.user-likes {
  margin-right: 0;
}

#user-sidebar li.number a {
  background: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: block;
  padding: 4px 0 4px 8px;
}

#user-sidebar li.number .count {
  color: #333;
  clear: both;
  display: block;
  font-size: 14px;
  font-weight: 800;
}

#user-sidebar li.number .active {
  border-color: blue;
}

#user-sidebar li.number a:hover .count,
#user-sidebar li.number .active .count {
  color: blue;
}

#user-sidebar .active {
  color: blue;
}

#user-sidebar a {
  color: #222;
  font-size: 14px;
  word-break: break-word;
}

#user-sidebar a .count {
  color: #999;
}

#user-sidebar .active a,
#user-sidebar a:hover {
  color: blue;
}

#user-sidebar ul {
  margin-bottom: 0;
}

#user-sidebar li.settings-link {
  margin-bottom: 14px;
}

#user-sidebar .collections li {
  display: block;
  padding: 0;
  margin-bottom: 0.5em;
}

#user-sidebar .sidebar-collection {
  margin-left: 0;
}

#user-sidebar .no-collections {
  clear: both;
  color: #555;
  font-size: 13px;
  line-height: 16px;
  padding: 0 30px 35px 0;
}

#user-sidebar .no-collections a {
  border-bottom: 1px solid #aaa;
  color: #777;
  clear: both;
  display: block;
  float: left;
  font-size: 12px;
  margin: 8px 0 0 0;
  line-height: 12px;
}

#user-sidebar .no-collections a:hover {
  color: blue;
}

#user-main {
  max-width: 760px;
  width: 70%;
  float: left;
  margin-top: 16px;
  margin-left: 15px;
}

.newsletter-iframe {
  all: unset;
  width: 100%;
  height: 300px;
  margin: -5%;
  z-index: 1;
  position: relative;
}

.usericon {
  margin: 0 0 5px 0;
  border: solid 1px #ccc;
  vertical-align: middle;
}

#aboutme {
  line-height: 1.4;
  position: relative;
  max-width: 760px;
  width: 100%;
}

#aboutme .location {
  color: #666;
  float: left;
  font: 15px georgia, times, serif;
  margin: 0 12px 0 0;
}

#aboutme .website {
  background: #f1f1f1;
  border-radius: 4px;
  display: none;
  padding: 8px 10px;
  position: absolute;
  top: 0;
  top: 60px;
  right: 10px;
  right: 0;
  max-width: 150px;
}

#aboutme .website .cw-label {
  color: #555;
  font: 11px/14px arial, sans-serif;
}

#aboutme .website a {
  color: #333;
  cursor: pointer;
  display: block;
}

#aboutme ul {
  font-size: 11px;
  margin-top: 5px;
}

#aboutme p {
  clear: both;
  margin-bottom: 10px;
}

.about-text {
  clear: both;
  padding: 10px 0 18px 0;
  max-width: 700px;
  width: 100%;
}

.favorite-cats {
  clear: both;
  color: #666;
  font: 15px/16px georgia, times, serif;
  margin: 0;
  padding: 0;
}

.favorite-cats strong {
  font-size: 14px;
  font-style: oblique;
  font-weight: 400;
  margin: 0 8px 0 0;
}
.favorite-cats a {
  color: #222;
  margin: 0 8px 0 0;
}

.posts-across {
  /*	background: #f1f1f1;
	border: 1px solid #eee;
	border-radius: 8px;*/
  clear: both;
  margin: 0;
  /*	padding: 10px 14px;*/
}

.posts-across .story-list .see-all {
  display: none;
}

#user-home {
  clear: both;
  float: left;
  width: 70%;
}

.thumbs-list {
  clear: both;
  display: block;
  margin: 0 0 40px 0;
}

.thumbs-list .story-fav {
  display: block;
  float: left;
  margin-right: 6px;
  margin-top: 6px;
}

.story-fav img {
  width: 57px;
  height: 57px;
}

#user-home-right {
  float: left;
  width: 25%;
  margin-left: 10px;
}

#user-home-right .see-more {
  color: blue;
  margin-top: 8px;
}

.user-cta {
  /* big call-to-action on user's own profile */
  clear: both;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 7px;
}

.helplinks {
  margin: 5px 0 15px 0;
  text-align: center;
}

.following-user {
  padding: 5px 0;
  overflow: hidden;
  font-size: 12px;
  border-bottom: 1px solid #e1e1e1;
}
.following-user img {
  float: left;
  vertical-align: middle;
  margin-right: 5px;
}

.story-list-user {
  margin-left: -5px;
}

.thumbs-list.user-loves,
.thumbs-list.user-likes {
  margin-right: 50px;
}

/* story activity stream */
.latest-stream {
  float: left;
}

.latest-stream li {
  /*#sub-content .latest-stream li {*/
  list-style: none;
  vertical-align: middle;
  overflow: hidden;
  font-size: 11px;

  margin: 0;
  margin-bottom: 20px;

  zoom: 1;
}

a.see-more-posts {
  display: block;
  margin: -24px 0 0 0;
}

.comments-box {
  margin-top: 0;
  margin-bottom: 50px;
  word-wrap: break-word;
}

.comments-box h2 {
  margin-bottom: 14px;
}

.latest-stream .comment-img {
  margin: 5px 0 0 0;
  float: left;
}

.latest-stream .comment-img img {
  border-radius: 4px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}

.latest-stream .comment-body {
  border: 1px solid #e1e1e1;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #000;
  display: block;
  margin: 0 25px 0 49px;
  padding: 8px 12px 10px 18px;
  min-height: 55px;
  white-space: pre; /* CSS 2.0 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3.0 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: -moz-pre-wrap; /* Mozilla */
  word-wrap: break-word; /* IE 5+ */
}

.latest-stream .comment-body:hover {
  background: #f1f1f1;
}

.latest-stream .comment-title {
  color: #555;
  display: block;
  margin: 2px 15px 0 40px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 204px;
}

.see-more {
  display: block;
  text-align: center;
}

.time-ago,
.story-timestamp {
  color: #999;
  font: 11px arial, helvetica, sans-serif;
}
.time-ago a {
  color: #779;
}

#usersettings h3 {
  margin-bottom: 20px;
}

#usersettings .cw-label {
  margin-top: 8px;
}

/* for the user page list */
#contentContainer .latest-stream {
  width: auto;
}

/* newsletter management */
#subscriptions-tbl .subscription-actions {
  text-align: right;
}

#collection-title-input,
#collection-description-input {
  border: 1px inset;
}
#collection-title-input {
  width: 300px;
  padding: 5px;

  font-size: 24px;
}
#collection-description-input {
  display: block;
  width: 690px;
  padding: 10px;
  margin: 1em 0;

  font-size: 16px;
}

#collection-actions {
  background: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 8px;
  float: right;
  font-size: 16px;
  margin: -28px 86px 0 0;
  padding: 4px 10px 8px 10px;
}

#collection-title-wrapper form,
#collection-actions form {
  display: inline;
}

#collection-share {
  margin-left: 2em;
  margin-top: 14px;
}

@media screen and (max-width: 508px) {
  #collection-share {
    margin-left: 0;
  }
}

#collection-share .email-link {
  margin-top: -4px;
  margin-right: 20px;
}

#collection-description {
  max-width: 690px;
  width: 100%;
  margin-bottom: 1em;

  /*	font-size: 16px;*/
  line-height: 1.4em;
}

#user-main .story-list {
  display: flex;
  width: 100%;
  overflow: hidden;
  flex-wrap: wrap;
}

#user-main .story-list .clear {
  clear: none;
}

/*#user-main .story-list-user .clear {
	clear: both;
}*/

.story-list-user {
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.story-list-user .img-preview {
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  flex: none !important;
}

#collection-edit-form {
  margin-bottom: 1em;
}

.following-box,
.followers-box {
  border: 1px solid #eee;
  border-radius: 4px;
  margin: 14px 0 10px 0;
  padding: 0 10px 10px 10px;
}

.following-box h3,
.followers-box h3 {
  font-size: 21px;
  margin: 0;
  padding: 5px 0 0 0;
}

.comments-box {
  clear: both;
  margin: 20px 0 0 0;
}

.latest-stream.comments {
  clear: both;
  float: none;
  width: 100%;
}

.latest-stream.comments li {
  float: left;
  width: 50%;
}

/* emptyness problem */

.no-activity-message {
  color: #333;
  clear: both;
  font-size: 15px;
  padding: 0;
}

#user-home .no-activity-message {
  padding-top: 8px;
}

.no-activity-message a {
  color: blue;
}

.empty-message {
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
  font-size: 15px;
}

.empty-message.no-newsletters {
  padding-top: 10px;
}

/* duplicated from story.css */

.post-one {
  color: #22376f;
  color: #bbb;
  cursor: pointer;
  display: block;
  font-family: georgia, serif;
  font-size: 1.4em;
  font-style: normal;
  line-height: 1.3;
  text-decoration: none;
  text-align: center;
}

.post-one span {
  -webkit-border-radius: 4px;
  display: block;
  background: #fff;
  border: 1px solid #ddd;
}

.post-one:hover span {
  border-color: blue;
  color: #777;
}

#post-one-116 span {
  font-size: 16px;
  margin-bottom: 37px;
  padding: 25px 20px 0 20px;
  height: 90px;
}

@media screen and (max-width: 760px) {
  .newsletters--wrapper .left {
    width: 100% !important;
    margin-left: 0 !important;
  }

  #user-home {
    width: 100%;
    max-width: 100%;
  }

  #user-home-right {
    width: 100%;
    margin-left: 0;
  }

  .following-box,
  .followers-box {
    margin-right: 25px;
  }

  .newsletters--wrapper #user-sidebar,
  .newsletters--wrapper #user-main,
  .modern--wrapper #user-sidebar,
  .modern--wrapper #user-main {
    width: 100%;
    margin: 0;
  }

  #user-sidebar {
    max-width: 760px;
    width: 100%;
    margin: 10px 5px 10px 15px;
  }

  #user-main {
    width: 100%;
    margin: 10px 0px 10px 9px;
  }

  #user-sidebar .avatar-name {
    border-radius: 5px;
    margin-top: 10px;
    border: 1px solid #bbb;
  }

  #user-sidebar .userimage {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin: 0 auto;
  }

  #usersettings > .left {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

@media screen and (max-width: 460px) {
  .latest-stream.comments li {
    width: 100%;
  }
}

.modern--wrapper,
.newsletters--wrapper {
  overflow: hidden;
  padding: 0 15px;
}

@media screen and (max-width: 750px) {
  .user-breadcrumbs-mobile h2 {
    font-size: 16px;
    float: none;
    text-align: center;
  }

  .user-breadcrumbs-mobile h2 span {
    color: #444;
  }

  .user-breadcrumbs-desktop,
  .collection-title-desktop {
    display: none;
  }

  .collection-title-mobile h4 {
    width: 100%;
    float: none;
    text-align: center;
  }
}

@media screen and (min-width: 750px) {
  .user-breadcrumbs-mobile,
  .collection-title-mobile {
    display: none;
  }
}