/**
 ******************************************************
 ******************************************************
 * {LESS} :: HELP CENTER :: (upplication, 2016)
 ******************************************************
  *****************************************************
 */

@import "../base/_common.less";


#help-center {
  margin-top: 6em;

  .help-center-grid {
    .centered;
  }

  // Items List
  .collection {

    // Item
    .collection-item {
      line-height: 30px;

      .circle {
        font-size: 18px;
        line-height: 42px;
        color: @dark-lilac;
        background-color: @light-lilac;
        text-align: center;
        position: absolute;
        width: 42px;
        height: 42px;
        overflow: hidden;
        top: 2px;
        left: 15px;
        display: inline-block;
        vertical-align: middle;
        border-radius: 50%;
      }

      a,
      span {
        display: block;
        min-width: 500px;
        font-size: 16px;
        font-weight: 600;
        .ellipsis;
      }

      span {
        color: @black;
      }

      a {
        color: @main-green;

        &:hover {
          color: darken(@main-green, 10%);
        }

        i.fa {
          font-size: 6px;
          color: @main-green;
          padding-right: 10px;
          position: relative;
          bottom: 4px;
        }
      }
    }
  }
}


/* ... MEDIA QUERIES ... */

@media only screen and (max-width : 340px) {
  #help-center .collection .collection-item {
    padding-left: 20px;

    .circle {
      display: none;
    }

    a,
    span {
      min-width: 240px;
    }
  }
}