Added styles and html for social links

--HG--
branch : kf-sequence-nav

main.html

@@ -38,12 +38,25 @@
     <!-- Template based on a design from http://www.dotemplate.com/ - Donated $10 (pmitros) so we don't need to include credit. -->
     <p> Copyright &copy; 2012. MIT. <a href="/t/copyright.html">Some rights reserved.</a>
 </p>
+      <nav>
+      <ul class="social">
+        <li class="linkedin">
+          <a href="http://www.linkedin.com/groups/Friends-Alumni-MITx-4316538">Linked In</a>
+        </li>
+        <li class="twitter">
+          <a href="https://twitter.com/#!/MyMITx">Twitter</a>
+        </li>
+        <li class="facebook">
+          <a href="http://www.facebook.com/pages/MITx/378592442151504">Facebook</a>
+        </li>
+      </ul>
     <ul>
       <li><a href="#feedback_div" rel="leanModal">Feedback</a></li>
       <li><a href="#calculator_div" rel="leanModal">Calculator</a></li>
       <li><a href="/s/help.html">Help</a></li>
       <li><a href="/logout">Log out</a></li>
     </ul>
+      </nav>
   </footer>
 
     <div id="feedback_div" class="leanModal_box">

sass/layout/_footer.scss

@@ -26,22 +26,69 @@ footer {
     }
   }
 
-  ul {
+  nav {
     float: right;
 
-    li {
-      display: inline-block;
-      margin-right: 20px;
+    ul {
+      float: left;
 
-      a {
-        color: #444;
+      li {
+        display: inline-block;
+        margin-right: 20px;
 
-        &:link, &:visited {
+        a {
           color: #444;
+
+          &:link, &:visited {
+            color: #444;
+          }
+
+          &:hover, &:focus {
+            color: #000;
+          }
+        }
+      }
+
+      &.social {
+        margin-right: 40px;
+        position: relative;
+        top: -5px;
+
+        @media screen and (max-width: 780px) {
+          float: none;
         }
 
-        &:hover, &:focus {
-          color: #000;
+        li {
+          float: left;
+          margin-right: lh(.5);
+
+          &:after {
+            content: none;
+            display: none;
+          }
+
+          a {
+            display: block;
+            height: 29px;
+            width: 28px;
+            text-indent: -9999px;
+
+            &:hover {
+              opacity: .8;
+            }
+          }
+
+          &.twitter a {
+            background: url('/static/images/twitter.png') 0 0 no-repeat;
+          }
+
+          &.facebook a {
+            background: url('/static/images/facebook.png') 0 0 no-repeat;
+          }
+
+          &.linkedin a {
+            background: url('/static/images/linkedin.png') 0 0 no-repeat;
+          }
         }
       }
     }