styling the 'is this your computer' view

resources/static/css/common.css

@@ -168,6 +168,21 @@ button,
     white-space: nowrap;
 }
 
+button.negative {
+    border: 1px solid #E70227;
+    color: #fff;
+    text-shadow: -1px -1px 0 #E70227;
+
+    -webkit-box-shadow: 0 0 0 1px #FF1560 inset;
+       -moz-box-shadow: 0 0 0 1px #FF1560 inset;
+         -o-box-shadow: 0 0 0 1px #FF1560 inset;
+            box-shadow: 0 0 0 1px #FF1560 inset;
+
+    background-color: #E70227;
+    background-image: -moz-linear-gradient(center top , #FF1560 0pt, #E70227 100%);
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FF1560), color-stop(100%, #E70227));
+}
+
 button:hover,
 button:focus,
 .button:hover,
@@ -178,6 +193,17 @@ button:focus,
 
 }
 
+button.negative:hover,
+button.negative:focus,
+.button.negative:hover,
+.button.negative:focus{
+    background-color: #FF1560;
+    background-image: -moz-linear-gradient(center top , #FF1560 70%, #E70227 100%);
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(70%, #FF1560), color-stop(100%, #E70227));
+
+}
+
+
 button:active,
 .button:active {
     background-color: #006EC6;

resources/static/dialog/css/popup.css

@@ -402,3 +402,24 @@ a.emphasize {
 #checkemail {
     text-align: center;
 }
+
+#your_computer_content {
+  width: 90%;
+  margin: auto;
+  text-align: left;
+}
+
+#your_computer_content p button {
+  float: left;
+  margin: 0 1em 0 0;
+  vertical-align: middle;
+  font-size: 1em;
+  width: 4em;
+}
+
+#your_computer_content p {
+  padding-bottom: 1em;
+  line-height: 1.3em;
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
\ No newline at end of file

resources/static/dialog/views/is_this_your_computer.ejs

@@ -2,6 +2,7 @@
       License, v. 2.0. If a copy of the MPL was not distributed with this
       file, You can obtain one at http://mozilla.org/MPL/2.0/. */ %>
 
+  <div id="your_computer_content">
     <h2><%= gettext('If you don\'t mind me asking, is this your computer?') %></h2>
 
     <p>
@@ -10,10 +11,10 @@
     </p>
 
     <p>
-      <button class="this_is_not_my_computer" tabindex="3"><%= gettext('no') %></button>
+      <button class="this_is_not_my_computer negative" tabindex="3"><%= gettext('no') %></button>
       <%= gettext('If you\'re at a public computer such as a library or internet cafe, we\'ll ask you ' +
                   'for your password again in five minutes.') %>
     </p>
-
+  </div>