// Table of Contents
//
// 01. Variables
// 02. Global styles
// 03. Header
// 04. Footer
// 05. Debates
//   05.1. Debates index
//   05.2. Debate show
//   05.3. Debate new
// 06. Comments
// 07. Tags
// 08. Login and Sign Up
//   08.1. Login
//   08.2. Sign Up
// 09. Forms
// 10. Alerts
//

// 01. Variables
// - - - - - - - - - - - - - - - - - - - - - - - - -

@import "variables";

// 02. Global styles
// - - - - - - - - - - - - - - - - - - - - - - - - -

*, html {
  margin: 0;
  padding: 0;
}

body {
  background: $background;
  font-family: $font-family-sans-serif;
  font-size: rem-calc(13);
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

.button {
  padding: rem-calc(15) rem-calc(32);
}

.clear {
  clear: both;
}

.inline-block {
  display: inline-block;
}

.row {
  max-width: 1170px;
}

.row-full {
  max-width: 100% !important;
}

::selection, ::-moz-selection {
  background: $brand;
  color: white;
}

// 03. Header
// - - - - - - - - - - - - - - - - - - - - - - - - -

header {
  background: url('home_header_bg.jpg');
  background-position: 50% 50%;
  background-size: cover;
  min-height: $line-height*20;

  &.results {
    min-height: $line-height*8;
  }

  h1 {
    color: white;
    font-size: rem-calc(45);
    font-weight: bolder;
    line-height: $line-height*3;
    margin: $line-height 0 0 0;
    padding: 0;
  }

  h2 {
    @extend h1;
    font-size: rem-calc(24);
    font-weight: normal;
    line-height: $line-height*2;
    margin: 0;
  }

  .button {
    color: white;
    font-family: inherit;
    margin-top: $line-height*2;
  }
}

.contain-to-grid {
  background: none;
}

.top-bar {
  background: white;
  color: $header-color;
  height: $line-height*4;
  max-width: 1170px !important;

  .name a {
    color: black;
    font-family: 'Lato';
    font-size: rem-calc(36);
    font-weight: lighter;
    line-height: $line-height*4;
    padding-left: 0;

    span {
      color: $brand;
      font-size: rem-calc(24);
      font-weight: normal;
    }

    img {
      margin-right: $line-height/2;
    }
  }
}

.top-bar-section {

  li:not(.has-form) a:not(.button) {
    background: white;
    color: $brand;
    line-height: $line-height*4;
  }

  li.active:not(.has-form) a:not(.button) {
    height: $line-height*4;
    line-height: $line-height*4;
  }
}

.top-links {
  color: white;
  font-size: rem-calc(14);
  height: $line-height*2;
  padding: $line-height/2 0;

  a {
    color: white;
  }
}

// 04. Footer
// - - - - - - - - - - - - - - - - - - - - - - - - -





// 05. Debates
// - - - - - - - - - - - - - - - - - - - - - - - - -

@mixin back {
  color: $text-light;
  font-size: rem-calc(13);
  line-height: $line-height;
}

@mixin votes {
  border-top: 1px solid $votes-border;
  padding: rem-calc(14) rem-calc(12);
  background: $votes-background;
  margin: 0 -12px;

  .icon-like {
    background: white;
    border: 2px solid white;
    border-radius: rem-calc(3);
    color: $votes-neutral;
    display: inline-block;
    font-size: rem-calc(30);
    line-height: rem-calc(30);
    padding: rem-calc(3) rem-calc(6);
    position: relative;
    //when active => color: $votes-like;

    &:hover {
      background: $votes-like;
      color: white;
      cursor: pointer;
    }

    &:active {
      border-color: $votes-like-act;
    }
  }

  .icon-unlike {
    background: white;
    border: 2px solid white;
    border-radius: rem-calc(3);
    color: $votes-neutral;
    display: inline-block;
    font-size: rem-calc(30);
    line-height: rem-calc(30);
    padding: rem-calc(3) rem-calc(6);
    position: relative;
    //when active => color: $votes-unlike;

    &:hover {
      background: $votes-unlike;
      color: white;
      cursor: pointer;
    }

    &:active {
      border-color: $votes-unlike-act;
    }
  }

  .like {
    line-height: rem-calc(48);
    vertical-align: super;

    span {
      color: $votes-text;
      display: inline-block;
      font-size: rem-calc(16);
      font-weight: lighter;
      line-height: $line-height*2;
      padding-left: rem-calc(8);
      vertical-align: top;
    }
  }

  .unlike {
    @extend .like;
  }

  .total-votes {
    color: $votes-text;
    float: right;
    line-height: $line-height*2;
  }

  .divider {
    margin: 0 rem-calc(6);
  }
}

// 05.1. Debates index
// - - - - - - - - - - - -

.debate-featured {
  margin-bottom: rem-calc(34);
  margin-top: rem-calc(23);

  .panel {
    background: white;
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    border-radius: rem-calc(3);
    margin-bottom: $line-height;
    padding: rem-calc(24) rem-calc(12) 0 rem-calc(12);

    .debate-content {
      min-height: $line-height*14.71;
    }

    .label {
      background: none;
      clear: both;
      color: $debates;
      display: block;
      font-weight: bold;
      text-transform: uppercase;
      padding-left: 0;
      padding-top: 0;
    }

    .icon-comment-quotes {
      color: $debates;
      font-size: rem-calc(36);
      line-height: $line-height;
      position: absolute;
      right: rem-calc(18);
      top: rem-calc(24);
    }

    h3 {
      font-weight: bold;
      margin: rem-calc(8) 0 0 0;
      min-height: rem-calc(65);

      a {
        clear: both;
        color: $header-color;
        display: block;
        font-size: rem-calc(16);
        line-height: $line-height;
      }
    }

    .debate-info {
      color: $text-light;
      font-weight: lighter;
      margin-bottom: 0;

      .icon-chat-bubble-two {
        font-size: rem-calc(16);
        vertical-align: top;
      }
    }

    .debate-description {
      color: $text-color;
      font-size: rem-calc(13);
      height: $line-height*6.5;
      line-height: $line-height;
      margin-bottom: $line-height/2;
      margin-top: $line-height;
      overflow: hidden;
      position: relative;
    }

    .truncate {
      background: url('truncate.png');
      background-repeat: repeat-x;
      bottom: 0;
      height: 24px;
      position: absolute;
      width: 100%;
    }

    p {
      color: $text-color;
      font-size: rem-calc(13);
      line-height: $line-height;
      margin-bottom: $line-height/2;
    }
  }

  .votes {
    @include votes;
  }
}

.debates-list {
  margin-bottom: $line-height*2;
}

.debate {
  @extend .debate-featured;
  margin-bottom: 0;
  margin-top: 0;

  .panel {
    margin-bottom: 0;
    min-height: $line-height*8;
    padding: 0 rem-calc(12) rem-calc(2) rem-calc(12);

    &:first-child {
      padding-top: $line-height;
    }

    .label {
      line-height: $line-height;
      padding-bottom: 0;
    }

    h3 {
      margin-top: 0;
      min-height: $line-height*2;
    }

    p {
      text-align: justify;
    }

    .debate-content {
      margin: 0;
      min-height: 0;

      .tags {
        display: block;
      }
    }

    .icon-comment-quotes {
      font-size: rem-calc(18);
      left: rem-calc(60);
      top: 0;
    }

    .debate-description {
      height: $line-height*3;
      margin-top: 0;
    }
  }

  .votes {
    border: 0;

    .total-votes {
      display: block;
      float: none;
      line-height: $line-height;
    }

    .like {

      span {
        color: $votes-text;
        display: block;
        line-height: $line-height/2;
      }
    }
  }
}

// 05.2. Debate show
// - - - - - - - - - - - -

.debate-show {
  margin-top: $line-height;
  padding: 0 rem-calc(12);

  .back {
    @include back;
  }

  .icon-angle-left {
   @extend .back;
  }

  h1 {
    clear: both;
    font-size: rem-calc(24);
    font-weight: bold;
    line-height: $line-height*2;
    margin: 0;
  }

  .debate-info {
    clear: both;
    color: $text-light;
    font-weight: lighter;
    line-height: $line-height*2;
    text-align: justify;

    .bullet {
      color: $border;
    }

    p {
      font-size: rem-calc(14);
      line-height: $line-height;
      margin-bottom: 0;
    }
  }

  .author-photo {
    border-radius: 2px;
    display: inline-block;
    height: 32px;
    line-height: $line-height*2;
    margin-right: $line-height/4;
    vertical-align: middle;
    width: 32px;
  }

  .author {
    color: $text-color;
    font-weight: bold;
  }

  h3 {
    border-bottom: 1px solid $border;
    font-size: rem-calc(18);
    margin: 0 0 $line-height 0;
    text-transform: uppercase;
  }

  .votes {
    @include votes;
    border: 0;
    margin: 0;

    .total-votes {
      display: block;
      float: none;
      line-height: $line-height;
    }
  }

  .leave-comment {
    display: inline-block;
    margin-top: $line-height;
  }
}

// 05.3. Debate new
// - - - - - - - - - - - -

.debate-new {
  background: white;
  padding-top: $line-height;

  .back {
    @include back;
  }

  h1 {
    clear: both;
    font-size: rem-calc(36);
    font-weight: bold;
    line-height: $line-height*2;
    margin-bottom: $line-height;
  }

  .icon-comment-quotes {
    color: $debates;
    font-size: rem-calc(60);
    line-height: $line-height;
    opacity: .5;
  }

  h2 {
    clear: both;
    font-size: rem-calc(20);
    font-weight: bold;
    line-height: $line-height;
    margin: 0;
  }

  .recommendations {
    list-style-type: none;
    margin-left: 0;
    margin-top: $line-height;

    li {
      font-size: rem-calc(12);
      margin: rem-calc(12) 0;

      &:before {
        color: $debates;
        content: "l ";
        font-family: "icons" !important;
      }
    }
  }
}




// 06. Comments
// - - - - - - - - - - - - - - - - - - - - - - - - -

.comments {
  background: $comments-bg;
  background-image: url('comments_divider.png');
  background-repeat: repeat-x;
  padding-top: $line-height;
  padding-bottom: $line-height*4;

  h2 {
    margin: 0;
    font-weight: bold;
  }

  .comment {
    margin: $line-height/4 0;

    p {
      color: $comments-text;
      font-size: rem-calc(15);
      margin-bottom: 0;
    }

    a {
      color: $comments-info;
    }

    .user-photo {
      border-radius: 2px;
      display: inline-block;
      height: 32px;
      line-height: $line-height*2;
      margin-right: $line-height/4;
      vertical-align: top;
      width: 32px;
    }

    .comment-body {
      margin-left: $line-height*1.6;

      .reply {
        font-size: rem-calc(12);
        font-weight: lighter;
      }
    }

    .comment-children {
      border-left: 1px dotted $border;
      margin-left: $line-height*1.6;
      padding-left: $line-height/4;

      @media only screen and (max-width: 40em) {
        margin-left: $line-height/1.5;
      }
    }

    .comment-info {
      color: $comments-info;
      font-size: rem-calc(13);
      font-weight: lighter;
      vertical-align: middle;
    }
  }
}

// 07. Tags
// - - - - - - - - - - - - - - - - - - - - - - - - -

.tags {

  a {
    background: $tags-bg;
    border: 1px solid $tags-border;
    border-radius: 3px;
    color: $tags-color;
    display: inline-block;
    font-size: rem-calc(13);
    line-height: rem-calc(22);
    margin-bottom: rem-calc(8);
    margin-right: rem-calc(8);
    padding: 0 rem-calc(6);


    &:hover {
      color: $link;
      cursor: pointer;
      background: #e5f1f8;
      border: 1px solid $brand;
    }
  }
}

.tag-cloud {
  @extend .tags;

  h3 {
    font-size: rem-calc(24);
    font-weight: bold;
    line-height: $line-height*2;
    margin: 0;
  }

  a {
    padding: $line-height/4 $line-height/3;
  }
}

// 08. Login and Sign Up
// - - - - - - - - - - - - - - - - - - - - - - - - -

// 08.1. Login
// - - - - - - - - - - - -

.auth-page {
  background: url('auth_bg.jpg');
  margin-top: $line-height;

  @media (min-width: 480px) {
    margin-top: $line-height*2;
  }

  h1 {

    a {
      color: white;
      font-family: 'Lato';
      font-size: rem-calc(20);
      font-weight: lighter;
      line-height: $line-height*4;
      padding-left: rem-calc(6);

      span {
        font-size: rem-calc(16);
        font-weight: lighter;
        vertical-align: top;
      }

      @media (min-width: 480px) {
        font-size: rem-calc(30);
        span {
          font-size: rem-calc(20);
        }
      }
    }
  }
}

.auth {
  min-height: $line-height*20;

  .panel {
    background: white;

    h1 {
      font-size: rem-calc(30);
      font-weight: bolder;
    }
  }
}

// 09. Forms
// - - - - - - - - - - - - - - - - - - - - - - - - -

form {

  label {
    font-weight: bold;
    line-height: $line-height;
  }

  input[type]:not([type=submit]) {
    background: $input-bg;
    height: $line-height*2;
    margin-bottom: rem-calc(16);
  }

  .note {
    display: block;
    font-size: rem-calc(13);
    margin-bottom: rem-calc(12);
  }

  .ckeditor {
    margin-bottom: $line-height;
    min-height: $line-height*14;
  }

  .checkbox {
    display: inline-block;
    font-size: rem-calc(14);
    line-height: $line-height*2;
    margin: 0 0 0 rem-calc(6);
    vertical-align: top;
  }
}


// 10. Alerts
// - - - - - - - - - - - - - - - - - - - - - - - - -

.alert-box {

  &.success {
    background-color: $success-bg;
    border-color: $success-border;
    color: $success-color;
  }

  &.info {
    background-color: $info-bg;
    border-color: $info-border;
    color: $info-color;
  }

  &.warning {
    background-color: $warning-bg;
    border-color: $warning-border;
    color: $warning-color;
  }

  &.alert {
    background-color: $alert-bg;
    border-color: $alert-border;
    color: $alert-color;
  }
}