$background_color: #fff;

$masthead_border_color: black; // rgba(0,0,0,0.5);
$masthead_border: 1px solid $masthead_border_color;
$masthead_bg_color: #555; // rgba(96,96,96,0.2);
$masthead_color: #fff;
$masthead_height: 128px;

$masthead_text_left_margin: 150px;
$masthead_text_top_margin: 45px;
$masthead_text_size: 36px;

$cutout_color: darken($background_color,12%);

$side_column_bg_color: #d0d0d0; // rgba(0,0,0,0.05); // #e3e3e3
$side_column_border_color: #aaa; // rgba(0,0,0,0.2);
$side_column_active_bg_color: #000;
$side_column_active_color: $masthead_color;
$side_column_text_color: #000;

$well_color: #fff;
$well_bg_color: #fff;
$well_border_color: #555;

body {
  //background: #F5F1E8 url(/img/bg-sand.png) repeat-x;
  background-color: $background_color;
}

.masthead {
  border: $masthead_border;
  background: $masthead_bg_color;
  @include gradient-vertical(lighten($masthead_bg_color,8%),$masthead_bg_color);
  border-top: none;
  box-shadow: inset 0 0 8px 1px darken($masthead_bg_color, 8%);
  box-shadow-top: 0;
  .contents {
    @include cutout-menu(topnav, $masthead_text_left_margin, $cutout_color, $masthead_border);
    height: $masthead_height;
    background: url(/img/leap-color-small.png) 10px 50% no-repeat;
  }
  h1 {
    margin: 0;
    color: $masthead_color;
    line-height: $masthead_height;
    font-size: $masthead_text_size;
    white-space: nowrap;
    overflow: hidden;
    padding-left: $masthead_text_left_margin - 2px;
  }
  #topnav a.tab {
    font-weight: bold;
    color: white;
    background: rgba(0,0,0,0.5);
    &.active {
      color: black;
    }
  }
}

.nav-tabs.nav-stacked li {
  background: $side_column_bg_color;
  &.active {
    a {
      border: 0;
      border-right: 4px solid $side_column_active_bg_color;
      background: $side_column_active_bg_color;
      color: $side_column_active_color;
      &:hover {
        //color: $side_column_text_color;
        background: lighten($side_column_active_bg_color, 40%);
        border-color: lighten($side_column_active_bg_color, 20%);
      }
    }
  }
  //&.semi-active a {
  //  background: darken($side_column_bg_color,10%);
  //  color: black;
  //}
  a {
    cursor: pointer;
    border-radius: 0 !important;
    border: 0;
    border-right: 4px solid $side_column_active_bg_color;
    color: $side_column_text_color;
    line-height: 1.2em;
    &:hover {
      background: lighten($side_column_bg_color, 10%);
      border-color: lighten($side_column_active_bg_color, 50%);
      text-decoration: underline;
    }
    &.level2 {
      padding-left: 2em;
    }
    &.level3 {
      padding-left: 3em;
    }
    &.level4 {
      padding-left: 4em;
    }
  }
}

.side_column ul {
  box-shadow: 2px 4px 4px 0px darken($background_color,40%);
  //background: $side_column_bg_color;
  //box-shadow: inset 0px 0px 5px 2px darken($side_column_bg_color,10%);
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 400px;
  z-index: -1;
  @include gradient-vertical(darken($background_color, 17%), $background_color);
}

.pullout {
  background: rgba(0,0,0,.1);
}

//
// like bootstrap well, but not roundy
//

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 11px; // same as 'p', not sure what variable this is.
  background-color: $well_bg_color;
  box-shadow: inset 0px 0px 5px 1px darken($well_bg_color,10%);
  border: 1px solid lighten($well_border_color,50%);
  .heading {
    margin-top: -6px;
    margin-bottom: 6px;
    font-weight: bold;
    font-size: 1.1em;
  }
}

.standout {
  a {color: black;}
  span {
    margin: 0 20px;
    font-size: 18px;
  }
  .fa {
    vertical-align: middle;
  }
  text-align: center;
  line-height: 48px;
  margin-bottom: 20px;
}

//
// inverted headings
//

//.invert {
//  color: white;
//  background-color: $well_border_color;
//  padding-left: 12px;
//}


table.timeline {
  td:first-child {
    text-align: right;
    white-space: nowrap;
    padding-right: 0;
  }
  td {
    vertical-align: top;
    padding: 6px;
  }
}

//
// blog stuff
//


article.blog_summary {
  margin: 1em 0;
  @include clearfix();
  .byline {
    color: #999;
  }
  .content {
    p {
      margin-bottom: 0;
    }
  }
  h2 {
    line-height: 20px;
    margin-top: 10px;
  }
}

article.blog_full {
  .byline {
    font-weight: bold;
    margin-bottom: 0.5em;
    font-size: 1em;
    color: #999;
  }
}