// -------------------------------------------
// Content region structure
// Includes #content, #content-below, .sidebars
// -------------------------------------------

// Highlighted region 
// -------------------------------------------
#highlighted {
  @include clearfix;
  background-color: $gray-lighter;
  border-bottom: 1px solid rgba($gray, 20%/100.0%);
  border-top: none; //1px solid rgba($white, 30%/100.0%);
  @include transition(all 0.4s ease-out);
  color: $gray;
}

// Content Region 
// -------------------------------------------
#content {
  padding: $grid-gutter-width 0;  
}

// Page header region
// -------------------------------------------
$page-header-padding: 30px;
#page-header,
.page-header {
  background-color: darken(white, 0.5%);
  border-bottom: 1px solid darken($gray-lightest, 5%);
  padding: $page-header-padding 0;
  
  .breadcrumb {
    padding: 0;
    margin: 0;
    background-color: transparent;
  }
  
  .page-header-tabs {
    position: relative;
    bottom: -$page-header-padding - 1;
    margin-bottom: 0;
  }
}

// Variations $todo move
// -------------------------------------------
html,
body {
  //&.page-boxed {
  //  .page-wrapper {
  //    background: white;
  //    //width: 70%;
  //    margin: 0 auto 15px auto;
  //    padding-bottom: 15px;
  //  }
  //}
  
  &.page-translucent {
    background: transparent;
    @include translucent_background(white, 0.7);
  }
}

// Content Below Region 
// -------------------------------------------
#content-below {
  background: $brand-faded;
}


// $Responsive 
// -------------------------------------------
@include media-breakpoint-up(md) {
  .sidebar-left,
  .sidebar-right {
    position: relative;
    
    &:after {
      height: 100%;
      width: 1px;
      background: $gray-lighter;
      content: '';
      position: absolute;
      right: 0;
      left: auto;
      top: 0;
      bottom: 0;
    }
  }
  
  .sidebar-left {
    padding-right: 30px;
  }
  
  .sidebar-right {
    padding-left: 30px;
    
    &:after {
      right: 0;
      left: 0;
    }
  }      
}