@mixin section-header {
  @include secondary-gradient;
  @include text-shadow;
  border: solid 1px #cdcdcd;
  @include border-colors(#e6e6e6, #d4d4d4, #cdcdcd);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 0 1px #FFF inset;

  font-size: 1.0em;
  font-weight: bold;
  line-height: 18px;
  margin-bottom: 0.5em;
  color: $section-header-text-color;
  @include icon($section-header-text-color, 1.0em);

  padding: 5px 10px 3px 10px;
}

@mixin section-background {
  background: #f4f4f4;
  @include rounded(4px);
  @include inset-shadow(0,1px,4px, #ddd);
}

@mixin section {
  @include section-background;
  margin-bottom: 20px;

  > h3 {
    @include section-header;

    .header_action {
      float: right;
    }
  }

  > div { padding: 3px $section-padding $section-padding $section-padding; }

  hr {
    border: none;
    border-bottom: 1px solid #E8E8E8;
  }
}
