//
// 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.
#main {
  *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;
}

//
// OS specific
//

.os-android {
  display: none !important;
}

html.android .os-android {
  display: inherit !important;
}

.os-linux32 {
  display: none !important;
}

html.linux32 .os-linux32 {
  display: inherit !important;
}

.os-linux64 {
  display: none !important;
}

html.linux64 .os-linux64 {
  display: inherit !important;
}

.os-windows {
  display: none !important;
}

html.windows .os-windows {
  display: inherit !important;
}

.os-osx {
  display: none !important;
}

html.osx .os-osx {
  display: inherit !important;
}

.os-other {
  display: none !important;
}

html.oldmac, html.oldwin, html.ios, html.fxos, html.other {
  .os-other {
    display: inherit !important;
  }
}

//
// ICONS
//

[class*="-icon-"] {
  display: inline-block;
  @include ie7-restore-right-whitespace();
  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: $baseFontSize * 1.25;
  line-height: $baseLineHeight * 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: $white;
  text-shadow: none;
  color: $black;
}

// 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%;
  }
}

//
// 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;
  }
}

.home-buttons {
  text-align: center;
  .first {
    margin: 20px 0;
  }
  .download {
    a.btn {
      width: 14em;
      small {
        font-weight: normal;
      }
    }
  }
  a.btn {
    font-weight: bold;
    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: $linkColor;
      color: $white;
      border-color: darken($linkColor, 0%);
      cursor: pointer;
    }
  }
}

//
// USERS
//

.overview li {
  padding: 6px 0;
}