styled markdown modal and link

lms/static/sass/course/wiki/_wiki.scss

@@ -567,29 +567,79 @@ section.wiki {
     background: #f00 !important;
   }
 
+  .cheatsheet {
+    float: right;
+    position: relative;
+    top: -26px;
+    font-size: 12px;
+  }
+
   #cheatsheetLink {
-   text-align:right;
-   display: float;
+    text-align: right;
+    display: float;
   }
 
   #cheatsheetModal {
-   width: 350px;
-   margin-left: 100px;
-   margin-top: -100px;
-   }
+    width: 950px;
+    margin-left: -450px;
+    margin-top: -100px;
+
+    .left-column {
+      margin-right: 10px;
+    }
+
+    .left-column,
+    .right-column {
+      float: left;
+      width: 450px;
+    }
+
+    .close-btn {
+      display: block;
+      position: absolute;
+      top: -8px;
+      right: -8px;
+      width: 30px;
+      height: 30px;
+      border-radius: 30px;
+      border: 1px solid #ccc;
+      @include linear-gradient(top, #eee, #d2d2d2);
+      font-size: 22px;
+      line-height: 28px;    
+      color: #333;
+      text-align: center;
+      @include box-shadow(0 1px 0 #fff inset, 0 1px 2px rgba(0, 0, 0, .2));
+    }
+  }
 
   #cheatsheet-body {
-   background: #FFF;
-   text-align: left;
-   padding: 10px;
+    background: #fff;
+    text-align: left;
+    padding: 20px;
+    font-size: 14px;
+    @include clearfix;
+
+    h3 {
+      font-weight: bold;
+    }
+
+    ul {
+      list-style: circle;
+      line-height: 1.4;
+      color: #333;
+    }
+  }
+
+  #cheatsheet-body section + section {
+    margin-top: 40px;
   }
 
   #cheatsheet-body pre{
-   color: #000;
-   text-align: left;
-   background: #EEE;
-   margin:10px;
-   padding: 10px;
+    color: #000;
+    text-align: left;
+    background: #eee;
+    padding: 10px;
+    font-size: 12px;
   }
 
   /*-----------------

lms/templates/wiki/base.html

@@ -42,9 +42,12 @@
     <script type="text/javascript">
 	    $(document).ready(function () {
           editor = $('#div_id_content div.controls');
-          cs = editor.prepend('<a id="cheatsheetLink" href="#">cheatsheet</a>');
+          cs = editor.prepend('<p class="cheatsheet">Markdown syntax is allowed. See the <a id="cheatsheetLink" href="#">cheatsheet</a> for help.</p>');
           cs.click(function() {
               $('#cheatsheetModal').modal('show');
+          });
+          $('#cheatsheetModal .close-btn').click(function(e) {
+            $('#cheatsheetModal').modal('hide');
           });
 	    });
     </script>

lms/templates/wiki/includes/cheatsheet.html

-<section id="cheatsheetModal" class="modal hide fade" >
-<div id="cheatsheet-body" class="modal-body">
-<h2>Wiki Syntax Help</h2>
-<p> This wiki uses <strong>Markdown</strong> for styling.
-  There are several <a href="http://daringfireball.net/projects/markdown/basics" target="_blank">useful</a>
-  <a href="http://greg.vario.us/doc/markdown.txt" target="_blank">guides</a>
-  <a href="http://www.lowendtalk.com/discussion/6/miniature-markdown-guide" target="_blank">online</a>.
-<p> To create a new wiki article, create a link to it. Clicking the link gives you the creation page.
-<pre>
-[Article Name](wiki:ArticleName)
-</pre>
-<h2> Useful examples:</h2>
-<pre>
+<section id="cheatsheetModal" class="modal hide fade">
+	<a href="#" class="close-btn">×</a>
+	<div id="cheatsheet-body" class="modal-body">
+		<div class="left-column">
+			<section>
+				<h2>Wiki Syntax Help</h2>
+				<p>This wiki uses <strong>Markdown</strong> for styling. There are several useful guides online. See any of the links below for in-depth details:</p>
+				<ul>
+					<li><a href="http://daringfireball.net/projects/markdown/basics" target="_blank">Markdown: Basics</a></li>
+					<li><a href="http://greg.vario.us/doc/markdown.txt" target="_blank">Quick Markdown Syntax Guide</a></li>
+					<li><a href="http://www.lowendtalk.com/discussion/6/miniature-markdown-guide" target="_blank">Miniature Markdown Guide</a></li>
+				</ul>
+				<p>To create a new wiki article, create a link to it. Clicking the link gives you the creation page.</p>
+				<pre>[Article Name](wiki:ArticleName)</pre>
+			</section>
+			<section>
+				<h3>edX Additions:</h3>
+				<pre>
+circuit-schematic:</pre>
+				<pre>
+$LaTeX Math Expression$</pre>
+			</section>
+		</div>
+
+		<div class="right-column">
+			<section>
+				<h3>Useful examples:</h3>
+				<pre>
 http://wikipedia.org
 [Wikipedia](http://wikipedia.org)
-[edX Wiki](wiki:/edx/)
-</pre>
-<pre>
+[edX Wiki](wiki:/edx/)</pre>
+				<pre>
 Huge Header
-===========
-</pre>
-<pre>
+===========</pre>
+				<pre>
 Smaller Header
---------------
-</pre>
-<pre>
-*emphasis* or _emphasis_
-</pre>
-<pre>
-**strong** or __strong__
-</pre>
-<pre>
+--------------</pre>
+				<pre>
+*emphasis* or _emphasis_</pre>
+				<pre>
+**strong** or __strong__</pre>
+				<pre>
 - Unordered List
-  - Sub Item 1
-  - Sub Item 2
-</pre>
-<pre>
+	- Sub Item 1
+	- Sub Item 2</pre>
+				<pre>
 1. Ordered
-2. List
-</pre>
-<pre>
-> Quotes
-</pre>
-<h2>edX Additions:</h2>
-<pre>
-circuit-schematic:
-</pre>
-<pre>
-$LaTeX Math Expression$
-</pre>
-</div>
-</div>
+2. List</pre>
+				<pre>
+> Quotes</pre>
+			</section>
+		</div>
+
+		</div>
+	</div>
 </section>