Bug 809791: email: fix menu icon in header during folder transition

This pull request builds on the one from @sungwoo.yoon in https://github.com/mozilla-b2g/gaia/pull/9496 and adds the following:

* Move the message-list styles to message-cards.css as the styles are specific to that kind of card.
* Adjust the width of the gutter to 5em. This makes it so just the icon box is visible, as per https://www.dropbox.com/s/ww9fjv19csjn5md/04%20Email_Drawer.png. This was tested on an Unagi device.
* Removes the hardcoded TRAY_GUTTER_WIDTH check for transitioning back to message list, and instead detects if the tap was in the message list card. So if the width of the gutter changes in the future, it will just be a CSS change.