.matrix-live-main {
  max-width: 700px;
}

.matrix-live-loading {
  font-size: smaller;
  text-align: right;
  color: #918e91;

  padding: 4px;
  margin: 10px;

  border-style: solid;
  border-color: #918e91;
  border-width: 1px;
  border-radius: 6px;
}


.matrix-live-loading-error {
  color: #ff686e;
}


.matrix-live-error {
  border-bottom-style: solid;
  border-bottom-color: #aeabac;
  border-bottom-width: 2px;

  padding-bottom: 30px;
  margin: 10px;

  color: #ff686e;
}

.matrix-live-entry {
  border-bottom-style: solid;
  border-bottom-color: #aeabac;
  border-bottom-width: 2px;

  padding-bottom: 30px;
  margin-left: 10px;
  margin-right: 10px;
}

.matrix-live-new {
  -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 1s; /* Firefox < 16 */
  -ms-animation: fadein 1s; /* Internet Explorer */
  -o-animation: fadein 1s; /* Opera < 12.1 */
  animation: fadein 1s;
}

.matrix-live-entry-body {
  margin-top: 10px;
  margin-bottom: 10px;
}

.matrix-live-entry-body p {
  margin-bottom: 5px;
}

.matrix-live-entry-body img {
  max-width: 100%;
}


.matrix-live-entry-inline-viewer {
  text-align: center;
}


.matrix-live-entry-image {
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
}


.matrix-live-entry-image img {
  max-width: 100%;
}


.matrix-live-entry-video {
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
}

.matrix-live-entry-video video {
  max-width: 100%;
}


.matrix-live-entry-file {
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
}


.matrix-live-entry-file svg {
  width: 32px;
  max-width: 20%;
  margin-right: 16px;
  vertical-align: middle;
}


.matrix-live-entry-author {
  font-size: small;
  color: #ffffff;
  display: inline;
  float: left;

  border-radius: 2px;
  background: #918e91;
  padding: 2px;
}

.matrix-live-entry-time {
  font-size: small;
  color: #ffffff;
  display: inline;
  float: right;

  border-radius: 2px;
  background: #918e91;
  padding: 2px;
}

.matrix-live-footer {
  text-align: right;
  font-size: smaller;

  padding: 4px;

  margin-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;

  border-style: solid;
  border-color: #918e91;
  border-width: 1px;
  border-radius: 6px;
}

.matrix-live-footer a {
  color: #918e91;
}



/* Fadein setup */

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}