// Table of Contents
//
// 01. Variables
// 02. Mixins
// 03. Global styles
// 04. Header
// 05. Footer
// 06. Tags
// 07. Auth pages
// 08. Forms
// 09. Alerts
// 10. User account
// 11. Filters & search
// 12. Official levels
// 13. Pagination
// 14. Tables
// 15. Social
// 16. Pages
// 17. Verification
// 18. Comments
// 19. Flags
// 20. Accesibility
//

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

@import "variables";

// 02. Mixins
// - - - - - - - - - - - - - - - - - - - - - - - - -

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

@mixin logo {

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

    span {
      opacity: .5;

      &.logo-site {
        font-size: rem-calc(16);
        font-weight: lighter;
        opacity: 1;
        vertical-align: top;
      }
    }

    @media (min-width: $small-breakpoint) {
      font-size: rem-calc(28);

      span {
        font-size: rem-calc(20);
      }
    }
  }
}

// 03. Global styles
// - - - - - - - - - - - - - - - - - - - - - - - - -

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

html, body {
  height: 100%;
}

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

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

p {
  font-size: rem-calc(15);
  line-height: $line-height*1.25;
  margin-bottom: rem-calc(12);
}

a {
  color: $link;

  &:hover {
    color: $link-hover;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: $font-family-sans-serif;
  font-weight: bold;
}

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

h2 {
  font-size: rem-calc(24);
}

h3 {
  font-size: rem-calc(20);
}

h4 {
  font-size: rem-calc(18);
}

h5 {
  font-size: rem-calc(16);
}

h6 {
  font-size: rem-calc(14);
}

.button {
  background: $brand;
  font-size: rem-calc(14);
  font-family: $font-family-sans-serif !important;
  padding: rem-calc(15) rem-calc(32);
}

.postfix.button {
  padding: 0;
}

.clear {
  clear: both;
}

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

.row {
  max-width: 1170px;
}

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

.sidebar {
  margin-top: rem-calc(24);
  margin-bottom: rem-calc(48);
}

.sidebar-divider {
  border-top: 1px solid $border;
  margin-top: rem-calc(24);

  &:first-child {
    margin-top: 0;
  }
}

.sub-nav {
  background-color: #f2f2f2;
  border-radius: rem-calc(3);
  padding: rem-calc(10) rem-calc(10) rem-calc(10) 0;
  margin: rem-calc(12) 0;
}

.sub-nav dt, .sub-nav dd, .sub-nav li {
  padding: rem-calc(3) 0;

  &.active {
    background: #008CBA;
    border-radius: rem-calc(3);
    color: white;
    cursor: default;
    font-weight: normal;
    padding: rem-calc(3) rem-calc(14);

    a:hover {
      color: #737373;
    }
  }
}

.f-dropdown {
  li a {
    font-size: rem-calc(12);

    &:hover {
      color: $link-hover;
    }
  }

  li:hover, .f-dropdown li:focus {
    background: white;
  }

  &.open {
    outline: none;
  }
}

.margin {
  margin-top: $line-height;
  margin-bottom: $line-height;
}

.margin-top {
  margin-top: $line-height;
}

.margin-bottom {
  margin-bottom: $line-height;
}

.back, .icon-angle-left {
  @include back;

  & + h1 {
    clear:both;
  }
}

.progress {
  background-color: rgba(0,0,0,.06);
  border: 0;
}

.wrapper {
  min-height: 100%;
  margin: 0 auto rem-calc(-288);
  height: auto !important;
  height: 100%;
}

.wrap {
  background: white;
}

.footer, .push {
  clear: both;
  min-height: rem-calc(288);
}

.footer {
  background: #DEE0E2;
  border-top: rem-calc(6) solid $brand;
}

.ie-alert-box {
  position: absolute;
  top: 0;
  width: 100%;

  a.close {
    font-size: 36px;
    top: 20%;
  }
}

.moderator-actions {
  margin: rem-calc(24) 0;
}

.text-medium {
  font-size: rem-calc(16) !important;
}

// 04. Header
// - - - - - - - - - - - - - - - - - - - - - - - - -

header {
  background: image-url('header_bg.jpg');
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  color: $text;
  min-height: rem-calc(552);
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/header_bg.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/header_bg.jpg',sizingMethod='scale')";

  &.results {
    border-bottom: rem-calc(1) solid $border;
    min-height: rem-calc(48);
  }

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

  h2 {
    color: white;
    font-size: rem-calc(16);
    font-weight: normal;
    line-height: rem-calc(30);
  }

  .button {
    background: white;
    color: $brand;
    font-family: inherit;
    font-size: rem-calc(16);
    margin-top: 0;

    &.see-more {
      width: 100%;

      @media (min-width: $small-breakpoint) {
        width: auto;
      }
    }
  }

  .home-page {
    text-align: center;

    @media (min-width: $small-breakpoint) {
      text-align: left;
    }
  }

  .more-info {
    color: white;
    display: block;
    font-size: rem-calc(14);
    margin-bottom: rem-calc(24);
    text-decoration: underline;

    @media (min-width: $small-breakpoint) {
      display: inline-block;
      margin-bottom: 0;
      margin-left: rem-calc(12);
    }

    &:hover {
      opacity: .75;
    }
  }

  .icon-home-big {
    color: white;
    font-size: rem-calc(300);
    line-height: rem-calc(300);
    opacity: .75;
  }

  .icon-home-small {
    color: white;
    font-size: rem-calc(100);
    opacity: .75;
    position: absolute;
    right: rem-calc(24);
  }

  .icon-external {
    display: inline-block;
    font-size: rem-calc(12);
    opacity: .5;
    padding-top: rem-calc(3);
    vertical-align: top;

    @media (min-width: $small-breakpoint) {
      padding-top: 0;
      position: absolute;
      right: -18px;
      top: 3px;
    }
  }

  .selected {
    position: relative;

    &:before {
      top: -14px;
      left: 50%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      border-top-color: white;
      border-width: 8px;
      margin-left: -8px;
    }
  }

  .locale {
    float: none;
    height: rem-calc(48);
    padding-top: rem-calc(3);
    text-align: center;

    @media (min-width: $small-breakpoint) {
      float: left;
    }

    .icon-language {
      font-size: rem-calc(16);
      line-height: rem-calc(24);
      vertical-align: middle;
    }
  }

  .external-links {
    float: none;
    padding: rem-calc(12) 0;
    text-align: center;

    @media (min-width: $small-breakpoint) {
      float: right;
    }
  }

  .search-form {
    padding-top: rem-calc(14);

    .postfix {
      background: $brand;
      border: 0;
      color: white;
    }
  }
}

.contain-to-grid {
  background: #112E51;
}

.top-bar {
  background: #112E51 !important;
  color: white;
  height: rem-calc(48);
  max-width: 1170px !important;
  padding: 0 rem-calc(12);

  @media (min-width: $small-breakpoint) {
    height: rem-calc(96);
  }

  .name {
    height: rem-calc(48);

    a {
      color: white;
      font-family: 'Lato';
      font-size: rem-calc(16);
      font-weight: lighter;
      line-height: $line-height*2;

      span {
        *display: inline; /* IE */
        opacity: .5;

        &.logo-site {
          *display: inline; /* IE */
          font-size: rem-calc(14);
          opacity: 1;
        }
      }

      @media (min-width: $small-breakpoint) {
        font-size: rem-calc(24);
        line-height: $line-height*4;

        span, span.logo-site {
          font-size: rem-calc(16);
        }
      }

      @media (min-width: $medium-breakpoint) {
        font-size: rem-calc(30);
        line-height: $line-height*4;

        span, span.logo-site {
          font-size: rem-calc(20);
        }
      }

      img {
        height: 48px;
        width: 48px;

        @media (min-width: $small-breakpoint) {
          margin-top: rem-calc(24);
        }

        @media (min-width: $medium-breakpoint) {
          height: 96px;
          margin-right: rem-calc(12);
          margin-top: 0;
          width: 96px;
        }
      }
    }
  }

  &.expanded .title-area {
    background: none;
  }

  @media screen\0 {
    .title-area {
      min-width: rem-calc(475);
    }
  }

  .toggle-topbar {

    a {
      font-size: rem-calc(10);
    }

    &.menu-icon a {
      padding: 0 rem-calc(24);

      span::after {
        right: 0;
      }
    }
  }

  &.expanded .toggle-topbar a {
    color: white;
  }

  &.expanded .toggle-topbar a span::after {
    box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF;
  }
}

.top-bar-section {
  margin-right: rem-calc(24);
  width: 100%;

  ul {
    margin-left: 0;

    @media (min-width: $small-breakpoint) {
      margin-left:rem-calc(24);
    }
  }

  ul li {
    background: none;
  }

  ul li > a {
    font-size: rem-calc(14);

    &.button {
      border-radius: 0;
      line-height: $line-height*1.5;
      text-align: left;
      background: none;
      padding-left: rem-calc(6);
    }

    @media (min-width: $small-breakpoint) {
      &.button {
        background: $brand;
        border-radius: rem-calc(3);
        line-height: rem-calc(15);
        margin-top: rem-calc(24);
        padding-left: rem-calc(15);
        text-align: center;
      }
    }
  }

  ul li > a {
    font-size: rem-calc(14);
  }

  ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
    background-color: #007095 !important;
  }

  ul li, ul li:hover:not(.has-form) > a:not(.button) {
    line-height: $line-height;

    @media (min-width: $small-breakpoint) {
      background: none;
      border: 0;
      line-height: $line-height*4;
    }
  }

  ul {
    margin-left: rem-calc(12);

    @media (min-width: $small-breakpoint) {
      margin-left: 0;
    }

    li:not(.has-form) a:not(.button) {
      background: none;
      color: white;
      padding: rem-calc(12) 0;

      @media (min-width: $small-breakpoint) {
        line-height: $line-height*4;
        padding: 0 rem-calc(12);
      }

      &:hover {
        background: none;
        color: white;
        text-decoration: underline;
        transition: text-decoration 275ms;
      }
    }

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

.top-links {
  background: #0B0C0C;
  color: white;
  font-size: rem-calc(14);

  .row {
    padding: 0 rem-calc(12);
  }

  a {
    color: white;

    &:hover {
      text-decoration: underline;
    }
  }
}

.subnavigation-container {
  background: white;
}

.subnavigation {
  background: white;
  clear: both;
  min-height: rem-calc(72);

  @media (min-width: $small-breakpoint) {
    & > .column {
      padding-left: 0;
    }
  }

  a {
    color: $text;
    display: inline-block;
    font-size: rem-calc(14);
    font-weight: bold;
    line-height: $line-height*2;
    position: relative;
    text-align: left;

    @media (min-width: $small-breakpoint) {
      line-height: $line-height*3;
      margin-left: rem-calc(12);
      margin-right: rem-calc(36);
    }

    &:after {
      color: $border;
      content: "|";
      padding: 0 rem-calc(12);

      @media (min-width: $small-breakpoint) {
        content: none;
        padding: 0;
      }
    }

    &:last-child:after {
      content: none;
    }

    &:hover {
      color: $link;
    }

    &.active {
      color: $brand;

      @media (min-width: $small-breakpoint) {
        border-bottom: 2px solid $brand;
        line-height: rem-calc(24);
      }
    }
  }
}

// 05. Footer
// - - - - - - - - - - - - - - - - - - - - - - - - -

footer {
  color: #171819;
  padding: rem-calc(48) 0;

  .logo {
    @include logo;

    a {
      color: #454A4C;
      line-height: rem-calc(36);
      padding-left: 0;
      text-decoration: none;
    }
  }

  p {
    font-size: rem-calc(14);
  }

  a, a:active, a:focus {
    color: #454A4C;
    text-decoration: underline;

    &:hover {
      color: #171819;
    }
  }

  .footer-sections {
    padding-left: 0;
  }

  h4 {

    a {
      border-bottom: 1px solid #BFC1C3;
      display: block;
      margin-bottom: rem-calc(6);
      padding-bottom: rem-calc(6);
      text-decoration: none;
    }
  }
}

.subfooter {
  border-top: 1px solid #BFC1C3;
  opacity: .75;
  margin-top: rem-calc(24);
  padding-top: rem-calc(12);
}

// 06. Tags
// - - - - - - - - - - - - - - - - - - - - - - - - -

.tags, .tag-cloud {

  a {
    background: $border;
    border-radius: rem-calc(6);
    color: #4d4d4d;
    display: inline-block;
    font-size: rem-calc(13);
    line-height: rem-calc(22);
    margin-bottom: rem-calc(8);
    padding: 0 rem-calc(8);

    &:hover {
      color: $link;
      cursor: pointer;
      background: #E5F1F8;
    }
  }
}

.tag-cloud {

  h3 {
    border-top: 2px solid $brand;
    display: inline-block;
    font-family: $font-family-sans-serif;
    font-size: rem-calc(16);
    margin: -1px 0 rem-calc(12);
    padding-top: rem-calc(6);
    text-transform: uppercase;
  }

  a {
    background: white;
    border: 2px solid $border;
    padding: rem-calc(6) rem-calc(8);

    .label {
      color: white;

      &.info {
        background: rgba(0,0,0,.5);
      }
    }

    &:hover {

      .label {
        background: $brand;
      }
    }
  }
}

// 07. Auth pages
// - - - - - - - - - - - - - - - - - - - - - - - - -

.auth-page {
  background: #065687 image-url("auth_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;

  @media (min-width: $small-breakpoint) {
    padding-top: rem-calc(48);
  }

  p {
    font-size: rem-calc(14);
  }

  h1 {
    @include logo;

    a {

      span.logo-site {
        vertical-align: middle;
      }
    }
  }
}

.auth {
  min-height: rem-calc(480);

  h2 {
    clear: both;
    font-size: rem-calc(18);
    font-weight: bold;
    line-height: $line-height;

    @media (min-width: $small-breakpoint) {
      font-size: rem-calc(30);
      line-height: $line-height*2;
    }
  }

  .back, .icon-angle-left {
    @include back;
  }

  .panel {
    background: white;
    border: 0;

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

// 08. Forms
// - - - - - - - - - - - - - - - - - - - - - - - - -

form.locale-form {
  display: inline-block;
  position: relative;

  select {
    background-image: image-url("language_select.png");

    &.locale-switcher {
      background-color: transparent;
      border: 0;
      color: white;
      outline: none;
      padding-left: rem-calc(3);
      padding-right: rem-calc(24);
    }
  }
}

form {

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

  input[type]:not([type=submit]):not([type=file]):not([type=checkbox]) {
    background: $input-bg;
    height: rem-calc(48);
    margin-bottom: rem-calc(16);

    &.search-form {
      height: rem-calc(37);
      padding: 0 rem-calc(6);
    }

    &.error {
      margin-bottom: rem-calc(1);
    }
  }

  input[type="checkbox"] + label,
  input[type="radio"] + label {
    margin-right: 0;
  }

  input[type=file] {
    margin: rem-calc(12) 0 rem-calc(12) rem-calc(6);
  }

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

  .note-marked {
    background: yellow;
    display: inline-block;

    em {
      background: white;
      display: block;
    }
  }

  .ckeditor {
    min-height: rem-calc(312);
  }

  .checkbox {
    display: inline-block;
    font-size: rem-calc(14);
    font-weight: normal;
    line-height: $line-height;
    vertical-align: middle;
  }

  .captcha {
    border: 0;
    padding: rem-calc(12) 0;

    input {
      margin-bottom: 0 !important;
    }
  }

  .button.margin-top {
    margin-top: rem-calc(24);
  }
}

.captcha {

  label {
    display: none;
  }
}

// 09. 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;

    a {
      color: $warning-color;
      font-weight: bold;
      text-decoration: underline;
    }
  }

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

  .close {
    text-decoration: none !important;
  }
}

span.error, small.error {
  background: $alert-bg;
  color: $alert-color;
}

.error small.error {
  background: $alert-bg;
  color: $alert-color;
  display: inline-block;
  margin: 0 rem-calc(6);
}

label.error, label.error a {
  color: $alert-color;
}

.alert-messages {
  background-color: white;
  padding-top: rem-calc(24);
}

// 10. User account
// - - - - - - - - - - - - - - - - - - - - - - - - -

.account {
  background: white;
  padding-top: rem-calc(24);

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

  .avatar {
    margin-bottom: rem-calc(24);
  }

  .initialjs-avatar {
    margin-bottom: $line-height;
  }

  h1.avatar {
    margin-left: rem-calc(12);
  }

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

  .recommendations {
    list-style-type: none;
    margin-left: 0;
    margin-top: rem-calc(24);

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

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

  select {
    height: rem-calc(48);
    margin-right: rem-calc(12);
  }

  .verify-account {
    padding-right: rem-calc(12);
  }

  .final-votes-info {
    background: $warning-bg;
    border: 1px solid $warning-border;
    color: $warning-color;
    margin-top: rem-calc(24);
    padding: rem-calc(12);

    ul li {
      margin: rem-calc(12) 0;
    }

    .icon-box {
      color: #D4A26D;
      font-size: rem-calc(120);
      line-height: rem-calc(120);
      vertical-align: top;
    }
  }
}

img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
  border-radius: rem-calc(1000);
  position: relative;
}

.author-deleted, .user-deleted {
  background-color: rgba(255,255,255,.5);
  color: rgba(0,0,0,.4);
  font-size: rem-calc(40);
  left: rem-calc(11);
  position: absolute;
  top: rem-calc(72);
}

.user-deleted {
  top: -9px;
}

.user-permissions {

  p {
    span {
      color: $text-medium;
      font-size: rem-calc(12);
    }
  }

  ul {
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 0;

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

      span {
        color: $text-medium;
        font-size: rem-calc(12);
      }

      .icon-check {
        color: $check;
      }

      .icon-x {
        color: $delete;
      }
    }
  }
}

// 11. Filters & search
// - - - - - - - - - - - - - - - - - - - - - - - - -

.filters, .search-results {

  h2 {
    display: inline-block;
    font-size: rem-calc(24);
    margin: rem-calc(12) 0;

    @media (min-width: $small-breakpoint) {
      margin: rem-calc(24) 0;
    }
  }

  select {
    background-color: #DEE0E2;
    height: auto;
    margin-bottom: rem-calc(24);
    min-width: rem-calc(180);
    outline: 0;
    padding: rem-calc(12);
    width: auto;

    @media (min-width: $small-breakpoint) {
      margin: 0 0 rem-calc(24) rem-calc(12);
    }

    optgroup {
      font-size: rem-calc(14);
    }

    option {

      &:after {
        content: "a";
        font-family: "icons";
      }
    }
  }

  .debates-order {
    text-align: left;

    @media (min-width: $small-breakpoint) {
      text-align: right;
    }

    select {
      margin-left: 0;
    }
  }
}

.search-form {

  h3 {
    border-top: 1px solid $votes-border;
    display: inline-block;
    font-family: $font-family-sans-serif;
    font-size: rem-calc(16);
    margin: -1px 0 rem-calc(12);
    padding-top: rem-calc(6);
    text-transform: uppercase;
  }
}

// 12. Officials levels
// - - - - - - - - - - - - - - - - - - - - - - - - -

[class^="level-"] {
  color: white;
}

.is-author {
  background: $author;
}

.is-association {
  background: $association;
}

.is-deleted {
  background: $deleted;
}

.level-1 {
  background: $level-1;
}

.level-2 {
  background: $level-2;
}

.level-3 {
  background: $level-3;
}

.level-4 {
  background: $level-4;
}

.level-5 {
  background: $level-5;
}

// 13. Pagination
// - - - - - - - - - - - - - - - - - - - - - - - - -

ul.pagination {
  margin-top: rem-calc(24);

  li {
    color: $text-medium;
  }
}

// 14. Tables
// - - - - - - - - - - - - - - - - - - - - - - - - -

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;

  tr {

    td {
      line-height: $line-height;
      padding: rem-calc(12) rem-calc(6);
    }

    &:nth-child(odd) {
      background: #F0F2F6;
    }
  }

  .button {
    margin: 0;
  }
}

// 15. Social
// - - - - - - - - - - - - - - - - - - - - - - - - -

.button.button-twitter {
  background: #45B0E3;

  &:before {
    background: #40A2D1;
    content: "f";
    font-family: "icons" !important;
    font-size: rem-calc(24);
    left: 0;
    line-height: $line-height*2;
    padding: 0 rem-calc(20);
    position: absolute;
    top: 0;
  }
}

.social-share-button-twitter {
  background: #45B0E3;
  color: white;
  height: rem-calc(48);
  position: relative;
  width: rem-calc(48);

  &:before {
    content: "f";
    font-family: "icons" !important;
    font-size: rem-calc(24);
    left: 50%;
    line-height: $line-height*2;
    margin-left: rem-calc(-11);
    position: absolute;
    top: 0;
  }

  &:hover {
    background: white;
    color: #40A2D1;
  }
}

.button.button-facebook {
  background: #3B5998;

  &:before {
    background: #354F88;
    content: "A";
    font-family: "icons" !important;
    font-size: rem-calc(24);
    left: 0;
    line-height: $line-height*2;
    padding: 0 rem-calc(20);
    position: absolute;
    top: 0;
  }
}

.social-share-button-facebook {
  background: #3B5998;
  color: white;
  height: rem-calc(48);
  position: relative;
  width: rem-calc(48);

  &:before {
    content: "A";
    font-family: "icons" !important;
    font-size: rem-calc(24);
    left: 50%;
    line-height: $line-height*2;
    margin-left: rem-calc(-11);
    position: absolute;
    top: 0;
  }

  &:hover {
    background: white;
    color: #354F88;
  }
}

.button.button-google {
  background: #DE4C34;

  &:before {
    background: #CE3E26;
    content: "B";
    font-family: "icons" !important;
    font-size: rem-calc(24);
    left: 0;
    line-height: $line-height*2;
    padding: 0 rem-calc(20);
    position: absolute;
    top: 0;
  }
}

.social-share-button-google_plus {
  background: #DE4C34;
  color: white;
  height: rem-calc(48);
  position: relative;
  width: rem-calc(48);

  &:before {
    content: "B";
    font-family: "icons" !important;
    font-size: rem-calc(24);
    left: 50%;
    line-height: $line-height*2;
    margin-left: rem-calc(-11);
    position: absolute;
    top: 0;
  }

  &:hover {
    background: white;
    color: #CE3E26;
  }
}

.social {
  margin-top: rem-calc(24);
  text-align: center;

  @media (min-width: $small-breakpoint) {
    margin-top: 0;
    text-align: right;
  }

  a {
    font-size: rem-calc(24);
    line-height: rem-calc(24);
    margin: 0 rem-calc(12);
    text-decoration: none;
    vertical-align: middle;

    &:hover {
      opacity: .5;
      text-decoration: none;
    }

    @media (min-width: $small-breakpoint) {
      font-size: rem-calc(18);
    }

    &:last-child {
      margin-right: 0;
    }
  }
}

.share-supported {

  .social-share-button {
    display: inline-block;
  }

  .social-share-button-twitter {
    background: none;
    color: white;
    height: rem-calc(24);
    position: relative;
    width: rem-calc(48);

    &:before {
      content: "f";
      font-family: "icons" !important;
      font-size: rem-calc(24);
      left: 50%;
      line-height: $line-height*2;
      margin-left: rem-calc(-11);
      position: absolute;
      top: 0;
    }

    &:hover {
      color: #40A2D1;
    }
  }

  .social-share-button-facebook {
    background: none;
    color: white;
    height: rem-calc(24);
    position: relative;
    width: rem-calc(48);

    &:before {
      content: "A";
      font-family: "icons" !important;
      font-size: rem-calc(24);
      left: 50%;
      line-height: $line-height*2;
      margin-left: rem-calc(-11);
      position: absolute;
      top: 0;
    }

    &:hover {
      color: #354F88;
    }
  }

  .social-share-button-google_plus {
    background: none;
    color: white;
    height: rem-calc(24);
    position: relative;
    width: rem-calc(48);

    &:before {
      content: "B";
      font-family: "icons" !important;
      font-size: rem-calc(24);
      left: 50%;
      line-height: $line-height*2;
      margin-left: rem-calc(-11);
      position: absolute;
      top: 0;
    }

    &:hover {
      color: #CE3E26;
    }
  }
}

// 16. Pages
// - - - - - - - - - - - - - - - - - - - - - - - - -

.page {
  padding-bottom: rem-calc(48);

  .menu {
    margin-top: rem-calc(24);

    ul {
      list-style-type: none;
      margin-left: 0;

      & ul {
        margin-left: rem-calc(12);
      }
    }

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

  .text {
    margin-top: rem-calc(24);

    h1, h2, h3, h4, h5, h6 {
      text-align: left;
    }

    ul, ol {
      margin-left: rem-calc(12);

      li {
        font-size: rem-calc(15);
        line-height: rem-calc(30);
        margin-bottom: rem-calc(12);
      }
    }

    p {
      font-size: rem-calc(15);
      line-height: rem-calc(30);
    }
  }

  .more-information {
    margin-top: rem-calc(24);

    ul {
      list-style-type: none;
      margin-left: 0;

      a:first-child {
        border-top: 1px solid $border;
        display: block;
        padding-top: rem-calc(12);
      }

      li {
        border-bottom: 1px solid $border;
        font-size: rem-calc(16);
        font-weight: bold;
        padding-bottom: rem-calc(12);
        position: relative;
        text-align: left;

        span {
          color: $text-medium;
          display: block;
          font-size: rem-calc(14);
          font-weight: normal;
        }

        &:after {
          content: none;
          color: $text-light;
          font-family: "icons" !important;
          position: absolute;
          right: 0;
          top: rem-calc(12);

          @media (min-width: $small-breakpoint) {
            content: 'c';
          }
        }
      }
    }
  }
}

// 17. Verification
// - - - - - - - - - - - - - - - - - - - - - - - - -

.verification {
  min-height: rem-calc(600);

  @media (min-width: $small-breakpoint) {
    .left + .left {
      margin-left: rem-calc(12);
    }
  }

  .date {

    select {
      float: left;
      width: 30%;

      @media (min-width: $small-breakpoint) {
        width: 25%;
      }
    }
  }

  .progress {
    height: rem-calc(72);

    @media (min-width: $small-breakpoint) {
      height: rem-calc(48);
    }
  }

  .verification-step {
    font-weight: bold;
    line-height: rem-calc(20);
    padding-top: rem-calc(6);
    text-transform: uppercase;
    vertical-align: top;

    @media (min-width: $small-breakpoint) {
      line-height: rem-calc(48);
      padding: 0;
    }

    .number {
      display: block;

      @media (min-width: $small-breakpoint) {
        background-color: white;
        border-radius: rem-calc(30);
        color: #43AC6A;
        display: inline-block;
        height: rem-calc(30);
        line-height: rem-calc(30);
        vertical-align: middle;
        width: rem-calc(30);
      }
    }

    &.active {
      color: white;
    }

    &.completed {
      color: rgba(255,255,255,.5);

      .number {
        opacity: .5;
      }
    }
  }

  .send-letter {
    background: none;
    color: $link;

    &:hover {
      color: $link-hover;
    }
  }

  .button + form {
    display: inline-block;
    margin-left: rem-calc(12);
  }

  .verification-list {
    font-size: rem-calc(13);
    list-style-type: none;
    margin-left: 0;

    span {
      display: inline-block;
      min-width: rem-calc(288);
    }
  }
}

.verify-account {
  padding-right: rem-calc(12);

  .already-verified {
    color: $check;
    line-height: rem-calc(48);

    .icon-check {
      font-size: rem-calc(24);
      line-height: rem-calc(45);
      vertical-align: middle;
    }
  }
}

// 18. Comments
// - - - - - - - - - - - - - - - - - - - - - - - - -

.comments {
  background: $white;
  background-repeat: repeat-x;
  padding-top: rem-calc(24);
  padding-bottom: rem-calc(96);

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

    span {
      font-size: rem-calc(18);
      font-weight: normal;
      opacity: .8;
    }
  }

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

    p {
      margin-bottom: 0;
    }

    .comment-votes {
      color: $text-medium;
      font-weight: lighter;
      line-height: rem-calc(24);
      margin: rem-calc(10) rem-calc(12) rem-calc(6) 0;

      a {
        color: $text-light;
        display: inline-block;
        vertical-align: top;

        &:hover {
          color: $text-medium;
        }
      }

      [class^="icon-"] {
        font-size: rem-calc(20);
        vertical-align: middle;
      }
    }

    .comment-body {
      margin-left: rem-calc(42);

      p {
        font-size: rem-calc(14);
      }

      .reply {
        background: white;
        border: 1px solid $border;
        font-size: rem-calc(12);
        margin: rem-calc(6) 0;
        padding: rem-calc(6);

        .divider {
          color: $text-light;
        }
      }

      .comment-user {
        margin-top: rem-calc(6);
        padding: rem-calc(6) 0;
        overflow: hidden;

        @each $n in ("1", "2", "3","4", "5") {
          &.level-#{$n} {
            @if $n == "5" {
              background: $comment-level-5;
              padding: rem-calc(6) rem-calc(12);
            }
            @elseif $n == "1" {
              background: none;
              padding: rem-calc(6) rem-calc(12);
            }
            @else {
              background: $comment-official;
              padding: rem-calc(6) rem-calc(12);
            }
          }
        }

        &.is-author {
          background: $comment-author;
          padding: rem-calc(6) rem-calc(12);
        }

        &.is-admin, &.is-moderator {
          background: $comment-admin;
          padding: rem-calc(6) rem-calc(12);
        }

        &.level-5 {
          background: $comment-level-5;
          padding: rem-calc(6) rem-calc(12);
        }
      }
    }

    .is-deleted {
      background: $deleted;
      margin-left: rem-calc(42);
      padding: rem-calc(6) rem-calc(12);
    }

    .comment-children {
      border-left: 1px dashed $border;
      margin-left: rem-calc(42);
      padding-left: rem-calc(6);

      @media only screen and (max-width: 40em) {
        margin-left: rem-calc(16);
      }
    }

    .comment-info {
      color: $text-light;
      font-size: rem-calc(13);
      font-weight: lighter;
      margin-top: rem-calc(6);
      vertical-align: middle;

      span.user-name {
        color: $text;
        font-weight: bold;
      }
    }
  }
}

.faded {
  opacity: 0.4;
}

// 19. Flags
// - - - - - - - - - - - - - - - - - - - - - - - - -

.flag-content {

  .button {
    background: none;
    margin-bottom: 0;
    padding: 0;
  }
}

.flag-disable, .flag-active {
  line-height: rem-calc(24);
  vertical-align: middle;
}

.flag-disable {
  color: $text-medium;
}

.flag-active {
  color: $delete;
}

// 20. Accesibility
// - - - - - - - - - - - - - - - - - - - - - - - - -

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}