Style and behavior changes to the header and tooltips.

common/lib/xmodule/xmodule/css/annotatable/display.scss

@@ -1,39 +1,38 @@
 .annotatable-header {
-  border: 1px solid $border-color;
-  border-radius: 3px;
   margin-bottom: 1em;
-  padding: 2px 4px;
-  position: relative;
-
   .annotatable-title {
-    font-size: em(18);
+    font-size: em(20);
     text-transform: uppercase;
+    padding: 2px 4px;
   }
   .annotatable-description {
-    font-size: $body-font-size;
+    position: relative;
+    font-size: em(14);
+    padding: 2px 4px;
+    border: 1px solid $border-color;
+    border-radius: 3px;
+    .annotatable-toggle { }
   }
 }
 
-.annotatable-toggle {
-  display: block;
-  font-size: $body-font-size;
-}
-
 .annotatable-span {
   display: inline;
   cursor: pointer;
+
   @each $highlight in (
-    (red rgba(178,19,16,0.3)),
-    (orange rgba(255,165,0,0.3)),
-    (yellow rgba(255,255,10,0.3)), 
-    (green rgba(25,255,132,0.3)),
-    (blue rgba(35,163,255,0.3)),
-    (purple rgba(115,9,178,0.3))) {
+    (red rgba(178,19,16,0.3)),     (orange rgba(255,165,0,0.3)),
+    (yellow rgba(255,255,10,0.3)), (green rgba(25,255,132,0.3)),
+    (blue rgba(35,163,255,0.3)),   (purple rgba(115,9,178,0.3))) {
+    
     $marker: nth($highlight,1);
     $color: nth($highlight,2);
-    @if $marker == yellow { &.highlight { background-color: $color; } }
+
+    @if $marker == yellow { 
+      &.highlight { background-color: $color; } 
+    }
     &.highlight-#{$marker} { background-color: $color; }
   }
+
   &.hide {
     cursor: none;
     background-color: inherit;
@@ -45,14 +44,6 @@
   .annotatable-comment {
     display: none;
   }
-  .annotatable-icon {
-    margin: auto 2px auto 4px;
-  }
-}
-
-.annotatable-reply {
-  display: block;
-  margin-bottom: 10px;
 }
 
 .annotatable-help-icon {
@@ -67,31 +58,21 @@
 }
 
 .ui-tooltip.qtip.ui-tooltip-annotatable {
-  $color: #fff;
-  $background: rgba(0,0,0,.85);
-  $border-radius: 1em;
-
+  border: 1px solid #333;
+  border-radius: 1em;
+  background-color: rgba(0,0,0,.85);
+  color: #fff;
   -webkit-font-smoothing: antialiased;
 
   .ui-tooltip-titlebar {
-    color: $color;
-    background: $background;
-    border-left: 1px solid #333;
-    border-right: 1px solid #333;
-    border-top: 1px solid #333;
-    border-top-left-radius: $border-radius;
-    border-top-right-radius: $border-radius;
+    color: inherit;
+    background-color: transparent;
     padding: 5px 10px;
-
+    border: none;
     .ui-tooltip-title {
-      margin-right: 25px;
       padding: 5px 0px;
       border-bottom: 2px solid #333;
       font-weight: bold;
-      &:before { 
-        font-weight: normal;
-        content: "Guided Discussion: " 
-      }
     }
     .ui-tooltip-icon { 
       right: 10px;
@@ -103,39 +84,47 @@
     }
   }
   .ui-tooltip-content {
-    color: $color;
-    background: $background;
+    color: inherit;
+    background-color: transparent;
     text-align: left;
     font-weight: 400;
     font-size: 11px;
     padding: 0 10px;
-    max-width: 300px;
-    max-height: 300px;
-    border: none;
-    border-bottom-left-radius: $border-radius;
-    border-bottom-right-radius: $border-radius;
-    border-left: 1px solid #333;
-    border-right: 1px solid #333;
-    border-bottom: 1px solid #333;
-    overflow: auto;
-    
+  } 
+  p { color: inherit; }
+}
+
+.ui-tooltip.qtip.ui-tooltip-annotatable-comment {
+  max-width: 350px;
+  .ui-tooltip-title:before { 
+    font-weight: normal;
+    content: "Guided Discussion: ";
+  }
+  .ui-tooltip-content {  
     .annotatable-comment {
       display: block;
       margin: 0px 0px 10px 0;
+      max-height: 200px;
+      overflow: hidden;
     }
-  } 
-  p { color: $color }
-
+    .annotatable-reply {
+      display: block;
+      border-top: 2px solid #333;
+      padding: 5px 0;
+      margin: 0;
+      text-align: center;
+    }
+  }
   &:after {
-    content: ' ';
-    display: block;
+    content: '';
+    display: inline-block;
     position: absolute;
-    bottom: -14px;
+    bottom: -20px;
     left: 50%;
     height: 0;
     width: 0;
-    margin-left: -7px;
+    margin-left: -5px;
     border: 10px solid transparent;
     border-top-color: rgba(0, 0, 0, .85);
   }
-}
+}