#trakt
{
  > .inner {
    margin-top: -5px;
  }

  .overview {
    color: #ccc;
  }

  .overview strong {
    color: #fff;
  }

  h3 {
    color: #eee;
    font-weight: normal;
  }

  .shouts {
    li {
      font-size: 0.9em;
      line-height: 1.2em;
      margin-top: 10px;
      position: relative;
    }

    .avatar {
      left: 0;
      position: absolute;
      top: 20px;
    }

    .shout {
      background: url('/@{webroot}/images/alpha/fff_10.png');
      border: 1px solid #222;
      line-height: 1.3em;
      margin-left: 25px;
      padding: 5px;

      .border-radius(4px);
    }

    li.me .shout {
      background: url('/@{webroot}/images/alpha/lightblue_30.png');
    }

    + #add_shout {
      margin-top: 20px;
    }
  }

  .spoiler_alert {
    font-weight: bold;
  }

  #add_shout {
    h3 {
      margin-bottom: 10px;
    }

    textarea {
      background: url('/@{webroot}/images/alpha/fff_20.png');
      border: none;
      color: #ccc;
      display: block;
      font-size: 0.9em;
      height: 55px;
      margin-bottom: 7px;
      width: 100%;
      max-width: 100%;

      .border-radius(2px);
    }

    .spoiler {
        float: left;
        margin-top: 5px;

        input {
            vertical-align: middle;
        }
    }

    .submit_wrapper {
        float: right;

        &.xhrloading {
            background: url('/@{webroot}/images/xhrloading.gif') no-repeat 210px 11px;
        }
    }

    .submit {
      background: url('/@{webroot}/images/alpha/fff_20.png');
      border: 1px solid #222;
      float: right;
      font-size: 0.9em;
      padding: 4px 12px;

      .border-radius(2px);

      &:hover {
        background: url('/@{webroot}/images/alpha/fff_40.png');
        cursor: pointer;
      }
    }

    .submit_wrapper p {
      float: left;
      font-size: 0.9em;
      margin-top: 10px;
    }
  }
}

