$backgroundColor: #fff;
$fontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;
$fontColor: #333;
$linkColor: #00451f;
$fontSize: 15px;
$bodyGutter: 20px;
$navHeight: 44px;
$footerHeight: 50px;
$responsiveWidth: 700px;
$columnWidth: 8.333333%;
$navBarIconWidth: 32px;
$buttonBorderHover: 2px solid darken(#fff, 70%);
$nickListWidth: 180px;
$unreadColor: #a00;
$navBarZindex: 1000;
$errorColor: #d5000d;

/*
 * Sass mixins
 */
@mixin prefix($property, $value...) {      // Chews experimental css properties,
    -webkit-#{$property}:   $value;       // spits out browser prefixes.
    -moz-#{$property}:      $value;       // Does not include -o- and -ms- because,
    #{$property}:           $value;       // you know ... They're useless.
}

@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow;
  -moz-box-shadow: $shadow;
  box-shadow: $shadow;
}

@mixin border-radius($border_radius) {
  -moz-border-radius: $border_radius;
  -webkit-border-radius: $border_radius;
  border-radius: $border_radius;
}

@mixin ellipsis() { text-overflow: ellipsis; white-space: nowrap; display: block; overflow: hidden; }
@mixin opacity($value) {
  opacity: $value;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" $value * 100 ")";
  filter: alpha(opacity= $value * 100 );
  zoom: 1;
}

@mixin font-size-margin($size) {
  font-size: $size;
  margin-top: $size/2;
  margin-bottom: $size/2;
}

@mixin grid($cols, $last: 0) {
  $gutter: 2% * ($last - 1);
  $column: $columnWidth - $gutter;
  width: ($cols * ($column + $gutter) - $gutter);
  margin-right: $gutter;
  float: left;

  @media (max-width: $responsiveWidth) {
    float: none;
    width: 100%;
  }
}

/*
 * http://html5reset.org + minor modifications
 */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video, details, summary { margin: 0; padding: 0; border: 0; font-size: 100%; line-height: 1.6em; vertical-align: baseline; background: transparent; }
article, aside, figure, footer, header, hgroup, nav, section, details, summary { display: block; }
ul { list-style: none; }
a { margin: 0; padding: 0; vertical-align: baseline; background: transparent; }
abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
th { font-weight: bold; vertical-align: bottom; }
td { font-weight: normal; vertical-align: top; }
input, select, button { vertical-align: middle; }
select, input, textarea { font-size: $fontSize - 1; }
table { font-size: inherit; font: 100%; }
.clickable, label, input[type=file], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
button { width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body { background-color: $backgroundColor; font-size: $fontSize; font-family: $fontFamily; -webkit-text-size-adjust: none; }
body, select, input, textarea { color: $fontColor; }
a, a:active { color: $linkColor; }
a:hover { color: darken($linkColor, 20%); }
input:-moz-placeholder { color: lighten($fontColor, 30%); }
textarea:-moz-placeholder { color: lighten($fontColor, 30%); }
li.separator { background: #eee; height: 1px; overflow: hidden; }

/*
 * Footer
 */
html, body { height: 100%; }
div.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom: -$footerHeight;

  div.clear {
    height: $footerHeight + 20;
    clear: both;
  }
}

footer {
  height: $footerHeight;
  width: 100%;
  background: #fff;
  color: #999;
  clear: both;
  padding: 0 ($bodyGutter - 5) 5px;
  overflow: hidden;
  position: fixed;
  bottom: 0;

  form {
    position: relative;
    display: none;
    input { font-family: inherit; font-size: 1.1em; width: 100%; padding: 8px; padding-right: 30px; }
    input.sending { background: url(../image/loader-facebook.gif) no-repeat 99% 50%; }
    input.disabled, input.sending.disabled { background-color: #eee; }
    .menu {
      position: absolute;
      top: 5px;
      right: 4px;
      a { color: #555; font-size: 22px; text-decoration: none; display: block; padding: 4px; }
    }
  }

  @media (max-width: $responsiveWidth) {
    position: static;
  }
}

/*
 * Typographi and base CSS
 */
h1 a, h3 a { text-decoration: none; }
h1 { @include font-size-margin(2em); }
h2 { @include font-size-margin(1.6em); }
h3 { @include font-size-margin(1.2em); }
img { max-width: 100%; }
p { margin: 1em 0; }
ol { margin-left: 2em; }
dl {
  $dtWidth: 220px;
  dt {
    width: $dtWidth;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  dd { margin-left: $dtWidth + $bodyGutter; }
}
.center { text-align: center; }
.hidden { display: none; }
.row { padding: 0 $bodyGutter; clear: both; }
.close {
  display: block;
  float: right;
  cursor: pointer;
  font-size: 1.3em;
  padding: 5px;
  line-height: 0.4em;
}

div.question { padding: 0.5em; @include border-radius(3px); }
div.question, li.info { background: #def; color: #158; border: 1px solid #bde; }
div.question .button { background: darken(#def, 10%); border: 2px solid darken(#def, 40%); }
div.question .button.confirm { background: darken(#def, 10%); border: 2px solid #900; }

a.active { background-color: darken(#fff, 10%); }

/*
 * Form elements
 */
form {
  margin: 0;
  label { display: block; margin-top: $bodyGutter; }

  select[multi] { height: 30px; }
  input[readonly] { background: #f6f6f6; color: #666; }
  .selectize-input, input, select {
    background: #fff;
    font-size: $fontSize - 1;
    outline: none;
    border: 2px solid #ccc;
    padding: 4px;
    width: 290px;
    @include border-radius(3px);
  }
  .selectize-input { padding: 2px; }
  .selectize-input.focus, input:focus { border: 2px solid darken(#ccc, 15%); }
  input[type="checkbox"] { width: auto; }
  input.field-with-error, select.field-with-error {
    border-color: $errorColor;
  }
  div.actions {
    margin-top: 2em;
    clear: left;
    padding: 0.5em 0;
  }
  p.help {
    color: #555;
    font-size: 0.9em;
    margin-top: 0.1em;
  }
}

form.horizontal {
  label {
    margin-top: 4px;
    float: left;
    width: 8em;
  }
  div.form-group {
    padding: 4px 0;
    clear: left;
  }
  div.actions {
    margin-top: 1em;
    margin-left: 8em;
  }
  p.help, p.error {
    font-size: 0.9em;
    margin: 2px 0 0 (8em / 0.9);
  }
  p.error {
    background: lighten($errorColor, 40%);
    width: 290px;
    margin-top: -3px;
    padding: 4px;
    border: 2px solid $errorColor;
    border-top: 0;
    @include border-radius(3px);
  }
  input.field-with-error, select.field-with-error {
    border-bottom: 0;
  }

  @media (max-width: 400px) {
    label {
      float: none;
      width: 100%;
    }
    div.actions, p.help, p.error {
      margin-left: 0;
    }
  }
}

form.edit-mode {
  a.edit-mode {
    display: none;
  }
}

button, .button {
  background: darken(#fff, 2%);
  color: #222;
  font-size: $fontSize;
  text-decoration: none;
  padding: 3px 6px;
  border: 2px solid darken(#fff, 40%);
  @include border-radius(3px);
}
button { vertical-align: baseline; } // make <a> and <button> align. at least in chrome
button:active, button.active, .button:active, .button.active { background: darken(#fff, 20%); }
button.confirm, a.confirm { color: #900; border: 2px solid #900; }
button:hover, .button:hover { border: $buttonBorderHover; }

hr {
  border: none;
  border-top: 1px solid #ddd;
  line-height: 1px;
  height: 1px;
  margin-top: 1em;
  padding-bottom: 1em;
}

@import "selectize.scss";

/*
 * Loading indicator
 */
div.loading-indicator-overlay,
div.loading-indicator {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: $navBarZindex - 100;
}
div.loading-indicator-overlay {
  background: #fff;
  @include opacity(0.7);
}
div.loading-indicator {
  background: url(../image/loader-squares-circle.gif) 50% 50% no-repeat;
}

/*
 * Chat
 */
nav.bar {
  background: #fafafa;
  position: fixed;
  padding: 0 $bodyGutter;
  top: 0;
  left: 0;
  right: 0;
  height: 42px;
  z-index: $navBarZindex;
  overflow: hidden;
  @include prefix(box-shadow, 0 4px 4px -2px rgba(180,180,180,.5));
  @include opacity(.95);

  a, a:active {
    color: #000;
    text-decoration: none;
    padding: 10px 4px;
    display: block;
    float: left;
  }

  a.conversation { color: #666; }
  a.conversations.toggler { display: none; }
  a.sidebar.toggler { display: none; }

  .right {
    background: #fafafa;
    position: absolute;
    right: $bodyGutter;
    a, a:active { font-size: 1.2em; width: 2em; text-align: center; }
    a.notifications.toggler { position: relative; }
    a.notifications.toggler b { position: absolute; bottom: -3px; right: 2px; color: #bbb; font-size: 0.9em; font-weight: normal; }
    a.notifications.toggler.alert b { color: #b22; }
    a.hidden { display: none; }
  }

  a.active, a:hover, a:active { background-color: darken(#fff, 15%); color: #000; }
  ul.conversations li.unread a { color: $unreadColor };
}

div.notification.question {
  padding-left: $bodyGutter;
  width: 100%;
  z-index: $navBarZindex - 1;
  position: fixed;
  top: 40px;
  display: none;
  button, .button { font-size: 0.9em; }
}

div.add-conversation.container,
div.conversations.container,
div.notifications.container,
div.sidebar.container {
  background: darken(#fdfdfd, 2%);
  position: fixed;
  top: 39px;
  width: 300px;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: $navBarZindex + 1;
  display: none;
  border: 1px solid darken(#fff, 15%);
  border-top-width: 6px;

  h3, a { color: #000; text-decoration: none; padding: 4px; display: block; }
  h3 { font-size: 1em; margin: 0; };
  button.inactive, a.inactive { color: lighten(#000, 60%); }

  ul ul li {
    a, button {
      background-image: url(../image/fa-caret-right.png);
      background-position: 9px 50%;
      background-repeat: no-repeat;
      font-size: 0.9em;
      height: 2em;
      padding: 2px 2px 2px 20px;
      border: 0;
    }
  }

  a:hover, a:active, a:focus {
    background-color: darken(#eee, 5%);
    color: #000;
    outline: 0;
  }
  a:focus, button:focus { background-color: darken(#fff, 8%); }
}

div.sidebar.container {
  button {
    background: transparent;
    width: 100%;
    text-align: left;
    display: block;
    overflow: visible; /* shrinkwrap the text in <IE7 */
    cursor: pointer;
    -moz-user-select: text;
  }

  button:hover, button:focus {
    background-color: darken(#eee, 5%);
    color: #000;
  }
}

div.add-conversation.container {
  padding-left: 3px;
  padding-bottom: 6px;
  height: auto;
}

div.conversations.container {
  li.unread a { color: $unreadColor };
}

div.notifications.container {
  li.unread { border-right: 2px solid #f66; }
  span.message { color: #666; font-size: 0.9em; line-height: 1em; @include ellipsis(); }
}

@media (min-width: $responsiveWidth) {
  div.sidebar.container {
    background: #f3f3f3;
    border: 0;
    border-left: 1px solid #ddd;
    width: $nickListWidth;
    position: fixed;
    display: block;
    top: 42px;
    bottom: -1px;
    right: 0;
    z-index: 2;

    h3, a { text-decoration: none; display: block; padding: 4px 8px; }
  }
}

div.messages {
  padding-top: 45px;

  li {
    display: block;
    position: relative;
    padding: 3px 0;
    overflow: hidden;

    div.question { padding-left: 50px; }
    button, .button { font-size: 0.9em; }
    img.avatar { float: left; max-width: 40px; }
    h3 { font-size: 1em; color: #467; line-height: 1.2em; margin: 0; }
    h3, div.content, div.embed { margin-left: 50px; }
    div.content { max-width: 40em; line-height:1.4em; }
    div.whitespace {  white-space: pre-wrap; }
    div.embed {
      max-height: 220px;
      img { max-height: 220px; border: 2px solid #bbb; @include border-radius(20px); margin: 8px 0; }
    }
    span.timestamp {
      position: absolute;
      top: 2px;
      right: 2px;
      color: #999;
      font-size: .85em;
    }
    span.actions {
      float: right;
      padding-right: 2px;
    }
  }

  li.same-nick { padding-top: 0; }
  li.action.message div.content { padding-top: 20px; }
  li.action.message.same-nick div.content { padding-top: 0; }
  li.action.message div.content a { font-weight: normal; text-decoration: none; }
  li.message-pending div.content { color: #999; }
  li.message-pending h3 { color: #ccc; }
  li.message-error { font-style: italic; }
  li.message-error h3 { color: #333; font-style: italic; }
  li.message-error, li.network-message.error { background: lighten($errorColor, 40%); }
  li.nick-change, li.nick-joined, li.nick-parted, li.nick-quit, li.notice, li.topic, li.whois {
    background-color: #f9f7fa;
    color: #888;
  }
  li.nick-change, li.nick-parted, li.nick-quit {
    .content b { font-weight: normal; }
  }
}

body.chat {
  footer form { display: block; }
  ul.conversations li.first a {
    background-color: darken(#fff, 5%);
    font-weight: bold;
    color: #000;
  }
}

body.convos {
  a.convos { background-color: darken(#fff, 5%); }
  footer form { display: block; }
}

body.without-sidebar {
  div.sidebar.container {
    display: none;
  }
}

body.with-sidebar {
  footer form { margin-right: $nickListWidth; }
  div.messages {
    margin-right: $nickListWidth;
    li.highlight { background: #fee; }
  }
}

body.historic {
  div.sidebar.container { display: none; }
  footer { display: none; }
  div.clear { height: 20px; }
}

div.goto-bottom a {
  display: none;
  background: #fafafa;
  color: #333;
  position: fixed;
  right: 6px;
  bottom: 42px;
  padding: 5px;
  z-index: $navBarZindex;
  border: 1px solid #ccc;
  @include border-radius(4px);
  @include opacity(.8);
}

body.tactile {
  background: #e7e7e7 url(../image/tactile-body-bg.png) 0 0 repeat;
}

/*
 * Landing page
 */
.landing-page {
  background: transparent url(../image/tactile-highlight-bg.jpg) 50% 0 no-repeat;
  min-height: 595px;

  .row {
    margin: auto;
    padding-top: 1em;
    width: 680px;
  }

  h1 {
    margin-bottom: 0;
    .logo {
      text-indent: -1000px;
      display: block;
      height: 55px;
      width: 300px;
      background: url('/image/logo.png') no-repeat top left;
      background: none,url('/image/logo.svg') no-repeat top left;
    }
    small {
      display: block;
      font-weight: normal;
      color: #999;
    }
  }
  h2.login-register {
    font-size: 1.1em;
  }
}

div.footer {
  font-size: 0.8em;
  margin-top: 2em;
  padding-top: 1em;
  a {
    color: #777;
    text-decoration: none;
  }
}

@media (max-width: $responsiveWidth) {
  footer, nav.bar, .row { padding: 0; }
  nav.bar .right { right: 0; }
  div.messages { margin-right: 0; }

  body.with-sidebar {
    nav.bar a.sidebar.toggler { display: block; }
    div.messages, footer form { margin-right: 0; }
    div.sidebar.container { display: none; }
  }

  body.with-sidebar,
  body.without-sidebar {
    div.wrapper {
      margin-bottom: -42px;
      div.clear { height: 42px; }
    }
  }

  footer {
    height: 42px;
    input, input:focus {
      border-bottom: 0;
      border-right: 0;
      border-left: 0;
    }
  }

  .landing-page {
    img { margin: 2em 0; }
    nav, .login, .register, .about { width: 100% };
    .row { width: 100%; padding-left: 10px; padding-right: 10px; }
  }

  dl {
    dt {
      float: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    dd { margin-left: $bodyGutter; }
  }
}

//
//  Font Awesome 3.0.2
//  -------------------------------------------------------
//  - The Font Awesome font is licensed under the SIL Open Font License - http://scripts.sil.org/OFL
//  - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
//    http://opensource.org/licenses/mit-license.html
//  - The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/
//  - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
//    "Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome"
//

$FontAwesomePath:   "../font";
$borderColor:       #eee;
$iconMuted:         #eee;

@font-face {
  font-family: 'FontAwesome';
  src: url('#{$FontAwesomePath}/fontawesome-webfont.eot?v=3.0.1');
  src: url('#{$FontAwesomePath}/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('#{$FontAwesomePath}/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('#{$FontAwesomePath}/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
//  url('#{$FontAwesomePath}/fontawesome-webfont.svg#fontawesomeregular?v=3.0.1') format('svg');
//  src: url('#{$FontAwesomePath}/FontAwesome.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

//  Font Awesome styles
//    -------------------------------------------------------
[class^="icon-"],
[class*=" icon-"] {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;

  display: inline;
  width: auto;
  height: auto;
  line-height: normal;
  vertical-align: baseline;
  background-image: none;
  background-position: 0% 0%;
  background-repeat: repeat;
  margin-top: 0;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  text-decoration: inherit;
  display: inline-block;
  speak: none;
}

/* makes sure icons active on rollover in links */
a {
  [class^="icon-"],
  [class*=" icon-"] {
    display: inline-block;
  }
}

/* makes the font 33% larger relative to the icon container */
.icon-large:before {
  vertical-align: -10%;
  font-size: 4/3em;
}

// Icon Borders
// -------------------------

.icon-border {
  border: solid 1px $borderColor;
  padding: .2em .25em .15em;
  @include border-radius(3px);
}

[class^="icon-"],
[class*=" icon-"] {
  &.pull-left {
    margin-right: .3em;
  }
  &.pull-right {
    margin-left: .3em;
  }
}

/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */
.icon-info-sign:before    { content: "\f023"; }
.icon-chevron-down:before   { content: "\f024"; }
.icon-comments:before   { content: "\f025"; }
.icon-bullhorn:before   { content: "\f027"; }
.icon-signout:before    { content: "\f026"; }
.icon-user:before    { content: "\f021"; }
.icon-cog:before    { content: "\f022"; }

body.chat nav .icon-cog:before { content: "\f021"; }
