//
// Markup Styles
// --------------------------------------------------


// Markup elements
//
//==
.misago-markup {

}


// Media
//
//==
.misago-markup {
  .post-media {
    background-color: @gray-darker;
    margin: (@line-height-computed / 2) 0px;
    overflow: hidden;
    text-align: center;
  }

  .media-border {
    background-color: @gray-darker;
    .box-shadow(0px 0px 8px #000);
    display: inline-block;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    margin-bottom: -5px;

    iframe {
      margin: 0px;
      margin-bottom: -5px;
    }

    .media-thumbnail {
      background-color: @gray-darker;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      width: 853px;
      height: 480px;

      text-align: center;

      a {
        background-color: fadeOut(@gray-darker, 20%);
        border-radius: @border-radius-base;
        display: inline-block;
        margin-top: 159px;
        padding: @font-size-base (@font-size-base * 1.5);

        color: @gray-lighter;
        text-align: center;
        text-shadow: 0px 1px 1px @gray-darker;

        &:hover, &:active {
          color: @gray-lighter;
          text-decoration: none;
          text-shadow: 0px 0px 5px @gray-lighter,
                       0px 1px 1px @gray-darker;
        }

        .fa {
          display: block;
          clear: both;

          font-size: @font-size-base * 8;
          text-decoration: none;
        }

        &.movie-title {
          margin-top: 164px - @font-size-base - 4px;

          strong {
            display: block;
            margin-top: 6px;

            font-size: @font-size-large;
          }
        }
      }
    }
  }
}