/** default detail **/
.web-wrapper-detail {
  //&:extend( .border-main-box );
  header h1 {
    font-weight: bold;
    margin: 10px 5px;
  }
  .web-wrapper-detail-wrapper {
    &:extend( .text-back-image );
    min-height: @_poll_detail_section_min_height;
    .wrapper-detail-title {
      padding: 10px;
      h4 {
        color: darken(@df_background_color, 60%);
        line-height: 25px;
        font-size: 18px;
      }
    }
    .web-detail-chart {
      min-height: 180px;
      .web-chart-wrapper-default .web-chart {
        min-height: 300px;
      }
    }
    .web-detail-answer-wrapper {
      &:extend( .web-generic-detail-answer-wrapper );
    }
    .web-buttdon-wrapper {
      padding: 5px;
      text-align: center;
    }
  }
}

.web-tweetpoll-detail {
  .web-tweetpoll-answer-answer {
    float: left;
    width: 545px;
    .header-answers {
      >div {
        float: left;
        font-weight: 500;
        font-size: 14px;
        width: 181px;
        padding: 10px 0;
        text-transform: uppercase;
        color: darken(@df_background_color, 60%);
        text-align: center;
      }
      .answer-label {
        //text-align: left;
      }
      .answer-votes {

      }
      .answer-percent {
        //text-align: left;
      }
    }
  }
}

.web-tweetpoll-detail, .web-poll-results {
  &:extend( .non-margin );
  &:extend( .main-shadow-box );
  .container {
    padding: 0px;
  }
}

.web-tweetpoll-detail .question {
  &:extend( .non-margin );
}

.web-tweetpoll-detail .web-tweetpoll-answer-wrapper {
  &:extend( .o-hidden );
}

.web-tweetpoll-detail .chart-tweetpoll-wrapper {
  min-height: 300px;
}

.web-tweetpoll-detail .web-tweetpoll-answer-wrapper .web-tweetpoll-answer-chart {
  &:extend( .col-left );
  min-height: 180px;
  width: 395px;
}

.web-tweetpoll-answer-wrapper .span6:first-child {
   text-align: center;
}
/*
     tweetpoll detail answers
*/
 .web-tweetpoll-answer-wrapper .web-tweetpoll-answer-answer {
    &:extend( .web-generic-detail-answer-wrapper );
}


.web-wrapper-detail {
  .hashtag-invert {
    a {
      text-decoration: none !important;
    }
    .label {
      background-color: transparent;
      color: darken(@df_background_color, 60%);
      border: 1px solid darken(@df_background_color, 20%);
      text-shadow: none;
    }
  }
  .hashtag-detail-group {
    padding: 10px;
    text-align: right;

  }
  .group-answers {
    .answer {
      clear: both;
      &:extend( .o-auto );
      font-size: 14px;
      color: @gray_normal;
      padding: 5px;
      text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
      > div {
        &:extend( .col-left );
        width: 150px;
        text-align: center;
      }

      .answer-color {
        line-height: 20px;
        &:extend( .padding );
        text-align: left;
        > span {
          margin-left: 10px;
          &:extend( .col-left );
        }
        a {

        }
      }

      .answer-color > div, .color-code {
        .border-radius(10px);
        display: inline-block;
        height: 20px;
        margin-right: 10px;
        &:extend( .opacity-lite );
        width: 20px;
        &:extend( .col-left );
      }

      .answer-votes {
        line-height: 20px;
        padding: 10px;
      }

      .answer-percent {
        line-height: 20px;
        &:extend( .padding );
      }
    }
  }
}
