fix all the places we were using incorrect css3 gradients

fixes: #CNVS-13294

firefox can render gradients prefix-free but
all of these were using an invalid syntax for css3
gradients. The invalid syntax still works in chrome
but not firefox (or other browsers).

That's a huge gotcha because almost every
example & tutorial out there also uses the bad syntax
and that's also how you would do the prefixed version
if it was required.

Now that we use autoprefixer, it was leaving
the unprefixed rule in-tact and not printing
a -moz one. and since these used the wrong syntax
for the unprefixed ones they didn't work in FF

so: you should use `to bottom` instead of `top`:

bad:
background: linear-gradient(top, white, black)
good:
background: linear-gradient(to bottom, white, black)

see: https://github.com/ai/autoprefixer#why-dont-gradients-work-in-firefox

test plan:
make sure these look right:
1. Assignments Gradebook:Grid View 
   http://screencast.com/t/eVop4gcbogm
2. Assignments Gradebook:Grid View Settings Dropdown 
   http://cl.ly/image/1g0M203Z250c 
   (BG color on hover isn't showing)
3. SpeedGrader student dropdown 
   http://cl.ly/image/2P2g0O3I3R08

Change-Id: Ie76a53da026dacfc0e1c21561292aa616b3de7c4
Reviewed-on: https://gerrit.instructure.com/35808
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Braden Anderson <banderson@instructure.com>
QA-Review: Clare Strong <clare@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>