Developer-quality css

Adding my humble attempts at making the tools match the wireframes
given in invision. Only done via changes in _developer.scss, the
real rules will be made by UX team elsewhere.

Includes preliminary accessibility feedback, and basic RTL.

lms/djangoapps/teams/static/teams/templates/edit-team-member.underscore

 <li class="team-member">
     <a class="member-profile" href="<%= memberProfileUrl %>">
-        <p class="tooltip-custom"><%= username %></p>
-        <img class="image-url" src="<%= imageUrl %>" alt="profile page" />
+        <img class="image-url" src="<%= imageUrl %>" alt="<%= username %>'s profile page" />
     </a>
-    <span class="date-joined"><%= dateJoined %></span>
-    <span>|</span>
-    <span class="last-active"><%= lastActive %></span>
-    <a class="action-remove-member" data-username="<%= username %>" href=""><%- gettext("Remove") %></a>
+    <div class="member-info-container">
+    	<span class="primary"><%= username %></span>
+    	<div class="secondary">
+    		<span id="date-joined"><%= dateJoined %></span>
+    		<span> | </span>
+    		<span id="last-active"><%= lastActive %></span>
+    	</div>
+    </div>
+    <button class="action-remove-member" data-username="<%= username %>">
+        <%- gettext("Remove") %><span class="sr">&nbsp;<%= username %></span>
+    </button>
 </li>

lms/djangoapps/teams/static/teams/templates/instructor-tools.underscore

 <div class="wrapper-msg">
-    <span class="left-floater">
+    <h3 class="left-floater">
         <%- gettext("Instructor tools") %>
-    </span>
+    </h3>
     <span class="right-floater">
         <button class="action-delete">
             <%- gettext("Delete Team") %>

lms/static/sass/_developer.scss

@@ -232,3 +232,85 @@
     }
   }
 }
+
+//efischer; scratch space for teams instructor tools
+.view-teams {
+  .wrapper-msg {
+    @include clearfix();
+    max-width: grid-width(12);
+    margin: 0 auto;
+    border-top: 3px solid $orange;
+
+    .left-floater {
+      @include float(left);
+      text-transform: uppercase;
+      font-weight: $font-semibold;
+      color: $white;
+      line-height: $body-line-height;
+    }
+
+    .right-floater {
+      @include float(right);
+      line-height: $body-line-height;
+
+      button {
+        background: transparent;
+        border: 1px solid transparent;
+        color: $white;
+        box-shadow: 0 0 0 0;
+        font-weight: $font-regular;
+        text-shadow: 0 0;
+
+        &:hover {
+          color: $orange;
+          background: transparent;
+          border: 1px solid $orange;
+          box-shadow: 0 0 0 0;
+        }
+
+        &:focus {
+         box-shadow: 0 0 0 0;
+        }
+      }
+    }
+  }
+
+  .edit-members {
+    @extend %ui-no-list;
+
+    .team-member {
+      line-height: $body-line-height;
+      padding: 10px;
+    }
+
+    .member-info-container {
+      display: inline-block;
+      vertical-align: middle;
+      @include margin-left($baseline/2);
+
+      .primary {
+        font-size: 120%;
+      }
+
+      .secondary {
+        color: $lighter-base-font-color;
+        font-size: 80%;
+        display: block;
+      }
+    }
+
+    .member-profile {
+      img {
+        border: 1px solid $gray;
+      }
+    }
+
+    .action-remove-member {
+      color: $blue;
+      background: transparent;
+      border: 1px solid transparent;
+      font: inherit;
+    }
+  }
+}
+