//
// LAYOUT
//

// This is a trick to be able to use bootstrap fluid layout and also have a max-width.
// It is like having your cake and eating it too.
// not needed in bootstrap 3
#main, #masthead-text {
  *zoom: 1;
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
  max-width: 100%;
}

//
// UTILITY
//

//.debug {
// outline: 1px solid red;
//}

.full-width {
  width: 100%;
}

.slim {
  margin: 0;
}

.first {
  margin-top: 0;
  padding-top: 0;
}

.last {
  margin-bottom: 0;
  padding-bottom: 0;
}

.hidden {
  display: none;
}

.admin-area {
  background-color: #fff6ef;
  background-image: url(/leap-img/caution.png);
  border: 1px dotted #eea;
  border-radius: 4px;
  padding: 4px 6px;
}

//
// ICONS
//

[class*="-icon-"] {
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  margin-top: 1px;
}

[class^="big-icon-"],
[class*=" big-icon-"] {
  width: 64px;
  height: 64px;
  line-height: 64px;
}

[class^="huge-icon-"],
[class*=" huge-icon-"] {
  width: 128px;
  height: 128px;
  line-height: 128px;
}

.big-icon-download {
  height: 42px;
  background: url(/leap-img/64/download.png) 50% 50%;
}

.huge-icon-mask {
  height: 64px;
  background-image: url(/leap-img/128/mask.png);
}

//
// TYPOGRAPHY
//

input.large {
  font-size: $font-size-base * 1.25;
  line-height: $line-height-base * 1.5;
}

.p {
  @extend p;
}

//
// BOOTSTRAP TWEAKS
//

//
// Sometimes we really want full width controls, but this flies in the face of
// what bootstrap does for control sizes, so we have to step on bootstrap's
// toes a bit to make this work.
//
input, textarea {
  &.full-width {
    height: inherit;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
}

// like a label, but with no background
.label-clear {
  background-color: $body-bg;
  text-shadow: none;
  color: $gray-base;
}

// force a black icon, even if bootstrap thinks differently
.icon-black {
  background-image: url(/assets/glyphicons-halflings.png) !important;
}

// override stupid bootstrap behavior of making the active tab appear non-clickable
// and links not being underline
.nav-tabs > li > a:hover, .sidenav > li > a:hover {
  text-decoration: underline;
}
.nav-tabs > .active > a:hover {
  cursor: pointer;
}

//
// TICKETS
//

.ticket {
  td.user {
    white-space: nowrap;
  }
  td.comment {
    width: 100%;
  }
}

//
// IDENTITIES
//

// Color code for the identity labels
.identity{
  &.main_email .label {
    @extend .label-info
  }
  &.alias .label {
    @extend .label-success
  }
  &.forward .label {
    @extend .label-warning
  }
  &.disabled .label {
  }
}


//
// BORING DEFAULT MASTHEAD
//

#masthead {
  background: #eee;
  margin-bottom: 10px;
  border-bottom: 1px solid #e6e6e6;
  .title {
    padding: 20px;
    font-size: 1.25em;
  }
  .sitename {
    font-weight: bold;
  }
  a {
    color: $text-color;
  }
}

.home-buttons {
  text-align: center;
  .first {
    margin: 20px 0;
  }
  .download {
    a.btn {
      width: 18em;
      font-weight: bold;
      small {
        font-weight: normal;
      }
    }
  }
  a.btn {
    width: 11em;
    margin: 10px auto;
    display: block;
  }
}

//
// SIDE NAVIGATION
//

.user_heading {
  margin: 1em 0;
  font-weight: bold;
}

.sidenav {
  @extend .nav-tabs;
  @extend .nav-stacked;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  li.active {
    a, a:hover {
      background-color: $link-color;
      color: $body-bg;
      border-color: darken($link-color, 0%);
      cursor: pointer;
    }
  }
}

//
// USERS
//

.overview li {
  padding: 6px 0;
}

//
// INVITES
//

input.invite-code {
  background: none;
  border: none;
  cursor: pointer;
}

//
// STICKY FOOTER for BOOSTRAP 2
// http://getbootstrap.com/2.3.2/examples/sticky-footer.html
// when upgrading to bootstrap 3, use this instead:
// http://getbootstrap.com/examples/sticky-footer/
//

$footer-height: 100px;
$footer-border-width: 1px;
$footer-gutter: 20px; // vertical gap above footer
$footer-combined: $footer-height + $footer-border-width + $footer-gutter;
$footer-color: $gray-lighter !default;

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -1 * ($footer-height + $footer-border-width + $footer-gutter);
}

#push {
  height: $footer-height + $footer-gutter - $footer-border-width;
}

#footer {
  padding-top: $footer-gutter;
  height: $footer-height - $footer-border-width;
  display: table;
  width: 100%;
  .row {
    height: $footer-height/2;
    display: table-row;
    .wrap-text {
      vertical-align: middle;
      text-align: center;
      display: table-cell;
    }
  }
  .locales {
    a {
      padding: 4px;
      &.active {
        font-weight: bold;
        background-color: #333;
        color: white;
        border-radius: 4px;
      }
    }
  }
  .links {
    // border-top: $footer-border-width solid darken($footer-color, 10%);
    background-color: $footer-color;
    a {
      color: $gray-base;
      margin: 0 5px;
    }
  }
}

 @media (max-width: 767px) {
  #footer a {
    font-size: 80%;
    margin: 0 2px;
  }
}
.modal-footer form{
  margin: 0;
}