Update grid-units to fix #154 and #41

This pull request updates the grid units within Pure to fix #154 and #41. Here how it works:

## Fixing IE7 Grids Breakage (#154)

In IE7, the grid can break when you have multiple units than span multiple "rows", without each row being separated by a `.pure-g`. The fiddle over at #154 demonstrates this. This occurs because of IE's sub-pixel rounding. I have fixed this by adding `*width* to the grid to account for this sub-pixel round-up that IE does.

## Fixing Grid spacing (#41)

This issue doesn't have a particular "best" solution, so it's a matter of making tradeoffs. We decided that it's best to explicitly set `font-family` because atleast it's easier to work with than `font-size` inheritance. With this in mind, there were three options:

### Option 1: Custom Web Font
I thought this wasn't a good idea because the web font would add k-weight, and take time to load, which means that the browser would see a noticible jerk.

### Option 2: `font-family: Arial, sans-serif;` on `.pure-g`
This is a better solution, but adding `font-family` to `pure-g` means that all implementations out there that *don't* use Arial but *don't* have a broken grid (for example: purecss.io) would need to re-declare their fonts, when the old grid was working fine for them. I didn't want their layout to change under their feet.

###  Option 3: `font-family: Helvetica, Arial, sans-serif;` on a new `.pure-fr` class
This is very similar to Option 2, but I moved the `font-family` rule into a new class called `.pure-fr` (stands for **font reset** but I'm up for changing it if people don't like it). This way, people who are seeing the grid break can stamp their existing `.pure-g` with this class.

So basically, it would look like this:
```html
<div class="pure-g pure-fr">
  ...
</div>
```

People who **don't** see the breakage in issue #41 don't have to worry about doing any of this. Everything works fine for them. Now, the `.pure-fr` class adds `font-family: "Helvetica", "Arial", sans-serif`, because Linux doesn't have a default font for `sans-serif`, and we want OSX users to get Helvetica instead of Arial.

***If you want to use a custom font within a grid, this is what you should do:***

HTML:
```html
<div class="pure-g pure-fr">
  ...
</div>
```

CSS: 
```css
/* all grid units within a .pure-fr would get the custom font.*/
.pure-fr [class *= "pure-u"] {
  font-family: "My Custom Font A", sans-serif;
}
```

Don't do this, it won't work.
```css
/* all grid units within a .pure-fr would get the custom font. */
.pure-fr {
  font-family: "My Custom Font A", sans-serif;
}
```