.wwinterview_list {
  .wwi_question {
    margin-bottom: $gutter;
    position: relative;

    &:before {
      @include svgpseudoelem('sprites-bubble_arrow_top_left');

      position: absolute;
      top: -8px;
      left: -32px;
    }

    .bg_wrap {
      padding: $gutter $gutter 3*$gutter $gutter;
      @include border-gradient;
      @include background-gradient-bright;
      position: relative;
      z-index: 2;
      @include clearfix;
    }

    .richtext {
      font-style: italic;

      &:before {
        content: "»";
      }

      &:after {
        content: "«";
      }
    }

    .votes {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 3px;
      font-size: .9em;
      text-align: center;
    }

    .wwi_vote_up,
    .wwi_vote_down {
      @extend %corner_button;

      &:hover,
      &:focus,
      &:active {
        text-decoration: none;
      }
    }

    .wwi_vote_up {
      right: 0;
      border-right: 0;
      line-height: svg-height($svg-sprite__icons, 'sprites-icon_vote-up');

      &:before {
        @include svgpseudoelem('sprites-icon_vote-up');
        position: static;
        vertical-align: middle;
        margin-right: 5px;
        margin-top: -3px;
      }

      &.active {
        background: $color-accent-contrast;
        color: $text_white;

        &:before {
          @include svgpseudoelem('sprites-icon_vote-up_inv');
          position: static;
        }
      }
    }

    .wwi_vote_down {
      left: 0;
      border-left: 0;
      font-size: .9em;

      &:before {
        @include svgpseudoelem('sprites-icon_vote-down');
        position: static;
        vertical-align: middle;
        margin-right: 5px;
      }

      &.active {
        background: $color-accent-contrast;
        color: $text_white;

        &:before {
          @include svgpseudoelem('sprites-icon_vote-down_inv');
          position: static;
        }
      }
    }
  }
}