body {
  font-family:'helvetica neue' sans-serif;
  font-size:100%;
  line-height:1.4;
  color:#444;
}
article {width:66%; margin:0px auto;}
p {margin-bottom:20px;}
//put default on direction (right as I perceive this to be the most common place I'll want a pull quote). Uses this if top, right, left or bottom isn't specified
/*Direction can be top, right, left, bottom*/
@mixin pull-quote-style($position:right) {
  overflow:hidden;
  //common styles
  &:before, &:after {
    display:block;
    font-family: 'Yesteryear', cursive;
    font-size:200%;
    text-align:center;
    color:hsla(280,60,30,1);
  }
  @if $position == top {
    &:before {
      content:"\201C" attr(data-pullquote-top) "\201D";
      margin:0px auto 10px;
      width:66%;
    }
  } @else if $position == left {
    &:before {
      content:"\201C" attr(data-pullquote-left) "\201D";
      float:left;
      margin:0px 20px 10px 0px;
      width:33%;
    }
  } @else if $position == bottom {
    &:after {
      content:"\201C" attr(data-pullquote-bottom) "\201D";
      margin:10px auto 0px;
      width:66%;
    }
  } @else {
    &:before {
      content:"\201C" attr(data-pullquote-right) "\201D";
      float:right;
      margin:0px 0px 10px 20px;
      width:33%;
    }
  }
}
p[data-pullquote-top] {@include pull-quote-style(top);}
p[data-pullquote-right] {@include pull-quote-style(right);}
p[data-pullquote-bottom] {@include pull-quote-style(bottom);}
p[data-pullquote-left] {@include pull-quote-style(left);}