Separators between items in user menu should be in CSS, not HTML

[Jono M]

The '|'s that separates items in the user menu (top right, Firstname Lastname, Settings, Inbox, Logout) is currently in the HTML, which means that they are read out as "vertical bar" by some screen readers. This is annoying as the text is only supposed to be decorative.
Either the '|'s should be changed to borders or the :before/:after pseudo-elements should be used to draw them. Note that pseudo-elements are supported in IE8 and up so compatibility isn't a problem.

Affects latest master

[Jono M (jonom)]

This would also allow us to remove the first one in the responsive theme, where the username is on a separate line to the other links

[Mahara Bot (dev-mahara)]

Patch for "master" branch: https://reviews.mahara.org/3381

[Aaron Wells (u-aaronw)]

There are also some more |'s in the performance info footer. (Add "$cfg->perftofoot = true;" to your config.php file.)

[Mahara Bot (dev-mahara)]

Reviewed: https://reviews.mahara.org/3381
Committed: http://gitorious.org/mahara/mahara/commit/b8e2fde51220a7bea3527d8e6584363b73a657b6
Submitter: Aaron Wells (<email address hidden>)
Branch: master

commit b8e2fde51220a7bea3527d8e6584363b73a657b6
Author: Robert Lyon <email address hidden>
Date: Mon May 26 10:05:23 2014 +1200

Changing separating | to be border line (Bug 1279996)

To avoid the separating line between items in top right menu and in
the footer menu being read by some screen readers I've changed the
pipe char to be css border left.

Also dropped one of the top menu border bars when on small screens

Change-Id: I3e23fbf8fbad2480c9e9aaae56eda60fc7dede66
Signed-off-by: Robert Lyon <email address hidden>