/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */

.eb-blockquote{
  margin: 20px auto 40px;
  max-width: 100%;
  height: auto;
  overflow: hidden;

   -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;

  &-info{
     width: 200px;
     float: right;
     position: relative;
     margin-top: 15px;
  }

  &-avatar{
     width: 50px;
     height: 50px;
     overflow: hidden;
     float: left;
     margin-right: 15px;

     img{
        width: 50px;
        height: auto;

        &.round{
           border-radius: 200%;
        }
     }
  }

  &-profile{
     float: left;
     width: 130px;
     height: auto;
     overflow: hidden;
     text-align: left;

     &-name{
        margin: 0;
     }
  }

  &-button{
     padding: 0;
  }

  &-name{
     display: block;
     margin: 0 !important;
  }

  &-content{
     padding: 10px 0 20px;

     blockquote{

        &.eb-blockquote-detail{
           padding: 0 50px;
           border: none;
           font-family: "georgia";
           position: relative;
        }
        &:before,
        &:after{
            display: block;
            line-height: 1;
            font-size: 4em;
            position: absolute;
            color: #ddd;
            font-family: "georgia";
        }

        &:before {
            content: "\201C";
            left: 5px;
            top: 0;
        }

        &:after {
            content: "\201D";
            right: 5px;
            bottom: -50px;
        }
     }
  }

  &.center{
      .eb-blockquote-info{
         float: none;
         margin: 45px auto;
      }
  }

  &.right{
      .eb-blockquote-info{
         float: left;
         margin: 25px auto;
      }
  }
}