* {
  word-wrap: break-word;
  word-break: break-word;
}

html {
  padding: 0;
  margin: 0;
}

body {
  padding: 6px;
  margin: 0;
}

.content {
  width: 98%;
  margin: 0;
  padding: 0;
  margin-bottom: 6px;
}

.header {
  width: 100%;
  height: 24px;
  padding: 3px;
  margin: 0;
}

.header .avatar {
  height: 24px;
  width: auto;
  float: left;
}

.header .sender {
  font-weight: bold;
  padding-left: 3px;
}

.header .timestamp {
  float: right;
  font-style: italic;
  margin-right: 3px;
}

.message, .status {
  padding: 3px;
  width: 100%;
}

.status {
  font-style: italic;
  color: #939373;
}

div.action.message {
  font-style: italic;
}

.actionMessageUserName {
  display: inline;
}

.actionMessageUserName::before {
  content: " * ";
}

.actionMessageUserName::after {
  content: " ";
}

div.message.action span.message::before {
  content: " * ";
}

.actionMessageBody::before,
.actionMessageBody::after {
  content: " ";
}

::selection {
  background: #4a90d9;
}
