/* Visual Elements */
img{
  vertical-align:top;
}
.photograph{
  >.inner-photograph{
    overflow:hidden;
    display:inline-block;
    background-color:white;
    border:1px solid #bbb;
    padding:1px;
    @include border-radius(2px);
    img{
      @include border-radius(2px);
      width:100%;
    }
  }
}
.notice-message{
  @include border-radius(10px);
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  color: #333;
  font-weight: bold;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 10px;
}
.alert-message{
  @extend .notice-message;
  background-color: #FFA5A5;
  border-color:#993333;
  color: #993333;
}
.warning-message{
  @extend .notice-message;
  background-color: #FAFAD2;
  border-color:#BC8E19;
  color: #BC8E19;
}
.success-message{
  @extend .notice-message;
  background-color:#BDEDB6;
  border-color:#264421;
  color: #264421;
}

/* Base splats that can be extended into other classes */

.splat-base{
  border-color:$cm-base;
  color:$cd-base;
  @include background(linear-gradient($ch-base, $cl-base));
}
.splat-base-d{
  border-color:$cd-base;
  color:$ch-base;
  @include background(linear-gradient($cm-base, $cd-base));
}
.splat-high{
  border-color:$cm-high;
  color:$cd-high;
  @include background(linear-gradient($ch-high, $cl-high));
}
.splat-high-d{
  border-color:$cd-high;
  color:$ch-high;
  @include background(linear-gradient($cm-high, $cd-high));
}
.splat-comp{
  border:$cm-comp;
  color:$cd-comp;
  @include background(linear-gradient($ch-comp, $cl-comp));
}
.splat-comp-d{
  border-color:$cd-comp;
  color:$ch-comp;
  @include background(linear-gradient($cm-comp, $cd-comp));
}