added a cleaner arrow implementation

lms/static/sass/multicourse/_dashboard.scss

@@ -203,28 +203,23 @@
           display: block;
           left: 0px;
           position: absolute;
+          z-index: 50;
           top: 0px;
           @include transition(all, 0.15s, linear);
           right: 0px;
         }
 
         .arrow {
-          border-top: 8px solid;
-          border-left: 8px solid;
-          border-color: rgba(0,0,0, 0.7);
-          @include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.8), -1px 0 1px 0 rgba(255,255,255, 0.8));
-          content: "";
-          display: block;
-          height: 55px;
-          left: 50%;
-          margin-left: -10px;
-          margin-top: -30px;
-          opacity: 0;
           position: absolute;
-          top: 50%;
-          @include transform(rotate(-45deg));
+          z-index: 100;
+          width: 100%;
+          font-size: 70px;
+          line-height: 110px;
+          text-align: center;
+          text-decoration: none;
+          color: rgba(0, 0, 0, .7);
+          opacity: 0;
           @include transition(all, 0.15s, linear);
-          width: 55px;
         }
 
         &:hover {

lms/templates/dashboard.html

@@ -73,7 +73,7 @@
           %>
           <a href="${course_target}" class="cover" style="background-image: url('${course_image_url(course)}')">
             <div class="shade"></div>
-            <div class="arrow"></div>
+            <div class="arrow">&#10095;</div>
           </a>
           <section class="info">
             <hgroup>