studio - finalized tender widget styling

cms/static/sass/elements/_tender-widget.scss

@@ -23,7 +23,7 @@
 
 #tender_closer {
   color: $blue-l2 !important;
-  margin-top: 15px;
+  margin-top: 10px;
   margin-right: 5px;
   text-transform: uppercase;
 
@@ -66,6 +66,7 @@
 
 .widget-layout .content {
   overflow: auto;
+  height: auto !important;
   padding: 20px;
 }
 
@@ -110,10 +111,20 @@
   width: 97%;
 }
 
+.widget-layout p.note {
+  text-align: right !important;
+  display: inline-block !important;
+  position: absolute !important;
+  right: -130px !important;
+  top: -5px !important;
+  font-size: 13px !important;
+  opacity: 0.80;
+}
+
 .widget-layout .form-actions {
-  border-top: 1px solid #ccc;
-  margin-top: 10px;
-  padding-top: 10px;
+  margin: 15px 0;
+  border: none;
+  padding: 0;
 }
 
 .widget-layout dl.form {
@@ -124,19 +135,119 @@
   padding-bottom: 10px;
 }
 
-.widget-layout #brain_buster_captcha {
+.widget-layout dl.form:last-child {
+  border: none;
+  padding-bottom: 0;
+  margin-bottom: 20px;
+}
 
+.widget-layout dl.form dt, .widget-layout dl.form dd {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.widget-layout dl.form dt {
+  margin-right: 15px;
+  width: 70px;
+}
+
+.widget-layout dl.form dd {
+  width: 65%;
+  position: relative;
 }
 
 // specific elements
 .widget-layout #discussion_body {
-  margin: 0 0 15px 0;
+
 }
 
-.widget-layout .category dt, .widget-layout .category dd {
-  display: inline-block !important;
+.widget-layout #discussion_body:before {
+  content: "What Question or Feedback Would You Like to Share?";
+  display: block;
+  font-size: 14px;
+  margin-bottom: 5px;
+  color: #4c4c4c;
+  font-weight: 500;
+}
+
+
+.widget-layout dl#brain_buster_captcha {
+  float: none;
+  width: 100%;
+  border-top: 1px solid #f2f2f2;
+  margin-top: 10px;
+  padding-top: 10px;
+}
+
+.widget-layout dl#brain_buster_captcha dd {
+  display: block !important;
+}
+
+.widget-layout dl#brain_buster_captcha dd label {
+  display: block;
+  margin: 0 15px 0 0 !important;
+}
+
+.widget-layout dl#brain_buster_captcha dd #captcha_answer {
+  display: block;
+  width: 97%%;
+}
+
+.widget-layout .form-actions .btn-post_topic {
+  display: block;
+  width: 100%;
+  height: auto !important;
+  font-size: 16px;
+  font-weight: 700;
+  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 0 0 rgba(0,0,0,0);
+  -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 0 0 rgba(0,0,0,0);
+  box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 0 0 rgba(0,0,0,0);
+  -webkit-transition-property: background-color,0.15s;
+  -moz-transition-property: background-color,0.15s;
+  -ms-transition-property: background-color,0.15s;
+  -o-transition-property: background-color,0.15s;
+  transition-property: background-color,0.15s;
+  -webkit-transition-duration: box-shadow,0.15s;
+  -moz-transition-duration: box-shadow,0.15s;
+  -ms-transition-duration: box-shadow,0.15s;
+  -o-transition-duration: box-shadow,0.15s;
+  transition-duration: box-shadow,0.15s;
+  -webkit-transition-timing-function: ease-out;
+  -moz-transition-timing-function: ease-out;
+  -ms-transition-timing-function: ease-out;
+  -o-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+  -webkit-transition-delay: 0;
+  -moz-transition-delay: 0;
+  -ms-transition-delay: 0;
+  -o-transition-delay: 0;
+  transition-delay: 0;
+  border: 1px solid #34854c;
+  border-radius: 3px;
+  background-color: rgba(255,255,255,0.3);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.3)),color-stop(100%, rgba(255,255,255,0)));
+  background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.3),rgba(255,255,255,0));
+  background-image: -moz-linear-gradient(top, rgba(255,255,255,0.3),rgba(255,255,255,0));
+  background-image: -ms-linear-gradient(top, rgba(255,255,255,0.3),rgba(255,255,255,0));
+  background-image: -o-linear-gradient(top, rgba(255,255,255,0.3),rgba(255,255,255,0));
+  background-image: linear-gradient(top, rgba(255,255,255,0.3),rgba(255,255,255,0));
+  background-color: #25b85a;
+  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
+  -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
+  box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
+  color: #fff;
+  text-align: center;
+  margin-top: 20px;
+  padding: 10px 20px;
+}
+
+.widget-layout .form-actions #private-discussion-opt {
+  float: none;
+  text-align: left;
+  margin: 0 0 15px 0;
 }
 
-.widget-layout .category dt {
-  margin-right: 15px !important;
+.widget-layout .form-actions .btn-post_topic:hover, .widget-layout .form-actions .btn-post_topic:active {
+  background-color: #16ca57;
+  color: #fff;
 }
\ No newline at end of file

cms/templates/widgets/tender.html

 % if user.is_authenticated():
 <a class="show-tender" href="http://help.edge.edx.org/discussion/new" title="Use our feedback tool, Tender, to share your feedback">Provide Feedback</a>
+
 <script type="text/javascript">
   Tender = {
     hideToggle: true,