Sync styles with khan-exercises

Summary:
Get the styles into a form that they can be directly copied over to
khan-exercises, with no changes. Mostly just changing #math to .mathmathmath
and adding a font style and size.

Test Plan: Make sure that the local test still works.

Reviewers: spicyj

Reviewed By: spicyj

Differential Revision: http://phabricator.benalpert.com/D47

static/mjlite.css

@@ -0,0 +1,147 @@
+@import "fonts/fonts.css";
+
+/*
+thin space: 1/6 quad
+medium space: 2/9 quad
+thick space: 5/18 quad
+
+things to do:
+^ _ and styles
+\sin
+\sum, \int, \lim
+\frac
+\sqrt
+big parens
+*/
+
+.mathmathmath {
+    font: normal 1.21em mjlite_main;
+    line-height: 1.4;
+}
+
+.mathit {
+    font-family: mjlite_math;
+    font-style: italic;
+}
+
+.mord + .mbin {
+    margin-left: 0.22222em;
+}
+
+.mbin + .mord {
+    margin-left: 0.22222em;
+}
+
+.mbin + .mopen {
+    margin-left: 0.22222em;
+}
+
+.mclose + .mbin {
+    margin-left: 0.22222em;
+}
+
+.mrel + .mord {
+    margin-left: 0.27778em;
+}
+
+.mord + .mrel {
+    margin-left: 0.27778em;
+}
+
+.mrel + .mopen {
+    margin-left: 0.27778em;
+}
+
+.mclose + .mrel {
+    margin-left: 0.27778em;
+}
+
+.msub {
+    vertical-align: bottom;
+    font-size: 70%;
+    position: relative;
+    top: 0.2em;
+}
+
+.msup {
+    position: relative;
+    top: -0.5em;
+    font-size: 70%;
+}
+
+.msupsub {
+    display: inline-table;
+    table-layout: fixed;
+    vertical-align: middle;
+}
+
+.msupsub > .msup, .msupsub > .msub {
+    display: table-row;
+    vertical-align: baseline;
+    line-height: 1em;
+}
+
+.mfrac {
+    display: inline-table;
+    vertical-align: 0.66em;
+    padding-left: 0.16667em;
+    padding-right: 0.16667em;
+}
+
+.mfracnum, .mfracmid, .mfracden {
+    display: table-row;
+    text-align: center;
+}
+
+.mfracmid > span {
+    background: black;
+    display: block;
+    height: 0.05em;
+    min-height: 1px;
+}
+
+.mfracnum > span {
+    display: inline-block;
+    vertical-align: bottom;
+}
+
+.mspace {
+    display: inline-block;
+}
+
+.mspace.thinspace {
+    width: 0.16667em;
+}
+
+.mspace.mediumspace {
+    width: 0.22222em;
+}
+
+.mspace.thickspace {
+    width: 0.27778em;
+}
+
+.mspace.quad {
+    width: 1em;
+}
+
+.mspace.qquad {
+    width: 2em;
+}
+
+
+.mord.blue { color: #6495ed; }
+.mord.orange { color: #ffa500; }
+.mord.pink { color: #ff00af; }
+.mord.red { color: #df0030; }
+.mord.green { color: #28ae7b; }
+.mord.gray { color: gray; }
+.mord.purple { color: #9d38bd; }
+
+.blue .mfracmid > span { background: #6495ed; }
+.orange .mfracmid > span { background: #ffa500; }
+.pink .mfracmid > span { background: #ff00af; }
+.red .mfracmid > span { background: #df0030; }
+.green .mfracmid > span { background: #28ae7b; }
+.gray .mfracmid > span { background: gray; }
+.purple .mfracmid > span { background: #9d38bd; }