
@import url(//fonts.googleapis.com/css?family=Raleway:100,300,700,900,500);
@import url(//fonts.googleapis.com/css?family=Roboto:100,300,400,700,900);
.box-shadow(@style) {
  -webkit-box-shadow: @style;
  -moz-box-shadow: @style;
  box-shadow: @style
}

// ---- Typography

body {
  font-weight: 500;
  font-family: Roboto,Helvetica,Arial,sans-serif;
}

.lead {
  font-weight: 300;
}

pre {
  color: white;
}

h1 small, .h1 small {
  font-weight: 500;
  color: lighten(@brand-primary, 10%);
}

// ---- Jumbotron

.jumbotron {
  .btn-primary {
    background-color: darken(@brand-primary, 7%);
  }
  
  p {
    font-weight: 300;
  }
}

// ---- Navs

.nav-pills > li.active > a, .nav-pills > li > a:hover {
  border-radius: 0;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover {
  border-top: 2px solid @brand-primary;
}

// ---- Navbar

.navbar {
  .box-shadow(0px 1px 6px rgba(0,0,0,0.15));
}

.navbar-static-top, .navbar-fixed-top {
  border-top: 2px solid @brand-primary;
  .box-shadow(0px -3px 12px rgba(0,0,0,0.5));
}

.navbar-fixed-bottom {
  border-bottom: 2px solid @brand-primary;
  .box-shadow(0px 3px 12px rgba(0,0,0,0.5));
}

// ---- Buttons

.btn {
  font-weight: 500;
}

.btn-default:hover {
  color: @gray;
  background-color: lighten(@brand-primary, 40%);
}

// ---- Labels

.label {
  border-radius: 0;
}

// ---- Pagination

.pagination > li > a {
  border-width: 0;
  border-bottom-width: 3px;
  
  &:first-child {
    border-left-width: 0;
  }
}

// ---- Panels

.panel {
  border-width: 0;
  border-top-width: 3px;
  .box-shadow(0 1px 10px rgba(0,0,0,0.15));
}

.panel-default {
  border-top-color: @brand-primary;
}

.panel-heading {
  background: transparent;
  border-bottom-color: @gray-lighter;
}

.panel-footer {
  background: transparent;
  border-top-color: @gray-lighter;
}

// ---- Progress Bars

.progress {
  .box-shadow(0 -1px 0px rgba(0,0,0,0.1) inset);
}

// ---- Composer

.composer {
  background: none repeat scroll 0% 0% rgba(35, 35, 35, 0.60);
}

.composer .formatting-bar span {
  color: @gray-light;
}