CQS: make the answer tears hollow and CSS updates

The little answer "tears" or bubbles in the answer details section are
now hollow except for the correct answer.

Also, some CSS refactoring, better use of variables and more consistent
naming.

Closes CNVS-16316

Change-Id: I99338d0b2dbafed2bc49f9841f04ae539f4fb61d
Reviewed-on: https://gerrit.instructure.com/42954
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Derek DeVries <ddevries@instructure.com>
QA-Review: Trevor deHaan <tdehaan@instructure.com>
Product-Review: Ahmad Amireh <ahmad@instructure.com>