@mixin umlaut-container {
  // double left gutter/margin when big enough
  padding-left: $umlautContainerPadding * 2;
  padding-right: $umlautContainerPadding * 2;
  
  // get rid of double left margin at smaller
  @media (max-width: 767px) {
    padding: {
      left: $umlautContainerPadding;
      right: $umlautContainerPadding;
    }
  }

  // IE8 and other browsers without media query, 
  // we need to keep it from getting too small,
  // cause it won't use the styles for small. 
  // we use a media query as 'feature detection' in our CSS
  min-width: 600px;
  @media (min-width: 0) {
    min-width: 0;
  }
}

@mixin umlaut_icons {
  background: {
    image: image-url("umlaut_icons.png");
    repeat: no-repeat;
  }
  display: inline-block;
  width: 16px;
  height: 16px;
  @include ie7-restore-right-whitespace();
  line-height: 16px;
  vertical-align: top;
  margin-top: 1px;
}

@mixin iconed-response {
  .response_item  {
    a {
      font-weight: bold;
    }
    i {
      @include umlaut_icons;
    }
  }
}

@mixin umlaut-well($backgroundColor, $borderColor) {
  /* copied from bootstrap well, because we change parts, not worth
     it to override, we change so much and well is so simple.  */
  background-color: $backgroundColor;
  min-height: 20px;

  padding: 9px;
  margin-left: -9px; /* so left edge of text still lines up */
  margin-right: -9px;


  border: 1px solid $borderColor;
  @include border-radius($baseBorderRadius);
  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
}